/* Comandas — pensado para tablet y teléfono: botones grandes, poco texto. */

/* Paleta Estratec: azul profundo #0a2e42, azul corporativo #1c9dd7,
   celeste #46b8e6, fondos #e8eef5 / #cfe3f4, ámbar #ffb400. */
:root {
  --fondo:        #f1f5fa;
  --superficie:   #ffffff;
  --superficie2:  #e8eef5;
  --borde:        #cfe3f4;
  --texto:        #0a2e42;
  --sutil:        #5c7d95;
  --acento:       #0e7ab0;   /* azul Estratec oscurecido: legible sobre blanco */
  --acento-claro: #1c9dd7;   /* azul de marca, para bordes y detalles */
  --acento-flojo: #eaf5fc;
  --ok:           #12794a;
  --alerta:       #c92a30;
  --aviso:        #8a5c00;   /* base del ámbar #ffb400, legible en claro */
  --sombra:       0 1px 2px rgba(10, 46, 66, .07), 0 1px 3px rgba(10, 46, 66, .05);
  --radio:        14px;

  /* Gama de acompañamiento: todos primos del azul de marca (cian, turquesa,
     verde azulado, índigo). Sirven para que la pantalla no sea un solo tono
     plano: cada categoría toma uno y las estaciones de cocina se distinguen.
     Cada color va en pareja: el fuerte para texto y bordes, el flojo de fondo. */
  --t1:        #0e7ab0;  --t1-flojo: #eaf5fc;   /* azul de marca   */
  --t2:        #0f8ea8;  --t2-flojo: #e6f6f8;   /* cian            */
  --t3:        #10827b;  --t3-flojo: #e4f5f2;   /* turquesa        */
  --t3-vivo:   #35c5b1;                          /* el mismo turquesa, aclarado
                                                    para que se lea sobre el
                                                    azul profundo del fondo   */
  --t4:        #2a6bb8;  --t4-flojo: #ebf1fc;   /* azul acero      */
  --t5:        #4a5fb0;  --t5-flojo: #eeeffb;   /* índigo suave    */
  --t6:        #14708c;  --t6-flojo: #e7f3f7;   /* petróleo        */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Un display: grid o flex de clase le gana al hidden del navegador, y el
   elemento se queda visible. Con esto, hidden siempre esconde. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }

/* ============================================================== acomodo ===

   Teléfono: una sola columna, con la barra de arriba y el pie fijo.
   Pantalla ancha: barra lateral fija + contenido + panel de la cuenta.
   ========================================================================= */

.app { min-height: 100vh; }

/* --- el menú en teléfono y tablet vertical ------------------------------
   Es el mismo menú de la pantalla ancha, pero sale como cajón desde la
   izquierda al tocar el botón de la barra. Antes solo existía en escritorio
   y en el teléfono no había manera de cambiar de módulo. */
@media (max-width: 979px) {
  .lateral {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 82vw;
    max-width: 290px;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    background: var(--texto);
    color: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-102%);
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(10, 46, 66, .3);
  }
  body.menu-abierto .lateral { transform: translateX(0); }

  .velo-menu {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(10, 46, 66, .5);
  }

  /* El botón del menú vive en la barra de arriba, junto al título. */
  .abrir-menu {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    color: var(--texto);
    background: var(--superficie2);
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
  .abrir-menu:active { background: var(--borde); }

  /* El menú abre la navegación completa; la flecha solo regresa un paso. Van
     juntas, así que la flecha se aprieta para no comerse el título. */
  .abrir-menu + .volver { margin-left: -6px; }

  .cerrar-menu {
    margin-left: auto;
    width: 36px; height: 36px;
    font-size: 26px;
    line-height: 1;
    color: #9fc0dc;
    background: none;
    border: none;
    cursor: pointer;
  }
}

/* --- teléfono y tablet vertical: la cuenta vive abajo, siempre a la vista ---
   Al buscar salen muchos productos; si la cuenta fuera parte del scroll de la
   página, quedaría enterrada. Así se queda fija y se despliega con su propio
   scroll, sin perder de vista lo que ya se agregó. */
@media (max-width: 979px) {
  .app.con-orden .panel-orden {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -2px 14px rgba(10, 46, 66, .12);
  }

  .app.con-orden .panel-cabeza { display: none; }

  /* Cerrada: solo el tirador y el total. Abierta: la lista con su scroll. */
  .app.con-orden .panel-lista {
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px;
  }
  .app.con-orden.orden-abierta .panel-lista { display: block; }
  .app.con-orden.orden-abierta .panel-lista .seccion-titulo { margin-top: 14px; }

  .panel-tirador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--acento);
    background: var(--acento-flojo);
    border: none;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
  }
  .panel-tirador .flecha {
    font-size: 18px;
    line-height: 1;
    transition: transform .18s;
  }
  .orden-abierta .panel-tirador .flecha { transform: rotate(180deg); }

  /* El pie ya vive dentro del panel: deja de flotar por su cuenta. */
  .app.con-orden .pie,
  .app.con-cuenta .pie {
    position: static;
    box-shadow: none;
    border-top: 1px solid var(--borde);
  }

  /* Espacio para que el panel no tape el final del menú. */
  .app.con-orden .contenido { padding-bottom: 150px; }

  /* En la pantalla de cobro el resumen no se pliega: es lo que hay que
     revisar antes de cobrar, así que baja como una sección más. */
  .app.con-cuenta .panel-orden {
    display: block;
    padding: 0 14px 120px;
  }
  .app.con-cuenta .panel-cabeza {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--borde);
  }
  .app.con-cuenta .panel-cabeza b { font-size: 18px; }
  .app.con-cuenta .panel-cabeza .icono { color: var(--acento-claro); }
}


@media (min-width: 980px) {
  .app {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;                    /* cada columna scrollea por su cuenta */
    overflow: hidden;
  }

  /* En la comanda entra además el panel de la cuenta, a la derecha. */
  .app.con-orden,
  .app.con-cuenta { grid-template-columns: 264px minmax(0, 1fr) 360px; }

  .lateral {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100vh;
    padding: 18px 14px;
    background: var(--texto);          /* azul profundo Estratec */
    color: #fff;
  }

  /* Aquí el menú ya está fijo: el botón y el velo estorbarían. */
  .abrir-menu, .cerrar-menu, .velo-menu { display: none; }
}

/* Comunes a las dos formas del menú: en teléfono es cajón, en pantalla ancha
   columna fija, pero por dentro se ven igual. */
.lateral-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.lateral-titulo { font-size: 17px; font-weight: 800; letter-spacing: .3px; }

.lateral-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, .08);
  border-radius: 12px;
}
.lateral-usuario .avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: var(--acento-claro);
  border-radius: 50%;
  text-transform: uppercase;
}
.lateral-nombre {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nombre y, debajo, qué es: en una caja donde se turnan tres personas con la
   misma tablet, el nombre solo no dice con qué permisos se está trabajando. */
.lateral-quien { min-width: 0; }
.lateral-quien b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lateral-quien small { display: block; font-size: 12px; color: #9fc0dc; }

/* El menú es la parte que crece, y por lo tanto la que scrollea. La marca y
   el nombre del usuario se quedan arriba, y «Salir» abajo: si scrolleara la
   barra entera, para cerrar sesión habría que bajar hasta el final.

   `min-height: 0` no es adorno: sin eso un hijo de un contenedor flex no se
   encoge por debajo de su contenido, el overflow nunca se activa y la lista
   se queda cortada sin manera de bajar. Es justo lo que pasaba con las 24
   opciones de hoy en una pantalla de 800 px. */
.lateral-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Una barra de scroll discreta: sobre el azul profundo, la del sistema se ve
   como una raya blanca. */
.lateral-menu::-webkit-scrollbar { width: 6px; }
.lateral-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
}
.lateral-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }
.lateral-menu::-webkit-scrollbar-track { background: transparent; }

/* Cada grupo es un <details>: la cabecera se toca para abrirlo y cerrarlo, y
   el que contiene la pantalla abierta viene desplegado. Siete grupos de siete
   opciones no caben a la vez en la pantalla de una tablet; plegados, sí. */
.lateral-grupo { margin-bottom: 2px; }

.lateral-grupo > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #d6e6f4;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}
.lateral-grupo > summary::-webkit-details-marker { display: none; }
.lateral-grupo > summary:hover { background: rgba(255, 255, 255, .07); }
.lateral-grupo[open] > summary { color: #fff; }

/* El cuadrito de color: es lo que distingue un grupo de otro de un vistazo,
   más rápido que leer el nombre. Cada uno con su tono de la gama. */
.grupo-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  color: #fff;
  border-radius: 9px;
}
/* Los tonos de la gama están calculados para leerse sobre blanco, y aquí el
   fondo es el azul profundo de la lateral: puestos tal cual, los cuadritos
   se apagan y dejan de distinguir un grupo de otro, que es lo único que
   tienen que hacer. Estos son los mismos tonos aclarados. */
