/* ==========================================================================
   [SALÓN-30] ESTILOS DE LA CAJA (negocio de comida)
   --------------------------------------------------------------------------
   Son los estilos ORIGINALES de la caja registradora, con su verde de siempre.
   No se cambió ni un color: el negocio de comida se ve exactamente igual que
   antes de mudarse dentro de teleCHAT.

   Lo ÚNICO que se hizo fue AISLARLOS: cada regla cuelga de `body.modo-caja`,
   una clase que solo está puesta mientras estás dentro del negocio de comida.

   ¿Por qué hace falta aislarlos? Porque este archivo pinta el fondo de color
   crema, redefine `body` y usa muchos `!important`. Sin aislarlo, con entrar
   una sola vez a la caja se desconfiguraría el salón (que es azul oscuro)
   durante el resto de la sesión.

   Generado automáticamente a partir de `static/style.css` de la raíz.
   Si algún día cambias la caja vieja, hay que volver a generar este archivo.
   ========================================================================== */

/* ============================================================================== [ID-27-A] FRONTEND CSS ==== */
body.modo-caja, body.modo-caja * { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; user-select: none; }
:root {
    --safe-top: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;
    --safe-right: 0px;
}
body.modo-caja { 
    background-color: #ECE5DD; display: flex; flex-direction: column; 
    height: 100vh; height: 100dvh; overflow: hidden;
    padding: calc(10px + var(--safe-top)) calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));
}
/* En fullscreen de Telegram (sobre todo iPad) el header nativo queda transparente;
   el padding safe-area evita que botones queden bajo la barra de estado. */
body.modo-caja.tg-fullscreen {
    min-height: 100vh;
    min-height: 100dvh;
}
body.modo-caja #overlay-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body.modo-caja .overlay-fullscreen-box {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 22px 20px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body.modo-caja .overlay-fullscreen-titulo {
    font-size: 20px;
    font-weight: bold;
    color: #075E54;
    margin-bottom: 10px;
}
body.modo-caja .overlay-fullscreen-texto {
    font-size: 14px;
    color: #444;
    line-height: 1.35;
    margin-bottom: 18px;
}
body.modo-caja .btn-pedir-fullscreen {
    width: 100%;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    padding: 14px 16px;
    cursor: pointer;
    margin-bottom: 10px;
}
body.modo-caja .btn-pedir-fullscreen:active {
    background: #128C7E;
    transform: scale(0.98);
}
body.modo-caja .btn-cerrar-overlay-fullscreen {
    width: 100%;
    background: transparent;
    color: #666;
    border: none;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
}
body.modo-caja #header-caja {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap;
    background: transparent; margin-bottom: 10px; min-height: 50px;
}
body.modo-caja #btn-cobrar {
    background-color: #FF8C00; color: white; border: none; border-radius: 8px;
    font-size: 16px; font-weight: bold; padding: 12px 25px; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-left: auto;
}
body.modo-caja #btn-cobrar:active { background-color: #E67E00; transform: scale(0.95); }
/* CÓMO PAGÓ: los botones van en su propio renglón, debajo de COBRAR y las
   flechas, porque en el teléfono el renglón de arriba ya está lleno. Son claros
   con borde, no de color fuerte: el único color fuerte de la caja sigue siendo
   COBRAR. El elegido se pone verde y los demás se esconden. */
body.modo-caja #formas-pago-caja {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
body.modo-caja #formas-pago-caja:empty { display: none; }
body.modo-caja .btn-forma-pago {
    flex: 1 1 auto;
    min-height: 46px;
    padding: 8px 6px;
    border: 2px solid #A5D6A7;
    border-radius: 8px;
    background: #FFFFFF;
    color: #0b4f2a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.2px;
    cursor: pointer;
}
body.modo-caja .btn-forma-pago:active { background: #C8E6C9; }
body.modo-caja .btn-forma-pago.forma-pago-elegida {
    flex: 0 0 auto;
    background: #017B45;
    border-color: #015F35;
    color: #FFFFFF;
}
body.modo-caja .forma-pago-nota {
    font-size: 13px;
    font-weight: bold;
    color: #444;
}
body.modo-caja .input-referencia-pago {
    flex: 1 1 120px;
    min-width: 0;
    min-height: 46px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #CFD8DC;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    color: #333;
}
body.modo-caja.modo-tablet .btn-forma-pago { min-height: 54px; font-size: 15px; }
body.modo-caja.modo-tablet .input-referencia-pago { min-height: 54px; font-size: 16px; }
/* Mirando una orden ya cobrada no se cobra nada. */
body.modo-caja.mirando-atras #formas-pago-caja { display: none !important; }
body.modo-caja .fiado-aviso {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}
/* El cuadre del día, forma de pago por forma de pago. */
body.modo-caja .bloque-cuadre-pagos {
    margin: 14px 9px 0;
    padding: 10px 12px;
    border: 2px solid #A5D6A7;
    border-radius: 10px;
    background: #F5FBF6;
    text-align: left;
}
body.modo-caja .bloque-cuadre-titulo {
    font-size: 13px;
    font-weight: 900;
    color: #0b4f2a;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
body.modo-caja .fila-cuadre-pago {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
    color: #333;
    padding: 3px 0;
}
body.modo-caja .oculto { display: none !important; }
/* El margen de los lados lo llevan los hijos, no la tarjeta: así el renglón
   marcado del ticket puede pintarse de borde a borde metiéndose en esos 9px. */
body.modo-caja #pantalla-medio {
    flex-grow: 1; background: #FFFFFF; border-radius: 10px; margin-bottom: 10px;
    padding: 15px 0; overflow-y: auto; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body.modo-caja #total-vivo-container { padding-left: 9px; padding-right: 9px; }
body.modo-caja #total-vivo-container {
    font-size: 26px; font-weight: bold; color: #075E54; margin-bottom: 15px;
    border-bottom: 2px solid #EBEBEB; padding-bottom: 10px;
}
body.modo-caja #lista-pedido { font-size: 16px; color: #333; font-weight: bold; }
body.modo-caja .fila-ticket {
    display: grid;
    /* cantidad | nombre (todo el ancho que sobre) | − + | monto */
    grid-template-columns: auto minmax(0, 1fr) auto minmax(3.4em, auto);
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    margin-bottom: 10px;
    /* Se sale los 9px de la lista para que el verde del renglón marcado llegue
       al borde de la tarjeta blanca; el relleno los devuelve, así que la
       cantidad sigue arrancando casi pegada al borde. */
    margin-left: -9px;
    margin-right: -9px;
    padding: 10px 15px 10px 12px;
    border-radius: 0;
    transition: background-color 0.2s ease;
}
/* El renglón entero responde al toque (ñapa, peso), no solo el nombre. La clase
   la ponen solo los renglones de la venta viva: en el recibo ya cobrado no hay
   nada que tocar. */
body.modo-caja .fila-ticket-tocable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* LA CANTIDAD Y EL NOMBRE, EN LA MISMA LÍNEA
   Los dos van alineados por la línea de escritura (no centrados a la mitad del
   renglón), así el `1x` queda a la altura del `EMP.` de arriba y debajo queda
   solo la palabra que distingue. Antes el `1x` flotaba en el medio de las dos
   líneas y el renglón se veía desordenado.
   Los −/+ y el monto siguen centrados: son de todo el renglón, no de una línea. */
body.modo-caja .fila-ticket > .ticket-cantidad,
body.modo-caja .fila-ticket > .ticket-nombre {
    align-self: baseline;
}
body.modo-caja .ticket-moneda {
    text-align: right;
    white-space: nowrap;
    font-weight: 800;
    opacity: 0.85;
}
body.modo-caja .ticket-monto {
    /* Pegado al borde derecho del ticket: en el medio se veía suelto. */
    text-align: right;
    justify-self: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    min-width: 3.2em;
}
body.modo-caja.ticket-en-bs .ticket-moneda,
body.modo-caja.ticket-en-bs .ticket-monto,
body.modo-caja #total-vivo-container.en-bs {
    color: #0b4f2a;
}
body.modo-caja .btn-tasa small {
    display: block;
    font-size: 15px; /* tasa más legible (antes ~11px se veía casi invisible) */
    font-weight: 800;
    opacity: 0.95;
    margin-top: 3px;
    letter-spacing: 0.01em;
}

/* Esta clase la usa ahora la cabecera de la pantalla de precios; en la venta ya
   no hay barra de tasas (desde la v86 la moneda es un botón al lado del Total). */
body.modo-caja .barra-tasas-caja {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 0 10px;
}
body.modo-caja .barra-tasas-caja.oculto { display: none !important; }
body.modo-caja .btn-tasa {
    border: 2px solid #128C7E;
    background: #fff;
    color: #075E54;
    border-radius: 10px;
    font-weight: 900;
    font-size: 13px;
    padding: 10px 12px;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja .btn-tasa.activo {
    background: #128C7E;
    color: #fff;
    border-color: #0b5c52;
}
body.modo-caja .btn-tasa:active { transform: scale(0.97); }
body.modo-caja .btn-actualizar-pendiente {
    box-shadow: inset 0 0 0 2px #F57C00;
}
/* EL BOTÓN DE LA MONEDA Y SU LISTA DESPLEGABLE (v85) */
body.modo-caja .grupo-moneda-caja {
    position: relative;
    display: inline-flex;
}
/* Va dentro del renglón del Total, así que es compacto: no puede crecer más que
   la cifra ni empujarla. */
body.modo-caja #btn-moneda-caja {
    min-width: 84px;
    min-height: 44px;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.1;
    /* Por encima de la capa que cierra al tocar fuera: así el propio botón es el
       que cierra cuando lo tocas otra vez. */
    position: relative;
    z-index: 56;
}
body.modo-caja #btn-moneda-caja small {
    font-size: 11px;
    font-weight: 800;
    margin-top: 1px;
}
body.modo-caja #btn-moneda-caja.desplegado {
    box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.3);
}
/* Se abre ENCIMA del botón, hacia arriba y pegada a la derecha: así crece sobre
   el ticket y **nunca tapa el Total**, que es la cifra que mira el cliente.
   Igual en teléfono y en tablet. */
