/* ============================================================================
   FESv — EJE DE TEMAS
   ----------------------------------------------------------------------------
   Este archivo es el eje real de la apariencia. Sustituye al interruptor binario
   claro/oscuro por un atributo con nombre propio:

       <html class="fesv-v2"
             data-fesv-tema="claro|oscuro|alto-contraste|claro-suave|daltonico"
             data-bs-theme="light|dark"
             data-fesv-accent="blue|teal|purple|orange|red|green|azul-seguro">

   data-bs-theme SIGUE EMITIENDOSE como DERIVADO del lienzo del tema
   (lienzo claro -> light, lienzo oscuro -> dark). Es deliberado: Bootstrap y las
   ~170 reglas de CSS y 159 de .razor que ya dependen de data-bs-theme siguen
   funcionando sin tocar una sola linea. Es el mismo patron que el `bool Oscuro`
   de FESv.Pos.WinUI/Diseno/PaletaTema.cs.

   PALETAS: portadas de PaletaTema.cs (POS WinUI), donde ya estan disenadas y con
   el contraste verificado. El tema «claro» son exactamente los mismos hex que ya
   tenia la web; el «oscuro» conserva el oscuro que ya estaba desplegado (la
   afinacion web del mismo oscuro), para no cambiar lo que la gente ya ve.

   ACENTO: normalmente es la marca del producto y NO forma parte del tema — por
   eso vive en su propio atributo y se declara DESPUES de los temas, para ganar.
   Un tema puede IMPONERLO (AcentoForzado del POS): el daltonico impone
   «azul-seguro». Quien fuerza es js/fesv-theme.js, que escribe el acento efectivo
   en data-fesv-accent; el CSS no necesita saber nada del caso especial.

   CARGA: DESPUES de fesv-v2.css. Misma especificidad que el bloque oscuro de aquel
   archivo (1 clase + 1 atributo), asi que gana por orden de cascada. Ese era
   justamente el bug del acento muerto: fesv-theme.css definia el acento antes y
   fesv-v2.css lo redefinia despues, dejando los seis circulos sin efecto.
   ============================================================================ */

/* ─────────────────────────── 0. RED DE SEGURIDAD ───────────────────────────
   Si por lo que sea no hay data-fesv-tema (paginas que aun no pasan por el eje,
   o el shell del POS que pone data-bs-theme sobre .pos-shell), los suaves y el
   foco igual se derivan del acento en vez de quedarse en el azul fijo de v2.
   Especificidad `:root.fesv-v2`: la misma que el bloque base de fesv-v2.css, y
   este archivo carga despues; cualquier bloque de tema de abajo la supera. */
:root.fesv-v2 {
    --v2-accent-soft: rgba(var(--v2-accent-rgb), .10);
    --v2-accent-soft-2: rgba(var(--v2-accent-rgb), .20);
    --v2-accent-bd: rgba(var(--v2-accent-rgb), .32);
    --v2-focus: 0 0 0 3px rgba(var(--v2-accent-rgb), .28);
    --v2-surface-raised: var(--v2-surface);
    --v2-border-raised: var(--v2-border-strong);
    --v2-divider: var(--v2-border-subtle);
    --v2-row-alt: var(--v2-surface-alt);
    --v2-row-selected: rgba(var(--v2-accent-rgb), .12);
    --v2-row-selected-text: var(--v2-text);
    --v2-disabled-bg: var(--v2-sunk);
    --v2-disabled-text: var(--v2-text-4);
    --v2-disabled-border: var(--v2-border);

    /* Muestras del selector y de la pantalla de estilos: hay que poder ensenar
       los colores de los OTROS temas sin cambiar el tema activo, asi que cada
       tema deja aqui su par lienzo/tinta. Son definiciones de variable, que es
       donde los colores deben vivir. */
    --v2-muestra-claro-a: #FFFFFF;        --v2-muestra-claro-b: #1F5FD6;
    --v2-muestra-oscuro-a: #151C28;       --v2-muestra-oscuro-b: #3673E6;
    --v2-muestra-claro-suave-a: #FBF7EF;  --v2-muestra-claro-suave-b: #96500A;
    --v2-muestra-alto-contraste-a: #FFFFFF; --v2-muestra-alto-contraste-b: #000000;
    --v2-muestra-daltonico-a: #FFFFFF;    --v2-muestra-daltonico-b: #0B62C4;

    /* Nombre visible de cada tema, tambien como variable: asi /superadmin/estilos
       descubre los temas leyendo el CSS y puede listar MAS DE CINCO sin que haya
       que tocar el codigo de la pantalla.

       AGREGAR UNA PALETA = un bloque de tokens mas abajo + estas tres lineas
       (nombre y el par de la muestra). Nada mas. La mecanica del eje no cambia. */
    /* Tamano del icono del selector de tema (evita el literal suelto). */
    --v2-fs-icono: 1.15rem;

    --v2-tema-nombre-claro: "Claro";
    --v2-tema-nombre-oscuro: "Oscuro";
    --v2-tema-nombre-claro-suave: "Claro suave";
    --v2-tema-nombre-alto-contraste: "Alto contraste";
    --v2-tema-nombre-daltonico: "Colores seguros";
}