.grupo-marca.t1 { background: #2a93cf; }
.grupo-marca.t2 { background: #14a6c2; }
.grupo-marca.t3 { background: #159c93; }
.grupo-marca.t4 { background: #4285d6; }
.grupo-marca.t5 { background: #6b7fd0; }
.grupo-marca.t6 { background: #1b8aa8; }

.grupo-nombre { flex: 1; min-width: 0; }
.grupo-flecha { flex: none; display: flex; opacity: .6; transition: transform .15s; }
.lateral-grupo[open] > summary .grupo-flecha { transform: rotate(180deg); }

/* Las opciones, con la guía vertical que las ata a su grupo. */
.grupo-opciones {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 25px;
  padding-left: 11px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.lateral-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 600;
  color: #9fc0dc;
  border-radius: 10px;
}
.grupo-opciones .lateral-opcion { padding: 10px 10px; font-size: 14px; }
.lateral-opcion.activa { background: var(--acento-claro); color: #fff; }

/* Inicio y Dashboard, fuera de los grupos: a donde se vuelve cuando uno se
   perdió y a donde va el dueño. Juntos y pegados, como un bloque; el aire va
   después del último, antes de los grupos. */
.lateral-inicio {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-bottom: 4px;
  padding: 13px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #d6e6f4;
  background: rgba(255, 255, 255, .08);
  border-radius: 12px;
}
.lateral-inicio.activa { color: #fff; background: var(--acento-claro); }
.lateral-inicio + .lateral-menu { margin-top: 8px; }
.lateral-opcion.salir {
  flex: none;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

@media (min-width: 980px) {
  /* La versión de escritorio ya tenía estas reglas; se dejan solo las suyas. */
  .lateral-opcion:hover { background: rgba(255, 255, 255, .07); color: #fff; }

  /* La barra de arriba pasa a ser el encabezado de la columna central: el
     azul ya lo pone la lateral, aquí estorbaría. */
  .app .barra {
    grid-column: 2;
    grid-row: 1;
    position: static;
    background: var(--superficie);
    color: var(--texto);
    border-bottom: 1px solid var(--borde);
    padding: 14px 24px;
  }
  .app .barra .volver { display: none; }        /* la navegación está a la izquierda */
  .app .barra .quien  { color: var(--sutil); }
  .app .barra .chip-personas {
    color: var(--texto);
    background: var(--superficie2);
    border: 1px solid var(--borde);
  }

  .panel-tirador { display: none; }   /* aquí la cuenta ya está siempre visible */

  /* Cada columna con su propio scroll: al buscar y salir muchos productos, la
     cuenta de la derecha no se mueve. */
  .app .contenido {
    grid-column: 2;
    grid-row: 2;
    /* El hueco de abajo tiene que librar el pie FLOTANTE, que mide unos 75px.
       Con los 40 de antes, los últimos treinta y pico píxeles de cualquier
       pantalla quedaban debajo del pie y no había manera de alcanzarlos: el
       contenedor ya estaba hasta el fondo de su scroll. Se notaba en el último
       renglón de una lista, cortado a la mitad. */
    padding: 22px 24px 104px;
    overflow-y: auto;                 /* la fila del grid le fija el alto */
  }

  /* En la comanda y en la caja el pie no flota —vive dentro del panel de la
     cuenta—, así que ahí ese hueco sobra. */
  .app.con-orden .contenido,
  .app.con-cuenta .contenido { padding-bottom: 40px; }

  /* El pie flotante arranca después de la lateral, no por debajo de ella. */
  .app .pie { left: 264px; }

  /* En la comanda deja de flotar: vive dentro del panel de la cuenta. */
  .app.con-orden .pie,
  .app.con-cuenta .pie {
    position: static;
    padding: 14px 0 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--borde);
    box-shadow: none;
  }

  /* Panel derecho con la cuenta de la mesa. */
  .panel-orden {
    grid-column: 3;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 18px;
    overflow-y: auto;
    background: var(--superficie);
    border-left: 1px solid var(--borde);
  }
  .panel-orden .seccion-titulo { margin-top: 14px; }
  .panel-orden .linea { padding: 10px; }
  .panel-orden .linea .info small { font-size: 12px; }
  .panel-orden .imp { font-size: 15px; }

  .panel-cabeza {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borde);
  }
  .panel-cabeza .icono { color: var(--acento-claro); }
  .panel-cabeza b { font-size: 19px; flex: 1; }

  /* La cuenta crece y empuja el total hasta abajo. */
  .panel-lista { flex: 1; min-height: 60px; }
}

/* ------------------------------------------------------------ estructura */

/* La barra de arriba va clara y la lateral oscura: el peso visual queda de un
   solo lado y el contenido empieza donde empieza la luz. Antes las dos iban
   oscuras y la pantalla arrancaba con una banda azul que no decía nada. */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--superficie);
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
}

.barra h1 {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra .quien { font-size: 13px; color: var(--sutil); }

.titulo-mesa { display: flex; align-items: center; gap: 8px; }
.titulo-mesa .icono { color: var(--acento); }

/* Comensales de la mesa, en la barra. */
.chip-personas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 40px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
  background: var(--superficie2);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.chip-personas:active { background: var(--borde); }

/* Números de uso frecuente, para no estar picándole al +. */
.atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.atajo {
  min-width: 52px;
  height: 48px;
  font-size: 17px;
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}
.atajo:active { background: var(--borde); }
.atajo.activo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--superficie2);
  border-radius: 10px;
  color: var(--texto);
  flex: none;
}
.volver:active { background: var(--borde); }

.icono { display: block; flex: none; }

.contenido { padding: 14px; padding-bottom: 120px; }

/* ---------------------------------------------------------------- login */

.pagina-simple {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tarjeta {
  width: 100%;
  max-width: 420px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 26px;
}

.tarjeta h1 { margin: 0 0 4px; font-size: 26px; }
.tarjeta h2 { font-size: 15px; color: var(--sutil); margin: 20px 0 8px; }

label { display: block; margin: 14px 0 6px; font-size: 14px; color: var(--sutil); }

/* Se estilan los campos por EXCLUSIÓN y no por lista. Antes iban enumerados
   —text, password, search, number, email, tel, date— y el día que apareció un
   `type=url` salió sin formato: 22px de alto, sin relleno y sin borde, imposible
   de atinarle con el dedo. Así, un tipo nuevo queda cubierto solo; los que
   necesitan otro trato se excluyen aquí y se definen aparte. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=submit]):not([type=button]):not([type=image]):not([type=hidden]),
textarea, select {
  width: 100%;
  padding: 14px;
  font-size: 17px;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 10px;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--acento);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.boton.grande { width: 100%; margin-top: 22px; min-height: 54px; font-size: 18px; }
.boton.gris   { background: var(--superficie2); color: var(--texto); border: 1px solid var(--borde); }
.boton.roja   { background: var(--alerta); color: #fff; }

/* Roja de contorno, para una acción destructiva que se repite en cada
   renglón: setenta botones rojos macizos son una pared de alarma, y a fuerza
   de verla deja de alarmar justo cuando debería. */
.boton.roja-suave {
  color: var(--alerta);
  background: var(--superficie);
  border: 1px solid #f3c9c9;
}
.boton.roja-suave:active { background: #fdf3f3; }

.boton:active { transform: scale(.98); }
.boton[disabled] { opacity: .45; }

/* ------------------------------------------------- login con teclado ---- */

/* ------------------------------------------------------------- marca ---- */

.logo-caja {
  display: grid;
  place-items: center;
  padding: 6px;
  background: #082433;             /* navy del logo */
  border-radius: 8px;
  flex: none;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--borde);
}

.marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--texto);
}

.marca-texto small {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acento-claro);
}

/* La barra es azul oscuro: ahí el recuadro del logo sobra. */
.barra .logo-caja { background: transparent; padding: 0; }

.tarjeta.teclado {
  max-width: 360px;
  border-top: 4px solid var(--acento-claro);
  padding-top: 22px;
}

.puntos {
  height: 62px;
  margin: 22px 0 6px;
  display: grid;
  place-items: center;
  font-size: 34px;
  letter-spacing: 12px;
  text-indent: 12px;          /* compensa el espaciado del último punto */
  color: var(--acento);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
}

.puntos .sin-nada { font-size: 22px; letter-spacing: 4px; color: var(--sutil); }

.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.tecla {
  height: 68px;
  font-size: 26px;
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}
.tecla:active { background: var(--borde); transform: scale(.97); }
.tecla.gris   { font-size: 22px; color: var(--sutil); }
.tecla.entrar { background: var(--acento); border-color: var(--acento); color: #fff; }
.tecla.entrar[disabled] { opacity: .35; }

.error {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fdeceb;
  border: 1px solid var(--alerta);
  border-radius: 10px;
  font-size: 14px;
}

.sutil { color: var(--sutil); font-size: 14px; }
.resumen { margin-top: 18px; font-size: 14px; color: var(--sutil); }

.lista-ok, .lista-aviso { padding-left: 20px; font-size: 14px; line-height: 1.7; }
.lista-aviso { color: var(--aviso); }
code { background: var(--superficie2); padding: 1px 5px; border-radius: 5px; font-size: 13px; }

/* ---------------------------------------------------------------- mesas */

.rejilla-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.mesa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 116px;
  padding: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.mesa.ocupada { border-color: var(--acento-claro); background: var(--acento-flojo); }
.mesa .nombre { font-size: 18px; font-weight: 700; }
.mesa .dato   { font-size: 13px; color: var(--sutil); }
.mesa .total  { margin-top: auto; font-size: 21px; font-weight: 800; color: var(--t3); }
.mesa .libre  { margin-top: auto; font-size: 14px; color: var(--ok); font-weight: 600; }

/* Renglón del icono y el nombre. */
.mesa .encabezado {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
/* El icono de la mesa en su cuadro, como en el resto del sistema. Suelto se
   confundía con el nombre; en el cuadro, la tarjeta se reconoce por la figura
   —comedor, barra, terraza— antes de leer cómo se llama. */
.mesa .marca-mesa {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--acento);
  background: var(--acento-flojo);
  border-radius: 11px;
}
.mesa.ocupada .marca-mesa { color: #fff; background: var(--acento-claro); }
.mesa.e-por-cobrar .marca-mesa { color: #fff; background: var(--t3); }
.mesa.e-reservada  .marca-mesa { color: #fff; background: var(--t5); }

/* El salón y el buscador en el mismo renglón: las pestañas se llevan lo que
   haga falta y el buscador se encoge, hasta que no cabe y baja solo. */
.fila-salones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.fila-salones .salones-mapa { flex: 1 1 auto; margin: 0; padding-bottom: 0; }
.busca-mesa { flex: 1 1 220px; max-width: 360px; margin-bottom: 0; }

/* El salón elegido va con el color del negocio, como todo lo marcado en el
   resto del sistema. El turquesa de `.pestanas` queda para las pantallas que
   no se han tocado.
   Con las dos clases del contenedor a propósito: la regla general vive más
   abajo en esta hoja y, a igual peso, le ganaría por orden. */
.pestanas.salones-mapa a.activa {
  background: var(--acento);
  border-color: var(--acento);
}

/* ------------------------------------------------------------- comanda */

/* ------------------------------------------- comida / bebida y cuadrícula */

.secciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.secciones .seccion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sutil);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
}
.secciones .seccion .icono { color: inherit; }
.secciones .seccion.activa {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
}
/* Bebidas en turquesa: se distingue de comida sin salirse de la gama. */
.secciones .seccion[data-seccion="Bebida"].activa {
  background: var(--t3);
  border-color: var(--t3);
}

.rejilla-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 10px;
}

.categoria-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 14px;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento-claro);
  border-radius: 12px;
  box-shadow: var(--sombra);
  color: var(--texto);
  cursor: pointer;
}

.categoria-tarjeta .cicono {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, .75);
}
.categoria-tarjeta .ctexto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.categoria-tarjeta:active { background: var(--acento-flojo); }
.categoria-tarjeta .cnombre {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;      /* nombres largos como HAMBURGUESAS parten bien */
}
.categoria-tarjeta .ccuenta { font-size: 12px; color: var(--sutil); }

/* A cada categoría le toca un tono de la gama, siempre el mismo, para poder
   ubicarla de un vistazo sin leer. */
.categoria-tarjeta.tono-1 { border-left-color: var(--t1); background: var(--t1-flojo); }
.categoria-tarjeta.tono-2 { border-left-color: var(--t2); background: var(--t2-flojo); }
.categoria-tarjeta.tono-3 { border-left-color: var(--t3); background: var(--t3-flojo); }
.categoria-tarjeta.tono-4 { border-left-color: var(--t4); background: var(--t4-flojo); }
.categoria-tarjeta.tono-5 { border-left-color: var(--t5); background: var(--t5-flojo); }
.categoria-tarjeta.tono-6 { border-left-color: var(--t6); background: var(--t6-flojo); }

.categoria-tarjeta.tono-1 .cicono { color: var(--t1); }
.categoria-tarjeta.tono-2 .cicono { color: var(--t2); }
.categoria-tarjeta.tono-3 .cicono { color: var(--t3); }
.categoria-tarjeta.tono-4 .cicono { color: var(--t4); }
.categoria-tarjeta.tono-5 .cicono { color: var(--t5); }
.categoria-tarjeta.tono-6 .cicono { color: var(--t6); }

.categoria-tarjeta.tono-1 .cnombre { color: var(--t1); }
.categoria-tarjeta.tono-2 .cnombre { color: var(--t2); }
.categoria-tarjeta.tono-3 .cnombre { color: var(--t3); }
.categoria-tarjeta.tono-4 .cnombre { color: var(--t4); }
.categoria-tarjeta.tono-5 .cnombre { color: var(--t5); }
.categoria-tarjeta.tono-6 .cnombre { color: var(--t6); }

/* Regreso de los artículos a la cuadrícula. */
.regresar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--acento);
  background: var(--acento-flojo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}

/* Con casi 2000 platillos, buscar es más rápido que recorrer pestañas. */
.buscador {
  margin-bottom: 12px;
  background: var(--superficie);
  font-size: 16px;              /* menos de 16 hace que iOS acerque la pantalla */
}

.pestanas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }

.pestana {
  flex: none;
  padding: 10px 16px;
  font-size: 15px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--sutil);
  cursor: pointer;
}
.pestana.activa { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 700; }

/* Segunda fila: subcategorías de la categoría elegida. */
.subpestanas { margin-top: -4px; }
.pestana.chica { padding: 7px 13px; font-size: 13px; }
.pestana.chica.activa { background: var(--acento-claro); border-color: var(--acento-claro); }

.rejilla-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.producto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  padding: 12px;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  color: var(--texto);
  cursor: pointer;
}
.producto:active { border-color: var(--acento); }
.producto .pnombre { font-weight: 600; font-size: 15px; }
.producto .pprecio {
  margin-top: auto;
  color: var(--acento);
  font-weight: 800;
  font-size: 19px;              /* el precio se lee de un vistazo */
  letter-spacing: -.2px;
}
.producto .pestacion { font-size: 11px; color: var(--sutil); text-transform: uppercase; letter-spacing: .4px; }

/* La tarjeta pone la imagen arriba y el texto debajo. Todas llevan imagen:
   la del artículo o, si no tiene, el dibujo de relleno. */
.producto.con-foto { padding: 0; overflow: hidden; }
.producto .pfoto {
  width: 100%;
  aspect-ratio: 4 / 3;          /* más bajo que cuadrado: caben más por pantalla */
  object-fit: cover;
  display: block;
  background: var(--superficie2);
}
.producto .pfoto.generica { background: var(--acento-flojo); }
.producto .pcuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}
.producto.con-foto .pcuerpo { padding: 10px 12px 12px; }

/* La foto del platillo dentro del diálogo de cantidad. */
.foto-item {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
  background: var(--superficie2);
}
.foto-item.generica { background: var(--acento-flojo); }

/* La foto del diálogo es tocable: abre el visor a pantalla completa. */
.foto-item-caja {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}
.foto-item-caja .lupa {
  position: absolute;
  right: 10px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: #fff;
  background: rgba(10, 46, 66, .55);
  border-radius: 50%;
}

/* Visor a pantalla completa. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 46, 66, .92);
  cursor: zoom-out;
}
.visor.abierto { display: flex; }

.visor img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 14px;
  background: var(--superficie);
}
.visor img.generica { background: var(--acento-flojo); padding: 20px; }

.visor-pie {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.visor-cerrar {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* ------------------------------------------------------------- cuenta */

.seccion-titulo {
  margin: 22px 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--sutil);
}

.linea {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  margin-bottom: 8px;
}

.linea .cant {
  flex: none;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--superficie2);
  border-radius: 10px;
  font-weight: 700;
}
.linea .info { flex: 1; min-width: 0; }
.linea .info b { display: block; font-size: 15px; }
.linea .info small { color: var(--sutil); }
.linea .imp { font-weight: 700; }

/* En la lista de cuentas por cobrar el importe ES el total de la mesa: va en
   turquesa como los demás totales, no como un renglón más. */
.linea.cuenta .imp { color: var(--t3); font-size: 19px; font-weight: 800; }

/* Los renglones por enviar se pueden tocar para corregir cantidad y nota. */
.linea.editable { cursor: pointer; }
.linea.editable:active { border-color: var(--acento-claro); background: var(--acento-flojo); }
.pista-nota { font-style: normal; color: var(--acento); opacity: .8; }

.linea .quitar {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--alerta);
  font-size: 20px;
  cursor: pointer;
}

/* En teléfono hay menos ancho: la letra chica se achica y el importe no se parte. */
@media (max-width: 460px) {
  .linea { gap: 8px; padding: 10px; }
  .linea .info small { font-size: 12px; }
  .linea .imp { font-size: 15px; white-space: nowrap; }
}

.etiqueta-lista { font-size: 11px; color: var(--ok); font-weight: 700; }
.etiqueta-pend  { font-size: 11px; color: var(--aviso); font-weight: 700; }

.vacio { padding: 26px; text-align: center; color: var(--sutil); }

/* ------------------------------------------------------------ catálogo */

.explica {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--acento-flojo);
  border-left: 3px solid var(--acento-claro);
  border-radius: 0 10px 10px 0;
}

.filtros { margin-bottom: 18px; }
.filtros-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros-fila select,
.filtros-fila input[type=date] { flex: 1 1 160px; width: auto; }
.filtros-fila .boton { flex: none; }

.campos-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 14px;
}

.boton.ancho { width: 100%; margin-top: 14px; }

/* Distintivo del tipo de artículo. */
.marca-tipo {
  flex: none;
  min-width: 82px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-radius: 999px;
}
.marca-tipo.simple    { color: var(--ok);     background: #e7f4ed; }
.marca-tipo.compuesto { color: var(--acento); background: var(--acento-flojo); }

/* --- catálogo -----------------------------------------------------------
   Buscador, los dos filtros, el botón y la cuenta en un solo renglón, que es
   el orden en que se usan: se escribe, se acota y se mira cuántos quedaron. */
.fila-catalogo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.fila-catalogo .campo-busca { flex: 2 1 220px; margin-bottom: 0; }
.fila-catalogo select { flex: 1 1 170px; width: auto; margin: 0; }
.fila-catalogo .boton { flex: none; }

/* Cuántos quedaron con el filtro puesto. */
.cuenta-filtro {
  flex: none;
  margin-left: auto;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ok);
  background: #e7f4ed;
  border-radius: 999px;
}
.cuenta-filtro b { font-weight: 800; }

/* La parte del renglón que lleva a la ficha: todo menos los botones. Se queda
   con el espacio sobrante para que el nombre tenga dónde crecer. */
.articulo-liga {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--texto);
}

.acciones-articulo { display: flex; flex: none; gap: 8px; }
.acciones-articulo .boton { flex: none; }

/* En pantalla angosta los botones bajan a su propio renglón. Compartiendo el
   de arriba, la liga se encogía hasta dejar el nombre en una palabra por
   línea: los botones no ceden ancho y el texto sí. */
@media (max-width: 760px) {
  .linea.articulo { flex-wrap: wrap; }
  .articulo-liga { flex: 1 1 100%; }
  .acciones-articulo { flex: 1 1 auto; }
  .acciones-articulo .boton { flex: 1; justify-content: center; }
  .linea.articulo .imp { margin-left: auto; }
}

.linea.articulo { color: var(--texto); }

/* Cantidad de cada ingrediente.
   Va con más peso que la regla general de los input, que si no le impone
   width:100% y deja al nombre del ingrediente sin espacio. */
.linea input.cant-ing {
  flex: none;
  width: 88px;
  padding: 10px;
  font-size: 15px;
  text-align: right;
}

/* Un ingrediente con nombre largo puede ocupar dos renglones sin apretar
   la cantidad ni el botón de quitar. */
#ingredientes .linea { align-items: center; gap: 10px; }
#ingredientes .linea .info b { line-height: 1.25; }

