@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-variable.woff2") format("woff2");
}

/*
  TOKENS DEL SISTEMA · la unica fuente para el panel, el portal y la pagina.

  Color: los cuatro de la marca y nada mas como base. Todo lo demas es una
  mezcla declarada de esos cuatro (color-mix) o una de las dos familias
  reservadas, rojo y ambar, que no salen de ninguna marca a proposito: una
  agencia puede tener el rojo entre sus colores y la alerta se confundiria con
  el resto justo cuando importa.

  El PORTAL recibe los cuatro de la agencia en el atributo style de la raiz
  (--color-primario, --color-secundario, --color-acento, --color-fondo); el
  PANEL no los recibe y se queda con los del producto, que son los valores de
  respaldo de aqui abajo. Una sola definicion sirve a las dos superficies.

  Los contrastes de docs/diseno/plan-de-diseno.md estan calculados sobre estos
  valores con la formula de WCAG; se vuelven a medir servidos en F1.10.
*/
:root {
    /* --- los cuatro de la marca --------------------------------------- */
    --tinta:       var(--color-primario, #0D2E3D);
    --secundario:  var(--color-secundario, #598381);
    --acento:      var(--color-acento, #49EDCB);
    --papel:       var(--color-fondo, #F4F2F3);
    --blanco:      #FFFFFF;

    /* --- texto: todos >= 4,5:1 sobre blanco y sobre papel --------------- */
    --texto:         var(--tinta);
    --texto-2:       color-mix(in srgb, var(--tinta) 76%, var(--blanco));
    --texto-3:       color-mix(in srgb, var(--tinta) 68%, var(--blanco));
    --texto-inverso: var(--papel);
    --texto-inverso-2: color-mix(in srgb, var(--papel) 70%, var(--tinta));

    /* --- superficies y bordes ------------------------------------------- */
    --superficie:    var(--blanco);
    --superficie-2:  color-mix(in srgb, var(--papel) 50%, var(--blanco));
    --superficie-oscura: var(--tinta);
    --superficie-oscura-2: color-mix(in srgb, var(--tinta) 88%, var(--blanco));
    --borde:         color-mix(in srgb, var(--tinta) 14%, var(--blanco));
    --borde-fuerte:  color-mix(in srgb, var(--tinta) 44%, var(--blanco));
    --borde-oscuro:  color-mix(in srgb, var(--papel) 18%, var(--tinta));
    --acento-suave:  color-mix(in srgb, var(--acento) 18%, var(--blanco));
    --tinta-suave:   color-mix(in srgb, var(--tinta) 8%, var(--blanco));
    --apagado:       color-mix(in srgb, var(--secundario) 20%, var(--blanco));
    --realce:        color-mix(in srgb, var(--acento) 10%, var(--blanco));
    --deshabilitado: color-mix(in srgb, var(--secundario) 35%, var(--blanco));

    /* --- las dos familias reservadas: rojo y ambar ----------------------- */
    --rojo:            #B00020;
    --rojo-texto:      #7A0016;
    --rojo-suave:      #FBE3E3;
    --ambar:           #B8860B;
    --ambar-texto:     #6B4E00;
    --ambar-suave:     #FFF4D6;

    /* --- estados: cada estado del sistema cae en un tono, siempre con texto */
    --estado-espera-fondo:    var(--superficie-2);
    --estado-espera-texto:    var(--texto-2);
    --estado-espera-borde:    var(--borde);
    --estado-marcha-fondo:    var(--acento-suave);
    --estado-marcha-texto:    var(--tinta);
    --estado-marcha-borde:    color-mix(in srgb, var(--acento) 55%, var(--blanco));
    --estado-cerrado-fondo:   var(--tinta-suave);
    --estado-cerrado-texto:   var(--tinta);
    --estado-cerrado-borde:   color-mix(in srgb, var(--tinta) 30%, var(--blanco));
    --estado-apagado-fondo:   var(--apagado);
    --estado-apagado-texto:   var(--texto-2);
    --estado-apagado-borde:   color-mix(in srgb, var(--secundario) 50%, var(--blanco));
    --estado-atencion-fondo:  var(--ambar-suave);
    --estado-atencion-texto:  var(--ambar-texto);
    --estado-atencion-borde:  color-mix(in srgb, var(--ambar) 45%, var(--blanco));
    --estado-problema-fondo:  var(--rojo-suave);
    --estado-problema-texto:  var(--rojo-texto);
    --estado-problema-borde:  color-mix(in srgb, var(--rojo) 40%, var(--blanco));

    /* --- foco de dos tonos ---------------------------------------------- */
    --foco-claro:  var(--tinta);
    --foco-oscuro: var(--acento);

    /* --- tipografia ----------------------------------------------------- */
    --familia-titulos: "Inter", system-ui, -apple-system, sans-serif;
    --familia-texto:   var(--familia-titulos);
    --letra-titulo:    clamp(2rem, 3.2vw, 3rem);    /* 28–36 px; cada superficie define su encabezado principal */
    --letra-seccion:   1.5rem;    /* 20 */
    --letra-cifra:     1.5rem;     /* 24 */
    --letra-cuerpo:    1rem;  /* 15 en el panel; 16 en el portal y la pagina */
    --letra-tabla:     0.875rem;   /* 14 */
    --letra-etiqueta:  0.875rem;   /* 14 */
    --letra-apoyo:     0.8125rem;  /* 13 */
    --letra-insignia:  0.75rem;    /* 12 */
    --interlinea-titulo:  1.15;
    --interlinea-seccion: 1.25;
    --interlinea-cifra:   1.2;
    --interlinea-cuerpo:  1.55;
    --interlinea-tabla:   1.45;
    --interlinea-apoyo:   1.45;
    --ancho-lectura:      70ch;

    /* --- espacio: escala de 4 px ---------------------------------------- */
    --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 20px;
    --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px; --e16: 64px;

    /* --- forma ---------------------------------------------------------- */
    --radio-control: 9px;
    --radio-tarjeta: 12px;
    --radio-capa:    18px;
    --radio-pildora: 999px;
    --sombra-capa:   0 2px 8px color-mix(in srgb, var(--tinta) 8%, transparent);
    --alto-control:  2.75rem;   /* 44 px: el objetivo tactil */
    --alto-control-chico: 2.25rem;

    /* --- movimiento: solo como respuesta a una accion ------------------- */
    --transicion: 160ms ease-out;
    --transicion-capa: 180ms ease-out;

    /* --- armazon del panel ---------------------------------------------- */
    --ancho-lateral: 256px;
    --alto-superior: 80px;
    --ancho-portal:  1120px;
}

@media (prefers-reduced-motion: reduce) {
    :root { --transicion: 0ms; --transicion-capa: 0ms; }
}