/* === Panel Hnos Barberá ====================================================
   Se usa en tablet apoyada en la barra, en el móvil del encargado y en el
   ordenador de la oficina. Objetivo: que se lea de un vistazo y de lejos, y
   que los botones se puedan dar con el dedo y con prisa.
   ========================================================================= */

:root {
  --vino:    #8c2f39;
  --vino-cl: #b04552;
  --tinta:   #1c1917;
  --suave:   #6b6560;
  --papel:   #faf8f5;
  --tarjeta: #fff;
  --borde:   #e7e1da;
  --ok:      #1f7a4d;
  --espera:  #b4690e;
  --malo:    #9a3412;
  --radio:   12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #f5f1ec; --suave: #a8a29e; --papel: #171513;
    --tarjeta: #221f1c; --borde: #35302b; --vino-cl: #d97080;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--papel);
  color: var(--tinta);
  /* iPhone con notch: que la cabecera no quede debajo del sistema */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* --- login ---------------------------------------------------------------- */
.login {
  max-width: 22rem; margin: 12vh auto; padding: 1.75rem;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); display: flex; flex-direction: column; gap: .9rem;
}
.login h1 { margin: 0; font-size: 1.4rem; color: var(--vino); }
.login .sub { margin: -.7rem 0 .4rem; color: var(--suave); font-size: .9rem; }
.login label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--suave); }
.login input {
  font-size: 1rem; padding: .7rem; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--papel); color: var(--tinta);
}
.login input:focus-visible { outline: 2px solid var(--vino-cl); outline-offset: 1px; }

/* --- cabecera ------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  justify-content: space-between;
  /* El relleno lateral crece para que el contenido quede en la MISMA columna
     centrada que la lista y las zonas. Sin esto, en un monitor ancho la fecha
     se iba al borde izquierdo y las tarjetas quedaban en el centro: parecían
     dos páginas distintas. */
  padding: .7rem max(1rem, calc((100% - 68rem) / 2));
  background: var(--tarjeta); border-bottom: 1px solid var(--borde);
}
/* min-width:0 en los dos: sin él, un hijo con texto largo —el correo de la
   sesión, o el selector— impone su ancho al contenedor flex y empuja la
   página fuera de la pantalla. Es lo que se salía a 320 px. */
.dias { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.fecha { display: flex; flex-direction: column; }
.fecha strong { font-size: 1.05rem; text-transform: capitalize; }
.fecha input {
  border: 0; background: transparent; color: var(--suave);
  font: inherit; font-size: .8rem; padding: 0;
}
.sesion { display: flex; align-items: center; gap: .6rem; font-size: .8rem;
  color: var(--suave); min-width: 0; }
/* El correo puede ser larguísimo. Se recorta con puntos suspensivos en vez de
   empujar el botón de salir fuera de la pantalla. */
.sesion span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw;
}

/* El buscador: «llama Fran y dice que no viene». Crece con el hueco que haya,
   pero con min-width:0 para que su texto no empuje la cabecera fuera de la
   pantalla, que es como se rompió esto la vez anterior. */
.buscar { display: flex; gap: .4rem; flex: 1 1 14rem; min-width: 0; }
.buscar input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .5rem .7rem;
  font: inherit; font-size: .9rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
}
.buscar input:focus-visible { outline: 2px solid var(--vino-cl); outline-offset: 1px; }

/* --- resumen -------------------------------------------------------------- */
.resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .6rem; padding: 1rem;
}
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .8rem; display: flex; flex-direction: column;
}
.cifra { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--vino); }
.etiqueta { font-size: .8rem; color: var(--suave); text-transform: capitalize; }
.extra { font-size: .72rem; color: var(--suave); }

/* --- lista de reservas ---------------------------------------------------- */
.lista { display: flex; flex-direction: column; gap: .6rem; padding: 0 1rem 2rem; }