/* Interruptor de dos posiciones: descuenta / solo cuenta. */
.interruptor {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.interruptor .lado {
  flex: 1;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sutil);
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
.interruptor .lado.activo {
  color: #fff;
  background: var(--acento);
}

.hoja.alta { max-height: 82vh; display: flex; flex-direction: column; }

.lista-insumos {
  flex: 1;
  overflow-y: auto;
  margin: 12px 0;
  min-height: 140px;
}

.insumo {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 6px;
  text-align: left;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  cursor: pointer;
}
.insumo:active { border-color: var(--acento); }
.insumo b { display: block; font-size: 15px; }
.insumo small { color: var(--sutil); font-size: 13px; }

/* ---------------------------------------------------- foto del artículo */

.caja-foto {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
}

.foto-vista {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  flex: none;
  overflow: hidden;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.foto-vista img { width: 100%; height: 100%; object-fit: cover; }
.foto-vacia { font-size: 12px; color: var(--sutil); }

.foto-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}
.foto-acciones .boton { flex: 1 1 auto; min-height: 44px; font-size: 14px; }

.rejilla-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  margin: 12px 0;
  min-height: 120px;
}

.foto-galeria {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--superficie2);
  border: 2px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}
.foto-galeria img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.foto-galeria.elegida { border-color: var(--acento); }

/* De qué artículo es cada foto. */
.foto-pie {
  padding: 5px 6px;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.foto-pie.libre { color: var(--sutil); font-weight: 500; font-style: italic; }

/* En el catálogo, la miniatura del artículo. */
.linea .miniatura {
  width: 44px; height: 44px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: var(--superficie2);
}

/* ------------------------------------------------------------- cobro ---- */

.boton.chico { min-height: 40px; padding: 8px 14px; font-size: 14px; flex: none; }

.linea.cuenta .cant { color: var(--acento); background: var(--acento-flojo); }
/* Cuenta que quedó de un día anterior. */
.linea.cuenta.atrasada { border-left: 4px solid var(--aviso); }

/* Lo que pidió la mesa, desplegado bajo su renglón en la lista de cobro. */
.detalle-cuenta {
  margin: -4px 0 10px 14px;
  padding: 10px 14px;
  background: var(--acento-flojo);
  border-left: 3px solid var(--acento-claro);
  border-radius: 0 10px 10px 0;
}
.det-linea {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--borde);
}
.det-linea:last-child { border-bottom: none; }
.det-cant   { flex: none; min-width: 30px; font-weight: 700; color: var(--acento); }
.det-nombre { flex: 1; min-width: 0; }
.det-imp    { flex: none; font-weight: 700; }

.nota-cancelar { margin-top: 12px; font-size: 12px; font-style: italic; }

.pagos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.pago label { margin: 0 0 6px; font-weight: 600; color: var(--texto); }
.pago .monto { font-size: 20px; font-weight: 700; text-align: right; }

.resumen-cobro {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-size: 15px;
}
.resumen-cobro div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.resumen-cobro span { color: var(--sutil); }
.resumen-cobro .grande {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  font-size: 21px;
}
.resumen-cobro .grande b { color: var(--t3); font-size: 26px; font-weight: 800; }
.resumen-cobro .falta b  { color: var(--alerta); }
#fila-cambio b { color: var(--ok); }

/* ------------------------------------------------------- caja de cobro -- */

.caja-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: var(--texto);
  border-radius: var(--radio);
  color: #fff;
}
.caja-total span { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: #9fc0dc; }
.caja-total b { font-size: 34px; font-weight: 800; color: var(--t3-vivo); letter-spacing: -.5px; }

.caja-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 720px) {
  .caja-columnas { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* Renglones de pago capturados. */
.pago-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 12px;
  cursor: pointer;
}
.pago-fila.activo { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-flojo); }
.pago-nombre { flex: 1; font-size: 16px; font-weight: 700; }
.pago-monto  { font-size: 22px; font-weight: 800; color: var(--acento); }
.pago-quitar {
  width: 32px; height: 32px;
  flex: none;
  color: var(--alerta);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}
.chip:active { background: var(--borde); }
.chip.fuerte { color: #fff; background: var(--acento); border-color: var(--acento); }

/* Teclado táctil. */
.numpad-caja {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.numpad-caja .tecla { height: 62px; font-size: 24px; }
.numpad-caja .tecla.roja {
  color: var(--alerta);
  background: #fdeceb;
  border-color: #f4cfcd;
}

.caja-cuentas {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--borde);
  font-size: 16px;
}
.caja-cuentas div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.caja-cuentas span { color: var(--sutil); }
.caja-cuentas .falta b { color: var(--alerta); }
.caja-cuentas .cambio {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--borde);
}
.caja-cuentas .cambio span { font-weight: 800; color: var(--texto); letter-spacing: .5px; }
.caja-cuentas .cambio b { font-size: 26px; font-weight: 800; color: var(--ok); }

.exito {
  margin-top: 16px;
  padding: 12px 14px;
  background: #e7f4ed;
  border: 1px solid var(--ok);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ok);
}

.logo-vista { width: 120px; height: 96px; }
.logo-vista img { width: 100%; height: 100%; object-fit: contain; }

.grupo-categoria { margin-bottom: 14px; }
.linea.categoria.hija { margin-left: 22px; background: var(--superficie2); }
.categoria .editar { color: var(--sutil); }

.casilla {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 15px;
  color: var(--texto);
}
.casilla input { width: 22px; height: 22px; flex: none; }

/* ------------------------------------------------ guía de instalación */

.direccion {
  padding: 18px 14px;
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  word-break: break-all;
  color: var(--acento);
  background: var(--superficie);
  border: 2px dashed var(--acento-claro);
  border-radius: 12px;
}

.pasos {
  padding-left: 22px;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.9;
}
.pasos strong { color: var(--acento); }

/* --------------------------------------------------------- pie fijo */

.pie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 10px rgba(20, 28, 45, .06);
}

.pie .marcador { flex: 1; min-width: 0; }
.pie .marcador small { display: block; color: var(--sutil); font-size: 12px; }

/* Con icono al lado del total. Van juntos como un bloque para que al
   envolverse el pie no se separen. */
.pie .marcador.con-marca { display: flex; align-items: center; gap: 11px; }
.pie .marcador .marcador-texto { min-width: 0; }
/* El total es el dato que más se mira: grande y en turquesa, para que salte
   entre tanto azul y no se confunda con los importes de cada renglón. */
.pie .marcador b {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--t3);
  letter-spacing: -.5px;
}

/* --------------------------------------------------------- modal */

.velo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 28, 45, .45);
}
.velo.abierto { display: flex; }

.hoja {
  width: 100%;
  max-width: 520px;
  background: var(--superficie);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 30px rgba(20, 28, 45, .18);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}
.hoja h2 { margin: 0 0 4px; font-size: 20px; }

.selector-cantidad {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
}
.selector-cantidad button {
  width: 56px; height: 56px;
  font-size: 26px;
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 14px;
  color: var(--texto);
  cursor: pointer;
}
.selector-cantidad .valor { flex: 1; text-align: center; font-size: 30px; font-weight: 700; }

/* Se envuelve: una fila con tres botones de texto largo —«Guardar y mandarme un
   correo de prueba»— no cabe en un teléfono, y apretarlos deja las palabras
   partidas. Mejor que bajen. `flex-basis: 220px` es el ancho a partir del cual
   comparten renglón; abajo de eso, cada uno toma el suyo. */
.fila-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.fila-botones .boton { flex: 1 1 220px; }

/* --------------------------------------------------------- cocina */

.rejilla-cocina {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.ticket {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--acento-claro);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 14px;
}
/* Un color por estación: en la cocina se distingue de lejos qué le toca a cada
   quien sin tener que leer el ticket. */
.ticket.est-cocina-caliente { border-left-color: var(--t1); }
.ticket.est-cocina-fria     { border-left-color: var(--t2); }
.ticket.est-barra           { border-left-color: var(--t3); }
.ticket.est-caja            { border-left-color: var(--t5); }

.ticket .marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ticket .estacion-marca,
.ticket .marca-estado {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 999px;
  background: var(--superficie2);
  color: var(--sutil);
}

/* En qué paso va la comanda. */
.marca-estado.ingresado  { background: var(--acento-flojo); color: var(--acento); }
.marca-estado.trabajando { background: #fdf0d8; color: var(--aviso); }

/* Ya la están preparando: se distingue del resto sin gritar. */
.ticket.trabajando { background: #fffdf7; }
.est-cocina-caliente .estacion-marca { background: var(--t1-flojo); color: var(--t1); }
.est-cocina-fria     .estacion-marca { background: var(--t2-flojo); color: var(--t2); }
.est-barra           .estacion-marca { background: var(--t3-flojo); color: var(--t3); }
.est-caja            .estacion-marca { background: var(--t5-flojo); color: var(--t5); }

/* Pasado de tiempo: manda el rojo por encima del color de la estación. */
.ticket.viejo { border-left-color: var(--alerta); }
.ticket .cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.ticket .cabeza span { white-space: nowrap; }
.ticket .cabeza b { font-size: 19px; }
.ticket .cabeza span { font-size: 13px; color: var(--sutil); }
.ticket ul { list-style: none; margin: 12px 0; padding: 0; }
.ticket li { padding: 7px 0; border-bottom: 1px dashed var(--borde); font-size: 16px; }
.ticket li:last-child { border-bottom: none; }
.ticket li .n { color: var(--acento); font-weight: 700; margin-right: 6px; }
.ticket li em { display: block; color: var(--aviso); font-style: normal; font-size: 13px; margin-top: 2px; }

.aviso-flotante {
  position: fixed;
  left: 50%; bottom: 96px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 12px 20px;
  background: var(--ok);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(20, 28, 45, .2);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.aviso-flotante.visible { opacity: 1; }
.aviso-flotante.malo { background: var(--alerta); color: #fff; }

/* ===================================================== almacén y producción ==

   Insumos, órdenes de proceso, traspasos y bitácora. Reusa .linea, .filtros y
   .hoja del resto de la app: el que sabe usar Cobrar sabe usar esto.
   ========================================================================== */

/* Etiqueta de clase del insumo. Cada clase toma un tono de la gama para
   distinguir de un vistazo el insumo crudo del ya porcionado. */
.clase-insumo {
  flex: none;
  align-self: flex-start;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: 7px;
}
.clase-insumo.c-insumo    { color: var(--t4); background: var(--t4-flojo); }
.clase-insumo.c-preparado { color: var(--t2); background: var(--t2-flojo); }
.clase-insumo.c-porcion   { color: var(--t3); background: var(--t3-flojo); }
.clase-insumo.c-otro      { color: var(--sutil); background: var(--superficie2); }

/* La existencia es el dato que se busca al entrar: número grande y su unidad
   debajo, para no leer "12.5 Kilo" corrido. */
.linea .existencia {
  flex: none;
  min-width: 74px;
  text-align: right;
  line-height: 1.05;
}
.linea .existencia b     { display: block; font-size: 19px; font-weight: 800; color: var(--t3); }
.linea .existencia small { font-size: 11px; color: var(--sutil); text-transform: lowercase; }
.linea .existencia.roja b     { color: var(--alerta); }
.linea .existencia.negativa b { color: var(--aviso); }

/* Bajo mínimo: se marca el renglón entero, no solo el número.
   Se llama art-insumo y no insumo porque .insumo ya es el botón del selector
   de ingredientes de una receta, y ese va en display: block. */
.linea.art-insumo.bajo {
  border-color: #f0b9bb;
  background: #fdf3f3;
}

/* Aviso de faltantes en la barra de arriba. */
.chip-alerta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 6px 11px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--alerta);
  border-radius: 999px;
}

/* Dos campos en un renglón: cantidad y almacén, mínimo y máximo. */
.fila-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fila-campos > div { min-width: 0; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 160px;
  padding: 0 4px;
  font-size: 14px;
  color: var(--sutil);
  cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 0; flex: none; }

/* --- órdenes de proceso ------------------------------------------------- */

/* El encabezado de la orden: qué entró, qué salió y cuánto se perdió, que es
   lo único que de verdad se revisa al cerrar. */
.tarjeta-proceso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.dato-proceso {
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.dato-proceso span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sutil);
}
.dato-proceso b { font-size: 22px; font-weight: 800; color: var(--t3); }
.dato-proceso.merma b      { color: var(--aviso); }
.dato-proceso.costo b      { color: var(--t5); }
.dato-proceso.flojo b      { color: var(--alerta); }   /* rendimiento malo */

.seccion-proceso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
}
.seccion-proceso h2 { margin: 0; font-size: 16px; }
.seccion-proceso .icono { color: var(--acento-claro); }
.seccion-proceso .boton { margin-left: auto; }

/* Cada renglón lleva su rol al frente, con el color de lo que significa:
   lo que entra, lo que sale y lo que se perdió. */
