/* ═══════════════════════════════════════════════════════════════
   BRANDGINEERS SHELL 2.0 — Core v5.0 (18/10/2026)
   Plantilla base de TODOS los proyectos (.NET Core / Blazor).
   Reescritura limpia: reemplaza las capas v1–v4 (sin parches aditivos).

   CÓMO RE-TEMATIZAR UN CLIENTE
   1. Cambia SOLO --brand en :root (sección 1).
      Todo lo demás (tintes, hover, foco, texto sobre marca) se deriva solo.
   2. Reemplaza images/logo.png, images/icono.png (PNG transparentes).
   3. El tema oscuro NO usa el color de marca: es una escala neutra de
      negros, grises y blancos. Solo el logo conserva su color.
   4. MARCA CLARA (amarillo, lima, celeste, naranja claro…): además pon en
      appsettings.json  "Sistema": { "TonoMarca": "claro" }.  AppRoot.razor
      agrega <html data-brand-tone="light"> y se aplica la sección 1c:
      botones de marca con texto negro y tema oscuro "marca sobre negro".

   REGLAS DE COLOR
   - --brand / --p*: acciones e interacción (botón principal, activo, foco).
   - Semánticos (--success, --warning, --danger, --info): SOLO estados.
   - Neutros: todo lo demás (superficies, íconos en reposo, bordes).

   Carga después de bootstrap.min.css y site.css (ver AppRoot.razor).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ══════════════════════════ 1. TOKENS — TEMA CLARO ══════════════════════════ */