/* ─────────────────────────── 1. CLARO (de fabrica) ───────────────────────────
   PaletaTema.Claro_ — neutros pizarra con matiz frio. Identico a lo que ya habia. */
:root.fesv-v2[data-fesv-tema="claro"] {
    --v2-bg: #EEF1F5;
    --v2-surface: #FFFFFF;
    --v2-surface-raised: #FFFFFF;
    --v2-surface-alt: #F7F9FB;
    --v2-sunk: #E7EBF0;
    --v2-border: #DDE2E9;
    --v2-border-subtle: #EBEEF2;
    --v2-border-strong: #C3CAD4;
    --v2-border-raised: #C3CAD4;
    --v2-divider: #E6EAEF;
    --v2-text: #1A2130;
    --v2-text-2: #566174;
    --v2-text-3: #687285;
    --v2-text-4: #8791A1;
    --v2-ink: #141A26;
    --v2-ink-2: #232B3A;
    --v2-ink-3: #2E3747;
    --v2-ink-text: #EEF2F7;
    --v2-ink-text-2: #B4BDCB;
    --v2-ink-text-3: #8C96A6;

    --v2-row-hover: #F3F6FA;
    --v2-row-alt: #F7F9FB;
    --v2-row-selected: rgba(var(--v2-accent-rgb), .12);
    --v2-row-selected-text: var(--v2-text);
    --v2-disabled-bg: #F1F3F7;
    --v2-disabled-text: #98A1B0;
    --v2-disabled-border: #E2E6EC;

    --v2-ok: #1C7C46;     --v2-ok-solid: #1C7C46;   --v2-ok-soft: #E5F4EA;   --v2-ok-bd: #B9E0C8;
    --v2-warn: #8F4E00;   --v2-warn-solid: #E08A00; --v2-warn-soft: #FFF3DD; --v2-warn-bd: #F4D39B;
    --v2-err: #B42335;    --v2-err-solid: #B42335;  --v2-err-soft: #FCEAEC;  --v2-err-bd: #F2C0C6;
    --v2-info: #1947A8;   --v2-info-solid: #1F5FD6; --v2-info-soft: #E8F0FD; --v2-info-bd: #C2D6F8;
    --v2-violet: #5B3CC4; --v2-violet-soft: #EFEAFD; --v2-violet-bd: #D3C7F6;

    --v2-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
    --v2-shadow-2: 0 2px 6px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --v2-shadow-3: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
    --v2-scroll: #C3CAD4;
    --v2-scroll-hover: #9AA4B2;
    --v2-backdrop: rgba(12, 17, 26, .48);

    --v2-accent-soft: rgba(var(--v2-accent-rgb), .10);
    --v2-accent-soft-2: rgba(var(--v2-accent-rgb), .20);
    --v2-accent-bd: rgba(var(--v2-accent-rgb), .32);
    --v2-focus: 0 0 0 3px rgba(var(--v2-accent-rgb), .28);
    color-scheme: light;
}

/* ─────────────────────────── 2. OSCURO ───────────────────────────
   Pizarra profunda para poca luz y turnos de noche. */