.rol-linea {
  flex: none;
  width: 46px;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 7px;
}
.rol-linea.r-e { color: var(--t4); background: var(--t4-flojo); }
.rol-linea.r-s { color: var(--t3); background: var(--t3-flojo); }
.rol-linea.r-m { color: var(--aviso); background: #fdf4e3; }

.linea.merma { border-left: 3px solid var(--aviso); }

/* Estado de la orden o del traspaso. */
.estado-doc {
  flex: none;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-radius: 7px;
}
.estado-doc.e-b { color: var(--aviso); background: #fdf4e3; }
.estado-doc.e-c { color: var(--ok);    background: #e6f4ec; }
.estado-doc.e-x { color: var(--alerta); background: #fdf3f3; }

/* --- buscador de artículos para agregar partidas ------------------------ */

.busca-articulo { position: relative; }
.resultados-busca {
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.resultados-busca button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  text-align: left;
  background: var(--superficie);
  border: none;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.resultados-busca button:last-child { border-bottom: none; }
.resultados-busca button:active     { background: var(--acento-flojo); }
.resultados-busca .nom  { flex: 1; min-width: 0; font-weight: 600; }
.resultados-busca .hay  { flex: none; font-size: 13px; color: var(--sutil); }

/* --- bitácora ----------------------------------------------------------- */

/* El tipo de movimiento manda: se lee antes que el nombre del artículo. */
.tipo-mov {
  flex: none;
  min-width: 96px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 7px;
}
.tipo-mov.m-entrada    { color: var(--ok);     background: #e6f4ec; }
.tipo-mov.m-devolucion { color: var(--ok);     background: #e6f4ec; }
.tipo-mov.m-produce_e  { color: var(--t3);     background: var(--t3-flojo); }
.tipo-mov.m-traspaso_e { color: var(--t2);     background: var(--t2-flojo); }
.tipo-mov.m-traspaso_s { color: var(--t2);     background: var(--t2-flojo); }
.tipo-mov.m-produce_s  { color: var(--t5);     background: var(--t5-flojo); }
.tipo-mov.m-salida     { color: var(--alerta); background: #fdf3f3; }
.tipo-mov.m-merma      { color: var(--aviso);  background: #fdf4e3; }
.tipo-mov.m-venta      { color: var(--t4);     background: var(--t4-flojo); }
.tipo-mov.m-ajuste     { color: var(--sutil);  background: var(--superficie2); }

/* Cuánto movió, con su signo: +5 en verde, −5 en rojo. */
.mov-cant {
  flex: none;
  min-width: 88px;
  text-align: right;
  font-size: 17px;
  font-weight: 800;
}
.mov-cant.suma  { color: var(--ok); }
.mov-cant.resta { color: var(--alerta); }
.mov-cant small { display: block; font-size: 11px; font-weight: 600; color: var(--sutil); }

/* --- reportes ----------------------------------------------------------- */

/* El panel de arriba: título, los doce reportes y el periodo, dentro de una
   sola tarjeta. Antes eran tres bloques sueltos sobre el fondo y no se veía
   que fueran los mandos de lo que está abajo.
   La tarjeta es la misma `.panel` del dashboard; aquí solo se ajusta el aire,
   porque el periodo llega hasta el borde.
   Va con las dos clases a propósito: `.panel` se define más abajo en esta hoja
   y con una sola clase ganaría ella, dejando el panel con el relleno del
   dashboard y el periodo sobresaliendo cuatro píxeles por cada lado. */
.panel.panel-reportes {
  margin-bottom: 20px;
  padding: 20px 22px 0;
}

/* Sin periodo —valor del inventario, qué hay que pedir— el último grupo queda
   pegado al borde de abajo: ahí el aire lo pone él. */
.panel-reportes .pestanas:last-child { margin-bottom: 20px; }

.cabeza-pantalla {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

/* El cuadro con el icono. Es el único adorno del panel: da un punto de
   entrada a la vista y de paso dice de qué pantalla se trata. */
.marca-panel {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--acento);
  background: var(--acento-flojo);
  border-radius: 12px;
}
.marca-panel.chica { width: 40px; height: 40px; border-radius: 10px; }

.titulo-panel { min-width: 0; }
.titulo-panel h2 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.titulo-panel h3 { margin: 0; font-size: 15px; }
.titulo-panel p  { margin: 2px 0 0; font-size: 13px; color: var(--sutil); }

/* Cada grupo de reportes sobre su propia franja, para separarlos del título
   sin meter más rayas. */
.panel-reportes .pestanas {
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--fondo);
  border-radius: 12px;
}

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.pestanas a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sutil);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
}
.pestanas a svg { flex: none; opacity: .75; }
.pestanas a.activa { color: #fff; background: var(--t3); border-color: var(--t3); }

/* En Reportes el marcado va con el color del negocio y con sombra: es el único
   de los doce que está encendido y tiene que saltar a la vista desde lejos.
   El resto de las pantallas con pestañas se queda como estaba. */
.panel-reportes .pestanas a.activa {
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: var(--sombra);
}
.panel-reportes .pestanas a.activa svg { opacity: 1; }

/* El periodo cierra el panel: icono, qué es, los campos y el botón. En una
   sola fila mientras quepa; en cuanto no cabe, cada parte toma su renglón.
   Los márgenes negativos lo sacan al ancho completo de la tarjeta, para que la
   raya de arriba la cruce de lado a lado en vez de quedar flotando. */
.periodo-reportes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 4px -22px 0;
  padding: 16px 22px;
  border-top: 1px solid var(--borde);
}

.periodo-que-es {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.periodo-campos {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  gap: 12px;
}
.periodo-campos label {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sutil);
}
.periodo-campos input { width: 100%; margin: 0; }

.periodo-botones { display: flex; flex: none; gap: 8px; }
.periodo-botones .boton { flex: none; }

.tabla-reporte {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.tabla-reporte th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: left;
  color: var(--sutil);
  background: var(--superficie2);
  white-space: nowrap;
}
.tabla-reporte td {
  padding: 10px 12px;
  border-top: 1px solid var(--borde);
}
.tabla-reporte .num { text-align: right; white-space: nowrap; }
.tabla-reporte .num b { color: var(--t3); }
.tabla-reporte .num b.malo { color: var(--alerta); }   /* margen en contra */
.tabla-reporte tr:hover td { background: var(--acento-flojo); }
.tabla-reporte .alto  td { background: #fdf3f3; }        /* costo fuera de rango */
.tabla-reporte .alto:hover td { background: #fbe9ea; }

/* En teléfono la tabla no cabe: se desliza sola en lugar de romper la página. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* Aviso dentro del contenido: falta algo por capturar, la orden se canceló. */
.aviso-linea {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--aviso);
  background: #fdf4e3;
  border: 1px solid #f0dcb4;
  border-radius: 10px;
}

/* El disco con el signo. Da el punto por donde entra la vista: un renglón
   ámbar a todo lo ancho se lee como decoración y se salta. */
.aviso-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--aviso);
  border-radius: 999px;
}

/* El artículo que se acaba de elegir en el buscador de partidas. */
.elegido {
  margin: 10px 0 0;
  padding: 9px 12px;
  font-weight: 700;
  color: var(--t3);
  background: var(--t3-flojo);
  border-radius: 10px;
}

/* --- renglones de lista en teléfono -------------------------------------
   Un renglón con icono, texto, importe y tres botones no cabe en 375 px: el
   texto se aprieta tanto que sale una palabra por línea. En pantalla angosta
   se parte en dos: arriba de qué se trata, abajo el importe y los botones. */
@media (max-width: 600px) {
  .linea.cuenta,
  .linea.art-insumo {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* El texto ocupa lo que queda del primer renglón, junto al icono. */
  .linea.cuenta .info     { flex: 1 1 calc(100% - 62px); }
  .linea.art-insumo .info { flex: 1 1 100%; }

  /* Y el importe se queda a la izquierda del segundo, con los botones. */
  .linea.cuenta .imp,
  .linea.art-insumo .existencia {
    margin-right: auto;
    text-align: left;
  }

  .linea.art-insumo .clase-insumo { order: -1; }
}

/* El marcador del pie con una cifra larga —el valor del inventario pasa del
   millón— apretaba su rótulo hasta dejar una palabra por renglón, y con dos
   botones al lado ya no cabía nada. En teléfono el pie se parte: la cifra
   arriba, los botones abajo repartidos a lo ancho. */
.pie .marcador small { white-space: nowrap; }
.pie .marcador b     { white-space: nowrap; }

/* 820 y no 600: en una tablet de 768 el marcador se encogía a 150px y la cifra
   —«$389,837.00» con 30px de fuente— se cortaba a media palabra. Un pie de dos
   pisos en tablet es mejor que un total recortado. */
@media (max-width: 820px) {
  /* El pie de la comanda y el de la caja no: ahí viven dentro del panel de la
     cuenta y ya tienen su propio acomodo. */
  .app:not(.con-orden):not(.con-cuenta) .pie { flex-wrap: wrap; row-gap: 10px; }
  .app:not(.con-orden):not(.con-cuenta) .pie .marcador { flex: 1 1 100%; }
  .app:not(.con-orden):not(.con-cuenta) .pie .boton    { flex: 1 1 0; justify-content: center; }
  .app:not(.con-orden):not(.con-cuenta) .contenido     { padding-bottom: 190px; }
}

/* ==================================================== impresoras =========== */

/* El tipo de impresora manda: es lo que dice si ahí sale el ticket del cliente
   o la comanda de la cocina. */
.tipo-impresora {
  flex: none;
  min-width: 62px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 7px;
}
.tipo-impresora.t-caja   { color: var(--t3); background: var(--t3-flojo); }
.tipo-impresora.t-cocina { color: var(--t1); background: var(--t1-flojo); }
.tipo-impresora.t-barra  { color: var(--t2); background: var(--t2-flojo); }
.tipo-impresora.t-otro   { color: var(--sutil); background: var(--superficie2); }

/* Una impresora de baja se sigue viendo, porque las recetas la nombran, pero
   se apaga para que no se confunda con las que sí imprimen. */
.linea.de-baja { opacity: .62; }

.error-linea { color: var(--alerta); }

.ayuda-impresoras {
  margin-top: 22px;
  padding: 14px 16px;
  line-height: 1.6;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.ayuda-impresoras code {
  padding: 1px 5px;
  font-size: 13px;
  background: var(--superficie2);
  border-radius: 5px;
}

/* ================================================ facturación y clientes === */

/* El RFC va al frente del renglón: es lo que se busca y lo que se compara
   contra la constancia que trae el cliente en la mano. */
.rfc-cliente {
  flex: none;
  min-width: 118px;
  padding: 5px 9px;
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  color: var(--t4);
  background: var(--t4-flojo);
  border-radius: 7px;
}
.rfc-cliente.malo { color: var(--alerta); background: #fdf3f3; }

.estado-factura {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  min-width: 96px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
}
.estado-factura svg { flex: none; }
.estado-factura.f-f   { color: var(--ok);     background: #e6f4ec; }
.estado-factura.f-p   { color: var(--aviso);  background: #fdf4e3; }
.estado-factura.f-e   { color: var(--alerta); background: #fdf3f3; }
.estado-factura.f-c   { color: var(--sutil);  background: var(--superficie2); }
.estado-factura.f-sin { color: var(--sutil);  background: var(--superficie2); }

/* --- los cuatro números del periodo, en Facturación ----------------------
   Aparte de `.tarjeta-proceso`, que es la tira de datos de Compras, Traspasos
   y Conteos: aquí cada número va en su tarjeta con su icono, porque son el
   resumen de la pantalla y no el encabezado de un documento. */
.resumen-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.resumen-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.resumen-texto { min-width: 0; }
.resumen-texto small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sutil);
}
.resumen-texto b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: var(--t3);
}
.resumen-texto b.verde   { color: var(--ok); }
.resumen-texto b.importe { color: var(--t5); font-size: 22px; }
.resumen-texto b.apagado { color: var(--sutil); }

/* Un rótulo que solo oyen los lectores de pantalla: la columna de acciones
   necesita nombre para quien navega a oídas, pero escribirlo en la tabla sería
   un encabezado de más sobre dos botones que se explican solos. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* El rojo solo cuando de verdad hay errores: un cero en rojo alarma por nada
   y, a fuerza de verlo todos los días, deja de alarmar cuando sí importa. */
.resumen-tarjeta.con-error .marca-panel { color: var(--alerta); background: #fdf3f3; }
.resumen-tarjeta.con-error .resumen-texto b { color: var(--alerta); }

/* En teléfono, de dos en dos y sin el icono. A todo lo ancho eran cuatro
   renglones altos y la lista de facturas —que es a lo que se entra— quedaba
   fuera de la pantalla. El icono es lo primero que sobra: a ese ancho el
   rótulo necesita el espacio para no partirse en tres renglones. */
@media (max-width: 560px) {
  .resumen-tarjetas { grid-template-columns: 1fr 1fr; gap: 8px; }
  .resumen-tarjeta { padding: 12px; }
  .resumen-tarjeta .marca-panel { display: none; }
  .resumen-texto b { font-size: 21px; }
  .resumen-texto b.importe { font-size: 18px; }
}

/* Los atajos de periodo de Facturación, debajo de los filtros. */
.atajos-periodo { margin: -4px 0 14px; }

/* --- el padrón de clientes ----------------------------------------------
   En tabla porque lo que se hace aquí es comparar: quién tiene correo, a
   quién le falta el régimen, cuál RFC se parece al que trae el cliente. En
   tarjetas eso obliga a saltar la vista de un renglón a otro. */
.cabeza-pantalla { flex-wrap: wrap; }
.cabeza-pantalla > .boton { flex: none; margin-left: auto; }

/* El título se queda junto a su icono y es lo que cede espacio: sin una base
   flexible, al envolverse se iba él a otro renglón y dejaba el cuadro del
   icono solo arriba. */
.cabeza-pantalla .titulo-panel { flex: 1 1 200px; }

/* En pantalla angosta el botón se lleva su propio renglón: al lado del título
   le dejaba a la descripción una columna de cien píxeles y salía partida en
   seis renglones. */
@media (max-width: 760px) {
  /* Con una base flexible en vez de 100%: uno solo se estira a todo el ancho
     —el «Nuevo cliente» de Clientes— y dos se reparten el renglón, en vez de
     gastar dos renglones altos antes de la primera cifra. */
  .cabeza-pantalla > .boton {
    flex: 1 1 140px;
    margin-left: 0;
    justify-content: center;
  }
}

.barra-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.barra-lista .sutil { flex: 1; min-width: 0; margin: 0; }
.cuantos-ver {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--sutil);
}
.cuantos-ver select { width: auto; padding: 8px 10px; font-size: 14px; }

/* La tabla se desplaza sola cuando no cabe, sin empujar la página. */
.tabla-envoltura {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tabla-clientes { width: 100%; border-collapse: collapse; }
.tabla-clientes th,
.tabla-clientes td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--borde);
}
.tabla-clientes tbody tr:last-child td { border-bottom: 0; }
.tabla-clientes thead th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sutil);
  background: var(--fondo);
  white-space: nowrap;
}
.tabla-clientes tbody tr:hover { background: var(--acento-flojo); }

.tabla-clientes td b { display: block; font-size: 14px; }
.tabla-clientes td small { display: block; font-size: 12px; color: var(--sutil); }

/* La flecha de ordenar: apagada en las columnas por las que NO va, para que
   se vea que también se puede ordenar por ellas. */
.ordena {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}
.ordena svg { opacity: .35; }
.ordena.activa { color: var(--acento); }
.ordena.activa svg { opacity: 1; }

.marca-persona {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-right: 8px;
  vertical-align: middle;
  color: var(--sutil);
  background: var(--superficie2);
  border-radius: 8px;
}

.clave-regimen {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sutil);
  background: var(--superficie2);
  border-radius: 999px;
}

.correo-celda {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.correo-celda svg { flex: none; color: var(--sutil); }

.col-rfc      { white-space: nowrap; }
.col-regimen,
.col-estatus,
.col-acciones { white-space: nowrap; }
.col-acciones { text-align: right; }

/* Lista o tarjetas. */
.cambia-vista {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 10px;
}
/* Sirve con ligas —Clientes cambia de vista navegando— y con botones —la hoja
   de facturar cambia de modo sin recargar—. Antes solo tomaba las ligas, y en
   la hoja los botones salían del tamaño del texto, encimados a la izquierda. */
.cambia-vista a,
.cambia-vista button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sutil);
  background: var(--superficie);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.cambia-vista a.activa,
.cambia-vista button.activa { color: #fff; background: var(--acento); }

/* Dentro de la hoja de facturar ocupa todo el ancho y se reparte a la mitad:
   son dos opciones excluyentes, no una barra de herramientas. */
#fx-modo { display: flex; width: 100%; margin-bottom: 12px; }
#fx-modo button { flex: 1; }

/* En pantalla angosta la tabla no se esconde: se desplaza de lado, y el
   selector de vista se queda a la mano para pasar a tarjetas, que es la misma
   información en vertical. Esconderla sin más dejaría la pantalla en blanco a
   quien entrara con la vista de lista guardada en la dirección. */
@media (max-width: 760px) {
  .cambia-vista { width: 100%; }
  .cambia-vista a { flex: 1; justify-content: center; }
  .tabla-clientes th,
  .tabla-clientes td { padding: 10px 12px; }
}

/* Números de página. */
.paginador .num {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sutil);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
}
.paginador .num.activa {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
}
.paginador .tramo { margin-left: 6px; }

/* --- sin facturar -------------------------------------------------------
   Los filtros en rejilla y con rótulo: son cuatro campos de cosas distintas
   —dos fechas, un folio, un cliente— y en una tira sin nombres hay que
   adivinar cuál es cuál por el texto de ejemplo. */
.panel-filtros {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.filtros-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 12px;
}
.filtros-rejilla > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sutil);
}
.filtros-rejilla input { width: 100%; margin: 0; }
.filtros-rejilla .campo-busca { margin-bottom: 0; }
.filtros-rejilla > .boton { flex: none; justify-content: center; }

/* El porcentaje junto al método principal. */
.parte-metodo {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
  background: #e6f4ec;
  border-radius: 999px;
}

/* La fila marcada de la tabla de ventas. */
.tabla-ventas tbody tr.marcada { background: var(--acento-flojo); }
.tabla-ventas .col-marca { width: 44px; }
.tabla-ventas .col-importe { text-align: right; font-weight: 700; white-space: nowrap; }
.tabla-ventas .col-folio,
.tabla-ventas .col-fecha,
.tabla-ventas .col-usuario,
.tabla-ventas .col-pago { white-space: nowrap; }
.tabla-ventas .col-folio { color: var(--sutil); }

/* La celda de la venta es una etiqueta: tocar el nombre marca la casilla, que
   es lo que se intenta hacer antes de buscar el cuadrito. */
.venta-celda {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
.venta-celda .marca-persona { margin-right: 0; }

/* --- factura global -----------------------------------------------------
   Las cuatro periodicidades como un mando segmentado: son excluyentes y hay
   que ver de un golpe cuál está puesta, que es lo que decide el rango. */
.periodos-global { margin-bottom: 14px; }

/* «¿Cómo funciona?» como despliegue y no como ventana: el resumen es el
   botón, y lo que explica cabe en tres renglones. Sin JavaScript de por
   medio, que para esto sobra. */
.como-funciona { flex: none; margin-left: auto; position: relative; }
.como-funciona > summary { list-style: none; cursor: pointer; }
.como-funciona > summary::-webkit-details-marker { display: none; }
.como-funciona > p {
  position: absolute;
  right: 0;
  z-index: 20;
  width: min(380px, 80vw);
  margin: 8px 0 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sutil);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 28, 45, .14);
}

.fila-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.campo-fecha {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sutil);
}
.campo-fecha > span { display: flex; align-items: center; gap: 7px; }
.campo-fecha input { width: 100%; margin: 0; }
.fila-periodo .nota-info { flex: 2 1 280px; margin: 0; }
.fila-periodo .boton { flex: none; }

