/* ====================================================================
   Gift Cards — estilos de mostrador
   ====================================================================
   Herramienta de caja, no pagina web. Prioridades, en orden:
     1. Que la cajera no se equivoque de modo (emitir vs validar).
     2. Que se lea de pie, a un metro, en un monitor viejo.
     3. Que cargue al instante — sin fuentes externas ni frameworks.

   El color codifica el modo y no se repite en otro lado:
     dorado  = emitir       verde  = validar
   ==================================================================== */

:root {
    --tinta:        #14213d;
    --tinta-suave:  #4a5568;
    --papel:        #f5f5f3;
    --blanco:       #ffffff;
    --borde:        #d8d8d2;

    --emitir:       #a67c00;
    --emitir-claro: #fdf6e0;
    --validar:      #0f766e;
    --validar-claro:#e6f4f2;

    --exito:        #15803d;
    --alerta:       #b45309;
    --error:        #b4232c;
    --error-claro:  #fdeaea;

    --radio:        10px;
    --sombra:       0 1px 3px rgba(20, 33, 61, .12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--papel);
    color: var(--tinta);
    font-size: 16px;
    line-height: 1.5;
}

.envoltura {
    max-width: 620px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

/* ---------- Encabezado ---------- */
/* Barra clara con el logo de la marca a la izquierda y la tienda a la
   derecha, como en cupones. La cajera identifica de un vistazo en que
   tienda esta parada — importante cuando cubre turnos en varias. */

.barra {
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
    padding: 1.1rem 1rem .9rem;
}

.barra .interior {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.marca-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.marca-texto {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--tinta);
}

.tienda-bloque { text-align: center; }

.tienda-rotulo {
    font-size: .62rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: .15rem;
}

.tienda-nombre {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--tinta);
    max-width: 240px;
}

@media (max-width: 480px) {
    .barra { padding: .85rem 1rem .7rem; }
    .barra .interior { gap: 1.25rem; }
    .marca-logo { height: 26px; max-width: 140px; }
    .tienda-nombre { font-size: .88rem; }
}

@media print { .barra { display: none; } }

/* ---------- Accesos principales ---------- */

.accesos {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.acceso {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--blanco);
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.5rem 1.25rem;
    box-shadow: var(--sombra);
    transition: transform .08s ease, border-color .12s ease;
}
.acceso:hover,
.acceso:focus-visible { transform: translateY(-2px); }

.acceso .rotulo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.acceso .detalle {
    color: var(--tinta-suave);
    font-size: .95rem;
    margin-top: .35rem;
}

.acceso.emitir  { border-color: var(--emitir); }
.acceso.emitir .rotulo  { color: var(--emitir); }
.acceso.validar { border-color: var(--validar); }
.acceso.validar .rotulo { color: var(--validar); }

/* Anular es destructivo y poco frecuente: se ve, pero no compite con
   las dos acciones principales. */
.acceso.anular {
    border-color: var(--borde);
    border-width: 1px;
    padding: 1rem 1.25rem;
    background: transparent;
    box-shadow: none;
}
.acceso.anular .rotulo { font-size: 1.05rem; color: var(--error); }
.acceso.anular .detalle { font-size: .88rem; }

/* ---------- Tarjetas de contenido ---------- */

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    box-shadow: var(--sombra);
    margin-bottom: 1rem;
}
.tarjeta.emitir  { border-top: 4px solid var(--emitir); }
.tarjeta.validar { border-top: 4px solid var(--validar); }

.tarjeta h2 {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
}
.tarjeta .ayuda {
    color: var(--tinta-suave);
    font-size: .9rem;
    margin: 0 0 1rem;
}

/* ---------- Formularios ---------- */

label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
    margin-bottom: .3rem;
}

input[type=text],
input[type=email],
input[type=tel],
select {
    width: 100%;
    padding: .7rem .8rem;
    font-size: 1.05rem;
    font-family: inherit;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--blanco);
    color: var(--tinta);
}
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--tinta);
    outline-offset: 1px;
}

select { appearance: none; background-image: none; }

/* El campo de escaneo domina la pantalla: es la accion principal. */
.escaneo {
    font-size: 2rem !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    text-align: center;
    padding: 1rem .8rem !important;
    border-width: 2px !important;
}

.campos {
    display: grid;
    gap: .9rem;
}
.campos.dos { grid-template-columns: 1fr 1fr; }

/* ---------- Sugerencias de dominio de correo ---------- */

.correo-sugerencias {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin-top: .25rem;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 8px;
    box-shadow: var(--sombra);
    overflow: hidden;
}
.correo-sugerencias.visible { display: block; }