:root.fesv-v2[data-fesv-tema="oscuro"] {
    --v2-bg: #0D121B;
    --v2-surface: #151C28;
    --v2-surface-raised: #1E2735;
    --v2-surface-alt: #1A2230;
    --v2-sunk: #212A3A;
    --v2-border: #283244;
    --v2-border-subtle: #1F2837;
    --v2-border-strong: #3A465B;
    --v2-border-raised: #3A465B;
    --v2-divider: #222C3C;
    --v2-text: #E6EAF1;
    --v2-text-2: #AEB7C6;
    --v2-text-3: #939DAE;
    --v2-text-4: #6F7A8C;
    --v2-ink: #090D14;
    --v2-ink-2: #141B27;
    --v2-ink-3: #1D2533;
    --v2-ink-text: #E6EAF1;
    --v2-ink-text-2: #AEB7C6;
    --v2-ink-text-3: #7F8A9C;

    --v2-row-hover: #1C2533;
    --v2-row-alt: #18202C;
    --v2-row-selected: rgba(var(--v2-accent-rgb), .20);
    --v2-row-selected-text: var(--v2-text);
    --v2-disabled-bg: #1B222E;
    --v2-disabled-text: #67717F;
    --v2-disabled-border: #252E3D;

    --v2-ok: #5CCB93;     --v2-ok-solid: #1F8A50;   --v2-ok-soft: rgba(76, 195, 138, .14);   --v2-ok-bd: rgba(92, 203, 147, .32);
    --v2-warn: #F2B35B;   --v2-warn-solid: #E08A00; --v2-warn-soft: rgba(240, 168, 71, .14); --v2-warn-bd: rgba(242, 179, 91, .32);
    --v2-err: #F4828F;    --v2-err-solid: #C92E42;  --v2-err-soft: rgba(242, 112, 127, .14); --v2-err-bd: rgba(244, 130, 143, .32);
    --v2-info: #8DB7FF;   --v2-info-solid: #3673E6; --v2-info-soft: rgba(76, 141, 246, .14); --v2-info-bd: rgba(141, 183, 255, .32);
    --v2-violet: #B9A6FF; --v2-violet-soft: rgba(150, 120, 255, .16); --v2-violet-bd: rgba(185, 166, 255, .32);

    --v2-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --v2-shadow-2: 0 2px 8px rgba(0, 0, 0, .35);
    --v2-shadow-3: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
    --v2-scroll: #364256;
    --v2-scroll-hover: #4E5B72;
    --v2-backdrop: rgba(0, 0, 0, .62);

    --v2-accent-soft: rgba(var(--v2-accent-rgb), .16);
    --v2-accent-soft-2: rgba(var(--v2-accent-rgb), .26);
    --v2-accent-bd: rgba(var(--v2-accent-rgb), .38);
    --v2-focus: 0 0 0 3px rgba(var(--v2-accent-rgb), .40);
    color-scheme: dark;
}

/* ─────────────────────────── 3. CLARO SUAVE (crema) ───────────────────────────
   PaletaTema.ClaroSuave_ — fondo crema en vez de blanco azulado. Menos brillo:
   fotofobia y jornadas largas. */
:root.fesv-v2[data-fesv-tema="claro-suave"] {
    --v2-bg: #F1EADB;
    --v2-surface: #FBF7EF;
    --v2-surface-raised: #FFFDF8;
    --v2-surface-alt: #F5EFE3;
    --v2-sunk: #E9E0CE;
    --v2-border: #DED3BE;
    --v2-border-subtle: #EAE1D0;
    --v2-border-strong: #C4B69C;
    --v2-border-raised: #C4B69C;
    --v2-divider: #E5DAC6;
    --v2-text: #26211A;
    --v2-text-2: #5C5445;
    --v2-text-3: #6E6554;
    --v2-text-4: #8A8170;
    --v2-ink: #2A241A;
    --v2-ink-2: #3B3327;
    --v2-ink-3: #4A4033;
    --v2-ink-text: #F6F1E6;
    --v2-ink-text-2: #CFC5AF;
    --v2-ink-text-3: #B3A994;

    --v2-row-hover: #F3ECDF;
    --v2-row-alt: #F5EFE3;
    --v2-row-selected: rgba(var(--v2-accent-rgb), .12);
    --v2-row-selected-text: var(--v2-text);
    --v2-disabled-bg: #EFE8DA;
    --v2-disabled-text: #9A9180;
    --v2-disabled-border: #E2D8C5;

    --v2-ok: #1C6E41;     --v2-ok-solid: #23955A;   --v2-ok-soft: #E2F0E2;   --v2-ok-bd: #B7D8BE;
    --v2-warn: #96500A;   --v2-warn-solid: #CE7F10; --v2-warn-soft: #F8E9C9; --v2-warn-bd: #E3C68B;
    --v2-err: #A82330;    --v2-err-solid: #C9394A;  --v2-err-soft: #F7E3E0;  --v2-err-bd: #E7BDB6;
    --v2-info: #17429A;   --v2-info-solid: #1C56BC; --v2-info-soft: #E4ECF8; --v2-info-bd: #BFD1EC;
    --v2-violet: #57359C; --v2-violet-soft: #EDE6F5; --v2-violet-bd: #CDBDE4;

    --v2-shadow-1: 0 1px 2px rgba(60, 48, 28, .07);
    --v2-shadow-2: 0 2px 6px rgba(60, 48, 28, .09), 0 1px 2px rgba(60, 48, 28, .05);
    --v2-shadow-3: 0 12px 32px rgba(60, 48, 28, .20), 0 2px 6px rgba(60, 48, 28, .08);
    --v2-scroll: #C4B69C;
    --v2-scroll-hover: #A6957A;
    --v2-backdrop: rgba(42, 36, 26, .46);

    --v2-accent-soft: rgba(var(--v2-accent-rgb), .10);
    --v2-accent-soft-2: rgba(var(--v2-accent-rgb), .20);
    --v2-accent-bd: rgba(var(--v2-accent-rgb), .32);
    --v2-focus: 0 0 0 3px rgba(var(--v2-accent-rgb), .30);
    color-scheme: light;
}