/* Tres tarjetas en vez de cuatro: la del periodo lleva un rango de fechas y
   necesita más ancho que una cifra. */
.resumen-tarjetas.tres { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.resumen-texto b.rango { font-size: 17px; line-height: 1.25; }

.desglose-periodo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--sutil);
}
.desglose-periodo svg { flex: none; }
.desglose-periodo b { color: var(--texto); }

.panel-tickets { padding: 16px 18px; margin-bottom: 18px; }
.cabeza-tickets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.cabeza-tickets .titulo-panel { flex: 1 1 220px; }
.cabeza-tickets h3 { margin: 0; font-size: 16px; }
.cabeza-tickets p  { margin: 2px 0 0; font-size: 12px; color: var(--sutil); }
.cabeza-tickets .campo-busca { flex: 1 1 240px; margin-bottom: 0; }
.sin-coincidencias { margin: 12px 0 0; text-align: center; }

/* Mientras se pide la lista al escribir. Se atenúa en vez de vaciarse: lo que
   hay en pantalla sigue siendo cierto hasta que llega lo nuevo, y un hueco en
   blanco por cada tecla marea. La transición entra con retardo para que una
   respuesta rápida no alcance a parpadear. */
/* El contenedor que se está repintando se atenúa en vez de vaciarse: lo que
   hay en pantalla sigue siendo cierto hasta que llega lo nuevo, y un hueco en
   blanco por cada tecla marea. La transición entra con retardo para que una
   respuesta rápida no alcance a parpadear.
   Vale para cualquier pantalla: el contenedor es el hermano siguiente del
   formulario, que es justo donde lo pone el contrato de `filtro_vivo.js`. */
.filtros.buscando + [id] {
  opacity: .55;
  transition: opacity .15s .2s;
}

/* Paginador de una lista larga: atrás, en qué tramo va, y adelante. El tramo
   al centro importa tanto como las flechas —«51–100 de 242» dice de un vistazo
   cuánto falta, que es lo que no dice un «siguiente». */
.paginador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 4px;
}
.paginador .boton { flex: none; }

/* --- el buscador con su lupa --------------------------------------------
   El hueco para la lupa se hace con `text-indent` y no con `padding-left`:
   la regla base de los `input` encadena nueve `:not()` para excluir casillas
   y botones, y esa cadena pesa más que cualquier clase —haría falta inventar
   diez para ganarle—. `text-indent` nadie lo declara, así que no hay pelea; y
   en un campo de un solo renglón mueve exactamente lo que se quiere mover: el
   texto, el marcador de posición y el cursor.
   El margen de abajo pasa al envoltorio para que la lupa se centre contra el
   campo y no contra el campo más su margen. */
.campo-busca { position: relative; margin-bottom: 12px; }
.campo-busca .buscador { margin-bottom: 0; text-indent: 24px; }
.busca-marca {
  position: absolute;
  top: 0;
  left: 14px;
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--sutil);
  pointer-events: none;     /* el clic tiene que llegar al campo, no a la lupa */
}

/* El folio fiscal es largo y no se lee de corrido: en monoespaciada y chico,
   que es como se compara contra el portal del SAT. */
.uuid {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--t5);
  word-break: break-all;
}

/* Cliente elegido al que le faltan datos fiscales. */
.elegido.incompleto { color: var(--aviso); background: #fdf4e3; }

/* --- portal de autofacturación ------------------------------------------
   Lo abre el cliente en su teléfono, no un empleado: por eso va más ancho y
   con los campos grandes, que se llenan con el pulgar y con prisa. */
.tarjeta-ancha { max-width: 460px; }

.datos-factura {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--superficie2);
  border-radius: 12px;
}
.datos-factura div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}
.datos-factura span { font-size: 13px; color: var(--sutil); }
.datos-factura b    { font-weight: 800; }
.datos-factura .total-grande { font-size: 26px; color: var(--t3); }

.exito {
  padding: 12px 14px;
  font-weight: 700;
  color: var(--ok);
  background: #e6f4ec;
  border: 1px solid #bfe0cd;
  border-radius: 10px;
}

.pie-portal {
  margin-top: 22px;
  padding-top: 14px;
  text-align: center;
  font-size: 12px;
  border-top: 1px solid var(--borde);
}

/* Separador de secciones dentro de un formulario largo, como el de
   Configuración, que ya trae los datos del ticket y los de facturación. */
.titulo-seccion {
  margin: 28px 0 4px;
  padding-top: 18px;
  font-size: 17px;
  border-top: 1px solid var(--borde);
}

/* Encabezado de un grupo de casillas dentro de una hoja: las secciones que ve
   un tipo de usuario son veintiuna, y en una lista sin cortes no se encuentra
   ninguna. Sin raya arriba, porque dentro de la hoja ya hay suficientes. */
.titulo-grupo {
  margin: 20px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sutil);
}

.titulo-grupo:first-of-type { margin-top: 12px; }

/* ==================================================== dashboard =========== */

/* Los seis números del dueño. Se acomodan solos: tres por renglón en
   escritorio, dos en tablet y uno en teléfono. */
.tablero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.indicador {
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.indicador span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--sutil);
}
.indicador b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--t3);
}
.indicador small { font-size: 12px; color: var(--sutil); }

/* El de ventas manda: es el número que se busca al abrir la pantalla. */
.indicador.principal {
  color: #fff;
  background: var(--texto);
  border-color: var(--texto);
}
.indicador.principal span,
.indicador.principal small { color: #9fc0dc; }
.indicador.principal b { font-size: 34px; color: var(--t3-vivo); }

.indicador b.verde { color: var(--ok); }
.indicador b.rojo  { color: var(--alerta); }
.indicador b.ambar { color: var(--aviso); }

/* --- requiere atención --------------------------------------------------
   Cada aviso es una liga a donde se resuelve: enseñar el problema sin decir
   dónde arreglarlo solo sirve para preocupar. */
.avisos { display: grid; gap: 8px; }

.aviso-tarjeta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--sutil);
  border-radius: 12px;
}
.aviso-tarjeta span { flex: 1; min-width: 0; }
.aviso-tarjeta .icono:last-child { transform: rotate(180deg); opacity: .45; }
.aviso-tarjeta:active { background: var(--acento-flojo); }

.aviso-tarjeta.alerta { border-left-color: var(--alerta); color: var(--alerta); }
.aviso-tarjeta.aviso  { border-left-color: var(--aviso);  color: var(--aviso); }

/* --- gráfica de barras --------------------------------------------------
   Sin librería: son divs con alto en porcentaje. Para ver la forma del día
   basta y no mete 200 KB de JavaScript a una tablet. */
.grafica {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
  padding: 12px 14px 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow-x: auto;
}
.barra-col {
  flex: 1 0 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 5px;
}
/* Se llama barra-valor y no barra porque .barra ya es el encabezado azul de
   la app: con el mismo nombre, las barras heredaban su padding y su fondo. */
.barra-valor {
  width: 100%;
  min-height: 2px;
  background: linear-gradient(var(--acento-claro), var(--t3));
  border-radius: 4px 4px 0 0;
}
.barra-col small { font-size: 10px; color: var(--sutil); white-space: nowrap; }

/* --- dos listas lado a lado --------------------------------------------- */
.dos-listas { display: grid; gap: 18px; }
@media (min-width: 860px) {
  .dos-listas { grid-template-columns: 1fr 1fr; }
}

.subtitulo {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sutil);
}

.linea.compacta { padding: 9px 12px; margin-bottom: 6px; }
.linea.compacta .info b { font-size: 14px; }

.puesto {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  font-size: 12px;
  font-weight: 800;
  color: var(--sutil);
  background: var(--superficie2);
  border-radius: 8px;
}
.imp.verde { color: var(--ok); }

/* Las cifras largas se achican para no salirse de la tarjeta: un día son
   $8,400 y un mes puede ser $1,241,363.40. La clase la pone el PHP según
   cuántos caracteres trae el número, porque el CSS no puede medirlo. */
.indicador b.larga     { font-size: 23px; }
.indicador b.muy-larga { font-size: 19px; }
.indicador.principal b.larga     { font-size: 28px; }
.indicador.principal b.muy-larga { font-size: 23px; }

/* Con pantalla ancha la tarjeta de ventas ocupa dos columnas: es el número
   que se busca al abrir y merece el espacio.
   El corte está en 1600 y no antes porque la de ventas doble hace SIETE
   huecos para seis tarjetas: por debajo de eso solo caben seis columnas y la
   última —Merma— se quedaba sola en un segundo renglón. Siete columnas piden
   1248 px de rejilla, que es lo que queda tras la barra lateral y los
   márgenes a partir de este ancho. */
@media (min-width: 1600px) {
  .indicador.principal { grid-column: span 2; }
}

/* Rótulo de cada grupo de pestañas en Reportes: Ventas y Almacén.
   La raya a la derecha separa el rótulo de los botones sin gastar un renglón;
   desaparece al envolverse, donde ya no separaría nada. */
.grupo-pestanas {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  padding-right: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--sutil);
  border-right: 1px solid var(--borde);
}
.grupo-pestanas svg { flex: none; opacity: .8; }

/* ======================================================= compras ========== */

/* Los campos de recepción viven dentro de la tabla: angostos y alineados a
   la derecha, como los números que acompañan. */
.tabla-reporte input.rec-cant,
.tabla-reporte input.rec-costo {
  width: 96px;
  padding: 8px 10px;
  font-size: 15px;
  text-align: right;
}

/* Lo que el costeo dinámico enseña al recibir: se queda arriba hasta que
   alguien lo lea y le dé «Entendido». */
#costeo-dinamico {
  margin: 0 0 20px;
  padding: 16px;
  background: #fffaf0;
  border: 1px solid #f0dcb4;
  border-radius: var(--radio);
}
#costeo-dinamico .tabla-scroll { margin: 12px 0; }

/* ================================================ conteo físico =========== */

/* Barra de avance: cuánto del conteo ya se hizo. */
.avance {
  height: 8px;
  margin: -6px 0 14px;
  background: var(--superficie2);
  border-radius: 99px;
  overflow: hidden;
}
.avance div {
  height: 100%;
  background: linear-gradient(90deg, var(--acento-claro), var(--t3));
  border-radius: 99px;
}

/* Cada renglón se toca entero para contarlo: se cuenta con la tablet en una
   mano y la caja en la otra, no hay para apuntarle a un botón chico. */
.linea.conteo-linea { cursor: pointer; }
.linea.conteo-linea:active { background: var(--acento-flojo); }
.linea.conteo-linea.contada { background: var(--superficie2); }

.linea .existencia.sobra  b { color: var(--t4); }
.linea .existencia.cuadra b { color: var(--ok); }

/* El número que se teclea frente al anaquel: grande y centrado. */
input.cantidad-grande {
  margin: 10px 0 4px;
  padding: 18px;
  font-size: 34px;
  font-weight: 800;
  text-align: center;
}

/* ======================================================= mapa de mesas ==== */

/* Cuántas mesas hay en cada estado, arriba del mapa. */
.leyenda-mesas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.marca-estado-mesa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
}

/* El punto de color antes del nombre: el estado se reconoce por él, y el
   texto solo lo confirma. */
.marca-estado-mesa::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.marca-estado-mesa b { margin-left: 4px; }