:root {
    /* ▸ PALETA DE MARCAS (colores vivos ya calibrados: texto blanco legible y
         tintes con presencia). Para cada cliente elige UNA en --brand y copia su
         RGB en --brand-rgb. Todo lo demás (botones, activo, tintes, foco, tablas)
         se calcula a partir de --brand.
         Nombre       HEX       RGB            Uso sugerido */
    --marca-indigo:    #4233CE; /* 66, 51, 206   · Índigo Brandgineers (por defecto) — tecnología, institucional */
    --marca-cobalto:   #1D4ED8; /* 29, 78, 216   · Azul cobalto — salud, clínicas, confianza */
    --marca-electrico: #2563EB; /* 37, 99, 235   · Azul eléctrico — educación, servicios, software */
    --marca-turquesa:  #0E7490; /* 14, 116, 144  · Turquesa — odontología, laboratorios, bienestar */
    --marca-teal:      #0F766E; /* 15, 118, 110  · Verde azulado — terapias, psicología, veterinaria */
    --marca-esmeralda: #047857; /* 4, 120, 87    · Verde esmeralda — colegios, ambiental, agro */
    --marca-violeta:   #6D28D9; /* 109, 40, 217  · Violeta — academias, eventos, creatividad */
    --marca-uva:       #7E22CE; /* 126, 34, 206  · Morado uva — salud femenina, estética */
    --marca-fucsia:    #BE185D; /* 190, 24, 93   · Fucsia — belleza, spa, moda */
    --marca-carmesi:   #BE123C; /* 190, 18, 60   · Carmesí — restaurantes, deportes, energía */
    --marca-naranja:   #C2410C; /* 194, 65, 12   · Naranja quemado — restaurantes, delivery, talleres */
    --marca-marino:    #1E3A8A; /* 30, 58, 138   · Azul marino — legal, contable, financiero, giros */
    /* Marcas CLARAS: requieren "TonoMarca": "claro" (sección 1c), texto negro encima. */
    --marca-amarillo:  #FFC20E; /* 255, 194, 14  · Amarillo industrial — maquinaria, construcción, transporte */
    --marca-lima:      #A3E635; /* 163, 230, 53  · Lima — deportes, gimnasios, ecológico */
    --marca-celeste:   #38BDF8; /* 56, 189, 248  · Celeste — piscinas, limpieza, turismo */

    /* Notas: esmeralda se parece al verde de "éxito" y carmesí al rojo de "peligro";
       úsalos solo si son la identidad real del cliente. Si el cliente tiene un color
       propio que no está aquí, ponlo directo en --brand (se normaliza solo, 1b). */

    /* ▸ Marca del cliente: lo ÚNICO que se cambia por proyecto */
    --brand: var(--marca-amarillo);
    /* Legado: RGB de la marca elegida (solo para rgba(var(--brand-rgb), x)). */
    --brand-rgb:  255, 194, 14 ;

    /* ▸ Color de acción (botones principales, activo, foco, enlaces).
         Por defecto = --brand. Si el color de marca del cliente es muy apagado,
         gris/negro o muy claro (amarillo, celeste), define aquí otro color de su
         paleta: es el ÚNICO otro valor que se puede tocar por proyecto. */
    --accent: var(--brand);

    /* ▸ Rol "acción" (derivado de --accent). En oscuro pasa a neutro.
         Con navegadores actuales se "normaliza" (sección 1b) para que cualquier
         color de cliente tenga saturación y contraste suficientes. */
    --p: var(--accent);
    --on-p: #FFFFFF;
    --p-hover: color-mix(in oklab, var(--p) 84%, #000);
    --p-soft: color-mix(in oklab, var(--p) 13%, #fff);
    --p-soft-2: color-mix(in oklab, var(--p) 22%, #fff);
    --p-text: color-mix(in oklab, var(--p) 90%, #000);
    --p-line: color-mix(in oklab, var(--p) 52%, #E3E5ED);
    --p-ring: color-mix(in srgb, var(--p) 28%, transparent);

    /* ▸ Superficies y texto */
    --body-bg: #F3F4F8;
    --sidebar-bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F6F7FA;
    --surface-3: #EEF0F5;
    --border: #E3E5ED;
    --border-lite: #ECEEF3;
    --text: #0D1120;
    --text-2: #454B5F;
    --text-muted: #5F6579;
    --icon: #5B6176;
    --text-header: var(--text-2);

    /* ▸ Semánticos (solo estados) */
    --success: #15803D; --success-bg: #E7F5EC; --success-rgb: 21, 128, 61;
    --warning: #B45309; --warning-bg: #FDF1E1; --warning-rgb: 180, 83, 9;
    --danger:  #C81E1E; --danger-bg:  #FCEBEB; --danger-rgb: 200, 30, 30;
    --info:    #0369A1; --info-bg:    #E5F1FA; --info-rgb: 3, 105, 161;
    --danger-solid: #DC2626;
    --whatsapp: #1FA855;

    /* ▸ Tipografía */
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;

    /* ▸ Layout */
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 60px;
    --shell-gap: 12px;

    /* ▸ Radios */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 18px;
    --r-full: 999px;

    /* ▸ Sombras (mínimas: la profundidad la dan bordes y superficies) */
    --shadow-xs: 0 1px 2px rgba(16,20,40,.04);
    --shadow-sm: 0 1px 2px rgba(16,20,40,.04), 0 6px 20px rgba(16,20,40,.05);
    --shadow-md: 0 10px 30px rgba(16,20,40,.08);
    --shadow-lg: 0 20px 60px rgba(16,20,40,.16);
    --overlay: rgba(10,12,20,.45);

    --ease: 160ms cubic-bezier(.4,0,.2,1);

    /* ▸ Alias de compatibilidad (páginas y proyectos existentes) */
    --brand-dark: var(--p-text);
    --brand-light: var(--p-soft);
    --brand-glow: var(--p-ring);
    --brand-glow-hover: var(--p-ring);
    --brand-light-1: var(--p-soft);
    --brand-light-2: var(--p-soft);
    /* --accent es un token propio (sección 1): no se redefine aquí. */
    --accent-dark: var(--p-text);
    --accent-soft: var(--p-soft);
    --accent-glow: var(--p-ring);
    --primary: var(--p);
    --primarydark: var(--p-hover);
    --fondo: var(--body-bg);
    --secondary: #1A1D2E;
    --third: #3b3b3f;

    /* ▸ Puente Bootstrap 5 */
    --bs-body-font-family: var(--font);
    --bs-body-bg: var(--body-bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-link-color: var(--p-text);
    --bs-link-hover-color: var(--p-hover);
    --bs-emphasis-color: var(--text);
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    color-scheme: light;
}

/* ══════════════════════════ 1b. NORMALIZACIÓN DEL COLOR DE ACCIÓN ══════════════════════════
   Garantiza que el color de acción de CUALQUIER cliente:
   - tenga luminosidad media (0.40–0.56 en OKLCH): texto blanco legible encima;
   - tenga saturación mínima (croma ≥ 0.16): se ve vivo y se distingue de los grises de la UI,
     así "activo", "seleccionado" y "botón principal" nunca parecen deshabilitados.
   Conserva el TONO del cliente (azul sigue azul, verde sigue verde).
   Colores ya vivos (p. ej. #4233CE) prácticamente no cambian.
   Si el color es gris/negro puro (sin tono), define --accent con otro color. */
@supports (color: oklch(from red l c h)) {
    :root {
        --p: oklch(from var(--accent) clamp(0.40, l, 0.56) max(c, 0.16) h);
    }
}

/* ══════════════════════════ 1c. MARCA CLARA — html[data-brand-tone="light"] ══════════════════════════
   Para marcas cuyo color es claro (amarillo, lima, celeste…). Se activa con
   "Sistema": { "TonoMarca": "claro" } en appsettings.json (lo aplica AppRoot.razor).
   - Claro: la marca se mantiene clara y viva; el texto encima es negro (--on-p).
     Los textos "de marca" sobre blanco (--p-text) pasan a casi negro para ser legibles;
     el color se ve en botones, barra activa, foco, tintes y bordes.
   - Oscuro: a diferencia del resto de clientes, usa la marca: "marca sobre negro".
   - Advertencia pasa a naranja para no confundirse con una marca amarilla. */
html[data-brand-tone="light"]:not([data-theme="dark"]) {
    --on-p: #111111;
    --p-hover: color-mix(in oklab, var(--p) 90%, #000);
    --p-soft: color-mix(in oklab, var(--p) 16%, #fff);
    --p-soft-2: color-mix(in oklab, var(--p) 30%, #fff);
    --p-text: color-mix(in oklab, var(--p) 22%, #141414);
    --p-line: color-mix(in oklab, var(--p) 75%, #E3E5ED);
    --p-ring: color-mix(in srgb, var(--p) 50%, transparent);
    --warning: #C2410C; --warning-bg: #FFEDD5; --warning-rgb: 194, 65, 12;
}
html[data-brand-tone="light"][data-theme="dark"] {
    --on-p: #0A0A0A;
    --p-hover: color-mix(in oklab, var(--p) 85%, #fff);
    --p-soft: color-mix(in srgb, var(--p) 9%, transparent);
    --p-soft-2: color-mix(in srgb, var(--p) 16%, transparent);
    --p-text: var(--p);
    --p-line: color-mix(in oklab, var(--p) 45%, #2A2A2A);
    --p-ring: color-mix(in srgb, var(--p) 32%, transparent);
    --warning: #FB923C; --warning-bg: rgba(251,146,60,.13); --warning-rgb: 251, 146, 60;
}
/* Sin soporte OKLCH relativo, --p queda igual a --accent (el HEX del cliente). */
@supports (color: oklch(from red l c h)) {
    html[data-brand-tone="light"]:not([data-theme="dark"]),
    html[data-brand-tone="light"][data-theme="dark"] {
        --p: oklch(from var(--accent) clamp(0.78, l, 0.90) max(c, 0.15) h);
    }
}

/* ══════════════════════════ 2. TOKENS — TEMA OSCURO (neutro, sin marca) ══════════════════════════ */
[data-theme="dark"] {
    --p: #EDEDED;
    --on-p: #0A0A0A;
    --p-hover: #FFFFFF;
    --p-soft: rgba(255,255,255,.08);
    --p-soft-2: rgba(255,255,255,.12);
    --p-text: #FFFFFF;
    --p-line: #4A4A4A;
    --p-ring: rgba(255,255,255,.16);

    --body-bg: #0A0A0A;
    --sidebar-bg: #141414;
    --surface: #161616;
    --surface-2: #1F1F1F;
    --surface-3: #262626;
    --border: #2A2A2A;
    --border-lite: #222222;
    --text: #EDEDED;
    --text-2: #B8B8B8;
    --text-muted: #8F8F8F;
    --icon: #A3A3A3;

    --success: #4ADE80; --success-bg: rgba(74,222,128,.12);
    --warning: #FBBF24; --warning-bg: rgba(251,191,36,.12);
    --danger:  #F87171; --danger-bg:  rgba(248,113,113,.13);
    --info:    #60A5FA; --info-bg:    rgba(96,165,250,.12);

    --shadow-xs: none;
    --shadow-sm: 0 8px 24px rgba(0,0,0,.35);
    --shadow-md: 0 14px 40px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 70px rgba(0,0,0,.6);
    --overlay: rgba(0,0,0,.62);

    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b8b8b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    color-scheme: dark;
}

/* ══════════════════════════ 3. BASE ══════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    background: var(--body-bg);
    color: var(--text);
}
body { margin: 0; transition: background var(--ease), color var(--ease); }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.faq-steps, .content-body ol:not([class]), .content-body ul:not([class]) { list-style: revert; }
h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -.01em; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 14px; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border-lite); opacity: 1; }
strong, b { font-weight: 700; }
.text-muted { color: var(--text-muted) !important; }
h1:focus { outline: none; }

/* Foco visible y consistente (pisa el anillo azul de site.css/Bootstrap). */
:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.btn:focus, .btn:focus-visible, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--p-ring);
    outline: none;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* Compatibilidad: textos con font-family 'Sora' en línea (Error, PerfilUsuario,
   CambiarClave, 404) usan ahora la tipografía del sistema. */
[style*="Sora"] { font-family: var(--font) !important; }

/* ══════════════════════════ 4. SHELL — SIDEBAR FLOTANTE ══════════════════════════ */
#wrapper { position: relative; min-height: 100vh; }

#sidebar {
    position: fixed;
    top: var(--shell-gap); left: var(--shell-gap); bottom: var(--shell-gap);
    width: var(--sidebar-w);
    display: flex; flex-direction: column;
    background: var(--sidebar-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    z-index: 300;
    overflow: hidden;
    transition: width var(--ease);
    /* Sin backdrop-filter: rompería el position:fixed de sus descendientes. */
}
#sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* Logo: logo.png expandido · icono.png colapsado */
.logo {
    display: flex; align-items: center; gap: 10px;
    padding: 22px 20px 18px;
    flex-shrink: 0; overflow: hidden;
}
.logo-text { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.logo-text { align-items: center; }
/* Logo centrado, sin límite de alto: se muestra a su tamaño natural
   y solo se reduce si es más ancho que el sidebar. */
.logo-text img { display: block; width: auto; max-width: 100%; height: auto; }
.logo-text small { display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.logo-mark { display: none; width: 46px; height: 46px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 12px; }
.logo-mark img { display: block; width: 36px; height: 36px; object-fit: contain; }
#sidebar.collapsed .logo { justify-content: center; padding: 18px 0 14px; }
#sidebar.collapsed .logo-mark { display: flex; }
#sidebar.collapsed .logo-text { display: none; }

/* Logo transparente sobre fondo oscuro: sello blanco suave ajustado al logo. */
[data-theme="dark"] .logo-text img { background: rgba(255,255,255,.92); padding: 8px 12px; border-radius: 12px; }
[data-theme="dark"] .logo-mark { background: rgba(255,255,255,.92); }

/* Navegación */
/* #sidebar .nav: Bootstrap también define .nav (flex); aquí se fuerza bloque. */
#sidebar .nav { display: block; }
#brandMenu { width: 100%; }
.nav {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 4px 12px 12px;
}
#brandMenu, #brandMenu ul { list-style: none; margin: 0; padding: 0; }
#brandMenu > li { position: relative; margin: 1px 0; }

#brandMenu > li.nav-section {
    margin: 18px 0 6px; padding: 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; pointer-events: none;
}
#brandMenu > li:first-child + li.nav-section { margin-top: 14px; }

#brandMenu > li > a {
    display: flex; align-items: center; gap: 12px;
    min-height: 40px; padding: 0 10px;
    border-radius: var(--r-md);
    font-size: 14px; font-weight: 600; color: var(--text-2);
    white-space: nowrap; overflow: hidden; cursor: pointer; user-select: none;
    transition: background var(--ease), color var(--ease);
}
#brandMenu > li > a > i.nav-ico,
#brandMenu > li > a > i:first-child {
    width: 20px; min-width: 20px; text-align: center;
    font-size: 16px; color: var(--icon);
    transition: color var(--ease);
}
#brandMenu > li > a > span.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#brandMenu > li > a.has-arrow::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900; font-size: 11px; color: var(--text-muted);
    margin-left: auto; flex-shrink: 0;
    transition: transform var(--ease);
}
#brandMenu > li > a[aria-expanded="true"].has-arrow::after { transform: rotate(180deg); }
#brandMenu > li > a:hover { background: var(--surface-2); color: var(--text); }
#brandMenu > li > a:hover > i:first-child { color: var(--text); }

/* Activo: enlace directo (Inicio) con fondo suave; módulo que contiene la
   página activa solo en texto fuerte. */
#brandMenu > li > a.mm-active { background: var(--p-soft); color: var(--p-text); }
#brandMenu > li > a.mm-active > i:first-child { color: var(--p-text); }
#brandMenu > li.mm-active > a.has-arrow { color: var(--text); }
#brandMenu > li.mm-active > a.has-arrow > i:first-child { color: var(--p-text); }

/* Submenú (acordeón) */
#brandMenu > li > ul {
    margin: 2px 0 6px 19px; padding-left: 12px;
    border-left: 1px solid var(--border);
    max-height: 0; overflow: hidden;
    transition: max-height .26s ease;
}
#brandMenu > li > ul:not(.mm-show) { margin-top: 0; margin-bottom: 0; }
#brandMenu > li > ul.mm-show { max-height: 10000px; overflow: visible; }
#brandMenu > li > ul > li { margin: 1px 0; }
#brandMenu > li > ul > li.nav-section {
    padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); pointer-events: none;
}
/* Una sola etiqueta (solo PRINCIPAL o solo CATÁLOGOS) no aporta: se oculta. */
#brandMenu > li > ul:not(:has(> li.nav-section ~ li.nav-section)) > li.nav-section { display: none; }
#brandMenu > li > ul > li > a {
    display: flex; align-items: center;
    min-height: 34px; padding: 6px 10px;
    border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
    transition: background var(--ease), color var(--ease);
}
#brandMenu > li > ul > li > a:hover { background: var(--surface-2); color: var(--text); }
#brandMenu > li > ul > li.mm-active > a,
#brandMenu > li > ul > li > a.mm-active { background: var(--p-soft); color: var(--p-text); font-weight: 600; }

/* ── Módulo abierto: bloque gris suave que agrupa sus páginas ──
   Un solo acento de marca: la página activa (pastilla blanca + barra
   lateral) y el ícono del módulo. Lo demás es neutro. */
#brandMenu > li:has(> ul.mm-show) {
    margin: 4px 0;
    padding-bottom: 6px;
    border-radius: 12px;
    background: var(--surface-2);
}
#brandMenu > li:has(> ul.mm-show) > a.has-arrow,
#brandMenu > li:has(> ul.mm-show) > a.has-arrow:hover { background: transparent; color: var(--text); font-weight: 700; }
#brandMenu > li:has(> ul.mm-show) > a.has-arrow > i:first-child { color: var(--p-text); }
#brandMenu > li:has(> ul.mm-show) > a.has-arrow::after { color: var(--text-muted); }
#brandMenu > li:has(> ul.mm-show) > ul { margin: 0 8px 0 19px; border-left-color: var(--border); }
#brandMenu > li:has(> ul.mm-show) > ul > li > a { color: var(--text-2); }
#brandMenu > li:has(> ul.mm-show) > ul > li > a:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text); }
#brandMenu > li:has(> ul.mm-show) > ul > li.mm-active > a,
#brandMenu > li:has(> ul.mm-show) > ul > li > a.mm-active {
    position: relative;
    background: var(--surface); color: var(--p-text); font-weight: 700;
    box-shadow: 0 1px 2px rgba(16,20,40,.06), 0 2px 8px color-mix(in srgb, var(--p) 10%, transparent);
}
#brandMenu > li:has(> ul.mm-show) > ul > li.mm-active > a::before,
#brandMenu > li:has(> ul.mm-show) > ul > li > a.mm-active::before {
    content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px; background: var(--p);
}
[data-theme="dark"] #brandMenu > li:has(> ul.mm-show) > ul > li.mm-active > a,
[data-theme="dark"] #brandMenu > li:has(> ul.mm-show) > ul > li > a.mm-active { background: var(--surface-3); box-shadow: none; }

/* Pie del sidebar: soporte + tema */
.sidebar-footer {
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--border);
}
.support-card {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text);
    transition: border-color var(--ease), background var(--ease);
}
.support-card:hover { border-color: var(--p-line); color: var(--text); }
/* Ícono de soporte: mascota encima; si la imagen no existe se elimina
   (onerror) y queda el ícono de WhatsApp en su color. */
.sc-ic {
    position: relative; flex-shrink: 0; overflow: hidden;
    width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--whatsapp); color: #fff; font-size: 20px;
}
.sc-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-support .sc-ic { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
.support-card .sc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.support-card .sc-title { font-size: 13px; font-weight: 700; white-space: nowrap; }
.support-card .sc-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.theme-seg {
    display: flex; gap: 2px; padding: 3px;
    border-radius: var(--r-md);
    background: var(--surface-2); border: 1px solid var(--border);
}
.theme-seg button {
    flex: 1; height: 32px; padding: 0 8px; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 0; border-radius: var(--r-sm); background: transparent;
    font-size: 13px; font-weight: 600; color: var(--text-2);
    transition: background var(--ease), color var(--ease);
}
.theme-seg button i { font-size: 13px; }
.theme-seg button:hover { color: var(--text); }
/* Opción activa según el modo guardado (light | dark | auto). */
[data-theme-mode="light"] .theme-seg [data-theme-set="light"],
[data-theme-mode="dark"] .theme-seg [data-theme-set="dark"],
[data-theme-mode="auto"] .theme-seg [data-theme-set="auto"] {
    background: var(--surface); color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
[data-theme="dark"][data-theme-mode] .theme-seg [aria-pressed="true"] { background: var(--surface-3); box-shadow: none; }

/* Botón genérico del pie (compatibilidad con proyectos que aún lo usen) */
.footer-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: var(--r-md); background: none;
    font-size: 13px; font-weight: 600; color: var(--text-2); text-align: left; white-space: nowrap;
}
.footer-btn:hover { background: var(--surface-2); color: var(--text); }
.footer-btn > i { width: 20px; text-align: center; }

/* ── Sidebar colapsado (desktop) ── */
#sidebar.collapsed .nav { padding: 4px 10px 12px; }
#sidebar.collapsed #brandMenu > li > a { justify-content: center; padding: 0; }
#sidebar.collapsed #brandMenu > li > a > span.nav-text,
#sidebar.collapsed #brandMenu > li > a.has-arrow::after { display: none; }
#sidebar.collapsed #brandMenu > li.mm-active > a.has-arrow { background: var(--p-soft); }
#sidebar.collapsed #brandMenu > li:has(> ul.mm-show) { margin: 1px 0; padding-bottom: 0; background: transparent; }
@media (min-width: 1025px) {
    html[data-menu-layout="horizontal"] #brandMenu > li:has(> ul.mm-show) { margin: 0; padding-bottom: 0; border-radius: var(--r-md); }
}
#sidebar.collapsed #brandMenu > li.nav-section {
    height: 1px; margin: 10px 8px; padding: 0;
    font-size: 0; line-height: 0; overflow: hidden; background: var(--border);
}
#sidebar.collapsed .sidebar-footer { padding: 10px; align-items: center; }
#sidebar.collapsed .support-card { padding: 4px; background: transparent; border-color: transparent; }
#sidebar.collapsed .support-card .sc-txt { display: none; }
#sidebar.collapsed .theme-seg { flex-direction: column; width: 44px; }
#sidebar.collapsed .theme-seg button { padding: 0; }
#sidebar.collapsed .fb-label { display: none; }
@media (min-width: 1025px) {
    html:not([data-menu-layout="horizontal"]) #sidebar.collapsed #brandMenu > li > ul { display: none !important; }
}

/* Flyout del sidebar colapsado: portal bajo <body> (shell.js). */
#brandCollapsedFlyout {
    position: fixed; z-index: 2147482000;
    min-width: 224px; max-width: min(320px, calc(100vw - 100px));
    max-height: min(72vh, 680px);
    overflow-y: auto; overflow-x: hidden;
    padding: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-5px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}
#brandCollapsedFlyout.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
#brandCollapsedFlyout::before { content: ""; position: absolute; left: -12px; top: 0; width: 14px; height: 100%; }
#brandCollapsedFlyout ul { list-style: none; margin: 0; padding: 0; }
#brandCollapsedFlyout li { margin: 1px 0; }
#brandCollapsedFlyout li.nav-section {
    padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); pointer-events: none;
}
#brandCollapsedFlyout li > a {
    display: flex; align-items: center; min-height: 36px; padding: 6px 10px;
    border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
#brandCollapsedFlyout li > a:hover { background: var(--surface-2); color: var(--text); }
#brandCollapsedFlyout li.mm-active > a { background: var(--p-soft); color: var(--p-text); font-weight: 600; }

/* ══════════════════════════ 5. SHELL — TOPBAR FLOTANTE ══════════════════════════ */
#main {
    margin-left: calc(var(--sidebar-w) + var(--shell-gap) * 2);
    min-height: 100vh; min-width: 0;
    display: flex; flex-direction: column;
    transition: margin-left var(--ease);
}
#wrapper.sb-collapsed #main { margin-left: calc(var(--sidebar-w-collapsed) + var(--shell-gap) * 2); }