/* ─────────────────────────── 4. ALTO CONTRASTE ───────────────────────────
   PaletaTema.AltoContraste_ — negro sobre blanco (21:1) y bordes negros de verdad.
   Aqui la SOMBRA no comunica nada: lo elevado se distingue por --v2-border-raised,
   que es negro. Por eso existe ese token. */
:root.fesv-v2[data-fesv-tema="alto-contraste"] {
    --v2-bg: #FFFFFF;
    --v2-surface: #FFFFFF;
    --v2-surface-raised: #FFFFFF;
    --v2-surface-alt: #F2F2F2;
    --v2-sunk: #E6E6E6;
    --v2-border: #000000;
    --v2-border-subtle: #000000;
    --v2-border-strong: #000000;
    --v2-border-raised: #000000;
    --v2-divider: #000000;
    --v2-text: #000000;
    --v2-text-2: #1A1A1A;
    --v2-text-3: #2B2B2B;
    --v2-text-4: #3D3D3D;
    --v2-ink: #000000;
    --v2-ink-2: #1F1F1F;
    --v2-ink-3: #2E2E2E;
    --v2-ink-text: #FFFFFF;
    --v2-ink-text-2: #EDEDED;
    --v2-ink-text-3: #D9D9D9;

    --v2-row-hover: #E6E6E6;
    --v2-row-alt: #F2F2F2;
    --v2-row-selected: #000000;
    --v2-row-selected-text: #FFFFFF;
    --v2-disabled-bg: #E6E6E6;
    --v2-disabled-text: #3D3D3D;
    --v2-disabled-border: #000000;

    --v2-ok: #005C2E;     --v2-ok-solid: #00713A;   --v2-ok-soft: #DCF2E5;   --v2-ok-bd: #005C2E;
    --v2-warn: #6B3A00;   --v2-warn-solid: #8A4B00; --v2-warn-soft: #FFEBC9; --v2-warn-bd: #6B3A00;
    --v2-err: #8A0011;    --v2-err-solid: #A30014;  --v2-err-soft: #FFE1E4;  --v2-err-bd: #8A0011;
    --v2-info: #00348A;   --v2-info-solid: #002A70; --v2-info-soft: #DDE7FA; --v2-info-bd: #00348A;
    --v2-violet: #4A0072; --v2-violet-soft: #EFE0F7; --v2-violet-bd: #4A0072;

    /* La sombra no se ve y no debe sustituir al borde: se vuelve un borde. */
    --v2-shadow-1: 0 0 0 1px #000000;
    --v2-shadow-2: 0 0 0 1px #000000;
    --v2-shadow-3: 0 0 0 2px #000000;
    --v2-scroll: #000000;
    --v2-scroll-hover: #3D3D3D;
    --v2-backdrop: rgba(0, 0, 0, .70);

    --v2-accent-soft: rgba(var(--v2-accent-rgb), .14);
    --v2-accent-soft-2: rgba(var(--v2-accent-rgb), .24);
    --v2-accent-bd: #000000;
    --v2-focus: 0 0 0 3px #000000, 0 0 0 6px rgba(var(--v2-accent-rgb), .45);
    color-scheme: light;
}