.marca-estado-mesa { cursor: pointer; }
.marca-estado-mesa.m-libre      { color: var(--ok); }
.marca-estado-mesa.m-ocupada    { color: var(--acento); }
.marca-estado-mesa.m-por-cobrar { color: var(--t3); background: var(--t3-flojo); border-color: #b9e3db; }
.marca-estado-mesa.m-reservada  { color: var(--t5); background: var(--t5-flojo); border-color: #d6daf3; }

/* Ahora además filtran: el cursor y el marcado tienen que decirlo antes de
   que alguien lo descubra por accidente.
   Va DESPUÉS de los colores de cada estado: puesto antes, el verde de «libre»
   le ganaba al blanco y el chip encendido se quedaba con la letra verde sobre
   azul, es decir, en blanco. */
.marca-estado-mesa.activa,
.marca-estado-mesa.activa.m-libre,
.marca-estado-mesa.activa.m-ocupada,
.marca-estado-mesa.activa.m-por-cobrar,
.marca-estado-mesa.activa.m-reservada {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
}

/* Por cobrar: la mesa ya pidió la cuenta. Es la que el cajero busca, así que
   se pinta distinta de las que siguen comiendo. */
.mesa.e-por-cobrar {
  border-color: var(--t3);
  background: var(--t3-flojo);
  box-shadow: 0 0 0 2px rgba(16, 130, 123, .15);
}
.mesa.e-por-cobrar .icono { color: var(--t3); }

.mesa.e-reservada {
  border-style: dashed;
  border-color: var(--t5);
  background: var(--t5-flojo);
}
.mesa.e-reservada .icono { color: var(--t5); }
.mesa .reservada { margin-top: auto; font-weight: 700; color: var(--t5); }

.etiqueta-cobrar {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
  background: var(--t3);
  border-radius: 6px;
}

/* Una mesa que lleva más de dos horas abierta: o ya se fue sin pagar, o a
   alguien se le olvidó cobrarla. */
.tiempo-largo { color: var(--aviso); font-weight: 700; }

.nuevo-salon { margin: 14px 0 4px; }
.nuevo-salon summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.nuevo-salon .filtros-fila { margin-top: 10px; }

/* ============================================ mover, unir y dividir ======= */

.acciones-mesa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
}
.acciones-mesa .boton { justify-content: center; }

/* La cuenta con la que se va a unir: un renglón que se elige con un toque. */
.linea.opcion-cuenta {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.linea.opcion-cuenta.elegida,
.linea.fila-division.elegida {
  border-color: var(--t3);
  background: var(--t3-flojo);
}

/* Al dividir: tocar el nombre se lleva el renglón entero; el contador sirve
   para partir «3 cervezas» en una y dos. */
.linea.fila-division .info { cursor: pointer; }
.contador {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.contador button {
  width: 38px; height: 38px;
  font-size: 22px;
  line-height: 1;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}
.contador .valor {
  min-width: 24px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
}

.resumen-division {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 6px;
}
.resumen-division span { font-size: 13px; color: var(--sutil); }
.resumen-division b    { font-size: 24px; font-weight: 800; color: var(--t3); }

#dv-lineas { max-height: 46vh; overflow-y: auto; margin: 10px 0; }

/* ===================================================== reservaciones ====== */

.navega-dia {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.navega-dia .adelante .icono { transform: rotate(180deg); }
.dia-actual { flex: 1; text-align: center; }
.dia-actual b     { display: block; font-size: 18px; }
.dia-actual small { color: var(--t3); font-weight: 700; }
.elige-dia input  { width: auto; padding: 9px 10px; font-size: 14px; }

/* La hora manda: es lo que se busca al ver la lista del día. */
.hora-reserva {
  flex: none;
  min-width: 62px;
  padding: 8px 6px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  color: var(--t5);
  background: var(--t5-flojo);
  border-radius: 10px;
}
.linea.reserva.r-l,
.linea.reserva.r-n,
.linea.reserva.r-x { opacity: .6; }

/* ======================================================= modificadores ==== */

/* Las notas de siempre, bajo el campo de nota: un toque las escribe. */
.notas-rapidas { margin: 8px 0 4px; }
.notas-rapidas .chip { font-size: 13px; padding: 7px 11px; }

/* Los extras con precio van plegados: no todos los platillos los llevan, y
   desplegados le robarían la hoja a la cantidad y la nota. */
.extras-producto {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: var(--superficie2);
  border-radius: 12px;
}
.extras-producto summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--acento);
}
.extras-producto .cuenta-extras { color: var(--t3); }
.extras-producto input { margin: 10px 0 8px; }
.extras-producto .chips { margin-top: 6px; }
.extras-producto .chip { font-size: 13px; }

/* En el tablero de cocina, el extra sangrado bajo su platillo. */
.ticket li.extra {
  padding-left: 22px;
  font-size: .92em;
  color: var(--t4);
}

/* Ninguna hoja se sale de la pantalla: con los extras desplegados, la del
   producto crecía más que un teléfono y el botón de Agregar quedaba fuera. */
.hoja {
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==================================================== personal =========== */

/* El rol de cada quien. Cada uno lleva su color de la gama de acompañamiento
   para reconocerlos de un vistazo al recorrer la lista. */
.rol-persona {
  flex: none;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 7px;
  color: var(--t1);
  background: var(--t1-flojo);
}
.rol-persona.p-gerente { color: var(--t5); background: var(--t5-flojo); }
.rol-persona.p-cajero  { color: var(--t3); background: var(--t3-flojo); }
.rol-persona.p-mesero  { color: var(--t4); background: var(--t4-flojo); }
.rol-persona.p-cocina  { color: var(--t2); background: var(--t2-flojo); }
.rol-persona.p-almacen { color: var(--t6); background: var(--t6-flojo); }

/* Cuánta gente hay en cada rol. */
.cuenta-rol {
  flex: none;
  min-width: 34px;
  font-size: 20px;
  font-weight: 800;
  text-align: right;
  color: var(--sutil);
}

/* Quien tiene cerrada esta app: sigue en la lista, pero no compite por la
   vista con los que sí entran. */
.linea.apagada { opacity: .55; }

/* Rebote por permiso: se explica y se quita solo. Fijo arriba porque el pie
   de las pantallas ya está ocupado con los botones de acción. */
.aviso-permiso {
  position: fixed;
  top: 66px; left: 50%;   /* debajo de la barra: no tapa el título */
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 24px);
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.35;
  color: #fff;
  background: var(--aviso);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(10, 46, 66, .25);
}
.aviso-permiso svg { flex: none; }

/* ==================================================== agotados (86) ======= */

/* Lo que se acabó sigue en la cuadrícula, apagado y sin poder tocarse. Que
   desapareciera sería peor: el mesero lo buscaría creyendo que se le perdió,
   en vez de poder decirle al cliente que hoy no hay. */
.producto.agotado {
  cursor: not-allowed;
  background: var(--superficie2);
  border-style: dashed;
  box-shadow: none;
}
.producto.agotado .pfoto { filter: grayscale(1); opacity: .45; }
.producto.agotado .pnombre,
.producto.agotado .pprecio { color: var(--sutil); }
.producto.agotado .pprecio { text-decoration: line-through; }
.producto.agotado .pestacion { color: var(--alerta); font-weight: 800; }

/* El panel de la cocina para marcar y reponer. */
.linea.se-acabo { border-left: 3px solid var(--alerta); }
.marca-agotado {
  flex: none;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 7px;
  color: var(--alerta);
  background: #fdf3f3;
}
.marca-agotado.hoy { color: var(--aviso); background: #fdf4e3; }

/* La tira de agotados, arriba del tablero de cocina. */
.fila-agotados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.chip.agotado-chip {
  color: var(--alerta);
  background: #fdf3f3;
  border-color: #f3d3d4;
  font-weight: 700;
}
.chip.agotado-chip:active { background: #f8e3e4; }
.resultados-busca button.ya-agotado { background: #fdf3f3; }
.resultados-busca button.ya-agotado .nom { color: var(--alerta); }

/* En cocina: la mesa ya ordenó y está esperando. Es el estado «Ordenando» de
   la propuesta, y en el piso sirve para saber a quién le falta su comida
   antes de que la pida por segunda vez. */
.mesa.e-ordenando {
  border-color: var(--t6);
  background: var(--t6-flojo);
}
.mesa.e-ordenando .icono { color: var(--t6); }
.etiqueta-cocina {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
  background: var(--t6);
  border-radius: 6px;
}
.marca-estado-mesa.m-ordenando {
  color: var(--t6);
  background: var(--t6-flojo);
  border-color: #bcdee9;
}

/* ================================================= costeo y unidades ====== */

/* Cuánto del precio se lleva la receta. Rojo cuando el platillo cuesta más de
   lo que se vende: casi siempre es una unidad mal capturada, no un mal
   negocio. */
.pct-costo {
  flex: none;
  min-width: 68px;
  padding: 5px 8px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  border-radius: 7px;
}
.pct-costo.medio { color: var(--aviso);  background: #fdf4e3; }
.pct-costo.mal   { color: var(--alerta); background: #fdf3f3; }

.resumen-costeo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.resumen-costeo .marcador {
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
}
.resumen-costeo .marcador b { color: var(--t3); }
.resumen-costeo .marcador b.malo { color: var(--alerta); }

/* El renglón que se lleva medio platillo él solo. */
.linea.sospechosa { border-left: 3px solid var(--alerta); }
.importe-linea {
  flex: none;
  min-width: 92px;
  font-weight: 700;
  text-align: right;
  color: var(--texto);
}
.importe-linea.malo { color: var(--alerta); }

.resultado-conversion {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--t3);
  background: var(--t3-flojo);
  border-radius: 10px;
  min-height: 20px;
}
.resultado-conversion:empty { display: none; }
.resultado-conversion span { color: var(--sutil); }

.nueva-presentacion {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.nueva-presentacion summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--acento);
}

/* ============================================= ventas sin facturar ======= */

/* Un renglón que se marca. Toda la tarjeta es el área de toque: en una tablet,
   atinarle a una casilla de 20px con el pulgar es una lotería. */
.linea.seleccionable { cursor: pointer; }
.linea.seleccionable input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 2px;
}
.linea.seleccionable:has(input:checked),
.linea.seleccionable.marcada {
  border-color: var(--acento);
  background: var(--acento-flojo);
}

.barra-seleccion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.barra-seleccion .casilla { margin-top: 0; }

/* La forma de pago, con su propio color: de un vistazo se ve qué va a decir
   el comprobante. */
.forma-pago {
  flex: none;
  min-width: 104px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 7px;
  color: var(--t1);
  background: var(--t1-flojo);
}
.forma-pago.f-01 { color: var(--ok);     background: #e6f4ec; }  /* efectivo      */
.forma-pago.f-28 { color: var(--t4);     background: var(--t4-flojo); } /* débito */
.forma-pago.f-04 { color: var(--t5);     background: var(--t5-flojo); } /* crédito */
.forma-pago.f-03 { color: var(--t3);     background: var(--t3-flojo); } /* transf. */
.forma-pago.f-99 { color: var(--sutil);  background: var(--superficie2); }

/* El avance del timbrado por tandas. */
.avance-lote { margin-top: 16px; }
.barra-avance {
  height: 8px;
  background: var(--superficie2);
  border-radius: 999px;
  overflow: hidden;
}
.barra-avance span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acento);
  transition: width .3s;
}
.falla-lote {
  margin: 6px 0 0;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--alerta);
  background: #fdf3f3;
  border-radius: 8px;
}

/* --- formulario de datos fiscales --------------------------------------- */

.rejilla-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 16px;
  align-items: start;
}
.campo-fiscal { grid-column: 1 / -1; }
.campo-fiscal.mitad { grid-column: auto; }
.campo-fiscal.con-error input,
.campo-fiscal.con-error select { border-color: var(--alerta); }
.obligatorio { color: var(--alerta); }
.error-campo {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--alerta);
}
.aviso-campo {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--aviso);
}
.ayuda-campo {
  margin: 4px 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sutil);
}

/* De un vistazo: ¿se puede facturar o no? */
.tablero-fiscal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--borde);
}
.tablero-fiscal b { display: block; font-size: 16px; }
.tablero-fiscal small { color: var(--sutil); }
.tablero-fiscal.listo     { color: var(--ok);    background: #e6f4ec; border-color: #bfe3cd; }
.tablero-fiscal.pendiente { color: var(--aviso); background: #fdf4e3; border-color: #f0dcb4; }

.traer-del-pos {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--superficie);
  border: 1px dashed var(--borde);
  border-radius: 12px;
}

/* ================================================= cobro rápido ========== */

/* El resumen de la venta: piezas y total, grandes, porque es lo que quien
   cobra mira mientras el cliente saca el dinero. */
.resumen-rapido {
  display: flex;
  gap: 10px;
  margin: 12px 0 16px;
}
.resumen-rapido > div {
  flex: 1;
  padding: 10px 12px;
  background: var(--superficie2);
  border-radius: 10px;
}
.resumen-rapido span { display: block; font-size: 12px; color: var(--sutil); }
.resumen-rapido b { font-size: 20px; font-weight: 800; }
.resumen-rapido .total { background: var(--t3-flojo); }
.resumen-rapido .total b { color: var(--t3); font-size: 24px; }

/* El cambio en rojo mientras lo recibido no alcanza. */
#cr-cambio.malo { color: var(--alerta); }

/* Después de cobrar, el cambio es el número que hay que leer de lejos. */
.cambio-grande {
  margin: 10px 0 16px;
  padding: 16px;
  text-align: center;
  background: var(--t3-flojo);
  border-radius: 12px;
}
.cambio-grande small { display: block; font-size: 13px; color: var(--sutil); }
.cambio-grande b { font-size: 40px; font-weight: 800; color: var(--t3); letter-spacing: -1px; }

/* La clave del SAT de cada producto, en monoespaciada: se compara dígito por
   dígito contra el catálogo del portal. */
.clave-sat {
  flex: none;
  min-width: 86px;
  padding: 4px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--t4);
  background: var(--t4-flojo);
  border-radius: 7px;
}
.unidad-sat {
  flex: none;
  min-width: 44px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--sutil);
}

/* ============================================= ficha del cliente ========= */

/* Al buscar un cliente se enseña su ficha fiscal completa, no solo el nombre:
   quien cobra tiene la constancia del cliente enfrente y necesita cotejarla
   antes de timbrar, no descubrir lo que falta cuando el PAC rechaza. */
.resultados-busca .cliente-ficha {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: baseline;
}
.cliente-ficha .cf-nombre { font-weight: 700; font-size: 15px; }
.cliente-ficha .cf-datos {
  grid-column: 1;
  font-size: 12px;
  color: var(--sutil);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.cliente-ficha .cf-estado {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 7px;
  color: var(--ok);
  background: #e6f4ec;
}
.cliente-ficha.incompleto .cf-estado { color: var(--aviso); background: #fdf4e3; }
.cliente-ficha.incompleto .cf-nombre { color: var(--aviso); }

/* ===================================== ficha del cliente elegido ========= */

/* Después de escogerlo se enseñan los cuatro datos que el SAT compara, con su
   rótulo, para poder cotejarlos contra la constancia que el cliente trae en la
   mano. Con el nombre y el RFC no alcanza. */
/* --- la hoja de facturar ------------------------------------------------
   Dos columnas: a quién se le factura y con qué claves sale. Son las dos
   preguntas del timbrado, y una debajo de la otra obligaba a bajar la hoja
   justo cuando hay que cotejar la ficha contra la constancia del cliente. */
.hoja.ancha { max-width: 860px; }

.hoja-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -4px 0 16px;
}
.hoja-cabeza .titulo-panel { flex: 1; min-width: 0; }
.hoja-cabeza h2 { margin: 0; font-size: 22px; }
.hoja-cabeza p  { margin: 2px 0 0; font-size: 14px; color: var(--sutil); }

.hoja-cuerpo { display: grid; gap: 18px; }
@media (min-width: 820px) {
  .hoja-cuerpo { grid-template-columns: 1fr 1fr; gap: 22px; }
  /* La raya entre columnas, puesta como borde de la segunda: un elemento
     separador de más tendría que esconderse al apilarse. */
  .hoja-cuerpo > .hoja-columna + .hoja-columna {
    padding-left: 22px;
    border-left: 1px solid var(--borde);
  }
}
.hoja-columna { min-width: 0; }
.hoja-columna > *:first-child { margin-top: 0; }

/* El rótulo de un campo, con su icono en el cuadrito. */
.rotulo-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.rotulo-campo .marca-panel { width: 32px; height: 32px; border-radius: 9px; }

/* Una nota de contexto: fondo tenue y el disco con la «i». Distinta del aviso
   ámbar, que es para lo que está mal; esta solo explica. */
.nota-info {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 10px 0;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sutil);
  background: var(--acento-flojo);
  border-radius: 12px;
}
.nota-info b { color: var(--texto); }
.nota-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--acento);
}

