/*
 * Tokens de diseno POS: fuente UNICA de verdad de colores, tipografia y radios.
 * Antes _layout.html y terminal.html (CAJA, pagina standalone) definian cada uno
 * su propio :root inline y divergian: la CAJA no tenia los --fs-* y arreglos de
 * layout hechos en _layout no llegaban a la CAJA. Un solo archivo enlazado por
 * ambos elimina esa deriva. Las variables de movimiento traen fallback literal
 * porque la CAJA no carga motion.css.
 */
:root {
    /* Sin esto el navegador pinta la barra de scroll nativa, los controles de
       formulario y el fondo del documento en su tema CLARO sobre un diseno oscuro:
       de ahi la franja blanca ancha en escritorio. */
    color-scheme: dark;

    /* Escala de superficies SEPARADA. Las tres estaban dentro de 15 puntos de luminancia
       (#141414 / #1a1a1a / #232323) y el salto entre una tarjeta y la celda de su tabla no
       se veia: de ahi "las celdas no se distinguen, me pierdo en tanto gris". El paso es
       ahora de ~11 puntos cada uno y los bordes suben con ellas, porque un borde de #2a2a2a
       sobre una celda de #2b2b2b habria desaparecido justo al ganar la celda. */
    --bg:        #0a0a0a;
    --surface:   #141414;
    --surface-2: #1f1f1f;
    --surface-3: #2b2b2b;
    --border:    #343434;
    --border-2:  #474747;
    --text:      #fafafa;
    --text-2:    #b3b3b3;
    /* --text-3 daba 2.9:1 y --text-dim 1.9:1 sobre la superficie: por debajo del minimo
       legible, y se usan en etiquetas de 10px que es donde menos se perdona. */
    --text-3:    #8a8a8a;
    --text-dim:  #6a6a6a;

    --accent:       #2563eb;
    --accent-hover: #1d4ed8;
    --accent-press: #1e40af;
    --accent-soft:  rgba(37,99,235,0.14);
    --accent-ring:  rgba(37,99,235,0.45);
    --accent-on:    #ffffff;
    --accent-text:  #6ea0f5;

    --danger:    #ef4444;
    --warning:   #f59e0b;
    --success:   #10b981;
    --info:      #60a5fa;

    /* Naranja de cocina. Familia propia y NO --warning, que significa "cuidado" en toda la
       app: mandar una comanda al fuego no es una advertencia, y reusar el ambar hacia que el
       boton de cocina se leyera como un riesgo mientras Cobrar, que si mueve dinero, iba en
       azul. Relleno plano: la regla de marca prohibe resplandores y bordes de acento, asi
       que el color es toda la senal. El relleno es el naranja QUEMADO en los dos temas: el
       vivo (#ea580c) con blanco encima da 3.56:1 y el rotulo del boton es texto chico en
       negrita, que exige 4.5:1. --fire-ink es TINTA sobre fondo (la cabecera del bloque ya
       despachado) y es lo unico de la familia que cambia por tema. */
    --fire:       #c2410c;
    --fire-hover: #9a3412;
    --fire-press: #7c2d12;
    --fire-on:    #ffffff;
    --fire-soft:  rgba(194,65,12,0.14);
    --fire-ring:  rgba(194,65,12,0.45);
    --fire-ink:   #fb923c;

    /* Rojo como TINTA de texto. --danger esta calibrado para bordes y rellenos, y en
       claro se queda en 4.4:1 sobre el fondo: legible de milagro y menos todavia si el
       texto va tachado. Este tono solo cambia en claro. */
    --danger-ink: #ef4444;

    /* Verde como TINTA de texto, por el mismo motivo y con el mismo patron: --success
       sirve de punto (un grafico de 8px solo necesita 3:1, y en claro da 3.77:1) pero no
       de rotulo, que es texto chico en negrita y exige 4.5:1. Igual que --danger-ink,
       solo cambia en claro. */
    --success-ink: #10b981;

    /* Metales del podio de fidelidad. Son TINTA (numero, corona), nunca borde ni
       fondo: la regla de marca prohibe bordes de acento. Viven aca y no en la
       vista para que el tema claro pueda oscurecerlos y mantener el contraste. */
    --medal-1:   #c2a04d;
    --medal-2:   #9aa3ad;
    --medal-3:   #a8734a;

    /* Familias de ROL del personal. Son DOS y no nueve: colorear los nueve roles es no
       colorear ninguno, y el ojo solo necesita separar quien MANDA de quien cobra. El
       resto del personal (mesero, runner, vendedor, solo lectura) se queda neutro a
       proposito, que es el fondo contra el que estas dos resaltan.

       No se reusan --success/--warning/--danger aunque alcancen: en toda la app significan
       "bien", "cuidado" y "error", y un "Mesero" en verde se habria leido como un estado y
       no como un puesto -- la misma colision que el comentario de --fire explica. La familia
       de produccion (pantalla de cocina) no estrena tokens: reusa --fire-*, que ya es el
       color del fuego en los dos temas.

       Relleno + tinta, nunca borde: la regla de marca manda bordes neutros. */
    --rol-mando-ink:  #a78bfa;
    --rol-mando-soft: rgba(167,139,250,0.16);
    --rol-caja-ink:   #2dd4bf;
    --rol-caja-soft:  rgba(45,212,191,0.16);

    --fs-display: 26px;
    --fs-title:   19px;
    --fs-body:    14px;
    --fs-label:   10px;

    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 6px;

    --shadow-1:   0 1px 2px rgba(0,0,0,0.40);
    --shadow-2:   0 8px 24px rgba(0,0,0,0.45);
    --shadow-pop: 0 24px 64px rgba(0,0,0,0.50);

    --motion:      var(--motion-fast, .16s);
    --ease:        var(--motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1));

    --bn-h:  64px;
    --hd-h:  56px;
    --sb-w:  220px;
}