/* ─────────────────────────── 5. DALTONICO ───────────────────────────
   PaletaTema.Daltonico_ — «Colores seguros». Ningun par verde-rojo queda como
   unica diferencia: azul (info/acento), naranja (aviso), violeta (error) y teal
   (exito). Este tema IMPONE su acento; lo hace fesv-theme.js escribiendo
   data-fesv-accent="azul-seguro". */
:root.fesv-v2[data-fesv-tema="daltonico"] {
    --v2-bg: #EFF1F4;
    --v2-surface: #FFFFFF;
    --v2-surface-raised: #FFFFFF;
    --v2-surface-alt: #F6F8FA;
    --v2-sunk: #E6E9EE;
    --v2-border: #D5DAE2;
    --v2-border-subtle: #E4E8EE;
    --v2-border-strong: #B4BCC9;
    --v2-border-raised: #B4BCC9;
    --v2-divider: #E0E4EA;
    --v2-text: #15202E;
    --v2-text-2: #4E5A6B;
    --v2-text-3: #64707F;
    --v2-text-4: #7C879A;
    --v2-ink: #0F1724;
    --v2-ink-2: #1E2838;
    --v2-ink-3: #2A3548;
    --v2-ink-text: #EEF2F7;
    --v2-ink-text-2: #B6C0CE;
    --v2-ink-text-3: #9AA5B5;

    --v2-row-hover: #F2F5F9;
    --v2-row-alt: #F6F8FA;
    --v2-row-selected: rgba(var(--v2-accent-rgb), .12);
    --v2-row-selected-text: var(--v2-text);
    --v2-disabled-bg: #F0F2F6;
    --v2-disabled-text: #8E99A8;
    --v2-disabled-border: #E0E4EA;

    /* teal / naranja / violeta / azul — ningun verde-rojo */
    --v2-ok: #0E6B74;     --v2-ok-solid: #0E7C86;   --v2-ok-soft: #DDF1F3;   --v2-ok-bd: #A8D8DD;
    --v2-warn: #9A4508;   --v2-warn-solid: #B45309; --v2-warn-soft: #FCEBD7; --v2-warn-bd: #EFC08A;
    --v2-err: #6B2A7C;    --v2-err-solid: #7A2E8E;  --v2-err-soft: #F2E6F6;  --v2-err-bd: #D6BBE0;
    --v2-info: #0A4E9C;   --v2-info-solid: #0B62C4; --v2-info-soft: #E2EDFB; --v2-info-bd: #BFD8F5;
    --v2-violet: #6B2A7C; --v2-violet-soft: #F2E6F6; --v2-violet-bd: #D6BBE0;

    --v2-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
    --v2-shadow-2: 0 2px 6px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --v2-shadow-3: 0 12px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
    --v2-scroll: #B4BCC9;
    --v2-scroll-hover: #8D97A6;
    --v2-backdrop: rgba(12, 17, 26, .48);

    --v2-accent-soft: rgba(var(--v2-accent-rgb), .10);
    --v2-accent-soft-2: rgba(var(--v2-accent-rgb), .20);
    --v2-accent-bd: rgba(var(--v2-accent-rgb), .32);
    --v2-focus: 0 0 0 3px rgba(var(--v2-accent-rgb), .30);
    color-scheme: light;
}

/* ============================================================================
   6. ACENTO — declarado DESPUES de los temas, gana sobre ellos.
   ----------------------------------------------------------------------------
   El acento es la marca del producto y es ORTOGONAL al tema: cualquiera de los
   cinco temas combina con cualquiera de los acentos. Los suaves y el foco se
   derivan por alfa de --v2-accent-rgb en el bloque del tema, asi que aqui solo
   hacen falta el solido, sus estados y el texto sobre lienzo claro/oscuro.

   Un tema que impone acento (daltonico) no necesita CSS especial: el JS escribe
   el acento impuesto en data-fesv-accent y este bloque lo aplica igual.
   ============================================================================ */

