/* ============================================================================
   jelty-tokens.css — Base del rediseño de la oficina virtual Jelty
   ----------------------------------------------------------------------------
   Primer archivo que debe cargar cualquier pantalla del rediseño. Trae:

     1. Las variables de la marca (paleta, tipografias, radios, sombras)
     2. Un reset minimo

   PALETA "MINERAL": toda la interfaz es gris neutro; el COLOR entra
   unicamente por producto, mediante la variable --jt-pc que cada tarjeta
   define por su cuenta. Si algun dia hay que recolorear la marca completa,
   se toca SOLO el bloque :root de este archivo.

   CONVENCION DE NOMBRES
   - Variables: prefijo --jt-
   - Clases:    prefijo jt-
   Se prefija a proposito: mientras dure la migracion, las pantallas que
   todavia no se rediseñan siguen cargando Bootstrap 3 desde
   templates/jelty/index.jsp, y sin prefijo chocarian nombres como
   .card, .btn o .row. No quitar el prefijo hasta que no quede
   una sola pantalla con Bootstrap.

   ORDEN DE CARGA
     1. fonts/jelty/jelty-fuentes.css
     2. css/jelty-tokens.css        <- este archivo
     3. css/jelty-componentes.css
     4. el css propio de la pantalla
   ============================================================================ */

:root {
    /* ---- superficies ---- */
    --jt-fondo: #E9EBEE; /* fondo de pagina */
    --jt-superficie: #FFFFFF; /* tarjetas, barras */
    --jt-superficie-2: #F4F5F7; /* campos, hover suave */
    --jt-hundido: #E2E5E9; /* barras de progreso, campos bloqueados */

    /* ---- texto ---- */
    --jt-tinta: #0E1013; /* texto principal */
    --jt-tinta-suave: #3A3F47; /* texto secundario */
    --jt-apagado: #787E88; /* leyendas, ayudas */
    --jt-linea: #DCDFE4; /* bordes y separadores */

    /* ---- marca ---- */
    --jt-marca: #0E1013; /* botones solidos, nodo raiz */
    --jt-marca-tinta: #FFFFFF; /* texto sobre --jt-marca */
    --jt-marca-suave: #E7E9ED; /* fondo de item activo, halo de foco */

    /* ---- semaforo ---- */
    --jt-ok: #2C7A55;
    --jt-alerta: #9A6A12;
    --jt-error: #A93E2E;

    /* ---- panel oscuro (login, portadas) ---- */
    --jt-oscuro: #0B0C0E;
    --jt-oscuro-tinta: #F1F3F6;

    /* ---- tipografias ---- */
    --jt-fuente-titulo: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
    --jt-fuente-texto: 'Public Sans', system-ui, -apple-system, sans-serif;
    --jt-fuente-cifra: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ---- forma ---- */
    --jt-radio: 10px;
    --jt-radio-lg: 14px;
    --jt-radio-boton: 8px;
    --jt-sombra: 0 1px 2px rgba(14, 16, 19, .05), 0 10px 26px -18px rgba(14, 16, 19, .4);

    /* ---- degradado cromo (acentos metalicos de la marca) ---- */
    --jt-cromo: linear-gradient(118deg, #FCFCFD 0%, #A6ABB3 20%, #F1F2F4 34%, #696F77 52%, #D9DCE1 68%, #8B9199 84%, #EFF1F3 100%);

    /* ---- mezcla de color de producto sobre fondo ---- */
    --jt-tinte: 10%;
}

/* ============================================================================
   Reset minimo
   ============================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.jt {
    background: var(--jt-fondo);
    color: var(--jt-tinta);
    font-family: var(--jt-fuente-texto);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: none;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* Foco visible solo para navegacion por teclado (no al hacer clic) */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}