/* ═══════════════════════════════════════════════════════════════
   CORELLYSS · Terminal del bombero — hoja de estilo

   Escrita para que funcione en el motor más viejo que nos vamos a
   encontrar: el Chrome 62 que trae de fábrica un Sunmi V2 PRO de 2017.
   Eso descarta cosas que hoy se usan sin pensar, y conviene dejarlas
   escritas para no volver a meterlas por costumbre:

     · `gap` entre elementos flex   → Chrome 84. Se usa margen.
     · `clamp()`, `min()`, `max()`  → Chrome 79. Se usan medidas fijas.
     · `aspect-ratio`               → Chrome 88. Se usa relleno relativo.
     · `:focus-visible`             → Chrome 86. Se usa `:focus`.
     · `inset`, `:is()`, `:where()` → posteriores. Se escribe largo.

   Sí se usan y sí existen en 62: flexbox, grid con `grid-gap`,
   variables CSS, `position: sticky` y transiciones.

   El aparato vive bajo el techo de una estación: de día hay reflejo y de
   noche hay poca luz. Por eso el contenido va sobre fondo claro con
   contraste alto, y el color de marca se reserva para la cabecera y para
   lo único que el bombero tiene que encontrar sin mirar: el botón que
   completa la venta.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --marca: #7C4DFF;
    --marca-oscura: #5B2EE5;
    --tinta: #0F172A;
    --tinta-suave: #64748B;
    --tenue: #94A3B8;
    --borde: #E2E8F0;
    --fondo: #F1F5F9;
    --papel: #FFFFFF;
    --ok: #059669;
    --ok-fondo: #ECFDF5;
    --aviso: #B45309;
    --aviso-fondo: #FFFBEB;
    --malo: #DC2626;
    --malo-fondo: #FEF2F2;
    --alto-cabecera: 56px;
    --alto-nav: 62px;
}

* { -webkit-tap-highlight-color: rgba(124, 77, 255, 0.15); }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #F1F5F9;
    background: var(--fondo);
    color: #0F172A;
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    /* En un terminal no hay nada que seleccionar con el dedo, y al pulsar
       fuerte para que responda la pantalla vieja salía el menú de copiar. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: 100%;
}

body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Cabecera ─────────────────────────────────────────────── */