/* La fila tiene cuatro bandas: quién viene, en qué estado está, qué se puede
   hacer con ella, y el panel que se abre al pulsar algo.
   `minmax(0, 1fr)` y no `1fr` en la columna del nombre: un track `1fr` tiene
   suelo de min-content, pero el track `auto` de al lado reclama su max-content
   ANTES de que se reparta lo flexible. Con las acciones en la misma línea eso
   dejaba la columna del nombre en 0 px de ancho —medido— y el nombre, el
   teléfono y las observaciones se pintaban fuera de su caja, encima del número
   de comensales y de la pastilla de estado. Con minmax(0,1fr) la columna puede
   encoger, y el texto se parte en vez de desbordarse. */
.reserva {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-left: 4px solid var(--suave);
  border-radius: var(--radio); padding: .8rem;
  display: grid; gap: .5rem .9rem;
  grid-template-areas:
    "hora quien pax"
    "estado estado estado"
    "acciones acciones acciones"
    "panel panel panel";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}
.reserva.ok     { border-left-color: var(--ok); }
.reserva.espera { border-left-color: var(--espera); }
.reserva.hecha  { border-left-color: var(--suave); opacity: .72; }
.reserva.malo   { border-left-color: var(--malo); opacity: .72; }
.reserva.ocupado { opacity: .5; pointer-events: none; }

.hora { grid-area: hora; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quien {
  grid-area: quien; display: flex; flex-direction: column; gap: .1rem; min-width: 0;
  /* Un nombre transcrito por el agente puede venir de una sola pieza. Antes de
     ensanchar la columna y descuadrar la fila, que se parta. */
  overflow-wrap: anywhere;
}
.quien strong { font-size: 1.05rem; }
.tel { color: var(--vino-cl); text-decoration: none; font-size: .9rem; width: fit-content; }
.obs { font-size: .85rem; color: var(--suave); }
.aviso { font-size: .8rem; color: var(--malo); font-weight: 600; }
.pax { grid-area: pax; text-align: right; white-space: nowrap; font-size: .85rem; color: var(--suave); }
.pax strong { display: block; font-size: 1.35rem; color: var(--tinta); }
.estado { grid-area: estado; }
.acciones { grid-area: acciones; display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }

.pastilla {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--borde); color: var(--suave);
}
.pastilla.ok     { background: color-mix(in srgb, var(--ok) 15%, transparent);     color: var(--ok); }
.pastilla.espera { background: color-mix(in srgb, var(--espera) 18%, transparent); color: var(--espera); }
.pastilla.malo   { background: color-mix(in srgb, var(--malo) 15%, transparent);   color: var(--malo); }

/* --- controles ------------------------------------------------------------ */
.btn {
  /* 44px de alto mínimo: es lo que hace falta para acertar con el dedo. */
  min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--vino); border-radius: 8px;
  background: var(--vino); color: #fff;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.btn.sutil { background: transparent; color: var(--vino-cl); border-color: var(--borde); }
/* La zona que pidió el cliente. Va en hueco, no en relleno: es una sugerencia
   que hay que poder distinguir de un botón de acción sin leerlo. */