.correo-opcion {
    display: block;
    width: 100%;
    padding: .6rem .8rem;
    font-size: .95rem;
    font-family: inherit;
    text-align: left;
    color: var(--tinta);
    background: var(--blanco);
    border: 0;
    border-bottom: 1px solid var(--papel);
    cursor: pointer;
}
.correo-opcion:last-child { border-bottom: 0; }
.correo-opcion:hover,
.correo-opcion:focus-visible { background: var(--papel); }

@media (max-width: 480px) {
    .campos.dos { grid-template-columns: 1fr; }
}

/* ---------- Botones ---------- */

.boton {
    display: inline-block;
    width: 100%;
    padding: .95rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--blanco);
    background: var(--tinta);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin-top: 1rem;
}
.boton.emitir  { background: var(--emitir); }
.boton.validar { background: var(--validar); }
.boton.tenue {
    background: transparent;
    color: var(--tinta-suave);
    border: 1px solid var(--borde);
    font-weight: 600;
}
.boton:disabled { opacity: .55; cursor: progress; }

/* ---------- Resultados ---------- */

.resultado { border-left: 5px solid var(--borde); padding-left: 1rem; }
.resultado .estado {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
.resultado.bien   { border-color: var(--exito); }
.resultado.bien   .estado { color: var(--exito); }
.resultado.aviso  { border-color: var(--alerta); }
.resultado.aviso  .estado { color: var(--alerta); }
.resultado.malo   { border-color: var(--error); }
.resultado.malo   .estado { color: var(--error); }

/* El valor es el dato que la cajera necesita ver primero. */
.valor {
    font-size: 3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
    margin: .75rem 0 .25rem;
}
.valor .moneda { font-size: 1.5rem; vertical-align: .55rem; margin-right: .1rem; }
.valor.emitir  { color: var(--emitir); }
.valor.validar { color: var(--validar); }

.datos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: .95rem;
}
.datos td { padding: .45rem 0; border-bottom: 1px solid var(--papel); }
.datos td:first-child {
    color: var(--tinta-suave);
    width: 45%;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.datos td:last-child { font-weight: 600; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.nota {
    background: var(--error-claro);
    border-radius: 8px;
    padding: .8rem 1rem;
    font-size: .92rem;
    margin-top: 1rem;
}

.pie {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .85rem;
}
.pie p { margin: 0 0 .9rem; }
.pie a { color: var(--tinta-suave); }

/* Los dos enlaces del pie tienen que verse. Un enlace gris de 13px no
   lo encuentra nadie con una clienta esperando.

   Acabado solido en vez de contorno: fondo con degradado corto, luz
   interior arriba y sombra proyectada suave. Es lo que separa un
   boton plano de uno que parece una pieza. */

.pie {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.enlace-pie {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem !important;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff !important;
    text-decoration: none;
    padding: .85rem 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, #223561 0%, var(--tinta) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 1px 2px rgba(20, 33, 61, .28),
        0 8px 18px -8px rgba(20, 33, 61, .55);
    transition: transform .12s ease, box-shadow .12s ease,
                filter .12s ease;
}

.enlace-pie:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 2px 4px rgba(20, 33, 61, .3),
        0 14px 26px -10px rgba(20, 33, 61, .6);
}

.enlace-pie:active {
    transform: translateY(0);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .25),
        0 1px 2px rgba(20, 33, 61, .25);
}

.enlace-pie:focus-visible {
    outline: 3px solid var(--emitir);
    outline-offset: 3px;
}

.enlace-icono {
    display: inline-flex;
    width: 18px;
    height: 18px;
    opacity: .85;
}
.enlace-icono svg { width: 100%; height: 100%; }

@media (max-width: 420px) {
    .pie { flex-direction: column; align-items: stretch; }
    .enlace-pie { justify-content: center; }
}

/* ---------- Recibo ---------- */

.recibo {
    background: var(--blanco);
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    padding: 1.25rem;
    font-variant-numeric: tabular-nums;
}
.recibo .cabecera { text-align: center; margin-bottom: 1rem; }
.recibo .marca { font-weight: 800; letter-spacing: .12em; }
.recibo .linea {
    border-top: 1px dashed var(--borde);
    margin: .8rem 0;
}


@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ====================================================================
   RECIBO TERMICO
   ====================================================================
   Configurado para rollo de 80 mm (EPSON TM-T20III), ancho imprimible
   72 mm. A 10pt monoespaciado son unas 42 columnas.

   SI SE CAMBIA A ROLLO DE 58 mm: cambiar 80mm por 58mm y 72mm por
   54mm en este bloque, y ajustar el driver de la impresora a juego.
   Los dos tienen que coincidir: si el CSS dice 58 y el driver 80, el
   recibo sale centrado y diminuto dentro del rollo.

   Las medidas van en pt y mm, NO en px: en impresion el pixel depende
   del DPI del driver, y por eso el recibo salia diminuto. El punto es
   una medida fisica y sale igual en cualquier impresora.

   En pantalla se muestra a escala real para que la cajera vea lo que
   va a salir del rollo.
   ==================================================================== */

.recibo-termico {
    width: 72mm;
    margin: 0 auto;
    padding: 3mm 2mm;
    background: var(--blanco);
    color: #000;
    font-family: "DejaVu Sans Mono", "Courier New", monospace;
    font-size: 10pt;
    line-height: 1.3;
    border: 1px solid var(--borde);
    border-radius: 4px;
}

.rt-centro  { text-align: center; }
.rt-fuerte  { font-weight: 700; }
.rt-grande  { font-size: 12.5pt; letter-spacing: .03em; }
.rt-tenue   { font-size: 8.5pt; }

.rt-marca {
    font-size: 14pt;
    letter-spacing: .1em;
    margin-bottom: 1mm;
}

.rt-sep {
    border-top: 1px dashed #000;
    margin: 2mm 0;
}
.rt-sep.doble { border-top-style: solid; }

/* Los datos fiscales son largos y no necesitan leerse de lejos:
   van al minimo legible para no comerse medio rollo. */
.rt-bloque {
    font-size: 8.5pt;
    line-height: 1.3;
    word-wrap: break-word;
}

.rt-producto { margin: 2mm 0; }
.rt-codigo {
    font-size: 11pt;
    letter-spacing: .12em;
    margin-top: 1mm;
    word-break: break-all;
}

.rt-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    line-height: 1.25;
}
.rt-tabla td { padding: .5mm 0; vertical-align: top; }
.rt-tabla td:first-child { width: 20mm; }
.rt-tabla td:last-child  { word-break: break-word; }

