/* ============================================================================
   FESv — Diseño v2 (PILOTO opt-in)
   ----------------------------------------------------------------------------
   Misma identidad que el POS Retail de escritorio (FESv.Pos.Retail/Diseno/Tema.cs)
   traducida a la web: neutros fríos, un acento de marca, 4 semánticos con fondo
   suave, escala de espaciado de 4 px, radios 6/10, jerarquía de botones.

   CONMUTADOR: TODO este archivo está acotado bajo <html class="fesv-v2">.
   La clase la pone js/fesv-theme.js ANTES del render según:
     · ?tema=v2 | ?tema=v1 en la URL (fija la preferencia), o
     · localStorage["fesv:tema"] (switch "Probar diseño nuevo" del menú de tema).
   Sin la clase, ninguna regla de este archivo aplica → diseño actual intacto.

   ESPECIFICIDAD: los componentes usan el prefijo `:root.fesv-v2:not(#_)`
   (1 id + 2 clases) para ganar sin !important a fesv-theme.css, a los <style>
   de MainLayout/MenuSoftland/SelectableGrid y a las reglas por página.
   Solo se usa !important donde la regla v1 ya lo usa.
   ============================================================================ */

/* Inter variable (latin) servida desde el propio sitio (wwwroot/fonts/inter,
   licencia SIL OFL 1.1 en OFL.txt). Solo se descarga si una regla v2 la usa. */
