/* =====================================================================
   Santo Pekdo — cobro, domicilio, caja y ticket (Fases 5, 6 y 7)
   ===================================================================== */

/* --- Buscador de barra ----------------------------------------------- */

.buscador { padding: 10px 12px; background: var(--superficie); border-bottom: 1px solid var(--borde); }

.buscador input {
    width: 100%;
    height: var(--tactil);
    padding: 0 14px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font-size: 18px;
    -webkit-user-select: text;
    user-select: text;
}

/* --- Lista de cobro --------------------------------------------------- */

.cobro { flex: 1; padding: 10px 12px 24px; }

.cobro-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 5px solid var(--estado-neutro);
    border-radius: var(--radio);
    color: var(--texto);
    text-decoration: none;
}

/* La que va a pagar destaca: es la que tiene delante la encargada */
.cobro-fila--pagar {
    border-left-color: var(--marca-pizza);
    background: color-mix(in srgb, var(--marca-pizza) 12%, var(--superficie));
}

.cobro-fila__num   { font-size: 26px; font-weight: 800; min-width: 56px; }
.cobro-fila__txt   { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cobro-fila__mesa  { font-size: 17px; font-weight: 600; }
.cobro-fila__meta  { font-size: 13px; color: var(--texto-suave); }
.cobro-fila__avisos{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cobro-fila__total { font-size: 21px; font-weight: 800; }

.pin--pagar   { background: var(--marca-pizza); color: #000; }
.pin--parcial { background: var(--estado-aviso); color: #000; }

/* La fila y, al lado, el boton que imprime la cuenta antes de cobrar.
   Van como hermanos y no anidados porque un <button> dentro de un <a> no es
   HTML valido y el navegador hace lo que quiere con el. */
.cobro-linea {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
}
.cobro-linea .cobro-fila { flex: 1; margin-bottom: 0; min-width: 0; }

.cobro-linea__previo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 84px;
    padding: 6px;
    background: var(--superficie);
    border: 1px solid var(--marca-pizza);
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;                 /* es un <button>: no hereda la fuente solo */
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.cobro-linea__previo:active { background: var(--superficie-alta); }

/* Anular la cuenta.
   Mismo tamano de dedo que el de imprimir, pero apagado y sin color de
   marca: se usa una vez cada muchas noches y no puede tirar de la mirada
   en la pantalla donde se cobra con cola delante. El rojo aparece al
   pulsarlo, no antes. */
.cobro-linea__anular {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 60px;
    padding: 6px;
    background: transparent;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto-suave);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.cobro-linea__anular:active {
    background: var(--estado-critico);
    border-color: var(--estado-critico);
    color: #fff;
}

/* --- Detalle de cobro -------------------------------------------------- */

.cobro-detalle { flex: 1; padding: 12px 12px 96px; }

.panel {
    margin-bottom: 14px;
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.panel__titulo { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.panel__ayuda  { margin: 8px 0; font-size: 14px; color: var(--texto-suave); }

.totales { display: flex; gap: 10px; margin-bottom: 10px; }
.totales > div { flex: 1; display: flex; flex-direction: column; }
.totales span   { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; }
.totales strong { font-size: 21px; }
.totales__pendiente strong { color: var(--marca-pizza); }

.pagos { display: flex; flex-direction: column; gap: 6px; }
.pago {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--superficie-alta);
    border-radius: 8px;
    font-size: 14px;
}
.pago span   { flex: 1; }
.pago__quitar{ background: none; border: none; color: var(--texto-suave); font-size: 16px; cursor: pointer; }

.modos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }

.modo {
    min-height: 50px;
    background: var(--superficie-alta);
    border: 2px solid transparent;
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.modo--activo { border-color: var(--marca); background: var(--marca); color: #fff; }

.escote { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }

.escote__parte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--superficie-alta);
    border: 2px solid transparent;
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.escote__parte strong { font-size: 18px; }
.escote__parte--activa { border-color: var(--marca); }

.linea-cobro {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde);
}
.linea-cobro__menos, .linea-cobro__mas {
    width: 38px; height: 38px;
    background: var(--superficie-alta);
    border: none;
    border-radius: 8px;
    color: var(--texto);
    font-size: 20px;
    cursor: pointer;
}
.linea-cobro__sel { min-width: 26px; font-size: 18px; font-weight: 700; text-align: center; }
.linea-cobro__txt { flex: 1; display: flex; flex-direction: column; font-size: 15px; }
.linea-cobro__txt em { font-size: 12px; color: var(--texto-suave); font-style: normal; }
.linea-cobro--pagada { opacity: .45; justify-content: space-between; }
.linea-cobro__ok { font-size: 12px; color: var(--estado-ok); text-transform: uppercase; }

.seleccion-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); text-align: right; }

.medios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.boton--grande { min-height: 68px; font-size: 18px; }
.boton--fino   { min-height: 40px; width: auto; padding: 0 14px; font-size: 14px; }
.boton--texto  { background: none; color: var(--texto-suave); font-size: 14px; font-weight: 400; min-height: 40px; }

.destacado { color: var(--marca-pizza); }

.rapidos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.rapido {
    min-height: 46px;
    background: var(--superficie-alta);
    border: 1px solid var(--borde);
    border-radius: 8px;
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.cambio { margin: 10px 0; font-size: 19px; }
.rojo   { color: var(--estado-critico); font-weight: 700; }
.verde  { color: var(--estado-ok); font-weight: 700; }

/* --- Domicilio --------------------------------------------------------- */

.domicilio { flex: 1; padding: 12px 12px 96px; }

.salida {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--superficie-alta);
    border-radius: var(--radio);
}
.salida__txt { flex: 1; display: flex; flex-direction: column; }
.salida__txt em { font-size: 12px; color: var(--texto-suave); font-style: normal; }

.pedido {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
}
.pedido__chk   { width: 24px; height: 24px; }
.pedido__hueco { width: 24px; }
.pedido__txt   { flex: 1; display: flex; flex-direction: column; color: var(--texto); text-decoration: none; min-width: 0; }
.pedido__txt em{ font-size: 13px; color: var(--texto-suave); font-style: normal; }
.pedido__estado{ font-size: 11px; text-transform: uppercase; color: var(--texto-suave); }
.pedido__total { font-weight: 700; }

/* "En camino" es la unica que se destaca: es la que dice que hay comida y
   dinero fuera del local. Sin atenuarla como antes — un pedido en la calle
   es justo el que hay que tener delante, no el que se va apagando. */
.pedido--listo      .pedido__estado,
.pedido--en_reparto .pedido__estado { color: var(--estado-ok); font-weight: 700; }
.pedido--incidencia .pedido__estado { color: var(--estado-critico); font-weight: 700; }

/* El alta, dentro del panel y no en un "+" de la barra: es LA accion de
   esta pantalla. Ancho completo para que se acierte sin mirar. */
.domicilio__nuevo { width: 100%; margin-top: 12px; }

.liq { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.liq__txt    { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.liq__txt em { font-size: 12px; color: var(--texto-suave); font-style: normal; }
.liq__estado { height: 40px; background: var(--superficie-alta); border: 1px solid var(--borde);
               border-radius: 8px; color: var(--texto); font: inherit; }
.liq__motivo { width: 100%; height: 40px; padding: 0 10px; background: var(--fondo);
               border: 1px solid var(--estado-critico); border-radius: 8px; color: var(--texto); }

/* --- Caja -------------------------------------------------------------- */

.caja { flex: 1; padding: 12px 12px 24px; }

.arqueo__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--borde);
}
.arqueo__fila:last-child { border-bottom: none; }
.arqueo__fila span  { color: var(--texto-suave); font-size: 14px; }
.arqueo__fila em    { font-style: normal; font-size: 12px; }
.arqueo__fila--total{ margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--borde); }
.arqueo__fila--total span   { color: var(--texto); font-weight: 600; font-size: 15px; }
.arqueo__fila--total strong { font-size: 22px; }

.botonera { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }

/* --- Ticket ------------------------------------------------------------ */

.ticket-envoltorio { flex: 1; display: grid; place-items: start center; padding: 16px 12px 96px; }

/* TODO EL TICKET VA EN NEGRITA, Y NO ES UN CAPRICHO.
   La termica no imprime tinta: quema puntos. Un trazo fino sale gris claro
   o directamente no sale, y en las primeras pruebas SOLO se leia lo que
   estaba en negrita. Por eso:

     · Palo seco en vez de Courier: la monoespaciada tiene el trazo mas fino
       que hay, y aqui las columnas las alinea la <table>, no la fuente.
     · font-weight 700 en la raiz, que lo hereda todo lo de dentro.
     · Nada de grises: negro puro. Ni un color suave, ni un borde de 1 px.
     · Un punto o dos mas de tamaño en todo, que sobra papel de ancho.

   Si algun dia se cambia de impresora y esto se ve demasiado gordo, lo que
   se toca es el tamaño; la negrita se queda. */

.ticket {
    width: 100%;
    max-width: 272px;              /* 72 mm utiles: 80 de papel menos margenes */
    padding: 16px;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .01em;
}

.ticket__cab { text-align: center; margin-bottom: 12px; }
.ticket__cab h1 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.ticket__cab p  { margin: 0; font-size: 13px; }

/* Separadores solidos y de 2 px: la linea de puntos salia entrecortada. */
.ticket__meta { margin: 12px 0; padding: 8px 0; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.ticket__meta div { display: flex; justify-content: space-between; gap: 10px; }

.ticket__lineas { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.ticket__lineas td   { padding: 4px 0; vertical-align: top; }
.ticket__lineas td.c { width: 30px; }
.ticket__lineas td.i { width: 74px; text-align: right; white-space: nowrap; }
.ticket__lineas em   { display: block; font-size: 12px; font-style: normal; }

.ticket__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    font-size: 20px;
    font-weight: 800;
}

.ticket__iva { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 13px; }
.ticket__iva th, .ticket__iva td { padding: 3px 0; text-align: right; }
.ticket__iva th:first-child, .ticket__iva td:first-child { text-align: left; }

.ticket__pagos div  { display: flex; justify-content: space-between; gap: 10px; }
.ticket__cambio     { font-size: 13px; }
.ticket__nif        { margin-top: 10px; padding-top: 8px; border-top: 2px solid #000; }
.ticket__pie        { margin-top: 14px; text-align: center; }
.ticket__legal      { font-size: 12px; }

/* --- La comanda en papel -----------------------------------------------
   Otra cosa distinta del ticket, aunque comparta el ancho y la negrita.

   Esto lo lee la cocinera de refilon, a medio metro, con las manos en la
   masa y prisa. Asi que todo mas grande que en el ticket y NADA que no
   sirva para cocinar: ni precios, ni IVA, ni cabecera del local. Donde va,
   a que hora entro y que hay que hacer. */

.comanda-papel { font-size: 16px; }

/* Lo primero y lo mas gordo: es lo que se busca al coger el papel de la pila. */
.comanda-papel__donde {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .5px;
    text-align: center;
}

.comanda-papel__cab {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 3px solid #000;
    font-size: 18px;
}

.comanda-papel__lineas { margin: 0; padding: 0; list-style: none; }
.comanda-papel__lineas li { padding: 9px 0; border-bottom: 2px solid #000; }
.comanda-papel__lineas li:last-child { border-bottom: none; padding-bottom: 0; }

.comanda-papel__que {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

/* La cantidad, recuadrada: "2" y "12" tienen que distinguirse de un vistazo
   sin leer el resto de la linea. */
.comanda-papel__cant {
    flex: 0 0 auto;
    min-width: 32px;
    padding: 0 6px;
    border: 3px solid #000;
    font-size: 20px;
    text-align: center;
}

.comanda-papel__mod {
    margin: 4px 0 0 42px;
    font-size: 16px;
}

/* La nota del camarero, enmarcada y en mayusculas. Es lo unico de este
   papel que puede arruinar un plato si se pasa por alto: una alergia, un
   "sin cebolla", un "poco hecho". */
.comanda-papel__nota {
    margin: 6px 0 0 42px;
    padding: 5px 8px;
    border: 3px solid #000;
    font-size: 18px;
    line-height: 1.25;
    text-transform: uppercase;
}
.comanda-papel__nota::before { content: 'NOTA · '; }

/* La hoja de reparto lleva varios "papeles" en la misma pagina: su ruta y
   detras una cuenta por pedido. En pantalla se separan; al imprimir, cada
   cuenta empieza en hoja nueva, que si no se cortan por la mitad. */
.ticket-envoltorio > .ticket + .ticket { margin-top: 16px; }

/* La cuenta previa: mismo papel, pero que no se pueda confundir con el
   ticket ni de lejos ni en blanco y negro.

   La banda NO va en negativo. Lo estuvo, y sobre termica es mala idea con
   una cabeza que ya imprime flojo: un rectangulo negro entero pide mucho
   calor, sale desigual y el texto en blanco de dentro se pierde. Un marco
   grueso con la letra en negro se lee siempre. */
.ticket--previo { border: 3px solid #000; }

.ticket__banda {
    margin: -4px 0 12px;
    padding: 6px 10px;      /* holgura lateral: la letra no toca el marco */
    border: 3px solid #000;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .5px;
    text-align: center;
}

/* --- La nota de reparto ---------------------------------------------
   A donde va el pedido, a tamano de cartel y antes que nada.

   Lo lee el repartidor con la moto en marcha y de noche, asi que el nombre
   y la calle tienen que entrar de un vistazo. Si hay que buscarlos entre
   las lineas del pedido, la nota no sirve: es justo lo que pasaba cuando
   esto eran dos papeles distintos. */

.nota-reparto {
    margin-bottom: 14px;
    padding: 10px 10px 12px;
    border: 3px solid #000;
}

.nota-reparto__etiqueta {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* El nombre, un punto por debajo de la calle: sirve para preguntar en la
   puerta, pero lo que hay que leer conduciendo es a donde se va. */
.nota-reparto__nombre {
    margin: 2px 0 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    /* Un nombre largo parte donde sea antes que salirse del papel */
    overflow-wrap: anywhere;
}

.nota-reparto__direccion {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.nota-reparto__telefono { margin: 8px 0 0; font-size: 15px; font-weight: 700; }

/* El importe exacto, tambien grande: es lo que hay que cobrar en la puerta
   y el repartidor no lleva cambio. */
.nota-cobrar strong { font-size: 24px; }

/* =====================================================================
   PANEL DE ADMINISTRACION

   La unica pantalla que NO se usa de pie y con prisa: aqui hay raton,
   sitio y tiempo para pensar. Por eso admite tablas anchas y formularios
   completos, y no botones de 48 px separados por hueco de dedo.
   ===================================================================== */

.app--admin { background: var(--fondo); }

.barra--admin { gap: 14px; flex-wrap: wrap; }

.admin-menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }

.admin-menu__enlace {
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.admin-menu__enlace:hover        { background: var(--superficie-alta); color: var(--texto); }
.admin-menu__enlace--activo      { background: var(--marca); color: #fff; }

.admin { flex: 1; padding: 16px; max-width: 1400px; width: 100%; margin: 0 auto; }

.panel__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.panel__cabecera .panel__titulo { margin: 0; }
.panel__cabecera .boton         { width: auto; }

/* Dos columnas cuando la pantalla da de si; una sola en un portatil chico */
.admin-columnas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 14px;
}

@media (min-width: 1000px) {
    .admin-columnas { grid-template-columns: 1fr 1fr; }
}

/* --- Cifras grandes ---------------------------------------------------- */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--marca);
    border-radius: var(--radio);
}
.kpi__titulo { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; }
.kpi__valor  { font-size: 26px; font-weight: 800; }
.kpi__pie    { font-size: 12px; color: var(--texto-suave); }

.kpi--aviso { border-left-color: var(--estado-aviso); }

/* --- Tablas ------------------------------------------------------------ */

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabla th {
    padding: 8px 10px;
    border-bottom: 2px solid var(--borde);
    color: var(--texto-suave);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}
.tabla td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover         { background: var(--superficie-alta); }

/* Los importes, a la derecha: una columna de cifras desalineada no se lee */
.tabla .num { text-align: right; white-space: nowrap; }

.tabla__vacio { padding: 22px 10px; color: var(--texto-suave); text-align: center; }
.tabla__foto  { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; display: block; }

/* Lo dado de baja sigue ahi, pero apagado */
.fila--baja td { opacity: .5; }

.suave { color: var(--texto-suave); }

/* La IP de un aparato: se queda por si algun dia hace falta, pero no
   distingue nada —todos salen por el mismo router del local— asi que no
   puede competir en peso con el sistema y el navegador, que si. */
.suave--tenue { font-size: 11px; opacity: .7; }

.boton--fila {
    width: auto;
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
}
.boton--peligro { background: var(--estado-critico); color: #fff; }

/* La estrella de "los de siempre" en la tabla de la carta.

   Sin fondo ni marco: en una tabla con una por fila, veinte botones grises
   seguidos tapan lo que se viene a leer, que son los nombres. El estado se
   distingue por la estrella misma —hueca o llena— y no solo por el color,
   que la mitad de las cocinas ven la pantalla con reflejos.

   Va dibujada en SVG y no como el caracter ☆: el trazo de ese glifo lo
   decide la fuente, es grueso, y a este tamano la hueca se leia igual de
   llena que la marcada. Dibujada, el grosor lo elegimos aqui. */
.boton--estrella {
    background: none;
    border: none;
    padding: 0 6px;
    min-height: 30px;
    line-height: 0;
    color: var(--texto-suave);
}
.boton--estrella:hover { color: var(--texto); }
.boton--estrella-si    { color: #E8B10A; }

/* La hueca, aun mas apagada: lo que tiene que saltar a la vista es cual
   esta marcada, no la fila entera de las que no lo estan. */
.boton--estrella:not(.boton--estrella-si) { opacity: .55; }
.boton--estrella:not(.boton--estrella-si):hover { opacity: 1; }

/* --- Filtros y formularios --------------------------------------------- */

.filtros {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
}
.filtros input[type="search"], .filtros select {
    min-height: 42px;
    padding: 0 12px;
    background: var(--superficie-alta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
}
.filtros input[type="search"] { flex: 1; min-width: 200px; }
.filtros .campo               { margin: 0; }

.rejilla-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 14px;
}
.rejilla-form .campo--ancho  { grid-column: 1 / -1; }
.rejilla-form .campo--corto  { max-width: 220px; }

.campo select, .campo input[type="number"] {
    width: 100%;
    min-height: var(--tactil);
    padding: 0 12px;
    background: var(--superficie-alta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font: inherit;
}

/* --- Miniatura del producto -------------------------------------------- */

.miniatura {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}
.miniatura__vista {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: var(--superficie-alta);
    border-radius: var(--radio);
    overflow: hidden;
}
.miniatura__vista img  { width: 96px; height: 96px; object-fit: contain; }
.miniatura__sin        { font-size: 12px; color: var(--texto-suave); }
.miniatura__acciones   { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.miniatura__acciones .boton { width: auto; min-height: 40px; font-size: 14px; }
.miniatura__acciones .panel__ayuda { flex-basis: 100%; margin: 0; font-size: 12px; }

/* --- Graficas ----------------------------------------------------------
   Dibujadas a mano en SVG. Nada de librerias por CDN: la CSP las bloquea
   y el local trabaja sin internet. */

.grafica svg { width: 100%; height: 240px; display: block; }

.grafica__barra { fill: var(--marca); }
.grafica__barra:hover { fill: var(--marca-pizza); }
.grafica__base  { stroke: var(--borde); stroke-width: 1; }
.grafica__eje   { fill: var(--texto-suave); font-size: 20px; }
.grafica__pie   { margin: 6px 0 0; font-size: 12px; color: var(--texto-suave); text-align: right; }

/* --- Panel de inicio ---------------------------------------------------
   La pantalla que la encargada tiene delante toda la noche.

   Dos columnas en el PC de barra, que es donde vive: las bebidas fijas a la
   izquierda —lo unico que hay que atender AHORA— y a la derecha lo que se
   consulta. En movil se apila, y el lateral queda arriba porque va primero
   en el HTML: es deliberado. */

.inicio {
    flex: 1;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .inicio { grid-template-columns: minmax(0, 1fr); }
}

/* En pantalla ancha —el PC de la barra— la pagina NO hace scroll: ocupa
   exactamente el alto de la ventana y cada columna rueda por dentro. Asi
   el lateral de bebidas esta siempre a la vista, con su propio scroll,
   aunque la lista de cuentas sea larga.

   El `min-height: 0` no es un adorno: sin el, un hijo de flex o de grid
   crece con su contenido en vez de recortarse, y el scroll interno no
   llega a aparecer nunca.

   Apilado (movil) se deja el scroll de pagina de toda la vida: dos cajas
   con scroll propio en una pantalla de 6 pulgadas no hay quien las use. */
@media (min-width: 901px) {
    .app--inicio { height: 100dvh; overflow: hidden; }

    .app--inicio .barra,
    .app--inicio .areas { flex: 0 0 auto; }

    .inicio {
        min-height: 0;
        overflow: hidden;
        align-items: stretch;
    }

    .inicio__lateral,
    .inicio__cuerpo {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;   /* al llegar al final no arrastra la pagina */
    }

    /* El titulo se queda arriba mientras rueda su columna: con el scroll a
       medias, «Bebidas en barra» y el contador son lo que dice cuantas
       quedan sin subir a mirar. */
    .inicio__lateral .inicio__titulo,
    .inicio__cuerpo .inicio__titulo {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 4px 0;
        background: var(--fondo);
    }
}

.inicio__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}

/* El boton de nuevo pedido se va al final del titulo, no a una fila propia:
   es un atajo, no la accion principal de la pantalla. */
.inicio__titulo .boton { margin-left: auto; text-transform: none; letter-spacing: 0; }

.inicio__cuantas {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--superficie-alta);
    color: var(--texto);
    font-size: 13px;
    text-align: center;
}
.inicio__cuantas:empty { display: none; }

.inicio__bloque { margin-bottom: 20px; }

/* --- Bebidas de barra en el panel --------------------------------------
   Misma idea que una tarjeta del KDS pero mas estrecha y sin semaforo de
   tiempo: aqui no se cocina, se sirve, y lo que importa es cuantas quedan.
   Las clases .plato son las mismas que las de cocina a proposito: el gesto
   de marcar tiene que sentirse igual en las dos pantallas. */

.bebida {
    margin-bottom: 10px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-left: 5px solid var(--estado-aviso);
    border-radius: var(--radio);
    overflow: hidden;
}

/* Servida entera: se queda a la vista, apagada, hasta que se la lleven. */
.bebida--lista { border-left-color: var(--estado-ok); opacity: .55; }

.bebida__cab {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--borde);
}
.bebida__num   { font-size: 18px; font-weight: 800; }
.bebida__donde { flex: 1; font-size: 14px; color: var(--texto-suave); }
.bebida__min   { font-size: 14px; color: var(--texto-suave); }

.bebida__lineas { list-style: none; margin: 0; padding: 0; }

.bebida__completa {
    width: 100%;
    min-height: var(--tactil);
    background: var(--superficie-alta);
    border: none;
    border-top: 1px solid var(--borde);
    color: var(--texto);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.bebida__completa:active { background: var(--borde); }

/* --- Botonera de areas -------------------------------------------------
   Salto entre pantallas grandes para quien tiene mas de una (ver
   vistas/parciales/botonera.php).

   Mas alta que la barra y con texto, a proposito: se pulsa de pie, con
   prisa y a veces con la bandeja en la otra mano, y un icono suelto hay que
   adivinarlo. En movil vertical no caben las cinco, asi que la fila rueda
   en horizontal en vez de partirse en dos alturas.

   No es sticky: la barra de arriba ya lo es, y dos pegajosas apiladas
   necesitan saber la altura de la primera, que cambia con el recorte de
   pantalla del movil. Preferible que ruede con la pagina a que tape la
   primera comanda.

   Se llama .areas y NO .botonera: esa clase ya la usan los botones de
   movimientos de /cobro/caja unas lineas mas arriba, y como las tres hojas
   se cargan enteras, la de aqui le pisaba la rejilla de dos columnas. */

.areas {
    /* flex-shrink: 0 NO SOBRA. El body es un flex en columna y el <main> de
       cada pantalla lleva flex:1; sin esto, en cuanto el contenido no cabe
       el navegador aplasta la fila a la altura que le sobre, sus botones
       se desbordan por el min-height y el contenido los tapa. */
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    overflow-x: auto;
    scrollbar-width: none;
}
.areas::-webkit-scrollbar { display: none; }

.areas__boton {
    flex: 1 0 auto;
    min-width: 92px;
    min-height: var(--tactil);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px;
    background: var(--superficie-alta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--texto);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.areas__icono { font-size: 20px; line-height: 1; }

.areas__boton:active { background: var(--borde); }

/* La pantalla en la que ya estas, en color de marca: en un salto de un
   toque conviene saber de donde se sale. */
.areas__boton--activo {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

/* --- Cobro: lo consumido, de solo lectura -------------------------------

   Desde que la cuenta se cobra entera, esta lista ya no se toca: es para
   repasarla con el cliente delante si pregunta que es cada cosa. Sin
   botones, sin contadores y sin sitio para el dedo. */

.linea-cobro--simple { gap: 10px; }
.linea-cobro__cant {
    flex: 0 0 auto;
    min-width: 26px;
    color: var(--texto-suave);
    font-weight: 700;
    text-align: right;
}
.linea-cobro__imp { font-weight: 600; }


/* --- Panel de jornadas -------------------------------------------------- */

/* Una linea de estado bajo el selector: si la caja esta abierta, cerrada,
   y si cuadro. Es lo primero que se mira al abrir el panel. */
.panel__estado {
    margin: 0;
    color: var(--texto-suave);
    font-size: 14px;
}

.filtros--jornada { margin: 0; align-items: center; }
.filtros--jornada select { min-width: 200px; }

/* Las flechas de jornada anterior y siguiente: cuadradas y estrechas, que
   no compitan con el selector. */
.filtros--jornada .boton { width: auto; min-width: 44px; padding: 0 12px; }


/* --- Resumen de cierre en papel -----------------------------------------

   Comparte el ancho de 80 mm y la negrita del ticket —la termica no imprime
   trazo fino— pero NO es un ticket: no gasta numeracion, no se le da a
   ningun cliente y lleva su propia banda arriba diciendolo. */

.ticket--cierre .ticket__banda { border: 3px solid #000; }

.cierre__titulo {
    margin: 12px 0 4px;
    padding-top: 8px;
    border-top: 2px solid #000;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}

.cierre__pie-total { margin: 2px 0 0; font-size: 13px; text-align: right; }

.cierre__cuadre { font-size: 15px; }
.cierre__cuadre > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
}
/* El descuadre, recuadrado. Es la unica cifra de esta hoja que obliga a
   hacer algo, y en termica un color no se distingue: se marca con marco. */
.cierre__mal { padding: 4px 6px; border: 3px solid #000; }

.cierre__aviso,
.cierre__notas {
    margin: 8px 0 0;
    padding: 6px 8px;
    border: 2px solid #000;
    font-size: 13px;
    line-height: 1.3;
}


/* --- Pendientes de cocina, todos de una vez -----------------------------

   El puesto va aun mas grande que el "donde": lo primero que se hace con
   esa pila de papeles es repartirlos entre horno, plancha y barra, y eso se
   tiene que poder hacer sin leer nada mas. */

.comanda-papel__puesto {
    margin: 0 0 4px;
    padding: 4px 0;
    border: 4px solid #000;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 1px;
    text-align: center;
}

/* En pantalla, cada pase separado del anterior. Al imprimir se convierte en
   un salto de hoja de verdad — ver el bloque @media print. */
.comanda-papel--hoja { margin-top: 20px; }


/* Al imprimir: solo el ticket, sin barras ni botones.

   El margen de 4 mm por lado deja 72 mm utiles sobre el papel de 80, que es
   justo el ancho que simula .ticket en pantalla. Asi lo que se ve es lo que
   sale. */
@media print {
    body { background: #fff; }

    /* Que los fondos y los marcos salgan tal cual y no se los "ahorre" el
       navegador, que por defecto los quita al imprimir. */
    body, .ticket, .ticket * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color: #000;
    }

    .barra, .areas, .acciones-flotantes, .sin-imprimir, .conexion { display: none !important; }
    .ticket-envoltorio { padding: 0; }

    /* Un par de milimetros a los lados: sin esto el texto arranca justo en
       el filo del papel y el primer caracter sale mordido. */
    .ticket { max-width: none; padding: 0 2mm; }

    /* El marco exterior de la cuenta previa NO se imprime.
       En pantalla distingue de un vistazo la nota del ticket, pero en papel
       se come ancho y el texto acaba pegado a la linea. Lo que avisa de que
       esto no es una factura es la banda de arriba, que si lleva marco, y el
       pie; el recuadro entero no aportaba nada mas. */
    .ticket--previo { border: none; }
    .ticket-envoltorio > .ticket + .ticket { margin-top: 0; }
    .hoja__cuenta { break-before: page; page-break-before: always; }

    /* Cada pase pendiente, en su hoja. Se cortan y se reparten entre horno,
       plancha y barra: dos pases en el mismo papel no se pueden repartir. */
    .comanda-papel--hoja { break-before: page; page-break-before: always; margin-top: 0; }

    /* Una linea del resumen de cierre partida entre dos hojas no se puede
       leer: la cifra queda arriba y la etiqueta abajo. */
    .cierre__cuadre > div,
    .comanda-papel__lineas li { break-inside: avoid; page-break-inside: avoid; }

    @page { margin: 4mm; }
}