.rt-total {
    display: flex;
    justify-content: space-between;
    font-size: 13pt;
    font-weight: 700;
    margin: 1.5mm 0 .5mm;
}

.rt-legal { font-size: 8pt; line-height: 1.3; }
.rt-legal div { margin-bottom: 1mm; }

.rt-pie {
    text-align: center;
    margin-top: 3mm;
    letter-spacing: .4em;
}

/* ---------- Impresion termica ---------- */

@media print {
    @page { size: 80mm auto; margin: 0; }

    html, body {
        width: 80mm;
        background: #fff;
        margin: 0;
        padding: 0;
        font-size: 10pt;
    }

    .barra, .boton, .pie, .no-imprimir,
    .tarjeta:not(.contiene-recibo) { display: none !important; }

    .envoltura { max-width: 80mm; padding: 0; margin: 0; }

    .tarjeta.contiene-recibo {
        border: 0; box-shadow: none; padding: 0; margin: 0;
        background: #fff;
    }

    .recibo-termico {
        width: 72mm;
        border: 0;
        border-radius: 0;
        padding: 2mm;
        margin: 0;
    }
}

/* ====================================================================
   AYUDA — manual de cajeras
   ==================================================================== */

.indice {
    display: grid;
    gap: .4rem;
    margin: 1rem 0;
}
.indice a {
    color: var(--tinta);
    text-decoration: none;
    padding: .55rem .75rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: .95rem;
}
.indice a:hover { background: var(--papel); }

.pasos {
    margin: .5rem 0 0;
    padding-left: 1.3rem;
}
.pasos li { margin-bottom: .6rem; }

.tarjeta h3 {
    font-size: 1rem;
    margin: 1.25rem 0 .25rem;
}