.ficha-elegido {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid #bfe3cd;
  border-radius: 12px;
  background: #e6f4ec;
}
.ficha-elegido.incompleto { border-color: #f0dcb4; background: #fdf4e3; }

.fe-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fe-cabeza b { flex: 1; min-width: 0; font-size: 15px; color: var(--ok); }
.ficha-elegido.incompleto .fe-cabeza b { color: var(--aviso); }

.fe-marca {
  flex: none;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 7px;
  color: #fff;
  background: var(--ok);
}
.ficha-elegido.incompleto .fe-marca { background: var(--aviso); }

/* El avatar de la ficha: empresa o persona, según el largo del RFC. */
.fe-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--ok);
  background: rgba(255, 255, 255, .7);
  border-radius: 10px;
}
.ficha-elegido.incompleto .fe-avatar { color: var(--aviso); }

.fe-datos { display: grid; gap: 4px; }
.fe-renglon { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.fe-etiqueta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  width: 118px;
  color: var(--sutil);
}
.fe-ico { display: flex; flex: none; opacity: .7; }
.fe-valor {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--texto);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
/* Lo que falta se dice con todas sus letras: un renglón en blanco se lee como
   «no aplica», y aquí significa «esto te va a rebotar». */
.fe-renglon.vacio .fe-valor {
  font-family: inherit;
  font-weight: 500;
  font-style: italic;
  color: var(--aviso);
}

.fe-pie, .fe-falta { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; }
.fe-pie   { color: var(--sutil); }
.fe-falta { color: var(--aviso); font-weight: 600; }

/* Retenciones: el bloque solo sale cuando el receptor es una empresa. */
.titulo-retenciones {
  margin: 18px 0 2px;
  padding-top: 14px;
  font-size: 15px;
  border-top: 1px solid var(--borde);
}

/* El concepto que dirá la factura. En cursiva cuando no tiene uno propio y
   sale el nombre del platillo: así se distingue lo capturado de lo heredado. */
.concepto-sat {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.concepto-sat.propio { font-style: italic; color: var(--sutil); }

/* =======================================================================
   Los colores del sistema (Configuración)

   Esto se vende a varios negocios y el azul es de Estratec: aquí se elige
   el de cada quien. La vista previa usa sus propios tokens `--p-*` para no
   cambiar la pantalla mientras alguien mueve el selector: se ve cómo va a
   quedar sin que la pantalla se vuelva un arcoíris en vivo.
   ======================================================================= */

.temas-listos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}
.tema-listo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;              /* no se encoge: el nombre no se parte */
  padding: 8px 14px 8px 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--texto);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}
.tema-listo.tema-activo { border-color: var(--acento); background: var(--acento-flojo); }
.tema-muestra {
  display: flex;
  overflow: hidden;
  border-radius: 999px;
}
.tema-muestra span { width: 15px; height: 26px; }

.campo-color {
  display: flex;
  align-items: center;
  gap: 8px;
}
.campo-color input[type="color"] {
  width: 54px;
  height: 46px;
  padding: 3px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}
.campo-color input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: lowercase;
}

/* --- la vista previa --------------------------------------------------- */
.tema-previa {
  display: flex;
  overflow: hidden;
  margin: 6px 0 4px;
  background: var(--p-fondo, var(--fondo));
  border: 1px solid var(--p-borde, var(--borde));
  border-radius: var(--radio);
}
.previa-lateral {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: none;
  width: 74px;
  padding: 16px 12px;
  background: var(--p-texto, var(--texto));
}
.previa-punto {
  width: 22px; height: 22px;
  background: var(--p-acento-claro, var(--acento-claro));
  border-radius: 7px;
}
.previa-raya {
  height: 7px;
  background: rgba(255, 255, 255, .28);
  border-radius: 999px;
}
.previa-raya.corta { width: 62%; background: rgba(255, 255, 255, .16); }

.previa-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 18px;
}
.previa-titulo {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--p-texto, var(--texto));
}
.previa-botones { display: flex; gap: 8px; margin-bottom: 12px; }
.previa-boton {
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--p-acento, var(--acento));
  border-radius: 10px;
}
.previa-boton.flojo {
  color: var(--p-acento, var(--acento));
  background: var(--p-superficie2, var(--superficie2));
}
.previa-nota { font-size: 14px; color: var(--p-sutil, var(--sutil)); }
.previa-enlace { color: var(--p-acento, var(--acento)); }

@media (max-width: 560px) {
  .tema-listo span:last-child { display: none; }
  .tema-listo { padding: 8px; }
}

/* =======================================================================
   Que todo quepa en la pantalla que sea

   La app se usa en tres anchos muy distintos: el teléfono del mesero, la
   tablet de la caja y la computadora de la oficina. Lo que sigue no cambia
   cómo se ve en grande; arregla lo que se salía en chico.

   La regla de fondo: nada debe obligar a arrastrar la página de lado. Un
   renglón que no cabe se acomoda en dos; una tabla que no cabe se desplaza
   sola, dentro de su caja.
   ======================================================================= */

/* --- los renglones de lista ---------------------------------------------
   `.linea` es una fila de chip + texto + importe + botones. En una pantalla
   de 375px eso pide 500px y los botones se salían de la pantalla. Aquí se
   parte en dos pisos: arriba el estado y el importe, en medio el texto con
   todo el ancho, abajo los botones. */
@media (max-width: 820px) {
  .linea {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .linea > .info {
    order: 2;
    flex: 1 1 100%;     /* se lleva el renglón completo y fuerza el corte */
  }
  .linea > .imp {
    order: 1;
    margin-left: auto;  /* el importe, pegado a la derecha del primer piso */
  }
  .linea > .estado-factura,
  .linea > .marca-art,
  .linea > .puesto { order: 0; }

  /* Los botones al final, en su propio piso. */
  .linea > .boton,
  .linea > button,
  .linea > .quitar { order: 3; }

  /* Un botón de texto se estira para que el dedo le atine; los de icono se
     quedan de su tamaño, que ya son cuadrados. */
  .linea > .boton:not(.chico) { flex: 1 1 auto; }
}

/* --- las tablas ---------------------------------------------------------
   Una tabla de seis columnas no cabe en un teléfono y no se puede partir sin
   volverla ilegible. Se deja que se desplace a lo ancho DENTRO de su caja,
   que es lo que no hacía: antes empujaba la página entera. */
@media (max-width: 860px) {
  .tabla-reporte {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- los filtros --------------------------------------------------------
   Un `<select>` con una opción larga —«04 · Operación nominativa relacionada
   en la factura global»— crece hasta su texto y se sale. `min-width: 0` le
   permite encogerse; el texto se recorta y al abrirlo se ve completo. */
.filtros-fila select,
.filtros-fila input { min-width: 0; }

/* --- el pie ---------------------------------------------------------------
   El rótulo de arriba («Por facturar en el periodo») sí se puede recortar; la
   cifra NO, que es el dato que se mira. El acomodo de dos pisos lo resuelve el
   bloque de arriba a partir de 820px. */
.pie .marcador small { overflow: hidden; text-overflow: ellipsis; }

/* --- el total del pie nunca se corta -------------------------------------
   `flex: 1` con `min-width: 0` dejaba que el marcador se encogiera por debajo
   de su cifra, y «$389,837.00» se leía «$389,837.0». `min-content` le pone
   piso: el número manda y lo que cede son los botones, que sí aguantan ir más
   juntos. */
.pie .marcador { min-width: min-content; }

/* --- el título de la barra en pantallas muy angostas ---------------------
   A 360px, con el botón de menú, la flecha y los chips de la derecha, al
   título le quedaban 46px y «Mesas» se leía «Mes…». */
@media (max-width: 420px) {
  .barra { gap: 8px; padding: 12px 12px; }
  .barra h1 { font-size: 17px; }
}

/* =======================================================================
   Dashboard: lo que se agregó al tablero

   Las tarjetas ya existían. Esto les suma el icono, la comparación contra el
   periodo anterior y la chispa; y abajo pone la gráfica y la dona de métodos
   de pago una junto a la otra, que es la pregunta que sigue después de
   «cuánto vendí»: con qué me pagaron.
   ======================================================================= */

/* --- el rótulo de cada tarjeta ------------------------------------------ */
.indicador .rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--sutil);
}

/* El icono del rótulo, en su cuadro. Suelto se perdía contra el texto en
   mayúsculas; dentro del cuadro cada tarjeta se reconoce por su figura antes
   de leer una letra, que es lo que se hace al echar el primer vistazo. */
.indicador .rotulo-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  margin: 0;
  color: var(--acento);
  background: var(--acento-flojo);
  border-radius: 9px;
}
.indicador.principal .rotulo-marca {
  color: var(--t3-vivo);
  background: rgba(255, 255, 255, .1);
}

/* El cuadro y su texto viajan juntos: son un solo elemento flexible. Sueltos,
   el rótulo largo —«COSTO DE ALIMENTOS»— no cabía al lado y flexbox, que
   envuelve antes de encoger, mandaba el cuadro a un renglón para él solo.
   Agrupados, lo que quiebra es el texto, que es lo que debe quebrar. */