html[data-theme="light"] {
    color-scheme: light;

    /* Misma separacion que en oscuro, en el sentido contrario: las superficies BAJAN de
       luminancia a pasos parejos en vez de apretarse contra el blanco. */
    --bg:        #eef0f4;
    --surface:   #ffffff;
    --surface-2: #e9ecf1;
    --surface-3: #dce0e7;
    --border:    #d7dbe3;
    --border-2:  #bfc5cf;
    --text:      #1b1f27;
    --text-2:    #4b515c;
    /* Sobre blanco el #7b828f daba 4.3:1 y el #aab0bc 2.2:1, el mismo agujero que en
       oscuro: estos tonos viven en etiquetas de 10px. */
    --text-3:    #656c78;
    --text-dim:  #8b919d;

    --accent-soft:  rgba(37,99,235,0.10);
    --accent-ring:  rgba(37,99,235,0.35);
    --accent-text:  #1d4ed8;

    --danger:    #dc2626;
    --warning:   #b45309;
    --success:   #059669;
    --info:      #2563eb;

    /* El relleno NO se redefine: ya viene quemado de :root para sostener el blanco de
       --fire-on. La tinta si baja dos pasos, que el #fb923c del tema oscuro sobre fondo
       claro queda en 2.1:1. */
    --fire-soft:  rgba(194,65,12,0.10);
    --fire-ring:  rgba(194,65,12,0.35);
    --fire-ink:   #9a3412;

    --danger-ink: #b91c1c;
    --success-ink: #047857;

    --medal-1:   #8a6a1d;
    --medal-2:   #5d6672;
    --medal-3:   #7b4d28;

    /* Las dos tintas de rol bajan a tono oscuro: el violeta y el turquesa del tema oscuro
       estan calibrados contra #141414 y sobre blanco se quedan en 2.1:1 y 1.8:1. El
       relleno baja de opacidad porque sobre fondo claro tine mucho mas. */
    --rol-mando-ink:  #6d28d9;
    --rol-mando-soft: rgba(109,40,217,0.10);
    --rol-caja-ink:   #0f766e;
    --rol-caja-soft:  rgba(15,118,110,0.10);

    --shadow-1:   0 1px 2px rgba(16,24,40,0.06);
    --shadow-2:   0 8px 24px rgba(16,24,40,0.10);
    --shadow-pop: 0 24px 64px rgba(16,24,40,0.16);
}

/*
 * La lista desplegada de un <select>.
 *
 * El color-scheme de :root arregla la barra de scroll y la caja CERRADA del selector, pero
 * no esa lista: el navegador la dibuja fuera del documento. Chrome en Android la arma como
 * un cuadro propio y la pinta con el tema del SISTEMA, asi que con el telefono en claro
 * salia blanca con letra negra sobre un dialogo oscuro. Lo unico que ese cuadro si respeta
 * es el fondo y la tinta declarados sobre el <option>, y en todo el POS no habia ni una.
 *
 * Va aqui y no en la pantalla donde se vio: solo _insumos_panel.html tiene diez selectores
 * y la trastienda entera los suyos. Al venir de variables sirve en los dos temas.
 */
option,
optgroup {
    background-color: var(--surface);
    color: var(--text);
}
optgroup { font-weight: 800; }
option:disabled { color: var(--text-3); }

/*
 * Barra de scroll: fina en reposo, un poco mas gruesa con el mouse encima.
 *
 * El canal mide SIEMPRE 10px y lo que cambia es el borde transparente del pulgar
 * (background-clip: content-box lo recorta). Engordar el canal en hover movería el
 * contenido: el ancho util de la pagina cambiaria en pleno movimiento del mouse.
 *
 * Solo con mouse fino: en tactil la barra flotante nativa ya se comporta bien y
 * forzarle tamano la deja permanentemente visible.
 */
@media (hover: hover) and (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: var(--border-2);
        background-clip: content-box;
        border: 3px solid transparent;
        border-radius: 8px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-dim);
        background-clip: content-box;
        border-width: 2px;
    }
}

/*
 * Anti zoom por doble toque. El `auto` por defecto reserva el doble toque para acercar la
 * pagina, asi que dos pulsaciones rapidas sobre el "+" de un sabor cambiaban la escala y se
 * comian la segunda; encima el navegador retiene cada toque esperando al siguiente y el
 * boton se siente lento. `manipulation` apaga SOLO ese gesto: desplazar y el pellizco-zoom
 * siguen vivos, que es justo lo que se perderia poniendo user-scalable=no en el viewport.
 * Un `touch-action` mas estricto mas abajo (los carruseles, el panel de cobro) sigue
 * mandando: el valor efectivo es la interseccion con el del ancestro y esto nunca lo afloja.
 */
html, body { touch-action: manipulation; }

/*
 * Anti auto-zoom de iOS: Safari movil hace zoom-in al enfocar un input con
 * texto < 16px y no vuelve del todo (el "zoom feo" al entrar y tocar un campo).
 * Forzar 16px en el foco movil lo elimina sin tocar el viewport meta (mantener
 * el pellizco-zoom por accesibilidad). Aplica a TODA vista POS que cargue este
 * archivo (fuente unica). El diseno apenas cambia (14->16px).
 */
@media (max-width: 480px) {
    input, select, textarea { font-size: 16px; }
}