:root.fesv-v2[data-fesv-accent="blue"] {
    --v2-accent: #1F5FD6; --v2-accent-rgb: 31, 95, 214;
    --v2-accent-hover: #1A52BC; --v2-accent-pressed: #15449C;
    --v2-accent-text: #1947A8; --v2-on-accent: #FFFFFF; --v2-ink-accent: #6EA3FF;
}
:root.fesv-v2[data-bs-theme="dark"][data-fesv-accent="blue"] {
    --v2-accent: #3673E6; --v2-accent-rgb: 76, 141, 246;
    --v2-accent-hover: #4A84F0; --v2-accent-pressed: #2A62CC;
    --v2-accent-text: #8DB7FF; --v2-on-accent: #FFFFFF; --v2-ink-accent: #7FB0FF;
}

:root.fesv-v2[data-fesv-accent="teal"] {
    --v2-accent: #0F766E; --v2-accent-rgb: 15, 118, 110;
    --v2-accent-hover: #0D655E; --v2-accent-pressed: #0A524C;
    --v2-accent-text: #0B5F58; --v2-on-accent: #FFFFFF; --v2-ink-accent: #5ED3C4;
}
:root.fesv-v2[data-bs-theme="dark"][data-fesv-accent="teal"] {
    --v2-accent: #14A79A; --v2-accent-rgb: 45, 196, 183;
    --v2-accent-hover: #21BBAD; --v2-accent-pressed: #0F8C82;
    --v2-accent-text: #6FDCCE; --v2-on-accent: #061F1D; --v2-ink-accent: #6FDCCE;
}

:root.fesv-v2[data-fesv-accent="purple"] {
    --v2-accent: #6D28D9; --v2-accent-rgb: 109, 40, 217;
    --v2-accent-hover: #5F21BE; --v2-accent-pressed: #4F1B9E;
    --v2-accent-text: #5B21B6; --v2-on-accent: #FFFFFF; --v2-ink-accent: #B69BFF;
}
:root.fesv-v2[data-bs-theme="dark"][data-fesv-accent="purple"] {
    --v2-accent: #8B5CF6; --v2-accent-rgb: 139, 92, 246;
    --v2-accent-hover: #9B72F8; --v2-accent-pressed: #7444E0;
    --v2-accent-text: #C4B1FF; --v2-on-accent: #FFFFFF; --v2-ink-accent: #C4B1FF;
}

:root.fesv-v2[data-fesv-accent="orange"] {
    --v2-accent: #C2410C; --v2-accent-rgb: 194, 65, 12;
    --v2-accent-hover: #A8380A; --v2-accent-pressed: #8C2F08;
    --v2-accent-text: #9A3412; --v2-on-accent: #FFFFFF; --v2-ink-accent: #FFA46B;
}
:root.fesv-v2[data-bs-theme="dark"][data-fesv-accent="orange"] {
    --v2-accent: #E5630F; --v2-accent-rgb: 234, 110, 32;
    --v2-accent-hover: #F07A2B; --v2-accent-pressed: #C4530C;
    --v2-accent-text: #FFAE7A; --v2-on-accent: #1F0C03; --v2-ink-accent: #FFAE7A;
}

:root.fesv-v2[data-fesv-accent="red"] {
    --v2-accent: #BE123C; --v2-accent-rgb: 190, 18, 60;
    --v2-accent-hover: #A50F34; --v2-accent-pressed: #8A0C2B;
    --v2-accent-text: #9F1239; --v2-on-accent: #FFFFFF; --v2-ink-accent: #FF8AA3;
}
:root.fesv-v2[data-bs-theme="dark"][data-fesv-accent="red"] {
    --v2-accent: #E11D48; --v2-accent-rgb: 225, 29, 72;
    --v2-accent-hover: #EF3A61; --v2-accent-pressed: #BE123C;
    --v2-accent-text: #FF93A9; --v2-on-accent: #FFFFFF; --v2-ink-accent: #FF93A9;
}

:root.fesv-v2[data-fesv-accent="green"] {
    --v2-accent: #15803D; --v2-accent-rgb: 21, 128, 61;
    --v2-accent-hover: #126C34; --v2-accent-pressed: #0E5A2B;
    --v2-accent-text: #14532D; --v2-on-accent: #FFFFFF; --v2-ink-accent: #6BD696;
}
:root.fesv-v2[data-bs-theme="dark"][data-fesv-accent="green"] {
    --v2-accent: #199B4C; --v2-accent-rgb: 34, 178, 88;
    --v2-accent-hover: #24B15A; --v2-accent-pressed: #147F3E;
    --v2-accent-text: #79DDA2; --v2-on-accent: #FFFFFF; --v2-ink-accent: #79DDA2;
}