.btn.zona { background: transparent; color: var(--ok, #7bbf7b); border-color: currentColor; }
.btn.grande { min-height: 48px; font-size: 1rem; }
.btn:active { transform: translateY(1px); }
select.sala {
  min-height: 44px; padding: .5rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
  /* Un <select> se ensancha hasta caber su opción más larga, y la más larga
     aquí es «Salón Principal (5) — no caben ← la pide». En un móvil eso saca
     la página de la pantalla. Con min-width:0 y max-width:100% se queda dentro
     y recorta el texto: al desplegarlo se ve entero igual. */
  min-width: 0; max-width: 100%; flex: 1 1 8rem;
}

.cargando, .vacio { padding: 2rem 1rem; color: var(--suave); text-align: center; }
.error { color: var(--malo); font-size: .9rem; margin: 0; }
.pie { min-height: 1.2em; margin: 0; font-size: .85rem; color: var(--suave); }

/* --- pantalla ancha ------------------------------------------------------- */
@media (min-width: 46rem) {
  /* Los datos en una línea y los botones en otra, TAMBIÉN aquí. Meterlo todo en
     una sola línea es lo que reventaba la fila: el selector de zona más los
     cuatro botones piden 774 px medidos, y a 1440 px la columna útil son 1088.
     No cabía en ningún ancho real, solo lo parecía mientras los nombres eran
     cortos. */
  .reserva {
    grid-template-areas:
      "hora quien pax estado"
      "acciones acciones acciones acciones"
      "panel panel panel panel";
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
  }
  .reserva .quien { align-items: flex-start; }
  .lista, .resumen, .zonas, .diaCab, .nueva {
    max-width: 68rem; margin-left: auto; margin-right: auto;
  }
}

/* === Aforo por zona ======================================================
   Lo que se mira de reojo mientras se habla por teléfono: cuánto queda en cada
   sala. Por eso la cifra grande es la ocupación y la barra da la lectura sin
   leer números. */
/* `auto` en los lados y no 0: esta regla va DESPUÉS del @media del final, y con
   la misma especificidad gana la última. Con `margin: 0 0 1rem` anulaba en
   silencio el centrado que el media query acababa de poner, y el bloque de
   zonas se quedaba pegado a la izquierda mientras el resto iba centrado.
   En móvil no cambia nada: sin max-width, `auto` vale 0 y el hueco lo da el
   relleno. */
.zonas { margin: 0 auto 1rem; padding: 0 1rem; }
.zonas h3 {
  margin: .2rem 0 .5rem; font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--suave);
}
.rejilla {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.zona {
  border: 1px solid var(--borde); border-radius: 8px; padding: .6rem .7rem;
  display: grid; gap: .2rem;
}
.zona .zn { font-size: .82rem; color: var(--suave); }
.zona .zc { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.zona .zc small { font-size: .8rem; font-weight: 400; opacity: .6; }
.zona .zl { font-size: .78rem; }
.zona .barra {
  height: 4px; border-radius: 2px; background: var(--borde);
  overflow: hidden; margin-top: .25rem;
}
.zona .barra i { display: block; height: 100%; background: var(--vino-cl); }
/* Justo y lleno se distinguen por color Y por texto («quedan 3» / «completa»):
   en una pantalla a contraluz en una barra, el color solo no se ve. */
.zona.justo { border-color: #b58b49; }
.zona.justo .barra i { background: #b58b49; }
.zona.lleno { border-color: var(--malo); }
.zona.lleno .zl { color: var(--malo); font-weight: 600; }
.zona.lleno .barra i { background: var(--malo); }

/* Cabecera de cada día cuando se ven varios. */
/* Selector de cuántos días. Mismo alto que los botones: se toca con el dedo. */
#cuantos {
  min-height: 44px; padding: .4rem .5rem; font: inherit; font-size: .85rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
}

.diaCab {
  /* Lo mismo que en .zonas: los lados en `auto`, y el hueco por relleno. */
  margin: 1.4rem auto .6rem; font-size: 1rem; text-transform: capitalize;
  border-top: 1px solid var(--borde); padding: .9rem 1rem 0;
}
.diaCab:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* === Controles dentro de la fila =========================================
   Sustituyen a los prompt() y confirm() del navegador. Ocupan una línea entera
   de la fila para que el resto de la agenda se siga viendo: la gracia de no
   usar una ventana modal es justamente esa. */
/* Banda propia de la fila, no un botón más dentro de .acciones. Colgado de
   .acciones con `flex: 1 1 100%` el ancho salía de un cálculo circular —el
   100% se resolvía contra un contenedor cuyo ancho lo fijaba su propio
   contenido— y la columna de acciones acababa reclamando 774 px. */
.enFila {
  grid-area: panel;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: .1rem; padding-top: .6rem; border-top: 1px dashed var(--borde);
  min-width: 0;
}
.enFila .pregunta { font-size: .88rem; color: var(--tinta); flex: 1 1 12rem; min-width: 0; }
.enFila input.pers {
  width: 5rem; min-height: 44px; text-align: center;
  font: inherit; font-size: 1.1rem; font-weight: 700;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--tinta);
}
/* Las flechas del number sobran: para eso están los botones + y −, que se dan
   con el pulgar. */
.enFila input.pers::-webkit-outer-spin-button,
.enFila input.pers::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.enFila input.pers { -moz-appearance: textfield; appearance: textfield; }

/* === Alta desde el mostrador ============================================= */
.nueva {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-left: 4px solid var(--vino);
  border-radius: var(--radio); padding: 1rem;
  margin: 1rem auto; max-width: 68rem;
}
.nueva h2 { margin: 0 0 .8rem; font-size: 1.05rem; color: var(--vino); }
.nueva .campos {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.nueva label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .8rem; color: var(--suave); min-width: 0;
}
.nueva label.ancho { grid-column: 1 / -1; }
/* El rótulo entero en una sola línea de la columna, con su aclaración al lado.
   Sin este <span> el «(opcional)» era otro elemento flex y caía debajo. */
.nueva label .et { display: block; min-height: 1.2em; }
.nueva label small { font-weight: 400; opacity: .8; }
.nueva input, .nueva select {
  min-height: 44px; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--papel); color: var(--tinta); min-width: 0;
}
.nueva input:focus-visible, .nueva select:focus-visible {
  outline: 2px solid var(--vino-cl); outline-offset: 1px;
}
.nueva .acciones { margin-top: .9rem; }

/* El aviso de que algo ha fallado, dentro de la fila. Rojo y con su botón: se
   queda hasta que se lee, que es lo que hacía el alert() del navegador sin
   tapar la pantalla. */
.enFila .pregunta.malo { color: var(--malo); font-weight: 600; }

/* === Quién no ha llegado ==================================================
   Va arriba del todo y en rojo porque es lo único de la pantalla que caduca:
   una mesa con cuatro personas apuntadas que lleva media hora vacía es aforo
   que se está tirando mientras hay gente esperando en la puerta.

   No cancela sola. Un atasco de veinte minutos es lo más normal del mundo, y
   quitarle la mesa a alguien que viene de camino es peor que tenerla vacía un
   rato: lo que hace esto es poner el teléfono a un toque. */
.retrasos { max-width: 68rem; margin: 1rem auto 0; padding: 0 1rem; }
.retrasos h3 {
  margin: 0 0 .5rem; font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--malo);
}
.tarde {
  background: var(--tarjeta);
  border: 1px solid var(--malo); border-left: 4px solid var(--malo);
  border-radius: var(--radio); padding: .8rem; margin-bottom: .6rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
/* Como en la fila de reserva: min-width 0 para que un nombre largo parta en vez
   de empujar los botones fuera de la pantalla. */
.tarde .tq { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column;
  overflow-wrap: anywhere; }
.tarde .tm { font-size: .8rem; color: var(--suave); }
.tarde.ocupado { opacity: .5; pointer-events: none; }
/* El aviso de error, si lo hay, en su propia línea. Aquí no hay rejilla de la
   que colgar una banda: es un flex, y la banda se hace con la base al 100 %. */
.tarde .enFila { flex: 1 1 100%; }
/* El botón de llamar es un enlace tel:, no un <button>: en la tablet abre el
   marcador con el número puesto, que es justo lo que hace falta. */
.tarde a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Hasta cuándo ocupa la mesa, debajo de la hora. Es la mitad de la información
   que hace falta en sala: saber que la de las 13:00 se va a las 14:45 es lo
   que permite decirle a quien llama que a las 15:00 hay sitio. */
.hora small {
  display: block; font-size: .7rem; font-weight: 400;
  color: var(--suave); white-space: nowrap;
}