.mensajes { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mensajes td {
    padding: .7rem 0;
    border-bottom: 1px solid var(--papel);
    vertical-align: top;
}
.mensajes td:first-child { width: 38%; padding-right: 1rem; }

/* ---------- Hoja para pegar en la caja ---------- */

.hoja-caja { display: none; }

@media print {
    /* Al imprimir la ayuda solo sale la hoja de caja: una pagina que
       se pega junto al monitor. El resto es para leer en pantalla. */
    .hoja-caja {
        display: block;
        width: 100%;
        font-size: 9.5pt;
        line-height: 1.35;
    }
    .hoja-caja h1 {
        font-size: 16pt;
        margin: 0;
        letter-spacing: -.01em;
    }
    .hoja-caja .sub {
        margin: .1rem 0 .6rem;
        font-size: 8.5pt;
        color: #444;
    }
    .hc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4mm;
    }
    .hc-bloque {
        border: 1pt solid #000;
        border-radius: 2mm;
        padding: 2.5mm 3mm;
        break-inside: avoid;
    }
    .hc-bloque h2 {
        font-size: 10pt;
        margin: 0 0 1.5mm;
        letter-spacing: .06em;
    }
    .hc-bloque ol { margin: 0; padding-left: 4mm; }
    .hc-bloque li { margin-bottom: .8mm; }
    .hc-bloque p  { margin: 1.5mm 0 0; }

    .hc-emitir  { border-left: 3pt solid #a67c00; }
    .hc-validar { border-left: 3pt solid #0f766e; }
    .hc-anular  { border-left: 3pt solid #b4232c; }
    .hc-alerta  { border: 1.5pt solid #b4232c; }

    /* El @page de la hoja de caja NO va aqui: es una regla global y
       pisaba al @page de 80 mm del recibo, que es el que importa en
       todas las demas pantallas. Vive en un <style> dentro de
       ayuda.php, que es la unica pagina que se imprime en A4. */
}

/* ---------- Casos de error en el manual ---------- */
/* En tabla se leia como un bloque corrido. En tarjetas, el mensaje
   de pantalla se reconoce de un vistazo y debajo esta la accion. */

.casos { display: grid; gap: .85rem; margin-top: 1rem; }

.caso {
    border: 1px solid var(--borde);
    border-left: 4px solid var(--alerta);
    border-radius: 8px;
    overflow: hidden;
}

.caso-mensaje {
    background: var(--papel);
    padding: .7rem .9rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.caso-donde {
    font-weight: 400;
    font-size: .82rem;
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-left: .4rem;
}

.caso-accion {
    padding: .8rem .9rem;
    font-size: .95rem;
    background: var(--blanco);
}

/* Los dos casos donde equivocarse cuesta dinero */
.caso.caso-grave { border-left-color: var(--error); }
.caso.caso-grave .caso-mensaje { background: var(--error-claro); }

/* ====================================================================
   CAPA DE ESPERA
   ====================================================================
   SAE tarda entre 4 y 30 segundos. Sin señal en pantalla la cajera
   cree que no pasó nada y vuelve a pulsar — al vender eso podría
   generar una segunda factura. La capa cubre todo: no hay nada que
   pulsar mientras se espera.
   ==================================================================== */

.capa-espera {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(20, 33, 61, .82);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.capa-espera.visible { display: flex; }

.capa-caja {
    background: var(--blanco);
    border-radius: var(--radio);
    padding: 2rem 1.75rem;
    text-align: center;
    max-width: 340px;
    width: 100%;
}

.capa-giro {
    width: 42px;
    height: 42px;
    margin: 0 auto 1.1rem;
    border: 4px solid var(--papel);
    border-top-color: var(--tinta);
    border-radius: 50%;
    animation: capa-girar .9s linear infinite;
}

@keyframes capa-girar { to { transform: rotate(360deg); } }

.capa-texto {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.capa-nota {
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--tinta-suave);
}

@media (prefers-reduced-motion: reduce) {
    .capa-giro { animation-duration: 2.5s; }
}

@media print { .capa-espera { display: none !important; } }

/* ====================================================================
   REPORTE DEL DIA
   ==================================================================== */

.acceso.reporte {
    border-color: var(--borde);
    border-width: 1px;
    box-shadow: none;
}
.acceso.reporte .rotulo { font-size: 1.15rem; color: var(--tinta); }

.resumen {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: .75rem 0 1rem;
    border-bottom: 1px solid var(--papel);
    margin-bottom: .5rem;
}
.resumen-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.resumen-rot {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-suave);
}

.lista { display: grid; gap: .5rem; }

.fila {
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: .7rem .85rem;
}
.fila-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-weight: 700;
}
.fila-valor { font-variant-numeric: tabular-nums; }
.fila-detalle {
    font-size: .85rem;
    color: var(--tinta-suave);
    margin-top: .25rem;
    line-height: 1.45;
}
.fila-accion {
    display: inline-block;
    margin-top: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tinta);
}
.fila-anulada { opacity: .55; }
.fila-anulada .fila-cabeza { text-decoration: line-through; }

/* ---------- Lista de envio a Matriz ---------- */

.envio { font-size: .92rem; }
.envio-cabecera {
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: .6rem;
}
.envio-tabla { width: 100%; border-collapse: collapse; }
.envio-tabla th {
    text-align: left;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
    padding: .3rem 0;
    border-bottom: 1px solid var(--borde);
}
.envio-tabla td {
    padding: .4rem 0;
    border-bottom: 1px solid var(--papel);
    font-variant-numeric: tabular-nums;
}
.envio-firmas {
    display: flex;
    gap: 2rem;
    margin-top: 2.5rem;
    font-size: .8rem;
    color: var(--tinta-suave);
}
.envio-firmas > div { flex: 1; }
.linea-firma {
    display: block;
    border-top: 1px solid var(--tinta);
    margin-top: 2rem;
}