/* ============================================================
   SIADME — Respaldo para navegadores sin color-mix()
   ============================================================
   POR QUÉ EXISTE ESTE ARCHIVO

   color-mix() existe desde Chrome 111 / Firefox 113. En Windows 7, 8 y
   Server 2012 el máximo que se puede instalar es Chrome 109, y ahí TODO
   lo que se pinta con color-mix() se rompe. No es un detalle estético:

     - `background: color-mix(...)` → la tarjeta queda TRANSPARENTE
     - `color: color-mix(...)`      → el ícono watermark toma el color del
                                      TEXTO y aparece gigante y negro

   OJO CON EL TRUCO DE "DECLARAR EL RESPALDO ANTES": no sirve. Cuando la
   función lleva var() adentro, el navegador acepta la declaración al
   parsear y recién falla al resolverla; en esa etapa la propiedad NO cae
   a la declaración anterior, queda en su valor inicial (background →
   transparent) o hereda (color → el del texto). Por eso el respaldo tiene
   que ir en un bloque aparte, y ese bloque es este archivo.

   CÓMO FUNCIONA

   Todo cuelga de `@supports not (color: color-mix(...))`: los navegadores
   que SÍ entienden color-mix ni siquiera parsean lo de adentro, así que
   este archivo no puede romper nada en un Chrome actual. @supports lo
   entienden todos los navegadores relevantes, incluido el 109.

   La técnica es `rgba(var(--token-rgb), .N)`, que anda desde 2013:

     color-mix(in srgb, X 12%, transparent)      →  rgba(X, .12)
     color-mix(in srgb, X 12%, var(--c-surface)) →  fondo = surface
                                                     + capa rgba(X, .12)

   El segundo caso va con background-color + background-image porque una
   capa translúcida sola dejaría ver el fondo de la página en vez de la
   superficie de la tarjeta. Los dos son equivalentes exactos.

   Para eso hace falta el color en componentes ("30, 90, 171" en vez de
   "#1E5AAB"). Esos --*-rgb se definen ACÁ ADENTRO, tema por tema, para no
   ensuciar tokens.css. Están generados desde tokens.css, así que si
   cambiás un color de tema hay que actualizar los dos lados.

   LO QUE NO SE PUEDE REPRODUCIR

   `color-mix(in srgb, X 80%, black)` (oscurecer) no tiene equivalente en
   rgba. Donde aparece — los degradados de relieve de arcilla y bento —
   el respaldo usa el color pleno: el botón se ve plano en vez de con
   volumen, pero se ve bien. Es una degradación a propósito.

   ALCANCE: las pantallas de /app (los 16 temas). Los portales y
   turnos-web tienen sus propios tokens, inyectados desde la BD, y van
   aparte.

   El día que no quede ningún Windows 7 dando vueltas, se borra este
   archivo y se saca el <link> del shell. Nada más depende de él.
   ============================================================ */

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

  /* ------------------------------------------------------------------
     1. Los colores de cada tema en componentes R, G, B
     ------------------------------------------------------------------
     Generado desde tokens.css. Replica su misma cascada: :root define
     todo y cada tema pisa solo lo que redefine.
     ------------------------------------------------------------------ */
  :root,
  [data-theme="clinico-clasico"] {
    --c-primary-rgb: 30, 90, 171;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 34, 168, 113;
    --c-success-soft-rgb: 225, 245, 236;
    --c-warning-rgb: 216, 140, 31;
    --c-warning-soft-rgb: 251, 241, 221;
    --c-danger-rgb: 209, 67, 67;
    --c-danger-soft-rgb: 251, 228, 228;
    --c-info-rgb: 58, 130, 232;
    --c-info-soft-rgb: 228, 238, 251;
    --c-st-reservado-rgb: 107, 123, 149;
    --c-st-confirmado-rgb: 30, 90, 171;
    --c-st-presente-rgb: 216, 140, 31;
    --c-st-atendido-rgb: 34, 168, 113;
    --c-st-cancelado-rgb: 137, 147, 164;
    --c-st-ausente-rgb: 209, 67, 67;
  }

  [data-theme="azul-claro"] {
    --c-primary-rgb: 31, 122, 181;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 34, 168, 113;
    --c-success-soft-rgb: 220, 243, 231;
    --c-warning-rgb: 194, 138, 47;
    --c-warning-soft-rgb: 244, 233, 206;
    --c-danger-rgb: 204, 63, 63;
    --c-danger-soft-rgb: 250, 222, 222;
    --c-info-rgb: 31, 122, 181;
    --c-info-soft-rgb: 221, 236, 246;
    --c-st-reservado-rgb: 107, 123, 149;
    --c-st-confirmado-rgb: 31, 122, 181;
    --c-st-presente-rgb: 194, 138, 47;
    --c-st-atendido-rgb: 34, 168, 113;
    --c-st-cancelado-rgb: 137, 147, 164;
    --c-st-ausente-rgb: 204, 63, 63;
  }

  [data-theme="azul-medio"] {
    --c-primary-rgb: 31, 77, 216;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 31, 161, 104;
    --c-success-soft-rgb: 218, 241, 229;
    --c-warning-rgb: 216, 140, 31;
    --c-warning-soft-rgb: 251, 241, 221;
    --c-danger-rgb: 208, 59, 59;
    --c-danger-soft-rgb: 251, 223, 223;
    --c-info-rgb: 31, 77, 216;
    --c-info-soft-rgb: 228, 234, 251;
    --c-st-reservado-rgb: 111, 119, 150;
    --c-st-confirmado-rgb: 31, 77, 216;
    --c-st-presente-rgb: 216, 140, 31;
    --c-st-atendido-rgb: 31, 161, 104;
    --c-st-cancelado-rgb: 137, 147, 164;
    --c-st-ausente-rgb: 208, 59, 59;
  }

  [data-theme="azul-oscuro"] {
    --c-primary-rgb: 15, 45, 94;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 31, 136, 89;
    --c-success-soft-rgb: 220, 238, 228;
    --c-warning-rgb: 182, 116, 29;
    --c-warning-soft-rgb: 244, 227, 201;
    --c-danger-rgb: 181, 54, 54;
    --c-danger-soft-rgb: 242, 215, 215;
    --c-info-rgb: 15, 45, 94;
    --c-info-soft-rgb: 220, 228, 241;
    --c-st-reservado-rgb: 111, 119, 150;
    --c-st-confirmado-rgb: 15, 45, 94;
    --c-st-presente-rgb: 182, 116, 29;
    --c-st-atendido-rgb: 31, 136, 89;
    --c-st-cancelado-rgb: 137, 147, 164;
    --c-st-ausente-rgb: 181, 54, 54;
  }

  [data-theme="arcilla"] {
    --c-primary-rgb: 184, 90, 62;
    --c-surface-rgb: 248, 242, 232;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 74, 107, 63;
    --c-success-soft-rgb: 220, 233, 210;
    --c-warning-rgb: 176, 122, 31;
    --c-warning-soft-rgb: 242, 235, 216;
    --c-danger-rgb: 160, 58, 48;
    --c-danger-soft-rgb: 242, 218, 211;
    --c-info-rgb: 42, 95, 143;
    --c-info-soft-rgb: 216, 226, 238;
    --c-st-reservado-rgb: 138, 128, 113;
    --c-st-confirmado-rgb: 184, 90, 62;
    --c-st-presente-rgb: 176, 122, 31;
    --c-st-atendido-rgb: 74, 107, 63;
    --c-st-cancelado-rgb: 181, 172, 151;
    --c-st-ausente-rgb: 160, 58, 48;
    --c-clay-card-rgb: 248, 242, 232;
    --c-clay-elev-from-rgb: 251, 246, 238;
    --c-clay-elev-to-rgb: 237, 226, 208;
    --c-clay-text-rgb: 107, 63, 38;
    --mk-1-rgb: 122, 147, 181;
    --mk-2-rgb: 130, 160, 133;
    --mk-3-rgb: 196, 149, 101;
    --mk-4-rgb: 168, 137, 92;
    --mk-5-rgb: 159, 137, 168;
    --mk-6-rgb: 122, 159, 160;
  }

  [data-theme="arcilla-azul"] {
    --c-primary-rgb: 90, 127, 181;
    --c-surface-rgb: 242, 246, 251;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 74, 123, 92;
    --c-success-soft-rgb: 220, 233, 222;
    --c-warning-rgb: 176, 138, 58;
    --c-warning-soft-rgb: 242, 235, 216;
    --c-danger-rgb: 166, 84, 80;
    --c-danger-soft-rgb: 242, 220, 218;
    --c-info-rgb: 90, 127, 181;
    --c-info-soft-rgb: 221, 230, 241;
    --c-st-reservado-rgb: 133, 144, 168;
    --c-st-confirmado-rgb: 90, 127, 181;
    --c-st-presente-rgb: 176, 138, 58;
    --c-st-atendido-rgb: 74, 123, 92;
    --c-st-cancelado-rgb: 172, 181, 194;
    --c-st-ausente-rgb: 166, 84, 80;
    --c-clay-card-rgb: 242, 246, 251;
    --c-clay-elev-from-rgb: 251, 252, 254;
    --c-clay-elev-to-rgb: 229, 236, 245;
    --c-clay-text-rgb: 46, 63, 88;
    --mk-1-rgb: 90, 127, 181;
    --mk-2-rgb: 111, 162, 138;
    --mk-3-rgb: 181, 146, 110;
    --mk-4-rgb: 138, 133, 168;
    --mk-5-rgb: 163, 120, 136;
    --mk-6-rgb: 111, 159, 168;
  }

  [data-theme="arcilla-verde"] {
    --c-primary-rgb: 92, 138, 107;
    --c-surface-rgb: 242, 247, 241;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 92, 138, 107;
    --c-success-soft-rgb: 221, 233, 222;
    --c-warning-rgb: 176, 138, 58;
    --c-warning-soft-rgb: 242, 235, 216;
    --c-danger-rgb: 165, 84, 72;
    --c-danger-soft-rgb: 242, 220, 211;
    --c-info-rgb: 90, 133, 168;
    --c-info-soft-rgb: 221, 229, 237;
    --c-st-reservado-rgb: 133, 146, 133;
    --c-st-confirmado-rgb: 92, 138, 107;
    --c-st-presente-rgb: 176, 138, 58;
    --c-st-atendido-rgb: 92, 138, 107;
    --c-st-cancelado-rgb: 172, 181, 172;
    --c-st-ausente-rgb: 165, 84, 72;
    --c-clay-card-rgb: 242, 247, 241;
    --c-clay-elev-from-rgb: 250, 252, 249;
    --c-clay-elev-to-rgb: 229, 236, 226;
    --c-clay-text-rgb: 46, 64, 49;
    --mk-1-rgb: 90, 133, 168;
    --mk-2-rgb: 92, 138, 107;
    --mk-3-rgb: 181, 146, 110;
    --mk-4-rgb: 168, 140, 92;
    --mk-5-rgb: 159, 137, 168;
    --mk-6-rgb: 111, 168, 160;
  }

  [data-theme="arcilla-blanco"] {
    --c-primary-rgb: 74, 82, 96;
    --c-surface-rgb: 245, 245, 247;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 90, 117, 96;
    --c-success-soft-rgb: 221, 227, 222;
    --c-warning-rgb: 168, 132, 58;
    --c-warning-soft-rgb: 239, 234, 216;
    --c-danger-rgb: 152, 84, 80;
    --c-danger-soft-rgb: 239, 220, 218;
    --c-info-rgb: 90, 112, 144;
    --c-info-soft-rgb: 220, 226, 234;
    --c-st-reservado-rgb: 138, 142, 152;
    --c-st-confirmado-rgb: 74, 82, 96;
    --c-st-presente-rgb: 168, 132, 58;
    --c-st-atendido-rgb: 90, 117, 96;
    --c-st-cancelado-rgb: 172, 174, 181;
    --c-st-ausente-rgb: 152, 84, 80;
    --c-clay-card-rgb: 245, 245, 247;
    --c-clay-elev-from-rgb: 251, 251, 252;
    --c-clay-elev-to-rgb: 232, 232, 235;
    --c-clay-text-rgb: 46, 50, 58;
    --mk-1-rgb: 90, 112, 144;
    --mk-2-rgb: 90, 117, 96;
    --mk-3-rgb: 168, 132, 58;
    --mk-4-rgb: 142, 142, 152;
    --mk-5-rgb: 144, 130, 160;
    --mk-6-rgb: 111, 138, 142;
  }

  [data-theme="bento"] {
    --c-primary-rgb: 94, 146, 119;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 46, 139, 64;
    --c-success-soft-rgb: 222, 234, 224;
    --c-warning-rgb: 197, 119, 48;
    --c-warning-soft-rgb: 252, 233, 208;
    --c-danger-rgb: 192, 57, 43;
    --c-danger-soft-rgb: 250, 220, 208;
    --c-info-rgb: 58, 124, 165;
    --c-info-soft-rgb: 220, 234, 242;
    --c-st-reservado-rgb: 108, 113, 133;
    --c-st-confirmado-rgb: 94, 146, 119;
    --c-st-presente-rgb: 197, 119, 48;
    --c-st-atendido-rgb: 46, 139, 64;
    --c-st-cancelado-rgb: 154, 160, 176;
    --c-st-ausente-rgb: 192, 57, 43;
    --mk-1-rgb: 123, 168, 143;
    --mk-2-rgb: 232, 137, 110;
    --mk-3-rgb: 197, 119, 48;
    --mk-4-rgb: 183, 158, 191;
    --mk-5-rgb: 124, 155, 201;
    --mk-6-rgb: 208, 143, 160;
  }

  [data-theme="bento-coral"] {
    --c-primary-rgb: 210, 106, 79;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 46, 139, 64;
    --c-success-soft-rgb: 222, 234, 224;
    --c-warning-rgb: 197, 119, 48;
    --c-warning-soft-rgb: 252, 233, 208;
    --c-danger-rgb: 192, 57, 43;
    --c-danger-soft-rgb: 250, 220, 208;
    --c-info-rgb: 58, 124, 165;
    --c-info-soft-rgb: 220, 234, 242;
    --c-st-reservado-rgb: 108, 113, 133;
    --c-st-confirmado-rgb: 210, 106, 79;
    --c-st-presente-rgb: 197, 119, 48;
    --c-st-atendido-rgb: 46, 139, 64;
    --c-st-cancelado-rgb: 154, 160, 176;
    --c-st-ausente-rgb: 192, 57, 43;
    --mk-1-rgb: 123, 168, 143;
    --mk-2-rgb: 232, 137, 110;
    --mk-3-rgb: 197, 119, 48;
    --mk-4-rgb: 183, 158, 191;
    --mk-5-rgb: 124, 155, 201;
    --mk-6-rgb: 208, 143, 160;
  }

  [data-theme="bento-gris"] {
    --c-primary-rgb: 91, 107, 127;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 46, 139, 64;
    --c-success-soft-rgb: 222, 234, 224;
    --c-warning-rgb: 197, 119, 48;
    --c-warning-soft-rgb: 252, 233, 208;
    --c-danger-rgb: 192, 57, 43;
    --c-danger-soft-rgb: 250, 220, 208;
    --c-info-rgb: 58, 124, 165;
    --c-info-soft-rgb: 220, 234, 242;
    --c-st-reservado-rgb: 108, 113, 133;
    --c-st-confirmado-rgb: 91, 107, 127;
    --c-st-presente-rgb: 197, 119, 48;
    --c-st-atendido-rgb: 46, 139, 64;
    --c-st-cancelado-rgb: 154, 160, 176;
    --c-st-ausente-rgb: 192, 57, 43;
    --mk-1-rgb: 123, 168, 143;
    --mk-2-rgb: 232, 137, 110;
    --mk-3-rgb: 197, 119, 48;
    --mk-4-rgb: 183, 158, 191;
    --mk-5-rgb: 124, 155, 201;
    --mk-6-rgb: 208, 143, 160;
  }

  [data-theme="bento-celeste"] {
    --c-primary-rgb: 58, 124, 165;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 46, 139, 64;
    --c-success-soft-rgb: 221, 234, 224;
    --c-warning-rgb: 197, 119, 48;
    --c-warning-soft-rgb: 250, 235, 214;
    --c-danger-rgb: 192, 57, 43;
    --c-danger-soft-rgb: 247, 217, 211;
    --c-info-rgb: 58, 124, 165;
    --c-info-soft-rgb: 220, 234, 244;
    --c-st-reservado-rgb: 90, 107, 125;
    --c-st-confirmado-rgb: 58, 124, 165;
    --c-st-presente-rgb: 197, 119, 48;
    --c-st-atendido-rgb: 46, 139, 64;
    --c-st-cancelado-rgb: 144, 160, 176;
    --c-st-ausente-rgb: 192, 57, 43;
    --mk-1-rgb: 123, 168, 143;
    --mk-2-rgb: 232, 137, 110;
    --mk-3-rgb: 197, 119, 48;
    --mk-4-rgb: 183, 158, 191;
    --mk-5-rgb: 124, 155, 201;
    --mk-6-rgb: 208, 143, 160;
  }

  [data-theme="densa"] {
    --c-primary-rgb: 25, 168, 155;
    --c-surface-rgb: 24, 34, 43;
    --c-text-on-primary-rgb: 4, 32, 28;
    --c-success-rgb: 63, 195, 147;
    --c-success-soft-rgb: 22, 49, 42;
    --c-warning-rgb: 226, 166, 70;
    --c-warning-soft-rgb: 53, 43, 24;
    --c-danger-rgb: 233, 101, 115;
    --c-danger-soft-rgb: 56, 31, 37;
    --c-info-rgb: 87, 168, 222;
    --c-info-soft-rgb: 21, 44, 59;
    --c-st-reservado-rgb: 143, 160, 172;
    --c-st-confirmado-rgb: 25, 168, 155;
    --c-st-presente-rgb: 226, 166, 70;
    --c-st-atendido-rgb: 63, 195, 147;
    --c-st-cancelado-rgb: 103, 119, 133;
    --c-st-ausente-rgb: 233, 101, 115;
    --mk-1-rgb: 87, 168, 222;
    --mk-2-rgb: 63, 195, 147;
    --mk-3-rgb: 226, 166, 70;
    --mk-4-rgb: 199, 160, 106;
    --mk-5-rgb: 174, 138, 232;
    --mk-6-rgb: 63, 182, 201;
  }

  [data-theme="densa-midnight"] {
    --c-primary-rgb: 63, 143, 224;
    --c-surface-rgb: 21, 33, 53;
    --c-text-on-primary-rgb: 4, 18, 31;
    --c-success-rgb: 72, 201, 143;
    --c-success-soft-rgb: 18, 53, 40;
    --c-warning-rgb: 228, 170, 72;
    --c-warning-soft-rgb: 53, 44, 24;
    --c-danger-rgb: 236, 102, 117;
    --c-danger-soft-rgb: 56, 30, 38;
    --c-info-rgb: 63, 143, 224;
    --c-info-soft-rgb: 20, 38, 62;
    --c-st-reservado-rgb: 139, 154, 180;
    --c-st-confirmado-rgb: 63, 143, 224;
    --c-st-presente-rgb: 228, 170, 72;
    --c-st-atendido-rgb: 72, 201, 143;
    --c-st-cancelado-rgb: 98, 113, 142;
    --c-st-ausente-rgb: 236, 102, 117;
    --mk-1-rgb: 63, 143, 224;
    --mk-2-rgb: 72, 201, 143;
    --mk-3-rgb: 228, 170, 72;
    --mk-4-rgb: 199, 155, 106;
    --mk-5-rgb: 169, 139, 234;
    --mk-6-rgb: 70, 183, 207;
  }

  [data-theme="densa-clear"] {
    --c-primary-rgb: 28, 111, 181;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 10, 124, 85;
    --c-success-soft-rgb: 220, 243, 233;
    --c-warning-rgb: 176, 100, 12;
    --c-warning-soft-rgb: 251, 238, 220;
    --c-danger-rgb: 184, 37, 50;
    --c-danger-soft-rgb: 251, 221, 225;
    --c-info-rgb: 28, 111, 181;
    --c-info-soft-rgb: 219, 234, 245;
    --c-st-reservado-rgb: 107, 123, 149;
    --c-st-confirmado-rgb: 28, 111, 181;
    --c-st-presente-rgb: 176, 100, 12;
    --c-st-atendido-rgb: 10, 124, 85;
    --c-st-cancelado-rgb: 142, 153, 168;
    --c-st-ausente-rgb: 184, 37, 50;
    --mk-1-rgb: 63, 127, 190;
    --mk-2-rgb: 46, 158, 120;
    --mk-3-rgb: 201, 132, 46;
    --mk-4-rgb: 168, 137, 92;
    --mk-5-rgb: 132, 102, 196;
    --mk-6-rgb: 46, 143, 166;
  }

  [data-theme="densa-sage"] {
    --c-primary-rgb: 46, 125, 107;
    --c-surface-rgb: 255, 255, 255;
    --c-text-on-primary-rgb: 255, 255, 255;
    --c-success-rgb: 31, 125, 84;
    --c-success-soft-rgb: 219, 241, 229;
    --c-warning-rgb: 156, 100, 16;
    --c-warning-soft-rgb: 247, 235, 214;
    --c-danger-rgb: 178, 51, 65;
    --c-danger-soft-rgb: 248, 220, 223;
    --c-info-rgb: 18, 124, 132;
    --c-info-soft-rgb: 216, 240, 241;
    --c-st-reservado-rgb: 124, 138, 128;
    --c-st-confirmado-rgb: 46, 125, 107;
    --c-st-presente-rgb: 156, 100, 16;
    --c-st-atendido-rgb: 31, 125, 84;
    --c-st-cancelado-rgb: 154, 168, 158;
    --c-st-ausente-rgb: 178, 51, 65;
    --mk-1-rgb: 78, 143, 160;
    --mk-2-rgb: 46, 158, 120;
    --mk-3-rgb: 201, 132, 46;
    --mk-4-rgb: 160, 137, 92;
    --mk-5-rgb: 126, 102, 184;
    --mk-6-rgb: 46, 143, 132;
  }

  /* ------------------------------------------------------------------
     SOBRE LA FORMA DE ESCRIBIR LAS REGLAS

     Donde el original mezcla contra una superficie va el shorthand
     `background: linear-gradient(capa, capa) <color>`, NO las longhands
     background-color + background-image por separado: las reglas que
     estamos respaldando usan el shorthand `background:`, y un longhand
     no lo pisa del todo — el background-color viejo (el color-mix roto)
     sobrevive y la capa se suma encima del color equivocado.
     ------------------------------------------------------------------ */

  /* ------------------------------------------------------------------
     2. Temas planos — clinico-clasico, azul-claro, azul-medio, azul-oscuro
     ------------------------------------------------------------------
     app.css:1522-1550. Los 4 KPI del inicio: fondo con un toque del color
     semántico e ícono watermark del mismo color. Es LO QUE SE VE ROTO en
     Chrome 109: tarjetas blancas con un ícono negro enorme encima.
     ------------------------------------------------------------------ */
  :where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(1) { --mk-rgb: var(--c-primary-rgb); }
  :where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(2) { --mk-rgb: var(--c-success-rgb); }
  :where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(3) { --mk-rgb: var(--c-warning-rgb); }
  :where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi:nth-child(4) { --mk-rgb: var(--c-info-rgb); }

  :where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi {
    background: linear-gradient(rgba(var(--mk-rgb, var(--c-primary-rgb)), .12),
                                rgba(var(--mk-rgb, var(--c-primary-rgb)), .12)) var(--c-surface);
  }
  :where([data-theme="clinico-clasico"],[data-theme="azul-claro"],[data-theme="azul-medio"],[data-theme="azul-oscuro"]) .kpi::after {
    color: rgba(var(--mk-rgb, var(--c-primary-rgb)), .16);
  }

  /* ------------------------------------------------------------------
     3. Agenda — fila seleccionada y tinte por estado
     ------------------------------------------------------------------
     app.css:1667-1671 y 1805-1817. Sin esto las filas quedan todas
     blancas y se pierde la señal de estado, que es información, no
     decoración.
     ------------------------------------------------------------------ */
  .agenda-day__row[data-state="reservado"]  { --st-rgb: var(--c-st-reservado-rgb); }
  .agenda-day__row[data-state="confirmado"] { --st-rgb: var(--c-st-confirmado-rgb); }
  .agenda-day__row[data-state="presente"]   { --st-rgb: var(--c-st-presente-rgb); }
  .agenda-day__row[data-state="atendido"]   { --st-rgb: var(--c-st-atendido-rgb); }
  .agenda-day__row[data-state="ausente"]    { --st-rgb: var(--c-st-ausente-rgb); }
  .agenda-day__row[data-state="cancelado"]  { --st-rgb: var(--c-st-cancelado-rgb); }

  .agenda-day__row[data-state] {
    background: linear-gradient(rgba(var(--st-rgb), .07), rgba(var(--st-rgb), .07)) var(--c-surface);
  }
  .agenda-day__row[data-state]:hover {
    background: linear-gradient(rgba(var(--st-rgb), .13), rgba(var(--st-rgb), .13)) var(--c-surface);
  }
  /* presente va un punto más arriba en el original (8% / 14%) */
  .agenda-day__row[data-state="presente"] {
    background: linear-gradient(rgba(var(--st-rgb), .08), rgba(var(--st-rgb), .08)) var(--c-surface);
  }
  .agenda-day__row[data-state="presente"]:hover {
    background: linear-gradient(rgba(var(--st-rgb), .14), rgba(var(--st-rgb), .14)) var(--c-surface);
  }

  .agenda-day__row--selected {
    background: linear-gradient(rgba(var(--c-primary-rgb), .22), rgba(var(--c-primary-rgb), .22)) var(--c-surface) !important;
  }
  .agenda-day__row--selected:hover {
    background: linear-gradient(rgba(var(--c-primary-rgb), .28), rgba(var(--c-primary-rgb), .28)) var(--c-surface) !important;
  }

  /* ------------------------------------------------------------------
     4. Listados — fila seleccionada de ABM y de pacientes
     ------------------------------------------------------------------ */
  .abm-list__item--selected,
  .patient-list__row--selected {
    background: linear-gradient(rgba(var(--c-primary-rgb), .22), rgba(var(--c-primary-rgb), .22)) var(--c-surface) !important;
  }
  .patient-list__row--selected:hover {
    background: linear-gradient(rgba(var(--c-primary-rgb), .28), rgba(var(--c-primary-rgb), .28)) var(--c-surface) !important;
  }

  /* ------------------------------------------------------------------
     5. Inicio — íconos de "Pendientes del día"
     ------------------------------------------------------------------
     app.css:2651-2656. El color del ícono no usa color-mix (ese anda);
     lo que se pierde es el círculo de fondo.
     ------------------------------------------------------------------ */
  .dash-pending-card:nth-child(1) .dash-pending-card__icon { --pc-rgb: var(--c-success-rgb); }
  .dash-pending-card:nth-child(2) .dash-pending-card__icon { --pc-rgb: var(--c-warning-rgb); }
  .dash-pending-card:nth-child(3) .dash-pending-card__icon { --pc-rgb: var(--c-info-rgb); }
  .dash-pending-card:nth-child(4) .dash-pending-card__icon { --pc-rgb: var(--c-danger-rgb); }
  .dash-pending-card:nth-child(5) .dash-pending-card__icon { --pc-rgb: var(--c-primary-rgb); }
  .dash-pending-card:nth-child(6) .dash-pending-card__icon { --pc-rgb: var(--c-success-rgb); }
  .dash-pending-card .dash-pending-card__icon {
    background: linear-gradient(rgba(var(--pc-rgb, var(--c-primary-rgb)), .15),
                                rgba(var(--pc-rgb, var(--c-primary-rgb)), .15)) var(--c-surface);
  }

  /* ------------------------------------------------------------------
     6. Tema densa
     ------------------------------------------------------------------
     app-densa.css:97 y 113. densa nunca define --mk, así que los 4 KPI
     van todos con el primario (igual que en el original).
     ------------------------------------------------------------------ */
  [data-theme^="densa"] .kpi {
    background: linear-gradient(rgba(var(--c-primary-rgb), .12), rgba(var(--c-primary-rgb), .12)) var(--c-surface);
  }
  [data-theme^="densa"] .kpi::after {
    color: rgba(var(--c-primary-rgb), .16);
  }

  /* ------------------------------------------------------------------
     7. Tema bento
     ------------------------------------------------------------------
     app-bento.css. Los botones de acción mezclaban con white/black para
     suavizar o profundizar el tono: acá van con el color pleno. Se pierde
     el matiz, no la legibilidad ni el contraste.
     ------------------------------------------------------------------ */
  [data-theme^="bento"] .kpi:nth-child(1),
  [data-theme^="bento"] .quick-action:nth-child(1),
  [data-theme^="bento"] .dash-pending-card:nth-child(1) .dash-pending-card__icon,
  [data-theme^="bento"] .dash-news-item__thumb--link  { --mk-rgb: var(--mk-1-rgb); }
  [data-theme^="bento"] .kpi:nth-child(2),
  [data-theme^="bento"] .quick-action:nth-child(2),
  [data-theme^="bento"] .dash-pending-card:nth-child(2) .dash-pending-card__icon,
  [data-theme^="bento"] .dash-news-item__thumb        { --mk-rgb: var(--mk-2-rgb); }
  [data-theme^="bento"] .kpi:nth-child(3),
  [data-theme^="bento"] .quick-action:nth-child(3),
  [data-theme^="bento"] .dash-pending-card:nth-child(3) .dash-pending-card__icon,
  [data-theme^="bento"] .dash-news-item__thumb--note  { --mk-rgb: var(--mk-3-rgb); }
  [data-theme^="bento"] .kpi:nth-child(4),
  [data-theme^="bento"] .quick-action:nth-child(4),
  [data-theme^="bento"] .dash-pending-card:nth-child(4) .dash-pending-card__icon,
  [data-theme^="bento"] .dash-news-item__thumb--video { --mk-rgb: var(--mk-4-rgb); }
  [data-theme^="bento"] .kpi:nth-child(5),
  [data-theme^="bento"] .quick-action:nth-child(5),
  [data-theme^="bento"] .dash-pending-card:nth-child(5) .dash-pending-card__icon { --mk-rgb: var(--mk-5-rgb); }
  [data-theme^="bento"] .kpi:nth-child(6),
  [data-theme^="bento"] .quick-action:nth-child(6),
  [data-theme^="bento"] .dash-pending-card:nth-child(6) .dash-pending-card__icon { --mk-rgb: var(--mk-6-rgb); }

  /* El original suma un radial-gradient de brillo arriba a la derecha; el
     respaldo deja solo la capa de color plana. */
  [data-theme^="bento"] .kpi {
    background: linear-gradient(rgba(var(--mk-rgb, var(--c-primary-rgb)), .09),
                                rgba(var(--mk-rgb, var(--c-primary-rgb)), .09)) var(--c-surface) !important;
  }
  [data-theme^="bento"] .kpi::after {
    color: rgba(var(--mk-rgb, var(--c-primary-rgb)), .20);
  }
  [data-theme^="bento"] .dash-pending-card__icon {
    background: linear-gradient(rgba(var(--mk-rgb, var(--c-primary-rgb)), .16),
                                rgba(var(--mk-rgb, var(--c-primary-rgb)), .16)) #fff !important;
  }
  [data-theme^="bento"] .nav-item--active {
    box-shadow: 0 4px 12px -4px rgba(var(--c-primary-rgb), .55);
  }
  [data-theme^="bento"] .btn--danger {
    background: var(--c-danger) !important;
    border-color: var(--c-danger) !important;
  }
  [data-theme^="bento"] .btn--success {
    background: var(--c-success) !important;
    border-color: var(--c-success) !important;
  }
  [data-theme^="bento"] .btn--primary.btn-edit:hover {
    background: var(--c-info) !important;
    border-color: var(--c-info) !important;
  }
  [data-theme^="bento"] .dash-welcome {
    background: var(--c-primary) !important;
  }
  [data-theme^="bento"] .dash-welcome__time {
    color: rgba(var(--c-text-on-primary-rgb), .85) !important;
  }

  /* ------------------------------------------------------------------
     8. Tema arcilla
     ------------------------------------------------------------------
     app-clay.css. Es el que más color-mix usa, casi todo para los
     degradados de relieve (el look "arcilla"). Los fondos planos se
     reproducen exactos; los degradados van al color pleno y las piezas
     quedan mates en vez de con volumen.
     ------------------------------------------------------------------ */
  [data-theme^="arcilla"] .kpi:nth-child(1) { --mk-rgb: var(--mk-1-rgb); }
  [data-theme^="arcilla"] .kpi:nth-child(2) { --mk-rgb: var(--mk-2-rgb); }
  [data-theme^="arcilla"] .kpi:nth-child(3) { --mk-rgb: var(--mk-3-rgb); }
  [data-theme^="arcilla"] .kpi:nth-child(4) { --mk-rgb: var(--mk-4-rgb); }
  [data-theme^="arcilla"] .kpi:nth-child(5) { --mk-rgb: var(--mk-5-rgb); }
  [data-theme^="arcilla"] .kpi:nth-child(6) { --mk-rgb: var(--mk-6-rgb); }

  [data-theme^="arcilla"] .kpi {
    background: linear-gradient(rgba(var(--mk-rgb, var(--c-clay-card-rgb)), .12),
                                rgba(var(--mk-rgb, var(--c-clay-card-rgb)), .12)) var(--c-clay-card) !important;
  }
  [data-theme^="arcilla"] .kpi::after {
    color: rgba(var(--mk-rgb, var(--c-clay-text-rgb)), .18);
  }

  /* Fondos planos con un toque del primario — se reproducen exactos. */
  [data-theme^="arcilla"] .nav-group__head        { background: rgba(var(--c-primary-rgb), .06) !important; }
  [data-theme^="arcilla"] .nav-group__head:hover  { background: rgba(var(--c-primary-rgb), .12) !important; }
  [data-theme^="arcilla"] .abm-list__chip         { background: rgba(var(--c-primary-rgb), .06) !important; }
  [data-theme^="arcilla"] .abm-list__chip:hover   { background: rgba(var(--c-primary-rgb), .12) !important; }
  [data-theme^="arcilla"] .abm-list__item:hover   { background: rgba(var(--c-primary-rgb), .05) !important; }
  [data-theme^="arcilla"] .ref-codigo             { background: rgba(var(--c-primary-rgb), .08) !important; }
  [data-theme^="arcilla"] .btn--ghost:hover       { background: rgba(var(--c-primary-rgb), .08) !important; }
  [data-theme^="arcilla"] .abm-section            { background: rgba(var(--c-clay-elev-from-rgb), .70) !important; }
  [data-theme^="arcilla"] .input[readonly] {
    background: linear-gradient(rgba(var(--c-primary-rgb), .04), rgba(var(--c-primary-rgb), .04)) var(--c-clay-elev-from) !important;
  }
  [data-theme^="arcilla"] .input:focus {
    box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .12) !important;
  }

  /* Degradados de relieve → color pleno. */
  [data-theme^="arcilla"] .avatar,
  [data-theme^="arcilla"] .quick-action__badge,
  [data-theme^="arcilla"] .btn--primary           { background: var(--c-danger) !important; }
  [data-theme^="arcilla"] .btn--primary.btn-edit  { background: var(--c-info) !important; }
  [data-theme^="arcilla"] .btn--success           { background: var(--c-success) !important; }
  [data-theme^="arcilla"] .btn--danger            { background: var(--c-danger) !important; }
  [data-theme^="arcilla"] .abm-list__head         { background: var(--c-clay-card) !important; }
  [data-theme^="arcilla"] .abm-detail__head       { background: var(--c-clay-elev-from) !important; }
  [data-theme^="arcilla"] .badge--success {
    background: var(--c-success-soft) !important;
    color: var(--c-success) !important;
  }
  [data-theme^="arcilla"] .dash-news-item__thumb--link,
  [data-theme^="arcilla"] .dash-pending-card__icon--success { background: var(--c-success-soft) !important; }
  [data-theme^="arcilla"] .dash-news-item__thumb--note      { background: var(--c-warning-soft) !important; }
  [data-theme^="arcilla"] .dash-pending-card__icon--danger  { background: var(--c-danger-soft) !important; }
  [data-theme^="arcilla"] .dash-pending-card__icon--info    { background: var(--c-info-soft) !important; }

  /* Estos degradados mezclan contra WHITE, y sobre blanco rgba(X, .15) es
     exactamente color-mix(in srgb, X 15%, white): se reproducen enteros,
     con los dos extremos del degradado y su ángulo. */
  [data-theme^="arcilla"] .dash-news-item__thumb--video {
    background: linear-gradient(145deg, rgba(var(--mk-5-rgb), .15), rgba(var(--mk-5-rgb), .30)) #fff !important;
  }
  /* OJO: el original pinta el ÍCONO, no la tarjeta. El --mk se define en la
     tarjeta y el ícono lo hereda, así que el --pc-rgb va en el mismo lugar. */
  [data-theme^="arcilla"] .dash-pending-card:nth-child(1) { --pc-rgb: var(--mk-1-rgb); }
  [data-theme^="arcilla"] .dash-pending-card:nth-child(2) { --pc-rgb: var(--mk-2-rgb); }
  [data-theme^="arcilla"] .dash-pending-card:nth-child(3) { --pc-rgb: var(--mk-3-rgb); }
  [data-theme^="arcilla"] .dash-pending-card:nth-child(4) { --pc-rgb: var(--mk-4-rgb); }
  [data-theme^="arcilla"] .dash-pending-card:nth-child(5) { --pc-rgb: var(--mk-5-rgb); }
  [data-theme^="arcilla"] .dash-pending-card:nth-child(6) { --pc-rgb: var(--mk-6-rgb); }
  [data-theme^="arcilla"] .dash-pending-card .dash-pending-card__icon {
    background: linear-gradient(145deg, rgba(var(--pc-rgb, var(--c-primary-rgb)), .15),
                                        rgba(var(--pc-rgb, var(--c-primary-rgb)), .32)) #fff !important;
  }

  /* Sombras de color de los botones con relieve. --c-clay-shadow es un
     rgba() y no tiene componentes sueltos, así que el borde del cabezal
     va con un neutro. */
  [data-theme^="arcilla"] .abm-detail__head {
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
  }
  [data-theme^="arcilla"] .avatar {
    box-shadow: 3px 3px 7px rgba(var(--c-danger-rgb), .40) !important;
  }
  [data-theme^="arcilla"] .quick-action__badge,
  [data-theme^="arcilla"] .btn--primary {
    box-shadow: 2px 3px 6px rgba(var(--c-danger-rgb), .33) !important;
  }
  [data-theme^="arcilla"] .btn--primary:hover {
    box-shadow: 1px 2px 4px rgba(var(--c-danger-rgb), .30) !important;
  }
  [data-theme^="arcilla"] .btn--primary.btn-edit {
    box-shadow: 2px 3px 6px rgba(var(--c-info-rgb), .35) !important;
  }
  [data-theme^="arcilla"] .btn--primary.btn-edit:hover {
    box-shadow: 1px 2px 4px rgba(var(--c-info-rgb), .30) !important;
  }
  [data-theme^="arcilla"] .btn--success {
    box-shadow: 2px 3px 6px rgba(var(--c-success-rgb), .30) !important;
  }
  [data-theme^="arcilla"] .btn--danger {
    box-shadow: 2px 3px 6px rgba(var(--c-danger-rgb), .30) !important;
  }

  /* ==================================================================
     9. Pantallas públicas — turnos-web, portal del paciente y de médicos
     ==================================================================
     Acá el navegador no lo elige la institución: lo trae el paciente. Un
     Windows 7 con Chrome 109 es perfectamente posible, y sin esto el
     login del portal se ve sin el hero (queda la foto sin el velo de
     color, con el texto blanco ilegible encima) y turnos-web pierde
     todos los fondos suaves.

     DE DÓNDE SALEN LOS COMPONENTES. Los dos colores del portal
     (--portal-primario y --portal-accent) los elige cada institución
     desde Parámetros, así que no se pueden resolver a mano como los
     temas de /app. Los inyecta el servidor junto a los colores, en el
     mismo <style> de cada página: ver colorRgb() en PortalController,
     PortalMedicoController y TurnosWebController.

     Los tres tonos derivados (--portal-id-bg-dark2, dark3 y
     --portal-id-accent-strong) merecen atención aparte: en
     theme-portal.css están definidos CON color-mix, así que en Chrome
     109 las variables mismas quedan inválidas y arrastran todo lo que
     las usa. Por eso se redefinen acá primero, antes que cualquier
     regla que dependa de ellas.
     ================================================================== */

  /* Valores fijos del CSS público (no dependen de la institución). */
  :root {
    --primario-rgb:        30, 58, 110;    /* #1E3A6E */
    --acento-rgb:          14, 165, 164;   /* #0EA5A4 */
    --texto-primario-rgb:  255, 255, 255;  /* #FFFFFF */
    --portal-success-rgb:  4, 120, 87;     /* #047857 */
    --portal-warning-rgb:  180, 83, 9;     /* #B45309 */
    --portal-danger-rgb:   185, 28, 28;    /* #B91C1C */

    /* Respaldo por si una página no inyecta los colores de la
       institución: son los mismos defaults de theme-portal.css. */
    --portal-primario-rgb:      30, 58, 110;    /* #1E3A6E */
    --portal-accent-rgb:        252, 211, 77;   /* #FCD34D */
    --portal-dark2-rgb:         18, 35, 66;     /* 60% del primario */
    --portal-dark3-rgb:         9, 17, 33;      /* 30% del primario */
    --portal-accent-strong-rgb: 202, 169, 62;   /* 80% del accent */
  }

    
 
 :root {
    
 --portal-id-bg-dark2: rgb(var(--portal-dark2-rgb));
    
 --portal-id-bg-dark3: rgb(var(--portal-dark3-rgb));
    
 --portal-id-accent-strong: rgb(var(--portal-accent-strong-rgb));
    
 
 
 --portal-btn-bg: linear-gradient(135deg,
 rgb(var(--portal-dark2-rgb)) 0%,
 var(--portal-primario) 100%);
    
 --portal-btn-accent-bar: linear-gradient(180deg,
 var(--portal-accent),
 rgb(var(--portal-accent-strong-rgb)));
    
 --portal-btn-shadow: 0 8px 24px rgba(var(--portal-primario-rgb), 0.35);
    
 --portal-btn-shadow-hover: 0 12px 32px rgba(var(--portal-primario-rgb), 0.45);
    }
    
 .dni-icon {
  background: rgba(var(--primario-rgb), 0.12);
    }
    
 input[type="text"]:focus {
    
 box-shadow: 0 0 0 4px rgba(var(--primario-rgb), 0.20);
    }
    
 .turno-card:hover {
  border-color: rgba(var(--primario-rgb), 0.30);
    }
    
 .turno-fecha-bloque {
    
 background: rgba(var(--primario-rgb), 0.10);
    
 border: 1px solid rgba(var(--primario-rgb), 0.25);
    }
    
 .wizard-search input:focus {
  box-shadow: 0 0 0 4px rgba(var(--primario-rgb), 0.18);
    }
    
 .especialidad-card:hover {
  background: rgba(var(--primario-rgb), 0.04);
    }
    
 
  
 .cualquier-medico-card {
    
 background: linear-gradient(135deg, rgba(var(--primario-rgb), 0.08), rgba(var(--acento-rgb), 0.06));
    
 border: 1.5px solid rgba(var(--primario-rgb), 0.30);
    }
    
 .cualquier-medico-card:hover {
  box-shadow: 0 8px 20px rgba(var(--primario-rgb), 0.18);
    }
    
 .medico-avatar {
  background: rgba(var(--primario-rgb), 0.14);
    }
    
 .slot-fecha-titulo {
    
 background: rgba(var(--primario-rgb), 0.10);
  border: 1px solid rgba(var(--primario-rgb), 0.30);
    }
    
 .slot-btn:hover {
  box-shadow: 0 4px 8px rgba(var(--primario-rgb), 0.30);
    }
    
 .slot-grid-medico .slot-btn:hover .slot-btn-medico {
  color: rgba(var(--texto-primario-rgb), 0.80);
    }
    
 .medico-card--select.is-selected {
    
 box-shadow: 0 0 0 2px rgba(var(--primario-rgb), 0.22);
    
 background: rgba(var(--primario-rgb), 0.05);
    }
    
 .combo-chip {
    
 background: rgba(var(--primario-rgb), 0.08);
    
 border: 1px solid rgba(var(--primario-rgb), 0.22);
    }
    
 .combo-tramo__hora {
    
 background: rgba(var(--primario-rgb), 0.10);
    }
  .card-pass__icon {
  background: rgba(var(--portal-primario-rgb), 0.12);
    }
  .field input:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .flash-err {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .alert-primer {
  background: rgba(var(--portal-accent-rgb), 0.18);
  border: 1px solid rgba(var(--portal-accent-rgb), 0.50);
  color: rgb(var(--portal-dark2-rgb));
    }
  body {
  background: radial-gradient(circle at 15% 10%, rgba(var(--portal-primario-rgb), 0.10) 0%, transparent 45%), radial-gradient(circle at 85% 90%, rgba(var(--portal-accent-rgb), 0.10) 0%, transparent 45%), var(--portal-id-bg-soft, #f1f4f9);
    }
  .hero-block {
  background: linear-gradient(135deg, rgba(var(--portal-dark2-rgb), 0.92) 0%, rgba(var(--portal-primario-rgb), 0.88) 100%);
    }
  .hero-block::after {
  background: radial-gradient(circle at 88% 20%, rgba(var(--portal-accent-rgb), 0.18) 0%, transparent 38%), radial-gradient(circle at 12% 100%, rgba(var(--portal-primario-rgb), 0.25) 0%, transparent 40%);
    }
  .hero-block__eyebrow {
  background: rgba(var(--portal-accent-rgb), 0.12);
  border: 1px solid rgba(var(--portal-accent-rgb), 0.32);
    }
  .hero-block h1 .accent {
  background: linear-gradient(90deg, var(--portal-accent) 0%, rgb(var(--portal-accent-strong-rgb)) 100%);
    }
  .action-card__icon {
  box-shadow: 0 6px 16px rgba(var(--portal-primario-rgb), 0.30);
    }
  .flash-ok {
  border: 1px solid rgba(var(--portal-success-rgb), 0.25);
    }
  .flash-err {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .hero {
  background-image: linear-gradient(135deg, rgba(var(--portal-primario-rgb), 0.84) 0%, rgba(var(--portal-dark3-rgb), 0.90) 100%), var(--hero-img);
    }
  .hero::after {
  background: radial-gradient(circle at 25% 15%, rgba(var(--portal-accent-rgb), 0.10) 0%, transparent 35%), radial-gradient(circle at 80% 80%, rgba(var(--portal-primario-rgb), 0.15) 0%, transparent 40%);
    }
  .hero__eyebrow {
  background: rgba(var(--portal-accent-rgb), 0.12);
  border: 1px solid rgba(var(--portal-accent-rgb), 0.32);
    }
  .hero__title .accent {
  background: linear-gradient(90deg, var(--portal-accent) 0%, rgb(var(--portal-accent-strong-rgb)) 100%);
    }
  .hero__stats div {
  border-left: 2px solid rgba(var(--portal-accent-rgb), 0.50);
    }
  .input:focus {
  box-shadow: 0 0 0 4px rgba(var(--portal-primario-rgb), 0.16);
    }
  .alert-box--error {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .alert-box--warn {
  border: 1px solid rgba(var(--portal-warning-rgb), 0.25);
    }
  .alert-box--ok {
  border: 1px solid rgba(var(--portal-success-rgb), 0.25);
    }
  .panel__head .material-symbols-outlined {
  background: rgba(var(--portal-primario-rgb), 0.10);
    }
  .field input:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .btn-secondary:hover {
  background: rgba(var(--portal-primario-rgb), 0.10);
    }
  .flash-ok {
  border: 1px solid rgba(var(--portal-success-rgb), 0.25);
    }
  .flash-err {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .search-input input:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .year-select select:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .estudio-card--active {
  background: rgba(var(--portal-primario-rgb), 0.05);
    }
  .estudio-card__type {
  background: rgba(var(--portal-primario-rgb), 0.08);
    }
  .soon-card .material-symbols-outlined {
  background: rgba(var(--portal-primario-rgb), 0.10);
    }
  .card-pass__icon {
  background: rgba(var(--portal-primario-rgb), 0.12);
    }
  .field input:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .flash-err {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .alert-primer {
  background: rgba(var(--portal-accent-rgb), 0.18);
  border: 1px solid rgba(var(--portal-accent-rgb), 0.50);
  color: rgb(var(--portal-dark2-rgb));
    }
  .card__icon {
  background: rgba(var(--portal-primario-rgb), 0.10);
    }
  .flash--ok {
  border: 1px solid rgba(var(--portal-success-rgb), 0.25);
    }
  .hero {
  background-image: linear-gradient(135deg, rgba(var(--portal-primario-rgb), 0.84) 0%, rgba(var(--portal-dark3-rgb), 0.90) 100%), var(--hero-img);
    }
  .hero::after {
  background: radial-gradient(circle at 25% 15%, rgba(var(--portal-accent-rgb), 0.10) 0%, transparent 35%), radial-gradient(circle at 80% 80%, rgba(var(--portal-primario-rgb), 0.15) 0%, transparent 40%);
    }
  .hero__eyebrow {
  background: rgba(var(--portal-accent-rgb), 0.12);
  border: 1px solid rgba(var(--portal-accent-rgb), 0.32);
    }
  .hero__title .accent {
  background: linear-gradient(90deg, var(--portal-accent) 0%, rgb(var(--portal-accent-strong-rgb)) 100%);
    }
  .input:focus {
  box-shadow: 0 0 0 4px rgba(var(--portal-primario-rgb), 0.16);
    }
  .alert-box--error {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .alert-box--warn {
  border: 1px solid rgba(var(--portal-warning-rgb), 0.25);
    }
  .alert-box--ok {
  border: 1px solid rgba(var(--portal-success-rgb), 0.25);
    }
  .field input:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .flash--ok {
  border: 1px solid rgba(var(--portal-success-rgb), 0.25);
    }
  .flash--err {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .search-input input:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .estudio-card--active {
  background: rgba(var(--portal-primario-rgb), 0.05);
    }
  .card-pass__icon {
  background: rgba(var(--portal-primario-rgb), 0.12);
    }
  .field input:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .flash--info {
  background: rgba(var(--portal-accent-rgb), 0.16);
  color: transparent;
  border: 1px solid rgba(var(--portal-accent-rgb), 0.45);
    }
  .flash--err {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .card-pass__icon {
  background: rgba(var(--portal-primario-rgb), 0.12);
    }
  .field input:focus {
  box-shadow: 0 0 0 3px rgba(var(--portal-primario-rgb), 0.12);
    }
  .flash-err {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .hero {
  background-image: linear-gradient(135deg, rgba(var(--portal-primario-rgb), 0.84) 0%, rgba(var(--portal-dark3-rgb), 0.90) 100%), var(--hero-img);
    }
  .hero::after {
  background: radial-gradient(circle at 25% 15%, rgba(var(--portal-accent-rgb), 0.10) 0%, transparent 35%), radial-gradient(circle at 80% 80%, rgba(var(--portal-primario-rgb), 0.15) 0%, transparent 40%);
    }
  .hero__eyebrow {
  background: rgba(var(--portal-accent-rgb), 0.12);
  border: 1px solid rgba(var(--portal-accent-rgb), 0.32);
    }
  .hero__title .accent {
  background: linear-gradient(90deg, var(--portal-accent) 0%, rgb(var(--portal-accent-strong-rgb)) 100%);
    }
  .hero__stats div {
  border-left: 2px solid rgba(var(--portal-accent-rgb), 0.50);
    }
  .input:focus {
  box-shadow: 0 0 0 4px rgba(var(--portal-primario-rgb), 0.16);
    }
  .alert-box--error {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
  .split {
  background-image: linear-gradient(180deg, rgba(var(--portal-primario-rgb), 0.80) 0%, rgba(var(--portal-dark3-rgb), 0.92) 100%), var(--hero-img);
    }
  .hero {
  background-image: linear-gradient(135deg, rgba(var(--portal-primario-rgb), 0.84) 0%, rgba(var(--portal-dark3-rgb), 0.90) 100%), var(--hero-img);
    }
  .hero::after {
  background: radial-gradient(circle at 25% 15%, rgba(var(--portal-accent-rgb), 0.10) 0%, transparent 35%), radial-gradient(circle at 80% 80%, rgba(var(--portal-primario-rgb), 0.15) 0%, transparent 40%);
    }
  .hero__eyebrow {
  background: rgba(var(--portal-accent-rgb), 0.12);
  border: 1px solid rgba(var(--portal-accent-rgb), 0.32);
    }
  .hero__title .accent {
  background: linear-gradient(90deg, var(--portal-accent) 0%, rgb(var(--portal-accent-strong-rgb)) 100%);
    }
  .input:focus {
  box-shadow: 0 0 0 4px rgba(var(--portal-primario-rgb), 0.16);
    }
  .alert-box--error {
  border: 1px solid rgba(var(--portal-danger-rgb), 0.25);
    }
}