body.modo-caja .lista-moneda-caja {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    width: 210px;
    max-width: 72vw;
    background: #FFFFFF;
    border: 2px solid #128C7E;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 61;
}
body.modo-caja .capa-cerrar-moneda {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: transparent;
}
body.modo-caja .fila-moneda-caja {
    position: relative;
    display: flex;
}
body.modo-caja .btn-moneda-opcion {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid #D7E3E0;
    border-radius: 9px;
    background: #FFFFFF;
    color: #075E54;
    font-size: 17px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja .btn-moneda-opcion .moneda-detalle {
    font-size: 13px;
    font-weight: 800;
    color: #5A6B67;
}
body.modo-caja .btn-moneda-opcion.activo {
    background: #128C7E;
    color: #FFFFFF;
    border-color: #0B5C52;
}
body.modo-caja .btn-moneda-opcion.activo .moneda-detalle { color: #E4F3F0; }
body.modo-caja .btn-moneda-opcion:active { transform: scale(0.98); }
/* El ? del precio fijo, dentro de su renglón de la lista. */
body.modo-caja .btn-tasa-ayuda.ayuda-en-lista {
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 18px;
}

body.modo-caja .btn-tasa-ayuda {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 3;
    width: 25px;
    height: 25px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #075E54;
    color: #fff;
    font-size: 16px;
    line-height: 21px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
body.modo-caja .btn-tasa-ayuda:active {
    transform: scale(0.92);
    background: #F57C00;
}
body.modo-caja .aviso-solo-bs-caja {
    max-width: 430px;
}
body.modo-caja .aviso-solo-bs-texto {
    color: #333;
    font-size: 17px;
    line-height: 1.5;
    text-align: left;
    margin: 0 0 20px;
}
body.modo-caja .aviso-solo-bs-cerrar {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 9px;
    background: #075E54;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
}
/* El aviso de "todavía no puedes cobrar en esa moneda": grande, con la lista de
   productos que le faltan y dos salidas (CERRAR y la explicación completa). */
body.modo-caja .aviso-moneda-caja {
    max-width: 430px;
}
body.modo-caja .aviso-moneda-botones {
    display: flex;
    gap: 10px;
}
body.modo-caja .aviso-moneda-botones .aviso-solo-bs-cerrar {
    flex: 1 1 auto;
    font-size: 16px;
}
body.modo-caja .aviso-moneda-ayuda {
    background: #FFFFFF !important;
    color: #075E54 !important;
    border: 2px solid #075E54 !important;
}
body.modo-caja .producto-sin-precio-activo {
    opacity: 0.48;
    border-style: dashed !important;
}

body.modo-caja .texto-tasas-ayuda {
    font-size: 15px;
    color: #444;
    line-height: 1.45;
    margin: 0 0 12px;
    font-weight: 600;
}
body.modo-caja .texto-tasas-aviso { color: #9a3412; }
body.modo-caja .fila-tasa-editar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #EFE9E2;
}
body.modo-caja .fila-tasa-nombre {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body.modo-caja .fila-tasa-nombre small {
    font-size: 12px;
    color: #667;
    font-weight: 600;
}
body.modo-caja .fila-tasa-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
body.modo-caja .input-tasa {
    width: 110px;
    margin: 0 !important;
    padding: 10px 8px !important;
    font-size: 18px !important;
    text-align: right;
}
body.modo-caja .fila-tasa-unidad {
    font-size: 12px;
    font-weight: 800;
    color: #075E54;
    white-space: nowrap;
}
/* Último tocado: se queda sombreado hasta que agregues otro. Sin la raya verde
   oscura del borde izquierdo, y el verde cruza la tarjeta blanca **de lado a
   lado** (ver los márgenes negativos de `.fila-ticket`): media raya oscura de un
   lado y nada del otro se veía desparejo. */
body.modo-caja .ultimo-agregado {
    background-color: #C8E6C9;
}
body.modo-caja .fila-cantidad-nombre { display: flex; gap: 10px; }
/* Pegada a la izquierda, no centrada ni empujada por un espacio reservado. El
   ancho fijo se queda (cabe hasta `12x`) para que todos los nombres empiecen en
   la misma raya vertical, pero el número arranca en el borde. */
body.modo-caja .ticket-cantidad {
    min-width: 2.4em;
    text-align: left;
    font-size: 1em;
    white-space: nowrap;
}
/* EL NOMBRE, PEGADO A LA IZQUIERDA Y EN DOS RENGLONES
   Antes iba en una sola línea y se cortaba con puntos ("2x EMPA…"), que es lo
   peor de los dos mundos: ocupa el ancho y no dice cuál es. Ahora la familia
   abreviada va arriba y lo que distingue abajo, con letra más chica: el nombre
   completo entra sin cortarse y el ancho que sobraba se usa. */
body.modo-caja .ticket-nombre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: start;
    text-align: left;
    min-width: 0;
    line-height: 1.1;
    word-break: break-word;
}
body.modo-caja .ticket-nombre-familia {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.75;
}
body.modo-caja .ticket-nombre-variante {
    font-size: 0.86em;
    font-weight: 900;
}
body.modo-caja .ticket-pasos {
    display: flex;
    gap: 14px; /* ñ, − y + separados, no pegados */
    flex-shrink: 0;
    margin: 0;
}
/* En el teléfono son tres botones en un renglón estrecho: se juntan un poco y
   se achican, o se comen el ancho del nombre del producto. */
@media (max-width: 620px) {
    body.modo-caja .ticket-pasos { gap: 8px; }
    body.modo-caja .ticket-paso { width: 36px; height: 36px; }
}
/* La `ñ` del regalo: mismo cuadrado y misma separación que el − y el +, a su
   izquierda, y SOLO en el renglón que es una ñapa. Naranja para que se vea de
   lejos. Se toca para QUITAR la ñapa; para dar dos está el `+`. */
body.modo-caja .ticket-paso.ticket-napa {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F57C00;
    border: 2px solid #E65100;
    color: #FFFFFF;
    font-weight: 900;
    cursor: pointer;
}
body.modo-caja .ticket-paso {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: #017B45;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja .ticket-paso:active { background: #015F35; transform: scale(0.95); }
body.modo-caja .ticket-precio {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body.modo-caja .total-gigante { font-size: 32px; color: #075E54; text-align: left; margin-bottom: 20px; font-weight: bold; }
body.modo-caja .titulo-cerrada { color: #075E54; font-size: 20px; margin-bottom: 20px; text-align: left; font-weight: bold; }
body.modo-caja .btn-verde-nueva {
    background-color: #25D366; color: white; border: none; border-radius: 8px;
    font-size: 18px; font-weight: bold; padding: 15px; width: 100%; margin-bottom: 15px;
    cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.modo-caja .btn-verde-nueva:active { background-color: #128C7E; transform: scale(0.98); }
body.modo-caja .grid-telegram { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; margin-top: auto; }
body.modo-caja .btn-tg {
    background-color: #FAFAFA; color: #333333; border: 1px solid #D9D9D9; border-radius: 8px;
    font-size: 15px; font-weight: bold; height: 50px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
body.modo-caja .btn-tg:active { background-color: #EBEBEB; transform: scale(0.98); }
body.modo-caja .btn-tg.accion-volver { background-color: #DCF8C6; color: #075E54; border-color: #25D366; }
body.modo-caja .btn-tg.btn-panel { background-color: #25D366; color: white; border: none; }
body.modo-caja .btn-tg.btn-panel:active { background-color: #128C7E; }
/* [SALÓN-31] Producto en modo simple sin unidades: se ve apagado y no se
   puede tocar, tal como pide el criterio de aceptación (agotado = no se
   vende hasta que el dueño anote un lote nuevo). */
body.modo-caja .btn-tg.btn-agotado {
    background-color: #F1F1F1; color: #999; border-color: #E0E0E0;
    cursor: not-allowed; box-shadow: none; text-decoration: line-through;
}
body.modo-caja .btn-tg.btn-agotado:active { transform: none; background-color: #F1F1F1; }
/* ============================================================================== [ID-27-B] CSS FORMULARIOS ==== */
body.modo-caja .form-crear { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
body.modo-caja .input-tg { 
    width: 100%; padding: 15px; font-size: 16px; font-weight: bold;
    border: 1px solid #D9D9D9; border-radius: 8px; background: #FAFAFA; color: #333;
}
body.modo-caja .input-tg:focus { outline: none; border-color: #25D366; }
body.modo-caja .input-otro { border: 2px solid #80bdff; background-color: #f8fbff; }
body.modo-caja select.input-tg {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 30px;
    padding-right: 50px;
}
/* ============================================================================== [ID-27-C] CSS ZONAS Y PANELES ==== */
body.modo-caja .bg-panel-activo { background-color: #F0F2F5 !important; }
body.modo-caja .btn-panel-azul { background-color: #007BFF !important; color: white !important; border: none !important; }
body.modo-caja .btn-panel-azul:active { background-color: #0056b3 !important; }
/* El botón que lleva al PANEL DE CONTROL: fucsia en toda la caja, el mismo
   color del cuadrito de la barra del armado. Un color, una puerta. */
/* El botón que lleva al PANEL DE CONTROL: claro, como todos los del panel.
   Era el último color fuerte que quedaba peleando con COBRAR en la pantalla de
   la venta, y era el que menos lo necesitaba: no mueve plata, solo abre una
   puerta. Ahora el único color fuerte de la caja es COBRAR. */
body.modo-caja .btn-panel-fucsia {
    background-color: #FFFFFF !important;
    color: #0b4f2a !important;
    border: 2px solid #A5D6A7 !important;
    font-weight: 800 !important;
}
body.modo-caja .btn-panel-fucsia:active {
    background-color: #C8E6C9 !important;
    border-color: #128C7E !important;
}
body.modo-caja .texto-panel-grande { font-size: 16px; color: #333; line-height: 1.8; margin-top: 15px; }
body.modo-caja .titulo-panel { font-size: 22px; color: #075E54; font-weight: bold; text-transform: uppercase; margin-bottom: 15px; text-align: left; }
body.modo-caja .caja-combo { background:#E8F5E9; padding:12px; border-radius:8px; margin-top:10px; border: 1px solid #25D366; }
/* Botón falso, para mostrar un botón dentro de un texto explicativo. */
body.modo-caja .mock-btn-borrar {
    background-color: #FFFFFF; color: #C62828; border: 2px solid #E57373;
    padding: 4px 10px; border-radius: 6px; font-weight: bold; font-size: 13px;
    display: inline-block; margin-bottom: 5px;
}

/* ==========================================================================
   PANEL DE CONTROL POR FAMILIAS (v84)

   Antes eran siete botones azules seguidos, todos del mismo peso, y en tablet
   la mitad derecha de la pantalla quedaba vacía. Ahora van en tres bloques con
   título: MI MENÚ (lo que armas) · LA APP (lo que se actualiza solo) ·
   EL DINERO (lo que se cuenta al final del día).

   La familia la dice el TÍTULO del bloque, no el color del botón. Antes cada
   familia tenía su color y en una sola pantalla había siete colores fuertes
   peleando: cuando todo grita, nada resalta. Ahora todos los botones van
   claros y con el mismo borde, y quedan solo dos excepciones, las dos por
   seguridad: borde rojo en el que borra el menú, y verde claro en la salida
   hacia adelante.
   ========================================================================== */
body.modo-caja .bloques-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
/* En el teléfono los bloques van a lo ancho de la cuadrícula del panel. */
body.modo-caja:not(.modo-tablet) #teclado-container .bloques-panel {
    grid-column: 1 / -1;
}
body.modo-caja .titulo-bloque-panel {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #6B7680;
    text-transform: uppercase;
    border-bottom: 1px solid #DCE1E5;
    padding: 0 2px 4px;
    margin-bottom: 8px;
}
/* Teléfono: dos botones por renglón dentro de cada bloque. */
/* Un botón por renglón, también en teléfono. En dos columnas los nombres
   largos se partían en tres líneas y cada botón quedaba de un alto distinto;
   en columna todos miden lo mismo y se leen de corrido de arriba abajo. */
body.modo-caja .botones-bloque-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
body.modo-caja .botones-bloque-panel .btn-tg {
    height: auto;
    min-height: 52px;
    white-space: normal;
    line-height: 1.15;
    padding: 8px 6px;
    font-size: 14px;
    text-align: center;
}
body.modo-caja .btn-panel-naranja { background-color: #F57C00 !important; color: #000000 !important; border: none !important; }
body.modo-caja .btn-panel-naranja:active { background-color: #E65100 !important; }
body.modo-caja .btn-panel-verde { background-color: #25D366 !important; color: #FFFFFF !important; border: none !important; }
body.modo-caja .btn-panel-verde:active { background-color: #128C7E !important; }
/* EL BOTÓN DEL PANEL, EN CLARO
   Todos los del panel llevan este mismo tono: blanco con borde verde. El color
   dejó de ser decoración por botón para que el único color fuerte de la caja
   sea el que mueve plata (COBRAR). Al tocar se pinta de verde claro, el mismo
   verde del renglón elegido en el ticket, para que "te leí el dedo" se vea
   igual en todas las pantallas. */
body.modo-caja .btn-panel-claro {
    background-color: #FFFFFF !important;
    color: #0b4f2a !important;
    border: 2px solid #A5D6A7 !important;
    font-weight: 800 !important;
}
body.modo-caja .btn-panel-claro:active {
    background-color: #C8E6C9 !important;
    border-color: #128C7E !important;
}
/* El marco existe solo para poder colgar el círculo del `?` del borde del
   botón sin meterlo dentro del área que se toca para entrar. */
body.modo-caja .marco-btn-panel {
    position: relative;
    display: block;
}
body.modo-caja .marco-btn-panel > .btn-tg {
    width: 100%;
    /* Sitio a la derecha para que el círculo no se acueste sobre el texto. */
    padding-right: 34px !important;
}
body.modo-caja .btn-ayuda-panel {
    position: absolute;
    top: -9px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #128C7E;
    background: #FFFFFF;
    color: #075E54;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja .btn-ayuda-panel:active { background: #C8E6C9; transform: scale(0.94); }
body.modo-caja .aviso-ayuda-panel-titulo {
    font-size: 18px;
    font-weight: 900;
    color: #075E54;
    margin-bottom: 10px;
    line-height: 1.2;
}
body.modo-caja .aviso-ayuda-panel-texto {
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 18px;
}
body.modo-caja .aviso-ayuda-panel-cerrar {
    width: 100%;
    min-height: 50px;
    background: #FFFFFF;
    color: #0b4f2a;
    border: 2px solid #A5D6A7;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
}
body.modo-caja .aviso-ayuda-panel-cerrar:active { background: #C8E6C9; }
/* El que borra: chiquito y en blanco con borde rojo, para que no se toque solo. */
body.modo-caja .btn-panel-borrar {
    background-color: #FFFFFF !important;
    color: #C62828 !important;
    border: 2px solid #E57373 !important;
    font-size: 13px !important;
    min-height: 44px !important;
}
body.modo-caja .btn-panel-borrar:active { background-color: #FFEBEE !important; }
/* Apagado mientras diga "Pronto": no parece roto, parece que falta. */
body.modo-caja .btn-panel-apagado {
    background-color: #E4E7EA !important;
    color: #77838B !important;
    border: 1px solid #D3D8DC !important;
}
/* Tablet: un botón por renglón dentro del bloque, y los bloques en DOS
   columnas usando también el ancho que antes quedaba vacío a la derecha. */
body.modo-caja.modo-tablet .botones-bloque-panel {
    grid-template-columns: 1fr;
}
body.modo-caja.modo-tablet #grupos-container.columna-panel {
    grid-column: 2 / span 2;
}
body.modo-caja.modo-tablet #grupos-container.columna-panel ~ #teclado-container {
    display: none !important;
}
body.modo-caja.modo-tablet #grupos-container.columna-panel .bloques-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    align-items: start;
}
body.modo-caja.modo-tablet .bloque-panel-menu { grid-column: 1; grid-row: 1; }
body.modo-caja.modo-tablet .bloque-panel-app { grid-column: 1; grid-row: 2; }
body.modo-caja.modo-tablet .bloque-panel-dinero { grid-column: 2; grid-row: 1; }
/* ============================================================================== [ID-27-D] CSS ESTRUCTURA DE FORMULARIO ==== */
body.modo-caja .form-crear-contenedor {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 190px); 
}
body.modo-caja .zona-botones-fondo {
    position: sticky;
    bottom: -15px; /* Se ancla exacto al borde inferior de la pantalla blanca */
    background-color: #FFFFFF;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-top: auto;
    border-top: 2px solid #EBEBEB;
    z-index: 99; /* Obliga al botón a estar siempre por encima del texto */
}
/* ============================================================================== [ID-27-E] CSS ONBOARDING Y MODALES ==== */
body.modo-caja #onboarding-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #ECE5DD; z-index: 1000; padding: 15px 15px 0 15px;
    display: flex; flex-direction: column; overflow-y: auto;
}
body.modo-caja .titulo-onboarding {
    font-size: 24px; color: #075E54; font-weight: bold; text-align: center;
    margin-bottom: 25px; margin-top: 10px; line-height: 1.3;
}
body.modo-caja .titulo-seccion-actual {
    font-size: 16px; color: #333; font-weight: bold; text-align: center;
    text-transform: uppercase; margin-bottom: 15px; border-bottom: 2px solid #D9D9D9; padding-bottom: 10px;
}
body.modo-caja .btn-onboarding {
    background-color: #FFFFFF; color: #333; border: 2px solid #25D366;
    border-radius: 12px; font-size: 18px; font-weight: bold; padding: 20px;
    margin-bottom: 15px; width: 100%; cursor: pointer; text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.2s;
    overflow: visible;
}
/* Armado de menú: en teléfono UNA columna (ancho completo, se lee el nombre).
   En pantallas más anchas: 2 cols; en tablet ancha: 3 cols en vertical. */
body.modo-caja .rejilla-onboarding-puertas {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
}
@media (min-width: 700px) {
    body.modo-caja .rejilla-onboarding-puertas {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;
    }
}
@media (min-width: 900px) {
    body.modo-caja .rejilla-onboarding-puertas {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(4, auto);
    }
}
body.modo-caja .btn-onboarding-puerta {
    display: grid;
    /* número · nombre(+cantidad) · hueco para la manito */
    grid-template-columns: 1.8em minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 0;
    padding: 18px 10px 18px 14px;
    font-size: 17px;
    min-height: 72px;
    text-align: left;
    border-color: #D0D0D0;
    background: #FAFAFA;
    overflow: visible;
}
body.modo-caja .btn-onboarding-puerta .ob-num {
    font-weight: 900;
    color: #075E54;
    text-align: right;
}
body.modo-caja .btn-onboarding-puerta .ob-nombre {
    min-width: 0;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
body.modo-caja .btn-onboarding-puerta .ob-cant {
    font-weight: 900;
    color: #F57C00;
    font-variant-numeric: tabular-nums;
}
body.modo-caja .btn-onboarding-puerta .ob-mano-hueco {
    width: 48px;
    height: 1px;
}
/* Subtipos / combos: más anchos que antes. En iPad eran tres columnas y se
   veían como tiras estrechas; ahora son dos columnas grandes, parecidas a las
   puertas del menú principal. En teléfono usan todo el ancho. */
body.modo-caja .rejilla-onboarding-chica {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin-bottom: 12px;
}
@media (min-width: 700px) {
    body.modo-caja .rejilla-onboarding-chica {
        grid-template-columns: 1fr 1fr;
    }
}
body.modo-caja .btn-onboarding-chico {
    position: relative;   /* la manito y el `?` se cuelgan de aquí */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
    padding: 16px 56px 16px 15px; /* derecha libre para la manito */
    min-height: 64px;
    font-size: 17px;
    border-color: #D0D0D0;
    background: #FAFAFA;
    text-align: left;
    overflow: visible;
}
body.modo-caja .btn-onboarding-chico .ob-nombre {
    flex: 1;
    min-width: 0;
    line-height: 1.15;
}
body.modo-caja .btn-onboarding-chico .ob-cant {
    font-weight: 900;
    color: #F57C00;
    font-variant-numeric: tabular-nums;
}
body.modo-caja .btn-onboarding-chico.btn-onboarding-elegido {
    background: #FFF8F0;
}
/* EL AVISO DEL OTRO NOMBRE (aborrajado / plátano con queso).
   Letra grande y frases cortas: esto lo lee alguien que está armando su menú
   por primera vez, de pie y con el teléfono en la mano. Y lo de "cámbiale el
   nombre" va fuera del botón, para que dentro del botón quede solo el nombre. */
body.modo-caja .texto-otro-nombre {
    font-size: 18px;
    line-height: 1.45;
    color: #333;
    margin: 0 0 14px 0;
}
body.modo-caja .rotulo-cambiar-nombre {
    font-size: 17px;
    font-weight: 900;
    color: #075E54;
    margin: 18px 0 8px 0;
    line-height: 1.3;
}
body.modo-caja.modo-tablet .texto-otro-nombre { font-size: 20px; }
body.modo-caja.modo-tablet .rotulo-cambiar-nombre { font-size: 19px; }

/* El `?` de los grupos que tienen otro nombre (aborrajado / plátano con queso).
   Va dentro del botón pero es un botón aparte: preguntar qué es y entrar a
   ponerle precio no pueden ser el mismo toque. Mismo aspecto que el `?` del
   panel, y en el hueco de la derecha que ya estaba reservado. */
body.modo-caja .btn-que-es-grupo {
    position: absolute;
    /* En la esquina de arriba, igual que el `?` del panel: así no se cruza con
       la manito del tutorial, que vive pegada a la derecha del renglón. */
    top: -9px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #128C7E;
    background: #FFFFFF;
    color: #075E54;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja .btn-que-es-grupo:active {
    background: #C8E6C9;
    transform: scale(0.94);
}
/* Manita de tutorial: a la derecha, en hueco libre (no tapa el nombre ni el (1)) */
body.modo-caja .btn-manita-destino {
    animation: manita-boton-pulso 1.6s ease-in-out infinite;
}
body.modo-caja .manita-tutorial {
    position: absolute;
    right: 2px;
    top: 50%;
    width: 52px;
    height: 52px;
    pointer-events: none;
    z-index: 5;
    transform: translateY(-42%);
}
body.modo-caja .manita-svg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 44px;
    height: 44px;
    display: block;
    animation: manita-click 1.6s ease-in-out infinite;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
body.modo-caja .manita-rayo {
    stroke: #222;
    opacity: 0;
    animation: manita-rayos 1.6s ease-in-out infinite;
}
body.modo-caja .manita-ondas,
body.modo-caja .manita-ondas-2 {
    position: absolute;
    left: 10px;
    top: 4px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(37, 211, 102, 0.85);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.4);
    animation: manita-onda 1.6s ease-out infinite;
}
body.modo-caja .manita-ondas-2 {
    animation-delay: 0.18s;
    border-color: rgba(37, 211, 102, 0.55);
}
@keyframes manita-click {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-2px, 6px) scale(0.94); }
    55% { transform: translate(-2px, 6px) scale(0.94); }
}
@keyframes manita-rayos {
    0%, 35%, 70%, 100% { opacity: 0; }
    45%, 58% { opacity: 1; }
}
@keyframes manita-onda {
    0%, 38% { opacity: 0; transform: scale(0.35); }
    45% { opacity: 0.9; }
    75%, 100% { opacity: 0; transform: scale(2.1); }
}
@keyframes manita-boton-pulso {
    0%, 100% { background-color: #FFFFFF; border-color: #25D366; }
    40%, 58% { background-color: #C8F5D4; border-color: #25D366; }
}
body.modo-caja .btn-onboarding:active { transform: scale(0.97); filter: brightness(0.97); }
body.modo-caja .btn-onboarding small { display: block; font-size: 14px; color: #666; margin-top: 8px; font-weight: normal; }
body.modo-caja .btn-onboarding-elegido {
    border-color: #F57C00 !important;
    box-shadow: inset 4px 0 0 #F57C00, 0 2px 4px rgba(0,0,0,0.08);
}
body.modo-caja .btn-onboarding-puerta.btn-onboarding-elegido {
    background: #FFF8F0;
}
body.modo-caja .fila-guardado {
    border: 2px solid #F57C00 !important;
    background: #FFF8F0 !important;
}
body.modo-caja .btn-ancho-total { width: 100%; margin-bottom: 10px; height: 55px; }
body.modo-caja .encabezados-columnas {
    display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 5px;
    padding-right: 5px; font-size: 12px; font-weight: bold; color: #666;
}
body.modo-caja .encabezados-columnas .cabecera-precio { width: 95px; text-align: center; }
body.modo-caja .encabezados-columnas .cabecera-precio-bs { width: 112px; }
body.modo-caja .encabezados-columnas .cabecera-limpiar { width: 92px; text-align: center; }
body.modo-caja .encabezados-columnas .cabecera-onzas { width: 60px; text-align: center; }
body.modo-caja .fila-multi,
body.modo-caja .fila-manual {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    background: #FFF; padding: 10px 12px; border-radius: 8px; margin-bottom: 10px;
    border: 1px solid #D9D9D9;
}
body.modo-caja .btn-borrar-producto {
    flex-shrink: 0;
    border: none;
    background: #DC3545;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    border-radius: 6px;
    padding: 10px 12px;
    min-height: 42px;
    cursor: pointer;
}
body.modo-caja .btn-borrar-producto:active { background: #B02A37; }
body.modo-caja .btn-borrar-producto:disabled { opacity: 0.6; }
body.modo-caja .nombre-item { font-weight: bold; color: #333; font-size: 16px; flex-grow: 1; cursor: pointer; display: flex; flex-direction: column; justify-content: center; }
body.modo-caja .hint-receta { color: #007BFF; font-size: 13px; font-weight: bold; cursor: pointer; display: block; margin-top: 4px; }
body.modo-caja .fila-manual input[type="text"] {
    flex-grow: 1; min-width: 0; padding: 10px; border: 1px solid #CCC; border-radius: 6px;
    font-weight: bold; font-size: 16px; background: #FAFAFA; color: #333;
}
body.modo-caja .caja-dinero {
    display: flex; align-items: center; border: 1px solid #CCC; 
    border-radius: 6px; background: #FAFAFA; padding-left: 10px; width: 95px; flex-shrink: 0;
}
body.modo-caja .caja-dinero-bs {
    width: 112px;
    padding-left: 7px;
    /* Mismo borde gris que Dollar (sin verde). */
    border-color: #CCC;
}
body.modo-caja .caja-dinero-bs span {
    color: #075E54;
    font-size: 14px;
}
body.modo-caja .btn-limpiar-precio {
    flex: 0 0 44px;
    width: 44px;
    min-height: 43px;
    padding: 4px 2px;
    border: none;
    border-radius: 7px;
    background: #FFF5F5;
    color: #B4232D;
    font-size: 12px;
    line-height: 1.05;
    font-weight: 900;
    cursor: pointer;
}
/* Cruz en lugar del texto LIMPIAR PRECIO: mismo fondo rojo claro. */
body.modo-caja .btn-limpiar-precio.btn-limpiar-cruz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
}
body.modo-caja .btn-limpiar-precio:active {
    background: #DC3545;
    color: #fff;
    transform: scale(0.97);
}
body.modo-caja .precio-equivalencia {
    display: block;
    margin-top: 4px;
    color: #075E54;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
}
body.modo-caja .barra-tasas-edicion {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid #C9D8D4;
    border-radius: 10px;
    /* Opaco: al subir con el dedo el producto no se ve “por detrás”. */
    background: #ECE5DD;
    box-shadow: none;
}
/* Franja fija horizontal (títulos de armado / cabecera de precios).
   Se queda bajo Cerrar/minimizar de Telegram; el scroll pasa por detrás. */
body.modo-caja .franja-fija-onboarding,
body.modo-caja .barra-tasas-edicion.cabecera-precios-foto3 {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 -15px 10px;
    padding: 6px 15px 10px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #D9D9D9;
    background: #ECE5DD;
    box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.18);
}
body.modo-caja .franja-fija-onboarding::before,
body.modo-caja .barra-tasas-edicion.cabecera-precios-foto3::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 120px;
    background: #ECE5DD;
    pointer-events: none;
}
body.modo-caja .franja-fija-onboarding .titulo-onboarding {
    margin: 0;
    padding: 4px 0 2px;
    font-size: 18px;
    line-height: 1.2;
}
body.modo-caja .ayuda-peso-precios {
    text-align: center;
    color: #075E54;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
}

/* Foto 3: cabecera = nombre · precio fijo · Dollar · limpiar precio.
   En tablet NO se duplica sobre la columna derecha de productos. */
body.modo-caja .cabecera-precios-foto3 {
    display: block;
    padding: 8px 15px 10px;
}
body.modo-caja .cabecera-precios-izq {
    display: grid;
    /* Cuatro columnas: nombre · Dollar · medida (U/kg/lb) · limpiar. La de
       "precio fijo" se quitó el 19-08 (los precios van solo en dólares) y la de
       la medida subió aquí el mismo día: una oferta de "10 X $4" tiene que decir
       si son 10 unidades, 10 kilos o 10 libras. El renglón de la oferta usa
       estas mismas columnas, así que todo queda alineado en vertical. */
    grid-template-columns: minmax(78px, 1.15fr) minmax(76px, 0.95fr) 92px 44px;
    gap: 5px;
    align-items: stretch;
    width: 100%;
}
body.modo-caja .cabecera-precios-foto3 .cab-precios-nombre { min-height: 1px; }
/* Título centrado línea a línea (PERROS sobre CALIENTES, no corrido a la der.). */
body.modo-caja .cabecera-precios-foto3 .cab-precios-titulo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 4px 4px 4px 2px;
    color: #222;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    text-transform: uppercase;
}
body.modo-caja .cabecera-precios-foto3 .cab-tit-linea {
    display: block;
    width: 100%;
    text-align: center;
}
body.modo-caja .cabecera-precios-foto3 .cab-precios-titulo-compacto {
    font-size: 12px;
    letter-spacing: -0.02em;
    word-break: break-word;
    overflow-wrap: anywhere;
}
body.modo-caja .cabecera-precios-foto3 .cab-precios-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 8px 12px 6px 2px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #075E54;
    font-weight: 900;
    font-size: 13px;
    text-align: center;
    line-height: 1.15;
}
body.modo-caja .cab-precios-ayuda {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1.5px solid #075E54;
    border-radius: 50%;
    background: #fff;
    color: #075E54;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
body.modo-caja .cab-precios-ayuda:active {
    background: #075E54;
    color: #fff;
}
body.modo-caja .aviso-ayuda-titulo {
    margin-bottom: 10px !important;
    font-size: 18px !important;
}
body.modo-caja .aviso-ayuda-mensaje {
    min-height: 72px;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px dashed #C9D8D4;
    border-radius: 8px;
    background: #FAFAFA;
    text-align: left;
    font-size: 16px;
    color: #333;
    line-height: 1.35;
}
/* Encabezado de la columna de la cruz. */
body.modo-caja .cabecera-precios-foto3 .cab-precios-limpiar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 2px 1px;
    color: #B4232D;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-transform: lowercase;
}
body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-multi,
body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-manual {
    display: grid;
    /* Las mismas columnas que la cabecera: nombre · Dollar · medida · limpiar. */
    grid-template-columns: minmax(78px, 1.15fr) minmax(76px, 0.95fr) 92px 44px;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap;
}
body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-multi .nombre-item,
body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-manual > div:first-child {
    flex: unset;
    min-width: 0;
}
/* Caja del número: se ve el fondo; borde casi invisible (hilo). */
body.modo-caja .pantalla-precios-foto3 .caja-dinero {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    background: #F3F3F3;
    box-shadow: inset 0 0 0 1px rgba(40, 40, 40, 0.14);
    padding-left: 4px;
}
body.modo-caja .pantalla-precios-foto3 .caja-dinero-bs,
body.modo-caja .pantalla-precios-foto3 .caja-dinero-usd {
    width: 100%;
    padding-left: 4px;
}
body.modo-caja .pantalla-precios-foto3 .caja-dinero:focus-within {
    border: none;
    box-shadow: inset 0 0 0 1.5px #25D366;
}
body.modo-caja .pantalla-precios-foto3 .caja-dinero input {
    text-align: center;
    padding: 10px 2px;
    font-size: 17px;
}
body.modo-caja .pantalla-precios-foto3 .btn-limpiar-precio {
    width: 100%;
    flex: unset;
    margin-left: 0;
}
/* La medida vive en SU columna, entre el precio y la cruz (antes se iba a un
   renglón propio a lo ancho, y así no se sabía a qué número se refería). */
body.modo-caja .pantalla-precios-foto3 .sel-unidad {
    justify-self: stretch;
    align-self: center;
}
body.modo-caja .pantalla-precios-foto3 .sel-unidad-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 2px;
}
body.modo-caja .pantalla-precios-foto3 .input-oz,
body.modo-caja .pantalla-precios-foto3 .input-oz-manual {
    grid-column: 1;
}
body.modo-caja .pantalla-precios-foto3 .encabezados-onzas-foto3 {
    justify-content: flex-start;
    margin-bottom: 4px;
}

/* Tablet: DOS columnas iguales de productos.
   En cada fila: nombre · precio fijo · Dollar · cruz (mismas medidas). */
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
}
/* Al quitar .oculto, los hijos entran en la grilla de 2 columnas.
   Los títulos de categoría NO usan display:contents: si no, en tablet el
   texto ocupa la columna izquierda y el producto salta a la derecha. */
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 > div:not(.fila-multi):not(.fila-manual):not(.encabezados-columnas):not(.titulo-cat-precios) {
    display: contents;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 > .oculto {
    display: none !important;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 > .btn-mostrar-mas,
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 > .encabezados-columnas,
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 > .titulo-cat-precios {
    grid-column: 1 / -1;
}
body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 > .titulo-cat-precios {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 12px 0 6px;
    padding: 0 0 5px;
    border-bottom: 2px solid #075E54;
    color: #075E54;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}
/* Tablet: aprovecha el ancho — el precio cómodo (no tan chico como en v76),
   sin volver al hueco enorme entre nombre y precio. */
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 .fila-multi,
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 .fila-manual {
    grid-template-columns: minmax(84px, 1.2fr) minmax(80px, 0.95fr) 96px 48px;
    gap: 6px;
    margin-bottom: 0;
    padding: 8px 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .lista-precios-foto3 .nombre-item {
    font-size: 15px;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .btn-limpiar-precio {
    flex: 0 0 44px;
    width: 44px;
    justify-self: center;
    font-size: 20px;
    min-height: 42px;
    padding: 3px 2px;
    line-height: 1;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .caja-dinero span {
    font-size: 14px;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .caja-dinero input {
    font-size: 18px;
    padding: 9px 2px;
}
/* Tablet: cabecera solo sobre la mitad IZQUIERDA (misma grilla que cada fila). */
body.modo-caja.modo-tablet .pantalla-precios-foto3 .cabecera-precios-foto3 {
    display: block;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .cabecera-precios-izq {
    width: calc(50% - 6px);
    max-width: calc(50% - 6px);
    grid-template-columns: minmax(84px, 1.2fr) minmax(80px, 0.95fr) 96px 48px;
    gap: 6px;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .cabecera-precios-foto3 .cab-precios-titulo {
    font-size: 17px;
}
/* precio fijo / Dollar: anchos cómodos + letra grande (misma celda que Bs/$). */
body.modo-caja.modo-tablet .pantalla-precios-foto3 .cabecera-precios-foto3 .cab-precios-col {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px 6px 4px;
    font-size: 16px;
    border-radius: 8px;
}
body.modo-caja.modo-tablet .pantalla-precios-foto3 .cabecera-precios-foto3 .cab-precios-limpiar {
    font-size: 13px;
    line-height: 1.15;
    padding: 2px 2px;
}

body.modo-caja .campos-precio-combo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
body.modo-caja .campos-precio-combo .caja-dinero {
    flex: 1 1 130px;
    width: auto;
}
/* Una sola casilla de precio: la de bolívares a mano se quitó (19-08). */
/* LA OFERTA POR CANTIDAD: SEGUNDO RENGLÓN DE CADA PRODUCTO
   "3 limones por 1 dólar". Va debajo del precio de uno y usa LAS MISMAS
   COLUMNAS: `display: contents` mete sus celdas en la rejilla del renglón, así
   que el precio de la oferta cae exactamente debajo del otro precio, la medida
   debajo de la medida y la cruz debajo de la cruz. Con una rejilla propia se
   desalineaba en cuanto cambiaba el ancho de la pantalla. */
body.modo-caja .fila-oferta {
    display: contents;
}
/* La raya de separación es UN renglón propio de la rejilla, de lado a lado.
   Antes iba como borde de cada celda y salía cortada en los huecos entre
   columnas: se veía a trozos, y eso es lo que Camiones pidió arreglar. */
body.modo-caja .fila-oferta-raya {
    grid-column: 1 / -1;
    height: 1px;
    margin: 5px 0 2px;
    background: #E1E5E7;
}
body.modo-caja .celda-oferta,
body.modo-caja .fila-oferta .sel-unidad {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
body.modo-caja .fila-oferta-inicio {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
body.modo-caja .fila-oferta-rotulo {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8A8A8A;
    flex-shrink: 0;
}
/* La medida dentro de la casilla del número, a un dedo del número y no en el
   borde. El número y la medida van juntos, con un hueco FIJO entre los dos
   (antes era la mitad de la casilla, y en tablet quedaban lejísimos); el
   relleno de la izquierda es lo que deja el número en el centro de la casilla
   y la medida a su derecha. El ancho del número lo ajusta el JS a lo que dice. */
body.modo-caja .caja-oferta-cantidad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-left: 22px;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #E4E7EA;
    border-radius: 7px;
    background: #FAFAFA;
}
body.modo-caja .caja-oferta-cantidad:focus-within {
    border-color: #25D366;
    box-shadow: inset 0 0 0 1px #25D366;
}
body.modo-caja .oferta-medida-texto {
    font-size: 15px;
    font-weight: 900;
    color: #075E54;
    line-height: 1;
    flex-shrink: 0;
}
body.modo-caja .fila-oferta-x {
    font-size: 15px;
    font-weight: 900;
    color: #555;
    flex-shrink: 0;
}
body.modo-caja .input-oferta-cantidad {
    width: 2.6ch;
    min-width: 0;
    flex: 0 1 auto;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 7px 0;
    color: #333;
}
body.modo-caja .caja-dinero-oferta {
    min-width: 0;
}
/* Celda vacía de la medida: solo guarda la columna para que la cruz caiga
   siempre en el mismo sitio, con peso o sin peso. */
body.modo-caja .celda-unidad-vacia {
    min-width: 0;
}
body.modo-caja .cab-precios-col-medida {
    text-align: center;
    align-self: end;
}

/* LO QUE SALIÓ SIN COBRAR (panel) */
body.modo-caja .salida-total {
    background: #FFF3E0;
    border: 2px solid #F57C00;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
body.modo-caja .salida-total-rotulo {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #7A4A00;
}
body.modo-caja .salida-total-cifra {
    font-size: 24px;
    font-weight: 900;
    color: #7A4A00;
    margin-top: 2px;
}
body.modo-caja .salida-linea {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #444;
    padding: 7px 2px;
    border-bottom: 1px solid #EBEBEB;
}
body.modo-caja .salida-form { margin-top: 16px; }
body.modo-caja .salida-rotulo {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B7680;
    margin: 12px 0 5px;
}
body.modo-caja .salida-motivos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
body.modo-caja .btn-motivo-salida {
    height: auto;
    min-height: 50px;
    white-space: normal;
}
body.modo-caja .btn-motivo-salida.activo {
    background: #F57C00;
    border-color: #E65100;
    color: #FFFFFF;
}
body.modo-caja .salida-form .btn-verde-nueva { margin-top: 14px; }
body.modo-caja .salida-aviso {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 900;
    min-height: 1.2em;
}
body.modo-caja .salida-aviso-bueno { color: #0b4f2a; }
body.modo-caja .salida-aviso-malo { color: #C62828; }

/* EL BOTÓN DEL PRODUCTO, CON SU PRECIO DEBAJO
   Más alto que antes a propósito: el precio necesita su renglón, y el sitio
   estaba de sobra. Así se contesta "¿a cómo está el cambur?" sin abrir nada. */
body.modo-caja .btn-producto-caja {
    flex-direction: column;
    gap: 2px;
    height: auto;
    min-height: 66px;
    padding: 8px 6px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
}
body.modo-caja .btn-nombre-producto {
    font-size: 15px;
    font-weight: bold;
}
body.modo-caja .btn-precio-producto {
    font-size: 13px;
    font-weight: 900;
    color: #075E54;
}

/* EL BOTÓN DE LA OFERTA EN LA CAJA
   Mismo tamaño y misma familia que el botón del producto suelto, un tono más
   oscuro y con la palabra `X5` grande. No es un color nuevo: en esta caja el
   único color fuerte sigue siendo COBRAR. */
body.modo-caja .btn-oferta-caja {
    flex-direction: column;
    gap: 1px;
    background-color: #E7EBE8;
    border: 1px solid #B9C4BC;
    color: #10281C;
    line-height: 1.15;
}
body.modo-caja .btn-oferta-caja:active { background-color: #D3DBD5; }
body.modo-caja .btn-oferta-caja .oferta-nombre {
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
body.modo-caja .btn-oferta-caja .oferta-nombre strong {
    font-size: 16px;
    font-weight: 900;
}
body.modo-caja .btn-oferta-caja .oferta-precio {
    font-size: 12px;
    font-weight: 900;
    color: #075E54;
}

body.modo-caja .campos-precio-nuevo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
body.modo-caja #nuevo-precio-bs {
    display: none;
}
@media (max-width: 620px) {
    body.modo-caja .fila-multi,
    body.modo-caja .fila-manual {
        flex-wrap: wrap;
    }
    body.modo-caja .fila-multi .nombre-item,
    body.modo-caja .fila-manual > div:first-child {
        flex: 1 0 100%;
    }
    body.modo-caja .caja-dinero-usd,
    body.modo-caja .caja-dinero-bs {
        flex: 1 1 105px;
        width: auto;
    }
    body.modo-caja .btn-limpiar-precio {
        flex: 0 0 42px;
        width: 42px;
        margin-left: auto;
    }
    body.modo-caja .encabezados-columnas {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-right: 0;
        width: 100%;
    }
    body.modo-caja .encabezados-columnas .cabecera-precio { width: auto; flex: 1 1 105px; }
    body.modo-caja .encabezados-columnas .cabecera-precio-bs { width: auto; flex: 1 1 105px; }
    body.modo-caja .encabezados-columnas .cabecera-limpiar { width: 42px; flex: 0 0 42px; }
    /* Teléfono: misma grilla cabecera = filas (alineados); un poco a la izquierda;
       limpiar precio no pegado al borde. */
    body.modo-caja .cabecera-precios-foto3 {
        padding-left: 12px;
        padding-right: 18px;
    }
    body.modo-caja .cabecera-precios-izq,
    body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-multi,
    body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-manual {
        grid-template-columns: minmax(66px, 1.1fr) minmax(64px, 0.9fr) 78px 38px;
        gap: 4px;
    }
    body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-multi,
    body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-manual {
        flex-wrap: nowrap;
        padding-right: 4px;
    }
    body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-multi .nombre-item,
    body.modo-caja .pantalla-precios-foto3 .lista-precios-foto3 .fila-manual > div:first-child {
        flex: unset;
        min-width: 0;
        font-size: 14px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    body.modo-caja .pantalla-precios-foto3 .btn-limpiar-precio {
        flex: 0 0 40px;
        width: 40px;
        margin-left: 0;
        justify-self: center;
    }
    /* En el teléfono la casilla es estrecha: menos relleno, o el número y la
       medida se salen por la derecha. */
    body.modo-caja .caja-oferta-cantidad {
        padding-left: 13px;
        gap: 6px;
    }
    body.modo-caja .pantalla-precios-foto3 .caja-dinero-bs,
    body.modo-caja .pantalla-precios-foto3 .caja-dinero-usd {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Mismo ancho de celda que la caja de abajo → se alinean. */
    body.modo-caja .cabecera-precios-foto3 .cab-precios-col {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px 5px 2px;
        font-size: 14px;
    }
    body.modo-caja .cabecera-precios-foto3 .cab-precios-limpiar {
        font-size: 11px;
        padding: 2px 2px;
    }
    body.modo-caja .cabecera-precios-foto3 .cab-precios-titulo {
        font-size: 14px;
        padding-left: 0;
        padding-right: 2px;
    }
    body.modo-caja .cabecera-precios-foto3 .cab-precios-titulo-compacto {
        font-size: 11px;
    }
}
body.modo-caja .caja-dinero span { font-size: 16px; font-weight: bold; color: #333; }
body.modo-caja .caja-dinero input {
    border: none; background: transparent; width: 100%; padding: 10px;
    text-align: right; font-size: 16px; font-weight: bold; outline: none;
}
body.modo-caja .caja-dinero:focus-within { border-color: #25D366; }
body.modo-caja .input-oz,
body.modo-caja .input-oz-manual {
    width: 60px; padding: 10px; border: 1px solid #CCC; border-radius: 6px;
    text-align: center; font-size: 16px; font-weight: bold; background: #FAFAFA; flex-shrink: 0;
}
body.modo-caja .input-oz:focus,
body.modo-caja .input-oz-manual:focus,
body.modo-caja .fila-manual input[type="text"]:focus { outline: none; border-color: #25D366; }
/* NUEVOS ESTILOS PARA COMBOS/PROMOS */
body.modo-caja .bloque-combo {
    background: #FFF; border: 1px solid #D9D9D9; border-radius: 10px;
    padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
body.modo-caja .label-combo { font-size: 14px; font-weight: bold; color: #075E54; margin-bottom: 5px; margin-top: 10px; }
body.modo-caja .label-combo:first-child { margin-top: 0; }
body.modo-caja .input-combo-texto {
    width: 100%; padding: 12px; border: 1px solid #CCC; border-radius: 6px;
    font-size: 14px; font-weight: bold; background: #FAFAFA; margin-bottom: 5px;
}
body.modo-caja .input-combo-texto:focus { outline: none; border-color: #25D366; }
body.modo-caja textarea.input-combo-texto { resize: none; height: 70px; font-weight: normal; }
/* ============================================================================== [ID-27-E4] CSS BOTONES INFERIORES 50/50 FIJOS ==== */
/* ZONA FIJA AL FONDO DE LA PANTALLA (Aplica para todas las pantallas) */
body.modo-caja .zona-fija-bottom {
    position: fixed !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    width: 100vw !important; 
    background: #ECE5DD !important; 
    padding: 15px !important; 
    z-index: 9999 !important;
    border-top: 2px solid #D9D9D9 !important; 
    display: flex !important; 
    gap: 8px !important; /* SE REDUJO EL ESPACIO ENTRE BOTONES */
    box-sizing: border-box !important;
}
body.modo-caja .zona-columna { 
    flex-direction: column !important; 
}
body.modo-caja .zona-fija-bottom:not(.zona-columna) {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}
/* PREVENIR QUE LOS BOTONES TAPEN EL ÚLTIMO PRODUCTO DE LA LISTA */
body.modo-caja #onboarding-step2 {
    padding-bottom: 140px !important; /* SE AUMENTÓ EL ESPACIO AL FONDO PARA EL SCROLL */
}

/* Transición de navegación (gesto): se ve el desliz, tipo Twitter/iOS.
   No usar will-change/transform permanente en #onboarding-step2: rompe el
   position:fixed de GUARDAR/ATRÁS y los deja a media pantalla. */
body.modo-caja .nav-sale-der {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    transform: translateX(32%);
    opacity: 0.35;
}
body.modo-caja .nav-sale-izq {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    transform: translateX(-32%);
    opacity: 0.35;
}
body.modo-caja .nav-entra-izq {
    animation: nav-caja-entra-izq 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.modo-caja .nav-entra-der {
    animation: nav-caja-entra-der 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes nav-caja-entra-izq {
    from { transform: translateX(-26%); opacity: 0.4; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes nav-caja-entra-der {
    from { transform: translateX(26%); opacity: 0.4; }
    to { transform: translateX(0); opacity: 1; }
}
/* BOTONES DIVIDIDOS EXACTAMENTE 50/50 EN EL MISMO RENGLÓN */
body.modo-caja .btn-mitad {
    flex: 1 !important; 
    width: 50% !important;
    height: 55px !important; 
    border-radius: 8px !important; 
    font-size: 16px !important; 
    font-weight: bold !important;
    border: none !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
}
/* UN SOLO ALTO PARA LA BARRA DE ABAJO DEL ARMADO. ATRÁS, GUARDAR y los
   cuadritos miden exactamente lo mismo en TODAS las ventanas: antes ATRÁS
   medía 75 px en las ventanas de caminar (venía de `.btn-tg` de tablet) y
   55 px en las de guardar, y se notaba el salto al cambiar de pantalla. */
body.modo-caja { --alto-barra-armado: 55px; }
body.modo-caja.modo-tablet { --alto-barra-armado: 75px; }
body.modo-caja .zona-fija-bottom .btn-mitad,
body.modo-caja .zona-fija-bottom .btn-ancho-total,
body.modo-caja .zona-fija-bottom .btn-cuadro-barra {
    height: var(--alto-barra-armado) !important;
    min-height: var(--alto-barra-armado) !important;
}
/* CUADRITOS DE LA BARRA (PC / CAJA): mismo tamaño entre ellos, en todas las
   ventanas y en los dos aparatos, y la MISMA altura que GUARDAR y ATRÁS. Van a
   la izquierda; ATRÁS se queda en el extremo derecho. Los botones grandes ceden
   un poco de letra para que quepan todos en el mismo renglón.
   PC va claro con borde, igual que el botón del panel: es una puerta, no una
   acción, y el fucsia se estaba peleando con todo lo demás. CAJA se queda en
   verde oscuro porque es el que lleva a cobrar. */
body.modo-caja .btn-cuadro-barra {
    flex: 0 0 auto !important;
    /* Cuadrados de verdad en el teléfono: el ancho sigue al alto de la barra. */
    width: var(--alto-barra-armado) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: bold !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
body.modo-caja .btn-cuadro-barra.cuadro-panel {
    background-color: #FFFFFF !important;
    color: #0b4f2a !important;
    border: 2px solid #A5D6A7 !important;
    box-shadow: none !important;
}
body.modo-caja .btn-cuadro-barra.cuadro-panel:active {
    background-color: #C8E6C9 !important;
    border-color: #128C7E !important;
    transform: scale(0.97) !important;
}
body.modo-caja .btn-cuadro-barra.cuadro-caja { background-color: #128C7E !important; }
body.modo-caja .btn-cuadro-barra.cuadro-caja:active {
    background-color: #075E54 !important;
    transform: scale(0.97) !important;
}
/* Tablet: los dos cuadritos miden igual y quedan más cuadrados que antes (el
   del panel pasó de 200 px de ancho a 110 y el nombre completo cabe en dos
   líneas). Va después de los colores para que no lo pise el tamaño de letra. */
body.modo-caja.modo-tablet .btn-cuadro-barra {
    width: 110px !important;
    font-size: 14px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    padding: 0 6px !important;
}
/* Los cuadritos van pegados a la izquierda. El botón grande (ATRÁS, GUARDAR,
   VER MI MENÚ CREADO) es el que se estira y ocupa todo lo que sobra, así que
   queda en el extremo derecho sin necesidad de separarlos con space-between
   (que, en el menú principal con el menú vacío, dejaba los dos cuadritos en
   esquinas opuestas). */
body.modo-caja .zona-fija-bottom.zona-con-atajo {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
/* Con los cuadritos al lado, GUARDAR y ATRÁS se hacen más chicos (ellos son los
   que ceden el ancho) y la letra baja para que la palabra siga entrando. */
body.modo-caja .zona-fija-bottom.zona-con-atajo .btn-mitad {
    font-size: 13px !important;
    line-height: 1.1 !important;
    padding: 0 6px !important;
    text-align: center !important;
}
body.modo-caja.modo-tablet .zona-fija-bottom.zona-con-atajo .btn-mitad {
    font-size: 15px !important;
}
body.modo-caja .zona-fija-bottom.zona-con-atajo .btn-ancho-total {
    width: auto !important;
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
}
/* La palabra del botón GUARDAR vive en su propio span, para que cambiarla no
   se lleve por delante la mano que está al lado (ver `ponerTextoGuardar`). */
body.modo-caja #btn-guardar-onboarding .texto-guardar {
    min-width: 0;
}

/* LA MANO QUE INVITA A TOCAR GUARDAR
   Va AL LADO DE LA PALABRA, no encima. Antes en el teléfono era absoluta y
   pegada al borde derecho del botón, y ahí estaba el problema que encontró
   Camiones el 26-08: con la barra de cuatro botones (PC · CAJA · GUARDAR ·
   ATRÁS) el botón queda estrecho, así que la mano caía sobre la palabra y no se
   distinguía. Ahora camina con el texto en los dos aparatos, que es lo que ya
   se hacía en tablet desde la v84 y funcionaba. */
body.modo-caja #manita-guardar {
    position: static;
    margin-left: 6px;
    width: 26px;
    height: 26px;
    transform: none;
    flex: 0 0 auto;
}
body.modo-caja #manita-guardar .manita-svg {
    position: static;
    width: 26px;
    height: 26px;
}
body.modo-caja.modo-tablet #manita-guardar {
    margin-left: 8px;
    width: 34px;
    height: 34px;
}
body.modo-caja.modo-tablet #manita-guardar .manita-svg {
    width: 34px;
    height: 34px;
}
/* Mientras hay algo sin guardar, la PALABRA va de blanco a negro y de vuelta,
   despacio (2,6 s la vuelta completa): se nota, pero no es una discoteca. El
   verde del botón no se toca. Al guardar se quita la clase y vuelve a blanca. */
body.modo-caja .btn-guardar-verde.guardar-llamando {
    animation: guardar-llama-la-vista 2.6s ease-in-out infinite;
}
@keyframes guardar-llama-la-vista {
    0%, 100% { color: #FFFFFF; }
    50% { color: #111111; }
}

/* Aviso de "todavía no se puede abrir la caja": explica y da la salida. */
body.modo-caja .aviso-elegir-detalle {
    font-size: 16px;
    line-height: 1.45;
    color: #333;
    margin: 0 0 16px 0;
}
body.modo-caja .aviso-btn-naranja {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 10px;
    background-color: #F57C00;
    color: #000000;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
body.modo-caja .aviso-btn-naranja:active {
    background-color: #E65100;
    transform: scale(0.98);
}
body.modo-caja .aviso-cerrar-gris {
    margin-top: 12px;
    width: 100%;
    height: 44px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: #FAFAFA;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

/* El color de la palabra va SIN !important: si no, la animación de "todavía no
   guardaste" no puede cambiarla (una declaración !important le gana siempre a
   una animación). */
body.modo-caja .btn-guardar-verde { background-color: #25D366 !important; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }
body.modo-caja .btn-guardar-verde:active { background-color: #128C7E !important; transform: scale(0.98) !important; }
body.modo-caja .btn-atras-gris { background-color: #DCF8C6 !important; color: #075E54 !important; border: 1px solid #25D366 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
body.modo-caja .btn-atras-gris:active { background-color: #C1ECA6 !important; transform: scale(0.98) !important; }
/* MOSTRAR MÁS (NARANJA) Y MODAL RECETA */
body.modo-caja .btn-mostrar-mas {
    background-color: #F57C00 !important; color: white !important; border: none !important; border-radius: 8px !important;
    font-size: 16px !important; font-weight: bold !important; padding: 15px !important; width: 100% !important; margin-bottom: 5px !important;
    cursor: pointer !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
body.modo-caja .btn-mostrar-mas:active { background-color: #E65100 !important; transform: scale(0.98) !important; }
body.modo-caja .modal-fondo {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 99999; display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
body.modo-caja .modal-cuerpo {
    background: #FFF; width: 100%; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
/* [SALÓN-32] Renglones del modal de cobro dividido: etiqueta a la izquierda,
   monto a la derecha (a diferencia de `.caja-dinero`, que es de ancho fijo
   pensado solo para precios de producto). */
body.modo-caja .fila-pago-cobro {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
}
body.modo-caja .fila-pago-cobro > span { font-size: 15px; font-weight: bold; color: #333; flex-shrink: 0; }
body.modo-caja .fila-pago-cobro > .caja-dinero-ancha {
    display: flex; align-items: center; border: 1px solid #CCC; border-radius: 6px;
    background: #FAFAFA; padding-left: 10px; width: 130px; flex-shrink: 0;
}
body.modo-caja .fila-pago-cobro > .caja-dinero-ancha input {
    border: none; background: transparent; width: 100%; padding: 10px;
    text-align: right; font-size: 16px; font-weight: bold; outline: none;
}
/* [SALÓN-31] Lista de alertas de inventario (agotado / bajo stock). */
body.modo-caja .fila-alerta-stock {
    display: flex; justify-content: space-between; background: #FFF; border-radius: 8px;
    padding: 10px 12px; margin-bottom: 8px; border-left: 5px solid #DC3545; font-weight: bold; color: #333;
}
body.modo-caja .fila-alerta-stock.bajo-stock { border-left-color: #F57C00; }
body.modo-caja .fila-alerta-stock span:last-child { color: #666; font-weight: normal; }

/* Selector U / kg / lb al poner precios */
body.modo-caja .sel-unidad {
    display: flex;
    flex-shrink: 0;
    border: 1px solid #CCC;
    border-radius: 8px;
    overflow: hidden;
    background: #FAFAFA;
}
body.modo-caja .sel-unidad-btn {
    border: none;
    background: transparent;
    color: #555;
    font-weight: bold;
    font-size: 12px;
    padding: 8px 7px;
    min-width: 28px;
    cursor: pointer;
}
body.modo-caja .sel-unidad-btn.activo {
    background: #017B45;
    color: #fff;
}

/* Stepper de peso: −  [amarillo]  +  ?  (dueño y cliente) */
body.modo-caja .stepper-peso-fondo,
body.modo-comida-cliente .stepper-peso-fondo,
.stepper-peso-fondo {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(40, 40, 40, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.modo-caja .stepper-peso-caja,
body.modo-comida-cliente .stepper-peso-caja,
.stepper-peso-caja {
    background: #FFF;
    border-radius: 14px;
    padding: 20px 18px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    text-align: center;
}
.stepper-peso-titulo { font-size: 18px; font-weight: bold; color: #222; margin-bottom: 4px; }
.stepper-peso-precio { font-size: 14px; color: #017B45; font-weight: bold; margin-bottom: 16px; }
.stepper-peso-fila {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 10px;
}
.stepper-peso-circ {
    width: 52px; height: 52px; border-radius: 50%; border: none;
    background: #017B45; color: #fff; font-size: 30px; font-weight: bold;
    line-height: 1; cursor: pointer; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(1, 123, 69, 0.35);
}
.stepper-peso-circ:active { transform: scale(0.95); background: #015F35; }
/* El número y la medida van juntos y CENTRADOS en el amarillo, de lado a lado y
   de arriba abajo. Iban alineados por la línea de escritura (`baseline`), y eso
   los subía; y la casilla del número tenía ancho fijo, lo que además los
   empujaba hacia la derecha. */
.stepper-peso-centro {
    flex: 1; min-width: 0; background: #FFD54F; border-radius: 12px;
    padding: 8px 14px; display: flex; flex-direction: row;
    align-items: center; justify-content: center; gap: 10px;
    border: 2px solid #F9A825; min-height: 64px;
}
.stepper-peso-input {
    flex: 0 1 auto; width: 2.6ch; max-width: 45%; min-width: 1.4em;
    border: none; background: transparent;
    text-align: center; font-size: 36px; font-weight: 900; color: #000;
    outline: none; line-height: 1;
}
/* La medida (g / kg / lb) SIN cuadro ni borde: solo la letra, grande, para que
   se vea la k y la g. Antes era un botón enmarcado y el marco tapaba la letra. */
.stepper-peso-unidad {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 32px;
    font-weight: 900;
    color: #111;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    text-transform: lowercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.stepper-peso-unidad:active {
    opacity: 0.55;
    transform: scale(0.94);
}
.stepper-peso-ayuda {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid #017B45;
    background: #fff; color: #017B45; font-size: 18px; font-weight: bold;
    cursor: pointer; flex-shrink: 0;
}
.stepper-peso-ejemplo { font-size: 14px; color: #444; margin-bottom: 14px; }
/* AGREGAR y Cancelar: botones anchos y altos, que se vean de lejos. */
.stepper-peso-agregar {
    width: 100%; background: #017B45; color: #fff; border: none;
    border-radius: 10px; font-family: inherit; font-size: 21px; font-weight: 900;
    min-height: 62px; padding: 16px; cursor: pointer; margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.stepper-peso-agregar:active { background: #015F35; }
.stepper-peso-cancelar {
    width: 100%; background: transparent; color: #666; border: none;
    font-family: inherit; font-size: 18px; font-weight: bold;
    min-height: 52px; padding: 14px; cursor: pointer;
}
/* En tablet cabe todo más grande: la ventanita se ensancha y con ella los
   botones, el número y el nombre del producto. */
body.modo-tablet .stepper-peso-caja {
    max-width: 560px;
    padding: 26px 26px 22px;
}
body.modo-tablet .stepper-peso-titulo { font-size: 24px; }
body.modo-tablet .stepper-peso-precio { font-size: 17px; }
body.modo-tablet .stepper-peso-centro { min-height: 78px; }
body.modo-tablet .stepper-peso-input { font-size: 44px; }
body.modo-tablet .stepper-peso-unidad { font-size: 38px; }
body.modo-tablet .stepper-peso-circ {
    width: 62px; height: 62px; font-size: 36px;
}
body.modo-tablet .stepper-peso-ejemplo { font-size: 16px; }
body.modo-tablet .stepper-peso-agregar { font-size: 24px; min-height: 70px; }
body.modo-tablet .stepper-peso-cancelar { font-size: 20px; min-height: 58px; }

/* Aviso: no abrir la caja sin haber elegido productos */
body.modo-caja .aviso-elegir-fondo {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(40, 40, 40, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
body.modo-caja .aviso-elegir-caja {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px 22px 20px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body.modo-caja .aviso-elegir-texto {
    font-size: 21px;
    font-weight: bold;
    color: #333;
    line-height: 1.35;
    margin: 4px 0 24px;
}
/* La ayuda del peso: dos frases, con letra grande y a la izquierda. */
body.modo-caja .ayuda-peso-texto,
.ayuda-peso-texto {
    font-size: 20px;
    text-align: left;
    line-height: 1.4;
}
body.modo-tablet #aviso-ayuda-peso .aviso-elegir-caja { max-width: 480px; }
body.modo-tablet.modo-caja .ayuda-peso-texto,
body.modo-tablet .ayuda-peso-texto { font-size: 23px; }
/* CERRAR de los avisos: era el botón gris chiquito del navegador y no se veía.
   Ahora es un botón ancho, del alto de un dedo. */
.aviso-elegir-cerrar {
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
    padding: 14px;
    background: #FFFFFF;
    color: #0b4f2a;
    border: 2px solid #A5D6A7;
    border-radius: 10px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 900;
    cursor: pointer;
}
.aviso-elegir-cerrar:active { background: #C8E6C9; }
body.modo-tablet .aviso-elegir-cerrar { font-size: 21px; min-height: 62px; }
body.modo-caja .aviso-elegir-accion {
    position: relative;
    width: 100%;
}
body.modo-caja .aviso-elegir-productos-aqui {
    width: 100%;
    min-height: 58px;
    background: #075E54;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 900;
    padding: 15px 58px 15px 16px;
    cursor: pointer;
    letter-spacing: 0.2px;
}
body.modo-caja .aviso-elegir-productos-aqui:active {
    background: #054C44;
    transform: scale(0.98);
}
/* Mano fabricada en SVG: baja y toca el botón una y otra vez. */
body.modo-caja .aviso-manita {
    position: absolute;
    z-index: 2;
    right: 7px;
    top: -29px;
    width: 52px;
    height: 58px;
    pointer-events: none;
    transform-origin: 50% 100%;
    animation: aviso-manita-tocar 1.25s ease-in-out infinite;
}
body.modo-caja .aviso-manita svg {
    display: block;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.22));
}
body.modo-caja .aviso-manita-rayos {
    position: absolute;
    right: 18px;
    bottom: 1px;
    width: 8px;
    height: 8px;
    border: 3px solid #FFD600;
    border-radius: 50%;
    opacity: 0;
    animation: aviso-manita-rayos 1.25s ease-in-out infinite;
}
@keyframes aviso-manita-tocar {
    0%, 35%, 100% { transform: translateY(-5px) rotate(-5deg); }
    50%, 62% { transform: translateY(5px) rotate(0deg) scale(0.94); }
}
@keyframes aviso-manita-rayos {
    0%, 42%, 72%, 100% { opacity: 0; transform: scale(0.3); }
    52%, 62% { opacity: 1; transform: scale(1); }
}
/* ============================================================================== [ID-27-F] CSS MODO TABLET (base) ====
   El layout de 3 columnas vive más abajo (#contenedor-caja). Aquí solo
   padding y tipografía de botones; ya no se usa el grid 35%/65% del body
   (apretaba el ticket y cortaba los nombres a una letra). */
body.modo-caja.modo-tablet {
    padding: calc(10px + var(--safe-top)) calc(8px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(8px + var(--safe-left));
}
body.modo-caja.modo-tablet #btn-cobrar {
    width: 100%;
    height: 75px;
    font-size: 24px;
    margin-left: 0;
}
body.modo-caja.modo-tablet .btn-tg {
    height: 75px;
    font-size: 15px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

/* ==========================================================================
   AÑADIDO AL MUDAR LA CAJA DENTRO DE teleCHAT
   (esto no venía del archivo original)
   ========================================================================== */

/* El cascarón de teleCHAT pinta un degradado azul con `background-image`.
   El `background-color` crema de la caja queda DEBAJO de ese degradado, así que
   sin apagarlo la caja se veía oscura aunque el color fuera el correcto.
   (Este fallo se coló en la primera prueba: el color computado era el bueno,
   pero en pantalla se veía azul. Se descubrió mirando la captura.) */
body.modo-caja {
    background-image: none !important;
}

/* La caja ocupa toda la pantalla, igual que cuando era una app aparte. */
body.modo-caja #contenedor-caja {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Barra de arriba con el botón para volver al menú de negocios.

   Va FIJA y por encima de todo (z-index alto) a propósito: la pantalla de
   categorías de la caja es una capa que ocupa todo (`#onboarding-container`,
   z-index 1000) y, si no, tapaba el botón de salida. Ese era exactamente el
   problema de "entro a la caja y no puedo salir". */
body.modo-caja #barra-caja {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Ya no es una franja: es solo el botón de salir, arriba a la DERECHA y
       sobre fondo transparente. Sin título ni barra se recuperan unos treinta
       píxeles de alto, que en una tablet cobrando se notan.

       `--seguro-arriba` es la medida que sí actualiza el cascarón; antes esto
       usaba `--safe-top`, que se quedaba en cero, y la barra se pegaba al
       borde por encima de los botones de Telegram. */
    justify-content: flex-end;
    background: transparent;
    border-bottom: none;
    padding: calc(4px + var(--seguro-arriba)) 14px 0 14px;
    pointer-events: none;   /* deja pasar los toques al contenido de debajo */
}

body.modo-caja #btn-salir-caja {
    width: 130px;
    flex-shrink: 0;
    pointer-events: auto;   /* el botón sí se toca */
}

/* --------------------------------------------------------------------------
   EN EL TELÉFONO: teleCHAT y COBRAR en el mismo renglón

   teleCHAT ocupa un cuarto y COBRAR el resto. COBRAR es el botón que se toca
   cien veces al día; teleCHAT casi nunca. Darle una fila entera para él solo
   era regalarle pantalla a lo que menos se usa.

   En la tablet esto no aplica: allí sigue flotando arriba a la derecha.
   -------------------------------------------------------------------------- */
body.modo-caja:not(.modo-tablet) #header-caja #btn-salir-caja {
    flex: 0 0 24%;
    width: auto;
    height: auto;
    min-height: 62px;
    margin: 0;
    font-size: 14px;
    padding: 8px 6px;
}

body.modo-caja:not(.modo-tablet) #header-caja #btn-cobrar {
    flex: 1;
}

/* Cuando el botón se muda al renglón de COBRAR, la barra de arriba queda
   vacía: se recoge para no dejar un hueco muerto en el teléfono. */
body.modo-caja #barra-caja:empty {
    display: none;
}
body.modo-caja:not(.modo-tablet) #contenedor-caja:has(#barra-caja:empty) {
    padding-top: var(--seguro-arriba);
}

/* Solo lo justo para que el botón de salir no tape el contenido. */
body.modo-caja #contenedor-caja {
    padding-top: calc(44px + var(--seguro-arriba));
}

/* La capa de categorías también tiene que empezar por debajo del botón. */
body.modo-caja #onboarding-container {
    padding-top: calc(48px + var(--seguro-arriba)) !important;
}
/* Teléfono: menú deja sitio a teleCHAT ›; en precios (sin ese botón) sube más. */
body.modo-caja:not(.modo-tablet) #onboarding-container {
    padding-top: calc(40px + var(--seguro-arriba)) !important;
}
/* Precios y subtipos: franja fija más arriba, cerca de Cerrar/minimizar. */
body.modo-caja:not(.modo-tablet) #onboarding-container:has(.pantalla-precios-foto3),
body.modo-caja:not(.modo-tablet) #onboarding-container:has(.franja-fija-onboarding) {
    padding-top: calc(4px + var(--seguro-arriba)) !important;
}
body.modo-caja.modo-tablet #onboarding-container:has(.pantalla-precios-foto3),
body.modo-caja.modo-tablet #onboarding-container:has(.franja-fija-onboarding) {
    padding-top: calc(8px + var(--seguro-arriba)) !important;
}
body.modo-caja:not(.modo-tablet) .cabecera-precios-foto3 .cab-precios-titulo {
    font-size: 14px;
}
body.modo-caja:not(.modo-tablet) .cabecera-precios-foto3 .cab-precios-titulo-compacto {
    font-size: 11px;
}


/* --------------------------------------------------------------------------
   PANTALLA DE VENTA DE TRES COLUMNAS (tablet)
   Ticket · GRUPOS · variantes del grupo elegido
   -------------------------------------------------------------------------- */
/* El diseño original ponía la cuadrícula en el <body>. Al mudar la caja a
   teleCHAT los elementos pasaron a vivir dentro de `#contenedor-caja`, así que
   la cuadrícula tiene que estar aquí o no los coloca. */
body.modo-caja.modo-tablet {
    display: flex !important;
    flex-direction: column !important;
}

body.modo-caja.modo-tablet #contenedor-caja {
    display: grid;
    /* Ticket ~mitad del ancho; tasas arriba a la derecha; categorías/productos abajo. */
    grid-template-columns: minmax(380px, 1.15fr) minmax(140px, 0.45fr) minmax(220px, 1fr);
    grid-template-rows: auto 1fr auto auto;
    gap: 8px;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Cinta del ejemplo (solo con un ejemplo cargado). Lleva el nombre del
   negocio de mentira y, en teléfono, la salida: es la única franja que se ve
   siempre, y sin ella no habría por dónde volver a la caja de verdad. */
body.modo-caja #cinta-modo-ejemplo {
    display: none;
    background: #111;
    color: #FFD600;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 8px 10px;
    border-bottom: 4px solid #FFD600;
    text-transform: uppercase;
}
body.modo-caja.modo-ejemplo-caja #cinta-modo-ejemplo {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.modo-caja #cinta-modo-ejemplo .cinta-ejemplo-rotulo {
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.2;
}
body.modo-caja #cinta-modo-ejemplo .cinta-ejemplo-salir {
    flex: 0 0 auto;
    background: #FFD600;
    color: #111;
    border: none;
    border-radius: 8px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 8px 16px;
    min-height: 40px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja #cinta-modo-ejemplo .cinta-ejemplo-salir:active {
    background: #F1C40F;
    transform: scale(0.97);
}
/* En tablet la salida grande vive abajo, en el hueco entre COBRAR y el pie. */
body.modo-caja.modo-tablet #cinta-modo-ejemplo .cinta-ejemplo-salir {
    display: none;
}

/* Lista de ejemplos dentro del panel: cada botón es un negocio distinto. */
body.modo-caja .btn-ejemplo-negocio {
    display: block;
    width: 100%;
    text-align: left;
    background: #FFF;
    border: 2px solid #075E54;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja .btn-ejemplo-negocio:active {
    background: #E8F5E9;
    transform: scale(0.99);
}
body.modo-caja .btn-ejemplo-negocio .ejemplo-nombre {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: #075E54;
    line-height: 1.25;
}
body.modo-caja .btn-ejemplo-negocio .ejemplo-detalle {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    line-height: 1.3;
}
/* Botón salir: oculto salvo tablet + modo ejemplo, en el hueco del centro. */
body.modo-caja #barra-salir-ejemplo {
    display: none !important;
}
body.modo-caja.modo-tablet.modo-ejemplo-caja #barra-salir-ejemplo {
    display: flex !important;
    align-items: stretch;
    grid-column: 2;
    grid-row: 4;
    min-height: 75px;
    padding: 0;
    margin: 0;
}
body.modo-caja.modo-tablet.modo-ejemplo-caja #contenedor-caja {
    grid-template-rows: auto auto 1fr auto;
}
body.modo-caja.modo-tablet.modo-ejemplo-caja #cinta-modo-ejemplo {
    grid-column: 1 / -1;
    grid-row: 1;
}
body.modo-caja.modo-tablet.modo-ejemplo-caja #barra-tasas-caja {
    grid-row: 2;
}
body.modo-caja.modo-tablet.modo-ejemplo-caja #pantalla-medio {
    grid-row: 2 / span 2;
}
body.modo-caja.modo-tablet.modo-ejemplo-caja #grupos-container,
body.modo-caja.modo-tablet.modo-ejemplo-caja #teclado-container {
    grid-row: 3;
}
/* Misma fila: CANCELAR+COBRAR | SALIR (hueco) | PANEL */
body.modo-caja.modo-tablet.modo-ejemplo-caja #header-caja {
    grid-column: 1;
    grid-row: 4;
}
body.modo-caja.modo-tablet.modo-ejemplo-caja #pie-caja {
    grid-column: 3;
    grid-row: 4;
    justify-content: flex-end;
}
body.modo-caja .btn-salir-ejemplo {
    width: 100%;
    height: 100%;
    min-height: 75px;
    background: #FFD600;
    color: #111;
    border: 3px solid #111;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.4px;
    padding: 12px 10px;
    cursor: pointer;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja .btn-salir-ejemplo:active {
    transform: scale(0.98);
    background: #F1C40F;
}

/* COBRAR y las flechas ARRIBA, encima del ticket, igual que en el teléfono: un
   solo sitio para lo que mueve la plata, en los dos aparatos. El ticket ocupa
   entonces todo lo que queda de esa columna hasta abajo, así que el hueco que
   antes tenían los botones se lo lleva la lista de la venta. */
body.modo-caja.modo-tablet #header-caja {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
}
body.modo-caja.modo-tablet #pantalla-medio {
    grid-column: 1;
    grid-row: 2 / span 3;
    margin-bottom: 0;
    min-height: 0;
}
/* Sin el rótulo del grupo, la descripción es lo primero de su columna: se le
   quita el margen de arriba para que empiece en la misma raya que el ticket. */
body.modo-caja.modo-tablet #teclado-container > .ficha-variante-tablet:first-child {
    margin-top: 0;
}
/* Frutas y verduras: el cuadro se queda, blanco y sin nada escrito. Guarda el
   sitio (los botones no se suben) y es el espacio que Camiones quiere ocupar
   más adelante con algo suyo. */
body.modo-caja.modo-tablet .ficha-campo-vacia {
    background: #FFFFFF;
    border-color: #E3E6E8;
}

/* Tasas BCV / paralelo… en el hueco de arriba (centro + derecha). */
body.modo-caja.modo-tablet #barra-tasas-caja {
    grid-column: 2 / -1;
    grid-row: 1;
    align-self: start;
    padding: 4px 0 6px;
}

body.modo-caja.modo-tablet #grupos-container {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* panel y categorías anclados abajo */
    gap: 5px;
    overflow-y: auto;
    min-height: 0;
}
/* Título arriba; los botones quedan abajo y crecen hacia arriba. */
body.modo-caja.modo-tablet #grupos-container > .rotulo-columna {
    margin-bottom: auto;
    flex-shrink: 0;
}

body.modo-caja.modo-tablet #teclado-container {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    margin-top: 0;
    gap: 8px;
}
body.modo-caja.modo-tablet #teclado-container > .cabecera-productos {
    flex-shrink: 0;
    margin-bottom: 0;
}
/* Espacio de explicación: qué trae la opción elegida, arriba de los botones. */
body.modo-caja.modo-tablet .ficha-variante-tablet {
    flex: 1 1 auto;
    min-height: 120px;
    margin: 4px 0 10px;
    padding: 16px 14px;
    border-radius: 12px;
    background: #F4F6F6;
    border: 1px solid #D5D8DC;
    overflow-y: auto;
}
body.modo-caja.modo-tablet .ficha-variante-tablet.con-seleccion {
    background: #E8F5E9;
    border-color: #A5D6A7;
}
body.modo-caja.modo-tablet .ficha-variante-tablet .ficha-titulo {
    font-size: 22px;
    font-weight: 900;
    color: #075E54;
    margin-bottom: 8px;
}
body.modo-caja.modo-tablet .ficha-variante-tablet .ficha-rotulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #8A8A8A;
    margin-bottom: 4px;
}
body.modo-caja.modo-tablet .ficha-variante-tablet .ficha-detalle {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    line-height: 1.35;
    white-space: pre-wrap;
}
body.modo-caja.modo-tablet .ficha-variante-tablet .ficha-precio {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 900;
    color: #075E54;
}
body.modo-caja.modo-tablet .ficha-variante-tablet .ficha-vacia {
    font-size: 16px;
    font-weight: 600;
    color: #667;
    line-height: 1.4;
}
/* Productos abajo (foto 2); la explicación ocupa el hueco de arriba. */
body.modo-caja.modo-tablet .rejilla-productos-tablet {
    margin-top: 0;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
    align-content: end;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.activo {
    background: #128C7E !important;
    color: #fff !important;
    border-color: #0E6655 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Colores SOLO en caja tablet. Una familia = un color (sin dos verdes).
   fritos=naranja · rápida=azul · carnes=rojo · dulce=morado ·
   campo=amarillo · bebidas=celeste · extras=rosa · otro=gris */
body.modo-caja.modo-tablet .btn-grupo {
    display: grid;
    grid-template-columns: 1.4em minmax(0, 1fr) 1.8em;
    align-items: center;
    column-gap: 4px;
    padding: 8px 6px;
    font-size: 12px;
    min-height: 40px;
}
body.modo-caja.modo-tablet .btn-grupo .grp-num {
    font-weight: 900;
    text-align: right;
    opacity: 0.85;
}
body.modo-caja.modo-tablet .btn-grupo .grp-nombre {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
body.modo-caja.modo-tablet .btn-grupo .grp-cant {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    opacity: 0.9;
}
body.modo-caja.modo-tablet .btn-grupo.fam-fritos {
    background: #FFE0C2; color: #6B3E14; border-color: #E8B07A;
}
body.modo-caja.modo-tablet .btn-grupo.fam-fritos.activo {
    background: #E67E22; color: #fff; border-color: #CA6F1E;
}
body.modo-caja.modo-tablet .btn-grupo.fam-rapida {
    background: #D4E6F7; color: #1B4F72; border-color: #85C1E9;
}
body.modo-caja.modo-tablet .btn-grupo.fam-rapida.activo {
    background: #2874A6; color: #fff; border-color: #1A5276;
}
body.modo-caja.modo-tablet .btn-grupo.fam-carnes {
    background: #F5B7B1; color: #641E16; border-color: #E74C3C;
}
body.modo-caja.modo-tablet .btn-grupo.fam-carnes.activo {
    background: #C0392B; color: #fff; border-color: #922B21;
}
body.modo-caja.modo-tablet .btn-grupo.fam-dulce {
    background: #E8DAEF; color: #4A235A; border-color: #AF7AC5;
}
body.modo-caja.modo-tablet .btn-grupo.fam-dulce.activo {
    background: #8E44AD; color: #fff; border-color: #6C3483;
}
body.modo-caja.modo-tablet .btn-grupo.fam-campo {
    background: #FCF3CF; color: #7D6608; border-color: #F7DC6F;
}
body.modo-caja.modo-tablet .btn-grupo.fam-campo.activo {
    background: #D4AC0D; color: #1C1600; border-color: #B7950B;
}
body.modo-caja.modo-tablet .btn-grupo.fam-bebidas {
    background: #D4E6F1; color: #1A5276; border-color: #7FB3D5;
}
body.modo-caja.modo-tablet .btn-grupo.fam-bebidas.activo {
    background: #2471A3; color: #fff; border-color: #1A5276;
}
/* Bebidas = azul. Campo = amarillo. Nada de dos verdes. */
body.modo-caja.modo-tablet .btn-grupo.fam-extras {
    background: #FADBD8; color: #78281F; border-color: #F1948A;
}
body.modo-caja.modo-tablet .btn-grupo.fam-extras.activo {
    background: #E74C3C; color: #fff; border-color: #B03A2E;
}
body.modo-caja.modo-tablet .btn-grupo.fam-otro {
    background: #E5E8E8; color: #2C3E50; border-color: #BFC9CA;
}
body.modo-caja.modo-tablet .btn-grupo.fam-otro.activo {
    background: #717D7E; color: #fff; border-color: #565656;
}

body.modo-caja.modo-tablet .rejilla-productos-tablet {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg {
    /* Más grandes: cabe el precio debajo del nombre y el sitio estaba libre. */
    min-height: 80px;
    font-size: 14px;
    padding: 8px 6px;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-fritos {
    background: #FFF3E6; color: #6B3E14; border-color: #E8B07A;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-rapida {
    background: #EBF5FB; color: #1B4F72; border-color: #AED6F1;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-carnes {
    background: #FDEDEC; color: #641E16; border-color: #F5B7B1;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-dulce {
    background: #F5EEF8; color: #4A235A; border-color: #D7BDE2;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-campo {
    background: #FEF9E7; color: #7D6608; border-color: #F9E79F;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-bebidas {
    background: #EBF5FB; color: #1A5276; border-color: #AED6F1;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-extras {
    background: #FDEDEc; color: #78281F; border-color: #F5B7B1;
}
body.modo-caja.modo-tablet .rejilla-productos-tablet .btn-tg.fam-otro {
    background: #FAFAFA; color: #333; border-color: #D9D9D9;
}

/* Barra EXTRA (tablet): papas, salsas… cuando miras Comida rápida */
body.modo-caja.modo-tablet .barra-extras-tablet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 0 4px;
    flex-shrink: 0;
}
body.modo-caja.modo-tablet .barra-extras-tablet .rotulo-columna {
    width: 100%;
    margin-bottom: 0;
}
body.modo-caja.modo-tablet .btn-extra {
    background: #FADBD8;
    color: #7B241C;
    border: 1px solid #F5B7B1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 14px;
    min-height: 48px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja.modo-tablet .btn-extra:active {
    transform: scale(0.97);
    background: #F1948A;
}

/* Abajo a la derecha, lejos del dedo que cobra. */
body.modo-caja.modo-tablet #pie-caja {
    grid-column: 2 / -1;
    grid-row: 4;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}
/* Con tres botones ahí abajo (ÑAPA, PEDIDOS y PANEL DE CONTROL) los 240 px
   fijos no caben en cualquier tablet: se dejan ceder sin cambiar de sitio. */
body.modo-caja.modo-tablet #pie-caja .btn-pie {
    min-width: 120px;
    flex-shrink: 1;
}
/* ÑAPA es el más chico de los tres: es el que menos se toca. */
body.modo-caja .btn-napa {
    flex-direction: column;
    gap: 0;
    width: 92px;
    min-width: 74px;
    flex: 0 1 92px;
    line-height: 1.05;
}
body.modo-caja .btn-napa .napa-letra {
    font-size: 19px;
    font-weight: 900;
}
body.modo-caja .btn-napa small {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
}
/* Encendida = la caja está esperando a que toques el producto que regalas. */
body.modo-caja .btn-napa.napa-encendida {
    background-color: #FFF3E0 !important;
    border-color: #F57C00 !important;
    color: #7A4A00 !important;
    box-shadow: 0 0 0 2px #F57C00;
}
body.modo-caja.modo-tablet .btn-tasa {
    font-size: 14px;
    padding: 12px 14px;
}
/* ATRÁS y la navegación de abajo: SIEMPRE el mismo tamaño y el mismo sitio,
   en todas las pantallas. Es una norma fija para que el dedo la aprenda. */
body.modo-caja .btn-pie {
    min-width: 240px;
    width: 240px;
    height: 56px;
    flex-shrink: 0;
}

/* Los botones del panel, en columna pegada al panel blanco. */
body.modo-caja .btn-columna {
    width: 100%;
    height: auto;
    min-height: 54px;
    flex-shrink: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: 10px 8px;
}

/* Los rótulos pequeños que encabezan cada columna. */
body.modo-caja .rotulo-columna {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8A8A8A;
    margin-bottom: 2px;
    flex-shrink: 0;
}
body.modo-caja .cabecera-productos {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

/* Botones de grupo (columna del centro).

   VERDES SIEMPRE, no solo el elegido. Así, de un vistazo, se distingue la
   columna del centro (grupos: AREPAS, EMPANADAS) de la de la derecha
   (variantes: QUESO, CARNE), que va en blanco.

   Como el verde ya no puede señalar cuál está elegido, el que está activo se
   marca con un verde más oscuro y una barrita blanca a la izquierda. */
body.modo-caja .btn-grupo {
    background: #25D366;
    color: #FFFFFF;
    border: 1px solid #25D366;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 8px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease;
}
body.modo-caja .btn-grupo:active { transform: scale(0.98); }

/* El elegido: TODO el botón oscuro, sin barritas ni bordes de otro color. */
body.modo-caja .btn-grupo.activo {
    background: #128C7E;
    border-color: #128C7E;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

/* La columna de grupos solo existe en tablet. */
body.modo-caja:not(.modo-tablet) #grupos-container,
body.modo-caja:not(.modo-tablet) #pie-caja {
    display: none !important;
}


/* --------------------------------------------------------------------------
   EL TOTAL: ABAJO Y SIEMPRE VISIBLE

   Va al fondo del panel blanco, no arriba. Dos razones:
     · Quien cobra mira hacia abajo, no hacia arriba.
     · Quien usa lentes bifocales tiene el aumento de cerca en la parte baja
       del cristal, así que un número abajo le cuesta menos leerlo.

   Y se ve SIEMPRE, aunque marque cero: si solo apareciera al tocar algo, nadie
   adivinaría dónde va a salir el precio.

   La línea va ENCIMA del total y es muy tenue: separa sin hacer ruido.
   -------------------------------------------------------------------------- */
body.modo-caja #pantalla-medio {
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* la que hace scroll es la lista, no el panel entero */
}

/* Ticket: crece hacia arriba desde el Total (lo nuevo queda cerca de COBRAR).
   column-reverse + flex-start = el primer ítem del DOM (el último agregado)
   se pega abajo, encima del Total. */
body.modo-caja #lista-pedido {
    flex: 1;
    min-height: 0;
    padding-left: 9px;
    padding-right: 9px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    /* Misma escala que el Total: cantidad, nombre y precio legibles. */
    font-size: 26px;
    line-height: 1.25;
}

/* Pantallas de lectura (panel: explicación de botones, cuadre, ejemplos):
   se leen de arriba hacia abajo, así que la columna va derecha y el título se
   queda pegado arriba mientras el texto sube con el dedo. */
body.modo-caja #lista-pedido.lista-lectura {
    flex-direction: column;
    justify-content: flex-start;
    font-size: 16px;
    line-height: 1.5;
}
body.modo-caja #lista-pedido.lista-lectura .titulo-panel,
body.modo-caja #lista-pedido.lista-lectura .titulo-cerrada {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
    margin-top: 0;
    padding: 6px 0 10px 0;
}
body.modo-caja #lista-pedido.lista-lectura .texto-panel-grande {
    margin-top: 0;
}

/* El Total a la izquierda y el botón de la moneda en el hueco de la derecha
   (v86): ahí sobraba sitio y el ticket recupera el renglón que se llevaba la
   barra de tasas. */
body.modo-caja #total-vivo-container {
    flex-shrink: 0;
    margin-top: 12px;
    margin-bottom: 0;
    padding-top: 14px;
    padding-bottom: 0;
    font-size: 30px;
    border-bottom: none;
    border-top: 1px solid #EFE9E2;   /* la línea casi invisible */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
body.modo-caja #total-vivo-container .total-cifra {
    min-width: 0;
    flex: 1 1 auto;
}

/* En tablet el ticket y los botones de categoría/producto van más grandes.
   Los −/+ del ticket un poco más chicos para dejar sitio al nombre. */
body.modo-caja.modo-tablet #lista-pedido {
    font-size: 24px;
}
/* Cuatro columnas, no cinco: cantidad · nombre · −/+ · monto. La quinta era del
   signo de la moneda, que se quitó de cada renglón en la v87, y desde entonces
   dejaba un hueco vacío de 4em a la derecha — por eso el precio se veía en el
   medio en vez de pegado al borde. */
body.modo-caja.modo-tablet .fila-ticket {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(4em, auto);
    column-gap: 8px;
    padding: 8px 11px 8px 15px;
}
body.modo-caja.modo-tablet .ticket-paso {
    width: 38px;
    height: 38px;
    font-size: 22px;
    border-radius: 10px;
}
body.modo-caja.modo-tablet .ticket-moneda {
    font-size: 0.9em;
}
body.modo-caja.modo-tablet .ticket-monto {
    font-size: 0.95em;
    min-width: 4em;
}
body.modo-caja.modo-tablet .rotulo-columna {
    font-size: 13px;
}
/* Tamaños chicos: ver reglas .btn-grupo / .rejilla-productos-tablet más arriba
   (para que quepan más grupos y productos sin tanto scroll). */


/* --------------------------------------------------------------------------
   CANCELAR Y COBRAR, DEL MISMO TAMAÑO

   Antes CANCELAR salía pequeñito al lado de un COBRAR enorme y quedaba feo.
   Ahora se reparten el ancho por igual. Cuando no hay nada que cancelar,
   CANCELAR no está y COBRAR ocupa todo: así no queda un botón muerto.
   -------------------------------------------------------------------------- */
body.modo-caja #header-caja {
    gap: 10px;
}

/* COBRAR es el único botón grande de la pantalla: es el que mueve la plata, y
   así el ojo lo encuentra sin leer. Las flechas van al lado, chicas. */
body.modo-caja #btn-cobrar {
    flex: 1;
    margin-left: 0;
    min-height: 62px;
    font-size: 19px;
    padding: 12px 16px;
}
body.modo-caja.modo-tablet #btn-cobrar {
    height: 75px;
    font-size: 22px;
}

/* LAS DOS FLECHAS (deshacer · rehacer)
   Chicas, al lado de COBRAR y sin color fuerte: son la red de seguridad, no la
   acción principal. Llevan la palabra debajo porque una flecha sola no se
   entiende la primera vez, y esta caja la usa gente que nunca vio un
   "deshacer". Apagadas cuando no hay nada que deshacer: un botón que no puede
   hacer nada no debe verse igual que uno que sí. */
body.modo-caja #pasos-atras-caja {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
body.modo-caja #pasos-atras-caja.oculto { display: none !important; }
body.modo-caja #btn-deshacer,
body.modo-caja #btn-rehacer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 58px;
    min-height: 62px;
    padding: 4px 2px;
    background: #FFFFFF;
    color: #075E54;
    border: 2px solid #A5D6A7;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.modo-caja #btn-deshacer .flecha-paso,
body.modo-caja #btn-rehacer .flecha-paso {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}
body.modo-caja #btn-deshacer small,
body.modo-caja #btn-rehacer small {
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.02em;
}
body.modo-caja #btn-deshacer:active:not(:disabled),
body.modo-caja #btn-rehacer:active:not(:disabled) {
    background: #C8E6C9;
    border-color: #128C7E;
    transform: scale(0.95);
}
body.modo-caja #btn-deshacer:disabled,
body.modo-caja #btn-rehacer:disabled {
    background: #F1F3F4;
    color: #A8B0B5;
    border-color: #E0E3E5;
    cursor: default;
}
body.modo-caja.modo-tablet #btn-deshacer,
body.modo-caja.modo-tablet #btn-rehacer {
    height: 75px;
    width: 70px;
}

/* MIRANDO UNA ORDEN YA COBRADA
   Se ve distinto a propósito: si se viera igual que la venta viva, alguien
   cobraría dos veces la misma orden. COBRAR se esconde mientras se mira. */
body.modo-caja.mirando-atras #btn-cobrar { display: none !important; }
body.modo-caja .aviso-mirando-atras {
    background: #FFF8E1;
    border: 2px solid #F9A825;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}
body.modo-caja .mirando-atras-titulo {
    font-size: 17px;
    font-weight: 900;
    color: #8D6E00;
    margin-bottom: 2px;
}
body.modo-caja .mirando-atras-detalle {
    font-size: 13px;
    font-weight: 700;
    color: #6D5A00;
    margin-bottom: 10px;
}
body.modo-caja .mirando-atras-volver {
    width: 100%;
    min-height: 48px;
    background: #FFFFFF;
    color: #0b4f2a;
    border: 2px solid #A5D6A7;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}
body.modo-caja .mirando-atras-volver:active { background: #C8E6C9; }
/* La orden vieja no tiene −/+, así que su renglón es de tres columnas. */
body.modo-caja .fila-ticket-vieja {
    grid-template-columns: auto minmax(0, 1fr) minmax(3.4em, auto);
    opacity: 0.9;
}

body.modo-caja #btn-salir-caja {
    background: #FFFFFF;
    color: #075E54;
    border: 1px solid #25D366;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
body.modo-caja #btn-salir-caja:active {
    background: #DCF8C6;
    transform: scale(0.97);
}

body.modo-caja #titulo-caja {
    font-size: 15px;
    font-weight: bold;
    color: #075E54;
}

/* La colocación de la cuadrícula de tablet está TODA junta más arriba, en el
   bloque "PANTALLA DE VENTA DE TRES COLUMNAS". Aquí había una versión anterior
   de dos columnas que, por venir después en el archivo, ganaba y dejaba el
   teclado encima de la columna de grupos tapándola: no se podían tocar. */

/* Mientras se está en la caja, el cascarón azul se aparta del todo. */
body.modo-caja #cabecera,
body.modo-caja #pantalla,
body.modo-caja #barra-inferior,
body.modo-caja #boton-flotante,
body.modo-caja #barra-pendientes {
    display: none !important;
}


/* ==========================================================================
   AJUSTES DE COLOR PEDIDOS POR EL DUEÑO
   ========================================================================== */

/* MOSTRAR MÁS: se queda naranja, pero con las letras NEGRAS. Sobre naranja,
   el blanco se lee peor que el negro, sobre todo con sol o con la pantalla
   a poco brillo. */
body.modo-caja .btn-mostrar-mas {
    color: #000000 !important;
}

/* VER MI MENÚ CREADO: del mismo naranja que MOSTRAR MÁS y que los bordes de
   las categorías ya elegidas, con las letras negras.

   Va como clase y no como color en línea a propósito: antes se ponía con
   `style.backgroundColor` y perdía contra el `!important` del verde, así que
   el botón salía verde sin que nadie se diera cuenta. */
body.modo-caja .btn-naranja {
    background-color: #F57C00 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 4px 8px rgba(245, 124, 0, 0.35) !important;
}
body.modo-caja .btn-naranja:active {
    background-color: #E65100 !important;
}

/* Los precios que escribe el dueño, en NEGRO. Se veían en gris claro y con la
   pantalla a media luz no se distinguía lo que uno acababa de teclear.
   El "0" de ejemplo (cuando está vacío) se deja gris, para que se note que
   ahí todavía no hay nada escrito. */
body.modo-caja .caja-dinero input,
body.modo-caja .input-oz,
body.modo-caja .input-oz-manual,
body.modo-caja .input-precio-resumen,
body.modo-caja .fila-manual input[type="text"] {
    color: #000000;
}
body.modo-caja .caja-dinero input::placeholder,
body.modo-caja .input-oz::placeholder,
body.modo-caja .input-oz-manual::placeholder {
    color: #B0AAA2;
}

/* TOCADO Y TODAVÍA SIN GUARDAR: sombra ámbar alrededor del número, sin borde
   duro. Con el menú grande es lo que evita darse cuenta tarde de que faltó
   guardar. Se despinta al guardar. */
body.modo-caja .pantalla-precios-foto3 .caja-dinero.precio-tocado {
    background: #FFF2CC;
    box-shadow: inset 0 0 0 1px rgba(40, 40, 40, 0.14),
                0 0 0 3px rgba(245, 166, 35, 0.45);
}
body.modo-caja .pantalla-precios-foto3 .caja-dinero.precio-tocado:focus-within {
    box-shadow: inset 0 0 0 1.5px #25D366,
                0 0 0 3px rgba(245, 166, 35, 0.45);
}
body.modo-caja input.precio-tocado:not(.campo-precio-producto) {
    background: #FFF2CC;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.45);
}

/* ==========================================================================
   PEDIDOS DEL CLIENTE (botón con contador, y la lista)
   --------------------------------------------------------------------------
   El botón está siempre, aunque diga (0). Se pone fuerte SOLO cuando hay algo
   esperando: así el color no es adorno, significa "hay algo que atender ahora",
   que es la única razón para gastar un color fuerte en una pantalla donde el
   único que ya lo tiene es COBRAR.
   ========================================================================== */
body.modo-caja .btn-pedidos-esperando {
    background-color: #FF8C00 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
body.modo-caja .btn-pedidos-esperando:active {
    background-color: #E67E00 !important;
}

body.modo-caja .tarjeta-pedido {
    background: #FFFFFF;
    border: 2px solid #A5D6A7;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}
body.modo-caja .pedido-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
body.modo-caja .pedido-cliente { font-size: 17px; font-weight: 900; color: #075E54; }
body.modo-caja .pedido-total { font-size: 19px; font-weight: 900; color: #0b4f2a; white-space: nowrap; }
body.modo-caja .pedido-cuando { font-size: 12px; font-weight: 700; color: #777; margin-bottom: 8px; }
body.modo-caja .pedido-renglon {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    padding: 3px 0;
}
body.modo-caja .pedido-nota {
    background: #FFF8E1;
    border-radius: 6px;
    padding: 7px 9px;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #6D5A00;
}
body.modo-caja .pedido-botones { display: flex; gap: 8px; margin-top: 11px; }
body.modo-caja .pedido-aceptar,
body.modo-caja .pedido-cancelar {
    flex: 1;
    min-height: 46px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}
body.modo-caja .pedido-aceptar { background: #017B45; color: #fff; border: none; }
body.modo-caja .pedido-aceptar:active { background: #015F35; }
body.modo-caja .pedido-cancelar { background: #FFFFFF; color: #C62828; border: 2px solid #E57373; }
body.modo-caja .pedido-cancelar:active { background: #FFEBEE; }

/* LO QUE VE EL CLIENTE: se escribe y se comprueba en la misma pantalla. */
body.modo-caja .negocio-ayuda {
    font-size: 13.5px;
    font-weight: 600;
    color: #555;
    line-height: 1.4;
    margin: 4px 0 12px;
}
body.modo-caja .negocio-campo {
    display: block;
    font-size: 11.5px;
    font-weight: 900;
    color: #075E54;
    letter-spacing: 0.03em;
    margin-bottom: 12px;
}
body.modo-caja .negocio-campo input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    min-height: 48px;
    padding: 10px 12px;
    border: 2px solid #DDE1E3;
    border-radius: 8px;
    background: #FAFAFA;
    font-size: 16px;
    font-weight: bold;
    color: #222;
    outline: none;
}
body.modo-caja .negocio-campo input:focus { border-color: #128C7E; background: #FFF; }
body.modo-caja .negocio-horas { display: flex; gap: 10px; }
body.modo-caja .negocio-horas .negocio-campo { flex: 1; }
body.modo-caja .negocio-monedas {
    background: #F7F9F8;
    border: 2px solid #DDE1E3;
    border-radius: 8px;
    padding: 11px 12px;
    margin-bottom: 14px;
}
body.modo-caja .negocio-monedas-titulo {
    font-size: 11.5px;
    font-weight: 900;
    color: #075E54;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}
body.modo-caja .negocio-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 7px 0;
}
body.modo-caja .negocio-check input { width: 22px; height: 22px; }

/* ==========================================================================
   [SALÓN-41] PANTALLAS QUE TODAVÍA NO FUNCIONAN
   --------------------------------------------------------------------------
   Camiones pidió poder ver el sitio de un botón antes de que exista lo de
   abajo: se toca y explica qué va a hacer. Para que no haya duda de que
   todavía no hace nada, el aviso va en ámbar y bien arriba.
   ========================================================================== */
.aviso-por-hacer {
    margin: 4px 0 16px;
    padding: 12px 14px;
    background: #FFF4DC;
    border: 2px solid #F0A500;
    border-radius: 12px;
    color: #8A5A00;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.lista-por-hacer {
    margin: 4px 0 18px 22px;
    padding: 0;
}
.lista-por-hacer li {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: #444;
    font-weight: 600;
}