/* Acento impuesto por el tema daltonico (PaletaTema.Daltonico_.AcentoForzado).
   No se ofrece en el selector: solo lo escribe el JS cuando el tema lo exige. */
:root.fesv-v2[data-fesv-accent="azul-seguro"] {
    --v2-accent: #0B62C4; --v2-accent-rgb: 11, 98, 196;
    --v2-accent-hover: #0A55AB; --v2-accent-pressed: #084790;
    --v2-accent-text: #0A4E9C; --v2-on-accent: #FFFFFF; --v2-ink-accent: #7FB3F0;
}
:root.fesv-v2[data-bs-theme="dark"][data-fesv-accent="azul-seguro"] {
    --v2-accent: #2A7FDC; --v2-accent-rgb: 62, 143, 228;
    --v2-accent-hover: #3E8FE4; --v2-accent-pressed: #1E6BBE;
    --v2-accent-text: #8FBEF2; --v2-on-accent: #FFFFFF; --v2-ink-accent: #8FBEF2;
}

/* ============================================================================
   7. USOS DE LOS TOKENS NUEVOS
   ----------------------------------------------------------------------------
   Minimo indispensable para que los tokens nuevos no nazcan muertos. No se
   redisena ninguna pantalla: solo se conectan los tokens a lo que HOY recalcula
   los mismos valores a mano.
   ============================================================================ */

/* Elevado: modal, offcanvas, popover y dropdown dejan de depender solo de la
   sombra (en alto contraste la sombra no comunica nada). */