@font-face {
    font-family: "Inter v2";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────────────────────────── 1. TOKENS ───────────────────────────── */
:root.fesv-v2 {
    /* tipografía */
    --v2-font: "Inter v2", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --v2-mono: "JetBrains Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;
    --v2-fs-micro: .6875rem;   /* 11 */
    --v2-fs-aspa: .5rem;       /* 8  - aspa de un chip, no es texto */
    --v2-fs-icono-xl: 3rem;    /* 48 - icono de marcador (sin imagen) */
    --v2-fs-caption: .75rem;   /* 12 */
    --v2-fs-body: .8125rem;    /* 13 */
    --v2-fs-strong: .875rem;   /* 14 */
    --v2-fs-sub: .9375rem;     /* 15 */
    --v2-fs-title: 1.25rem;    /* 20 */
    --v2-fs-num: 1.625rem;     /* 26 */

    /* forma / espaciado (múltiplos de 4) */
    --v2-r-sm: 6px;
    --v2-r: 10px;
    --v2-r-pill: 999px;
    --v2-s1: 4px; --v2-s2: 8px; --v2-s3: 12px; --v2-s4: 16px; --v2-s5: 20px; --v2-s6: 24px;
    --v2-h-ctl: 34px;
    --v2-h-ctl-sm: 30px;

    /* neutros (matiz 220) — claro */
    --v2-bg: #EEF1F5;
    --v2-surface: #FFFFFF;
    --v2-surface-alt: #F7F9FB;
    --v2-sunk: #E7EBF0;
    --v2-border: #DDE2E9;
    --v2-border-subtle: #EBEEF2;
    --v2-border-strong: #C3CAD4;
    --v2-text: #1A2130;
    --v2-text-2: #566174;
    --v2-text-3: #687285;      /* tenue AA (≥4.5:1 sobre blanco y alterna) */
    --v2-text-4: #8791A1;      /* placeholder / iconos decorativos */
    --v2-ink: #141A26;          /* barra lateral */
    --v2-ink-2: #232B3A;
    --v2-ink-3: #2E3747;
    --v2-ink-text: #EEF2F7;
    --v2-ink-text-2: #B4BDCB;
    --v2-ink-text-3: #8C96A6;

    /* marca */
    --v2-accent: #1F5FD6;
    --v2-accent-rgb: 31, 95, 214;
    --v2-accent-hover: #1A52BC;
    --v2-accent-pressed: #15449C;
    --v2-accent-soft: #E8F0FD;
    --v2-accent-soft-2: #D5E3FB;
    --v2-accent-text: #1947A8;
    --v2-on-accent: #FFFFFF;
    --v2-ink-accent: #6EA3FF;

    /* semánticos: texto / sólido / suave / borde suave */
    --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;

    /* elevación */
    --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-focus: 0 0 0 3px rgba(31, 95, 214, .28);
    --v2-row-hover: #F3F6FA;
    --v2-scroll: #C3CAD4;
    --v2-scroll-hover: #9AA4B2;
    --v2-backdrop: rgba(12, 17, 26, .48);

    /* ── Puente a las variables existentes (fesv-theme.css / componentes) ── */
    --fesv-accent: var(--v2-accent);
    --fesv-accent-rgb: var(--v2-accent-rgb);
    --fesv-accent-hover: var(--v2-accent-hover);
    --fesv-accent-fg: #fff;
    --fesv-surface-1: var(--v2-surface);
    --fesv-surface-2: var(--v2-surface-alt);
    --fesv-surface-3: var(--v2-sunk);
    --fesv-border: var(--v2-border);
    --fesv-text: var(--v2-text);
    --fesv-text-muted: var(--v2-text-3);
    --fesv-shadow: var(--v2-shadow-1);
    --fesv-scrollbar-thumb: var(--v2-scroll);
    --fesv-scrollbar-thumb-hover: var(--v2-scroll-hover);
    --fesv-ok-fg: var(--v2-ok);         --fesv-ok-bg: var(--v2-ok-soft);         --fesv-ok-bd: var(--v2-ok-bd);
    --fesv-warn-fg: var(--v2-warn);     --fesv-warn-bg: var(--v2-warn-soft);     --fesv-warn-bd: var(--v2-warn-bd);
    --fesv-danger-fg: var(--v2-err);    --fesv-danger-bg: var(--v2-err-soft);    --fesv-danger-bd: var(--v2-err-bd);
    --fesv-info-fg: var(--v2-info);     --fesv-info-bg: var(--v2-info-soft);     --fesv-info-bd: var(--v2-info-bd);
    --fesv-violet-fg: var(--v2-violet); --fesv-violet-bg: var(--v2-violet-soft); --fesv-violet-bd: var(--v2-violet-bd);
    --fesv-neutral-fg: var(--v2-text-2); --fesv-neutral-bg: var(--v2-sunk);      --fesv-neutral-bd: var(--v2-border);
    --bs-primary: var(--v2-accent);
    --bs-primary-rgb: var(--v2-accent-rgb);
    --bs-body-font-family: var(--v2-font);
    --bs-body-color: var(--v2-text);
    --bs-body-bg: var(--v2-bg);
    --bs-font-monospace: var(--v2-mono);
    color-scheme: light;
}

/* ── Oscuro: misma identidad, neutros fríos profundos ── */
:root.fesv-v2[data-bs-theme="dark"] {
    --v2-bg: #0D121B;
    --v2-surface: #151C28;
    --v2-surface-alt: #1A2230;
    --v2-sunk: #212A3A;
    --v2-border: #283244;
    --v2-border-subtle: #1F2837;
    --v2-border-strong: #3A465B;
    --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-accent: #3673E6;         /* sólido de botón: blanco 4.6:1 */
    --v2-accent-rgb: 76, 141, 246;
    --v2-accent-hover: #4A84F0;
    --v2-accent-pressed: #2A62CC;
    --v2-accent-soft: rgba(76, 141, 246, .16);
    --v2-accent-soft-2: rgba(76, 141, 246, .26);
    --v2-accent-text: #8DB7FF;
    --v2-ink-accent: #7FB0FF;

    --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-focus: 0 0 0 3px rgba(76, 141, 246, .40);
    --v2-row-hover: #1C2533;
    --v2-scroll: #364256;
    --v2-scroll-hover: #4E5B72;
    --v2-backdrop: rgba(0, 0, 0, .62);
    color-scheme: dark;
}

/* ───────────────────────────── 2. BASE ───────────────────────────── */
:root.fesv-v2:not(#_) body {
    font-family: var(--v2-font);
    background: var(--v2-bg);
    color: var(--v2-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss03";
    text-rendering: optimizeLegibility;
}
:root.fesv-v2:not(#_) ::selection { background: rgba(var(--v2-accent-rgb), .28); }
:root.fesv-v2:not(#_) :focus { outline: none; }
:root.fesv-v2:not(#_) :focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: 2px;
}
:root.fesv-v2:not(#_) .form-control:focus-visible,
:root.fesv-v2:not(#_) .form-select:focus-visible,
:root.fesv-v2:not(#_) .form-check-input:focus-visible { outline: none; }
:root.fesv-v2:not(#_) a { color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) a:hover { color: var(--v2-accent-hover); }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) a:hover { color: #B5CFFF; }
:root.fesv-v2:not(#_) .text-muted { color: var(--v2-text-3) !important; }
:root.fesv-v2:not(#_) .text-secondary { color: var(--v2-text-2) !important; }
:root.fesv-v2:not(#_) .text-primary { color: var(--v2-accent-text) !important; }
:root.fesv-v2:not(#_) .text-success { color: var(--v2-ok) !important; }
:root.fesv-v2:not(#_) .text-danger { color: var(--v2-err) !important; }
:root.fesv-v2:not(#_) .text-warning { color: var(--v2-warn) !important; }
:root.fesv-v2:not(#_) .text-info { color: var(--v2-info) !important; }
:root.fesv-v2:not(#_) .text-dark { color: var(--v2-text) !important; }
:root.fesv-v2:not(#_) .text-body { color: var(--v2-text) !important; }
:root.fesv-v2:not(#_) .bg-white { background-color: var(--v2-surface) !important; }
:root.fesv-v2:not(#_) .bg-light { background-color: var(--v2-surface-alt) !important; color: var(--v2-text); }
:root.fesv-v2:not(#_) .border,
:root.fesv-v2:not(#_) .border-top,
:root.fesv-v2:not(#_) .border-bottom,
:root.fesv-v2:not(#_) .border-start,
:root.fesv-v2:not(#_) .border-end { border-color: var(--v2-border) !important; }
:root.fesv-v2:not(#_) hr { border: 0; height: 1px; background-color: var(--v2-border); color: var(--v2-border); opacity: 1; }
:root.fesv-v2:not(#_) .shadow-sm { box-shadow: var(--v2-shadow-1) !important; }
:root.fesv-v2:not(#_) .shadow { box-shadow: var(--v2-shadow-2) !important; }
:root.fesv-v2:not(#_) .shadow-lg { box-shadow: var(--v2-shadow-3) !important; }
:root.fesv-v2:not(#_) code {
    color: var(--v2-text-2);
    background: var(--v2-sunk);
    font-family: var(--v2-mono);
    font-size: .92em;
    padding: 1px 5px;
    border-radius: 4px;
}
:root.fesv-v2:not(#_) pre { background: var(--v2-surface-alt) !important; color: var(--v2-text); border: 1px solid var(--v2-border); border-radius: var(--v2-r-sm); }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) pre { background: #0A0F17 !important; }
:root.fesv-v2:not(#_) .tabular,
:root.fesv-v2:not(#_) .num,
:root.fesv-v2:not(#_) .tnum { font-variant-numeric: tabular-nums; }

/* scrollbars */
:root.fesv-v2:not(#_) * { scrollbar-color: var(--v2-scroll) transparent; }
:root.fesv-v2:not(#_) *::-webkit-scrollbar { width: 10px; height: 10px; }
:root.fesv-v2:not(#_) *::-webkit-scrollbar-thumb {
    background: var(--v2-scroll);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
:root.fesv-v2:not(#_) *::-webkit-scrollbar-thumb:hover { background: var(--v2-scroll-hover); background-clip: padding-box; }

/* ───────────────────────────── 3. SHELL ───────────────────────────── */
:root.fesv-v2:not(#_) .app-shell { background: var(--v2-bg); }

/* Barra lateral: tinta oscura en ambos modos (identidad del POS) */
:root.fesv-v2:not(#_) .app-sidebar {
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    border-right: 1px solid rgba(255, 255, 255, .04);
    box-shadow: none;
    width: 248px;
    font-family: var(--v2-font);
}
:root.fesv-v2:not(#_) .app-sidebar.is-collapsed { width: 60px; }
:root.fesv-v2:not(#_) .app-sidebar-brand {
    padding: 12px 12px 10px;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--v2-ink-text);
}
:root.fesv-v2:not(#_) .app-sidebar .hamburger-btn {
    color: var(--v2-ink-text-2);
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    font-size: 1.25rem; padding: 0; border-radius: var(--v2-r-sm);
}
:root.fesv-v2:not(#_) .app-sidebar .hamburger-btn:hover { background: var(--v2-ink-2); color: var(--v2-ink-text); }
:root.fesv-v2:not(#_) .app-sidebar .brand-text .brand-title {
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
:root.fesv-v2:not(#_) .app-sidebar .brand-text small,
:root.fesv-v2:not(#_) .app-sidebar small { color: var(--v2-ink-text-3) !important; font-size: var(--v2-fs-caption); }
:root.fesv-v2:not(#_) .app-sidebar .brand-text small.text-warning { color: #F2B35B !important; }
:root.fesv-v2:not(#_) .app-sidebar-amb { padding: 8px 12px 6px; }
:root.fesv-v2:not(#_) .app-sidebar-amb .badge,
:root.fesv-v2:not(#_) .app-topbar .topbar-amb .badge {
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: var(--v2-r-pill);
    padding: 3px 9px 3px 8px;
    display: inline-flex; align-items: center; gap: 6px;
}
:root.fesv-v2:not(#_) .app-sidebar-amb .badge::before,
:root.fesv-v2:not(#_) .app-topbar .topbar-amb .badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
:root.fesv-v2:not(#_) .app-sidebar-amb .badge.bg-warning {
    background: rgba(240, 168, 71, .16) !important; color: #F5BD6E !important; border: 1px solid rgba(240, 168, 71, .3);
}
:root.fesv-v2:not(#_) .app-sidebar-amb .badge.bg-success {
    background: rgba(76, 195, 138, .16) !important; color: #6FD6A2 !important; border: 1px solid rgba(76, 195, 138, .3);
}

/* Menú por módulos (MenuSoftland) — variables del componente */
:root.fesv-v2:not(#_) .menu-sl {
    --msl-text: var(--v2-ink-text-2);
    --msl-text-strong: #fff;
    --msl-text-muted: var(--v2-ink-text-3);
    --msl-text-empty: var(--v2-ink-text-3);
    --msl-hover-bg: rgba(255, 255, 255, .05);
    --msl-item-hover-bg: rgba(255, 255, 255, .05);
    --msl-active-bg: rgba(110, 163, 255, .16);
    --msl-active-border: var(--v2-ink-accent);
    --msl-scrollbar-thumb: rgba(255, 255, 255, .16);
    --msl-border: rgba(255, 255, 255, .06);
    --msl-fav-idle: rgba(255, 255, 255, .3);
    --msl-fav-hover-bg: rgba(255, 255, 255, .08);
    font-family: var(--v2-font);
}
:root.fesv-v2:not(#_) .menu-sl-active-header { padding: 12px 12px 8px; gap: 10px; }
:root.fesv-v2:not(#_) .menu-sl-active-title { font-size: var(--v2-fs-strong); font-weight: 600; letter-spacing: -.005em; }
:root.fesv-v2:not(#_) .menu-sl-badge {
    border-radius: var(--v2-r-sm);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
:root.fesv-v2:not(#_) .menu-sl-subtitle,
:root.fesv-v2:not(#_) .menu-sl-section-title {
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--v2-ink-text-3);
    padding: 6px 12px 4px;
}
:root.fesv-v2:not(#_) .menu-sl-group > summary {
    font-size: var(--v2-fs-caption);
    font-weight: 600;
    color: var(--v2-ink-text-2);
    border-radius: var(--v2-r-sm);
    margin: 0 6px;
    padding: 6px 8px;
}
:root.fesv-v2:not(#_) .menu-sl-items { padding: 0 6px 4px 6px; }
:root.fesv-v2:not(#_) .menu-sl-item { border-radius: var(--v2-r-sm); margin: 1px 0; }
:root.fesv-v2:not(#_) .menu-sl-item.is-active {
    background: var(--msl-active-bg);
    box-shadow: inset 3px 0 0 var(--v2-ink-accent);
}
:root.fesv-v2:not(#_) .menu-sl-link {
    font-size: var(--v2-fs-body);
    color: var(--v2-ink-text-2) !important;
    padding: 6px 8px 6px 14px;
    gap: 10px;
}
:root.fesv-v2:not(#_) .menu-sl-item.is-active .menu-sl-link { color: #fff !important; font-weight: 500; }
:root.fesv-v2:not(#_) .menu-sl-item.is-active .menu-sl-link i { color: var(--v2-ink-accent); opacity: 1; }
:root.fesv-v2:not(#_) .menu-sl-link .badge { font-size: 10px; font-weight: 700; padding: 2px 6px; }
:root.fesv-v2:not(#_) .menu-sl-bottom {
    background: var(--v2-ink-2) !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 6px;
}
:root.fesv-v2:not(#_) .menu-sl-mod {
    color: var(--v2-ink-text-2) !important;
    border-radius: var(--v2-r-sm);
    font-size: var(--v2-fs-body);
    padding: 6px 8px;
    margin: 1px 0;
    border-left: 0 !important;
    background: transparent;
}
:root.fesv-v2:not(#_) .menu-sl-mod:hover { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
:root.fesv-v2:not(#_) .menu-sl-mod.is-active {
    background: rgba(110, 163, 255, .14) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--v2-ink-accent);
}
:root.fesv-v2:not(#_) .menu-sl-mod .menu-sl-badge { width: 26px; height: 26px; font-size: 11px; }

/* Menú clásico (NavItem/NavGroup, superadmin / colapsado) */
:root.fesv-v2:not(#_) .app-sidebar .nav-link,
:root.fesv-v2:not(#_) .app-sidebar a.nav-link,
:root.fesv-v2:not(#_) .app-sidebar .nav-link.text-white {
    color: var(--v2-ink-text-2) !important;
    font-size: var(--v2-fs-body);
    font-weight: 400;
    border-radius: var(--v2-r-sm);
}
:root.fesv-v2:not(#_) .app-sidebar .nav-link:hover { background: rgba(255, 255, 255, .05) !important; color: #fff !important; }
:root.fesv-v2:not(#_) .app-sidebar .nav-link.active,
:root.fesv-v2:not(#_) .app-sidebar .nav-link.active.bg-secondary {
    background: rgba(110, 163, 255, .16) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--v2-ink-accent);
    font-weight: 500;
}
:root.fesv-v2:not(#_) .app-sidebar .nav-item > button.text-white-50 { color: var(--v2-ink-text-3) !important; }
:root.fesv-v2:not(#_) .app-sidebar .border-start.border-secondary { border-color: rgba(255, 255, 255, .08) !important; }

/* Usuario al pie de la barra */
:root.fesv-v2:not(#_) .app-sidebar-user {
    background: var(--v2-ink);
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 10px 12px 12px;
    color: var(--v2-ink-text);
}
:root.fesv-v2:not(#_) .app-sidebar .user-row i { color: var(--v2-ink-text-3); font-size: 1.6rem; }
:root.fesv-v2:not(#_) .app-sidebar .user-info .fw-semibold { color: var(--v2-ink-text) !important; font-size: var(--v2-fs-body); }
:root.fesv-v2:not(#_) .app-sidebar .user-info small { color: var(--v2-ink-text-3) !important; }
:root.fesv-v2:not(#_) .app-sidebar .btn-outline-light,
:root.fesv-v2:not(#_) .app-sidebar .btn-outline-danger {
    background: var(--v2-ink-2);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--v2-ink-text-2);
    border-radius: var(--v2-r-sm);
    min-height: 32px;
}
:root.fesv-v2:not(#_) .app-sidebar .btn-outline-light:hover { background: var(--v2-ink-3); color: #fff; border-color: rgba(255, 255, 255, .16); }
:root.fesv-v2:not(#_) .app-sidebar .btn-outline-danger:hover { background: rgba(242, 112, 127, .16); color: #F4828F; border-color: rgba(244, 130, 143, .4); }
:root.fesv-v2:not(#_) .app-sidebar-scroll { scrollbar-color: rgba(255, 255, 255, .16) transparent; }
:root.fesv-v2:not(#_) .app-sidebar *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); background-clip: padding-box; }

/* Barra superior */
:root.fesv-v2:not(#_) .app-main { background: var(--v2-bg); }
:root.fesv-v2:not(#_) .app-topbar {
    background: var(--v2-surface);
    border-bottom: 1px solid var(--v2-border);
    box-shadow: none;
    min-height: 52px;
    padding: 8px 20px;
}
:root.fesv-v2:not(#_) .topbar-left { color: var(--v2-text); gap: 10px; min-width: 0; }
:root.fesv-v2:not(#_) .topbar-left > span {
    font-size: var(--v2-fs-sub);
    font-weight: 600 !important;
    letter-spacing: -.01em;
}
:root.fesv-v2:not(#_) .topbar-left > i {
    color: var(--v2-accent-text);
    background: var(--v2-accent-soft);
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
:root.fesv-v2:not(#_) .topbar-hamburger {
    color: var(--v2-text-2);
    border-radius: var(--v2-r-sm);
    width: 36px; height: 36px;
}
:root.fesv-v2:not(#_) .topbar-hamburger:hover { background: var(--v2-sunk); color: var(--v2-text); }
:root.fesv-v2:not(#_) .topbar-right { gap: 4px !important; }
:root.fesv-v2:not(#_) .app-topbar .btn,
:root.fesv-v2:not(#_) .app-topbar .fesv-theme-btn {
    color: var(--v2-text-2) !important;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--v2-r-sm);
    font-size: 1.05rem;
}
:root.fesv-v2:not(#_) .app-topbar .btn:hover,
:root.fesv-v2:not(#_) .app-topbar .fesv-theme-btn:hover { background: var(--v2-sunk); color: var(--v2-text) !important; }

/* Avisos con texto en la barra superior (contadores del SuperAdmin).
   La regla de arriba le da 36x36 a TODO .btn del topbar porque los pensaba como botones de
   icono; un aviso que ademas dice «Perfiles 18» o «Sin perfil 45» no entra en 36px y el texto se
   desbordaba encima del de al lado. Se vio al agregar el segundo contador. */
:root.fesv-v2:not(#_) .app-topbar .topbar-aviso {
    width: auto; height: auto;
    padding: 4px 10px;
    font-size: var(--v2-fs-sm, .8125rem);
    gap: 6px;
}
/* El color tambien se recupera: la regla general pinta de gris todo .btn del topbar y sobre el
   rojo del aviso el texto quedaba casi ilegible. */
:root.fesv-v2:not(#_) .app-topbar .topbar-aviso.btn-danger { color: #fff !important; }
:root.fesv-v2:not(#_) .app-topbar .topbar-aviso.btn-warning { color: #141A26 !important; }
:root.fesv-v2:not(#_) .fesv-theme-menu {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r);
    box-shadow: var(--v2-shadow-3) !important;
    padding: 14px;
    min-width: 260px;
}
:root.fesv-v2:not(#_) .fesv-theme-menu .form-check-label .badge {
    background: var(--v2-accent-soft) !important; color: var(--v2-accent-text) !important; font-size: 10px;
}

/* Pestañas (TabsService) */
:root.fesv-v2:not(#_) .app-tabs {
    background: var(--v2-surface);
    border-bottom: 1px solid var(--v2-border);
    padding: 0 12px;
    column-gap: 2px;
    align-items: stretch;
    min-height: 38px;
}
:root.fesv-v2:not(#_) .app-tab {
    background: transparent;
    color: var(--v2-text-2);
    border: 0;
    border-radius: 0;
    padding: 0 10px;
    min-height: 38px;
    font-size: var(--v2-fs-body);
    font-weight: 500;
    position: relative;
    box-shadow: none;
}
:root.fesv-v2:not(#_) .app-tab i.bi { color: var(--v2-text-3); }
:root.fesv-v2:not(#_) .app-tab:hover { background: var(--v2-surface-alt); color: var(--v2-text); }
:root.fesv-v2:not(#_) .app-tab.is-active {
    background: transparent;
    color: var(--v2-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--v2-accent);
}
:root.fesv-v2:not(#_) .app-tab.is-active i.bi:first-child { color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .app-tab.is-pinned,
:root.fesv-v2:not(#_) .app-tab.is-pinned.is-active { background: transparent; }
:root.fesv-v2:not(#_) .app-tab .tab-close {
    width: 20px; height: 20px; margin-left: 6px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center; opacity: .6;
}
:root.fesv-v2:not(#_) .app-tab .tab-close:hover { background: var(--v2-sunk); opacity: 1; }
:root.fesv-v2:not(#_) .app-tab-action { color: var(--v2-text-3); border-radius: var(--v2-r-sm); margin-left: 4px; }
:root.fesv-v2:not(#_) .app-tab-action:hover { color: var(--v2-err); background: var(--v2-err-soft); }

/* Contenido */
:root.fesv-v2:not(#_) .app-content {
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: var(--v2-font);
    font-size: var(--v2-fs-body);
    line-height: 1.5;
    padding: 20px 24px 28px;
}
:root.fesv-v2:not(#_) .app-content h1, :root.fesv-v2:not(#_) .app-content .h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
:root.fesv-v2:not(#_) .app-content h2, :root.fesv-v2:not(#_) .app-content .h2 { font-size: 1.3rem; font-weight: 650; letter-spacing: -.015em; }
:root.fesv-v2:not(#_) .app-content h3, :root.fesv-v2:not(#_) .app-content .h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
:root.fesv-v2:not(#_) .app-content h4, :root.fesv-v2:not(#_) .app-content .h4 {
    font-size: var(--v2-fs-title); font-weight: 650 !important; letter-spacing: -.015em; color: var(--v2-text);
}
:root.fesv-v2:not(#_) .app-content h5, :root.fesv-v2:not(#_) .app-content .h5 { font-size: var(--v2-fs-sub); font-weight: 600; color: var(--v2-text); }
:root.fesv-v2:not(#_) .app-content h6, :root.fesv-v2:not(#_) .app-content .h6 {
    font-size: var(--v2-fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-2);
}
:root.fesv-v2:not(#_) .app-content h4.fw-bold > .bi:first-child,
:root.fesv-v2:not(#_) .app-content h4 > .bi:first-child { color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .app-content .fw-bold { font-weight: 650 !important; }
:root.fesv-v2:not(#_) .app-content .small, :root.fesv-v2:not(#_) .app-content small { font-size: var(--v2-fs-caption); }

/* Pie */
:root.fesv-v2:not(#_) .app-footer {
    background: var(--v2-bg) !important;
    border-top: 1px solid var(--v2-border) !important;
    color: var(--v2-text-3) !important;
    font-size: var(--v2-fs-caption);
    padding: 8px 24px !important;
}
:root.fesv-v2:not(#_) .app-footer .fw-semibold { color: var(--v2-text-2); }

/* Drawer móvil */
@media (max-width: 991.98px) {
    :root.fesv-v2:not(#_) .app-sidebar { width: 84vw; max-width: 320px; box-shadow: var(--v2-shadow-3); }
    :root.fesv-v2:not(#_) .app-sidebar.is-collapsed { width: 84vw; max-width: 320px; }
    :root.fesv-v2:not(#_) .sidebar-backdrop { background: var(--v2-backdrop); }
    :root.fesv-v2:not(#_) .app-topbar { padding: 6px 12px; min-height: 52px; position: sticky; top: 0; z-index: 90; }
    :root.fesv-v2:not(#_) .topbar-left > i { display: none; }
    :root.fesv-v2:not(#_) .app-tabs { padding: 0 6px; overflow-x: auto; flex-wrap: nowrap; }
    :root.fesv-v2:not(#_) .app-content { padding: 14px 12px 88px; }
    :root.fesv-v2:not(#_) .app-footer { padding: 8px 12px !important; }
}

/* ───────────────────────────── 4. COMPONENTES ───────────────────────────── */

/* Tarjetas */
:root.fesv-v2:not(#_) .card {
    background: var(--v2-surface);
    color: var(--v2-text);
    border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-r);
    box-shadow: var(--v2-shadow-1);
}
:root.fesv-v2:not(#_) .card > .card-header,
:root.fesv-v2:not(#_) .card > .card-footer {
    background: var(--v2-surface);
    border-color: var(--v2-border);
    color: var(--v2-text);
    padding: 10px 16px;
}
:root.fesv-v2:not(#_) .card > .card-header:first-child { border-radius: calc(var(--v2-r) - 1px) calc(var(--v2-r) - 1px) 0 0; }
:root.fesv-v2:not(#_) .card > .card-footer:last-child { border-radius: 0 0 calc(var(--v2-r) - 1px) calc(var(--v2-r) - 1px); background: var(--v2-surface-alt); }
:root.fesv-v2:not(#_) .card > .card-header .fw-semibold,
:root.fesv-v2:not(#_) .card > .card-header.fw-semibold { font-weight: 600; font-size: var(--v2-fs-body); color: var(--v2-text); }
:root.fesv-v2:not(#_) .card > .card-header .bi { color: var(--v2-text-3); }
:root.fesv-v2:not(#_) .card-body { padding: 14px 16px; }
:root.fesv-v2:not(#_) .card-body.p-0 { padding: 0 !important; }
/* Encabezados de color saturado → superficie + marca lateral semántica */
:root.fesv-v2:not(#_) .card > .card-header.bg-success,
:root.fesv-v2:not(#_) .card > .card-header.bg-danger,
:root.fesv-v2:not(#_) .card > .card-header.bg-primary,
:root.fesv-v2:not(#_) .card > .card-header.bg-warning,
:root.fesv-v2:not(#_) .card > .card-header.bg-info,
:root.fesv-v2:not(#_) .card > .card-header.bg-secondary,
:root.fesv-v2:not(#_) .card > .card-header.bg-dark {
    background: var(--v2-surface) !important;
    color: var(--v2-text) !important;
    box-shadow: inset 4px 0 0 var(--v2-hdr, var(--v2-text-3));
    padding-left: 20px;
}
:root.fesv-v2:not(#_) .card > .card-header.bg-success { --v2-hdr: var(--v2-ok-solid); }
:root.fesv-v2:not(#_) .card > .card-header.bg-danger { --v2-hdr: var(--v2-err-solid); }
:root.fesv-v2:not(#_) .card > .card-header.bg-primary,
:root.fesv-v2:not(#_) .card > .card-header.bg-info { --v2-hdr: var(--v2-accent); }
:root.fesv-v2:not(#_) .card > .card-header.bg-warning { --v2-hdr: var(--v2-warn-solid); }
:root.fesv-v2:not(#_) .card > .card-header[class*="bg-"] .text-white,
:root.fesv-v2:not(#_) .card > .card-header[class*="bg-"].text-white { color: var(--v2-text) !important; }
:root.fesv-v2:not(#_) .card > .card-header[class*="bg-"] .btn-light,
:root.fesv-v2:not(#_) .card > .card-header[class*="bg-"] .btn-outline-light {
    background: var(--v2-surface); border: 1px solid var(--v2-border-strong); color: var(--v2-text);
}

/* KPIs (dashboard + .fesv-kpi) */
:root.fesv-v2:not(#_) .kpi-card .card-body { padding: 14px 16px !important; }
:root.fesv-v2:not(#_) .kpi-card .text-uppercase {
    font-size: var(--v2-fs-micro) !important; font-weight: 600; letter-spacing: .06em; color: var(--v2-text-2) !important;
}
:root.fesv-v2:not(#_) .kpi-card .fs-3 {
    font-size: var(--v2-fs-num) !important; font-weight: 650 !important; letter-spacing: -.02em; line-height: 1.25; margin: 4px 0 2px;
    font-variant-numeric: tabular-nums;
}
:root.fesv-v2:not(#_) .kpi-card .fs-3.text-primary { color: var(--v2-accent-text) !important; }
:root.fesv-v2:not(#_) .text-up { color: var(--v2-ok) !important; font-weight: 600; }
:root.fesv-v2:not(#_) .text-dn { color: var(--v2-err) !important; font-weight: 600; }
:root.fesv-v2:not(#_) .text-up .text-muted, :root.fesv-v2:not(#_) .text-dn .text-muted { font-weight: 400; }
:root.fesv-v2:not(#_) .fesv-kpi { border-radius: var(--v2-r); border-color: var(--v2-border); box-shadow: var(--v2-shadow-1); padding: 12px 14px 12px 18px; }
:root.fesv-v2:not(#_) .fesv-kpi-label { font-size: var(--v2-fs-micro); letter-spacing: .06em; color: var(--v2-text-2); }
:root.fesv-v2:not(#_) .fesv-kpi-value { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
:root.fesv-v2:not(#_) .fesv-kpi.is-warn::before { background: var(--v2-warn-solid); }
:root.fesv-v2:not(#_) .fesv-kpi.is-danger::before { background: var(--v2-err-solid); }
:root.fesv-v2:not(#_) .fesv-kpi.is-ok::before { background: var(--v2-ok-solid); }
:root.fesv-v2:not(#_) .fesv-kpi.is-active { border-color: var(--v2-accent); box-shadow: 0 0 0 1px var(--v2-accent) inset, var(--v2-shadow-1); }
:root.fesv-v2:not(#_) .fesv-page-icon { border-radius: var(--v2-r); background: var(--v2-accent-soft); color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .fesv-page-head h4,
:root.fesv-v2:not(#_) .fesv-page-head h5 { font-size: var(--v2-fs-title); font-weight: 650 !important; letter-spacing: -.015em; }
:root.fesv-v2:not(#_) .fesv-card { border-radius: var(--v2-r); box-shadow: var(--v2-shadow-1); }
:root.fesv-v2:not(#_) .fesv-callout { border-radius: var(--v2-r-sm); }
:root.fesv-v2:not(#_) .fesv-chip { font-size: var(--v2-fs-micro); padding: 2px 8px; }
:root.fesv-v2:not(#_) .fesv-empty > .bi { color: var(--v2-text-4); }

/* Dashboard: gráficos SVG generados con colores fijos (los presentation
   attributes pierden contra CSS → se retematizan sin tocar el C#). */
:root.fesv-v2:not(#_) .app-content svg [stroke="#0d6efd"] { stroke: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .app-content svg [fill="#0d6efd"] { fill: var(--v2-accent); }
:root.fesv-v2:not(#_) .app-content svg stop[stop-color="#0d6efd"] { stop-color: var(--v2-accent); }
:root.fesv-v2:not(#_) .app-content svg [stroke="#eef2f7"] { stroke: var(--v2-border-subtle); }
:root.fesv-v2:not(#_) .app-content svg [fill="#8a94a6"],
:root.fesv-v2:not(#_) .app-content svg [fill="#6c757d"] { fill: var(--v2-text-3); font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .app-content svg [fill="#dee2e6"],
:root.fesv-v2:not(#_) .app-content svg [fill="#e9ecef"] { fill: var(--v2-sunk); }
:root.fesv-v2:not(#_) .app-content svg [fill="#fff"] { fill: var(--v2-surface); }
:root.fesv-v2:not(#_) .app-content svg [fill="#212529"] { fill: var(--v2-text); font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .app-content svg [fill="#dc3545"] { fill: var(--v2-err-solid); }
:root.fesv-v2:not(#_) .app-content svg [fill="#20c997"] { fill: #1FA971; }
:root.fesv-v2:not(#_) .app-content svg [fill="#fd7e14"] { fill: #E08A00; }
:root.fesv-v2:not(#_) .app-content svg [fill="#6f42c1"] { fill: #7657D9; }
:root.fesv-v2:not(#_) .app-content svg text { font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .bar-wrap { background: var(--v2-sunk); height: 4px; border-radius: 2px; }
:root.fesv-v2:not(#_) .bar { background: var(--v2-accent); border-radius: 2px; }
:root.fesv-v2:not(#_) .skel-card { background: var(--v2-surface) !important; }
:root.fesv-v2:not(#_) .skel { background: linear-gradient(90deg, var(--v2-sunk) 0%, var(--v2-surface-alt) 50%, var(--v2-sunk) 100%); background-size: 200% 100%; }
:root.fesv-v2:not(#_) .touch-data { border-top-color: var(--v2-border-subtle); }

/* Botones — jerarquía: primario (acento) · secundario (neutro con borde) · terciario (texto) · peligro */
:root.fesv-v2:not(#_) .btn {
    font-family: var(--v2-font);
    font-weight: 600;
    font-size: var(--v2-fs-body);
    border-radius: var(--v2-r-sm);
    padding: 6px 14px;
    min-height: var(--v2-h-ctl);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
:root.fesv-v2:not(#_) .btn-sm { font-size: var(--v2-fs-caption); padding: 4px 10px; min-height: var(--v2-h-ctl-sm); }
:root.fesv-v2:not(#_) .btn-lg { font-size: var(--v2-fs-sub); padding: 10px 20px; min-height: 44px; }
:root.fesv-v2:not(#_) .btn:focus,
:root.fesv-v2:not(#_) .btn:active:focus { box-shadow: none; }
:root.fesv-v2:not(#_) .btn:focus-visible { box-shadow: var(--v2-focus); outline: none; }
:root.fesv-v2:not(#_) .btn:disabled,
:root.fesv-v2:not(#_) .btn.disabled { opacity: .5; }
:root.fesv-v2:not(#_) .btn .bi { font-size: 1.05em; }

:root.fesv-v2:not(#_) .btn-primary {
    background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-on-accent);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .08);
}
:root.fesv-v2:not(#_) .btn-primary:hover { background: var(--v2-accent-hover); border-color: var(--v2-accent-hover); color: #fff; }
:root.fesv-v2:not(#_) .btn-primary:active,
:root.fesv-v2:not(#_) .btn-primary.active { background: var(--v2-accent-pressed); border-color: var(--v2-accent-pressed); color: #fff; }

:root.fesv-v2:not(#_) .btn-secondary,
:root.fesv-v2:not(#_) .btn-outline-secondary,
:root.fesv-v2:not(#_) .btn-light,
:root.fesv-v2:not(#_) .btn-outline-dark {
    background: var(--v2-surface); border: 1px solid var(--v2-border-strong); color: var(--v2-text);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}
:root.fesv-v2:not(#_) .btn-secondary:hover,
:root.fesv-v2:not(#_) .btn-outline-secondary:hover,
:root.fesv-v2:not(#_) .btn-light:hover,
:root.fesv-v2:not(#_) .btn-outline-dark:hover { background: var(--v2-surface-alt); border-color: var(--v2-text-4); color: var(--v2-text); }
:root.fesv-v2:not(#_) .btn-secondary:active,
:root.fesv-v2:not(#_) .btn-outline-secondary:active,
:root.fesv-v2:not(#_) .btn-outline-secondary.active { background: var(--v2-sunk); color: var(--v2-text); }

:root.fesv-v2:not(#_) .btn-outline-primary,
:root.fesv-v2:not(#_) .btn-outline-info {
    background: var(--v2-surface); border: 1px solid var(--v2-border-strong); color: var(--v2-accent-text);
}
:root.fesv-v2:not(#_) .btn-outline-primary:hover,
:root.fesv-v2:not(#_) .btn-outline-info:hover { background: var(--v2-accent-soft); border-color: rgba(var(--v2-accent-rgb), .45); color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .btn-outline-success { background: var(--v2-surface); border: 1px solid var(--v2-border-strong); color: var(--v2-ok); }
:root.fesv-v2:not(#_) .btn-outline-success:hover { background: var(--v2-ok-soft); border-color: var(--v2-ok-bd); color: var(--v2-ok); }
:root.fesv-v2:not(#_) .btn-outline-warning { background: var(--v2-surface); border: 1px solid var(--v2-border-strong); color: var(--v2-warn); }
:root.fesv-v2:not(#_) .btn-outline-warning:hover { background: var(--v2-warn-soft); border-color: var(--v2-warn-bd); color: var(--v2-warn); }
:root.fesv-v2:not(#_) .btn-outline-danger { background: var(--v2-surface); border: 1px solid var(--v2-border-strong); color: var(--v2-err); }
:root.fesv-v2:not(#_) .btn-outline-danger:hover { background: var(--v2-err-soft); border-color: var(--v2-err-bd); color: var(--v2-err); }
:root.fesv-v2:not(#_) .btn-success { background: var(--v2-ok-solid); border-color: var(--v2-ok-solid); color: #fff; }
:root.fesv-v2:not(#_) .btn-success:hover { filter: brightness(.94); color: #fff; }
:root.fesv-v2:not(#_) .btn-danger { background: var(--v2-err-solid); border-color: var(--v2-err-solid); color: #fff; }
:root.fesv-v2:not(#_) .btn-danger:hover { background: #9B1D2D; border-color: #9B1D2D; color: #fff; }
:root.fesv-v2:not(#_) .btn-warning { background: var(--v2-warn-solid); border-color: var(--v2-warn-solid); color: #1A2130; }
:root.fesv-v2:not(#_) .btn-info { background: var(--v2-accent-soft); border-color: transparent; color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .btn-dark { background: var(--v2-ink); border-color: var(--v2-ink); color: #fff; }
:root.fesv-v2:not(#_) .btn-link { color: var(--v2-accent-text); font-weight: 600; text-decoration: none; min-height: 0; }
:root.fesv-v2:not(#_) .btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }
:root.fesv-v2:not(#_) .btn-link.p-0 { padding: 0; }
:root.fesv-v2:not(#_) .btn-close { opacity: .55; }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Grupo de botones con una opción activa → control segmentado */
:root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) {
    background: var(--v2-sunk);
    padding: 2px;
    border-radius: 8px;
    gap: 2px;
}
:root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) > .btn {
    border: 0 !important;
    border-radius: var(--v2-r-sm) !important;
    background: transparent;
    color: var(--v2-text-2);
    box-shadow: none;
    min-height: 26px;
    padding: 3px 10px;
    font-weight: 500;
}
:root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) > .btn:hover { color: var(--v2-text); background: rgba(255, 255, 255, .45); }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) > .btn:hover { background: rgba(255, 255, 255, .06); }
:root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) > .btn-primary {
    background: var(--v2-surface);
    color: var(--v2-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

/* Formularios */
:root.fesv-v2:not(#_) .form-label,
:root.fesv-v2:not(#_) .app-content .form-label,
:root.fesv-v2:not(#_) .app-content label.form-label,
:root.fesv-v2:not(#_) .fesv-filtros .form-label,
:root.fesv-v2:not(#_) .fesv-filters .form-label {
    font-size: var(--v2-fs-caption) !important;
    font-weight: 500;
    color: var(--v2-text-2);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px !important;
}
:root.fesv-v2:not(#_) .form-control,
:root.fesv-v2:not(#_) .form-select,
:root.fesv-v2:not(#_) .app-content .form-control,
:root.fesv-v2:not(#_) .app-content .form-select {
    font-family: var(--v2-font);
    font-size: var(--v2-fs-body);
    color: var(--v2-text);
    background-color: var(--v2-surface);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-r-sm);
    min-height: var(--v2-h-ctl);
    padding: 6px 10px;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
    transition: border-color .12s ease, box-shadow .12s ease;
}
:root.fesv-v2:not(#_) .form-select { padding-right: 28px; background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 10px; }
:root.fesv-v2:not(#_) .form-control-sm,
:root.fesv-v2:not(#_) .form-select-sm,
:root.fesv-v2:not(#_) .app-content .form-control-sm,
:root.fesv-v2:not(#_) .app-content .form-select-sm { min-height: var(--v2-h-ctl-sm); font-size: var(--v2-fs-body); padding-top: 4px; padding-bottom: 4px; }
:root.fesv-v2:not(#_) textarea.form-control { min-height: 64px; }
:root.fesv-v2:not(#_) .form-control:hover:not(:focus):not(:disabled),
:root.fesv-v2:not(#_) .form-select:hover:not(:focus):not(:disabled) { border-color: var(--v2-text-4); }
:root.fesv-v2:not(#_) .form-control:focus,
:root.fesv-v2:not(#_) .form-select:focus {
    border-color: var(--v2-accent);
    box-shadow: var(--v2-focus);
    background-color: var(--v2-surface);
    color: var(--v2-text);
}
:root.fesv-v2:not(#_) .form-control::placeholder { color: var(--v2-text-4); opacity: 1; }
: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-surface-alt);
    color: var(--v2-text-2);
    border-color: var(--v2-border);
    box-shadow: none;
}
:root.fesv-v2:not(#_) input[type="number"].form-control,
:root.fesv-v2:not(#_) .form-control.text-end { font-variant-numeric: tabular-nums; }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23AEB7C6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
:root.fesv-v2[data-bs-theme="dark"]:not(#_) input[type="date"]::-webkit-calendar-picker-indicator,
:root.fesv-v2[data-bs-theme="dark"]:not(#_) input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
:root.fesv-v2:not(#_) .input-group-text {
    background: var(--v2-surface-alt); border-color: var(--v2-border-strong); color: var(--v2-text-2);
    font-size: var(--v2-fs-body); border-radius: var(--v2-r-sm);
}
:root.fesv-v2:not(#_) .input-group > .btn { min-height: 0; }
:root.fesv-v2:not(#_) .form-check-input {
    border: 1px solid var(--v2-border-strong);
    background-color: var(--v2-surface);
}
:root.fesv-v2:not(#_) .form-check-input:checked { background-color: var(--v2-accent); border-color: var(--v2-accent); }
:root.fesv-v2:not(#_) .form-check-input:focus { box-shadow: var(--v2-focus); border-color: var(--v2-accent); }
:root.fesv-v2:not(#_) .form-switch .form-check-input { background-color: var(--v2-sunk); }
:root.fesv-v2:not(#_) .form-switch .form-check-input:checked { background-color: var(--v2-accent); }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23939DAE'/%3e%3c/svg%3e");
}
:root.fesv-v2:not(#_) .form-check-label { color: var(--v2-text); }
:root.fesv-v2:not(#_) .form-text { color: var(--v2-text-3); font-size: var(--v2-fs-caption); }
/* Validación */
:root.fesv-v2:not(#_) .form-control.is-invalid,
:root.fesv-v2:not(#_) .form-select.is-invalid,
:root.fesv-v2:not(#_) .form-control.invalid,
:root.fesv-v2:not(#_) .invalid { border-color: var(--v2-err-solid); }
:root.fesv-v2:not(#_) .form-control.is-invalid:focus,
:root.fesv-v2:not(#_) .form-control.invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 53, .22); }
:root.fesv-v2:not(#_) .form-control.is-valid,
:root.fesv-v2:not(#_) .form-control.modified.valid { border-color: var(--v2-border-strong); }
:root.fesv-v2:not(#_) .invalid-feedback,
:root.fesv-v2:not(#_) .validation-message { color: var(--v2-err); font-size: var(--v2-fs-caption); font-weight: 500; }
:root.fesv-v2:not(#_) .text-danger.small,
:root.fesv-v2:not(#_) label .text-danger { color: var(--v2-err) !important; }

/* Tablas */
:root.fesv-v2:not(#_) .table,
:root.fesv-v2:not(#_) .app-content .table {
    color: var(--v2-text);
    font-size: var(--v2-fs-body);
    border-color: var(--v2-border-subtle);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--v2-surface-alt);
    --bs-table-hover-bg: var(--v2-row-hover);
}
:root.fesv-v2:not(#_) .table > thead > tr > th,
:root.fesv-v2:not(#_) .table > thead.table-light > tr > th,
:root.fesv-v2:not(#_) .app-content .table thead th {
    background: var(--v2-surface-alt) !important;
    color: var(--v2-text-2) !important;
    font-size: var(--v2-fs-micro);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 9px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--v2-border) !important;
    vertical-align: middle;
    white-space: nowrap;
}
:root.fesv-v2:not(#_) .table > tbody > tr > td,
:root.fesv-v2:not(#_) .app-content .table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--v2-border-subtle);
    border-top: 0;
    color: var(--v2-text);
    background-color: transparent;
    vertical-align: middle;
}
:root.fesv-v2:not(#_) .table-sm > thead > tr > th,
:root.fesv-v2:not(#_) .app-content .table-sm thead th { padding: 7px 10px; }
:root.fesv-v2:not(#_) .table-sm > tbody > tr > td,
:root.fesv-v2:not(#_) .app-content .table-sm tbody td { padding: 7px 10px; font-size: var(--v2-fs-body); }
:root.fesv-v2:not(#_) .table > tbody > tr:last-child > td { border-bottom-color: transparent; }
:root.fesv-v2:not(#_) .table td.text-end,
:root.fesv-v2:not(#_) .table th.text-end,
:root.fesv-v2:not(#_) .table td.num { font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .table-hover > tbody > tr:hover > *,
:root.fesv-v2:not(#_) .app-content .table tbody tr:hover td { background-color: var(--v2-row-hover) !important; }
:root.fesv-v2:not(#_) .table:not(.table-hover) > tbody > tr:hover > * { background-color: transparent !important; }
:root.fesv-v2:not(#_) .table > tfoot > tr > td,
:root.fesv-v2:not(#_) .table > tfoot > tr > th,
:root.fesv-v2:not(#_) .app-content .table tfoot td {
    background: var(--v2-surface-alt) !important;
    color: var(--v2-text) !important;
    font-weight: 600;
    border-top: 1px solid var(--v2-border-strong) !important;
    padding: 9px 12px;
    font-variant-numeric: tabular-nums;
}
:root.fesv-v2:not(#_) .table code,
:root.fesv-v2:not(#_) .app-content .table code { background: transparent; color: var(--v2-text-2); padding: 0; font-size: .92em; }
:root.fesv-v2:not(#_) .table-responsive { border-radius: inherit; }

/* SelectableGrid */
:root.fesv-v2:not(#_) .selectable-grid .sg-toolbar {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r-sm);
    padding: 6px 8px !important;
    margin: 8px 8px 8px !important;
    box-shadow: var(--v2-shadow-1);
    gap: 6px !important;
}
:root.fesv-v2:not(#_) .selectable-grid .sg-toolbar > .badge.bg-secondary {
    background: var(--v2-sunk) !important;
    color: var(--v2-text-2) !important;
    font-weight: 600;
    border: 0;
    margin-right: 4px !important;
}
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody tr:hover > * {
    background: var(--v2-row-hover) !important;
    color: var(--v2-text) !important;
    -webkit-text-fill-color: currentColor !important;
}
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody tr.sg-selected > *,
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody tr.sg-selected:hover > * {
    background: var(--v2-accent-soft) !important;
    color: var(--v2-text) !important;
}
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody tr.sg-selected > td:first-child { box-shadow: inset 3px 0 0 var(--v2-accent) !important; }
:root.fesv-v2:not(#_) .selectable-grid .sg-cards { gap: 8px; padding: 8px; }
:root.fesv-v2:not(#_) .selectable-grid .sg-card {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r);
    box-shadow: var(--v2-shadow-1);
    padding: 12px;
}
:root.fesv-v2:not(#_) .selectable-grid .sg-card.is-selected {
    border-color: var(--v2-accent);
    background: var(--v2-accent-soft);
    box-shadow: 0 0 0 1px var(--v2-accent) inset;
}

/* Paginación */
:root.fesv-v2:not(#_) .pagination { gap: 4px; }
:root.fesv-v2:not(#_) .page-link,
:root.fesv-v2:not(#_) .app-content .pagination .page-link {
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--v2-r-sm) !important;
    color: var(--v2-text);
    background: var(--v2-surface);
    min-width: 30px; min-height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: var(--v2-fs-caption);
    padding: 4px 9px;
    margin: 0;
}
:root.fesv-v2:not(#_) .page-link:hover { background: var(--v2-surface-alt); color: var(--v2-text); }
:root.fesv-v2:not(#_) .page-item.active .page-link { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }
:root.fesv-v2:not(#_) .page-item.disabled .page-link { background: var(--v2-surface); color: var(--v2-text-4); border-color: var(--v2-border); }

/* Badges → chips de estado (suaves, legibles, AA) */
:root.fesv-v2:not(#_) .badge,
:root.fesv-v2:not(#_) .app-content .badge {
    font-family: var(--v2-font);
    font-weight: 600;
    font-size: var(--v2-fs-micro);
    letter-spacing: .01em;
    line-height: 1.3;
    padding: 3px 8px;
    border-radius: var(--v2-r-sm);
    text-transform: none;
    border: 1px solid transparent;
}
:root.fesv-v2:not(#_) .badge.rounded-pill { border-radius: var(--v2-r-pill); }
:root.fesv-v2:not(#_) .badge.bg-success { background: var(--v2-ok-soft) !important; color: var(--v2-ok) !important; border-color: var(--v2-ok-bd); }
:root.fesv-v2:not(#_) .badge.bg-danger { background: var(--v2-err-soft) !important; color: var(--v2-err) !important; border-color: var(--v2-err-bd); }
:root.fesv-v2:not(#_) .badge.bg-warning { background: var(--v2-warn-soft) !important; color: var(--v2-warn) !important; border-color: var(--v2-warn-bd); }
:root.fesv-v2:not(#_) .badge.bg-info,
:root.fesv-v2:not(#_) .badge.bg-primary { background: var(--v2-info-soft) !important; color: var(--v2-info) !important; border-color: var(--v2-info-bd); }
:root.fesv-v2:not(#_) .badge.bg-secondary,
:root.fesv-v2:not(#_) .badge.bg-light,
:root.fesv-v2:not(#_) .badge.bg-secondary-subtle { background: var(--v2-sunk) !important; color: var(--v2-text-2) !important; border-color: var(--v2-border); }
:root.fesv-v2:not(#_) .badge.bg-dark { background: var(--v2-ink-2) !important; color: #EEF2F7 !important; }
:root.fesv-v2:not(#_) .badge .text-dark, :root.fesv-v2:not(#_) .badge.text-dark { color: inherit !important; }
/* Contadores sobre la barra lateral: sólidos */
:root.fesv-v2:not(#_) .app-sidebar .badge.bg-danger { background: #D63A4D !important; color: #fff !important; border: 0; }
:root.fesv-v2:not(#_) .app-sidebar .badge.bg-warning { background: #E08A00 !important; color: #141A26 !important; border: 0; }
:root.fesv-v2:not(#_) .app-sidebar .badge.bg-primary { background: var(--v2-accent) !important; color: #fff !important; border: 0; }
/* Campana de notificaciones */
:root.fesv-v2:not(#_) .app-topbar .badge.bg-danger { background: #D63A4D !important; color: #fff !important; border: 2px solid var(--v2-surface); font-size: 10px; padding: 1px 5px; }

/* Alertas */
:root.fesv-v2:not(#_) .alert {
    border-radius: var(--v2-r-sm);
    border: 1px solid var(--v2-border);
    background: var(--v2-surface-alt);
    color: var(--v2-text);
    font-size: var(--v2-fs-body);
    padding: 10px 14px;
}
:root.fesv-v2:not(#_) .alert-info,
:root.fesv-v2:not(#_) .alert-primary { background: var(--v2-info-soft); border-color: var(--v2-info-bd); color: var(--v2-info); }
:root.fesv-v2:not(#_) .alert-success { background: var(--v2-ok-soft); border-color: var(--v2-ok-bd); color: var(--v2-ok); }
:root.fesv-v2:not(#_) .alert-warning { background: var(--v2-warn-soft); border-color: var(--v2-warn-bd); color: var(--v2-warn); }
:root.fesv-v2:not(#_) .alert-danger { background: var(--v2-err-soft); border-color: var(--v2-err-bd); color: var(--v2-err); }
:root.fesv-v2:not(#_) .alert-secondary,
:root.fesv-v2:not(#_) .alert-light { background: var(--v2-surface-alt); border-color: var(--v2-border); color: var(--v2-text-2); }
:root.fesv-v2:not(#_) .alert .alert-link { color: inherit; }

/* Pestañas de contenido (nav-tabs / nav-pills) — subrayado */
:root.fesv-v2:not(#_) .nav-tabs {
    border-bottom: 1px solid var(--v2-border);
    gap: 4px;
}
:root.fesv-v2:not(#_) .nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    color: var(--v2-text-2);
    font-weight: 500;
    font-size: var(--v2-fs-body);
    padding: 8px 10px;
    margin-bottom: -1px;
    background: transparent;
    box-shadow: inset 0 -2px 0 transparent;
}
:root.fesv-v2:not(#_) .nav-tabs .nav-link:hover { color: var(--v2-text); box-shadow: inset 0 -2px 0 var(--v2-border-strong); }
:root.fesv-v2:not(#_) .nav-tabs .nav-link.active {
    color: var(--v2-text);
    background: transparent;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--v2-accent);
}
:root.fesv-v2:not(#_) .nav-tabs .nav-link .bi { color: var(--v2-text-3); }
:root.fesv-v2:not(#_) .nav-tabs .nav-link.active .bi { color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .nav-tabs .nav-link .badge { margin-left: 4px; }
:root.fesv-v2:not(#_) .nav-pills .nav-link { border-radius: var(--v2-r-sm); color: var(--v2-text-2); font-weight: 500; }
:root.fesv-v2:not(#_) .nav-pills .nav-link.active { background: var(--v2-accent-soft); color: var(--v2-accent-text); }

/* Dropdowns / listas flotantes */
:root.fesv-v2:not(#_) .dropdown-menu {
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r);
    box-shadow: var(--v2-shadow-3);
    padding: 4px;
    font-size: var(--v2-fs-body);
}
:root.fesv-v2:not(#_) .dropdown-item { border-radius: var(--v2-r-sm); color: var(--v2-text); padding: 6px 10px; }
:root.fesv-v2:not(#_) .dropdown-item:hover,
:root.fesv-v2:not(#_) .dropdown-item:focus { background: var(--v2-surface-alt); color: var(--v2-text); }
:root.fesv-v2:not(#_) .dropdown-item.active,
:root.fesv-v2:not(#_) .dropdown-item:active { background: var(--v2-accent-soft); color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .list-group {
    background: var(--v2-surface) !important;
    color: var(--v2-text) !important;
    border-color: var(--v2-border) !important;
    border-radius: var(--v2-r-sm);
}
:root.fesv-v2:not(#_) .list-group-item {
    background-color: var(--v2-surface) !important;
    color: var(--v2-text) !important;
    border-color: var(--v2-border-subtle) !important;
    font-size: var(--v2-fs-body);
}
:root.fesv-v2:not(#_) .list-group-item-action:hover:not(.active),
:root.fesv-v2:not(#_) .list-group-item-action:focus:not(.active) { background-color: var(--v2-surface-alt) !important; }
:root.fesv-v2:not(#_) .list-group-item.active,
:root.fesv-v2:not(#_) .list-group-item-action.active {
    background-color: var(--v2-accent-soft) !important;
    border-color: var(--v2-accent-soft-2) !important;
    color: var(--v2-accent-text) !important;
}

/* Modales / ConfirmDialog */
:root.fesv-v2:not(#_) .modal.d-block,
:root.fesv-v2:not(#_) .modal.show { background: var(--v2-backdrop) !important; }
:root.fesv-v2:not(#_) .modal-backdrop { background: #0C111A; }
:root.fesv-v2:not(#_) .modal-content {
    background: var(--v2-surface);
    color: var(--v2-text);
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    box-shadow: var(--v2-shadow-3);
    overflow: hidden;
}
:root.fesv-v2:not(#_) .modal-header {
    background: var(--v2-surface) !important;
    color: var(--v2-text) !important;
    border-bottom: 1px solid var(--v2-border);
    padding: 14px 18px;
}
:root.fesv-v2:not(#_) .modal-header[class*="bg-"] { box-shadow: inset 0 3px 0 var(--v2-hdr, var(--v2-accent)); }
:root.fesv-v2:not(#_) .modal-header.bg-danger { --v2-hdr: var(--v2-err-solid); }
:root.fesv-v2:not(#_) .modal-header.bg-warning { --v2-hdr: var(--v2-warn-solid); }
:root.fesv-v2:not(#_) .modal-header.bg-success { --v2-hdr: var(--v2-ok-solid); }
:root.fesv-v2:not(#_) .modal-header .text-white,
:root.fesv-v2:not(#_) .modal-header.text-white,
:root.fesv-v2:not(#_) .modal-header.text-dark { color: var(--v2-text) !important; }
:root.fesv-v2:not(#_) .modal-header .btn-close-white { filter: none; }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .modal-header .btn-close-white { filter: invert(1) grayscale(1) brightness(1.6); }
:root.fesv-v2:not(#_) .modal-title { font-size: var(--v2-fs-sub); font-weight: 600; letter-spacing: -.01em; }
:root.fesv-v2:not(#_) .modal-body { padding: 16px 18px; font-size: var(--v2-fs-body); }
:root.fesv-v2:not(#_) .modal-footer {
    background: var(--v2-surface-alt) !important;
    border-top: 1px solid var(--v2-border);
    padding: 10px 18px;
    gap: 8px;
}
:root.fesv-v2:not(#_) .modal-footer > * { margin: 0; }

/* Toasts */
:root.fesv-v2:not(#_) .toast {
    background: var(--v2-surface);
    color: var(--v2-text);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r);
    box-shadow: var(--v2-shadow-3);
    font-size: var(--v2-fs-body);
}
:root.fesv-v2:not(#_) .toast-header { background: var(--v2-surface-alt); color: var(--v2-text); border-color: var(--v2-border); }

/* Estados vacíos genéricos (icono grande + texto centrado dentro de tarjeta) */
:root.fesv-v2:not(#_) .card-body > .text-center.text-muted > .bi,
:root.fesv-v2:not(#_) .card-body > .text-center > .bi.fs-1,
:root.fesv-v2:not(#_) .card-body > .text-center > .bi.display-4 { color: var(--v2-text-4) !important; }

/* Spinners */
:root.fesv-v2:not(#_) .spinner-border.text-primary { color: var(--v2-accent) !important; }

/* Timelines de detalle */
:root.fesv-v2:not(#_) .fesv-doc-timeline::before,
:root.fesv-v2:not(#_) .fesv-cmp-timeline::before,
:root.fesv-v2:not(#_) .timeline::before { background: var(--v2-border); }
:root.fesv-v2:not(#_) .fesv-doc-content,
:root.fesv-v2:not(#_) .fesv-cmp-content,
:root.fesv-v2:not(#_) .timeline-content { background: var(--v2-surface); border-color: var(--v2-border); color: var(--v2-text); }

/* Reconexión Blazor */
:root.fesv-v2:not(#_) .fesv-reconnect-card { background: var(--v2-surface); color: var(--v2-text); border-radius: 12px; box-shadow: var(--v2-shadow-3); font-family: var(--v2-font); }

/* ───────────────────────────── 5. ACCESIBILIDAD ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root.fesv-v2:not(#_) *,
    :root.fesv-v2:not(#_) *::before,
    :root.fesv-v2:not(#_) *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}
@media (forced-colors: active) {
    :root.fesv-v2:not(#_) .menu-sl-item.is-active,
    :root.fesv-v2:not(#_) .app-tab.is-active,
    :root.fesv-v2:not(#_) .nav-tabs .nav-link.active { outline: 2px solid CanvasText; }
}

/* ───────────────────────────── 6. AJUSTES MÓVIL (ronda 2) ───────────────────────────── */
@media (max-width: 767.98px) {
    :root.fesv-v2:not(#_) .card > .card-header .btn { white-space: nowrap; }
    :root.fesv-v2:not(#_) .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
                mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    :root.fesv-v2:not(#_) .nav-tabs::-webkit-scrollbar { display: none; }
    :root.fesv-v2:not(#_) .nav-tabs .nav-link { white-space: nowrap; }
    :root.fesv-v2:not(#_) .app-content h4, :root.fesv-v2:not(#_) .app-content .h4 { font-size: 1.125rem; }
}
:root.fesv-v2:not(#_) .fesv-sticky-actions {
    background: var(--v2-surface) !important;
    border-top: 1px solid var(--v2-border) !important;
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .08) !important;
}
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .fesv-sticky-actions { box-shadow: 0 -4px 16px rgba(0, 0, 0, .4) !important; }

/* ───────────────────────────── 7. AJUSTES (ronda 3) ───────────────────────────── */
:root.fesv-v2:not(#_) .menu-sl-link .badge { flex: none; overflow: visible; margin-left: auto !important; min-width: 18px; text-align: center; }
:root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) > .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
    :root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) {
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    :root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary)::-webkit-scrollbar { display: none; }
    :root.fesv-v2:not(#_) .btn-group:has(> .btn-outline-secondary):has(> .btn-primary) > .btn { min-height: 36px; padding: 4px 12px; }
    :root.fesv-v2:not(#_) .kpi-card .fs-3 { font-size: 1.375rem !important; }
    :root.fesv-v2:not(#_) .form-check .form-check-label { padding-left: 4px; }
}

/* ═══════════════════════════ 8. BARRIDO FRENTE A (base compartida) ═══════════════════════════
   Reglas genéricas que las páginas de negocio (frente B) y módulos (frente C) pueden
   aprovechar sin tocar marcado. Tokens nuevos:
     --v2-public-bg   fondo de login / portales públicos (/dte, /cot); los inline lo consumen con fallback v1
     --v2-pos-mod     color de módulo en cabeceras POS (lo fija cada shell)
     --v2-h-touch     alto mínimo de control en POS táctiles (44px = Tema.AltoBoton)
   Clases nuevas (solo tienen efecto con v2; en v1 no existen reglas):
     .fesv-toolbar                         barra de acciones/filtros: flex, gap 8, controles de igual alto
     .fesv-chip.is-ok|is-warn|is-err|is-info   chip de estado suave
     .fesv-skeleton                        bloque de carga con brillo (respeta reduced-motion)
     .fesv-empty-state                     estado vacío centrado (icono + texto)
   ═════════════════════════════════════════════════════════════════════════════════════════════ */
:root.fesv-v2 {
    --v2-h-touch: 44px;
    --v2-public-bg: radial-gradient(1200px 600px at 15% -10%, rgba(76, 141, 246, .22), transparent 60%), #141A26;
}

/* ── 8.1 Pendientes del piloto ── */
/* Chip de estado en encabezado semántico (DocumentoDetalle): el primer .badge.bg-light del título
   refleja el estado del encabezado; los demás quedan neutros. */
:root.fesv-v2:not(#_) .card > .card-header[class*="bg-"] .badge.bg-light:not(.fesv-est-chip) { background: var(--v2-sunk) !important; color: var(--v2-text-2) !important; border-color: var(--v2-border); }
:root.fesv-v2:not(#_) .card > .card-header.bg-success .badge.bg-light:not(.fesv-est-chip):first-of-type { background: var(--v2-ok-soft) !important; color: var(--v2-ok) !important; border-color: var(--v2-ok-bd); }
:root.fesv-v2:not(#_) .card > .card-header.bg-danger .badge.bg-light:not(.fesv-est-chip):first-of-type { background: var(--v2-err-soft) !important; color: var(--v2-err) !important; border-color: var(--v2-err-bd); }
:root.fesv-v2:not(#_) .card > .card-header.bg-warning .badge.bg-light:not(.fesv-est-chip):first-of-type { background: var(--v2-warn-soft) !important; color: var(--v2-warn) !important; border-color: var(--v2-warn-bd); }
:root.fesv-v2:not(#_) .card > .card-header.bg-info .badge.bg-light:not(.fesv-est-chip):first-of-type,
:root.fesv-v2:not(#_) .card > .card-header.bg-primary .badge.bg-light:not(.fesv-est-chip):first-of-type { background: var(--v2-info-soft) !important; color: var(--v2-info) !important; border-color: var(--v2-info-bd); }
:root.fesv-v2:not(#_) .card > .card-header .badge { vertical-align: .15em; }

/* Barras de filtros / toolbars: todos los controles al mismo alto (30px en -sm). */
:root.fesv-v2:not(#_) .fesv-filtros .input-group-sm > .form-control,
:root.fesv-v2:not(#_) .fesv-filtros .input-group-sm > .form-select,
:root.fesv-v2:not(#_) .fesv-filtros .input-group-sm > .input-group-text,
:root.fesv-v2:not(#_) .fesv-filtros .input-group-sm > .btn,
:root.fesv-v2:not(#_) .fesv-toolbar .input-group-sm > .form-control,
:root.fesv-v2:not(#_) .fesv-toolbar .input-group-sm > .input-group-text,
:root.fesv-v2:not(#_) .fesv-toolbar .input-group-sm > .btn {
    min-height: var(--v2-h-ctl-sm); padding-top: 4px; padding-bottom: 4px; font-size: var(--v2-fs-body);
}
:root.fesv-v2:not(#_) .fesv-filtros .btn-sm,
:root.fesv-v2:not(#_) .fesv-toolbar .btn-sm { min-height: var(--v2-h-ctl-sm); }
:root.fesv-v2:not(#_) .fesv-filtros [class*="col"] > .form-check,
:root.fesv-v2:not(#_) .fesv-toolbar .form-check { display: flex; align-items: center; gap: 6px; min-height: var(--v2-h-ctl-sm); margin-bottom: 0; }
:root.fesv-v2:not(#_) .fesv-filtros [class*="col"] > .form-check .form-check-input,
:root.fesv-v2:not(#_) .fesv-toolbar .form-check .form-check-input { margin-top: 0; }
:root.fesv-v2:not(#_) .fesv-filtros .btn .badge,
:root.fesv-v2:not(#_) .fesv-toolbar .btn .badge { padding: 1px 6px; line-height: 1.2; margin-left: 6px !important; }
:root.fesv-v2:not(#_) .fesv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Encabezado de pantalla + barra de acciones — PATRÓN GENERAL.
   Marcá el renglón del título con .fesv-encabezado y el grupo de botones con
   .fesv-acciones: en escritorio se ve igual que hoy, y en pantallas chicas los
   botones envuelven en vez de empujar la página fuera del viewport (y de taparle
   el título). Es la forma correcta de armar la barra de acciones de cualquier
   pantalla; no hace falta CSS por pantalla. */
:root.fesv-v2:not(#_) .fesv-encabezado { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--v2-s3); row-gap: var(--v2-s2); }
:root.fesv-v2:not(#_) .fesv-encabezado > * { min-width: 0; }
:root.fesv-v2:not(#_) .fesv-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s2); }
@media (max-width: 767.98px) {
    :root.fesv-v2:not(#_) .fesv-encabezado > .fesv-acciones { width: 100%; justify-content: flex-start; }
    :root.fesv-v2:not(#_) .fesv-acciones > .btn,
    :root.fesv-v2:not(#_) .fesv-acciones > .btn-group { flex: 0 1 auto; }
}

/* Gráficos SVG generados: etiquetas del eje Y no se cortan (Inter es más ancha que la fuente v1). */
:root.fesv-v2:not(#_) .app-content svg[viewBox][preserveAspectRatio] { overflow: visible; }

/* Switches en móvil: fesv-responsive.css cuadra .form-check-input a 1.25rem y deforma el switch. */
@media (max-width: 991.98px) {
    :root.fesv-v2:not(#_) .form-switch { padding-left: 2.75rem; min-height: 1.5rem; }
    :root.fesv-v2:not(#_) .form-switch .form-check-input { width: 2.25rem; height: 1.25rem; margin-left: -2.75rem; margin-top: .05rem; }
}

/* ── 8.2 Chips / skeleton / vacío ── */
:root.fesv-v2:not(#_) .fesv-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--v2-r-pill); font-weight: 600; border: 1px solid var(--v2-border); background: var(--v2-sunk); color: var(--v2-text-2); }
:root.fesv-v2:not(#_) .fesv-chip.is-ok { background: var(--v2-ok-soft); color: var(--v2-ok); border-color: var(--v2-ok-bd); }
:root.fesv-v2:not(#_) .fesv-chip.is-warn { background: var(--v2-warn-soft); color: var(--v2-warn); border-color: var(--v2-warn-bd); }
:root.fesv-v2:not(#_) .fesv-chip.is-err,
:root.fesv-v2:not(#_) .fesv-chip.is-danger { background: var(--v2-err-soft); color: var(--v2-err); border-color: var(--v2-err-bd); }
:root.fesv-v2:not(#_) .fesv-chip.is-info { background: var(--v2-info-soft); color: var(--v2-info); border-color: var(--v2-info-bd); }
:root.fesv-v2:not(#_) .fesv-skeleton,
:root.fesv-v2:not(#_) .placeholder {
    background: linear-gradient(90deg, var(--v2-sunk) 0%, var(--v2-surface-alt) 50%, var(--v2-sunk) 100%);
    background-size: 200% 100%;
    border-radius: var(--v2-r-sm);
    opacity: 1;
    min-height: 12px;
}
:root.fesv-v2:not(#_) .fesv-skeleton,
:root.fesv-v2:not(#_) .placeholder-glow .placeholder,
:root.fesv-v2:not(#_) .placeholder-wave .placeholder { animation: v2-shimmer 1.4s linear infinite; }
@keyframes v2-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
:root.fesv-v2:not(#_) .fesv-empty-state { text-align: center; color: var(--v2-text-3); padding: 32px 16px; }
:root.fesv-v2:not(#_) .fesv-empty-state > .bi { display: block; font-size: 2rem; color: var(--v2-text-4); margin-bottom: 8px; }
:root.fesv-v2:not(#_) .spinner-border { border-width: .16em; }
:root.fesv-v2:not(#_) .spinner-border.text-secondary { color: var(--v2-text-3) !important; }
:root.fesv-v2:not(#_) .fesv-boot { background: var(--v2-bg) !important; font-family: var(--v2-font); }

/* ── 8.3 SelectableGrid (todas las variantes) + paginadores + orden + breadcrumbs ── */
:root.fesv-v2:not(#_) .selectable-grid .sg-table { margin-bottom: 0; }
:root.fesv-v2:not(#_) .selectable-grid .sg-table > thead > tr > th:first-child,
:root.fesv-v2:not(#_) .selectable-grid .sg-table > tbody > tr > td.sg-check { text-align: center; padding-left: 12px; padding-right: 4px; width: 40px; }
:root.fesv-v2:not(#_) .selectable-grid .sg-check .form-check-input,
:root.fesv-v2:not(#_) .selectable-grid thead .form-check-input { margin: 0; vertical-align: middle; cursor: pointer; }
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody td[colspan].text-muted,
:root.fesv-v2:not(#_) .selectable-grid .sg-cards > .text-muted {
    padding: 36px 16px !important; color: var(--v2-text-3) !important; font-size: var(--v2-fs-body);
    background: transparent !important;
}
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody td[colspan].text-muted::before,
:root.fesv-v2:not(#_) .selectable-grid .sg-cards > .text-muted::before {
    content: "\F3E1"; font-family: "bootstrap-icons"; display: block; font-size: 1.75rem; color: var(--v2-text-4); margin-bottom: 6px; line-height: 1;
}
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody tr:has(> td[colspan].text-muted):hover > * { background: transparent !important; }
:root.fesv-v2:not(#_) .selectable-grid .sg-table tbody tr:has(> td[colspan].text-muted) { cursor: default; }
:root.fesv-v2:not(#_) .selectable-grid .sg-toolbar > .badge.bg-secondary { font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .selectable-grid .sg-toolbar .btn { min-height: var(--v2-h-ctl-sm); }
:root.fesv-v2:not(#_) .selectable-grid .sg-card-check .form-check-input { width: 1.125rem; height: 1.125rem; margin-top: 2px; }
:root.fesv-v2:not(#_) .selectable-grid .sg-card:hover { border-color: var(--v2-border-strong); }
:root.fesv-v2:not(#_) .selectable-grid .sg-card.is-selected:hover { border-color: var(--v2-accent); }
:root.fesv-v2:not(#_) .table th[style*="cursor:pointer"]:hover { color: var(--v2-text) !important; }
:root.fesv-v2:not(#_) .table th .bi-arrow-down-short,
:root.fesv-v2:not(#_) .table th .bi-arrow-up-short { color: var(--v2-accent-text); font-size: 1.1em; vertical-align: -.1em; }
:root.fesv-v2:not(#_) .paginador { color: var(--v2-text-3) !important; font-size: var(--v2-fs-caption); }
:root.fesv-v2:not(#_) .paginador strong { color: var(--v2-text); font-weight: 600; font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .paginador .btn-group { gap: 4px; }
:root.fesv-v2:not(#_) .paginador .btn-group > .btn { border-radius: var(--v2-r-sm) !important; min-width: 30px; padding: 4px 8px; margin-left: 0 !important; }
:root.fesv-v2:not(#_) .paginador .form-select-sm { min-height: var(--v2-h-ctl-sm); }
:root.fesv-v2:not(#_) .breadcrumb { font-size: var(--v2-fs-caption); margin-bottom: 8px; --bs-breadcrumb-divider-color: var(--v2-text-4); }
:root.fesv-v2:not(#_) .breadcrumb-item a { color: var(--v2-text-2); text-decoration: none; }
:root.fesv-v2:not(#_) .breadcrumb-item a:hover { color: var(--v2-accent-text); text-decoration: underline; }
:root.fesv-v2:not(#_) .breadcrumb-item.active { color: var(--v2-text); font-weight: 500; }

/* ── 8.4 Modales heredados, ConfirmDialog, escáner, visor FRX ── */
:root.fesv-v2:not(#_) .modal-header .modal-title > .bi:first-child { color: var(--v2-hdr, var(--v2-accent-text)); }
:root.fesv-v2:not(#_) .modal-header.bg-warning .modal-title > .bi:first-child { color: var(--v2-warn-solid); }
:root.fesv-v2:not(#_) .modal-header.bg-danger .modal-title > .bi:first-child { color: var(--v2-err); }
:root.fesv-v2:not(#_) .modal-header.bg-primary,
:root.fesv-v2:not(#_) .modal-header.bg-info { --v2-hdr: var(--v2-accent); }
:root.fesv-v2:not(#_) .modal-header.bg-dark,
:root.fesv-v2:not(#_) .modal-header.bg-secondary { --v2-hdr: var(--v2-text-3); }
:root.fesv-v2:not(#_) .modal-footer .btn { min-width: 88px; }
:root.fesv-v2:not(#_) .modal-dialog { font-family: var(--v2-font); }
/* Modal oscuro deliberado (cámara del escáner): no se aclara */
:root.fesv-v2:not(#_) .modal-content.bg-dark { background: #000 !important; color: #fff; border: 0; border-radius: 0; }
:root.fesv-v2:not(#_) .modal-content.bg-dark > .modal-header,
:root.fesv-v2:not(#_) .modal-content.bg-dark > .modal-footer { background: rgba(0, 0, 0, .6) !important; color: #fff !important; border: 0; }
:root.fesv-v2:not(#_) .modal-content.bg-dark > .modal-header .modal-title > .bi:first-child { color: #fff; }
:root.fesv-v2:not(#_) .modal-content.bg-dark > .modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }
:root.fesv-v2:not(#_) .modal-content.bg-dark .btn-light { background: #fff; color: #141A26; border-color: #fff; }

/* Toast en página (notif.js) */
:root.fesv-v2:not(#_) #notif-toast-host { top: 16px !important; right: 16px !important; gap: 8px !important; }
:root.fesv-v2:not(#_) .notif-toast {
    background: var(--v2-surface) !important;
    color: var(--v2-text) !important;
    border: 1px solid var(--v2-border);
    border-left: 4px solid var(--v2-accent);
    border-radius: var(--v2-r) !important;
    box-shadow: var(--v2-shadow-3) !important;
    padding: 12px 14px !important;
    font-family: var(--v2-font);
    font-size: var(--v2-fs-body);
    width: min(360px, calc(100vw - 32px));
}
:root.fesv-v2:not(#_) .notif-toast .bi { color: var(--v2-accent-text); }
:root.fesv-v2:not(#_) .notif-toast > div + div { color: var(--v2-text-2); opacity: 1 !important; }

/* Buscadores con autocompletado (SearchableSelect / BuscadorCliente) y campana */
:root.fesv-v2:not(#_) .searchable-select-menu { font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .searchable-select-menu .bg-light { background: var(--v2-surface-alt) !important; }
:root.fesv-v2:not(#_) .searchable-select .ss-results { padding: 4px; }
:root.fesv-v2:not(#_) .searchable-select .dropdown-item { border-radius: var(--v2-r-sm); font-size: var(--v2-fs-body); }
:root.fesv-v2:not(#_) .searchable-select .dropdown-item.active,
:root.fesv-v2:not(#_) .searchable-select .dropdown-item.active:hover { background: var(--v2-accent-soft) !important; color: var(--v2-accent-text) !important; }
:root.fesv-v2:not(#_) .searchable-select .dropdown-item.active .fw-semibold { color: var(--v2-accent-text) !important; }
:root.fesv-v2:not(#_) .searchable-select .dropdown-item.active .text-muted { color: var(--v2-text-2) !important; }
:root.fesv-v2:not(#_) .notif-menu { border-radius: var(--v2-r); box-shadow: var(--v2-shadow-3) !important; overflow: hidden; }

/* Selectores de fecha */
:root.fesv-v2:not(#_) input[type="date"].form-control,
:root.fesv-v2:not(#_) input[type="datetime-local"].form-control,
:root.fesv-v2:not(#_) input[type="month"].form-control,
:root.fesv-v2:not(#_) input[type="time"].form-control { font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; border-radius: 4px; }
:root.fesv-v2:not(#_) input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) input[type="month"]::-webkit-calendar-picker-indicator,
:root.fesv-v2[data-bs-theme="dark"]:not(#_) input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* ThemeSwitcher */
:root.fesv-v2:not(#_) .fesv-theme-menu .text-uppercase { font-size: var(--v2-fs-micro); letter-spacing: .06em; color: var(--v2-text-2) !important; }
:root.fesv-v2:not(#_) .fesv-theme-menu .btn-group { background: var(--v2-sunk); padding: 2px; border-radius: 8px; gap: 2px; }
:root.fesv-v2:not(#_) .fesv-theme-menu .btn-group > .btn { border: 0 !important; border-radius: var(--v2-r-sm) !important; box-shadow: none; background: transparent; color: var(--v2-text-2); min-height: 28px; width: auto; height: auto; }
:root.fesv-v2:not(#_) .fesv-theme-menu .btn-group > .btn-primary { background: var(--v2-surface); color: var(--v2-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
:root.fesv-v2:not(#_) .fesv-theme-menu .fesv-accent-swatch:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
:root.fesv-v2:not(#_) .fesv-theme-menu .fesv-tema-switch .text-muted { color: var(--v2-text-3) !important; }

/* Cargadores de página completa, calculadora, timeline, callouts */
:root.fesv-v2:not(#_) .global-loader-overlay,
:root.fesv-v2:not(#_) .fesv-full-loader { font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .global-loader-card,
:root.fesv-v2:not(#_) .fesv-full-loader-box { border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; color: var(--v2-ink-text); }
:root.fesv-v2:not(#_) .global-loader-card .spinner-border,
:root.fesv-v2:not(#_) .fesv-full-loader-box .spinner-border { color: var(--v2-ink-accent) !important; }
:root.fesv-v2:not(#_) .calc-iva-panel { box-shadow: var(--v2-shadow-3) !important; color: var(--v2-text); }
:root.fesv-v2:not(#_) .calc-iva-header { background: var(--v2-ink); }
:root.fesv-v2:not(#_) .fesv-callout.is-warn { background: var(--v2-warn-soft); border-color: var(--v2-warn-bd); color: var(--v2-text); }
:root.fesv-v2:not(#_) .fesv-callout.is-warn > .bi:first-child { color: var(--v2-warn-solid); }
:root.fesv-v2:not(#_) .fesv-callout.is-ok { background: var(--v2-ok-soft); border-color: var(--v2-ok-bd); color: var(--v2-text); }
:root.fesv-v2:not(#_) .fesv-callout.is-ok > .bi:first-child { color: var(--v2-ok); }

/* ── 8.5 Layouts POS táctiles (PosLayout / PosRetailLayout / PosCombustibleLayout) ──
   Identidad del POS de escritorio: barra de tinta, lienzo frío, acento de módulo como filete
   inferior. Densidad táctil: controles ≥ 44px. */
:root.fesv-v2:not(#_) .pos-shell,
:root.fesv-v2:not(#_) .retail-shell,
:root.fesv-v2:not(#_) .posc-shell {
    --pos-bg: var(--v2-bg); --pos-surface: var(--v2-surface); --pos-text: var(--v2-text); --pos-muted: var(--v2-text-3); --pos-border: var(--v2-border);
    --retail-bg: var(--v2-bg); --retail-surface: var(--v2-surface); --retail-text: var(--v2-text); --retail-muted: var(--v2-text-3); --retail-border: var(--v2-border);
    --posc-bg: var(--v2-bg); --posc-surface: var(--v2-surface); --posc-text: var(--v2-text); --posc-muted: var(--v2-text-3); --posc-border: var(--v2-border);
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: var(--v2-font);
}
:root.fesv-v2:not(#_) .pos-shell { --v2-pos-mod: #E08A00; }
:root.fesv-v2:not(#_) .retail-shell { --v2-pos-mod: #23A05A; }
:root.fesv-v2:not(#_) .posc-shell { --v2-pos-mod: #1FA5C0; }
:root.fesv-v2[data-bs-theme="dark"]:not(#_) .pos-shell {
    --pos-canvas-bg: var(--v2-surface);
    --pos-mesa-libre-bg: var(--v2-sunk);
    --pos-mesa-libre-border: var(--v2-border-strong);
    --pos-mesa-bloqueada-bg: var(--v2-surface-alt);
}
:root.fesv-v2:not(#_) .pos-header,
:root.fesv-v2:not(#_) .retail-header,
:root.fesv-v2:not(#_) .posc-header {
    background: var(--v2-ink);
    color: var(--v2-ink-text);
    box-shadow: inset 0 -2px 0 var(--v2-pos-mod), 0 1px 0 rgba(0, 0, 0, .2);
    min-height: 60px;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-left: 16px !important; padding-right: 16px !important;
    gap: 8px;
}
:root.fesv-v2:not(#_) .pos-logo,
:root.fesv-v2:not(#_) .retail-logo,
:root.fesv-v2:not(#_) .posc-logo {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0;
    font-size: var(--v2-fs-sub); letter-spacing: -.01em; min-height: var(--v2-h-touch);
}
:root.fesv-v2:not(#_) .pos-logo > .bi:first-child,
:root.fesv-v2:not(#_) .retail-logo > .bi:first-child,
:root.fesv-v2:not(#_) .posc-logo > .bi:first-child {
    color: var(--v2-pos-mod) !important;
    background: rgba(255, 255, 255, .06);
    width: 36px; height: 36px; border-radius: 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
:root.fesv-v2:not(#_) .pos-logo strong,
:root.fesv-v2:not(#_) .retail-logo strong,
:root.fesv-v2:not(#_) .posc-logo strong { color: #fff !important; font-weight: 650; margin-left: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root.fesv-v2:not(#_) .pos-nav-link,
:root.fesv-v2:not(#_) .retail-nav-link,
:root.fesv-v2:not(#_) .posc-nav-link {
    color: var(--v2-ink-text-2);
    min-height: var(--v2-h-touch);
    display: inline-flex; align-items: center;
    padding: 0 14px;
    border-radius: var(--v2-r-sm);
    font-size: var(--v2-fs-strong);
    font-weight: 500;
}
:root.fesv-v2:not(#_) .pos-nav-link:hover,
:root.fesv-v2:not(#_) .retail-nav-link:hover,
:root.fesv-v2:not(#_) .posc-nav-link:hover { background: var(--v2-ink-2); color: #fff; }
:root.fesv-v2:not(#_) .pos-nav-link.active,
:root.fesv-v2:not(#_) .retail-nav-link.active,
:root.fesv-v2:not(#_) .posc-nav-link.active { background: var(--v2-ink-3); color: #fff; box-shadow: inset 0 -2px 0 var(--v2-pos-mod); }
:root.fesv-v2:not(#_) .pos-header .text-white,
:root.fesv-v2:not(#_) .retail-header .text-white,
:root.fesv-v2:not(#_) .posc-header .text-white { color: var(--v2-ink-text) !important; }
:root.fesv-v2:not(#_) .pos-header .opacity-75,
:root.fesv-v2:not(#_) .retail-header .opacity-75,
:root.fesv-v2:not(#_) .posc-header .opacity-75 { opacity: 1 !important; color: var(--v2-ink-text-2); font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .pos-header .badge.bg-warning,
:root.fesv-v2:not(#_) .posc-header .badge.bg-warning { background: rgba(240, 168, 71, .16) !important; color: #F5BD6E !important; border: 1px solid rgba(240, 168, 71, .3); font-size: 10px !important; letter-spacing: .04em; }
:root.fesv-v2:not(#_) .pos-header .btn,
:root.fesv-v2:not(#_) .retail-header .btn,
:root.fesv-v2:not(#_) .posc-header .btn {
    width: var(--v2-h-touch); height: var(--v2-h-touch); min-height: var(--v2-h-touch); padding: 0; flex: none;
    background: var(--v2-ink-2); border: 1px solid rgba(255, 255, 255, .08); color: var(--v2-ink-text-2);
    border-radius: var(--v2-r-sm); font-size: 1.1rem;
}
:root.fesv-v2:not(#_) .pos-header .btn:hover,
:root.fesv-v2:not(#_) .retail-header .btn:hover,
:root.fesv-v2:not(#_) .posc-header .btn:hover { background: var(--v2-ink-3); color: #fff; border-color: rgba(255, 255, 255, .16); }
:root.fesv-v2:not(#_) .pos-header .btn-outline-warning:hover,
:root.fesv-v2:not(#_) .retail-header .btn-outline-warning:hover,
:root.fesv-v2:not(#_) .posc-header .btn-outline-warning:hover { background: rgba(242, 112, 127, .16); color: #F4828F; border-color: rgba(244, 130, 143, .4); }
:root.fesv-v2:not(#_) .pos-main,
:root.fesv-v2:not(#_) .retail-main,
:root.fesv-v2:not(#_) .posc-main { color: var(--v2-text); font-size: var(--v2-fs-strong); padding: 16px !important; }
:root.fesv-v2:not(#_) .pos-main .btn,
:root.fesv-v2:not(#_) .retail-main .btn,
:root.fesv-v2:not(#_) .posc-main .btn { min-height: var(--v2-h-touch); font-size: var(--v2-fs-strong); padding-left: 16px; padding-right: 16px; touch-action: manipulation; }
:root.fesv-v2:not(#_) .pos-main .btn-sm,
:root.fesv-v2:not(#_) .retail-main .btn-sm,
:root.fesv-v2:not(#_) .posc-main .btn-sm { min-height: 38px; font-size: var(--v2-fs-body); padding-left: 12px; padding-right: 12px; }
:root.fesv-v2:not(#_) .pos-main .btn-lg,
:root.fesv-v2:not(#_) .retail-main .btn-lg,
:root.fesv-v2:not(#_) .posc-main .btn-lg { min-height: 56px; font-size: 1rem; }
:root.fesv-v2:not(#_) .pos-main .form-control,
:root.fesv-v2:not(#_) .pos-main .form-select,
:root.fesv-v2:not(#_) .retail-main .form-control,
:root.fesv-v2:not(#_) .retail-main .form-select,
:root.fesv-v2:not(#_) .posc-main .form-control,
:root.fesv-v2:not(#_) .posc-main .form-select { min-height: var(--v2-h-touch); font-size: var(--v2-fs-strong); }
:root.fesv-v2:not(#_) .pos-main .form-control-sm,
:root.fesv-v2:not(#_) .retail-main .form-control-sm,
:root.fesv-v2:not(#_) .posc-main .form-control-sm,
:root.fesv-v2:not(#_) .pos-main .form-select-sm,
:root.fesv-v2:not(#_) .retail-main .form-select-sm,
:root.fesv-v2:not(#_) .posc-main .form-select-sm { min-height: 38px; }
:root.fesv-v2:not(#_) .pos-main .form-check-input,
:root.fesv-v2:not(#_) .retail-main .form-check-input,
:root.fesv-v2:not(#_) .posc-main .form-check-input { width: 1.25rem; height: 1.25rem; }
:root.fesv-v2:not(#_) .pos-main .form-switch .form-check-input,
:root.fesv-v2:not(#_) .retail-main .form-switch .form-check-input,
:root.fesv-v2:not(#_) .posc-main .form-switch .form-check-input { width: 2.25rem; }
:root.fesv-v2:not(#_) .pos-main .table > tbody > tr > td,
:root.fesv-v2:not(#_) .retail-main .table > tbody > tr > td,
:root.fesv-v2:not(#_) .posc-main .table > tbody > tr > td { padding-top: 11px; padding-bottom: 11px; font-size: var(--v2-fs-strong); }
:root.fesv-v2:not(#_) .pos-main .list-group-item,
:root.fesv-v2:not(#_) .retail-main .list-group-item,
:root.fesv-v2:not(#_) .posc-main .list-group-item { min-height: var(--v2-h-touch); }
:root.fesv-v2:not(#_) .pos-main .nav-tabs .nav-link,
:root.fesv-v2:not(#_) .retail-main .nav-tabs .nav-link,
:root.fesv-v2:not(#_) .posc-main .nav-tabs .nav-link { min-height: var(--v2-h-touch); padding: 10px 14px; }
@media (max-width: 575.98px) {
    :root.fesv-v2:not(#_) .pos-header,
    :root.fesv-v2:not(#_) .retail-header,
    :root.fesv-v2:not(#_) .posc-header { padding-left: 12px !important; padding-right: 12px !important; }
    :root.fesv-v2:not(#_) .pos-header > .ms-auto,
    :root.fesv-v2:not(#_) .retail-header > .ms-auto,
    :root.fesv-v2:not(#_) .posc-header > .ms-auto { gap: 6px !important; }
    :root.fesv-v2:not(#_) .pos-logo,
    :root.fesv-v2:not(#_) .retail-logo,
    :root.fesv-v2:not(#_) .posc-logo { max-width: 40vw; margin-right: 4px !important; }
    :root.fesv-v2:not(#_) .pos-main,
    :root.fesv-v2:not(#_) .retail-main,
    :root.fesv-v2:not(#_) .posc-main { padding: 10px !important; }
}
/* Pantallas de carga / módulo inactivo de los POS (bg-dark) → tinta */
:root.fesv-v2:not(#_) .min-vh-100.bg-dark { background: var(--v2-ink) !important; color: var(--v2-ink-text); font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .min-vh-100.bg-dark .spinner-border.text-warning { color: var(--v2-ink-accent) !important; }
:root.fesv-v2:not(#_) .min-vh-100.bg-dark .btn-warning { min-height: var(--v2-h-touch); padding: 0 20px; }

/* Logins de los POS (clases propias de cada página) */
:root.fesv-v2:not(#_) .pos-login-bg,
:root.fesv-v2:not(#_) .retail-login-bg,
:root.fesv-v2:not(#_) .posc-login-bg { background: var(--v2-public-bg); font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .pos-login-bg .card,
:root.fesv-v2:not(#_) .retail-login-bg .card,
:root.fesv-v2:not(#_) .posc-login-bg .card { border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .06) !important; }
:root.fesv-v2:not(#_) .pos-login-bg .card-body,
:root.fesv-v2:not(#_) .retail-login-bg .card-body,
:root.fesv-v2:not(#_) .posc-login-bg .card-body { padding: 28px !important; }
:root.fesv-v2:not(#_) .pos-login-bg .btn,
:root.fesv-v2:not(#_) .retail-login-bg .btn,
:root.fesv-v2:not(#_) .posc-login-bg .btn { min-height: 48px; font-size: var(--v2-fs-sub); }
:root.fesv-v2:not(#_) .pos-login-bg .input-group-lg > *,
:root.fesv-v2:not(#_) .retail-login-bg .input-group-lg > *,
:root.fesv-v2:not(#_) .posc-login-bg .input-group-lg > * { min-height: 48px; font-size: 1rem; }

/* ── 8.6 AppMotorista (siempre claro: se reafirman los neutros claros en el subárbol) ── */
:root.fesv-v2:not(#_) .mot-app {
    --v2-bg: #EEF1F5; --v2-surface: #FFFFFF; --v2-surface-alt: #F7F9FB; --v2-sunk: #E7EBF0;
    --v2-border: #DDE2E9; --v2-border-subtle: #EBEEF2; --v2-border-strong: #C3CAD4;
    --v2-text: #1A2130; --v2-text-2: #566174; --v2-text-3: #687285; --v2-text-4: #8791A1;
    --v2-accent: #1F5FD6; --v2-accent-rgb: 31, 95, 214; --v2-accent-hover: #1A52BC; --v2-accent-soft: #E8F0FD; --v2-accent-text: #1947A8;
    --v2-ok: #1C7C46; --v2-ok-solid: #1C7C46; --v2-ok-soft: #E5F4EA; --v2-ok-bd: #B9E0C8;
    --v2-err: #B42335; --v2-err-solid: #B42335; --v2-err-soft: #FCEAEC; --v2-err-bd: #F2C0C6;
    --v2-warn: #8F4E00; --v2-warn-soft: #FFF3DD; --v2-warn-bd: #F4D39B;
    --v2-info: #1947A8; --v2-info-soft: #E8F0FD; --v2-info-bd: #C2D6F8;
    --v2-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
    --v2-focus: 0 0 0 3px rgba(31, 95, 214, .28);
    --v2-row-hover: #F3F6FA;
    --bs-body-bg: #FFFFFF; --bs-body-color: #1A2130; --bs-border-color: #C3CAD4; --bs-primary: #1F5FD6; --bs-primary-rgb: 31, 95, 214;
    --bs-secondary-color: #566174;
    background: var(--v2-bg);
    color: var(--v2-text);
    font-family: var(--v2-font);
    color-scheme: light;
}
:root.fesv-v2:not(#_) .mot-splash { background: var(--v2-ink); }
:root.fesv-v2:not(#_) .mot-splash .spinner-border { color: var(--v2-ink-accent) !important; }
:root.fesv-v2:not(#_) .mot-header { background: #141A26; color: #EEF2F7; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
:root.fesv-v2:not(#_) .mot-header .name { color: #fff; font-weight: 650; letter-spacing: -.01em; }
:root.fesv-v2:not(#_) .mot-header .stats { color: #B4BDCB; opacity: 1; }
:root.fesv-v2:not(#_) .mot-header .stats b { color: #fff; font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .mot-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-r); box-shadow: var(--v2-shadow-1); padding: 16px; }
:root.fesv-v2:not(#_) .mot-card.accent-ok { background: var(--v2-ok-solid); border-color: var(--v2-ok-solid); color: #fff; }
:root.fesv-v2:not(#_) .mot-card.accent-live { box-shadow: inset 4px 0 0 var(--v2-ok-solid), var(--v2-shadow-1); border-left: 1px solid var(--v2-border); padding-left: 20px; }
:root.fesv-v2:not(#_) .mot-title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
:root.fesv-v2:not(#_) .fx-btn { border-radius: var(--v2-r); font-family: var(--v2-font); font-weight: 600; min-height: 52px; }
:root.fesv-v2:not(#_) .fx-btn:focus-visible { outline: none; box-shadow: var(--v2-focus); }
:root.fesv-v2:not(#_) .mot-btn-primary,
:root.fesv-v2:not(#_) .fx-btn-primary { background: var(--v2-accent); color: #fff; }
:root.fesv-v2:not(#_) .mot-btn-success,
:root.fesv-v2:not(#_) .fx-btn-success { background: var(--v2-ok-solid); color: #fff; }
:root.fesv-v2:not(#_) .mot-btn-danger,
:root.fesv-v2:not(#_) .fx-btn-danger { background: var(--v2-err-solid); color: #fff; }
:root.fesv-v2:not(#_) .mot-btn-outline,
:root.fesv-v2:not(#_) .fx-btn-outline { background: var(--v2-surface); color: var(--v2-accent-text); border: 1px solid var(--v2-border-strong); }
:root.fesv-v2:not(#_) .mot-btn-ghost,
:root.fesv-v2:not(#_) .fx-btn-ghost { background: transparent; color: var(--v2-text-2); border: 1px dashed var(--v2-border-strong); }
:root.fesv-v2:not(#_) .fx-input,
:root.fesv-v2:not(#_) .fx-select { border-color: var(--v2-border-strong); border-radius: var(--v2-r-sm); font-family: var(--v2-font); background: var(--v2-surface); color: var(--v2-text); }
:root.fesv-v2:not(#_) .fx-input:focus,
:root.fesv-v2:not(#_) .fx-select:focus { border-color: var(--v2-accent); box-shadow: var(--v2-focus); }
:root.fesv-v2:not(#_) .fx-card { border-color: var(--v2-border); border-radius: var(--v2-r); box-shadow: var(--v2-shadow-1); }
:root.fesv-v2:not(#_) .fx-action-bar { border-top-color: var(--v2-border); box-shadow: 0 -4px 16px rgba(16, 24, 40, .08); }
:root.fesv-v2:not(#_) .mot-list-item { border-bottom: 1px solid var(--v2-border-subtle); padding: 10px 0; }
:root.fesv-v2:not(#_) .mot-list-item .lbl { color: var(--v2-text-3); }
:root.fesv-v2:not(#_) .mot-list-item .val { color: var(--v2-text); font-variant-numeric: tabular-nums; }
:root.fesv-v2:not(#_) .mot-error { color: var(--v2-err); }
:root.fesv-v2:not(#_) .mot-link { color: var(--v2-accent-text); font-weight: 600; }

/* ── 8.7 Autenticación, registro y portal público ── */
:root.fesv-v2:not(#_) .fesv-auth {
    background: var(--v2-public-bg) !important;
    font-family: var(--v2-font);
    padding-left: 16px; padding-right: 16px;
}
:root.fesv-v2:not(#_) .fesv-auth > .card {
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .45) !important;
}
:root.fesv-v2:not(#_) .fesv-auth > .card > .card-body { padding: 32px !important; }
:root.fesv-v2:not(#_) .fesv-auth .card-title {
    font-size: 1.375rem; font-weight: 700 !important; letter-spacing: -.02em; color: var(--v2-text);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
:root.fesv-v2:not(#_) .fesv-auth .card-title::before {
    content: "F"; width: 44px; height: 44px; border-radius: 12px;
    background: var(--v2-accent); color: #fff; font-size: 1.375rem; font-weight: 750;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(var(--v2-accent-rgb), .35);
}
:root.fesv-v2:not(#_) .fesv-auth .form-label { font-size: var(--v2-fs-caption) !important; font-weight: 600 !important; color: var(--v2-text-2); }
:root.fesv-v2:not(#_) .fesv-auth .form-control { min-height: 40px; font-size: var(--v2-fs-strong); }
:root.fesv-v2:not(#_) .fesv-auth .btn:not(.btn-sm) { min-height: 42px; font-size: var(--v2-fs-strong); }
:root.fesv-v2:not(#_) .fesv-auth .btn-lg.border-2 { justify-content: flex-start; border-width: 1px !important; color: var(--v2-text); background: var(--v2-surface); border-color: var(--v2-border-strong); min-height: 60px; }
:root.fesv-v2:not(#_) .fesv-auth .btn-lg.border-2:hover { background: var(--v2-surface-alt); border-color: var(--v2-accent); color: var(--v2-text); }
:root.fesv-v2:not(#_) .fesv-auth .btn-lg.border-2 .fw-semibold { font-size: var(--v2-fs-strong); }
:root.fesv-v2:not(#_) .fesv-auth hr { margin: 20px 0 !important; }
@media (max-width: 575.98px) {
    :root.fesv-v2:not(#_) .fesv-auth > .card > .card-body { padding: 24px 20px !important; }
}
:root.fesv-v2:not(#_) .fesv-auth-registro { font-family: var(--v2-font); padding-top: 32px !important; }
:root.fesv-v2:not(#_) .fesv-auth-registro h2.text-primary { color: var(--v2-text) !important; font-weight: 700 !important; letter-spacing: -.02em; font-size: 1.625rem; }
:root.fesv-v2:not(#_) .fesv-auth-portal,
:root.fesv-v2:not(#_) .fesv-empty-layout { font-family: var(--v2-font); color: var(--v2-text); }
:root.fesv-v2:not(#_) .fesv-empty-layout .app-footer { background: transparent !important; }
:root.fesv-v2:not(#_) .dte-public,
:root.fesv-v2:not(#_) .cot-public { font-family: var(--v2-font); }
:root.fesv-v2:not(#_) .dte-public .card,
:root.fesv-v2:not(#_) .cot-public .card { border-radius: 14px; }
:root.fesv-v2:not(#_) .dte-public .card.shadow-lg,
:root.fesv-v2:not(#_) .cot-public .card.shadow-lg { box-shadow: 0 24px 64px rgba(0, 0, 0, .4) !important; }

/* ── 8.8 Accesibilidad complementaria ── */
:root.fesv-v2:not(#_) .menu-sl-link:focus-visible,
:root.fesv-v2:not(#_) .menu-sl-mod:focus-visible,
:root.fesv-v2:not(#_) .app-sidebar .nav-link:focus-visible { outline: 2px solid var(--v2-ink-accent); outline-offset: -2px; }
:root.fesv-v2:not(#_) .app-tab:focus-visible,
:root.fesv-v2:not(#_) .app-tab .tab-close:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: -2px; }
:root.fesv-v2:not(#_) .pos-header :focus-visible,
:root.fesv-v2:not(#_) .retail-header :focus-visible,
:root.fesv-v2:not(#_) .posc-header :focus-visible,
:root.fesv-v2:not(#_) .mot-header :focus-visible { outline: 2px solid var(--v2-ink-accent); outline-offset: 2px; }
:root.fesv-v2:not(#_) .form-check-input:focus-visible { box-shadow: var(--v2-focus); }
@media (prefers-reduced-motion: reduce) {
    :root.fesv-v2:not(#_) .notif-wrapper .bi-bell-fill,
    :root.fesv-v2:not(#_) .ss-dot.ok,
    :root.fesv-v2:not(#_) .fesv-full-loader .fs-4,
    :root.fesv-v2:not(#_) .mot-pulse,
    :root.fesv-v2:not(#_) .placeholder,
    :root.fesv-v2:not(#_) .fesv-skeleton { animation: none !important; }
    :root.fesv-v2:not(#_) .fx-btn:active,
    :root.fesv-v2:not(#_) .fx-tap:active { transform: none; }
}

/* ── 8.9 Correcciones reportadas por frente C ── */
/* Iconos dentro de botones de card-header heredan el color del botón */
:root.fesv-v2:not(#_) .card > .card-header .btn .bi { color: inherit; }
/* card-header con text-white sin clase bg-* (fondo propio/inline): se respeta el blanco */
:root.fesv-v2:not(#_) .card > .card-header.text-white:not([class*="bg-"]),
:root.fesv-v2:not(#_) .card > .card-header.text-white:not([class*="bg-"]) .fw-semibold,
:root.fesv-v2:not(#_) .card > .card-header.text-white:not([class*="bg-"]) strong,
:root.fesv-v2:not(#_) .card > .card-header.text-white:not([class*="bg-"]) .bi { color: #fff !important; }
/* Enlaces sobre barras de tinta de los POS */
:root.fesv-v2:not(#_) .pos-header a,
:root.fesv-v2:not(#_) .retail-header a,
:root.fesv-v2:not(#_) .posc-header a { color: var(--v2-ink-text-2); }
:root.fesv-v2:not(#_) .pos-header a:hover,
:root.fesv-v2:not(#_) .retail-header a:hover,
:root.fesv-v2:not(#_) .posc-header a:hover { color: #fff; }
/* Badge de rol en cabecera POS: sólido (legible, no lavado) */
:root.fesv-v2:not(#_) .pos-header .badge.bg-warning,
:root.fesv-v2:not(#_) .posc-header .badge.bg-warning { background: #F0A847 !important; color: #141A26 !important; border: 0; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   FIX GENÉRICO — legibilidad y maquetación de listas flotantes / combos
   Causa raíz: Bootstrap 5.1 fija `.btn { color:#212529; text-align:center }`
   y v2 lo convierte en `display:inline-flex; justify-content:center`.
   Cualquier `.btn` SIN variante usado como ítem de lista quedaba (a) texto
   casi negro sobre superficie oscura de v2 (contraste ~1.1:1) y (b) con el
   contenido centrado, ignorando `.text-start`.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Botón "desnudo" (sin variante de color): hereda el texto del tema. */
:root.fesv-v2:not(#_) .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not([class*="btn-outline"]) {
    color: var(--v2-text);
}

/* 2) Las utilidades de alineación deben ganar al flex de `.btn`. */
:root.fesv-v2:not(#_) .btn.text-start { justify-content: flex-start; text-align: left; }
:root.fesv-v2:not(#_) .btn.text-end { justify-content: flex-end; text-align: right; }

/* 3) Listas de sugerencias genéricas (.fesv-suggest). */
:root.fesv-v2:not(#_) .fesv-suggest {
    background: var(--v2-surface);
    color: var(--v2-text);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-r);
    box-shadow: var(--v2-shadow-3);
}

:root.fesv-v2:not(#_) .fesv-suggest-item {
    color: var(--v2-text);
    background: transparent;
    border-bottom: 1px solid var(--v2-border-subtle);
    font-size: var(--v2-fs-body);
    font-weight: 400;
    padding: 6px 10px;
    min-height: 0;
}

    :root.fesv-v2:not(#_) .fesv-suggest-item:last-child { border-bottom: 0; }

    :root.fesv-v2:not(#_) .fesv-suggest-item:hover,
    :root.fesv-v2:not(#_) .fesv-suggest-item:focus {
        background: var(--v2-row-hover);
        color: var(--v2-text);
    }

    :root.fesv-v2:not(#_) .fesv-suggest-item.active,
    :root.fesv-v2:not(#_) .fesv-suggest-item[aria-selected="true"] {
        background: var(--v2-accent-soft);
        color: var(--v2-accent-text);
        box-shadow: inset 2px 0 0 var(--v2-accent);
    }

        :root.fesv-v2:not(#_) .fesv-suggest-item.active code,
        :root.fesv-v2:not(#_) .fesv-suggest-item.active .text-muted,
        :root.fesv-v2:not(#_) .fesv-suggest-item[aria-selected="true"] code,
        :root.fesv-v2:not(#_) .fesv-suggest-item[aria-selected="true"] .text-muted { color: var(--v2-accent-text) !important; }

    :root.fesv-v2:not(#_) .fesv-suggest-item code { color: var(--v2-text-2); }

:root.fesv-v2:not(#_) .fesv-suggest-empty { color: var(--v2-text-3); font-size: var(--v2-fs-body); }

/* 4) Red de seguridad para CUALQUIER lista flotante futura: el texto de los
      ítems nunca hereda del `.btn` de Bootstrap ni de `.bg-white` reasignado. */
:root.fesv-v2:not(#_) .dropdown-menu .text-muted,
:root.fesv-v2:not(#_) .list-group .text-muted,
:root.fesv-v2:not(#_) .fesv-suggest .text-muted { color: var(--v2-text-3) !important; }

:root.fesv-v2:not(#_) .dropdown-menu code,
:root.fesv-v2:not(#_) .list-group code,
:root.fesv-v2:not(#_) .fesv-suggest code { color: var(--v2-text-2); }

:root.fesv-v2:not(#_) .dropdown-header { color: var(--v2-text-3); font-size: var(--v2-fs-caption); }
:root.fesv-v2:not(#_) .dropdown-divider { border-top-color: var(--v2-border); opacity: 1; }
:root.fesv-v2:not(#_) .dropdown-item.disabled,
:root.fesv-v2:not(#_) .dropdown-item:disabled { color: var(--v2-text-3); }

/* 5) Desplegable NATIVO de <select> / <datalist>: además de `color-scheme`
      (ya declarado en :root.fesv-v2), fijamos option/optgroup porque Chromium
      en Windows pinta el popup con los colores del elemento, no del tema. */
:root.fesv-v2:not(#_) select option,
:root.fesv-v2:not(#_) select optgroup,
:root.fesv-v2:not(#_) .form-select option,
:root.fesv-v2:not(#_) .form-select optgroup {
    background-color: var(--v2-surface);
    color: var(--v2-text);
}

:root.fesv-v2:not(#_) select option:disabled,
:root.fesv-v2:not(#_) .form-select option:disabled { color: var(--v2-text-4); }

:root.fesv-v2:not(#_) .form-select { color: var(--v2-text); }

/* ===========================================================================
   Avisos / toasts (Shared/AvisoHost.razor + Services/AvisoService.cs)
   ---------------------------------------------------------------------------
   El aviso va donde el usuario está mirando, no al revés: un formulario largo
   se guarda desde abajo y el alert de arriba no se ve.

   Sin selector de tema: usa solo variables, así sirve en los cinco temas
   (claro, oscuro, alto contraste, etc.) sin una regla por tema.

   Posición: abajo a la derecha. En <992px la barra .fesv-sticky-actions ocupa
   el borde inferior, así que los avisos suben por encima de ella.
   =========================================================================== */
.fesv-avisos {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9998; /* sobre modales (1055) y bajo el overlay de carga (9999) */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.fesv-aviso {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border-radius: var(--v2-r, 10px);
    border: 1px solid var(--v2-border);
    border-left: 4px solid var(--v2-border);
    background: var(--v2-surface);
    color: var(--v2-text);
    box-shadow: var(--v2-shadow-3);
    font-family: var(--v2-font);
    font-size: var(--v2-fs-body);
    line-height: 1.35;
    animation: fesv-aviso-entra .18s ease-out;
}

.fesv-aviso-ico { flex: 0 0 auto; margin-top: 1px; }
.fesv-aviso-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fesv-aviso-x { flex: 0 0 auto; margin-top: 2px; }

.fesv-aviso.is-ok   { border-left-color: var(--v2-ok);   background: var(--v2-ok-soft);   border-color: var(--v2-ok-bd); }
.fesv-aviso.is-err  { border-left-color: var(--v2-err);  background: var(--v2-err-soft);  border-color: var(--v2-err-bd); }
.fesv-aviso.is-warn { border-left-color: var(--v2-warn); background: var(--v2-warn-soft); border-color: var(--v2-warn-bd); }
.fesv-aviso.is-info { border-left-color: var(--v2-info); background: var(--v2-info-soft); border-color: var(--v2-info-bd); }

.fesv-aviso.is-ok   .fesv-aviso-ico { color: var(--v2-ok); }
.fesv-aviso.is-err  .fesv-aviso-ico { color: var(--v2-err); }
.fesv-aviso.is-warn .fesv-aviso-ico { color: var(--v2-warn); }
.fesv-aviso.is-info .fesv-aviso-ico { color: var(--v2-info); }

/* El error se queda hasta que lo cierren: se marca más para que no se confunda
   con el éxito de un vistazo. */
.fesv-aviso.is-err { font-weight: 500; }

/* ── Aviso grande ────────────────────────────────────────────────────────────
   Lo usan las respuestas del Ministerio de Hacienda. El dueño pidió que se
   vieran: una franja finita arriba del formulario se perdía entre pestañas.
   Más ancho, más aire y título en negrita, sin dejar de ser el mismo toast. */
.fesv-aviso.is-grande {
    padding: 16px 16px 16px 18px;
    font-size: calc(var(--v2-fs-body) + 1px);
    line-height: 1.45;
    box-shadow: var(--v2-shadow-4, var(--v2-shadow-3));
}

.fesv-aviso-titulo {
    font-weight: 700;
    font-size: calc(var(--v2-fs-body) + 2px);
    margin-bottom: 4px;
}

/* El motivo literal del MH: bloque aparte, monoespaciado y seleccionable, para
   que se distinga de la explicación nuestra y se pueda leer con calma. */
.fesv-aviso-detalle {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-border);
    font-family: var(--v2-font-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
    font-size: calc(var(--v2-fs-body) - 1px);
    line-height: 1.4;
    max-height: 9.5em;
    overflow: auto;
    overflow-wrap: anywhere;
    user-select: text;
}

.fesv-aviso-copiar {
    margin-top: 8px;
    border: 1px solid var(--v2-border);
    background: transparent;
    color: inherit;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: calc(var(--v2-fs-body) - 1px);
    cursor: pointer;
}

.fesv-aviso-copiar:hover { background: var(--v2-surface); }

/* Los avisos del MH necesitan más ancho que un «Guardado.» */
.fesv-avisos:has(.fesv-aviso.is-grande) { max-width: min(560px, calc(100vw - 32px)); }

@media (max-width: 991.98px) {
    .fesv-avisos {
        left: 16px;
        right: 16px;
        max-width: none;
        /* Por encima de la barra sticky de acciones y de la barra de gestos. */
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

@keyframes fesv-aviso-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fesv-aviso { animation: none; }
}

/* ── Utilidades de tamaño de letra ────────────────────────────────────────────
   Para que una pantalla no tenga que escribir font-size a mano: cada una apunta a
   la escala del tema, así un cambio de escala llega a todas. Las dos últimas son
   tamaños de pieza (el aspa de un chip, el ícono grande del marcador de imagen),
   no de texto, y por eso no salen de la escala tipográfica. */
.fesv-fs-micro { font-size: var(--v2-fs-micro, .6875rem); }
.fesv-fs-caption { font-size: var(--v2-fs-caption, .75rem); }
.fesv-fs-body { font-size: var(--v2-fs-body, .8125rem); }
.fesv-chip-cerrar { font-size: var(--v2-fs-aspa, .5rem); }
.fesv-icono-xl { font-size: var(--v2-fs-icono-xl, 3rem); }