/* Los paneles fixed (user-dd, notif-dd) viven fuera de #topbar: por eso
   #topbar puede llevar backdrop-filter sin romper su posición. */
#topbar {
    position: sticky; top: var(--shell-gap); z-index: 250;
    height: var(--topbar-h);
    margin: var(--shell-gap) var(--shell-gap) 0 0;
    display: flex; align-items: center; gap: 12px;
    padding: 0 10px 0 12px;
    background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.tb-toggle, .tb-btn {
    position: relative;
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text-2); font-size: 15px;
    transition: background var(--ease), color var(--ease);
}
.tb-toggle:hover, .tb-btn:hover, .tb-btn.open { background: var(--surface-2); color: var(--text); }

.tb-crumb {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    font-size: 13.5px; color: var(--text-muted); white-space: nowrap;
}
.tb-crumb span { overflow: hidden; text-overflow: ellipsis; }
.tb-crumb b { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tb-crumb i { font-size: 10px; flex-shrink: 0; }

.tb-search {
    flex: 1 1 260px; max-width: 460px; margin: 0 auto;
    display: flex; align-items: center; gap: 10px;
    height: 40px; padding: 0 8px 0 14px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--text-muted);
    font-size: 13.5px; cursor: pointer;
    transition: border-color var(--ease);
}
.tb-search:hover { border-color: var(--p-line); }
.tb-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-search kbd, .cmdk-input-row kbd {
    font: 600 11px/1 var(--font-mono);
    padding: 5px 6px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}

.tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.notif-dot {
    position: absolute; top: 8px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger-solid); border: 2px solid var(--surface);
}

.user-wrap { position: relative; }
.user-btn {
    display: flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 10px 0 5px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text);
    transition: background var(--ease);
}
.user-btn:hover, .user-btn.open { background: var(--surface-2); }
.user-avatar { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; display: block; flex-shrink: 0; background: var(--surface-2); }
.user-info { text-align: left; line-height: 1.25; min-width: 0; }
.user-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.user-role { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.user-chevron { font-size: 11px; color: var(--text-muted); transition: transform var(--ease); }
.user-btn.open .user-chevron { transform: rotate(180deg); }

/* Dropdowns (usuario / notificaciones): fixed + clamp en shell.js */
.user-dropdown {
    display: none; position: fixed; z-index: 9999;
    min-width: 240px; max-width: min(300px, calc(100vw - 24px));
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.user-dropdown.open { display: block; }
.dd-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-lite); }
.dd-avatar { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.dd-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.dd-role { font-size: 12px; color: var(--text-muted); }
.dd-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 16px; border: 0; background: none; text-align: left;
    font-size: 13.5px; font-weight: 500; color: var(--text-2);
}
.dd-item > i { width: 18px; text-align: center; font-size: 14px; color: var(--icon); }
.dd-item:hover { background: var(--surface-2); color: var(--text); }
.dd-item.danger, .dd-item.danger > i { color: var(--danger); }
.dd-item.danger:hover { background: var(--danger-bg); }
.dd-divider { height: 1px; background: var(--border-lite); margin: 4px 0; }

/* ══════════════════════════ 6. CONTENIDO, PIE Y OVERLAY ══════════════════════════ */
#content { flex: 1; min-width: 0; }
.content-body { padding: 24px var(--shell-gap) 24px 4px; min-width: 0; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.content-body > *:first-child { animation: fade-up 240ms ease both; }

.page-head { margin-bottom: 20px; }
.eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--p-text); margin-bottom: 4px;
}
[data-theme="dark"] .eyebrow { color: var(--text-muted); }
.page-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--text); }
.page-sub { margin-top: 4px; font-size: 14px; color: var(--text-2); }

#footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px var(--shell-gap) 14px 4px;
    font-size: 12.5px; color: var(--text-muted);
}
#footer .copyright { font-size: 12.5px; color: var(--text-muted); }
#footer a:hover { color: var(--text); }

#overlay {
    display: none; position: fixed; inset: 0; z-index: 299;
    background: var(--overlay); opacity: 0; pointer-events: none;
}
#overlay.active { display: block; opacity: 1; pointer-events: all; }

/* ══════════════════════════ 7. CTRL K — BUSCADOR DE NAVEGACIÓN ══════════════════════════ */
.cmdk-overlay {
    display: none; position: fixed; inset: 0; z-index: 10000;
    align-items: flex-start; justify-content: center; padding-top: 10vh;
    background: var(--overlay); backdrop-filter: blur(2px);
}
.cmdk-overlay.open { display: flex; }
.cmdk-box {
    width: 100%; max-width: 560px; margin: 0 16px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-lite); }
.cmdk-input-row i { color: var(--text-muted); }
.cmdk-input-row input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; }
.cmdk-list { max-height: min(52vh, 400px); overflow-y: auto; padding: 8px; }
.cmdk-group-lbl { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.cmdk-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: var(--r-md); font-size: 13.5px; color: var(--text-2);
}
.cmdk-item:hover { background: var(--surface-2); color: var(--text); }
.cmdk-item .ic3 {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--icon); font-size: 12.5px;
}
.cmdk-item:hover .ic3 { background: var(--p-soft); color: var(--p-text); }
.cmdk-item .mod-tag { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.cmdk-empty { padding: 30px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ══════════════════════════ 8. WHATSAPP FLOTANTE (retirado) ══════════════════════════
   El soporte vive en el pie del sidebar (escritorio) y en la hoja "Módulos"
   (móvil). Se oculta por compatibilidad si un proyecto aún tiene el marcado. */
.wa-float { display: none !important; }

/* ══════════════════════════ 9. BOTONES ══════════════════════════ */
.btn {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--r-md);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--p-ring);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px;
    border-radius: var(--r-md);
    font-family: var(--font); font-size: 14px; font-weight: 600;
    white-space: nowrap; text-decoration: none;
    transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.btn-icon { width: 40px; padding: 0; }
/* Deshabilitado: SIEMPRE gris neutro (no una versión clara del color de acción),
   así se distingue del botón activo con cualquier color de cliente. */
.btn:disabled:not([aria-busy="true"]), .btn[disabled]:not([aria-busy="true"]), .btn.disabled {
    background: var(--surface-3) !important; border-color: var(--border) !important;
    color: var(--text-muted) !important; box-shadow: none !important;
    opacity: 1; cursor: not-allowed; transform: none;
}
.btn:disabled:not([aria-busy="true"]) i, .btn.disabled i { color: inherit !important; }
/* Botón trabajando (spinner en el propio botón): se ve activo, no deshabilitado. */
.btn[aria-busy="true"]:disabled { opacity: .9; cursor: progress; }
.btn .spinner-border-sm { width: 15px; height: 15px; border-width: 2px; }

/* Acción principal: color de marca (en oscuro: blanco con texto negro).
   Incluye el patrón del Core "btn btn-success btn-premium" (Nuevo, Grabar…),
   salvo Exportar a Excel y WhatsApp. */
.btn-primary, .btn-brand,
.btn.btn-success:not(.gvCmdBtn):not(:has(.fa-file-excel)):not(:has(.fa-whatsapp)) {
    --bs-btn-color: var(--on-p);
    --bs-btn-bg: var(--p);
    --bs-btn-border-color: var(--p);
    --bs-btn-hover-color: var(--on-p);
    --bs-btn-hover-bg: var(--p-hover);
    --bs-btn-hover-border-color: var(--p-hover);
    --bs-btn-active-color: var(--on-p);
    --bs-btn-active-bg: var(--p-hover);
    --bs-btn-active-border-color: var(--p-hover);
    --bs-btn-disabled-color: var(--on-p);
    --bs-btn-disabled-bg: var(--p);
    --bs-btn-disabled-border-color: var(--p);
    background: var(--p); color: var(--on-p); border: 1px solid var(--p);
}
.btn.btn-primary:hover, .btn.btn-brand:hover,
.btn.btn-success:not(.gvCmdBtn):not(:has(.fa-file-excel)):not(:has(.fa-whatsapp)):hover {
    background: var(--p-hover); border-color: var(--p-hover); color: var(--on-p);
}

/* Secundarios neutros */
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-light, .btn-dark,
.btn.btn-success.btn-premium:has(.fa-file-excel) {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--border);
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.btn.btn-secondary:hover, .btn.btn-outline-secondary:hover, .btn.btn-light:hover, .btn.btn-dark:hover,
.btn.btn-success.btn-premium:has(.fa-file-excel):hover {
    background: var(--surface-2); color: var(--text); border-color: var(--border);
}
.btn.btn-outline-primary { color: var(--p-text); border-color: var(--p-line); }
.btn.btn-outline-primary:hover { background: var(--p-soft); color: var(--p-text); border-color: var(--p-line); }
.btn.btn-success.btn-premium:has(.fa-file-excel) > i { color: var(--p-text); }

/* Peligro / estados */
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--danger-solid); --bs-btn-border-color: var(--danger-solid);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B91C1C; --bs-btn-hover-border-color: #B91C1C;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #991B1B; --bs-btn-active-border-color: #991B1B;
    background: var(--danger-solid); color: #fff; border: 1px solid var(--danger-solid);
}
.btn.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.btn-warning {
    --bs-btn-color: #1A1100; --bs-btn-bg: #F59E0B; --bs-btn-border-color: #F59E0B;
    --bs-btn-hover-color: #1A1100; --bs-btn-hover-bg: #D97706; --bs-btn-hover-border-color: #D97706;
    --bs-btn-active-bg: #B45309; --bs-btn-active-border-color: #B45309;
    background: #F59E0B; color: #1A1100; border: 1px solid #F59E0B;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #0369A1; --bs-btn-border-color: #0369A1;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #075985; --bs-btn-hover-border-color: #075985;
    background: #0369A1; color: #fff; border: 1px solid #0369A1;
}
/* WhatsApp conserva su verde en ambos temas (acción de soporte). */
.btn.btn-success:has(.fa-whatsapp) {
    --bs-btn-color: #fff; --bs-btn-bg: var(--whatsapp); --bs-btn-border-color: var(--whatsapp);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #178A45; --bs-btn-hover-border-color: #178A45;
    --bs-btn-active-bg: #137539;
    background: var(--whatsapp); color: #fff; border: 1px solid var(--whatsapp);
}
.btn-premium { box-shadow: none; }

/* Botón "Nuevo" solo-ícono (title="Nuevo registro"): muestra su texto. */
.btn.btn-icon[title="Nuevo registro"] { width: auto; min-width: 44px; padding: 0 18px; gap: 8px; }
.btn.btn-icon[title="Nuevo registro"]::after { content: "Nuevo"; font-size: 14px; font-weight: 600; }

/* Barra de acciones CRUD */
.card-body > .clearfix, .page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.card-body > .clearfix::after { display: none; }
.card-body > .clearfix .btn, .page-actions .btn, .page-actions .page-action-btn { height: 44px; min-width: 44px; margin: 0; }
.page-actions .page-action-btn { padding: 0 18px; }

/* Pastillas legado (filtros ACTIVOS/INACTIVOS antiguos) */
.btn3 {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 16px; margin-right: 6px;
    border: 1px solid var(--border); border-radius: var(--r-full);
    background: var(--surface); color: var(--text-2);
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn3.btn-dark { background: var(--p); color: var(--on-p); border-color: var(--p); }
.btn3.btn-move { background: var(--success-bg); color: var(--success); border-color: transparent; }

/* Botones de acción por fila (gvCmdBtn): neutros en reposo, color al pasar. */
.gvCmdBtn, .btn2.gvCmdBtn {
    width: 34px; height: 34px; padding: 0; margin: 0 4px 0 0;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text-2);
    font-size: 14px; line-height: 1; cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.gvCmdBtn:last-child { margin-right: 0; }
.btn-modify.gvCmdBtn:hover, .btn-view.gvCmdBtn:hover, .btn-success.gvCmdBtn:hover, .btn-move.gvCmdBtn:hover {
    background: var(--p-soft); color: var(--p-text); border-color: var(--p-line);
}
.btn-delete.gvCmdBtn:hover { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ══════════════════════════ 10. FORMULARIOS ══════════════════════════ */
.form-control, .form-select {
    display: block; width: 100%;
    height: 42px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background-color: var(--surface); color: var(--text);
    font-family: var(--font); font-size: 14px;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-select { padding-right: 36px; }
textarea.form-control { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; }
/* Fecha / hora: Safari alinea el valor arriba y separa "dd / mm / aaaa".
   Se centra verticalmente y se alinea a la izquierda en todos los navegadores. */
input.form-control[type="date"], input.form-control[type="time"],
input.form-control[type="datetime-local"], input.form-control[type="month"] {
    display: flex; align-items: center; line-height: 1.2;
    -webkit-appearance: none; appearance: none;
}
input.form-control::-webkit-date-and-time-value { text-align: left; margin: 0; }
input.form-control::-webkit-datetime-edit { padding: 0; line-height: 1.2; }
input.form-control::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input.form-control::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
[data-theme="dark"] input.form-control::-webkit-calendar-picker-indicator { filter: invert(1); }
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border)); }
.form-control:focus, .form-select:focus, .ssel-control:focus-within {
    border-color: var(--p);
    background-color: var(--surface);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--p-ring);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--surface-2); color: var(--text-2); opacity: 1;
}
.form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.form-check-input { background-color: var(--surface); border-color: var(--border); }
.form-check-input:checked { background-color: var(--p); border-color: var(--p); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--p); }
.text-danger { color: var(--danger) !important; }
.validation-message { color: var(--danger); font-size: 12px; }
.invalid { outline: 1px solid var(--danger); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }

/* Buscador de listados (<input class="form-control" placeholder="Buscar...">):
   medidas y lupa uniformes (pisa estilos en línea de cada página). */
.card-body input.form-control[placeholder^="Buscar"] {
    max-width: 420px !important;
    height: 44px;
    margin: 16px 0 14px !important;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 14px center; background-size: 16px 16px;
}
[data-theme="dark"] .card-body input.form-control[placeholder^="Buscar"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238F8F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* Formulario Usuarios: DNI + botón de verificación */
.dni-field-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.btn-dni-check { min-width: 132px; height: 42px; }

/* ══════════════════════════ 11. TARJETAS, BADGES Y ALERTAS ══════════════════════════ */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-color: var(--text);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: 20px;
}
.card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px;
    background: transparent; color: var(--text);
    border-bottom: 1px solid var(--border-lite);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    font-weight: 700;
}
.card-body { padding: 20px; }
.card-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
.card-body > hr { margin: 16px 0; }
.clearfix + hr, .soft-hr { margin: 16px 0; border: 0; border-top: 1px solid var(--border-lite); height: 0; }

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: var(--r-full);
    font-size: 12px; font-weight: 700; line-height: 1.2;
    background: var(--surface-2); color: var(--text-2);
}
.badge-success, .badge.bg-success { background: var(--success-bg) !important; color: var(--success) !important; }
.badge-danger,  .badge.bg-danger  { background: var(--danger-bg) !important;  color: var(--danger) !important; }
.badge-warning, .badge.bg-warning { background: var(--warning-bg) !important; color: var(--warning) !important; }
.badge-info,    .badge.bg-info    { background: var(--info-bg) !important;    color: var(--info) !important; }

.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface-2); color: var(--text); font-size: 13.5px;
}
.alert-success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--text); }
.alert-danger  { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 30%, transparent);  color: var(--text); }
.alert-warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--text); }
.alert-info    { background: var(--info-bg);    border-color: color-mix(in srgb, var(--info) 30%, transparent);    color: var(--text); }
.alert > i:first-child { margin-top: 2px; }
.alert-success > i:first-child { color: var(--success); }
.alert-danger > i:first-child { color: var(--danger); }
.alert-warning > i:first-child { color: var(--warning); }
.alert-info > i:first-child { color: var(--info); }

/* Mensaje persistente dentro de un panel (los operativos van a toast). */
.core-inline-status {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 14px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); color: var(--text-2);
    font-size: 13px; line-height: 1.45;
}
.core-inline-status > i { margin-top: 2px; color: var(--icon); }
.core-inline-status.is-warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--text); }
.core-inline-status.is-warning > i { color: var(--warning); }

/* ══════════════════════════ 12. TABLAS ══════════════════════════ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border-lite);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--text);
    --bs-table-active-bg: transparent;
    --bs-table-active-color: var(--text);
    --bs-table-striped-bg: transparent;
    width: 100%; min-width: 640px;
    border-collapse: separate; border-spacing: 0;
    margin-bottom: 0;
    font-size: 13.5px; color: var(--text);
    /* La tabla es un bloque propio: borde, esquinas y sombra suave. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,20,40,.05), 0 6px 18px rgba(16,20,40,.06);
    overflow: hidden;
}
/* Bootstrap pinta bordes en thead/tbody (incluida una línea oscura bajo el
   encabezado): se anulan, aquí los bordes van por celda. */
.table > :not(caption) > * { border-width: 0; border-color: transparent; }
[data-theme="dark"] .table { box-shadow: none; border-color: var(--border); }

/* Cualquier tabla dentro de .card-body hace scroll horizontal por sí sola. */
.card-body:has(table.table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Encabezado: franja tintada con el color de marca y texto con peso. */
.table thead th {
    padding: 13px 14px;
    background: color-mix(in oklab, var(--p) 10%, var(--surface-2));
    color: color-mix(in oklab, var(--p) 45%, var(--text-2));
    font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    text-align: left; white-space: nowrap; user-select: none;
    border: 0; border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .table thead th { background: var(--surface-2); color: var(--text-2); }

/* Cuerpo: separadores finos; el hover (tinte + indicador lateral) da la guía visual. */
.table tbody td {
    padding: 12px 14px; vertical-align: middle;
    color: var(--text); background: var(--surface);
    border: 0; border-bottom: 1px solid var(--border-lite);
    transition: background var(--ease);
}
.table tbody tr:last-child > td { border-bottom: 0; }
.table tbody tr:hover > td { background: var(--p-soft); }
.table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--p); }
.table tbody tr.table-active > td { background: var(--p-soft-2) !important; }
.table tbody tr.table-active > td:first-child { box-shadow: inset 3px 0 0 var(--p); }
.table tbody td strong { font-weight: 700; color: var(--text); }

/* Columna de acciones: siempre en una sola línea. */
.table td:has(> .gvCmdBtn) { white-space: nowrap; width: 1%; }
.table td .gvCmdBtn { width: 36px; height: 36px; margin-right: 6px; font-size: 15px; border-radius: 10px; }
.table td .gvCmdBtn:last-child { margin-right: 0; }

/* Acciones visibles solo en la fila con el mouse, la seleccionada o con foco
   de teclado. En pantallas táctiles (sin hover) siempre visibles. */
@media (hover: hover) and (pointer: fine) {
    .table tbody td .gvCmdBtn { opacity: 1; transition: opacity 120ms ease, background var(--ease), color var(--ease), border-color var(--ease); }
    .table tbody tr:hover td .gvCmdBtn,
    .table tbody tr:focus-within td .gvCmdBtn,
    .table tbody tr.table-active td .gvCmdBtn { opacity: 1; }
}

/* Fila de filtros por columna (ColumnFilterSelect) */
.table thead tr.column-filter-row th {
    padding: 8px 10px; background: var(--surface);
    border-bottom: 1px solid var(--border);
    text-transform: none; letter-spacing: 0; font-weight: 600;
}
.column-filter { width: 100%; min-width: 92px; }
.column-filter-trigger {
    width: 100%; min-width: 0; height: 34px; padding: 0 10px;
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text-2);
    font: 600 12.5px var(--font); cursor: pointer;
}
.column-filter-trigger:hover { border-color: var(--p-line); color: var(--text); }
.column-filter-trigger.active { background: var(--p-soft); border-color: var(--p-line); color: var(--p-text); }
.column-filter-trigger > i { font-size: 9px; color: var(--text-muted); flex-shrink: 0; }
.column-filter-caption { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.column-filter-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p); color: var(--on-p); font-size: 10.5px; font-weight: 700;
}
.column-filter-panel { min-width: 260px; }
.column-filter-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-lite); flex: 0 0 auto; }
.column-filter-search i { color: var(--text-muted); font-size: 12px; }
.column-filter-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 13.5px var(--font); }
.column-filter-search input::placeholder { color: var(--text-muted); opacity: 1; }
.column-filter-options { min-height: 48px; max-height: 230px; overflow-y: auto; padding: 6px; }
.column-filter-option {
    display: flex; align-items: center; gap: 9px; padding: 8px 9px;
    border-radius: var(--r-sm); color: var(--text-2); font-size: 13px; cursor: pointer; user-select: none;
}
.column-filter-option:hover { background: var(--surface-2); color: var(--text); }
.column-filter-option.selected { background: var(--p-soft); color: var(--p-text); font-weight: 700; }
.column-filter-option input { width: 15px; height: 15px; accent-color: var(--p); flex-shrink: 0; }
.column-filter-footer { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border-lite); background: var(--surface-2); }
.column-filter-footer .btn { margin-left: auto; }
.column-filter-link { padding: 4px 2px; border: 0; background: transparent; color: var(--p-text); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.column-filter-link.danger { color: var(--danger); }
.column-filter-link:disabled { opacity: .45; cursor: not-allowed; }
.column-filter-clear-all {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    border: 0; background: transparent; color: var(--danger); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.column-filter-clear-all:disabled { display: none; }

/* ══════════════════════════ 13. FILTROS ACTIVOS / INACTIVOS ══════════════════════════ */
.filter-stats { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; max-width: 520px; }
.filter-stat-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; text-align: left;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); color: var(--text);
    cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease);
}
.filter-stat-card:hover { border-color: var(--p-line); }
.filter-stat-card.selected { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-ring); }
.fsc-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); font-size: 18px; }
.filter-stat-card.activos .fsc-icon { background: var(--success-bg); color: var(--success); }
.filter-stat-card.inactivos .fsc-icon { background: var(--surface-2); color: var(--text-muted); }
.fsc-text { display: flex; flex-direction: column; }
.fsc-text small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.fsc-text strong { font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }

/* ══════════════════════════ 14. MODALES (gxModal) ══════════════════════════ */
.gxModal {
    display: none; position: fixed; inset: 0; z-index: 200000;
    align-items: center; justify-content: center;
    padding: 16px; overflow-y: auto;
    background: var(--overlay); backdrop-filter: blur(2px);
}
.gxModal.gxModal--open { display: flex; }
.gxModal__dialog { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; }
.gxModal__content {
    position: relative; display: flex; flex-direction: column;
    width: 100%; min-height: 0; overflow: hidden;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}
.gxModal__header {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    min-height: 64px; padding: 18px 96px 16px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-lite);
}
.gxModal__title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--text); }
.gxModal__header .text-muted { color: var(--text-muted) !important; }
.gxModal__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 20px 22px; color: var(--text-2); font-size: 14px;
    background: var(--surface);
}
.gxModal__body .row.g-3 > [class*="col-"] { margin-bottom: 4px; }
.gxModal__footer {
    flex-shrink: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 22px;
    background: var(--surface-2); border-top: 1px solid var(--border-lite);
}
/* Pie anidado dentro del body (patrón de varias páginas del Core) */
.gxModal__body .gxModal__footer { margin: 20px -22px -20px; }
.gxModal__footer .btn { min-width: 120px; }

/* Cerrar + maximizar (este último lo inyecta modal-manager.js) */
.gxModal button[aria-label="Cerrar"],
.gxModal .popup-toolbar-btn {
    position: absolute; z-index: 2;
    width: 34px; height: 34px; padding: 0; margin: 0;
    display: inline-grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text-2); font-size: 14px;
    cursor: pointer; transition: background var(--ease), color var(--ease);
}
.gxModal button[aria-label="Cerrar"] { top: 15px; right: 16px; }
.gxModal__header .popup-maximize-btn { top: 15px; right: 56px; }
.gxModal button[aria-label="Cerrar"]:hover,
.gxModal .popup-toolbar-btn:hover { background: var(--surface-2); color: var(--text); }

/* Diálogo de confirmación (ConfirmDialogHost) */
.core-confirm-dialog .gxModal__header > div:first-child { font-size: 24px !important; line-height: 1; color: var(--p-text); }
.core-confirm-dialog .gxModal__header > div:first-child .fa-circle-exclamation { color: var(--danger); }
.core-confirm-dialog .gxModal__body { font-size: 14px; color: var(--text-2); }

/* Auditoría estándar: debajo del encabezado del modal */
.core-audit-strip {
    display: grid; gap: 7px;
    padding: 10px 22px;
    background: var(--surface-2); border-bottom: 1px solid var(--border-lite);
    color: var(--text-2); font-size: 12.5px;
}
.core-audit-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.core-audit-icon { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--icon); }
.core-audit-item strong { color: var(--text); }