.indicador .rotulo-que-es {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
}
.indicador .rotulo-texto {
  display: block;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

/* La comparación se va a la derecha del rótulo y manda su propio color: es un
   dato de dirección, no de cantidad. */
.variacion {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  white-space: nowrap;
}
.variacion.sube { color: var(--ok);     background: #e6f4ec; }
.variacion.baja { color: var(--alerta); background: #fdf3f3; }
.variacion.igual { color: var(--sutil); background: var(--superficie2); }
.indicador.principal .variacion.sube { color: #8ff0c4; background: rgba(255,255,255,.14); }
.indicador.principal .variacion.baja  { color: #ffb4b4; background: rgba(255,255,255,.14); }
.indicador.principal .variacion.igual { color: #9fc0dc; background: rgba(255,255,255,.1); }

/* --- la chispa ----------------------------------------------------------
   Sin ejes ni números a propósito: no está para leerle un valor —para eso
   está la gráfica grande— sino para ver si el día fue parejo o se concentró
   en dos horas. */
.chispa {
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 10px;
}

/* --- el medidor del costo de alimentos ---------------------------------- */
.medidor {
  position: relative;
  height: 7px;
  margin-top: 12px;
  background: var(--superficie2);
  border-radius: 999px;
  overflow: hidden;
}
.medidor-valor {
  height: 100%;
  background: var(--t3);
  border-radius: 999px;
}
.medidor-valor.alto { background: var(--alerta); }
/* La marca del 35%, que es la referencia sana en un restaurante. */
.medidor-meta {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--texto);
  opacity: .35;
}

/* --- dos paneles lado a lado -------------------------------------------- */
.dos-paneles {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}
@media (min-width: 1000px) {
  /* La gráfica se lleva más espacio: tiene veinte barras y la dona una sola
     figura. */
  .dos-paneles { grid-template-columns: 1.45fr 1fr; align-items: start; }
}

.panel {
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.panel-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-cabeza h2 { margin: 0; font-size: 17px; font-weight: 700; }
.panel-cabeza small { font-size: 13px; color: var(--sutil); white-space: nowrap; }

/* Dentro de un panel la gráfica ya no lleva su propia caja. */
.panel .grafica {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
/* La barra más alta se distingue: es la hora que hay que mirar. */
.barra-col.tope .barra-valor { background: linear-gradient(var(--t3-vivo), var(--t3)); }
.barra-col.tope small { color: var(--texto); font-weight: 700; }

/* --- la dona ------------------------------------------------------------ */
.caja-dona {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.dona { flex: none; width: 150px; height: 150px; }
.dona-cifra {
  font-size: 15px;
  font-weight: 800;
  fill: var(--texto);
}
.dona-pie { font-size: 11px; fill: var(--sutil); }

.leyenda {
  flex: 1 1 190px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.leyenda li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
}
.leyenda .punto {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.leyenda .nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leyenda .parte { flex: none; color: var(--sutil); font-variant-numeric: tabular-nums; }
.leyenda .monto {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- la barra de proporción de las listas -------------------------------
   Se mide contra el primer lugar y no contra el total: lo que se quiere ver
   es cuánto le saca el número uno al resto. */
.barra-parte {
  display: block;
  height: 5px;
  margin-top: 7px;
  background: var(--superficie2);
  border-radius: 999px;
  overflow: hidden;
}
.barra-parte > span {
  display: block;
  height: 100%;
  background: var(--acento-claro);
  border-radius: 999px;
}
.barra-parte.verde > span { background: var(--ok); }

/* --- el subtítulo del encabezado ---------------------------------------- */
.barra h1 small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sutil);
}
@media (max-width: 560px) {
  /* En teléfono el título solo: el subtítulo repite lo que ya se ve. */
  .barra h1 small { display: none; }
}

/* Un dato que no se puede calcular no se inventa: se dice. Un cero grande y
   verde donde debería ir la utilidad se lee como «ganaste todo». */
.indicador b.sin-dato { color: var(--sutil); opacity: .55; }
.indicador small a { color: var(--acento); font-weight: 600; }
.indicador.principal small a { color: var(--t3-vivo); }

/* --- que los paneles se puedan encoger ----------------------------------
   Un hijo de grid no baja de su contenido salvo que se le diga. La gráfica
   del mes son 29 barras —800px de ancho mínimo—, así que el panel crecía a
   800px y empujaba la página entera en un teléfono. Con `min-width: 0` el
   panel se encoge y el desplazamiento lo resuelve la gráfica, que ya lo
   traía. */
.dos-paneles > * { min-width: 0; }

/* --- el rótulo de la tarjeta en tarjetas angostas -----------------------
   «MESAS ATENDIDAS ↑200%» en mayúsculas y con espaciado no cabe en 145px.
   Se deja envolver: dos renglones cortos se leen; uno cortado, no. */
.indicador .rotulo { flex-wrap: wrap; row-gap: 2px; }
.indicador .rotulo .variacion { margin-left: auto; }

/* La cifra se achica un poco más en tarjeta angosta: `clase_cifra` elige por
   número de letras, pero no sabe cuánto mide la tarjeta. */
.indicador b { font-size: 26px; }
.indicador b.larga     { font-size: 22px; }
.indicador b.muy-larga { font-size: 19px; }

/* --- la liga de un dato que falta ---------------------------------------
   «Costear recetas» era un renglón de 14px de alto: imposible de atinarle
   con el dedo. */
.indicador small a {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 0;
  text-decoration: underline;
}

/* --- la leyenda de la dona ----------------------------------------------
   «Tarjeta de débito» pedía 109px y le tocaban 58: se cortaba a «Tarjeta…».
   Debajo de 1200px la leyenda se va completa debajo de la dona. */
@media (max-width: 1200px) {
  .caja-dona { justify-content: center; }
  .leyenda { flex: 1 1 100%; }
}

/* --- la tarjeta de ventas cuando NO ocupa dos columnas -------------------
   Arriba de 1100px la tarjeta principal se lleva dos columnas y su cifra de
   34px se ve bien. Abajo de eso cae a una sola columna de ~177px y la misma
   cifra ya no cabe: «$16,293.00» pedía 154px en 139. Se le baja el tamaño
   junto con la columna. */
@media (max-width: 1099px) {
  .indicador.principal b           { font-size: 26px; }
  .indicador.principal b.larga     { font-size: 22px; }
  .indicador.principal b.muy-larga { font-size: 19px; }
}

/* La leyenda de la dona se va completa debajo mientras el panel sea angosto.
   A 1280px el panel de la dona mide 400px y «Tarjeta de débito» se cortaba. */
@media (max-width: 1400px) {
  .caja-dona { justify-content: center; }
  .leyenda { flex: 1 1 100%; }
}

/* Y la liga de un dato que falta, con alto de dedo. */
.indicador small a { padding: 9px 0; }

/* =======================================================================
   La miniatura de un producto

   Su foto si la tiene; si no, el icono que le toca por el nombre. El tono
   sale del nombre —estable— para que el mismo platillo se vea igual en todas
   las pantallas y una lista no quede de un solo color.
   ======================================================================= */
.mini-producto {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: var(--superficie2);
  border-radius: 11px;
}
.mini-producto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-producto .icono { display: block; }

.mini-producto.tono-t1 { color: var(--t1); background: var(--t1-flojo); }
.mini-producto.tono-t2 { color: var(--t2); background: var(--t2-flojo); }
.mini-producto.tono-t3 { color: var(--t3); background: var(--t3-flojo); }
.mini-producto.tono-t4 { color: var(--t4); background: var(--t4-flojo); }
.mini-producto.tono-t5 { color: var(--t5); background: var(--t5-flojo); }
.mini-producto.tono-t6 { color: var(--t6); background: var(--t6-flojo); }

/* El dibujo del producto dentro de la tarjeta del menú ocupa el mismo lugar
   que ocuparía la foto, para que la cuadrícula no cambie de forma según cuáles
   tengan fotografía. */
.producto .pfoto.dibujo {
  display: grid;
  place-items: center;
  border-radius: 0;
}
.producto .pfoto.dibujo svg {
  width: 44%;
  height: 44%;
  max-width: 64px;
}


/* =======================================================================
   Qué se vende a cada hora

   Mapa de calor: un renglón por producto, una columna por hora. Se lee en los
   dos sentidos —a qué hora se vende ese platillo, y qué se vende a esa hora—,
   que es lo que unas barras apiladas no dan.

   El tinte va en una capa aparte y no en el fondo de la celda porque la
   opacidad también apagaría el número. Y sale de `--t3`, no de un color
   escrito a mano, para que siga la paleta que eligió el negocio.
   ======================================================================= */

/* --- la cabecera del panel ---------------------------------------------- */
.mapa-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.mapa-emblema {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  color: var(--acento);
  background: var(--acento-flojo);
  border-radius: 12px;
}
.mapa-titulos { flex: 1 1 auto; min-width: 0; }
.mapa-titulos h2 { margin: 0; font-size: 19px; font-weight: 800; }
.mapa-titulos small { font-size: 13px; color: var(--sutil); }
.mapa-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--acento);
  background: var(--acento-flojo);
  border-radius: 999px;
  white-space: nowrap;
}

/* --- la tabla ------------------------------------------------------------ */
.mapa-horas {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mapa-horas table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px 3px;
}
.mapa-horas th {
  padding: 4px 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--sutil);
  text-align: center;
  white-space: nowrap;
}

.mapa-horas .col-num { width: 34px; text-align: center; }
.mapa-horas td.col-num span {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--sutil);
  background: var(--superficie2);
  border-radius: 8px;
}

.mapa-horas .col-producto { text-align: left; padding-left: 0; white-space: nowrap; }
.mapa-horas td.col-producto {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
}
.mapa-horas td.col-producto .nom {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapa-horas .celda {
  position: relative;
  min-width: 42px;
  height: 38px;
  text-align: center;
  border-radius: 9px;
  overflow: hidden;
}
.mapa-horas .tinte { position: absolute; inset: 0; background: var(--t3); }
.mapa-horas .celda b {
  position: relative;      /* encima del tinte, a opacidad completa */
  font-size: 13px;
  font-weight: 800;
  color: var(--texto);
}
/* El color del número lo decide la intensidad de la celda, no si manda: sobre
   el turquesa fuerte el texto oscuro deja de leerse, y sobre uno pálido el
   blanco tampoco. Un primer intento lo ató a «manda» y los líderes de las
   horas flojas salieron en blanco sobre casi blanco. */
.mapa-horas .celda.fuerte b { color: #fff; }

/* La corona del que manda en esa hora. Va al LADO de la cifra y no encima:
   en una celda de 38px, apilarlas deja las dos apretadas. Sustituyó a un
   recuadro, que con trece horas convertía la tabla en una reja. */
.mapa-horas .celda {
  display: table-cell;      /* se conserva el comportamiento de celda */
}
.mapa-horas .contenido-celda {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
}
.mapa-horas .corona { line-height: 0; color: var(--t3); }
.mapa-horas .celda.fuerte .corona { color: #fff; opacity: .92; }
.mapa-horas .nada { color: var(--borde); font-weight: 700; }

/* --- el total, con su barra ---------------------------------------------- */
.mapa-horas .col-total { text-align: right; white-space: nowrap; padding-left: 10px; }
.mapa-horas td.col-total b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.mapa-horas td.col-total .barra-parte { width: 74px; margin: 5px 0 0 auto; }

/* --- la hora pico -------------------------------------------------------- */
.mapa-horas .col-pico { text-align: left; white-space: nowrap; padding-left: 12px; }
.mapa-horas td.col-pico {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--acento);
}
.mapa-horas td.col-pico b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.mapa-horas td.col-pico small { display: block; font-size: 11px; color: var(--sutil); }

/* --- el pie: la leyenda y la escala -------------------------------------- */
.mapa-pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.mapa-pie .ayuda-campo { flex: 1 1 280px; margin: 0; }
.escala { flex: none; }
.escala .muestras { display: flex; gap: 3px; }
.escala .muestras span {
  width: 34px; height: 14px;
  background: var(--t3);
  border-radius: 4px;
}
.escala .extremos {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.escala .extremos small { font-size: 11px; color: var(--sutil); }

@media (max-width: 700px) {
  .mapa-horas td.col-producto .nom { max-width: 120px; }
  .mapa-horas .celda { min-width: 36px; height: 34px; }
  .mapa-cabeza { flex-wrap: wrap; }
  .mapa-etiqueta { order: 3; }
}

/* El producto con su icono dentro de una tabla de reporte. */
.producto-con-icono {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  vertical-align: middle;
}

/* La leyenda del pie del mapa, con sus dos iconos. */
.leyenda-mapa {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
  color: var(--sutil);
}
.leyenda-mapa > span:not([class]) { margin-right: 10px; }
.leyenda-mapa .emblema-info,
.leyenda-mapa .emblema-corona {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
}
.leyenda-mapa .emblema-info   { color: var(--acento); background: var(--acento-flojo); }
.leyenda-mapa .emblema-corona { color: var(--t3);     background: var(--t3-flojo); }

/* Un buscador dentro de la fila de filtros comparte el renglón con sus
   botones. Suelto lleva `margin-bottom` porque ahí va solo; aquí estorba. */
.filtros-fila .buscador {
  flex: 1 1 220px;
  min-width: 0;
  margin-bottom: 0;
}

/* La unidad de medida junto a la existencia, en «Productos por surtir». */
.linea .imp .medida-surtir {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--sutil);
}
.linea .imp.rojo { color: var(--alerta); }

/* --- los atajos de hora en una reservación ------------------------------
   El control nativo de hora pide tres toques en una tablet —hora, minutos,
   a.m./p.m.— y casi todas las reservaciones caen en una hora redonda. */
.horas-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -4px 0 14px;
}
.chip-hora {
  flex: none;
  min-height: 40px;
  padding: 8px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  background: var(--superficie2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  cursor: pointer;
}
.chip-hora:active { background: var(--borde); }
.chip-hora.puesta {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
}

/* El campo de hora, más cómodo de tocar: el reloj nativo es diminuto. */
input[type=time] { font-variant-numeric: tabular-nums; }
input[type=time]::-webkit-calendar-picker-indicator {
  width: 22px; height: 22px;
  padding: 2px;
  cursor: pointer;
  opacity: .55;
}
input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --- los accesos rápidos del dashboard ----------------------------------
   El tablero se abre para mirar, pero casi siempre termina en cobrar, vender
   en el mostrador o facturar. Van arriba, antes de los números: quien entra a
   trabajar no debería tener que leer el reporte para llegar a su pantalla. */
/* Los accesos rápidos del dashboard: cobrar, vender en mostrador, facturar.
   Se llamaban `.atajo`, que es el nombre que ya tenían los botones de número
   de personas en Mesas; al compartir clase, estas reglas se las aplicaban a
   aquellos y los estiraban a 180 px cada uno. */
.accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.acceso {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.acceso:active { border-color: var(--acento); background: var(--acento-flojo); }
.acceso-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  color: var(--acento);
  background: var(--acento-flojo);
  border-radius: 12px;
}
.acceso-texto { min-width: 0; flex: 1; }
.acceso-texto b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--texto);
}
.acceso-texto small {
  display: block;
  font-size: 12px;
  color: var(--sutil);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acceso-punta { flex: none; color: var(--borde); }
.acceso:active .acceso-punta { color: var(--acento); }

/* En teléfono, de dos en dos y sin la segunda línea. A todo lo ancho eran
   cuatro renglones altos antes de la primera cifra, y la cifra es a lo que se
   entra: los accesos son el segundo paso, no el primero. El nombre basta para
   saber a dónde lleva cada uno. */
@media (max-width: 560px) {
  .accesos { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .acceso { padding: 12px; gap: 10px; }
  .acceso-icono { width: 38px; height: 38px; }
  .acceso-texto b { font-size: 14px; }
  .acceso-texto small,
  .acceso-punta { display: none; }
}

/* ================================================= venta rápida (caja) ====
   Tres preguntas, tres columnas: QUÉ lleva, A QUIÉN y CON QUÉ, y CUÁNTO es.
   Antes iban una debajo de otra en una columna angosta a la derecha, y para
   ver el total había que bajar justo cuando se está contando el cambio. */

.panel-menu { padding: 16px 18px; margin-bottom: 16px; }
.panel-menu .campo-busca { margin-bottom: 0; }

.caja-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.caja-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.caja-col > .panel-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}
.caja-col > .panel-cabeza b { flex: 1; font-size: 16px; }
.caja-col > .panel-cabeza + .panel-cabeza,
.caja-col .panel-cabeza:not(:first-child) { margin-top: 14px; }

/* La lista de lo que se lleva crece y se desplaza sola; lo de abajo —los
   totales y el botón— no se mueve de su sitio. */
.caja-venta .panel-lista {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  margin: 0;
}

.caja-col { overflow-y: auto; }
.caja-venta { overflow: hidden; }   /* aquí el que se desplaza es .panel-lista */
.caja-cuenta { justify-content: flex-start; }
.caja-cuenta .boton.grande { margin-top: auto; }

@media (min-width: 980px) {
  /* La división va A LO LARGO: el menú ocupa la altura a la izquierda y la
     venta es una columna alta a la derecha, con sus tres partes apiladas.
     Partida a lo ancho, la venta quitaba alto al menú y los productos
     quedaban en una fila y media; así el menú conserva su altura completa y
     la venta su largo, que es por donde de verdad crece. */
  .app.con-caja { grid-template-columns: 264px minmax(0, 1fr) 420px; }

  .app.con-caja .panel-orden {
    grid-column: 3;
    grid-row: 2;
    position: static;
    width: auto;
    height: 100%;
    padding: 14px;
    overflow: hidden;              /* lo que se desplaza va dentro */
    border: 0;
    border-left: 1px solid var(--borde);
    background: var(--fondo);
    transform: none;
    min-height: 0;
  }
  .app.con-caja .panel-tirador { display: none; }
  .app.con-caja .contenido { padding-bottom: 20px; }

  /* Apiladas, cada una con su alto natural, y la columna entera se desplaza.
     Repartir el alto entre las tres dejaba la lista de la venta en dos
     renglones: cliente y cobro juntos piden 720 de los 900 disponibles, y lo
     que sobraba no alcanzaba para ver lo que se está vendiendo. */
  .app.con-caja .caja-columnas {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 10px;
    overflow-y: auto;
    padding-bottom: 4px;
  }
  .app.con-caja .caja-col { flex: none; overflow: visible; }

  /* La lista crece con la venta en vez de desplazarse por dentro: con la
     columna entera desplazándose, un segundo desplazamiento adentro obliga a
     adivinar cuál de los dos se está moviendo. */
  .app.con-caja .caja-venta .panel-lista { overflow: visible; max-height: none; }

  /* El panel es columna: arriba lo que se desplaza, abajo el pie que no.
     La fijación por CSS no bastaba —un elemento pegajoso no puede salirse
     de su contenedor, y ese contenedor queda entero por debajo del borde
     cuando la venta es larga—, así que el botón vive fuera. */
  .app.con-caja .panel-orden { display: flex; flex-direction: column; }
  .app.con-caja .caja-columnas { flex: 1 1 auto; }
  .app.con-caja .caja-pie { flex: none; padding-top: 10px; }
}

/* --- los mandos del menú de caja ----------------------------------------
   Comida/Bebidas y las categorías se tocan decenas de veces por turno, con
   prisa y a veces con la otra mano ocupada. Eran píldoras de texto del mismo
   tamaño que cualquier otra: ahora son blancos grandes y cada uno con su
   figura, que se reconoce antes de leer. */

.secciones-caja {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.seccion-caja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sutil);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  cursor: pointer;
}
.seccion-caja .icono { flex: none; opacity: .8; }
.seccion-caja.fuerte {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: var(--sombra);
}
.seccion-caja.fuerte .icono { opacity: 1; }

/* Las categorías, en cuadros. Se acomodan solos: cuantos quepan por renglón,
   sin que uno quede más angosto que otro. */
.grupos-caja {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.grupo-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  cursor: pointer;
}
.grupo-caja-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--acento);
  background: var(--acento-flojo);
  border-radius: 12px;
}
.grupo-caja.fuerte {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: var(--sombra);
}
.grupo-caja.fuerte .grupo-caja-marca {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

/* En teléfono caben dos por renglón sin que el nombre se parta; más chicos,
   el dedo empieza a fallar. */
@media (max-width: 560px) {
  .grupos-caja { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .grupo-caja { min-height: 84px; font-size: 12px; }
  .grupo-caja-marca { width: 38px; height: 38px; }
  .seccion-caja { flex: 1; justify-content: center; min-height: 52px; padding: 0 14px; }
}

/* El pie del panel de caja: el error y el botón de cobrar, siempre a la vista. */
.caja-pie .error { margin: 0 0 8px; }
.caja-pie .boton.grande { width: 100%; }

/* En el cajón de teléfono y tablet, las tres partes vuelven a ser bloques
   planos: como tarjetas, cada una suma relleno, borde y sombra, y entre las
   tres empujaban el botón de cobrar fuera del cajón —633 px de 812—. Las
   tarjetas son para la columna de escritorio, donde hay sitio. */
@media (max-width: 979px) {
  .app.con-caja .caja-col {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .app.con-caja .caja-columnas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 14px;
  }
  /* El cobro, al fondo del cajón y siempre a la vista: es el último paso. */
  .app.con-caja .caja-pie {
    flex: none;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borde);
    background: var(--superficie);
  }
  .app.con-caja .caja-col > .panel-cabeza { margin-top: 4px; }
}