:root.fesv-v2:not(#_) .modal-content,
:root.fesv-v2:not(#_) .offcanvas,
:root.fesv-v2:not(#_) .popover,
:root.fesv-v2:not(#_) .dropdown-menu {
    background-color: var(--v2-surface-raised);
    border: 1px solid var(--v2-border-raised);
}

/* Divisor: es la linea que separa, no el borde que encierra. */
:root.fesv-v2:not(#_) .dropdown-divider { border-top-color: var(--v2-divider); }

/* Deshabilitado: un solo criterio en vez de opacidades a ojo. */
:root.fesv-v2:not(#_) .form-control:disabled,
:root.fesv-v2:not(#_) .form-control[readonly],
:root.fesv-v2:not(#_) .form-select:disabled {
    background-color: var(--v2-disabled-bg);
    color: var(--v2-disabled-text);
    border-color: var(--v2-disabled-border);
}
/* Un boton deshabilitado deja de ser primario/peligro: es neutro. Antes cada
   variante se apagaba con opacidad y en oscuro el texto quedaba ilegible. */
:root.fesv-v2:not(#_) .btn:disabled,
:root.fesv-v2:not(#_) .btn.disabled,
:root.fesv-v2:not(#_) fieldset:disabled .btn {
    background-color: var(--v2-disabled-bg);
    border-color: var(--v2-disabled-border);
    color: var(--v2-disabled-text);
    box-shadow: none;
    opacity: 1;
}

/* Fila alterna y fila seleccionada de tabla. */
:root.fesv-v2:not(#_) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--v2-row-alt);
    color: var(--v2-text);
    --bs-table-accent-bg: transparent;
}
:root.fesv-v2:not(#_) tr.is-selected > *,
:root.fesv-v2:not(#_) tr.table-active > * {
    background-color: var(--v2-row-selected);
    color: var(--v2-row-selected-text);
    --bs-table-accent-bg: transparent;
}

/* ============================================================================
   8. SELECTOR DE TEMA (ThemeSwitcher)
   ----------------------------------------------------------------------------
   Vivian en un bloque <style> dentro del .razor; se traen aqui para que el tema
   los controle y el auditor deje de contarlos.
   ============================================================================ */
.fesv-theme-btn { font-size: var(--v2-fs-icono); line-height: 1; }
.fesv-theme-btn:hover { color: var(--v2-accent); }
.fesv-theme-backdrop { position: fixed; inset: 0; z-index: 1040; background: transparent; }
.fesv-theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 264px;
    background: var(--v2-surface-raised);
    color: var(--v2-text);
    border: 1px solid var(--v2-border-raised);
    border-radius: var(--v2-r, 8px);
    padding: 12px;
}

.fesv-tema-lista { display: flex; flex-direction: column; gap: 2px; }
.fesv-tema-opcion {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: var(--v2-r-sm, 6px);
    background: transparent;
    color: var(--v2-text);
    cursor: pointer;
}
.fesv-tema-opcion:hover { background: var(--v2-row-hover); }
.fesv-tema-opcion.active {
    background: var(--v2-row-selected);
    color: var(--v2-row-selected-text);
    border-color: var(--v2-accent-bd);
}
.fesv-tema-muestra {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--v2-border-strong);
}
.fesv-tema-texto { display: flex; flex-direction: column; min-width: 0; }
.fesv-tema-nombre { font-size: var(--v2-fs-body, .8125rem); font-weight: 600; }
.fesv-tema-desc {
    font-size: var(--v2-fs-micro, .6875rem);
    color: var(--v2-text-3);
    white-space: normal;
}
.fesv-tema-opcion.active .fesv-tema-desc { color: inherit; opacity: .8; }
.fesv-tema-check { margin-left: auto; }
.fesv-tema-nota {
    margin-top: 8px;
    font-size: var(--v2-fs-micro, .6875rem);
    color: var(--v2-text-3);
}
.fesv-accent-swatch:disabled { cursor: not-allowed; opacity: .45; }

/* Cada muestra ensena su tema aunque el activo sea otro. */
[data-fesv-tema-muestra="claro"] {
    background: linear-gradient(135deg, var(--v2-muestra-claro-a) 50%, var(--v2-muestra-claro-b) 50%);
}
[data-fesv-tema-muestra="oscuro"] {
    background: linear-gradient(135deg, var(--v2-muestra-oscuro-a) 50%, var(--v2-muestra-oscuro-b) 50%);
}
[data-fesv-tema-muestra="claro-suave"] {
    background: linear-gradient(135deg, var(--v2-muestra-claro-suave-a) 50%, var(--v2-muestra-claro-suave-b) 50%);
}
[data-fesv-tema-muestra="alto-contraste"] {
    background: linear-gradient(135deg, var(--v2-muestra-alto-contraste-a) 50%, var(--v2-muestra-alto-contraste-b) 50%);
}
[data-fesv-tema-muestra="daltonico"] {
    background: linear-gradient(135deg, var(--v2-muestra-daltonico-a) 50%, var(--v2-muestra-daltonico-b) 50%);
}

/* ============================================================================
   9. PANTALLA VIVA DE ESTILOS (/superadmin/estilos)
   ============================================================================ */
.estilos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.estilos-token {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-sm, 6px);
    background: var(--v2-surface);
}
.estilos-chip {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: var(--v2-r-sm, 6px);
    border: 1px solid var(--v2-border-strong);
}
.estilos-token-info { min-width: 0; display: flex; flex-direction: column; }
.estilos-token-nombre {
    font-family: var(--v2-mono);
    font-size: var(--v2-fs-micro, .6875rem);
    color: var(--v2-text);
    overflow: hidden; text-overflow: ellipsis;
}
.estilos-token-valor {
    font-family: var(--v2-mono);
    font-size: var(--v2-fs-micro, .6875rem);
    color: var(--v2-text-3);
}
.estilos-panel {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r, 10px);
    padding: 14px;
}
.estilos-elevado {
    background: var(--v2-surface-raised);
    border: 1px solid var(--v2-border-raised);
    border-radius: var(--v2-r, 10px);
    box-shadow: var(--v2-shadow-3);
    padding: 14px;
}
.estilos-ratio {
    font-family: var(--v2-mono);
    font-size: var(--v2-fs-micro, .6875rem);
    padding: 1px 6px;
    border-radius: var(--v2-r-pill, 999px);
    border: 1px solid var(--v2-border);
}
.estilos-ratio.aa { background: var(--v2-ok-soft); color: var(--v2-ok); border-color: var(--v2-ok-bd); }
.estilos-ratio.aaa { background: var(--v2-info-soft); color: var(--v2-info); border-color: var(--v2-info-bd); }
.estilos-ratio.falla { background: var(--v2-err-soft); color: var(--v2-err); border-color: var(--v2-err-bd); }
.estilos-muestra-texto { display: flex; align-items: center; gap: 8px; padding: 4px 0; }