/* ══════════════════════════ 15. PÁGINAS DE ESTADO Y BLOQUES ══════════════════════════ */
/* Encabezado de marca (CambiarClave, PerfilUsuario, Error) */
.hero-band { background: color-mix(in oklab, var(--brand) 86%, #0A0C13); color: #fff; }
.hero-band h1, .hero-band h2, .hero-band h3, .hero-band h4, .hero-band h5 { color: #fff; }
[data-theme="dark"] .hero-band { background: var(--surface-3); color: var(--text); }
[data-theme="dark"] .hero-band h1, [data-theme="dark"] .hero-band h2, [data-theme="dark"] .hero-band h3,
[data-theme="dark"] .hero-band h4, [data-theme="dark"] .hero-band h5 { color: var(--text); }
.card-header.hero-band { border-bottom: 0; }

/* Acceso restringido */
.access-denied-shell {
    max-width: 760px; margin: 48px auto; padding: 28px;
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.access-denied-icon { width: 58px; height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--warning-bg); color: var(--warning); font-size: 24px; }
.access-denied-copy h1 { margin: 0 0 8px; font-size: 24px; font-weight: 800; color: var(--text); }
.access-denied-copy p { margin: 0; color: var(--text-2); }
.access-denied-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Estado vacío genérico */
.empty-state { padding: 44px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-muted); }
.empty-state i { width: 56px; height: 56px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; border-radius: 16px; font-size: 22px; background: var(--p-soft); color: var(--p-text); }
.empty-state strong { font-size: 15px; color: var(--text); }
.empty-state span { font-size: 13px; }

/* ══════════════════════════ 16. TABLERO (Principal.razor) ══════════════════════════ */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dash-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* KPIs: una sola franja con divisores. Flex (no grid) para que una fila
   incompleta se estire y no deje huecos con el color del divisor. */
.dash-kpis {
    display: flex; flex-wrap: wrap;
    gap: 1px; margin-bottom: 20px; overflow: hidden;
    background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.dash-kpi {
    flex: 1 1 165px;
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px; min-width: 0;
    background: var(--surface); color: var(--text);
    transition: background var(--ease);
}
a.dash-kpi:hover { background: var(--surface-2); color: var(--text); }
.dash-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-kpi-lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
/* Ícono del indicador: tinte de marca por defecto; tonos de estado abajo. */
.dash-kpi-ic {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); background: var(--p-soft); color: var(--p-text); font-size: 15px;
}
.dash-kpi-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-kpi-det { font-size: 12.5px; color: var(--text-muted); }
.dash-kpi.tone-success .dash-kpi-ic { background: var(--success-bg); color: var(--success); }
.dash-kpi.tone-warning .dash-kpi-ic { background: var(--warning-bg); color: var(--warning); }
.dash-kpi.tone-danger  .dash-kpi-ic { background: var(--danger-bg);  color: var(--danger); }
.dash-kpi.tone-info    .dash-kpi-ic { background: var(--info-bg);    color: var(--info); }
.dash-kpi.tone-success .dash-kpi-det { color: var(--success); }
.dash-kpi.tone-warning .dash-kpi-det { color: var(--warning); }
.dash-kpi.tone-danger  .dash-kpi-det { color: var(--danger); font-weight: 600; }

.dash-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.dash-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dash-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.dash-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-width: 0; }
.dash-panel-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; }
.dash-panel-head p { margin: 0; font-size: 13px; color: var(--text-muted); }
.dash-panel-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.dash-panel-count {
    min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--danger-bg); color: var(--danger); font-size: 11.5px; font-weight: 700;
}
.dash-item { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-top: 1px solid var(--border-lite); color: var(--text); }
a.dash-item:hover { background: var(--surface-2); color: var(--text); }
.dash-item-ic {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px; background: var(--surface-2); color: var(--icon); font-size: 15px;
}
.dash-item.tone-danger  .dash-item-ic { background: var(--danger-bg);  color: var(--danger); }
.dash-item.tone-warning .dash-item-ic { background: var(--warning-bg); color: var(--warning); }
.dash-item.tone-info    .dash-item-ic { background: var(--info-bg);    color: var(--info); }
.dash-item.tone-success .dash-item-ic { background: var(--success-bg); color: var(--success); }
.dash-item-txt { flex: 1; min-width: 0; }
.dash-item-title { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-item-sub { font-size: 12.5px; color: var(--text-muted); }
.dash-item-link { padding: 6px 10px; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; color: var(--p-text); white-space: nowrap; }
.dash-item-link:hover { background: var(--p-soft); color: var(--p-text); }
.dash-item-chev { font-size: 12px; color: var(--text-muted); }
.dash-item.is-quiet { padding-top: 11px; padding-bottom: 11px; }
.dash-item.is-quiet .dash-item-ic { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.dash-item.is-quiet .dash-item-title { font-weight: 600; }
.dash-help { margin-top: 0; }

/* Accesos directos */
.qa-shell { padding: 18px 20px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.qa-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.qa-head .ic-badge { display: none; }
.qa-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.qa-head p { margin: 0; font-size: 13px; color: var(--text-muted); }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.qa-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 16px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    transition: border-color var(--ease), background var(--ease);
    opacity: 0; animation: qaIn .4s ease forwards;
}
.qa-card:nth-child(2) { animation-delay: .04s; } .qa-card:nth-child(3) { animation-delay: .08s; }
.qa-card:nth-child(4) { animation-delay: .12s; } .qa-card:nth-child(5) { animation-delay: .16s; }
.qa-card:nth-child(n+6) { animation-delay: .2s; }
@keyframes qaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qa-card:hover { border-color: var(--p-line); background: var(--p-soft); color: var(--text); }
.qa-ic-wrap {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px; background: var(--p-soft); color: var(--p-text); font-size: 17px;
}
.qa-card:hover .qa-ic-wrap { background: var(--surface); }
.qa-label { font-size: 14px; font-weight: 700; line-height: 1.3; }

/* Módulos destacados (lk-module-*, usado por proyectos con tarjetas de módulo) */
.lk-home-card { background: transparent !important; border: 0 !important; box-shadow: none !important; margin-bottom: 0; }
.lk-home-card > .card-body { padding: 0; }
.lk-module-link { display: flex; flex-direction: column; height: 100%; width: 100%; }
.lk-module-card {
    flex: 1; display: flex; flex-direction: column; gap: 6px;
    min-height: 140px; padding: 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    transition: border-color var(--ease), background var(--ease);
}
.lk-module-link:hover .lk-module-card { border-color: var(--p-line); }
.lk-module-ico { width: 40px; height: 40px; margin-bottom: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--p-soft); color: var(--p-text); }
.lk-module-ico i { font-size: 17px; }
.lk-module-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.lk-module-sub { flex: 1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.lk-module-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 13px; font-weight: 700; color: var(--p-text); }

/* Preguntas frecuentes (FAQ) */
.faq-shell { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.faq-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.faq-ic { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-2); color: var(--icon); }
.faq-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.faq-subtitle { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.faq-acc { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 992px) { .faq-acc { grid-template-columns: 1fr 1fr; } }
.faq-acc details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color var(--ease); }
.faq-acc details:hover, .faq-acc details[open] { border-color: var(--p-line); }
.faq-acc summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--text);
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-chip {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 5px 10px; border-radius: var(--r-full);
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap;
}
.faq-acc details[open] .faq-chip { background: var(--p-soft); border-color: var(--p-line); color: var(--p-text); }
.faq-body { padding: 14px 16px 16px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); border-top: 1px solid var(--border-lite); }
.faq-body a:not(.btn) { color: var(--p-text); text-decoration: underline; text-underline-offset: 2px; }
.faq-steps { margin: 8px 0 0 18px; padding: 0; }
.faq-steps li { margin-bottom: 4px; }
.faq-note { margin-top: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-lite); font-size: 13px; color: var(--text-2); }

/* ══════════════════════════ 17. GESTIÓN DE PERMISOS ══════════════════════════ */
.perm-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; }
.perm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.perm-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-lite); font-size: 14px; font-weight: 700; color: var(--text); }
.perm-card-head .ic { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-2); color: var(--icon); font-size: 13px; }
.perm-card-body { padding: 12px; max-height: 420px; overflow-y: auto; }

.perm-mod-item, .perm-menu-row {
    width: 100%; border: 0; background: transparent; text-align: left;
    font-family: inherit; color: var(--text-2); cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.perm-mod-item { display: block; padding: 10px 12px; margin-bottom: 4px; border-radius: var(--r-md); font-size: 13.5px; }
.perm-mod-item:hover { background: var(--surface-2); color: var(--text); }
.perm-mod-item.sel { background: var(--p-soft); color: var(--p-text); font-weight: 700; }

.perm-menu-row {
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 11px 12px; margin-bottom: 4px;
    border: 1px solid transparent; border-radius: var(--r-md); font-size: 13.5px;
}
.perm-menu-row:hover { background: var(--surface-2); color: var(--text); }
.perm-menu-row .name { font-weight: 600; }
.perm-menu-row .link { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.perm-menu-row.granted::after { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--success); }
.perm-menu-row.selected { background: var(--p-soft); border-color: var(--p-line); color: var(--p-text); font-weight: 700; }
.perm-menu-row.selected .name::before {
    content: '\f00c'; margin-right: 8px;
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; color: var(--p-text);
}

.perm-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.perm-chip {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: var(--r-full);
    background: var(--surface-2); border: 1px solid var(--border);
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2);
    cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.perm-chip:hover:not(:disabled) { border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border)); }
.perm-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.perm-chip.on { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); }
.perm-chip.on .dot { background: var(--success); }
.perm-chip:disabled { opacity: .55; cursor: not-allowed; }
.perm-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.perm-note strong { color: var(--text-2); }
.perm-readonly {
    display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius: var(--r-md);
    background: var(--warning-bg); color: var(--text-2); font-size: 12.5px; line-height: 1.4;
}

/* ══════════════════════════ 18. CATÁLOGO DE ÍCONOS (GestionMenu) ══════════════════════════ */
.icon-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 0 14px; height: 42px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-muted); font-size: 13.5px; }
.icon-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13.5px; }
.icon-cat-lbl { margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.icon-cat-lbl:first-child { margin-top: 0; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.icon-cell {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 4px; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); font-family: inherit; cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
}
.icon-cell:hover { border-color: var(--p-line); }
.icon-cell i { font-size: 19px; color: var(--text-2); }
.icon-cell span { font-size: 10px; line-height: 1.2; text-align: center; color: var(--text-muted); }
.icon-cell.picked { border-color: var(--p); background: var(--p-soft); }
.icon-cell.picked i { color: var(--p-text); }

/* ══════════════════════════ 19. SELECT CON BUSCADOR (SearchableSelect) ══════════════════════════ */
.ssel { position: relative; }
.ssel-trigger { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; background: var(--surface); color: var(--text); }
.ssel-trigger .ssel-ico { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--surface-2); color: var(--icon); font-size: 13px; }
.ssel-trigger .ssel-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
/* No usar .placeholder: Bootstrap la convierte en barra gris de carga. */
.ssel-trigger .ssel-trigger-text.ssel-placeholder { color: var(--text-muted); opacity: 1; background: transparent; }
.ssel-trigger > i.fa-chevron-down { flex-shrink: 0; font-size: 11px; color: var(--text-muted); transition: transform var(--ease); }
.ssel-trigger.open > i.fa-chevron-down { transform: rotate(180deg); }
.ssel-panel {
    position: fixed; inset: auto; margin: 0; padding: 0; z-index: 2147483000;
    width: var(--ssel-panel-width, 280px); max-width: calc(100vw - 16px);
    max-height: var(--ssel-panel-max-height, min(360px, calc(100vh - 16px)));
    flex-direction: column; overflow: hidden;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.ssel-panel:popover-open { display: flex; }
.ssel-panel::backdrop { background: transparent; }
.ssel-search { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-lite); }
.ssel-search i { color: var(--text-muted); font-size: 12.5px; }
.ssel-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13.5px; }
.ssel-search input::placeholder { color: var(--text-muted); opacity: 1; }
.ssel-list { flex: 1 1 auto; min-height: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.ssel-item {
    width: 100%; display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent;
    text-align: left; font-size: 13.5px; color: var(--text-2); cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.ssel-item:hover { background: var(--surface-2); color: var(--text); }
.ssel-item.active { background: var(--surface-2); outline: 2px solid var(--p-ring); outline-offset: -2px; }
.ssel-item.picked { background: var(--p-soft); color: var(--p-text); font-weight: 700; }
.ssel-item .ssel-ico { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--surface-2); color: var(--icon); font-size: 12px; }
.ssel-empty { padding: 22px; text-align: center; font-size: 13px; color: var(--text-muted); }
.ssel-empty--error { color: var(--danger); }
.ssel-loading { margin-left: auto; color: var(--p) !important; }

/* ══════════════════════════ 20. CARGA GLOBAL ══════════════════════════ */
.loading-overlay {
    position: fixed; inset: 0; z-index: 20050;
    display: flex; align-items: center; justify-content: center;
    background: var(--overlay); backdrop-filter: blur(2px);
}
.loading-card {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    min-width: 280px; max-width: min(520px, calc(100vw - 32px)); min-height: 80px;
    padding: 20px 24px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    animation: fade-up 180ms ease both;
}
.loading-card .spinner-border { color: var(--p) !important; }
.loading-text { font-size: 14px; font-weight: 700; color: var(--text); }

/* ══════════════════════════ 21. PAGINADOR ══════════════════════════ */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 2px; }
.pager-info { font-size: 13px; color: var(--text-muted); }
.pager-controls { display: flex; align-items: center; gap: 8px; }
.pager-page { min-width: 110px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pager-btn {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-2);
    cursor: pointer; transition: background var(--ease);
}
.pager-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════ 22. TOASTS (brandShell.toast) ══════════════════════════ */
[data-toast-scope] { position: relative; }
.bt-toast-stack { display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.bt-toast-stack--page {
    position: fixed; z-index: 300000;
    top: calc(var(--shell-gap) + var(--topbar-h) + 12px); right: calc(var(--shell-gap) + 4px);
    width: min(380px, calc(100vw - 24px));
}
.bt-toast-stack--anchored { position: absolute; top: 14px; right: 14px; width: min(360px, calc(100% - 28px)); z-index: 30; }
.bt-toast {
    --bt-c: var(--success); --bt-bg: var(--success-bg);
    position: relative; pointer-events: auto;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 12px 16px 14px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-lg); overflow: hidden;
    animation: bt-toast-in .3s cubic-bezier(.21,1.02,.73,1) both;
}
.bt-toast--success { --bt-c: var(--success); --bt-bg: var(--success-bg); }
.bt-toast--error   { --bt-c: var(--danger);  --bt-bg: var(--danger-bg); }
.bt-toast--warning { --bt-c: var(--warning); --bt-bg: var(--warning-bg); }
.bt-toast--info    { --bt-c: var(--info);    --bt-bg: var(--info-bg); }
.bt-toast__ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--bt-bg); color: var(--bt-c); font-size: 16px; }
.bt-toast__txt { flex: 1; min-width: 0; padding-top: 1px; }
.bt-toast__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); }
.bt-toast__msg { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.bt-toast__close { width: 28px; height: 28px; margin: -4px -2px 0 0; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.bt-toast__close:hover { background: var(--surface-2); color: var(--text); }
.bt-toast__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--bt-c); opacity: .55; transform-origin: left center; animation: bt-toast-bar var(--bt-ms, 4000ms) linear forwards; }
.bt-toast.is-paused .bt-toast__bar { animation-play-state: paused; }
.bt-toast.is-leaving { animation: bt-toast-out .22s ease forwards; }
@keyframes bt-toast-in  { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bt-toast-out { to { opacity: 0; transform: translateX(16px) scale(.97); } }
@keyframes bt-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.brand-toast, .toast-brand { border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; }

/* ══════════════════════════ 23. LABORATORIO FACTILIZA (TestFactiliza.razor) ══════════════════════════ */
.factiliza-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.factiliza-grid .card { min-width: 0; }
.factiliza-field { margin-bottom: 16px; }
.factiliza-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.factiliza-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.factiliza-result { padding: 14px; max-height: 460px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); font-family: var(--font-mono); font-size: 12px; }

