/* =========================================================
   MIVI — app.css
   Reset, base y componentes reutilizables en toda la aplicación.
   Lo propio de cada módulo va en su <modulo>.css.
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/*
 * `hidden` tiene que ocultar. Suena a perogrullada y no lo es.
 *
 * El `display:none` que el navegador aplica a `[hidden]` vive en su hoja de
 * fábrica, y en la cascada CUALQUIER regla de autor con `display:` le gana. Como
 * en MIVI casi todo componente es `display: grid` o `display: flex`, poner
 * `hidden` no ocultaba casi nada: el tablero seguía enseñando la canción que
 * acababa de sonar, la lista del comensal se quedaba como una caja vacía con
 * borde, y los resultados de búsqueda no se recogían al vaciarse.
 *
 * Lo peor es cómo falla: `elemento.hidden = true` no da error, la propiedad
 * queda puesta y el atributo aparece en el inspector. Todo dice que está
 * oculto menos la pantalla.
 *
 * El `!important` no es un atajo: es el único nivel que gana a un `display:`
 * escrito después. Sin él el fallo vuelve con el próximo componente.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

input, button, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

a { color: var(--purple-lit); text-decoration: none; }
a:hover { color: var(--neon-soft); }

/* Foco visible siempre: quitarlo rompe la navegación por teclado. */
:focus-visible {
  outline: 2px solid var(--purple-lit);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Marca ---------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--step-1);
  color: var(--purple);
}

.marca__texto {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ---------- Formularios ---------- */
.formulario {
  display: grid;
  gap: var(--step-3);
}

.campo { display: grid; gap: 0.375rem; }

.campo__etiqueta {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
}

.campo__control {
  width: 100%;
  padding: 0.8rem 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.campo__control::placeholder { color: var(--ink-mute); }

.campo__control:hover { border-color: var(--line-hi); }

.campo__control:focus {
  outline: none;
  background: var(--surface-hi);
  border-color: var(--purple-lit);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* El estado de error se marca con borde Y con texto: el color por sí solo no
   comunica nada a quien no lo distingue. */
.campo__control[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 90, 122, 0.15);
}

.campo__error {
  font-size: var(--fs-sm);
  color: var(--error);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-1);
  padding: 0.85rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-hi);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              opacity var(--t-fast) var(--ease-out);
}

.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--principal {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--glow-purple);
}

.boton--principal:hover { box-shadow: var(--glow-neon); }

.boton[disabled],
.boton[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Alertas ---------- */
.alerta {
  padding: 0.8rem 1rem;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}

/* <output> es inline por defecto y el padding de .alerta no empujaria a los
   hermanos. El :not([hidden]) fue el parche local a la trampa que arriba se
   resuelve para toda la aplicacion; ya no hace falta, pero se queda porque
   tampoco estorba y deja la regla legible sin depender del !important. */
output.alerta:not([hidden]) {
  display: block;
}

.alerta--error {
  color: var(--error);
  background: var(--error-soft);
  border-color: rgba(255, 90, 122, 0.3);
}

/* Confirmación de una acción que salió bien: "mesa 12 abierta". Verde y no
   ámbar — el ámbar está reservado para cifras de ingresos (ver tokens.css). */
.alerta--ok {
  color: var(--ok);
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

/* ---------- Cifras de dinero ----------
   El ámbar aparece SOLO aquí. Ver tokens.css. */
.cifra-ingreso {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* ---------- Utilidades ---------- */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   Diálogo
   =========================================================
   Vivía en mesas.css, pero lo usan los dos frentes: la rejilla de mesas para
   abrir una mesa, la cola y la rockola para confirmar. Aquí lo carga cualquier
   pantalla.

   Es lo que sustituye a `window.confirm()`: mismos tokens, mismos colores, y
   sin traer una librería de fuera —que además la CSP de este proyecto
   rechazaría, porque prohíbe scripts de terceros y estilos en línea.
   ========================================================= */

.dialogo {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  /*
   * `<dialog>` se centra solo con el `margin: auto` que trae el navegador, pero
   * el reset de arriba (`* { margin: 0 }`) se lo lleva por delante y el diálogo
   * acaba pegado a la esquina superior izquierda, saliéndose de la pantalla en
   * un móvil. Hay que devolvérselo a mano.
   */
  margin: auto;
}

.dialogo::backdrop { background: rgba(8, 6, 15, 0.72); backdrop-filter: blur(4px); }

.dialogo__caja {
  display: grid;
  gap: var(--step-1);
  width: min(92vw, 26rem);
  padding: var(--step-4);
  background: var(--deep);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
}

.dialogo__titulo { font-family: var(--font-display); font-size: var(--fs-h3); }

.dialogo__sub {
  margin-bottom: var(--step-1);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.dialogo__botones {
  display: flex;
  justify-content: end;
  gap: var(--step-1);
  margin-top: var(--step-2);
}

/* El aviso lleva su propio color según lo que esté en juego. */
.dialogo__caja--aviso   { border-color: var(--amber); }
.dialogo__caja--peligro { border-color: var(--error); }

/* Una etiqueta corta como «Mejor no» no debe partirse en dos líneas y dejar el
   botón con forma de pastilla deforme. */
.dialogo__botones .boton { white-space: nowrap; }

/* En un móvil estrecho los dos botones ocupan la fila entera, con el de
   confirmar a la derecha, que es donde cae el pulgar. */
@media (max-width: 26rem) {
  .dialogo__botones { flex-direction: column-reverse; }
  .dialogo__botones .boton { width: 100%; }
}

/* Botón para acciones que no se pueden deshacer: rotar un QR, por ejemplo. */
.boton--peligro {
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}

.boton--peligro:hover { filter: brightness(1.08); }