.cabecera {
    height: 56px;
    height: var(--alto-cabecera);
    background: #7C4DFF;
    background: var(--marca);
    background: linear-gradient(135deg, #7C4DFF 0%, #5B2EE5 100%);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.cabecera-atras {
    width: 34px;
    height: 34px;
    margin-right: 8px;
    margin-left: -6px;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: none;
}
.cabecera-atras.visible { display: block; }

.cabecera-texto { flex: 1; min-width: 0; }

.cabecera-titulo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabecera-sub {
    font-size: 11.5px;
    opacity: 0.82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El punto de conexión. Es lo único de la cabecera que cambia solo, así
   que se le da su propio sitio a la derecha y no se mueve nunca: si
   parpadea o salta, el bombero deja de mirarlo. */
.senal {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
    margin-left: 8px;
}
.senal-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    margin-right: 6px;
    flex-shrink: 0;
}
.senal.mala { background: rgba(220, 38, 38, 0.9); }
.senal.mala .senal-punto { background: #FCA5A5; }

/* ── Contenido ────────────────────────────────────────────── */

.contenido {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
}

.contenido.centrado {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Piezas ───────────────────────────────────────────────── */

.tarjeta {
    background: #FFFFFF;
    background: var(--papel);
    border: 1px solid #E2E8F0;
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tarjeta:last-child { margin-bottom: 0; }
.tarjeta.plana { box-shadow: none; background: #F8FAFC; }

.titulo {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;
    margin: 0 0 4px;
}
.subtitulo {
    font-size: 13.5px;
    color: #64748B;
    color: var(--tinta-suave);
    margin: 0 0 14px;
}
.rotulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #94A3B8;
    color: var(--tenue);
    margin-bottom: 6px;
}

/* Botones. 52 px de alto no es capricho: es el mínimo con el que un dedo
   con guante acierta a la primera en una pantalla de 5 pulgadas. */
.boton {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 15px 18px;
    border: none;
    border-radius: 12px;
    background: #7C4DFF;
    background: var(--marca);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.06s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 10px rgba(124, 77, 255, 0.28);
}
.boton:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(124, 77, 255, 0.28); }
.boton[disabled] {
    background: #CBD5E1;
    color: #94A3B8;
    box-shadow: none;
    cursor: default;
}

.boton.secundario {
    background: #FFFFFF;
    background: var(--papel);
    color: #0F172A;
    color: var(--tinta);
    border: 1px solid #E2E8F0;
    border: 1px solid var(--borde);
    box-shadow: none;
}
.boton.peligro { background: #DC2626; background: var(--malo); box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25); }
.boton.chico { min-height: 42px; padding: 10px 14px; font-size: 14px; }
.boton + .boton { margin-top: 10px; }

/* ── La lista de tipos de comprobante va MÁS separada ──
 *
 * Diez píxeles entre botones son dos milímetros y medio en la pantalla del
 * surtidor. En ECO CAZADOR salieron cuatro facturas GUBERNAMENTALES en un día a
 * clientes que son SRL: el bombero iba a «Crédito fiscal» y le daba al de
 * abajo, que estaba pegado y se ve igual.
 *
 * Y no es un error que se arregle solo: cada uno quema un número de una
 * secuencia autorizada, obliga a una nota de crédito —otro número— y a volver a
 * facturar. Ese día se gastaron diez números para tres ventas.
 *
 * Así que aquí el dedo manda: 22 px de separación y botones más altos. Se
 * pierde un poco de pantalla en el paso que se hace una vez por venta, y se
 * gana no equivocarse con el cliente delante. */
.tipos-comprobante { display: grid; gap: 22px; }
.tipos-comprobante .boton { min-height: 62px; }
.tipos-comprobante .boton + .boton { margin-top: 0; }

/* Campos */
.campo { margin-bottom: 14px; }
.campo:last-child { margin-bottom: 0; }

.entrada {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 14px 15px;
    border: 1.5px solid #E2E8F0;
    border: 1.5px solid var(--borde);
    border-radius: 12px;
    background: #FFFFFF;
    background: var(--papel);
    color: #0F172A;
    color: var(--tinta);
    font-size: 16.5px;   /* menos de 16 hace que iOS y algunos Android hagan zoom al enfocar */
    font-family: inherit;
    -webkit-user-select: text;
    user-select: text;
    -webkit-appearance: none;
    appearance: none;
}
.entrada:focus {
    outline: none;
    border-color: #7C4DFF;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.14);
}
.entrada[readonly] { background: #F8FAFC; color: #64748B; color: var(--tinta-suave); }

select.entrada {
    /* La flecha va dibujada porque `appearance:none` deja el campo mudo. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Avisos */
.aviso {
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
    border: 1px solid transparent;
}
.aviso.error { background: #FEF2F2; background: var(--malo-fondo); color: #991B1B; border-color: #FECACA; }
.aviso.ok    { background: #ECFDF5; background: var(--ok-fondo); color: #065F46; border-color: #A7F3D0; }
.aviso.ojo   { background: #FFFBEB; background: var(--aviso-fondo); color: #92400E; border-color: #FDE68A; }
.aviso-titulo { font-weight: 700; margin-bottom: 3px; }

/* ── Teclado numérico ─────────────────────────────────────── */

.pantalla-codigo {
    text-align: center;
    letter-spacing: 14px;
    font-size: 34px;
    font-weight: 800;
    color: #0F172A;
    color: var(--tinta);
    min-height: 46px;
    padding: 8px 0 8px 14px;   /* compensa el espaciado del último dígito */
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.pantalla-codigo.vacia { color: #E2E8F0; color: var(--borde); }

.teclado {
    /* Respaldo para el WebView del Sunmi V1s (Android 6, Chrome ~44), que no
       tiene grid: se apaña con flex y anchos del 33%. Los navegadores que sí
       lo tienen leen las tres lineas de abajo y usan grid, que reparte mejor.

       `gap` a secas tampoco existe ahí, por eso `grid-gap` y el margen. */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    margin: 0;
}

/* Solo para el respaldo sin grid: con grid, el ancho lo pone la columna y
   estos valores quedan sin efecto porque grid ignora el margen del hijo. */
@supports not (display: grid) {
    .teclado > * {
        width: 33.333%;
        box-sizing: border-box;
        border: 5px solid transparent;
        background-clip: padding-box;
    }
}

.tecla {
    min-height: 62px;
    border: 1px solid #E2E8F0;
    border: 1px solid var(--borde);
    border-radius: 14px;
    background: #FFFFFF;
    background: var(--papel);
    color: #0F172A;
    color: var(--tinta);
    font-size: 25px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: background 0.08s ease, transform 0.06s ease;
}
.tecla:active { background: #EDE9FE; transform: translateY(1px); }
.tecla.accion { font-size: 17px; font-weight: 700; color: #64748B; color: var(--tinta-suave); }
.tecla.aceptar {
    background: #7C4DFF;
    background: var(--marca);
    border-color: #7C4DFF;
    border-color: var(--marca);
    color: #fff;
    box-shadow: 0 3px 10px rgba(124, 77, 255, 0.28);
}
.tecla.aceptar:active { background: #5B2EE5; background: var(--marca-oscura); }

/* ── Listas ───────────────────────────────────────────────── */

.fila {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    background: var(--papel);
    border: 1px solid #E2E8F0;
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 9px;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    color: #0F172A;
    color: var(--tinta);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.06s ease;
}
.fila:active { transform: scale(0.985); background: #FAFAFF; }

.fila-marca {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #EDE9FE;
    color: #5B2EE5;
    color: var(--marca-oscura);
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-titulo {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fila-nota {
    font-size: 12.5px;
    color: #64748B;
    color: var(--tinta-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Los nombres de producto son largos de verdad —"COOLANT RAR-ANTI-OXIDANTE
   MECHA TOOL RADIADOR ROJO"— y cortados con puntos suspensivos no se
   distinguen entre sí: en el catálogo salían tres "COOLANT SUPE…". Aquí se
   deja que ocupen dos renglones. En los despachos no hace falta: el producto
   es "GASOLINA PREMIUM" y cabe. */
.fila.ancha .fila-titulo,
.fila.ancha .fila-nota {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.fila-monto {
    font-size: 16px;
    font-weight: 800;
    margin-left: 10px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.fila-flecha { color: #94A3B8; color: var(--tenue); margin-left: 8px; font-size: 18px; flex-shrink: 0; }

/* Un despacho que ya se facturó. Se deja verse —hay que poder reimprimirlo—
   pero apagado, para que el ojo caiga primero en los que faltan. */
.fila.hecha { background: #F8FAFC; box-shadow: none; }
.fila.hecha .fila-titulo { color: #64748B; color: var(--tinta-suave); font-weight: 600; }
.fila.hecha .fila-monto { color: #64748B; color: var(--tinta-suave); }

.fila-reimprimir {
    font-size: 10.5px;
    font-weight: 700;
    color: #7C4DFF;
    color: var(--marca);
    text-align: right;
    margin-top: 2px;
}

/* ── De quién es esta pantalla, y cómo cambiarlo ── */
.cabecera-contexto {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: #EDE9FE;
    border: 1px solid #DDD6FE;
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: #5B2EE5;
    color: var(--marca-oscura);
    cursor: pointer;
    text-align: left;
}
.contexto-icono { display: flex; margin-right: 9px; flex-shrink: 0; }
.contexto-texto { flex: 1; min-width: 0; }
.contexto-fuerte { font-weight: 800; }
.contexto-accion {
    font-weight: 800;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #7C4DFF;
    background: var(--marca);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* ── Cantidad en el carrito ── */
.linea-carrito {
    display: flex;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #F1F5F9;
}
.linea-carrito:last-of-type { border-bottom: none; }
.linea-carrito .fila-titulo { white-space: normal; overflow: visible; }

.cantidad {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 10px;
}
.cant-boton {
    width: 40px;
    height: 40px;
    border: 1px solid #E2E8F0;
    border: 1px solid var(--borde);
    background: #FFFFFF;
    background: var(--papel);
    border-radius: 10px;
    font-size: 21px;
    font-weight: 700;
    font-family: inherit;
    color: #0F172A;
    color: var(--tinta);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.cant-boton:active { background: #EDE9FE; }
.cant-boton.mas { background: #7C4DFF; background: var(--marca); border-color: #7C4DFF; border-color: var(--marca); color: #fff; }
.cant-valor {
    min-width: 34px;
    text-align: center;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.etiqueta {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    margin-left: 6px;
    vertical-align: 1px;
}
.etiqueta.ok    { background: #ECFDF5; background: var(--ok-fondo); color: #059669; color: var(--ok); }
.etiqueta.ojo   { background: #FFFBEB; background: var(--aviso-fondo); color: #B45309; color: var(--aviso); }
.etiqueta.gris  { background: #F1F5F9; background: var(--fondo); color: #64748B; color: var(--tinta-suave); }

/* ── Totales ──────────────────────────────────────────────── */

.renglon {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    font-size: 14.5px;
}
.renglon + .renglon { border-top: 1px solid #F1F5F9; }
.renglon-nombre { color: #64748B; color: var(--tinta-suave); }
.renglon-valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.renglon.total {
    border-top: 2px solid #E2E8F0;
    border-top: 2px solid var(--borde);
    margin-top: 4px;
    padding-top: 12px;
    font-size: 19px;
}
.renglon.total .renglon-nombre { color: #0F172A; color: var(--tinta); font-weight: 700; }
.renglon.total .renglon-valor { font-weight: 800; }

/* ── Vacío y carga ────────────────────────────────────────── */

.vacio { text-align: center; padding: 46px 20px; color: #64748B; color: var(--tinta-suave); }
.vacio-icono { font-size: 40px; opacity: 0.35; margin-bottom: 10px; }
.vacio-titulo { font-weight: 700; color: #0F172A; color: var(--tinta); margin-bottom: 4px; }
.vacio-texto { font-size: 13.5px; }

.girando {
    width: 26px;
    height: 26px;
    margin: 40px auto;
    border: 3px solid #E2E8F0;
    border: 3px solid var(--borde);
    border-top-color: #7C4DFF;
    border-top-color: var(--marca);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Barra inferior ───────────────────────────────────────── */

.nav {
    height: 62px;
    height: var(--alto-nav);
    background: #FFFFFF;
    background: var(--papel);
    border-top: 1px solid #E2E8F0;
    border-top: 1px solid var(--borde);
    display: flex;
    flex-shrink: 0;
}
.nav-boton {
    flex: 1;
    border: none;
    background: none;
    color: #94A3B8;
    color: var(--tenue);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 7px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.nav-icono { font-size: 20px; line-height: 1.1; margin-bottom: 2px; }
.nav-boton.activo { color: #7C4DFF; color: var(--marca); }

/* El punto de «hay versión nueva» sobre el engranaje.
   `position: relative` va aquí y no en el botón: el botón es flex y el punto
   tiene que colgar del icono, que es lo que se mira. */
.nav-icono { position: relative; display: inline-block; }
.nav-punto {
    position: absolute;
    top: -1px; right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #B45309;
    background: var(--aviso);
    /* Un borde del color del fondo lo separa del dibujo del engranaje: sin
       él, sobre las líneas del icono, parece parte del dibujo. */
    box-shadow: 0 0 0 2px #FFFFFF;
}

/* El botón de descargar es un enlace, no un `button`: un toque sobre un enlace
   es lo que más navegadores reconocen como "empieza una descarga". Necesita
   estas tres líneas para parecerse a los demás botones. */
a.boton { text-decoration: none; line-height: 22px; }

/* La dirección del instalador, para teclearla en el navegador del aparato.
   Grande y monoespaciada: se lee de lejos y se distingue el 1 de la l. */
.direccion {
    font-family: ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #0F172A;
    color: var(--tinta);
    word-break: break-all;
    padding: 6px 0 2px;
    /* Que se pueda seleccionar y copiar: el resto del terminal lo impide para
       que un roce no seleccione medio ticket, y aquí eso estorbaría. */
    -webkit-user-select: text;
    user-select: text;
}

/* Los pasos para instalar a mano. Uno por línea y con aire entre ellos: se
   siguen de pie, delante del surtidor, levantando la vista entre paso y paso. */
.pasos {
    font-size: 14px;
    line-height: 1.45;
    color: #64748B;
    color: var(--tinta-suave);
    margin-top: 12px;
}
.pasos > div { margin-bottom: 6px; }

/* ── Barra de progreso ─────────────────────────────────────
   Solo se usa al bajar la actualización. No hay `<progress>` porque en el
   Chrome 62 del V2 PRO no se puede dar color al relleno. */

.barra {
    height: 8px;
    border-radius: 4px;
    background: #E2E8F0;
    background: var(--borde);
    overflow: hidden;
    margin: 14px 0 4px;
}
.barra-relleno {
    height: 100%;
    width: 0;
    background: #7C4DFF;
    background: var(--marca);
    transition: width .25s linear;
}

/* ── Capa de mensajes ─────────────────────────────────────── */

.capa {
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 100;
}
.capa-caja {
    background: #FFFFFF;
    background: var(--papel);
    border-radius: 16px;
    padding: 18px;
    width: 100%;
    max-width: 360px;
    /* Con el teclado numérico dentro, la ventana puede pasar del alto de la
       pantalla en un Verifone. Que se desplace ella y no la página. */
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.3);
}

.capa-barra {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.capa-titulo { flex: 1; font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.capa-cerrar {
    width: 34px; height: 34px;
    border: none;
    background: #F1F5F9;
    background: var(--fondo);
    border-radius: 9px;
    color: #64748B;
    color: var(--tinta-suave);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
}

/* El número de paso del asistente. Pequeño y arriba: dice dónde está sin
   robarle sitio a la pregunta, que es lo único que hay que leer. */
.paso {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #7C4DFF;
    color: var(--marca);
    margin-bottom: 4px;
}
.capa-caja .subtitulo { margin-bottom: 14px; }
.capa-caja .tarjeta { border-radius: 12px; }

/* El aviso de fallo grave. Va fijo abajo y por encima de todo: si algo se
   rompió, el bombero tiene que verlo aunque la pantalla de debajo esté a
   medio dibujar. */
.derrumbe {
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    background: #7F1D1D;
    color: #fff;
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 13px;
    line-height: 1.45;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.4);
}
.derrumbe b { display: block; margin-bottom: 3px; }
.derrumbe button {
    margin-top: 9px;
    background: rgba(255, 255, 255, 0.16);
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

/* ── Pantallas anchas ─────────────────────────────────────── */
/* Algunos terminales son tabletas de 8". Sin esto, los botones quedan de
   punta a punta y hay que estirar el brazo para llegar. */
@media (min-width: 560px) {
    .contenido { padding: 20px 0; }
    .contenido > * {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── El ticket ────────────────────────────────────────────── */
/* Solo se usa cuando NO hay impresora del aparato y hay que pasar por el
   cuadro de impresión del navegador. Con la impresora integrada, el ticket
   lo maqueta el código nativo y esto ni se dibuja.

   Va fuera de la pantalla y no oculto con `display:none`: hay que poder
   MEDIR su alto para fijar el tamaño del papel, y lo oculto mide cero. */
.ticket {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 58mm;
    box-sizing: border-box;
    padding: 2mm;
    background: #fff;
    color: #000;
    font-family: "Courier New", Courier, monospace;
    font-size: 10.5pt;
    line-height: 1.32;
}
.ticket-nombre { text-align: center; font-weight: bold; font-size: 12pt; }
.ticket-centro { text-align: center; }
.ticket-fuerte { font-weight: bold; font-size: 12pt; }
.ticket-raya { border-top: 1px dashed #000; margin: 1.5mm 0; }
.ticket-par { display: flex; justify-content: space-between; }
.ticket-par.fuerte { font-weight: bold; font-size: 12pt; margin-top: 1mm; }
.ticket-qr { word-break: break-all; font-size: 6.5pt; text-align: center; margin-top: 2mm; }

.pie {
    text-align: center;
    font-size: 11px;
    color: #94A3B8;
    color: var(--tenue);
    margin-top: 14px;
}

/* Los nombres de las columnas en el diagnóstico. Monoespaciada y partiendo
   por donde haga falta: son cadenas largas y sin espacios naturales. */
.campos {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    color: #64748B;
    color: var(--tinta-suave);
    word-break: break-all;
    line-height: 1.6;
}

/* ── Logo ─────────────────────────────────────────────────── */
.logo {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: block;
    margin: 0 auto 14px;
    box-shadow: 0 6px 18px rgba(124, 77, 255, 0.28);
}

/* ── Impresión ────────────────────────────────────────────── */
/* La medida real del papel la fija el JavaScript al vuelo, porque `auto`
   en `@page size` no vale y el alto depende de cuántas líneas lleve el
   ticket. Aquí solo se decide QUÉ se imprime: el ticket y nada más.

   Antes se ocultaban la cabecera, el menú y la ventana del comprobante, y
   con eso no bastaba por dos lados. La lista de despachos seguía visible, y
   el ticket seguía donde se dibuja para medirlo, a -9999 px. Así que en el
   papel salía la PÁGINA y el ticket se quedaba fuera. En el Verifone no se
   notaba porque imprime por su puente; se vio el 29-09-2026 enseñando el
   terminal desde un navegador.

   `imprimirTicket` cuelga el ticket directamente del body, así que basta con
   ocultar a todos sus hermanos. */
@media print {
    body > *:not(.ticket) { display: none !important; }
    html, body { background: #fff; height: auto; overflow: visible; margin: 0; padding: 0; }
    .ticket { position: static !important; left: auto !important; top: auto !important; }
}

/* ── Elegir cliente cuando hay muchos ──────────────────────────────────
   La ventana entera se desplaza (`.capa-caja` tiene `overflow-y: auto`), así
   que con una lista larga el buscador se iba hacia arriba y había que subir
   para corregir la búsqueda. Con `sticky` el buscador se queda pegado al
   borde de la ventana mientras la lista pasa por debajo.

   El fondo opaco no es decoración: sin él, los nombres se leen POR DEBAJO del
   buscador mientras se desplazan. */
.picker-fijo {
    position: sticky;
    top: -18px;                 /* compensa el padding de .capa-caja */
    z-index: 2;
    background: #FFFFFF;
    background: var(--papel);
    padding: 18px 0 10px;
    margin: -18px 0 0;
}
.picker-fijo .subtitulo { margin-bottom: 10px; }
.picker-fijo .campo { margin: 0; }

/* Cuántos clientes se ven a la vez. Sin tope, la ventana crece hasta el alto
   de la pantalla y el botón de Atrás queda fuera de alcance. */
.picker-lista {
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 4px 0 12px;
}
.picker-cuenta {
    font-size: 12px;
    color: #64748B;
    color: var(--tenue, #64748B);
    padding: 2px 2px 8px;
}

/* El cliente al que no le alcanza el crédito para ESTE despacho.
   Antes llevaba la clase `gris`, que solo existe para etiquetas y no para
   botones: el botón caía al estilo primario y el único cliente al que NO se
   le podía fiar salía como el más destacado de la lista — justo al revés.

   Se deja pulsable a propósito. El servidor responde con cuánto le queda, y
   esa frase es la que el bombero necesita para explicárselo al cliente; un
   botón muerto solo dice "no" sin decir por qué. */
.boton.sin-credito {
    background: #F1F5F9;
    background: var(--fondo);
    color: #94A3B8;
    border: 1px dashed #CBD5E1;
    font-weight: 600;
}

/* ── Pestañas ──────────────────────────────────────────────────────────
   Sin uso desde que gasto y calibración pasaron a una sola lista servida por
   la estación. Se dejan porque el estilo es genérico y sirve para la próxima
   ventana que necesite pestañas de verdad. */
.tabs {
    display: flex;
    gap: 6px;
    background: #F1F5F9;
    background: var(--fondo);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 14px;
}
.tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 8px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
    font-family: inherit;
}
.tab.activa {
    background: #FFFFFF;
    background: var(--papel);
    color: #4338CA;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* La letra pequeña que explica qué va a pasar. */
.nota {
    font-size: 12px;
    color: #64748B;
    line-height: 1.45;
    margin: 10px 2px 4px;
}

/* ── El cliente en la lista de crédito ─────────────────────────────────
   Antes era un botón con todo en una línea: "NOMBRE · quedan RD$25,000.00",
   centrado y partido en dos renglones cuando el nombre era largo. Se leía mal
   justo cuando hay que leer rápido, con el cliente esperando.
   Ahora el nombre manda —alineado a la izquierda, que es por donde se lee— y
   el crédito va debajo, pequeño y en su color: verde si alcanza, rojo si no. */
.cliente-fila {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    background: var(--papel);
    cursor: pointer;
    font-family: inherit;
}
.cliente-fila .cf-nombre {
    font-size: 15px;
    font-weight: 800;
    color: #0F172A;
    color: var(--tinta, #0F172A);
    line-height: 1.25;
}
.cliente-fila .cf-sub {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 700;
}
.cliente-fila .cf-rnc   { color: #94A3B8; font-weight: 600; }
.cliente-fila .cf-ok    { color: #059669; }
.cliente-fila .cf-corto { color: #DC2626; }
.cliente-fila.sin-credito { border-style: dashed; background: #F8FAFC; }

/* La calibración, dentro de la lista de "¿qué fue este despacho?".
   No es un gasto —el combustible vuelve al tanque— y conviene que se note sin
   leer: va separada del bloque de gastos y con su propio color. */
.cliente-fila.es-calibracion {
    border-color: #A7F3D0;
    background: #F0FDF4;
    margin-top: 12px;
}
.cliente-fila.es-calibracion .cf-nombre { color: #047857; }

/* Forma de pago del comprobante (estaciones con `terminal_forma_pago`):
   tres botones en fila, el elegido en el color de la marca. */
.formas-pago {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 4px 0 16px;
}
.formas-pago .boton + .boton { margin-top: 0; }
.formas-pago .boton { min-height: 56px; padding: 12px 8px; }