.fl-hero { display: flex; align-items: center; gap: 18px; padding: 24px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.fl-hero-icon { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; border-radius: 16px; background: var(--p-soft); color: var(--p-text); font-size: 22px; }
.fl-hero-copy { flex: 1; min-width: 0; }
.fl-hero-copy h1 { margin: 4px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.fl-hero-copy p { margin: 0; font-size: 14px; color: var(--text-2); }
.fl-hero-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: 12.5px; font-weight: 700; white-space: nowrap; }

.fl-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 20px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); }
.fl-overview-item { display: flex; align-items: center; gap: 12px; padding: 18px; min-width: 0; background: var(--surface); }
.fl-overview-item div { flex: 1; min-width: 0; }
.fl-overview-item small { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--text-muted); }
.fl-overview-item strong { font-size: 14.5px; font-weight: 700; color: var(--text); }
.fl-overview-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--icon); font-size: 17px; }
.fl-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px var(--warning-bg); }
.fl-dot.is-ready { background: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }

.fl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); }
.fl-tab { flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.fl-tab > i { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--icon); font-size: 15px; }
.fl-tab span { font-size: 14px; font-weight: 700; }
.fl-tab span small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.fl-tab:hover { color: var(--text); }
.fl-tab.is-active, .fl-tab.is-active:hover { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fl-tab.is-active > i { background: var(--p); color: var(--on-p); }
.fl-tab:disabled { opacity: .65; cursor: wait; }

.fl-workspace { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.fl-form, .fl-result-card { min-width: 0; }
.fl-result-card { position: sticky; top: calc(var(--topbar-h) + var(--shell-gap) * 2); }
.fl-workspace.fl-config { grid-template-columns: minmax(0, 1fr); }
.fl-config .fl-form { width: 100%; max-width: none; }
.fl-workspace .card { overflow: hidden; }
.fl-workspace .card-header { padding: 16px 20px; font-size: 15px; font-weight: 700; }
.fl-workspace .card-body { padding: 22px; }
.fl-card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--icon); font-size: 14px; }
.fl-workspace input.form-control, .fl-workspace select.form-select { height: 44px; }
.fl-workspace textarea.form-control { min-height: 80px; }
.fl-workspace #fe-json, .fe-json { min-height: 300px; font-family: var(--font-mono); font-size: 12px; }
.fl-workspace .btn { min-height: 42px; }
.fl-workspace .factiliza-result { max-height: 65vh; margin-bottom: 0; }
.fl-status { color: var(--text-2); overflow-wrap: anywhere; }
.fl-data { margin: 0; }
.fl-data-row { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-lite); }
.fl-data-row:last-child { border-bottom: 0; }
.fl-data dt { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.fl-data dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.fl-empty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--text-muted); }
.fl-empty i { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--p-soft); color: var(--p-text); font-size: 24px; }
.fl-empty span { max-width: 340px; font-size: 13.5px; line-height: 1.5; }
.fl-json { margin-top: 16px; color: var(--text-2); }
.fl-json summary { cursor: pointer; padding: 8px 0; }
.fl-settings-note { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border-lite); border-radius: 12px; }
.fl-settings-note > i { padding-top: 3px; color: var(--icon); }
.fl-settings-note strong { font-size: 13px; color: var(--text); }
.fl-settings-note p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.fl-config-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fl-config-group { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.fl-config-group legend { float: none; width: auto; margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.fl-config-group legend i { margin-right: 7px; color: var(--icon); }
.fl-config-group > p { margin-bottom: 18px; font-size: 12.5px; color: var(--text-muted); }
.fl-config-billing { grid-column: 1 / -1; }
.fl-billing-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
.fl-wide { grid-column: 1 / -1; }
.fl-service-badge, .fl-storage-badge, .fl-result-badge { padding: 5px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 11px; font-weight: 600; }
.fl-storage-badge, .fl-result-badge { margin-left: auto; }
.fl-result-badge.is-success { background: var(--success-bg); color: var(--success); }
.fl-result-badge.is-error { background: var(--danger-bg); color: var(--danger); }
.fl-result-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-lite); font-size: 12px; color: var(--text-muted); }
.fl-switch-row { display: flex; align-items: center; gap: 10px; padding: 13px; border-radius: 10px; background: var(--surface-2); }
.fl-switch-row input { width: 18px; height: 18px; accent-color: var(--p); }
.fl-switch-row strong { display: block; font-size: 13px; color: var(--text); }
.fl-switch-row small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.fl-save-bar { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--border-lite); }
.fl-save-bar > span { display: block; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.fl-audit-head { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.fl-audit-head h2 { font-size: 16px; font-weight: 700; color: var(--text); }
.fl-audit-head p, .fl-audit-empty { font-size: 12.5px; color: var(--text-muted); }
.fl-audit-table { overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.fl-audit-table table { margin: 0; font-size: 12.5px; }
.fl-audit-table td, .fl-audit-table th { padding: 12px; white-space: normal; vertical-align: top; }

/* ══════════════════════════ 24. LOGIN (Login.razor) ══════════════════════════
   Dos paneles flotantes: marca (izquierda) y formulario (derecha).
   La figura del panel de marca es el icono.png del cliente en silueta blanca:
   funciona para cualquier cliente sin diseñar nada nuevo. */
.lg-page {
    min-height: 100vh; display: flex; flex-wrap: wrap; gap: var(--shell-gap);
    padding: var(--shell-gap); background: var(--body-bg);
}
.lg-brand {
    position: relative; overflow: hidden;
    flex: 1 1 440px; min-height: 260px;
    display: flex; flex-direction: column;
    padding: 40px;
    border-radius: 22px;
    background: color-mix(in oklab, var(--brand) 82%, #0A0C13);
    color: #fff;
}
[data-theme="dark"] .lg-brand { background: #141414; border: 1px solid var(--border); }
/* Marca clara (1c): panel negro con acentos de marca (identidad amarillo + negro). */
html[data-brand-tone="light"] .lg-brand { background: #111111; }
html[data-brand-tone="light"][data-theme="dark"] .lg-brand { background: #141414; }
.lg-dots {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
    mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
}
.lg-watermark {
    position: absolute; right: -150px; bottom: -170px;
    width: 640px; height: auto; max-width: none;
    filter: brightness(0) invert(1); opacity: .09;
    transform: rotate(-10deg); pointer-events: none;
}
[data-theme="dark"] .lg-watermark { opacity: .06; }
.lg-seal {
    position: relative; align-self: flex-start;
    display: inline-flex; align-items: center;
    padding: 10px 16px; border-radius: 14px;
    background: rgba(255,255,255,.94);
}
.lg-seal img { display: block; height: 32px; width: auto; }
.lg-copy { position: relative; margin-top: auto; padding-top: 48px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }
.lg-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.lg-system { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: #fff; }
html[data-brand-tone="light"] .lg-dots { background-image: radial-gradient(color-mix(in srgb, var(--p) 40%, transparent) 1px, transparent 1.5px); }
html[data-brand-tone="light"] .lg-watermark { opacity: .06; }
html[data-brand-tone="light"] .lg-eyebrow { color: var(--p); }
html[data-brand-tone="light"] .lg-system::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 14px; border-radius: 3px; background: var(--p); }
.lg-lead { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); }

.lg-panel {
    flex: 1 1 440px;
    display: flex; flex-direction: column;
    padding: 24px 32px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
}
.lg-top { display: flex; justify-content: flex-end; }
.lg-theme {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--icon);
}
.lg-theme:hover { background: var(--surface-2); color: var(--text); }
.lg-theme .fa-sun { display: none; }
[data-theme="dark"] .lg-theme .fa-sun { display: inline-block; }
[data-theme="dark"] .lg-theme .fa-moon { display: none; }

.lg-form { width: 100%; max-width: 400px; margin: auto; padding: 24px 0; display: flex; flex-direction: column; gap: 20px; animation: fade-up 260ms ease both; }
.lg-title { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.025em; color: var(--text); }
.lg-sub { margin: 6px 0 0; color: var(--text-2); }
.lg-field { display: flex; flex-direction: column; gap: 8px; }
.lg-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lg-label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.lg-link { font-size: 13px; font-weight: 700; color: var(--p-text); }
.lg-link:hover { color: var(--p-hover); text-decoration: underline; }
[data-theme="dark"] .lg-link:hover { color: #fff; }
.lg-input-wrap {
    display: flex; align-items: center; gap: 10px;
    height: 50px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--icon);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.lg-input-wrap:focus-within { border-color: var(--p); box-shadow: 0 0 0 4px var(--p-ring); }
.lg-input-wrap > i { width: 18px; text-align: center; }
.lg-input {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: 0; background: transparent;
    color: var(--text); font: 500 15px var(--font);
}
.lg-input::placeholder { color: var(--text-muted); }
.lg-eye {
    width: 36px; height: 36px; margin-right: -8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: var(--icon);
}
.lg-eye:hover { background: var(--surface-2); color: var(--text); }
.lg-btn {
    width: 100%; height: 50px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: 12px;
    background: var(--p); color: var(--on-p);
    font: 700 15px var(--font);
    transition: background var(--ease);
}
.lg-btn:hover { background: var(--p-hover); }
.lg-btn:disabled { opacity: .8; cursor: progress; }
.lg-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    background: var(--danger-bg); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    color: var(--text); font-size: 13.5px;
}
.lg-alert > i { margin-top: 2px; color: var(--danger); }
.lg-divider { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-muted); }
.lg-divider::before, .lg-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.lg-support {
    width: 100%; height: 48px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text);
    font-size: 14px; font-weight: 600;
}
.lg-support:hover { background: var(--surface-2); color: var(--text); }
.lg-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-muted); }

/* ══════════════════════════ 25. MENÚ HORIZONTAL (desktop, data-menu-layout) ══════════════════════════
   La misma estructura del sidebar se reutiliza como barra horizontal
   debajo del topbar. No se duplica el menú. */
@media (min-width: 1025px) {
    html[data-menu-layout="horizontal"] #sidebar {
        top: calc(var(--shell-gap) * 2 + var(--topbar-h));
        left: var(--shell-gap); right: var(--shell-gap); bottom: auto;
        width: auto; height: 60px;
        flex-direction: row; align-items: center;
        padding: 0 8px; overflow: visible;
        border-radius: var(--r-lg);
    }
    html[data-menu-layout="horizontal"] #sidebar .logo {
        height: 100%; padding: 0 14px 0 8px; margin-right: 6px;
        border-right: 1px solid var(--border);
    }
    html[data-menu-layout="horizontal"] #sidebar .logo-text { display: flex !important; max-width: 170px; }
    html[data-menu-layout="horizontal"] #sidebar .logo-text img { height: 26px; }
    html[data-menu-layout="horizontal"][data-theme="dark"] #sidebar .logo-text img { height: 36px; padding: 5px 9px; }
    html[data-menu-layout="horizontal"] #sidebar .logo-mark { display: none !important; }
    html[data-menu-layout="horizontal"] #sidebar .nav { flex: 1; height: 100%; padding: 0 4px; overflow: visible; }
    html[data-menu-layout="horizontal"] #brandMenu { display: flex; align-items: center; gap: 2px; height: 100%; white-space: nowrap; }
    html[data-menu-layout="horizontal"] #brandMenu > li { flex: 0 0 auto; margin: 0; }
    html[data-menu-layout="horizontal"] #brandMenu > li.nav-section { display: none; }
    html[data-menu-layout="horizontal"] #brandMenu > li > a { min-height: 40px; padding: 0 10px; gap: 8px; }
    /* Submenú: solo por clic (.mm-show) */
    html[data-menu-layout="horizontal"] #brandMenu > li > ul {
        display: none !important;
        position: absolute; top: calc(100% + 8px); left: 0;
        min-width: 230px; max-width: 300px; max-height: min(70vh, 520px);
        margin: 0; padding: 8px;
        overflow-y: auto; overflow-x: hidden;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
        z-index: 12000;
    }
    html[data-menu-layout="horizontal"] #brandMenu > li > ul.mm-show { display: block !important; }
    html[data-menu-layout="horizontal"] #brandMenu > li > ul > li > a { white-space: normal; }
    /* En horizontal todo el ancho es para los módulos. El tema se cambia desde
       el menú de usuario ("Cambiar tema") y el soporte queda en el pie de
       página y en Inicio. */
    html[data-menu-layout="horizontal"] .sidebar-footer { display: none; }
    html[data-menu-layout="horizontal"] .theme-seg .fb-label { display: none; }
    html[data-menu-layout="horizontal"] #main,
    html[data-menu-layout="horizontal"] #wrapper.sb-collapsed #main { margin-left: 0; }
    html[data-menu-layout="horizontal"] #topbar { margin: var(--shell-gap); z-index: 310; }
    html[data-menu-layout="horizontal"] #content { padding-top: 72px; }
    html[data-menu-layout="horizontal"] .content-body,
    html[data-menu-layout="horizontal"] #footer { padding-left: var(--shell-gap); }
    html[data-menu-layout="horizontal"] #wrapper.hm-collapsed #sidebar { display: none; }
    html[data-menu-layout="horizontal"] #wrapper.hm-collapsed #content { padding-top: 0; }
}

/* ══════════════════════════ 26. MÓVIL Y TABLET (≤1024px) ══════════════════════════ */
#bottomNav { display: none; }
.bn-pop { display: none; }
.sheet-handle { display: none; }

@media (max-width: 1024px) {
    /* Sidebar = hoja inferior "Módulos". Se oculta con display:none (no transform). */
    #sidebar {
        display: none;
        top: auto; left: 0; right: 0; bottom: 78px;
        width: 100%; max-height: 72vh;
        border-radius: 18px 18px 0 0;
        z-index: 10050; overflow-y: auto;
    }
    #sidebar.mobile-open { display: flex; box-shadow: var(--shadow-lg); animation: sheetUp .26s cubic-bezier(.4,0,.2,1) both; }
    @keyframes sheetUp { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }
    #overlay { display: block; }
    #overlay.active { z-index: 10040; }
    .sheet-handle { display: block; width: 40px; height: 4px; margin: 6px auto 8px; border-radius: 4px; background: var(--border); }
    .logo { padding: 12px 16px; }
    .logo-text img { max-width: 160px; }
    .sidebar-footer { flex-direction: row; align-items: center; }
    .support-card { flex: 1; min-width: 0; }
    .theme-seg { flex: 0 0 auto; }

    #main, #wrapper.sb-collapsed #main { margin-left: 0 !important; }
    #topbar { margin: var(--shell-gap); padding: 0 8px; }
    .tb-search { display: none; }
    .tb-crumb { flex: 1; }
    .user-info, .user-chevron { display: none; }
    .user-btn { padding: 0 5px; }
    .content-body { padding: 8px var(--shell-gap) 110px; }
    #footer { padding: 4px var(--shell-gap) 96px; }

    /* Bottom nav flotante (backdrop-filter: sus .bn-pop viven fuera a nivel raíz) */
    #bottomNav {
        display: flex; align-items: center; justify-content: space-around;
        position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 9998;
        height: 64px; padding: 0 6px; border-radius: 20px;
        background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border: 1px solid var(--border); box-shadow: var(--shadow-md);
    }
    .bn-slot { position: relative; flex: 1; display: flex; justify-content: center; }
    .bn-slot-logo { flex: 0 0 auto; }
    .bn-btn {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 10px; border: 0; border-radius: 12px; background: none;
        font-size: 10.5px; font-weight: 700; color: var(--text-muted);
    }
    .bn-btn i { font-size: 17px; }
    .bn-btn.active-tab { background: var(--p-soft); color: var(--p-text); }
    .bn-logo {
        width: 50px; height: 50px; margin-top: -22px; flex-shrink: 0; overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        border-radius: 15px; background: #fff; border: 1px solid var(--border);
        box-shadow: 0 4px 12px rgba(0,0,0,.14);
    }
    .bn-logo img { width: 34px; height: 34px; object-fit: contain; display: block; }

    .bn-pop {
        display: none; position: fixed; z-index: 9999;
        min-width: 200px; max-width: min(260px, calc(100vw - 24px));
        padding: 6px;
        background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    }
    .bn-pop.open { display: block; animation: fade-up 160ms ease both; }
    .bn-pop-item {
        display: flex; align-items: center; gap: 9px; width: 100%;
        padding: 10px 11px; border: 0; border-radius: 10px; background: none;
        font-size: 13.5px; font-weight: 600; color: var(--text-2); text-align: left;
    }
    .bn-pop-item:hover { background: var(--surface-2); color: var(--text); }
    .bn-pop-item.danger { color: var(--danger); }


    .gxModal { align-items: flex-start; padding: 20px 12px 90px; }
    .gxModal__dialog { max-height: calc(100vh - 110px); }

    .lg-brand { padding: 28px; }
    .lg-system { font-size: 28px; }
    .lg-panel { padding: 20px; }
}

@media (max-width: 992px) {
    .perm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
    .fl-workspace { grid-template-columns: minmax(0, 1fr); }
    .fl-result-card { position: static; }
    .fl-tab { flex: 1 1 130px; justify-content: center; }
}
@media (max-width: 900px) {
    .factiliza-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .table thead tr.column-filter-row th { min-width: 132px; }
    .table thead tr.column-filter-row th:first-child { min-width: 72px; }
    .pager { justify-content: center; text-align: center; }
}
@media (max-width: 760px) {
    .fl-hero { flex-wrap: wrap; align-items: flex-start; padding: 18px; }
    .fl-hero-copy h1 { font-size: 22px; }
    .fl-overview { grid-template-columns: 1fr; }
    .fl-tab { flex: 1 1 40%; }
    .fl-config-grid, .fl-billing-fields { grid-template-columns: 1fr; }
    .fl-workspace .card-body { padding: 16px; }
}
@media (max-width: 640px) {
    .access-denied-shell { margin: 20px 0; padding: 20px; flex-direction: column; }
    .bt-toast-stack--page { left: 12px; right: 12px; width: auto; }
    .lg-brand { min-height: 200px; }
    .lg-copy { padding-top: 28px; }
    .lg-lead { display: none; }
}
@media (max-width: 576px) {
    .filter-stats { grid-template-columns: 1fr; max-width: 100%; }
    .page-actions { width: 100%; }
    .page-actions .page-action-btn { flex: 1 1 0; }
    .dni-field-row { grid-template-columns: 1fr; }
    .btn-dni-check { width: 100%; }
    .dash-kpi-val { font-size: 26px; }
    .page-title { font-size: 22px; }
}
@media (max-width: 480px) {
    .fl-data-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ══════════════════════════ 27. MOVIMIENTO REDUCIDO ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .qa-card { opacity: 1; }
    .bt-toast__bar { display: none; }
}

/* GlobalTrainer: tabs administrativos con contraste independiente del color de marca. */
:is(.dash-tabs,.gb-tabs,.gc-tabs,.ge-tabs,.gem-tabs,.gm-tabs,.gmc-tabs,.gme-tabs,.gp-tabs,.gpr-status-tabs,.gpr-tabs,.gt-tabs,.gv-tabs) :is(button,a) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 14px; border: 1px solid transparent;
    border-radius: var(--r-md); background: transparent; color: var(--text-2);
    font: inherit; font-weight: 650; line-height: 1.3; text-decoration: none;
}
:is(.dash-tabs,.gb-tabs,.gc-tabs,.ge-tabs,.gem-tabs,.gm-tabs,.gmc-tabs,.gme-tabs,.gp-tabs,.gpr-status-tabs,.gpr-tabs,.gt-tabs,.gv-tabs) :is(button,a).active {
    background: var(--p-soft); color: var(--text); border-color: var(--p-line);
    box-shadow: inset 0 -2px 0 var(--p); font-weight: 750;
}
:is(.dash-tabs,.gb-tabs,.gc-tabs,.ge-tabs,.gem-tabs,.gm-tabs,.gmc-tabs,.gme-tabs,.gp-tabs,.gpr-status-tabs,.gpr-tabs,.gt-tabs,.gv-tabs) :is(button,a):focus-visible {
    outline: 2px solid var(--p); outline-offset: 2px;
}
:is(.dash-tabs,.gb-tabs,.gc-tabs,.ge-tabs,.gem-tabs,.gm-tabs,.gmc-tabs,.gme-tabs,.gp-tabs,.gpr-status-tabs,.gpr-tabs,.gt-tabs,.gv-tabs) :is(button,a) > i { color: inherit; flex-shrink: 0; }
.gm-tabs .gm-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-full);
    background: var(--surface); color: var(--text-2); font-size: 11px; line-height: 1;
    border: 1px solid var(--border); flex-shrink: 0;
}

/* Matrícula: el tamaño del diálogo y sus grids no dependen del ancho de la página. */
.gxModal__dialog.gm-dialog {
    width: min(1120px, calc(100vw - 32px)); max-width: min(1120px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px); min-width: 0; min-height: 0;
}
.gm-dialog .gm-modal-content { min-width: 0; min-height: 0; max-height: calc(100dvh - 32px); }
.gm-dialog form.gm-modal-form {
    display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden;
}
.gm-dialog .gm-modal-body {
    container: gm-editor / inline-size; flex: 1 1 auto; min-width: 0; min-height: 0;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.gm-dialog .gm-modal-footer { flex: 0 0 auto; }
.gm-dialog .gm-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: -20px; z-index: 5;
    margin: 0; padding: 10px 0; background: var(--surface); border-bottom: 1px solid var(--border);
}
.gm-dialog :is(.gm-section,.gm-add-card,.gm-account,.gm-field,.gm-account-list,.gm-add-grid,.gm-form-grid,.gm-account-grid) { min-width: 0; max-width: 100%; }
.gm-dialog .gm-section-head { flex-wrap: wrap; }
.gm-dialog .gm-section-head > div { min-width: 0; }
.gm-dialog .gm-section-head h3 { font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.gm-dialog .gm-section-head > div > span { color: var(--text-2); }
.gm-dialog :is(.gm-section-head > i,.gm-account-icon) {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--p-soft); color: var(--text);
}
.gm-dialog .gm-account-grid {
    display: grid; grid-template-columns: minmax(0,2fr) repeat(3,minmax(0,1fr)) 42px;
    align-items: end; gap: 12px;
}
.gm-dialog .gm-field--description { grid-column: auto; }
.gm-dialog .gm-account-grid :is(input,select,.form-control) { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.gm-dialog .gm-account-main { grid-template-columns: 38px minmax(0,1fr) auto; }
.gm-dialog .gm-account-main strong { overflow-wrap: anywhere; }
@container gm-editor (max-width: 820px) {
    .gm-dialog .gm-account-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .gm-account-grid .gm-field--description { grid-column: 1 / -1; }
    .gm-account-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@container gm-editor (max-width: 520px) {
    .gm-dialog .gm-add-grid,.gm-dialog .gm-form-grid,.gm-dialog .gm-account-grid { grid-template-columns: minmax(0,1fr); }
    .gm-field--span-2 { grid-column: auto; }
    .gm-dialog .gm-account-main { grid-template-columns: 38px minmax(0,1fr); }
    .gm-account-main > .gm-status { grid-column: 2; justify-self: start; }
    .gm-tabs button { width: 100%; justify-content: flex-start; }
}

/* Cliente: dimensiones específicas sobre el máximo genérico de Core (560px).
   La paleta de marca del shell proporcionado por el usuario se conserva. */
.gxModal__dialog.gc-dialog {
    width: min(1080px, calc(100vw - 32px)); max-width: min(1080px, calc(100vw - 32px));
    min-width: 0; min-height: 0; max-height: calc(100dvh - 32px);
}
.gc-dialog .gc-modal-content { min-width: 0; min-height: 0; max-height: calc(100dvh - 32px); }
.gc-dialog form.gc-modal-form {
    display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden;
}
.gc-dialog .gc-modal-body {
    container: gc-editor / inline-size; flex: 1 1 auto; min-width: 0; min-height: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.gc-dialog .gc-modal-footer { flex: 0 0 auto; }
.gc-dialog .gc-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 0;
    position: sticky; top: -20px; z-index: 4; background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.gc-dialog .gc-tabs button { white-space: normal; text-align: center; }
.gc-dialog :is(.gc-section,.gc-form-grid,.gc-field) { min-width: 0; max-width: 100%; }
.gc-dialog .gc-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.gc-dialog .gc-form-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.gc-dialog .gc-field--span-2 { grid-column: span 2; }
.gc-dialog .gc-field--span-3 { grid-column: 1 / -1; }
.gc-dialog .gc-field :is(input,select,textarea,.form-control,.ssel) { min-width: 0; max-width: 100%; box-sizing: border-box; }
.gc-dialog .gc-field--lookup > div { display: grid; grid-template-columns: minmax(0,1fr) 40px; gap: 8px; }
.gc-dialog .gc-field--lookup button { width: 40px; min-width: 40px; }
.gc-dialog .gc-section-head > div { min-width: 0; }
.gc-dialog .gc-section-head h3 { overflow-wrap: anywhere; font-size: 18px; line-height: 1.35; }
.gc-dialog .gc-section-head > div > span { color: var(--text-2); }
@container gc-editor (max-width: 780px) {
    .gc-dialog .gc-form-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gc-dialog .gc-field--span-3 { grid-column: 1 / -1; }
}
@container gc-editor (max-width: 520px) {
    .gc-dialog .gc-form-grid,.gc-dialog .gc-form-grid--3 { grid-template-columns: minmax(0,1fr); }
    .gc-dialog .gc-field--span-2,.gc-dialog .gc-field--span-3 { grid-column: 1 / -1; }
    .gc-dialog .gc-tabs button { width: 100%; justify-content: flex-start; }
}

/* Gestión de comprobantes: legibilidad y acciones explícitas, sin cambiar la paleta. */
.gc-page[b-cqbtn9kr20] { font-size: 14px; line-height: 1.5; }
.gc-page[b-cqbtn9kr20] .page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.gc-page[b-cqbtn9kr20] .page-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-page[b-cqbtn9kr20] :is(.gc-field label,.gc-page-size label,.gc-table-head span) { font-size: 13px; line-height: 1.4; }
.gc-page[b-cqbtn9kr20] :is(.form-control,.form-select,.btn) { font-size: 14px; }
.gc-page[b-cqbtn9kr20] .gc-filter-grid {
    display: grid; grid-template-columns: minmax(140px,.8fr) minmax(140px,.8fr) minmax(180px,1fr) minmax(240px,1.7fr) auto;
    gap: 14px; align-items: end;
}
.gc-page[b-cqbtn9kr20] .gc-filter-grid > * { min-width: 0; }
.gc-page[b-cqbtn9kr20] .gc-bulk-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-page[b-cqbtn9kr20] .gc-summary small { font-size: 13px; }
.gc-page[b-cqbtn9kr20] .gc-summary strong { font-size: 22px; }
.gc-page[b-cqbtn9kr20] .gc-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.gc-page[b-cqbtn9kr20] .gc-table { min-width: 1850px; width: 100%; table-layout: fixed; font-size: 14px; }
.gc-page[b-cqbtn9kr20] .gc-table thead th { font-size: 12px; line-height: 1.4; padding: 12px; }
.gc-page[b-cqbtn9kr20] .gc-table tbody td { font-size: 14px; line-height: 1.5; padding: 14px 12px; }
.gc-page[b-cqbtn9kr20] .gc-table :is(small,.gc-person-cell > span) { font-size: 12.5px; line-height: 1.5; }
.gc-page[b-cqbtn9kr20] .gc-table :is(.gc-pill,.gc-fe-pill) { font-size: 12px; }
.gc-page[b-cqbtn9kr20] .gc-table :is(.gc-actions-column,.gc-actions-cell) {
    position: sticky; left: 0; min-width: 180px; width: 180px; background: var(--surface); z-index: 2;
    border-right: 1px solid var(--border);
}
.gc-page[b-cqbtn9kr20] .gc-table .gc-actions-column { background: var(--surface-2); z-index: 3; }
.gc-page[b-cqbtn9kr20] .gc-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; width: auto; }
.gc-page[b-cqbtn9kr20] .gc-row-actions .gvCmdBtn {
    display: inline-flex; opacity: 1; visibility: visible; width: 34px; min-width: 34px; height: 34px; margin: 0;
    padding: 0; gap: 0; font-family: var(--font); font-size: 14px; font-weight: 650; box-shadow: none;
    background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
}
.gc-page[b-cqbtn9kr20] .gc-row-actions .gvCmdBtn:hover { background: var(--p-soft); color: var(--text); border-color: var(--p-line); }
.gc-page[b-cqbtn9kr20] .gc-row-actions .gvCmdBtn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
@media(max-width:1200px) {
    .gc-page[b-cqbtn9kr20] .gc-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gc-page[b-cqbtn9kr20] .gc-search-field { grid-column: 1 / -1; }
}
@media(max-width:700px) {
    .gc-page[b-cqbtn9kr20] .gc-filter-grid { grid-template-columns: minmax(0,1fr); }
    .gc-page[b-cqbtn9kr20] :is(.gc-search-field,.gc-filter-submit) { grid-column: auto; }
    .gc-page[b-cqbtn9kr20] .gc-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* FE/SUNAT: ancho real de 240px definido por colgroup, sin repartir espacio sobrante. */
.gc-page[b-cqbtn9kr20] .gc-table .gc-fe-column { width: 240px; max-width: 240px; overflow-wrap: anywhere; }
.gc-page[b-cqbtn9kr20] .gc-status-stack { width: 100%; min-width: 0; max-width: 100%; }
.gc-page[b-cqbtn9kr20] .gc-status-stack small {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    max-width: 100%; overflow: hidden; overflow-wrap: anywhere; white-space: normal;
}
.gc-page[b-cqbtn9kr20] .gc-table td { overflow-wrap: anywhere; }
.gc-page[b-cqbtn9kr20] .gc-table td.text-end { white-space: nowrap; }

/* FE/SUNAT: prioridad visual al estado, sin alterar la clasificación del comprobante. */
.gc-page[b-cqbtn9kr20] .gc-status-stack {
    --fe-bg: #FFFBEB; --fe-ink: #854D0E; --fe-line: #F3C969;
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 10px; border: 1px solid var(--fe-line); border-left-width: 4px;
    border-radius: 10px; background: var(--fe-bg); color: var(--fe-ink);
}
.gc-page[b-cqbtn9kr20] .gc-status-stack:has(> .gc-fe-pill.accepted) {
    --fe-bg: #ECFDF3; --fe-ink: #166534; --fe-line: #86CDA0;
}
.gc-page[b-cqbtn9kr20] .gc-status-stack:has(> .gc-fe-pill:is(.rejected,.error)) {
    --fe-bg: #FEF2F2; --fe-ink: #991B1B; --fe-line: #F3A6A6;
}
.gc-page[b-cqbtn9kr20] .gc-status-stack:has(> .gc-fe-pill.cancelled) {
    --fe-bg: #F1F5F9; --fe-ink: #475569; --fe-line: #CBD5E1;
}
.gc-page[b-cqbtn9kr20] .gc-status-stack > .gc-fe-pill {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
    padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--fe-ink);
    font-size: 13px; font-weight: 800; line-height: 1.4; letter-spacing: .02em;
    white-space: normal; overflow-wrap: anywhere;
}
.gc-page[b-cqbtn9kr20] .gc-status-stack > .gc-fe-pill::before {
    content: '…'; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: 0 0 22px; border: 1.5px solid currentColor;
    border-radius: 50%; font: 800 16px/1 system-ui;
}
.gc-page[b-cqbtn9kr20] .gc-status-stack > .gc-fe-pill.accepted::before { content: '✓'; }
.gc-page[b-cqbtn9kr20] .gc-status-stack > .gc-fe-pill.observed::before { content: '!'; }
.gc-page[b-cqbtn9kr20] .gc-status-stack > .gc-fe-pill:is(.rejected,.error)::before { content: '×'; }
.gc-page[b-cqbtn9kr20] .gc-status-stack > .gc-fe-pill.cancelled::before { content: '−'; }
.gc-page[b-cqbtn9kr20] .gc-status-stack small { color: var(--fe-ink); font-size: 12.5px; line-height: 1.5; }
.gc-page[b-cqbtn9kr20] .gc-fe-notapplicable {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 650;
}
.gc-page[b-cqbtn9kr20] .gc-fe-notapplicable::before { content: '−'; font-weight: 800; }
[data-theme="dark"] .gc-page[b-cqbtn9kr20] .gc-status-stack {
    --fe-bg: #302510; --fe-ink: #FDE68A; --fe-line: #8E6A23;
}
[data-theme="dark"] .gc-page[b-cqbtn9kr20] .gc-status-stack:has(> .gc-fe-pill.accepted) {
    --fe-bg: #102A1C; --fe-ink: #86EFAC; --fe-line: #31764D;
}
[data-theme="dark"] .gc-page[b-cqbtn9kr20] .gc-status-stack:has(> .gc-fe-pill:is(.rejected,.error)) {
    --fe-bg: #34191C; --fe-ink: #FCA5A5; --fe-line: #99454D;
}
[data-theme="dark"] .gc-page[b-cqbtn9kr20] .gc-status-stack:has(> .gc-fe-pill.cancelled) {
    --fe-bg: #202834; --fe-ink: #CBD5E1; --fe-line: #58677C;
}

/* Gestión de pagos: buscador de alumnos, espaciado y superficie explícitos. */
.gp-page[b-1t98u58eip] .gp-search-input { position: relative; min-width: 0; }
.gp-page[b-1t98u58eip] .gp-search-input > input.form-control {
    box-sizing: border-box; width: 100%; min-width: 0; padding-left: 44px; padding-right: 44px;
}
.gp-page[b-1t98u58eip] .gp-search-input > i:first-child {
    position: absolute; top: 50%; left: 14px; width: 18px; text-align: center;
    transform: translateY(-50%); pointer-events: none; color: var(--text-muted); z-index: 1;
}
.gp-page[b-1t98u58eip] .gp-search-input > .gp-search-spinner {
    right: 14px; left: auto; pointer-events: none;
}
.gp-page[b-1t98u58eip] .gp-search-results { background: var(--surface); }
.gp-page[b-1t98u58eip] .gp-search-results > button {
    appearance: none; -webkit-appearance: none; background: var(--surface); color: var(--text);
    border: 0; border-bottom: 1px solid var(--border-lite); border-radius: 0; box-shadow: none;
    font: inherit; text-align: left; cursor: pointer;
}
.gp-page[b-1t98u58eip] .gp-search-results > button:last-child { border-bottom: 0; }
.gp-page[b-1t98u58eip] .gp-search-results > button:hover { background: var(--p-soft); }
.gp-page[b-1t98u58eip] .gp-search-results > button:focus-visible {
    background: var(--p-soft); outline: 2px solid var(--p); outline-offset: -2px;
}

/* Acciones de tablas administrativas: columna al inicio y grupos alineados a la izquierda.
   Solo alinea celdas con acciones; mantiene los importes y saldos a la derecha. */
table :is(td,th):has(.gvCmdBtn),
[role="grid"] [role="gridcell"]:has(.gvCmdBtn) {
    text-align: left !important;
}
table :is(td,th):has(.gvCmdBtn) > :is(div,span):has(.gvCmdBtn),
[role="grid"] [role="gridcell"]:has(.gvCmdBtn) > :is(div,span):has(.gvCmdBtn) {
    justify-content: flex-start !important; justify-items: start; text-align: left !important;
    margin-left: 0 !important; margin-right: auto;
}
table .gvCmdBtn { margin-left: 0; }
.gp-table :is(.gp-actions-column,.gp-actions-cell) { text-align: left; }
.gp-table .gp-row-actions { justify-content: flex-start; }
.rgc-action-col { text-align: left; }