/* ═══════════════════════════════════════════════════════════════
   BRANDGINEERS SHELL — v2
   Layout maestro: sidebar flotante + topbar tipo "command bar"
   Proyecto 100% .NET Core / Blazor — HTML + CSS + JS puro.
   Sin dependencias de DevExpress.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@100..900&family=Sora:wght@600;700;800&display=swap');

/* ══════════════════════════ 1. TOKENS ══════════════════════════ */
:root {
    /* Marca — cambia estos 2 valores para re-tematizar por cliente */
    --brand: #29292a;
    --brand-rgb: 41, 41, 42;
    --brand-dark: color-mix(in srgb, var(--brand) 85%, black);
    --brand-light: color-mix(in srgb, var(--brand) 10%, white);
    --brand-glow: rgba(var(--brand-rgb), .16);
    --brand-glow-hover: rgba(var(--brand-rgb), .10);

    /* Layout */
    --sidebar-w: 254px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 58px;
    --shell-gap: 12px;

    /* Superficies (claro) */
    --body-bg: #EAEBF2;
    --sidebar-bg: rgba(255, 255, 255, .95);
    --surface: #FFFFFF;
    --surface-2: #F4F5F9;
    --border: #E3E4EE;
    --border-lite: #ECECF4;

    /* Texto (claro) */
    --text: #16162a;
    --text-2: #4c4d5e;
    --text-muted: #9395a8;
    --text-header: #ffffff;

    /* Radios */
    --r-sm: 6px;
    --r-md: 11px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-full: 999px;

    /* Sombras */
    --shadow-xs: 0 1px 3px rgba(20,20,35,.06);
    --shadow-sm: 0 2px 12px rgba(20,20,35,.08);
    --shadow-md: 0 10px 32px rgba(20,20,35,.10);
    --shadow-lg: 0 20px 60px rgba(20,20,35,.16);

    /* Semánticos */
    --success: #10B981; --success-rgb:16,185,129; --success-bg:#ECFDF5;
    --danger:  #EF4444; --danger-rgb:239,68,68;   --danger-bg:#FEF2F2;
    --warning: #F59E0B; --warning-rgb:245,158,11; --warning-bg:#FFFBEB;
    --info:    #3B82F6; --info-rgb:59,130,246;    --info-bg:#EFF6FF;

    --secondary: #1A1D2E;
    --ease: 200ms cubic-bezier(.4,0,.2,1);

    /* Alias legado (usados en páginas ya existentes) */
    --primary: var(--brand);
    --primarydark: var(--brand-dark);
    --third: #3b3b3f;
    --fondo: var(--body-bg);
    --brand-light-1: rgba(var(--brand-rgb), .10);
    --brand-light-2: rgba(var(--brand-rgb), .08);
    --bs-gutter-x: 1.5rem; --bs-gutter-y: 0;
}

/* ══════════════════════════ DARK — grafito/negro, SIN tinte morado/ámbar ══════════════════════════ */
[data-theme="dark"] {
    --body-bg: #0a0a0c;
    --sidebar-bg: rgba(23, 23, 27, .95);
    --surface: #17171b;
    --surface-2: #1e1e23;
    --border: #2a2a30;
    --border-lite: #232328;

    --text: #F1F1F3;
    --text-2: #C2C3CE;
    --text-muted: #74757f;
    --text-header: #F1F1F3;

    /* El acento deja de ser el morado de marca y pasa a un gris cálido:
       todo lo que usa --brand-light / --brand-dark / --brand-glow en el
       resto del archivo se corrige automáticamente al redefinir aquí. */
    --brand-dark: #E9E9EC;
    --brand-light: rgba(255,255,255,.07);
    --brand-glow: rgba(0,0,0,.40);
    --brand-glow-hover: rgba(255,255,255,.05);

    --shadow-xs: 0 1px 3px rgba(0,0,0,.35);
    --shadow-sm: 0 2px 14px rgba(0,0,0,.45);
    --shadow-md: 0 10px 34px rgba(0,0,0,.50);
    --shadow-lg: 0 24px 64px rgba(0,0,0,.60);

    --success-bg: rgba(16,185,129,.12);
    --danger-bg: rgba(239,68,68,.12);
    --warning-bg: rgba(245,158,11,.12);
    --info-bg: rgba(59,130,246,.12);

    --brand-light-1: rgba(255,255,255,.08);
    --brand-light-2: rgba(255,255,255,.06);
}

/* ══════════════════════════ 2. RESET ══════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
    font-size: 14px; line-height: 1.55;
    background: var(--body-bg) !important;
    background-image:
        radial-gradient(circle at 8% 4%, rgba(var(--brand-rgb),.05), transparent 32%),
        radial-gradient(circle at 96% 92%, rgba(var(--brand-rgb),.04), transparent 30%);
    color: var(--text);
    transition: background .25s ease, color .25s ease;
}
[data-theme="dark"] body {
    background-image:
        radial-gradient(circle at 8% 4%, rgba(255,255,255,.03), transparent 32%),
        radial-gradient(circle at 96% 92%, rgba(255,255,255,.025), transparent 30%);
}
a { text-decoration:none; color:inherit; }
ul, ol { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }
input, select, textarea { font-family:inherit; font-size:14px; }
img { display:block; max-width:100%; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ══════════════════════════ 3. APP SHELL (layout flotante) ══════════════════════════ */
#wrapper { position: relative; min-height: 100vh; }

/* --- Sidebar flotante --- */
#sidebar {
    position: fixed; top: var(--shell-gap); left: var(--shell-gap); bottom: var(--shell-gap);
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    /* SIN backdrop-filter a propósito: backdrop-filter convierte a este elemento
       en el "contenedor" de sus descendientes position:fixed (como el flyout del
       submenú colapsado), rompiendo su posicionamiento respecto a la pantalla. */
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column;
    z-index: 300; overflow: hidden;
    transition: width var(--ease), transform var(--ease);
}
#sidebar.collapsed { width: var(--sidebar-w-collapsed); }

.logo {
    display:flex; align-items:center; gap:10px; padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border); flex-shrink:0; text-decoration:none; overflow:hidden;
}
.logo-mark {
    width:36px; height:36px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow: 0 4px 14px var(--brand-glow); overflow:hidden;
    font-family:'Sora',sans-serif; font-weight:800; font-size:14px; color:#fff;
    display:none; opacity:0; background: var(--brand);
}
[data-theme="dark"] .logo-mark { background:#232328; border:1px solid #38383f; box-shadow:none; }
.logo-mark img { width:100%; height:100%; object-fit:cover; }
.logo-text { font-family:'Sora',sans-serif; font-weight:700; font-size:14px; color:var(--text); line-height:1.2; white-space:nowrap; overflow:hidden; display:flex; flex-direction:column; opacity:1; }
.logo-text small, .logo-text img { display:block; }
.logo-text small { font-size:10px; font-weight:400; color:var(--text-muted); letter-spacing:.3px; }
#sidebar.collapsed .logo-mark { display:flex; opacity:1; }
#sidebar.collapsed .logo-text { display:none; opacity:0; }

.nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 6px 10px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.nav::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
#brandMenu, #brandMenu ul { list-style:none; margin:0; padding:0; }
#brandMenu > li { margin: 2px 0; position:relative; }
#brandMenu > li.nav-section {
    margin: 14px 6px 3px !important; padding: 0 6px; font-size:10px; font-weight:700; letter-spacing:1.1px;
    text-transform:uppercase; color: var(--text-muted); pointer-events:none; white-space:nowrap; cursor:default;
}
#sidebar.collapsed #brandMenu > li.nav-section { opacity:0; }

#brandMenu > li > a {
    display:flex; align-items:center; gap:10px; padding: 9px 11px; border-radius: var(--r-md);
    font-size: 13.3px; font-weight:600; color: var(--text-2); text-decoration:none; white-space:nowrap; overflow:hidden;
    cursor:pointer; user-select:none; transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
#brandMenu > li > a > i.nav-ico, #brandMenu > li > a > i:first-child {
    width:30px !important; height:30px !important; min-width:30px; display:inline-flex !important; align-items:center !important;
    justify-content:center !important; border-radius: var(--r-md) !important; font-size:14.5px !important; flex-shrink:0;
    background: var(--brand-light) !important; color: var(--brand) !important; transition: all var(--ease);
}
[data-theme="dark"] #brandMenu > li > a > i.nav-ico, [data-theme="dark"] #brandMenu > li > a > i:first-child {
    background: rgba(255,255,255,.06) !important; color:#c9cad3 !important;
}
#brandMenu > li > a > span.nav-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:opacity var(--ease); }
#sidebar.collapsed #brandMenu > li > a > span.nav-text { opacity:0; width:0; flex:0; }

#brandMenu > li > a.has-arrow::after {
    content:'\f107'; font-family:'Font Awesome 6 Pro','Font Awesome 6 Free'; font-weight:900; font-size:10.5px; color: var(--text-muted);
    margin-left:auto; flex-shrink:0; transition: transform var(--ease), opacity var(--ease);
}
#sidebar.collapsed #brandMenu > li > a.has-arrow::after { opacity:0; width:0; }
#brandMenu > li > a[aria-expanded="true"].has-arrow::after { transform: rotate(180deg); }

#brandMenu > li > a:hover { background: var(--surface-2); }
#brandMenu > li > a:hover > i.nav-ico, #brandMenu > li > a:hover > i:first-child { background: var(--brand-light) !important; color: var(--brand-dark) !important; }

#brandMenu > li.mm-active > a, #brandMenu > li > a.mm-active {
    background: var(--brand-light) !important; color: var(--brand-dark) !important;
    box-shadow: inset 3px 0 0 var(--brand) !important; font-weight:700;
}
[data-theme="dark"] #brandMenu > li.mm-active > a, [data-theme="dark"] #brandMenu > li > a.mm-active {
    box-shadow: inset 3px 0 0 #8a8b93 !important; color:#fff !important;
}
#brandMenu > li.mm-active > a > i.nav-ico, #brandMenu > li > a.mm-active > i.nav-ico {
    background: var(--brand-light) !important; color: var(--brand) !important;
}
[data-theme="dark"] #brandMenu > li.mm-active > a > i.nav-ico, [data-theme="dark"] #brandMenu > li > a.mm-active > i.nav-ico {
    background: rgba(255,255,255,.10) !important; color:#fff !important;
}

#brandMenu > li > ul { margin: 2px 6px 4px 16px; padding: 2px 0 2px 14px; border-left:2px solid var(--border); overflow:hidden; max-height:0; transition: max-height .26s ease; }
/* El alto anterior de 320px truncaba módulos con muchas opciones.
   El scroll debe pertenecer a .nav, no al submenú. */
#brandMenu > li.mm-active > ul,
#brandMenu > li > ul.mm-show {
    max-height: 10000px;
    overflow: visible;
}
#sidebar.collapsed #brandMenu > li > ul { display:none !important; }

#brandMenu > li > ul > li.nav-section {
    padding: 8px 8px 3px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color: var(--text-muted); pointer-events:none; cursor:default; white-space:nowrap;
}
#brandMenu > li > ul > li { margin: 1px 0; }
#brandMenu > li > ul > li > a {
    display:flex; align-items:center; gap:8px; padding: 7px 8px; border-radius: var(--r-md);
    font-size:12.6px; font-weight:400; color: var(--text-2); text-decoration:none; white-space:nowrap; cursor:pointer;
}
#brandMenu > li > ul > li > a::before {
    content:''; width:5px; height:5px; border-radius:50%; border:1.5px solid var(--text-muted); flex-shrink:0;
    transition: background var(--ease), border-color var(--ease);
}
#brandMenu > li > ul > li > a:hover { background: var(--surface-2); }
#brandMenu > li > ul > li > a:hover::before { background: var(--brand); border-color: var(--brand); }
[data-theme="dark"] #brandMenu > li > ul > li > a:hover::before { background:#dcdde2; border-color:#dcdde2; }
#brandMenu > li > ul > li.mm-active > a { background: var(--brand-light); color: var(--brand-dark); font-weight:700; }
#brandMenu > li > ul > li.mm-active > a::before { background: var(--brand); border-color: var(--brand); }
[data-theme="dark"] #brandMenu > li > ul > li.mm-active > a { color:#fff; }
[data-theme="dark"] #brandMenu > li > ul > li.mm-active > a::before { background:#dcdde2; border-color:#dcdde2; }

.sidebar-footer { padding:10px; border-top:1px solid var(--border); flex-shrink:0; }
.footer-btn {
    display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius: var(--r-md);
    font-size:12.3px; font-weight:600; color: var(--text-muted); cursor:pointer; border:none; background:none;
    width:100%; text-align:left; white-space:nowrap; overflow:hidden;
}
.footer-btn > i { flex-shrink:0; font-size:15px; width:18px; text-align:center; }
.footer-btn .fb-label { white-space:nowrap; transition: opacity var(--ease); }
#sidebar.collapsed .footer-btn .fb-label { opacity:0; width:0; overflow:hidden; }
.footer-btn:hover { background: var(--surface-2); color: var(--text-2); }

/* --- Flyout de submenú cuando el sidebar está colapsado --- */
#sidebar.collapsed #brandMenu > li { position:relative !important; }
#sidebar.collapsed #brandMenu > li > ul {
    display:block !important; position:fixed; left: calc(var(--sidebar-w-collapsed) + var(--shell-gap) + 6px);
    min-width:210px; max-width:260px; max-height:70vh; overflow-y:auto;
    background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding:8px; margin:0; opacity:0; pointer-events:none;
    transform: translateX(-8px); transition: opacity 150ms ease, transform 150ms ease; z-index:9999;
}
#sidebar.collapsed #brandMenu > li.flyout-open > ul { opacity:1; pointer-events:all; transform: translateX(0); max-height:70vh; }

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

/* --- Topbar flotante tipo "command bar" --- */
/* IMPORTANTE: #topbar sí puede llevar backdrop-filter porque sus paneles
   position:fixed (user-dd, notif-dd) ahora viven FUERA de este elemento
   (renderizados a nivel raíz en MainLayout, patrón "portal"). Si algún día
   se vuelve a anidar un panel fixed aquí adentro, se 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:10px; padding: 0 8px;
    background: var(--sidebar-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.tb-toggle {
    width:34px; height:34px; border-radius: var(--r-md); background:none; border:none;
    display:flex; align-items:center; justify-content:center; color: var(--text-2); font-size:14px;
    cursor:pointer; flex-shrink:0; transition: background var(--ease);
}
.tb-toggle:hover { background: var(--surface-2); }

.tb-crumb { display:flex; align-items:center; gap:6px; font-size:12.5px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-crumb b { color: var(--text); font-weight:700; }
.tb-crumb i { font-size:9px; flex-shrink:0; }

.tb-search {
    flex:1; max-width:340px; display:flex; align-items:center; gap:8px; padding:7px 12px;
    border-radius:999px; background: var(--surface-2); border:1px solid var(--border); color: var(--text-muted);
    font-size:12.5px; cursor:pointer; transition: all var(--ease);
}
.tb-search:hover { border-color: rgba(var(--brand-rgb),.30); }
.tb-search kbd { margin-left:auto; font-size:10px; background: var(--surface); border:1px solid var(--border); border-radius:5px; padding:2px 6px; color: var(--text-muted); }

.tb-actions { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.tb-btn {
    width:34px; height:34px; border-radius: var(--r-md); background:none; border:none;
    display:flex; align-items:center; justify-content:center; color: var(--text-2); font-size:14.5px;
    cursor:pointer; flex-shrink:0; transition: background var(--ease); position:relative; text-decoration:none;
}
.tb-btn:hover { background: var(--surface-2); }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--danger); border:2px solid var(--sidebar-bg); }

.user-wrap { position:relative; margin-left:2px; }
.user-btn {
    display:flex; align-items:center; gap:8px; background: var(--surface-2); border:1px solid var(--border);
    padding:4px 10px 4px 4px; border-radius: var(--r-full); cursor:pointer; transition: background var(--ease);
}
.user-btn:hover, .user-btn.open { background: var(--border-lite); }
.user-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; display:block; flex-shrink:0; background: var(--brand-dark); }
.user-info { text-align:left; line-height:1.2; }
.user-name { font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700; color: var(--text); white-space:nowrap; }
.user-role { font-size:10.5px; color: var(--text-muted); white-space:nowrap; }
.user-chevron { color: var(--text-muted); font-size:10.5px; transition: transform var(--ease); flex-shrink:0; }
.user-btn.open .user-chevron { transform: rotate(180deg); }

/* --- Dropdowns (usuario / notificaciones): siempre dentro de la pantalla ---
   position:fixed + JS que calcula left/top evita cualquier desborde,
   sin importar el ancho de pantalla o el idioma/longitud del texto. */
.user-dropdown {
    display:none; position:fixed; min-width:230px; 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; z-index:9999;
}
.user-dropdown.open { display:block; }
.dd-header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); background: var(--surface-2); }
.dd-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--brand); }
.dd-name { font-family:'Sora',sans-serif; font-size:13px; font-weight:700; color: var(--text); }
.dd-role { font-size:11.5px; color: var(--text-muted); }
.dd-item {
    display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:13.3px; font-family:'DM Sans',sans-serif;
    color: var(--text-2); text-decoration:none; cursor:pointer; border:none; background:none; width:100%; text-align:left;
}
.dd-item > i { width:18px; text-align:center; font-size:14px; color: var(--brand-dark); flex-shrink:0; }
.dd-item:hover { background: var(--surface-2); }
.dd-divider { height:1px; background: var(--border); margin:4px 0; }
.dd-item.danger { color: var(--danger); }
.dd-item.danger > i { color: var(--danger); }
.dd-item.danger:hover { background: var(--danger-bg); }

/* --- Content --- */
#content { flex:1; min-width:0; }
.content-body { padding: 20px 12px 28px calc(var(--shell-gap) - 0px); min-width:0; }
.page-head { margin-bottom:16px; padding: 0 4px; }
.eyebrow { font-size:10.5px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color: var(--brand); margin-bottom:4px; }
[data-theme="dark"] .eyebrow { color:#9c9da6; }
.page-title { font-family:'Sora',sans-serif; font-weight:800; font-size:22px; }

@keyframes fade-up { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:translateY(0);} }
.content-body > *:first-child { animation: fade-up 280ms ease both; }

#footer { padding: 12px 16px; border-top:1px solid var(--border); background: transparent; flex-shrink:0; }
#footer .copyright { font-size:12px; color: var(--text-muted); text-align:center; }

#overlay {
    display:none; position:fixed; inset:0; background: rgba(10,10,14,.42); z-index:299;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity:0; pointer-events:none;
}
#overlay.active { display:block; opacity:1; pointer-events:all; }

/* ══════════════════════════ 4. CMD+K — buscador de navegación ══════════════════════════ */
.cmdk-overlay {
    display:none; position:fixed; inset:0; z-index:10000; background: rgba(10,10,14,.45);
    backdrop-filter: blur(2px); align-items:flex-start; justify-content:center; padding-top: 9vh;
}
.cmdk-overlay.open { display:flex; }
.cmdk-box { width:100%; max-width:520px; margin:0 16px; background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow:hidden; }
.cmdk-input-row { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.cmdk-input-row i { color: var(--text-muted); }
.cmdk-input-row input { flex:1; border:none; outline:none; background:transparent; font-size:14.5px; color: var(--text); font-family:inherit; }
.cmdk-input-row kbd { font-size:10px; background: var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:2px 6px; color: var(--text-muted); }
.cmdk-list { max-height: min(50vh, 380px); overflow-y:auto; padding:8px; }
.cmdk-group-lbl { font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color: var(--text-muted); padding:8px 8px 4px; }
.cmdk-item {
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius: var(--r-md); font-size:13px;
    cursor:pointer; color: var(--text-2); text-decoration:none;
}
.cmdk-item:hover { background: var(--brand-light); color: var(--brand-dark); }
[data-theme="dark"] .cmdk-item:hover { color:#fff; }
.cmdk-item .ic3 { width:26px; height:26px; border-radius:8px; background: var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:12px; color: var(--brand); flex-shrink:0; }
[data-theme="dark"] .cmdk-item .ic3 { color:#c9cad3; }
.cmdk-item .mod-tag { margin-left:auto; font-size:10.5px; color: var(--text-muted); flex-shrink:0; }
.cmdk-empty { padding: 30px; text-align:center; font-size:12.5px; color: var(--text-muted); }

/* ══════════════════════════ 5. WHATSAPP FLOTANTE ══════════════════════════ */
.wa-float {
    position:fixed; right: calc(var(--shell-gap) + 8px); bottom: calc(var(--shell-gap) + 8px); z-index:9999;
    width:52px; height:52px; border-radius:50%; background: var(--brand); color:#fff !important;
    display:flex; align-items:center; justify-content:center; font-size:24px; text-decoration:none;
    box-shadow: 0 6px 24px var(--brand-glow); transition: transform var(--ease), box-shadow var(--ease), opacity .15s ease;
}
/* A propósito NO se apaga a gris en dark mode: este botón es una acción de marca
   (soporte), no chrome neutro del sistema — debe seguir reflejando el --brand
   de cada cliente (su color/identidad) en ambos temas. */
.wa-float:hover { transform: translateY(-3px) scale(1.05); color:#fff; }
.wa-float.wa-hidden { opacity:0; transform: scale(.7); pointer-events:none; }

/* ══════════════════════════ 6. COMPONENTES DE PÁGINA ══════════════════════════ */
.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); margin-bottom:18px; }
.card-header { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); background:transparent; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card-body { padding:18px !important; }
.card-title { font-family:'Sora',sans-serif; font-size:14px; font-weight:700; color: var(--text); margin:0; }

.form-control, .form-select {
    display:block; width:100%; height:40px; padding:0 12px; border:1.5px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); font-size:13.5px; font-family:'DM Sans',sans-serif; outline:none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow-hover); }
.form-label { display:block; font-size:12px; font-weight:600; color: var(--text-2); margin-bottom:5px; letter-spacing:.3px; }

.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 18px;
    border-radius: var(--r-md); font-size:13.5px; font-weight:600; font-family:'DM Sans',sans-serif; border:none;
    cursor:pointer; transition: all var(--ease); white-space:nowrap; text-decoration:none;
}
.btn-primary, .btn-brand { background: var(--brand); color:#fff; box-shadow: 0 2px 8px var(--brand-glow); }
.btn-primary:hover, .btn-brand:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 16px var(--brand-glow); color:#fff; }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-brand { background:#2a2a30; box-shadow:none; border:1px solid #38383f; }
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-brand:hover { background:#333339; }

.btn-success { background: var(--success); color:#fff; }
.btn-danger  { background: var(--danger);  color:#fff; }
.btn-warning { background: var(--warning); color:#fff; }
.btn-info    { background: var(--info);    color:#fff; }
.btn-dark    { background: #1A1D2E; color:#fff; }
.btn-secondary { background: #6B7280; color:#fff; }
.btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover { filter: brightness(1.08); transform: translateY(-1px); color:#fff; }
.btn-dark:hover { background:#2D3047; transform: translateY(-1px); color:#fff; }
.btn-outline-secondary { background: var(--surface); color: var(--text-2); border:1.5px solid var(--border); }
.btn-outline-secondary:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
.btn-sm { height:34px; padding:0 13px; font-size:12.5px; }
.btn-lg { height:46px; padding:0 24px; font-size:15px; }
.btn-icon { width:34px; height:34px; padding:0; border-radius: var(--r-md); }
.btn-premium { box-shadow: 0 4px 14px rgba(0,0,0,.10); }

.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius: var(--r-full); font-size:11.5px; font-weight:600; }
.badge-success, .badge.bg-success { background: var(--success-bg); color:#065F46; }
.badge-danger,  .badge.bg-danger  { background: var(--danger-bg);  color:#991B1B; }
.badge-warning, .badge.bg-warning { background: var(--warning-bg); color:#92400E; }
.badge-info,    .badge.bg-info    { background: var(--info-bg);    color:#1D4ED8; }
[data-theme="dark"] .badge-success { background:#064E3B; color:#6EE7B7; }
[data-theme="dark"] .badge-danger  { background:#7F1D1D; color:#FCA5A5; }

.alert { padding:12px 16px; border-radius: var(--r-md); font-size:13.5px; margin-bottom:16px; border:1px solid transparent; }
.alert-success { background: var(--success-bg); color:#065F46; border-color:#A7F3D0; }
.alert-danger  { background: var(--danger-bg);  color:#991B1B; border-color:#FECACA; }
.alert-warning { background: var(--warning-bg); color:#92400E; border-color:#FDE68A; }
.alert-info    { background: var(--info-bg);    color:#1D4ED8; border-color:#BFDBFE; }

.table { width:100%; border-collapse:collapse; font-size:13px; color: var(--text); min-width: 640px; }

/* Tablas responsive automáticas: cualquier <table class="table"> dentro de
   .card-body (sin importar si está envuelta en algún <div> intermedio, como
   pasa en GestionUsuario) activa scroll horizontal solo, sin tener que
   envolverla manualmente en cada página. min-width en .table evita que el
   texto se aplaste ilegible — en vez de eso, aparece la barra de scroll. */
.card-body:has(table.table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table thead th {
    padding:11px 14px; text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color: var(--text-header); background: var(--brand); border-bottom:1.5px solid var(--border); white-space:nowrap; user-select:none;
}
[data-theme="dark"] .table thead th { background: var(--surface-2); color: var(--text); border-bottom:1px solid var(--border); }
.table tbody tr { border-bottom:1px solid var(--border-lite); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody td { padding:11px 14px; vertical-align:middle; }
.table tbody tr.table-active td { background: var(--brand-light) !important; }
.table tbody tr.table-active td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
[data-theme="dark"] .table tbody tr.table-active td:first-child { box-shadow: inset 3px 0 0 #8a8b93; }

/* Botones de acción de fila (usados en tablas HTML simples) */
.gvCmdBtn, .btn2.gvCmdBtn {
    width:28px; height:28px; padding:0; margin-right:3px; border-radius: var(--r-md);
    display:inline-flex !important; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background .15s ease; text-decoration:none;
}
.gvCmdBtn:hover { transform: translateY(-2px) scale(1.06); }
.btn-modify.gvCmdBtn { background: rgba(var(--brand-rgb),.10); border:1px solid rgba(var(--brand-rgb),.25); color: var(--brand-dark); }
.btn-modify.gvCmdBtn:hover { background: rgba(var(--brand-rgb),.18); }
.btn-delete.gvCmdBtn { background: rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.22); color:#EF4444; }
.btn-delete.gvCmdBtn:hover { background: rgba(239,68,68,.18); }
.btn-view.gvCmdBtn { background: rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.20); color:#3B82F6; }
.btn-view.gvCmdBtn:hover { background: rgba(59,130,246,.18); }
.btn-success.gvCmdBtn { background: rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.25); color:#10B981; }
.btn-success.gvCmdBtn:hover { background: rgba(16,185,129,.18); }
.btn-move.gvCmdBtn { background: var(--surface-2); border:1px solid var(--border); color: var(--text-2); }

/* Botones grandes tipo pill (filtros ACTIVOS/INACTIVOS) */
.btn3 {
    display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 16px; border-radius: var(--r-full);
    font-size:13px; font-weight:700; font-family:'DM Sans',sans-serif; letter-spacing:.4px; border:none; cursor:pointer;
    transition: all var(--ease); text-decoration:none; margin-right:6px;
}
.btn3.btn-dark { background:#1A1D2E; color:#fff; box-shadow: 0 2px 8px rgba(26,29,46,.20); }
.btn3.btn-dark:hover { background:#2D3047; transform: translateY(-1px); }
.btn3.btn-move { background:#10B981; color:#fff; box-shadow: 0 2px 8px rgba(16,185,129,.25); }
.btn3.btn-move:hover { background:#0ea272; transform: translateY(-1px); }
[data-theme="dark"] .btn3.btn-dark { background:#232328; border:1px solid #38383f; box-shadow:none; }
[data-theme="dark"] .btn3.btn-move { background:#1c3d33; border:1px solid #2e5a4b; box-shadow:none; }

.clearfix + hr { margin:10px 0; border:none; border-top:1px solid var(--border); }

/* Modal genérico */
.gxModal {
    display:none; position:fixed; inset:0; background: rgba(10,10,14,.45); z-index:200000;
    align-items:center; justify-content:center; padding:16px; overflow-y:auto;
}
.gxModal.gxModal--open { display:flex; }
.gxModal__dialog {
    width:100%; max-width:560px;
    /* Nunca más alto que la pantalla visible: antes un formulario largo (ej.
       Nuevo/Editar en GestionUsuario) se salía del contenedor position:fixed
       sin ninguna forma de llegar a los campos de abajo, ni con scroll del
       body ni del modal. Ahora el diálogo entero tiene un tope de altura y
       SOLO el body hace scroll — header y footer quedan siempre visibles. */
    max-height: calc(100vh - 32px);
    display: flex;
}
.gxModal__content {
    background: var(--surface); border-radius: var(--r-xl); overflow:hidden; box-shadow: var(--shadow-lg);
    position:relative; display:flex; flex-direction:column; width:100%; min-height:0;
}
.gxModal__content > button[aria-label="Cerrar"] {
    position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius: var(--r-md); background: var(--surface-2);
    color: var(--text-muted); display:flex; align-items:center; justify-content:center; z-index:2;
}
.gxModal__content > button[aria-label="Cerrar"]:hover { background: var(--border-lite); color: var(--text); }
.gxModal__header { padding:20px 50px 6px 20px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; flex-shrink:0; }
.gxModal__title { margin:0; font-family:'Sora',sans-serif; font-size:16px; font-weight:800; color: var(--text); }
.gxModal__body {
    padding:14px 20px 6px; color: var(--text-2); font-size:13.5px;
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
}
.gxModal__footer { padding:16px 20px 20px; display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

@media (max-width:1024px) {
    /* En mobile el bottom nav flotante ocupa ~78px de zócalo — el modal debe
       dejar ese espacio libre para que el footer (ej. botón "Grabar") nunca
       quede tapado detrás de él. */
    .gxModal { padding: 16px 12px calc(78px + 12px); align-items:flex-start; padding-top: 20px; }
    .gxModal__dialog { max-height: calc(100vh - 78px - 32px); }
}

/* Hero band — usado en Login/CambiarClave/PerfilUsuario/Error (páginas con encabezado de marca) */
.hero-band { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, black)); color:#fff; }
[data-theme="dark"] .hero-band { background: linear-gradient(135deg, #202024, #0d0d10); }

.soft-hr { border:none; height:1px; margin:20px 0; background: var(--border); }

/* FAQ shell (usado en Principal/PerfilUsuario) */
.faq-shell { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); padding:20px; box-shadow: var(--shadow-xs); }
.faq-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.faq-ic { width:40px; height:40px; border-radius: var(--r-md); display:inline-flex; align-items:center; justify-content:center; background: var(--brand-light); border:1px solid rgba(var(--brand-rgb),.18); color: var(--brand); flex-shrink:0; }
[data-theme="dark"] .faq-ic { color: var(--brand-dark); }
.faq-title { margin:0; font-weight:700; font-size:14px; color: var(--text); }
.faq-subtitle { margin:3px 0 0; font-size:12.5px; 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; gap:12px; } }
.faq-acc details { border-radius: var(--r-md); border:1px solid var(--border); background: var(--surface); overflow:hidden; transition: border-color .15s ease; }
.faq-acc details:hover { border-color: rgba(var(--brand-rgb),.30); }
.faq-acc details[open] { border-color: rgba(var(--brand-rgb),.45); }
.faq-acc summary { cursor:pointer; list-style:none; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:700; font-size:13px; color: var(--text); }
.faq-acc summary::-webkit-details-marker { display:none; }
.faq-acc details[open] summary { background: var(--brand-light); color: var(--brand-dark); }
.faq-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius: var(--r-full); background: var(--surface-2); border:1px solid var(--border); font-size:11px; font-weight:700; color: var(--text-2); white-space:nowrap; flex-shrink:0; }
.faq-acc details[open] .faq-chip { background: var(--brand-light); border-color: rgba(var(--brand-rgb),.25); color: var(--brand-dark); }
.faq-body { padding:14px 16px; font-size:13px; line-height:1.55; color: var(--text-2); border-top:1px solid var(--border-lite); }
.faq-steps { margin:8px 0 0 18px; color: var(--text-2); }
.faq-steps li { margin-bottom:4px; }
.faq-note { margin-top:10px; padding:10px 14px; border-radius: var(--r-md); background: var(--brand-light); border:1px solid rgba(var(--brand-rgb),.18); color: var(--brand-dark); font-size:12.5px; }

/* ══════════════════════════ 7. ACCESOS DIRECTOS PREMIUM (Principal) ══════════════════════════ */
.qa-shell {
    border-radius: var(--r-xl); padding: 22px 22px 24px; position:relative; overflow:hidden;
    background: radial-gradient(circle at 15% 20%, rgba(var(--brand-rgb),.10), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(var(--brand-rgb),.08), transparent 40%), var(--surface);
    border:1px solid var(--border); box-shadow: var(--shadow-md);
}
[data-theme="dark"] .qa-shell {
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.045), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(255,255,255,.035), transparent 40%), var(--surface);
}
.qa-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.qa-head .ic-badge { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background: var(--brand); color:#fff; font-size:16px; box-shadow: 0 6px 16px var(--brand-glow); }
[data-theme="dark"] .qa-head .ic-badge { background:#232328; box-shadow:none; border:1px solid #38383f; }
.qa-head h3 { font-family:'Sora',sans-serif; font-weight:800; font-size:15.5px; }
.qa-head p { font-size:11.5px; color: var(--text-muted); }
.qa-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(148px,1fr)); gap:14px; }
.qa-card {
    position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 12px 16px;
    border-radius: var(--r-lg); text-align:center; background: var(--surface); border:1px solid var(--border);
    box-shadow: var(--shadow-xs); overflow:hidden; text-decoration:none; color: var(--text);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease;
    opacity:0; animation: qaIn .5s ease forwards;
}
.qa-card:nth-child(1){animation-delay:.02s} .qa-card:nth-child(2){animation-delay:.08s}
.qa-card:nth-child(3){animation-delay:.14s} .qa-card:nth-child(4){animation-delay:.20s}
.qa-card:nth-child(5){animation-delay:.26s} .qa-card:nth-child(6){animation-delay:.32s}
.qa-card:nth-child(n+7){animation-delay:.36s}
@keyframes qaIn { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform:translateY(0);} }
.qa-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background: linear-gradient(90deg, var(--brand), rgba(var(--brand-rgb),.3)); opacity:0; transition: opacity .2s ease; }
[data-theme="dark"] .qa-card::before { background: linear-gradient(90deg,#8a8b93,#3a3a41); }
.qa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--brand-rgb),.12); border-color: rgba(var(--brand-rgb),.30); }
[data-theme="dark"] .qa-card:hover { box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,.08); border-color:#3a3a41; }
.qa-card:hover::before { opacity:1; }
.qa-ic-wrap { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background: linear-gradient(145deg, rgba(var(--brand-rgb),.14), rgba(var(--brand-rgb),.05)); color: var(--brand); font-size:21px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: transform var(--ease); }
[data-theme="dark"] .qa-ic-wrap { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color:#e2e3e8; box-shadow:none; }
.qa-card:hover .qa-ic-wrap { transform: scale(1.08) rotate(-4deg); }
.qa-label { font-size:12.2px; font-weight:700; line-height:1.25; }

/* Módulos principales (Principal.razor) */
.lk-home-card { background:transparent !important; border:none !important; box-shadow:none !important; }
.lk-home-card .row.g-3 { align-items:stretch; }
.lk-module-link { display:flex; flex-direction:column; height:100%; width:100%; text-decoration:none; }
.lk-module-card {
    position:relative; overflow:hidden; flex:1; min-height:150px; padding:18px 18px 16px; border-radius: var(--r-lg);
    background: var(--surface); border:1px solid var(--border); box-shadow: var(--shadow-xs); display:flex;
    flex-direction:column; gap:6px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lk-module-link:hover .lk-module-card { transform: translateY(-3px); border-color: rgba(var(--brand-rgb),.35); box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--brand-rgb),.10); }
.lk-module-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--brand), rgba(var(--brand-rgb),.6)); opacity:0; transition: opacity .18s ease; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.lk-module-link:hover .lk-module-card::before { opacity:1; }
.lk-module-ico { width:40px; height:40px; border-radius: var(--r-md); display:inline-flex; align-items:center; justify-content:center; background: rgba(var(--brand-rgb),.10); border:1px solid rgba(var(--brand-rgb),.18); color: var(--brand); margin-bottom:4px; flex-shrink:0; transition: background .18s ease, border-color .18s ease; }
.lk-module-ico i { font-size:18px; }
.lk-module-link:hover .lk-module-ico { background: rgba(var(--brand-rgb),.18); border-color: rgba(var(--brand-rgb),.30); }
.lk-module-title { font-weight:700; font-size:13.5px; color: var(--text); margin:0; }
.lk-module-sub { font-size:12px; line-height:1.4; color: var(--text-muted); flex:1; margin:0; }
.lk-module-cta { margin-top:auto; display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:5px 12px; border-radius: var(--r-full); background: rgba(var(--brand-rgb),.10); border:1px solid rgba(var(--brand-rgb),.22); color: var(--brand); font-weight:700; font-size:12px; transition: background .15s ease, border-color .15s ease; }
.lk-module-link:hover .lk-module-cta { background: rgba(var(--brand-rgb),.18); border-color: rgba(var(--brand-rgb),.35); }

/* ══════════════════════════ 8. GESTIÓN PERMISOS — selección evidente ══════════════════════════ */
.perm-grid { display:grid; grid-template-columns: 1fr 1.3fr 1fr; gap:16px; }
@media (max-width:992px) { .perm-grid { grid-template-columns:1fr; } }
.perm-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow:hidden; }
.perm-card-head { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--border); font-family:'Sora',sans-serif; font-weight:700; font-size:13px; }
.perm-card-head .ic { width:26px; height:26px; border-radius:8px; background: var(--brand-light); color: var(--brand); display:flex; align-items:center; justify-content:center; font-size:13px; }
[data-theme="dark"] .perm-card-head .ic { color: var(--brand-dark); }
.perm-card-body { padding:14px 16px; max-height: 420px; overflow-y:auto; }

.perm-mod-item { padding:10px 12px; border-radius: var(--r-md); font-size:13px; cursor:pointer; margin-bottom:4px; transition: background var(--ease), color var(--ease); }
.perm-mod-item:hover { background: var(--surface-2); }
.perm-mod-item.sel { background: var(--brand-light); color: var(--brand-dark); font-weight:700; box-shadow: inset 3px 0 0 var(--brand); }
[data-theme="dark"] .perm-mod-item.sel { color:#fff; box-shadow: inset 3px 0 0 #8a8b93; }

.perm-menu-row {
    display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius: var(--r-md); font-size:12.8px;
    cursor:pointer; margin-bottom:4px; border:1.5px solid transparent; transition: all var(--ease); position:relative;
}
.perm-menu-row:hover { background: var(--surface-2); }
.perm-menu-row .name { font-weight:600; }
.perm-menu-row .name::before { content:''; }
.perm-menu-row .link { color: var(--text-muted); font-size:11.5px; margin-left:auto; }
.perm-menu-row.granted::after { content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background: var(--success); }
.perm-menu-row.selected {
    background: var(--brand-light); border-color: rgba(var(--brand-rgb),.25);
    box-shadow: 0 4px 14px var(--brand-glow), inset 3px 0 0 var(--brand); font-weight:700;
}
[data-theme="dark"] .perm-menu-row.selected { border-color: rgba(255,255,255,.16); box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 3px 0 0 #dcdde2; }
.perm-menu-row.selected .name::before {
    content:'\f00c'; font-family:'Font Awesome 6 Pro','Font Awesome 6 Free'; font-weight:900; font-size:10px; color: var(--brand); margin-right:8px;
}
[data-theme="dark"] .perm-menu-row.selected .name::before { color: var(--brand-dark); }

.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:999px; background: var(--surface-2); border:1.5px solid var(--border); font-size:12px; font-weight:600; transition: all var(--ease); cursor:pointer; }
.perm-chip .dot { width:8px; height:8px; border-radius:50%; background: var(--border); }
.perm-chip.on { background: var(--success-bg); border-color: rgba(16,185,129,.35); color:#0a7a54; }
[data-theme="dark"] .perm-chip.on { color:#6EE7B7; }
.perm-chip.on .dot { background: var(--success); }

.perm-note { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color: var(--text-muted); margin-top:14px; }

/* ══════════════════════════ 9. CATÁLOGO DE ÍCONOS (GestionMenu) ══════════════════════════ */
.icon-search { display:flex; align-items:center; gap:8px; background: var(--surface-2); border:1.5px solid var(--border); border-radius:999px; padding:9px 14px; margin-bottom:14px; font-size:13px; }
.icon-search input { flex:1; border:none; outline:none; background:transparent; font-size:13px; color: var(--text); }
.icon-cat-lbl { font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color: var(--text-muted); margin:16px 0 8px; }
.icon-cat-lbl:first-child { margin-top:0; }
.icon-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(76px,1fr)); gap:8px; }
.icon-cell { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius: var(--r-md); border:1.5px solid var(--border); background: var(--surface-2); transition: all var(--ease); cursor:pointer; }
.icon-cell:hover { border-color: rgba(var(--brand-rgb),.35); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.icon-cell i { font-size:19px; color: var(--brand); }
[data-theme="dark"] .icon-cell i { color: var(--brand-dark); }
.icon-cell span { font-size:9.5px; text-align:center; color: var(--text-muted); line-height:1.2; }
.icon-cell.picked { border-color: var(--brand); background: var(--brand-light); }
[data-theme="dark"] .icon-cell.picked { border-color:#dcdde2; }

/* ══════════════════════════ 10. MOBILE — bottom nav flotante + drawer ══════════════════════════ */
#bottomNav { display:none; }
/* Fix: antes esta regla solo existía DENTRO del media query de abajo, así que
   en desktop .bn-pop no tenía ningún display:none — si la clase .open quedaba
   pegada desde una navegación previa en móvil (Blazor intercepta los <a> como
   SPA y no siempre remonta MainLayout), el panel se veía sin estilo alguno
   flotando sobre el contenido de escritorio. */
.bn-pop { display:none; }

@media (max-width: 1024px) {
    /* Panel "Módulos" como hoja inferior (bottom sheet).
       Se esconde con display:none — NO con transform. Con transform el
       panel depende de calcular bien su propia altura y, si el cálculo
       falla, el borde superior se asoma encima del #bottomNav. Con
       display:none el elemento no se renderiza y no puede asomarse. */
    #sidebar {
        display: none;
        top: auto; left: 0; right: 0; bottom: 78px; /* zócalo del #bottomNav: bottom:14px + height:64px */
        width: 100%; max-height: 72vh;
        border-radius: 18px 18px 0 0;
        z-index: 10050;
        overflow-y: auto;
        padding-top: 6px;
        transform: none;
    }
    #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: translateY(0); opacity:1; } }

    #overlay.active { z-index: 10040; } /* por debajo de la hoja, por encima del bottomNav */

    .sheet-handle {
        display: block; width: 40px; height: 4px; margin: 6px auto 8px;
        border-radius: 4px; background: var(--border);
    }

    /* El logo (.logo-text img) no tiene ancho fijo en px: hereda
       `max-width:100%` de la regla global de <img>. En la hoja móvil el
       contenedor mide todo el ancho de pantalla, así que hay que
       limitarlo explícitamente o se infla. */
    .logo-text img { max-width: 150px; }
    .logo { padding: 10px 16px; }
    #overlay { display:block; }
    #main { margin-left:0 !important; }
    #wrapper.sb-collapsed #main { margin-left:0 !important; }
    #topbar { margin: var(--shell-gap); }
    .tb-search { display:none; }

    /* Misma nota que #topbar: los .bn-pop viven fuera de #bottomNav a nivel raíz,
       por eso este contenedor sí puede llevar backdrop-filter sin romper su posición. */
    #bottomNav {
        display:flex; align-items:center; justify-content:space-around; position:fixed; left:12px; right:12px; bottom:14px;
        height:64px; z-index:9998; padding:0 6px; border-radius:22px;
        background: var(--sidebar-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        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 8px; border-radius:12px; font-size:9.5px; font-weight:700; color: var(--text-muted); transition: all var(--ease); background:none; border:none; }
    .bn-btn i { font-size:16px; }
    .bn-btn.active-tab { color: var(--brand-dark); background: var(--brand-light); }
    [data-theme="dark"] .bn-btn.active-tab { color:#fff; }
    .bn-logo {
        width:48px; height:48px; border-radius:50%; margin-top:-22px; flex-shrink:0; overflow:hidden;
        background: var(--surface); border:3px solid var(--surface);
        box-shadow: 0 3px 10px rgba(0,0,0,.20);
        display:flex; align-items:center; justify-content:center;
    }
    [data-theme="dark"] .bn-logo { background:#232328; border-color:#232328; box-shadow:none; }
    .bn-logo img { width:100%; height:100%; object-fit:cover; display:block; }

    .bn-pop {
        display:none; position:fixed; min-width:190px; max-width: min(240px, calc(100vw - 24px));
        background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
        padding:6px; z-index:9999; opacity:0; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease;
    }
    .bn-pop.open { display:block; opacity:1; transform: translateY(0); }
    .bn-pop-item { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:10px; font-size:12.5px; font-weight:600; color: var(--text-2); text-decoration:none; }
    .bn-pop-item:hover { background: var(--surface-2); }
    .bn-pop-item.danger { color: var(--danger); }

    .wa-float { bottom: 92px; } /* despeja el #bottomNav v2 (bottom:14px + height:64px) */
    .wa-float.wa-hidden { opacity:0; transform: scale(.7); pointer-events:none; }
    .content-body { padding: 14px 14px 110px; }
}

@media (max-width:1024px) and (min-width:0) {
    #wrapper { padding-bottom: 0; }
}

@media (min-width:1025px) {
    .sheet-handle { display: none; }
}

/* ══════════════════════════ 11. SEARCHABLE SELECT — select con buscador ══════════════════════════
   Reemplazo de <select> nativo para listas largas (íconos, perfiles, menús
   padre, etc.). Ver /Shared/SearchableSelect.razor. */
.ssel { position: relative; }
.ssel-trigger {
    display:flex; align-items:center; gap:8px; cursor:pointer; text-align:left;
    background: var(--surface);
}
.ssel-trigger .ssel-ico {
    width:26px; height:26px; border-radius:8px; background: var(--brand-light); color: var(--brand);
    display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
[data-theme="dark"] .ssel-trigger .ssel-ico { color: var(--brand-dark); }
.ssel-trigger .ssel-trigger-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text); }
.ssel-trigger .ssel-trigger-text.placeholder { color: var(--text-muted); }
.ssel-trigger > i.fa-chevron-down, .ssel-trigger > i.fa-solid.fa-chevron-down { font-size:11px; color: var(--text-muted); flex-shrink:0; transition: transform var(--ease); }
.ssel-trigger.open > i.fa-solid.fa-chevron-down { transform: rotate(180deg); }

.ssel-backdrop { position: fixed; inset: 0; z-index: 999; background: transparent; }

.ssel-panel {
    position: absolute; top: calc(100% + 6px); left:0; right:0; z-index: 1000;
    background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); overflow:hidden;
}
.ssel-search { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.ssel-search i { color: var(--text-muted); font-size:12.5px; }
.ssel-search input { flex:1; border:none; outline:none; background:transparent; font-size:13px; color: var(--text); font-family:inherit; }

.ssel-list { max-height: 260px; overflow-y:auto; padding:6px; }
.ssel-item {
    display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius: var(--r-md); font-size:13px;
    cursor:pointer; color: var(--text-2); transition: background var(--ease), color var(--ease);
}
.ssel-item:hover { background: var(--surface-2); }
.ssel-item.picked { background: var(--brand-light); color: var(--brand-dark); font-weight:700; }
[data-theme="dark"] .ssel-item.picked { color:#fff; }
.ssel-item .ssel-ico { width:24px; height:24px; border-radius:7px; background: var(--surface-2); color: var(--brand); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
[data-theme="dark"] .ssel-item .ssel-ico { color: var(--brand-dark); }
.ssel-empty { padding:22px; text-align:center; font-size:12.5px; color: var(--text-muted); }

/* ══════════════════════════ 12. LOADING OVERLAY GLOBAL ══════════════════════════ */
.loading-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(10,10,14,.35); backdrop-filter: blur(1.5px);
    display: flex; align-items: center; justify-content: center;
}
.loading-card {
    display: flex; align-items: center; gap: 14px; padding: 18px 26px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); animation: fade-up 180ms ease both;
}
.loading-text { font-size: 13.5px; font-weight: 600; color: var(--text); }

/* ══════════════════════════ 13. PAGINADOR — Shared/PaginadorControl.razor ══════════════════════════
   A propósito vive acá y NO como .razor.css scoped: es un componente que se
   reusa en cualquier tabla del sistema, así que sus estilos deben ser parte
   del sistema de diseño global (usa las mismas variables que todo lo demás),
   no un archivo aislado que hay que mantener sincronizado por separado. */
.pager {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 10px; margin-top: 14px; padding: 10px 4px;
}
.pager-info { font-size: 12px; color: var(--text-muted); }
.pager-controls { display: flex; align-items: center; gap: 10px; }
.pager-page { font-size: 13px; font-weight: 600; color: var(--text); min-width: 110px; text-align: center; }
.pager-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text);
    cursor: pointer; transition: background .12s ease, opacity .12s ease;
}
.pager-btn:hover:not(:disabled) { background: var(--surface-2); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 768px) {
    .pager { justify-content: center; text-align: center; }
}

/* ══════════════════════════ 14. ESTADO VACÍO GENÉRICO ══════════════════════════
   Para cuando una tabla/lista filtrada no tiene resultados. Reemplaza mostrar
   solo el encabezado de la tabla sin filas — más claro para el usuario. */
.empty-state {
    padding: 46px 20px; text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 8px; color: var(--text-muted);
}
.empty-state i { font-size: 2.2rem; opacity: .7; }
.empty-state strong { color: var(--text); font-size: 14px; }
.empty-state span { font-size: 12.5px; }

/* ══════════════════════════ 15. FILTER STAT CARDS — Activos/Inactivos con contador ══════════════════════════
   Shared/FilterStatCards.razor. Reemplaza el toggle plano de pastillas
   por tarjetas con ícono + conteo, más informativas de un vistazo. */
.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; border-radius: var(--r-lg);
    border: 1px solid var(--border); background: var(--surface); text-align: left;
    transition: all var(--ease); cursor: pointer;
}
.filter-stat-card:hover { border-color: rgba(var(--brand-rgb), .30); }
.filter-stat-card.selected { border-color: var(--brand); box-shadow: 0 4px 14px var(--brand-glow); }
[data-theme="dark"] .filter-stat-card.selected { border-color: #8a8b93; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.fsc-icon {
    width: 42px; height: 42px; border-radius: var(--r-md); display: flex; align-items: center;
    justify-content: center; font-size: 18px; flex-shrink: 0;
}
.filter-stat-card.activos .fsc-icon { background: var(--success-bg); color: #0a7a54; }
.filter-stat-card.inactivos .fsc-icon { background: var(--danger-bg); color: #b91c1c; }
[data-theme="dark"] .filter-stat-card.activos .fsc-icon { color: #6EE7B7; }
[data-theme="dark"] .filter-stat-card.inactivos .fsc-icon { color: #FCA5A5; }
.fsc-text { display: flex; flex-direction: column; }
.fsc-text small { color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.fsc-text strong { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.2; }

@media (max-width: 576px) {
    .filter-stats { grid-template-columns: 1fr; max-width: 100%; }
}
/* ══════════════════════════ 16. COMPATIBILIDAD CORE — menú horizontal + accesibilidad ══════════════════════════ */

/* Los elementos interactivos de permisos e iconos ahora son <button>, sin perder el look premium. */
.perm-mod-item,
.perm-menu-row,
.perm-chip,
.icon-cell {
    font-family: inherit;
}
.perm-mod-item,
.perm-menu-row {
    width: 100%;
    border: 0;
    text-align: left;
    background: transparent;
}
.perm-menu-row { justify-content: flex-start; }
.perm-chip:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.perm-readonly {
    display:flex; align-items:center; gap:8px; margin:2px 0 10px; padding:10px 12px;
    border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface-2);
    color:var(--text-muted); font-size:12px; line-height:1.4;
}
.icon-cell { width:100%; }
.perm-mod-item:focus-visible,
.perm-menu-row:focus-visible,
.perm-chip:focus-visible,
.icon-cell:focus-visible,
.ssel-item:focus-visible {
    outline: 3px solid var(--brand-glow-hover);
    outline-offset: 2px;
}
.ssel-item {
    width:100%; border:0; background:transparent; text-align:left;
}

/* Desktop: la misma estructura del sidebar se reutiliza como barra horizontal.
   La command-bar queda ARRIBA y la navegación horizontal DEBAJO.
   No se duplica menú ni se cambia la BD; sólo cambia el layout CSS. */
@media (min-width: 1025px) {
    html[data-menu-layout="horizontal"] #wrapper {
        padding-top: 0;
    }

    /* La navegación horizontal es la segunda franja del shell. */
    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: 62px;
        flex-direction: row;
        align-items: center;
        overflow: visible;
        border-radius: var(--r-lg);
        padding: 0 8px;
        z-index: 300;
    }

    html[data-menu-layout="horizontal"] #sidebar .logo {
        width: 210px;
        height: 100%;
        padding: 7px 12px;
        border-bottom: 0;
        border-right: 1px solid var(--border);
        flex-shrink: 0;
    }

    html[data-menu-layout="horizontal"] #sidebar .logo-text {
        display:flex !important;
        opacity:1 !important;
        max-width:170px;
    }

    html[data-menu-layout="horizontal"] #sidebar .logo-text img {
        max-height: 26px;
        width: auto;
        object-fit: contain;
        object-position: left center;
    }

    html[data-menu-layout="horizontal"] #sidebar .logo-mark {
        display:none !important;
    }

    html[data-menu-layout="horizontal"] #sidebar .nav {
        flex: 1;
        height: 100%;
        overflow: visible;
        padding: 0 8px;
    }

    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 {
        position: relative;
        margin: 0;
        flex: 0 0 auto;
    }

    html[data-menu-layout="horizontal"] #brandMenu > li > a {
        min-height: 40px;
        padding: 5px 10px;
        gap: 7px;
    }

    html[data-menu-layout="horizontal"] #brandMenu > li > a > i.nav-ico,
    html[data-menu-layout="horizontal"] #brandMenu > li > a > i:first-child {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px;
    }

    /* En horizontal el submenú sólo abre por clic (.mm-show).
       Se elimina :hover/:focus-within porque dejaban el panel pegado. */
    html[data-menu-layout="horizontal"] #brandMenu > li > ul,
    html[data-menu-layout="horizontal"] #sidebar.collapsed #brandMenu > li > ul {
        display: none !important;
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        right: auto;
        min-width: 230px;
        max-width: 300px;
        max-height: min(70vh, 520px);
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        opacity: 1;
        pointer-events: auto;
        transform: none;
        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;
    }

    html[data-menu-layout="horizontal"] .sidebar-footer {
        height: 100%;
        padding: 0 4px 0 8px;
        border-top: 0;
        border-left: 1px solid var(--border);
        display:flex;
        align-items:center;
        flex-shrink:0;
    }

    html[data-menu-layout="horizontal"] .sidebar-footer .footer-btn {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
    }

    html[data-menu-layout="horizontal"] .sidebar-footer .fb-label {
        display:none;
    }

    html[data-menu-layout="horizontal"] #main,
    html[data-menu-layout="horizontal"] #wrapper.sb-collapsed #main {
        margin-left: 0;
    }

    /* La barra principal permanece arriba. */
    html[data-menu-layout="horizontal"] #topbar {
        top: var(--shell-gap);
        margin: var(--shell-gap);
        z-index: 310;
    }

    /* Reserva el espacio de la navegación fija que está debajo del topbar. */
    html[data-menu-layout="horizontal"] #content {
        padding-top: 72px;
    }

    html[data-menu-layout="horizontal"] #wrapper.hm-collapsed #sidebar {
        display:none;
    }

    html[data-menu-layout="horizontal"] #wrapper.hm-collapsed #content {
        padding-top: 0;
    }

    html[data-menu-layout="horizontal"] #wrapper.hm-collapsed #topbar {
        top: var(--shell-gap);
    }
}

/* Acceso restringido: distingue falta de permiso de cierre de sesión. */
.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); box-shadow:var(--shadow-md);
}
.access-denied-icon {
    width:58px; height:58px; flex:0 0 58px; display:flex; align-items:center; justify-content:center;
    border-radius:18px; background:var(--warning-bg); color:var(--warning); font-size:24px;
}
.access-denied-copy h1 { margin:0 0 8px; font-family:'Sora',sans-serif; font-size:24px; 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; }
@media (max-width:640px) {
    .access-denied-shell { margin:20px 0; padding:20px; flex-direction:column; }
}

/* ══════════════════════════ DARK MODE PREMIUM v3 ══════════════════════════
   Mejora de jerarquía visual y contraste sin cambiar markup ni comportamiento.
   Se aplica a vertical/horizontal y conserva los mismos tokens en tema claro. */
[data-theme="dark"] {
    --body-bg: #0D1016;
    --sidebar-bg: rgba(18, 22, 30, .97);
    --surface: #171C25;
    --surface-2: #202632;
    --border: #303847;
    --border-lite: #252C38;

    --text: #F5F7FB;
    --text-2: #C8CFDB;
    --text-muted: #929CAD;
    --text-header: #F7F8FC;

    /* El morado de marca se aclara sólo para Dark Mode: la BD y el tema claro
       permanecen intactos. Esto evita que acciones principales se vean grises. */
    --brand: #8379DB;
    --brand-rgb: 131, 121, 219;
    --brand-dark: #D8D3FF;
    --brand-light: rgba(131,121,219,.15);
    --brand-glow: rgba(131,121,219,.22);
    --brand-glow-hover: rgba(131,121,219,.16);

    --success-bg: rgba(16,185,129,.14);
    --danger-bg: rgba(239,68,68,.14);
    --warning-bg: rgba(245,158,11,.14);
    --info-bg: rgba(59,130,246,.14);

    --shadow-xs: 0 1px 2px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.015);
    --shadow-sm: 0 8px 22px rgba(0,0,0,.26);
    --shadow-md: 0 16px 42px rgba(0,0,0,.34);
    --shadow-lg: 0 26px 72px rgba(0,0,0,.48);
}

[data-theme="dark"] body {
    background-color: var(--body-bg) !important;
    background-image:
        radial-gradient(circle at 9% 3%, rgba(var(--brand-rgb),.08), transparent 30%),
        radial-gradient(circle at 92% 94%, rgba(59,130,246,.035), transparent 28%) !important;
}

/* Shell: diferenciar claramente fondo, sidebar, topbar y contenido. */
[data-theme="dark"] #sidebar {
    background: linear-gradient(180deg, rgba(23,28,38,.985), rgba(17,21,29,.985));
    border-color: #303847;
    box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
}
[data-theme="dark"] #topbar {
    background: rgba(23,28,37,.94);
    border-color: #303847;
    box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
}
[data-theme="dark"] .tb-search,
[data-theme="dark"] .user-btn {
    background: #1D232E;
    border-color: #303847;
}
[data-theme="dark"] .tb-search:hover,
[data-theme="dark"] .user-btn:hover,
[data-theme="dark"] .user-btn.open {
    background: #252C38;
    border-color: rgba(var(--brand-rgb),.48);
}
[data-theme="dark"] .tb-search kbd {
    background: #151A22;
    border-color: #333B4A;
    color: #AAB2C0;
}
[data-theme="dark"] .eyebrow { color: #AFA8F0; }
[data-theme="dark"] .page-title { color: #FAFBFD; letter-spacing:-.2px; }

/* Logo legible sobre dark sin modificar la imagen original. */
[data-theme="dark"] .logo-text img {
    background: rgba(255,255,255,.93);
    border-radius: 9px;
    padding: 4px 7px;
    box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 5px 14px rgba(0,0,0,.18);
}
[data-theme="dark"] .logo-text small { color:#98A2B3; }
[data-theme="dark"] .logo-mark {
    background: rgba(var(--brand-rgb),.17);
    border-color: rgba(var(--brand-rgb),.30);
    color: var(--brand-dark);
}

/* Navegación: recuperar la identidad visual en vez de gris sobre gris. */
[data-theme="dark"] #brandMenu > li > a > i.nav-ico,
[data-theme="dark"] #brandMenu > li > a > i:first-child {
    background: rgba(var(--brand-rgb),.12) !important;
    color: #C9C3FF !important;
}
[data-theme="dark"] #brandMenu > li > a:hover {
    background: rgba(255,255,255,.045);
    color:#F6F7FB;
}
[data-theme="dark"] #brandMenu > li.mm-active > a,
[data-theme="dark"] #brandMenu > li > a.mm-active {
    background: rgba(var(--brand-rgb),.16) !important;
    color:#F8F7FF !important;
    box-shadow: inset 3px 0 0 #9187E7 !important;
}
[data-theme="dark"] #brandMenu > li.mm-active > a > i.nav-ico,
[data-theme="dark"] #brandMenu > li > a.mm-active > i.nav-ico {
    background: rgba(var(--brand-rgb),.22) !important;
    color:#EEEAFE !important;
}
[data-theme="dark"] #brandMenu > li > ul { border-left-color:#343C4A; }
[data-theme="dark"] #brandMenu > li > ul > li > a { color:#B9C1CE; }
[data-theme="dark"] #brandMenu > li > ul > li > a:hover { background: rgba(255,255,255,.045); color:#F4F6FA; }
[data-theme="dark"] #brandMenu > li > ul > li > a:hover::before,
[data-theme="dark"] #brandMenu > li > ul > li.mm-active > a::before {
    background:#9B92EA; border-color:#9B92EA;
}
[data-theme="dark"] #brandMenu > li > ul > li.mm-active > a {
    background: rgba(var(--brand-rgb),.13);
    color:#F7F5FF;
}

/* Tarjetas y formularios: tres niveles visibles, no bloques negros iguales. */
[data-theme="dark"] .card,
[data-theme="dark"] .perm-card {
    background: linear-gradient(180deg, #181D26 0%, #161B23 100%);
    border-color:#303847;
    box-shadow: 0 10px 28px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.018);
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .perm-card-head {
    background: rgba(255,255,255,.018);
    border-bottom-color:#303847;
}
[data-theme="dark"] .perm-card-head .ic {
    background: rgba(var(--brand-rgb),.16);
    color:#D8D3FF;
    border:1px solid rgba(var(--brand-rgb),.18);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background:#141922;
    border-color:#303847;
    color:#F3F5F9;
}
[data-theme="dark"] .form-control::placeholder { color:#7F899A; opacity:1; }
[data-theme="dark"] .form-control:hover,
[data-theme="dark"] .form-select:hover { border-color:#3B4555; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background:#151A23;
    border-color:#8F86E4;
    box-shadow:0 0 0 3px rgba(var(--brand-rgb),.16);
}

/* Gestión de permisos: selección, estado concedido y links con contraste real. */
[data-theme="dark"] .perm-mod-item,
[data-theme="dark"] .perm-menu-row { color:#C9D0DB; }
[data-theme="dark"] .perm-mod-item:hover,
[data-theme="dark"] .perm-menu-row:hover { background:#202632; color:#F6F7FB; }
[data-theme="dark"] .perm-mod-item.sel {
    background: rgba(var(--brand-rgb),.18);
    color:#FAF9FF;
    box-shadow: inset 3px 0 0 #938AE8;
}
[data-theme="dark"] .perm-menu-row.selected {
    background: linear-gradient(90deg, rgba(var(--brand-rgb),.18), rgba(var(--brand-rgb),.08));
    border-color: rgba(var(--brand-rgb),.34);
    box-shadow: inset 3px 0 0 #A39AEE, 0 6px 16px rgba(0,0,0,.18);
}
[data-theme="dark"] .perm-menu-row .link { color:#929CAD; }
[data-theme="dark"] .perm-menu-row:hover .link,
[data-theme="dark"] .perm-menu-row.selected .link { color:#B7C0CE; }
[data-theme="dark"] .perm-menu-row.granted::after { background:#21C997; box-shadow:0 0 10px rgba(33,201,151,.28); }
[data-theme="dark"] .perm-chip {
    background:#1D2430;
    border-color:#354050;
    color:#BFC7D3;
}
[data-theme="dark"] .perm-chip:hover:not(:disabled) { background:#242C39; border-color:#455164; }
[data-theme="dark"] .perm-chip.on {
    background:rgba(16,185,129,.14);
    border-color:rgba(52,211,153,.38);
    color:#7CE8C0;
    box-shadow: inset 0 0 0 1px rgba(16,185,129,.04);
}
[data-theme="dark"] .perm-note { color:#929CAD; }
[data-theme="dark"] .perm-note strong { color:#D9DFE8; }
[data-theme="dark"] .perm-readonly {
    background:rgba(245,158,11,.08);
    border-color:rgba(245,158,11,.24);
    color:#D6B46C;
}

/* Acción primaria: en la versión anterior el botón se volvía gris y parecía
   deshabilitado. En dark vuelve a ser una acción inequívoca de marca. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-brand {
    background: linear-gradient(135deg, #766BCF, #9187E7);
    border:1px solid rgba(216,211,255,.16);
    color:#fff;
    box-shadow: 0 7px 18px rgba(86,74,176,.24);
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-brand:hover {
    background: linear-gradient(135deg, #8176DA, #9B92EC);
    border-color:rgba(216,211,255,.24);
    box-shadow: 0 9px 22px rgba(86,74,176,.30);
}
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn[disabled] {
    opacity:.48;
    cursor:not-allowed;
    filter:saturate(.45);
    transform:none !important;
    box-shadow:none !important;
}
[data-theme="dark"] .btn-warning {
    background:#C88722;
    color:#FFF9EE;
}

/* Tablas: cabecera separada del cuerpo y textos secundarios legibles. */
[data-theme="dark"] .table thead th {
    background:#202632;
    color:#DDE2EA;
    border-top:1px solid #303847;
    border-bottom:1px solid #384252;
}
[data-theme="dark"] .table tbody tr { border-bottom-color:#252C38; }
[data-theme="dark"] .table tbody tr:hover { background:#1C222C; }
[data-theme="dark"] .table tbody td { color:#C7CED9; }
[data-theme="dark"] .table tbody td[style*="var(--text-muted)"] { color:#929CAD !important; }
[data-theme="dark"] .table tbody tr.table-active td {
    background:rgba(var(--brand-rgb),.11) !important;
}
[data-theme="dark"] .table tbody tr.table-active td:first-child {
    box-shadow: inset 3px 0 0 #9187E7;
}

/* Dropdowns / modales / buscadores. */
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .cmdk,
[data-theme="dark"] .ssel-panel {
    background:#171C25;
    border-color:#333C4B;
    box-shadow:0 24px 64px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.015);
}
[data-theme="dark"] .dd-header,
[data-theme="dark"] .gxModal__footer { background:#202632; }
[data-theme="dark"] .dd-item:hover,
[data-theme="dark"] .ssel-item:hover { background:#202632; }
[data-theme="dark"] .dd-item > i,
[data-theme="dark"] .ssel-item .ssel-ico,
[data-theme="dark"] .ssel-trigger .ssel-ico { color:#CFC9FF; }

/* Modal: superficie clara dentro del dark y borde para que no se funda con backdrop. */
[data-theme="dark"] .gxModal { background:rgba(3,5,9,.72); }
[data-theme="dark"] .gxModal__content {
    background:#171C25;
    border:1px solid #343D4D;
    box-shadow:0 28px 78px rgba(0,0,0,.58) !important;
}
[data-theme="dark"] .gxModal__header {
    background:linear-gradient(135deg, #51479D, #2D285D) !important;
}

/* Menú horizontal: mismo contraste que el vertical. */
@media (min-width:1025px) {
    [data-theme="dark"][data-menu-layout="horizontal"] #sidebar {
        background:rgba(18,22,30,.97);
        border-color:#303847;
    }
    [data-theme="dark"][data-menu-layout="horizontal"] #brandMenu > li > ul {
        background:#171C25;
        border-color:#333C4B;
        box-shadow:0 20px 50px rgba(0,0,0,.48);
    }
}


/* =====================================================================
   PREMIUM UI — consolidado desde premium-ui.css
   ===================================================================== */
/* ═══════════════════════════════════════════════════════════════
   PREMIUM UI PATCH — Blazor
   Arregla: iconos de accion en tabla (antes solo funcionaban en <a>,
   ahora tambien en <button>), y da un aspecto mas premium al gxModal.
   Cargar DESPUES de shell.css.
═══════════════════════════════════════════════════════════════ */

/* ── 1. Iconos de accion en la tabla (Editar/Eliminar/Ver/Activar) ──
   Tu shell.css solo define "a.gvCmdBtn" — generalizamos a cualquier
   elemento (incluye <button>, que es lo que usa Blazor). ── */
.gvCmdBtn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background .15s ease !important;
    margin-right: 4px !important;
    border: none !important;
    cursor: pointer !important;
}

    .gvCmdBtn:hover {
        transform: translateY(-2px) scale(1.08) !important;
    }

    .gvCmdBtn:last-child {
        margin-right: 0 !important;
    }

.btn-modify.gvCmdBtn {
    background: rgba(255,173,10,.12) !important;
    border: 1px solid rgba(255,173,10,.30) !important;
    color: #E09800 !important;
}

    .btn-modify.gvCmdBtn:hover {
        background: rgba(255,173,10,.24) !important;
        box-shadow: 0 4px 12px rgba(255,173,10,.28) !important;
    }

.btn-delete.gvCmdBtn {
    background: rgba(239,68,68,.10) !important;
    border: 1px solid rgba(239,68,68,.28) !important;
    color: #EF4444 !important;
}

    .btn-delete.gvCmdBtn:hover {
        background: rgba(239,68,68,.20) !important;
        box-shadow: 0 4px 12px rgba(239,68,68,.22) !important;
    }

.btn-view.gvCmdBtn {
    background: rgba(59,130,246,.10) !important;
    border: 1px solid rgba(59,130,246,.25) !important;
    color: #3B82F6 !important;
}

    .btn-view.gvCmdBtn:hover {
        background: rgba(59,130,246,.20) !important;
        box-shadow: 0 4px 12px rgba(59,130,246,.22) !important;
    }

.btn-success.gvCmdBtn {
    background: rgba(16,185,129,.10) !important;
    border: 1px solid rgba(16,185,129,.28) !important;
    color: #10B981 !important;
}

    .btn-success.gvCmdBtn:hover {
        background: rgba(16,185,129,.20) !important;
        box-shadow: 0 4px 12px rgba(16,185,129,.22) !important;
    }

/* ── 2. gxModal — versión premium (header con color, más aire) ── */
.gxModal__content {
    box-shadow: 0 24px 70px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.10) !important;
    border-radius: 20px !important;
}

.gxModal__header {
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, black)) !important;
    padding: 20px 24px !important;
    position: relative !important;
    border-radius: 20px 20px 0 0 !important;
}

.gxModal__title {
    color: #fff !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 17px !important;
    letter-spacing: .3px;
}

/* Botón cerrar (la "X") — restilizado como círculo sobre el header oscuro */
.gxModal button[aria-label="Cerrar"] {
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    font-size: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
    z-index: 2;
}

    .gxModal button[aria-label="Cerrar"]:hover {
        background: rgba(255,255,255,.30) !important;
    }

/* Ícono de maximizar (inyectado por modal-manager.js) sobre header oscuro */
.gxModal__header .popup-maximize-btn {
    color: rgba(255,255,255,.85) !important;
    position: absolute !important;
    top: 20px !important;
    right: 54px !important;
    z-index: 2;
}

.gxModal__body {
    padding: 24px !important;
}

    .gxModal__body .row.g-3 > [class*="col-"] {
        margin-bottom: 4px;
    }

.gxModal__footer {
    padding: 16px 24px !important;
    background: var(--surface-2);
    border-radius: 0 0 20px 20px !important;
}

    .gxModal__footer .btn {
        border-radius: 12px !important;
        box-shadow: 0 4px 14px rgba(16,185,129,.28) !important;
        min-width: 130px;
    }

        .gxModal__footer .btn:hover {
            transform: translateY(-2px);
        }

/* En el modal de "confirmar eliminar", el header ícono/subtítulo quedan
   sobre fondo oscuro también — ajustamos su color para que se lean */
.gxModal__header > div > div:first-child i {
    color: #fff !important;
}

.gxModal__header .text-muted {
    color: rgba(255,255,255,.75) !important;
}

/* === GLOBALTRAINER CENTRALIZED SHARED RAZOR CSS === */

/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (14 componentes):
   - Pages/GestionTipoPostulante.razor.css
   - Pages/GestionProfesion.razor.css
   - Pages/GestionTipoCliente.razor.css
   - Pages/GestionOcupacion.razor.css
   - Pages/GestionBanco.razor.css
   - Pages/GestionCargo.razor.css
   - Pages/GestionCanalComunicacion.razor.css
   - Pages/GestionTipoComision.razor.css
   - Pages/GestionMaquinaria.razor.css
   - Pages/GestionEstadoCivil.razor.css
   - Pages/ReporteVehiculoPractica2.razor.css
   - Pages/GestionTipoDocumento.razor.css
   - Pages/GestionCondicionLaboral.razor.css
   - Pages/GestionNivelInstruccion.razor.css
   ───────────────────────────────────────────────────────────── */
.gt-page{display:grid;gap:1rem;padding-bottom:2rem}.gt-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.gt-head p{margin:.35rem 0 0;color:var(--text-muted,#7b8192)}.gt-card{overflow:hidden;border:1px solid var(--border,#e5e7eb);border-radius:18px;background:var(--surface,#fff);box-shadow:0 8px 24px rgba(15,23,42,.06)}.gt-card .card-body{padding:1rem}.gt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.8rem}.gt-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:var(--surface-2,#f7f8fb)}.gt-tabs button{padding:.55rem .9rem;border:0;border-radius:9px;background:transparent;color:var(--text-muted,#7b8192);font-weight:800}.gt-tabs button.active{background:#fff;color:var(--text,#22263a);box-shadow:0 2px 8px rgba(15,23,42,.08)}.gt-search{position:relative;flex:1}.gt-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted,#7b8192)}.gt-search input{min-height:44px;padding-left:42px;border-radius:11px}.gt-table-wrap{overflow:auto;border:1px solid var(--border,#e5e7eb);border-radius:14px}.gt-table{min-width:900px;margin:0}.gt-table th{padding:.75rem;border:0;background:#27272a;color:#fff;font-size:.72rem;letter-spacing:.04em}.gt-table td{padding:.75rem;vertical-align:middle}.gt-actions{display:flex;gap:7px;white-space:nowrap}.gt-actions .gvCmdBtn{margin:0!important}.gt-badge{display:inline-flex;padding:.25rem .58rem;border-radius:999px;font-size:.7rem;font-weight:850}.gt-badge.ok{background:#ecfdf5;color:#047857}.gt-badge.off{background:#fff1f2;color:#be123c}.gt-badge.warn{background:#fff7ed;color:#c2410c}.gt-modal{width:min(820px,95vw);max-width:min(820px,95vw)!important}.gt-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.gt-field.span-2{grid-column:span 2}.gt-field label{display:block;margin-bottom:.3rem;font-size:.77rem;font-weight:800}.gt-field .form-control,.gt-field .form-select{min-height:43px;border-radius:10px}.gt-empty{padding:3rem!important;text-align:center;color:var(--text-muted,#7b8192)}.gt-loading{display:grid;min-height:320px;place-content:center;justify-items:center;gap:.6rem}.gt-notice{padding:.75rem .9rem;border-radius:12px}.gt-notice.success{background:#ecfdf5;color:#047857}.gt-notice.error{background:#fff1f2;color:#be123c}.gt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.gt-stat{padding:.9rem 1rem;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:#fff}.gt-stat small,.gt-stat strong{display:block}.gt-stat small{color:var(--text-muted,#7b8192)}.gt-stat strong{font-size:1.25rem}@media(max-width:760px){.gt-head,.gt-toolbar{align-items:stretch;flex-direction:column}.gt-form,.gt-stats{grid-template-columns:1fr}.gt-field.span-2{grid-column:auto}}


/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (6 componentes):
   - Pages/GestionTipoVehiculo.razor.css
   - Pages/GestionMedioPago.razor.css
   - Pages/GestionTipoProducto.razor.css
   - Pages/GestionTipoComprobante.razor.css
   - Pages/GestionSerie.razor.css
   - Pages/GestionSede.razor.css
   ───────────────────────────────────────────────────────────── */
.cad-page {
    display: grid;
    gap: 1rem;
    padding-bottom: 2rem;
}

.cad-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cad-head p {
    margin: .35rem 0 0;
    color: var(--text-muted, #8a8fa3);
}

.cad-card {
    overflow: hidden;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 18px;
    background: var(--surface, #fff);
}

.cad-card .card-body {
    padding: 1rem;
}

.cad-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .8rem;
}

.cad-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: var(--surface-2, #f7f8fb);
}

.cad-tabs button {
    padding: .55rem .9rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted, #8a8fa3);
    font-weight: 800;
}

.cad-tabs button.active {
    background: var(--surface, #fff);
    color: var(--text, #202438);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.cad-actions-top {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cad-actions-top .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.cad-search {
    position: relative;
    flex: 1;
    margin-bottom: .8rem;
}

.cad-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--text-muted, #8a8fa3);
}

.cad-search input {
    min-height: 44px;
    padding-left: 42px;
    border-radius: 11px;
}

.cad-table-wrap {
    overflow: auto;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
}

.cad-table {
    min-width: 780px;
    margin: 0;
}

.cad-table th {
    padding: .75rem;
    border: 0;
    background: #27272a;
    color: #fff;
    font-size: .72rem;
    letter-spacing: .04em;
}

.cad-table td {
    padding: .75rem;
    vertical-align: middle;
}

.cad-row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.cad-row-actions .gvCmdBtn {
    flex: 0 0 auto;
    margin: 0 !important;
}

.cad-badge {
    display: inline-flex;
    padding: .25rem .58rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 850;
}

.cad-badge.active {
    background: #ecfdf5;
    color: #047857;
}

.cad-badge.inactive {
    background: #fff1f2;
    color: #be123c;
}

.cad-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .8rem;
    color: var(--text-muted, #8a8fa3);
    font-size: .8rem;
}

.cad-pagination div {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.cad-pagination button {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 9px;
    background: var(--surface, #fff);
}

.cad-modal {
    width: min(720px, 94vw);
    max-width: min(720px, 94vw) !important;
}

.cad-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.cad-field.span-2,
.cad-check.span-2 {
    grid-column: span 2;
}

.cad-field label {
    display: block;
    margin-bottom: .3rem;
    font-size: .77rem;
    font-weight: 800;
}

.cad-field .form-control,
.cad-field .form-select {
    min-height: 43px;
    border-radius: 10px;
}

.cad-check {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
}

.cad-check span,
.cad-check strong,
.cad-check small {
    display: block;
}

.cad-check small {
    color: var(--text-muted, #8a8fa3);
}

.cad-audit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: .9rem;
}

.cad-audit div {
    padding: .7rem;
    border-radius: 11px;
    background: var(--surface-2, #f7f8fb);
}

.cad-audit small,
.cad-audit strong {
    display: block;
}

.cad-audit small {
    color: var(--text-muted, #8a8fa3);
}

.cad-notice {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem .9rem;
    border-radius: 12px;
}

.cad-notice.error {
    background: #fff1f2;
    color: #be123c;
}

.cad-notice.success {
    background: #ecfdf5;
    color: #047857;
}

.cad-empty {
    padding: 3rem !important;
    text-align: center;
    color: var(--text-muted, #8a8fa3);
}

.cad-loading {
    display: grid;
    min-height: 320px;
    place-content: center;
    justify-items: center;
    gap: .6rem;
}

@media (max-width: 720px) {
    .cad-head,
    .cad-toolbar,
    .cad-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .cad-form,
    .cad-audit {
        grid-template-columns: 1fr;
    }

    .cad-field.span-2,
    .cad-check.span-2 {
        grid-column: auto;
    }

    .cad-actions-top .btn {
        flex: 1;
    }
}


/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (2 componentes):
   - Components/Certificados/ReporteClienteModal.razor.css
   - Components/Clientes/ReporteClienteModal.razor.css
   ───────────────────────────────────────────────────────────── */
.rc-dialog{
    width:min(1420px,96vw);
    max-width:96vw;
    max-height:92vh;
}
.rc-dialog .gxModal__content{
    max-height:92vh;
    display:flex;
    flex-direction:column;
}
.rc-dialog .gxModal__body{
    overflow:auto;
    padding:22px 26px 28px;
}
.rc-eyebrow{
    font-size:11px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--primary);
}
.rc-tabs{
    display:flex;
    gap:8px;
    overflow:auto;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
    margin-bottom:18px;
    scrollbar-width:thin;
}
.rc-tabs button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-muted);
    padding:9px 16px;
    border-radius:12px;
    white-space:nowrap;
    font-weight:750;
    transition:transform .18s ease,background .18s ease,color .18s ease;
}
.rc-tabs button:hover{
    transform:translateY(-1px);
    color:var(--text);
}
.rc-tabs button.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    box-shadow:0 8px 18px rgba(17,24,39,.16);
}
.rc-table-wrap{
    overflow:auto;
    max-height:58vh;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
}
.rc-table{
    width:100%;
    border-collapse:collapse;
    min-width:760px;
}
.rc-table th,
.rc-table td{
    padding:11px 13px;
    border-bottom:1px solid var(--border);
    text-align:left;
    font-size:12.5px;
    vertical-align:middle;
}
.rc-table th{
    position:sticky;
    top:0;
    background:var(--surface-2);
    z-index:2;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.055em;
    color:var(--text-muted);
}
.rc-table tbody tr:last-child td{
    border-bottom:0;
}
.rc-table tbody tr:hover td{
    background:color-mix(in srgb,var(--primary) 4%,transparent);
}
.rc-table .num{
    text-align:right;
    font-variant-numeric:tabular-nums;
}
.rc-badge{
    display:inline-flex;
    padding:4px 9px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:850;
}
.rc-badge.ok{
    background:rgba(16,185,129,.14);
    color:#067647;
}
.rc-badge.bad{
    background:rgba(239,68,68,.13);
    color:#b42318;
}
.rc-badge.warning{
    background:rgba(245,158,11,.16);
    color:#92400e;
}
.rc-badge.neutral{
    background:var(--surface-2);
    color:var(--text-muted);
}
.rc-empty{
    min-height:220px;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:10px;
    color:var(--text-muted);
    text-align:center;
}
.rc-empty i{
    font-size:30px;
    color:var(--primary);
}
.rc-empty strong{
    color:var(--text);
}
.rc-empty span{
    max-width:560px;
    line-height:1.55;
}
.rc-alert{
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
}

/* Resultados separados */
.rc-results-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}
.rc-section-kicker{
    display:block;
    margin-bottom:4px;
    color:var(--primary);
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.rc-results-head h6{
    margin:0 0 5px;
    color:var(--text);
    font-size:20px;
    font-weight:850;
}
.rc-results-head p{
    margin:0;
    color:var(--text-muted);
    line-height:1.5;
}
.rc-module-count{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex:none;
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-2);
    color:var(--text-muted);
    font-size:11px;
    font-weight:800;
}
.rc-result-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.rc-result-stats article{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:86px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
}
.rc-result-stats article>i{
    width:42px;
    height:42px;
    display:grid;
    place-content:center;
    border-radius:12px;
    background:var(--surface-2);
    color:var(--primary);
    font-size:17px;
}
.rc-result-stats article.evaluation>i{
    background:rgba(59,130,246,.12);
    color:#2563eb;
}
.rc-result-stats article.ballot>i{
    background:rgba(124,58,237,.12);
    color:#7c3aed;
}
.rc-result-stats article div{
    display:grid;
    gap:1px;
}
.rc-result-stats article span,
.rc-result-stats article small{
    color:var(--text-muted);
    font-size:11px;
}
.rc-result-stats article strong{
    color:var(--text);
    font-size:22px;
    line-height:1;
}
.rc-result-sections{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.rc-result-panel{
    min-width:0;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
    overflow:hidden;
}
.rc-result-panel>header{
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px 15px;
    border-bottom:1px solid var(--border);
    background:var(--surface-2);
}
.rc-result-panel>header div:last-child{
    display:grid;
    gap:2px;
}
.rc-result-panel>header span{
    color:var(--text);
    font-weight:850;
}
.rc-result-panel>header strong{
    color:var(--text-muted);
    font-size:11px;
    font-weight:700;
}
.rc-result-icon{
    width:38px;
    height:38px;
    display:grid;
    place-content:center;
    border-radius:11px;
}
.rc-result-panel.evaluation .rc-result-icon{
    background:rgba(59,130,246,.13);
    color:#2563eb;
}
.rc-result-panel.ballot .rc-result-icon{
    background:rgba(124,58,237,.13);
    color:#7c3aed;
}
.rc-result-table-wrap{
    max-height:390px;
    border:0;
    border-radius:0;
}
.rc-result-table{
    min-width:590px;
}
.rc-result-empty{
    min-height:220px;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:7px;
    padding:24px;
    text-align:center;
    color:var(--text-muted);
}
.rc-result-empty i{
    font-size:28px;
}
.rc-result-empty strong{
    color:var(--text);
}
.rc-result-empty span{
    max-width:360px;
    font-size:12px;
    line-height:1.5;
}
.rc-module-name{
    color:var(--text);
    font-weight:750;
}
.rc-score{
    color:var(--text);
    font-size:14px;
}
.rc-attempt{
    display:inline-grid;
    min-width:28px;
    height:28px;
    place-content:center;
    border-radius:9px;
    background:var(--surface-2);
    color:var(--text);
    font-weight:850;
}
.rc-empty-results{
    min-height:180px;
    margin-top:14px;
    border:1px dashed var(--border);
    border-radius:14px;
    background:var(--surface-2);
}

@media(max-width:980px){
    .rc-result-sections{
        grid-template-columns:1fr;
    }
}
@media(max-width:760px){
    .rc-dialog{
        width:100%;
        max-width:100%;
        max-height:calc(100dvh - 12px);
    }
    .rc-dialog .gxModal__content{
        max-height:calc(100dvh - 12px);
        border-radius:18px;
    }
    .rc-dialog .gxModal__body{
        padding:15px 13px 20px;
    }
    .rc-tabs{
        margin-inline:-2px;
    }
    .rc-tabs button{
        min-height:40px;
        padding:8px 12px;
    }
    .rc-results-head{
        flex-direction:column;
    }
    .rc-result-stats{
        grid-template-columns:1fr;
    }
    .rc-table-wrap{
        max-height:none;
    }
}
/* Prácticas vehiculares: Tiempo representa sesiones */
.rc-practice-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}
.rc-practice-head h6{
    margin:0 0 5px;
    color:var(--text);
    font-size:20px;
    font-weight:850;
}
.rc-practice-head p{
    margin:0;
    color:var(--text-muted);
    line-height:1.5;
}
.rc-practice-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.rc-practice-stats article{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:86px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
}
.rc-practice-stats article>i{
    width:42px;
    height:42px;
    display:grid;
    place-content:center;
    flex:none;
    border-radius:12px;
    background:var(--surface-2);
    color:var(--primary);
    font-size:17px;
}
.rc-practice-stats article.sessions>i{
    background:rgba(59,130,246,.12);
    color:#2563eb;
}
.rc-practice-stats article.evaluated>i{
    background:rgba(16,185,129,.13);
    color:#047857;
}
.rc-practice-stats article.upcoming>i{
    background:rgba(245,158,11,.16);
    color:#b45309;
}
.rc-practice-stats article div{
    display:grid;
    gap:2px;
    min-width:0;
}
.rc-practice-stats article span,
.rc-practice-stats article small{
    overflow:hidden;
    color:var(--text-muted);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.rc-practice-stats article strong{
    color:var(--text);
    font-size:22px;
    line-height:1;
    font-variant-numeric:tabular-nums;
}
.rc-practice-table tfoot th{
    position:sticky;
    bottom:0;
    z-index:2;
    border-top:1px solid var(--border);
    background:var(--surface-2);
    font-size:11px;
    font-weight:900;
}
.rc-session-value{
    display:block;
    color:var(--text);
    font-size:14px;
    font-variant-numeric:tabular-nums;
}
.rc-session-value+small{
    display:block;
    margin-top:2px;
    color:var(--text-muted);
    font-size:10px;
}

@media(max-width:1080px){
    .rc-practice-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:760px){
    .rc-practice-head{
        flex-direction:column;
    }
    .rc-practice-stats{
        grid-template-columns:1fr;
    }
}
/* ================================================================
   CONTADORES INTEGRALES DEL EXPEDIENTE
   Estado de cuenta · Comprobantes · Matrículas · Resultados · Prácticas
   ================================================================ */
.rc-tabs button{
    position:relative;
}
.rc-tabs button>span:first-of-type{
    line-height:1;
}
.rc-tab-count{
    display:inline-grid;
    min-width:22px;
    height:22px;
    place-content:center;
    margin-left:2px;
    padding:0 6px;
    border-radius:999px;
    background:var(--surface-2);
    color:var(--text-muted);
    font-size:10px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}
.rc-tabs button.active .rc-tab-count{
    background:rgba(255,255,255,.18);
    color:#fff;
}
.rc-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}
.rc-section-head h6{
    margin:0 0 5px;
    color:var(--text);
    font-size:20px;
    font-weight:850;
}
.rc-section-head p{
    margin:0;
    max-width:720px;
    color:var(--text-muted);
    line-height:1.5;
}
.rc-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.rc-kpi-grid article{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    min-height:88px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
}
.rc-kpi-grid article>i{
    width:42px;
    height:42px;
    display:grid;
    place-content:center;
    flex:none;
    border-radius:12px;
    background:var(--surface-2);
    color:var(--primary);
    font-size:17px;
}
.rc-kpi-grid article.primary>i{
    background:rgba(59,130,246,.12);
    color:#2563eb;
}
.rc-kpi-grid article.success>i{
    background:rgba(16,185,129,.13);
    color:#047857;
}
.rc-kpi-grid article.warning>i{
    background:rgba(245,158,11,.16);
    color:#b45309;
}
.rc-kpi-grid article.danger>i{
    background:rgba(239,68,68,.13);
    color:#b42318;
}
.rc-kpi-grid article.neutral>i{
    background:rgba(100,116,139,.13);
    color:#475569;
}
.rc-kpi-grid article div{
    display:grid;
    gap:2px;
    min-width:0;
}
.rc-kpi-grid article span,
.rc-kpi-grid article small{
    overflow:hidden;
    color:var(--text-muted);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.rc-kpi-grid article strong{
    color:var(--text);
    font-size:22px;
    line-height:1;
    font-variant-numeric:tabular-nums;
}
.rc-table tfoot th{
    position:sticky;
    bottom:0;
    z-index:2;
    border-top:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
    font-size:11px;
    font-weight:900;
}
.rc-result-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.rc-practice-stats{
    grid-template-columns:repeat(5,minmax(0,1fr));
}
.rc-practice-stats article.vehicles>i{
    background:rgba(124,58,237,.13);
    color:#7c3aed;
}

@media(max-width:1180px){
    .rc-kpi-grid,
    .rc-result-stats,
    .rc-practice-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:760px){
    .rc-section-head{
        flex-direction:column;
    }
    .rc-kpi-grid,
    .rc-result-stats,
    .rc-practice-stats{
        grid-template-columns:1fr;
    }
}


/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (2 componentes):
   - Pages/GestionProveedor.razor.css
   - Pages/GestionEgresos.razor.css
   ───────────────────────────────────────────────────────────── */
.gem-page-head { display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px; }
.gem-subtitle { margin:6px 0 0;color:var(--text-muted);font-size:13px; }
.gem-toolbar-card,.gem-list-card { margin-bottom:18px;overflow:visible; }
.gem-toolbar-card .card-body { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.gem-tabs { display:flex;padding:4px;border:1px solid var(--border);border-radius:var(--r-md,12px);background:var(--surface-2); }
.gem-tabs button { display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border:0;border-radius:9px;background:transparent;color:var(--text-muted);font-weight:700;cursor:pointer; }
.gem-tabs button.active { background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm); }
.gem-tools { display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1; }
.gem-search { position:relative;display:block;min-width:280px;max-width:520px;flex:1; }
.gem-search > i { position:absolute;z-index:2;top:50%;left:14px;transform:translateY(-50%);color:var(--text-muted);pointer-events:none; }
.gem-search input { box-sizing:border-box;width:100%;min-height:44px;padding:0 14px 0 42px;border:1px solid var(--border);border-radius:var(--r-md,12px);background:var(--surface);color:var(--text);outline:none; }
.gem-search input:focus { border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12); }
.gem-list-head { display:flex;align-items:baseline;gap:7px;margin-bottom:12px; }
.gem-list-head strong { color:var(--text);font-family:'Sora',sans-serif;font-size:22px;font-weight:800; }
.gem-list-head span { color:var(--text-muted);font-size:12px; }
.gem-table-wrap { overflow:auto; }
.gem-table { min-width:760px; }
.gem-table td strong,.gem-table td small { display:block; }
.gem-table td small { margin-top:3px;color:var(--text-muted);font-size:11px; }
.gem-actions { display:flex;gap:6px; }
.academic-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }
.academic-field { min-width:0; }
.academic-field--span-2 { grid-column:1/-1; }
.academic-field label { display:block;margin:0 0 5px;color:var(--text-2);font-size:12px;font-weight:600; }
.modal-footer-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border); }
.academic-modal-sm { width:min(480px,calc(100vw - 32px)); }
.academic-modal-lg { width:min(880px,calc(100vw - 32px)); }
.academic-modal-xl { width:min(1060px,calc(100vw - 24px)); }
.academic-modal-full { width:min(1380px,calc(100vw - 20px));height:min(900px,calc(100dvh - 20px)); }
.academic-confirm { text-align:center; }
.academic-confirm > i { color:var(--warning);font-size:34px; }

@media(max-width:760px){ .gem-page-head{align-items:stretch;flex-direction:column} .gem-tools{width:100%;flex-wrap:wrap} .gem-search{min-width:100%;max-width:none} .academic-form-grid{grid-template-columns:1fr} .academic-field--span-2{grid-column:auto} }
.gem-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.gem-span-2{grid-column:1/-1}.gem-money{font-weight:800;color:var(--success)}.gem-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.gem-kpi{padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.gem-kpi small{display:block;color:var(--text-muted);font-size:11px;text-transform:uppercase}.gem-kpi strong{display:block;margin-top:6px;font-size:22px}.academic-audit{display:grid;gap:4px;margin-top:14px;padding:12px;border-radius:12px;background:var(--surface-2);color:var(--text-muted);font-size:11px}@media(max-width:900px){.gem-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.gem-form-grid{grid-template-columns:1fr}.gem-span-2{grid-column:auto}.gem-kpis{grid-template-columns:1fr}}


/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (2 componentes):
   - Pages/GestionTurnosPracticaVehicular.razor.css
   - Pages/GestionBlog.razor.css
   ───────────────────────────────────────────────────────────── */
.gt-page{display:grid;gap:1rem;padding-bottom:2rem}.gt-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.gt-head p{margin:.35rem 0 0;color:var(--text-muted,#7b8192)}.gt-card{overflow:hidden;border:1px solid var(--border,#e5e7eb);border-radius:18px;background:var(--surface,#fff);box-shadow:0 8px 24px rgba(15,23,42,.06)}.gt-card .card-body{padding:1rem}.gt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.8rem}.gt-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:var(--surface-2,#f7f8fb)}.gt-tabs button{padding:.55rem .9rem;border:0;border-radius:9px;background:transparent;color:var(--text-muted,#7b8192);font-weight:800}.gt-tabs button.active{background:#fff;color:var(--text,#22263a);box-shadow:0 2px 8px rgba(15,23,42,.08)}.gt-search{position:relative;flex:1}.gt-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted,#7b8192)}.gt-search input{min-height:44px;padding-left:42px;border-radius:11px}.gt-table-wrap{overflow:auto;border:1px solid var(--border,#e5e7eb);border-radius:14px}.gt-table{min-width:900px;margin:0}.gt-table th{padding:.75rem;border:0;background:#27272a;color:#fff;font-size:.72rem;letter-spacing:.04em}.gt-table td{padding:.75rem;vertical-align:middle}.gt-actions{display:flex;gap:7px;white-space:nowrap}.gt-actions .gvCmdBtn{margin:0!important}.gt-badge{display:inline-flex;padding:.25rem .58rem;border-radius:999px;font-size:.7rem;font-weight:850}.gt-badge.ok{background:#ecfdf5;color:#047857}.gt-badge.off{background:#fff1f2;color:#be123c}.gt-badge.warn{background:#fff7ed;color:#c2410c}.gt-modal{width:min(820px,95vw);max-width:min(820px,95vw)!important}.gt-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.gt-field.span-2{grid-column:span 2}.gt-field label{display:block;margin-bottom:.3rem;font-size:.77rem;font-weight:800}.gt-field .form-control,.gt-field .form-select{min-height:43px;border-radius:10px}.gt-empty{padding:3rem!important;text-align:center;color:var(--text-muted,#7b8192)}.gt-loading{display:grid;min-height:320px;place-content:center;justify-items:center;gap:.6rem}.gt-notice{padding:.75rem .9rem;border-radius:12px}.gt-notice.success{background:#ecfdf5;color:#047857}.gt-notice.error{background:#fff1f2;color:#be123c}.gt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.gt-stat{padding:.9rem 1rem;border:1px solid var(--border,#e5e7eb);border-radius:14px;background:#fff}.gt-stat small,.gt-stat strong{display:block}.gt-stat small{color:var(--text-muted,#7b8192)}.gt-stat strong{font-size:1.25rem}@media(max-width:760px){.gt-head,.gt-toolbar{align-items:stretch;flex-direction:column}.gt-form,.gt-stats{grid-template-columns:1fr}.gt-field.span-2{grid-column:auto}}.gt-table{min-width:1100px}.gt-table td small{display:block;color:var(--text-muted)}


/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (2 componentes):
   - Pages/GestionVehiculo.razor.css
   - Pages/GestionVehiculoPracticaHoras.razor.css
   ───────────────────────────────────────────────────────────── */
.admin-page{display:grid;gap:16px}.admin-hero,.admin-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}.admin-hero{padding:22px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.admin-hero h1{margin:4px 0 5px;font-size:clamp(25px,2vw,34px)}.admin-hero p{margin:0;color:var(--text-muted)}.admin-eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}.admin-card{padding:15px}.admin-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.admin-toggle{display:flex;background:var(--surface-2);padding:4px;border-radius:12px}.admin-toggle button{border:0;background:transparent;padding:9px 14px;border-radius:9px;font-weight:800;color:var(--text-muted)}.admin-toggle button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.admin-filter{display:flex;gap:8px;flex-wrap:wrap}.admin-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;max-height:62vh}.admin-table{width:100%;min-width:900px;border-collapse:collapse}.admin-table th,.admin-table td{padding:11px 12px;border-bottom:1px solid var(--border);font-size:12px;text-align:left}.admin-table th{position:sticky;top:0;background:var(--surface-2);z-index:2;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}.admin-actions{display:flex;gap:5px;white-space:nowrap}.admin-empty{min-height:220px;display:grid;place-content:center;justify-items:center;color:var(--text-muted);gap:9px}.editor-dialog{max-width:min(820px,96vw)}.editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.editor-field{display:grid;gap:6px}.editor-field.full{grid-column:1/-1}.editor-field label{font-size:11px;font-weight:850;text-transform:uppercase;color:var(--text-muted)}.modal-footer-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.audit{padding:10px;border-radius:10px;background:var(--surface-2);font-size:12px;color:var(--text-muted)}.client-options{max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:10px}.client-options button{width:100%;border:0;background:transparent;color:var(--text);display:flex;justify-content:space-between;padding:9px 11px;text-align:left}.client-options button:hover{background:var(--surface-2)}@media(max-width:720px){.admin-hero{padding:17px}.editor-grid{grid-template-columns:1fr}.admin-filter{width:100%;display:grid;grid-template-columns:1fr auto}.admin-filter input{min-width:0}}


/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (2 componentes):
   - Pages/ReporteGeneralPromocion.razor.css
   - Pages/ReporteGeneralCliente.razor.css
   ───────────────────────────────────────────────────────────── */
.rgc-page{
    display:grid;
    gap:16px;
    padding:0;
}
.rgc-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.rgc-subtitle{
    margin:5px 0 0;
    color:var(--text-muted);
    line-height:1.55;
}
.rgc-head-icon{
    width:54px;
    height:54px;
    flex:none;
    display:grid;
    place-content:center;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface-2);
    color:var(--primary);
    font-size:22px;
}
.rgc-filter-card,
.rgc-results-card{
    margin:0;
}
.rgc-filter-grid{
    display:grid;
    grid-template-columns:170px minmax(280px,1fr) auto;
    align-items:end;
    gap:12px;
}
.rgp-filter-grid{
    grid-template-columns:minmax(300px,560px) auto;
    justify-content:start;
}
.rgc-field{
    display:grid;
    gap:6px;
}
.rgc-field label{
    margin:0;
    color:var(--text-muted);
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.rgc-search-box{
    position:relative;
}
.rgc-search-box>i{
    position:absolute;
    left:13px;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-muted);
    pointer-events:none;
}
.rgc-search-box .form-control{
    padding-left:38px;
}
.rgc-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.rgc-actions .btn{
    min-height:40px;
}
.rgc-alert{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    border-radius:14px;
}
.rgc-alert span{
    flex:1;
}
.rgc-alert button{
    width:32px;
    height:32px;
    display:grid;
    place-content:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:inherit;
}
.rgc-stats{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}
.rgc-stats article{
    position:relative;
    min-height:96px;
    padding:16px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:16px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
}
.rgc-stats article span{
    display:block;
    margin-bottom:7px;
    color:var(--text-muted);
    font-size:10.5px;
    font-weight:850;
    letter-spacing:.055em;
    text-transform:uppercase;
}
.rgc-stats article strong{
    color:var(--text);
    font-size:clamp(20px,2vw,27px);
    font-variant-numeric:tabular-nums;
}
.rgc-stats article>i{
    position:absolute;
    right:14px;
    top:14px;
    color:var(--primary);
    opacity:.14;
    font-size:30px;
}
.rgc-empty{
    min-height:260px;
    padding:32px;
}
.rgc-empty i{
    font-size:34px;
    color:var(--primary);
}
.rgc-empty span{
    max-width:560px;
    text-align:center;
}
.rgc-table-wrap{
    overflow:auto;
    max-height:calc(100vh - 350px);
    min-height:240px;
}
.rgc-table{
    width:100%;
    min-width:1180px;
    margin:0;
}
.rgc-table th,
.rgc-table td{
    padding:12px 13px;
    vertical-align:middle;
}
.rgc-table thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:var(--surface-2);
    color:var(--text-muted);
    font-size:10px;
    letter-spacing:.055em;
}
.rgc-table tfoot th{
    position:sticky;
    bottom:0;
    z-index:2;
    border-top:1px solid var(--border);
    background:var(--surface-2);
    font-size:11px;
    font-weight:900;
}
.rgc-client{
    display:grid;
    gap:3px;
    min-width:210px;
}
.rgc-client strong{
    color:var(--text);
    font-size:12.5px;
}
.rgc-client small{
    color:var(--text-muted);
    font-size:10.5px;
}
.rgc-money{
    white-space:nowrap;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}
.rgc-money--warning{
    color:#b45309;
}
.rgc-money--success{
    color:#047857;
}
.rgc-progress-row{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:150px;
}
.rgc-progress{
    flex:1;
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:var(--surface-2);
}
.rgc-progress span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--primary),#16a34a);
}
.rgc-progress-row small{
    width:54px;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
    text-align:right;
}
.rgc-action-col{
    width:74px;
    text-align:center;
    white-space:nowrap;
}

@media(max-width:1180px){
    .rgc-stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:820px){
    .rgc-head{
        align-items:flex-start;
    }
    .rgc-filter-grid,
    .rgp-filter-grid{
        grid-template-columns:1fr;
    }
    .rgc-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .rgc-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .rgc-table-wrap{
        max-height:none;
    }
}
@media(max-width:540px){
    .rgc-head-icon{
        display:none;
    }
    .rgc-actions{
        grid-template-columns:1fr;
    }
    .rgc-stats{
        grid-template-columns:1fr;
    }
}


/* ─────────────────────────────────────────────────────────────
   CSS compartido consolidado desde CSS Isolation
   Origen común (2 componentes):
   - Pages/ReporteIngresosEmpleado.razor.css
   - Pages/ReporteIngresos.razor.css
   ───────────────────────────────────────────────────────────── */
.report-page{display:grid;gap:16px}.report-hero,.report-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)}.report-hero{display:flex;align-items:flex-start;justify-content:space-between;padding:22px}.report-hero h1{margin:4px 0 5px;font-size:clamp(25px,2vw,34px)}.report-hero p{margin:0;color:var(--text-muted)}.report-eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}.report-card{padding:16px}.report-filter{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.report-field{display:grid;gap:5px;min-width:180px;flex:1}.report-field label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--text-muted)}.report-actions{display:flex;gap:8px}.report-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.report-summary strong{font-size:22px}.report-empty{min-height:240px;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--text-muted)}.client-results{position:relative}.client-options{position:absolute;z-index:10;left:0;right:0;top:100%;max-height:260px;overflow:auto;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:12px}.client-options button{width:100%;display:flex;justify-content:space-between;text-align:left;border:0;background:transparent;padding:10px 12px;color:var(--text)}.client-options button:hover{background:var(--surface-2)}@media(max-width:720px){.report-hero{padding:17px}.report-filter{display:grid}.report-field{min-width:0}.report-actions{width:100%}.report-actions .btn{flex:1}}

/* === GLOBALTRAINER PORTAL STYLES CENTRALIZED IN SHELL.CSS === */
/* GlobalTrainer — Portal del alumno
   Diseño moderno, premium, responsive y accesible. */
:root {
    --student-brand: var(--brand, #ffad0a);
    --student-brand-rgb: var(--brand-rgb, 255, 173, 10);
    --student-ink: #161923;
    --student-muted: #697083;
    --student-bg: #f3f5f9;
    --student-card: #fff;
    --student-line: #e5e8ef;
    --student-success: #059669;
    --student-warning: #d97706;
    --student-danger: #dc2626;
    --student-info: #2563eb;
    --student-sidebar: 264px;
    --student-radius: 18px;
    --student-shadow: 0 18px 50px rgba(25, 30, 48, .09);
}
[data-theme="dark"] {
    --student-ink: #f1f3f7;
    --student-muted: #a6abb8;
    --student-bg: #0e0f12;
    --student-card: #17191e;
    --student-line: #292c33;
    --student-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.student-shell { min-height:100vh; color:var(--student-ink); background:var(--student-bg); }
.student-sidebar {
    position:fixed; z-index:80; inset:12px auto 12px 12px; width:var(--student-sidebar);
    display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--student-line);
    border-radius:24px; background:var(--student-card); box-shadow:var(--student-shadow);
    transition:transform .22s ease;
}
.student-brand { display:flex; align-items:center; gap:12px; min-height:74px; padding:14px 17px; border-bottom:1px solid var(--student-line); }
.student-brand img { width:44px; height:44px; object-fit:contain; }
.student-brand strong { display:block; font:800 16px/1.15 "Sora","DM Sans",sans-serif; }
.student-brand small { display:block; margin-top:3px; color:var(--student-muted); font-size:11.5px; }
.student-nav { flex:1; overflow:auto; padding:14px 10px; }
.student-nav-group { margin:4px 10px 8px; color:var(--student-muted); font-size:10px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.student-nav a { position:relative; display:flex; align-items:center; gap:12px; min-height:46px; margin:4px 0; padding:0 13px; border-radius:13px; color:var(--student-muted); text-decoration:none; font-size:13.5px; font-weight:700; transition:.16s ease; }
.student-nav a i { width:22px; text-align:center; font-size:17px; }
.student-nav a:hover { color:var(--student-ink); background:rgba(var(--student-brand-rgb),.08); }
.student-nav a.active { color:var(--student-ink); background:rgba(var(--student-brand-rgb),.16); box-shadow:inset 3px 0 0 var(--student-brand); }
.student-sidebar-foot { padding:10px; border-top:1px solid var(--student-line); }
.student-user-card { display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; background:rgba(var(--student-brand-rgb),.07); }
.student-avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(var(--student-brand-rgb),.45); }
.student-user-card strong { display:block; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }
.student-user-card small { color:var(--student-muted); font-size:11px; }
.student-main { min-height:100vh; margin-left:calc(var(--student-sidebar) + 24px); padding:12px 16px 96px 4px; }
.student-topbar { position:sticky; z-index:50; top:12px; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 14px; border:1px solid var(--student-line); border-radius:18px; background:color-mix(in srgb,var(--student-card) 90%,transparent); backdrop-filter:blur(18px); box-shadow:0 8px 28px rgba(20,25,40,.07); }
.student-topbar-title strong { display:block; font-size:14px; }
.student-topbar-title span { color:var(--student-muted); font-size:11.5px; }
.student-topbar-actions { display:flex; gap:8px; }
.student-icon-btn { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--student-line); border-radius:12px; background:var(--student-card); color:var(--student-ink); cursor:pointer; }
.student-content { width:min(1320px,100%); margin:18px auto 0; }
.student-mobile-toggle { display:none; }
.student-overlay { display:none; position:fixed; z-index:70; inset:0; background:rgba(8,10,15,.55); backdrop-filter:blur(3px); }
.student-bottom-nav { display:none; }
.student-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:4px 0 18px; }
.student-eyebrow { color:var(--student-brand); font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.student-page-head h1 { margin:3px 0 0; font:800 clamp(22px,3vw,34px)/1.08 "Sora","DM Sans",sans-serif; }
.student-page-head p { max-width:650px; margin:8px 0 0; color:var(--student-muted); }
.student-card { border:1px solid var(--student-line); border-radius:var(--student-radius); background:var(--student-card); box-shadow:0 8px 26px rgba(30,35,55,.05); }
.student-card-pad { padding:20px; }
.student-grid { display:grid; gap:16px; }
.student-grid--stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.student-stat { position:relative; overflow:hidden; min-height:130px; padding:18px; }
.student-stat::after { content:""; position:absolute; right:-35px; bottom:-45px; width:120px; height:120px; border-radius:50%; background:rgba(var(--student-brand-rgb),.08); }
.student-stat-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--student-brand); background:rgba(var(--student-brand-rgb),.14); font-size:18px; }
.student-stat strong { display:block; margin-top:15px; font-size:25px; line-height:1; }
.student-stat span { display:block; margin-top:6px; color:var(--student-muted); font-size:12px; }
.student-actions { display:flex; flex-wrap:wrap; gap:10px; }
.student-btn { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; border:1px solid transparent; border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer; transition:.15s ease; }
.student-btn--primary { color:#17120a; background:var(--student-brand); box-shadow:0 9px 22px rgba(var(--student-brand-rgb),.22); }
.student-btn--ghost { color:var(--student-ink); border-color:var(--student-line); background:var(--student-card); }
.student-btn--danger { color:#fff; background:var(--student-danger); }
.student-btn:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.student-search { position:relative; width:min(420px,100%); }
.student-search i { position:absolute; top:50%; left:14px; transform:translateY(-50%); color:var(--student-muted); }
.student-search input { width:100%; min-height:44px; padding:0 14px 0 42px; border:1px solid var(--student-line); border-radius:13px; background:var(--student-card); color:var(--student-ink); outline:none; }
.student-search input:focus { border-color:var(--student-brand); box-shadow:0 0 0 4px rgba(var(--student-brand-rgb),.12); }
.student-module-list { display:grid; gap:12px; }
.student-module { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:16px; border:1px solid var(--student-line); border-radius:16px; background:var(--student-card); color:var(--student-ink); text-align:left; cursor:pointer; transition:.16s ease; }
.student-module:hover { transform:translateY(-2px); border-color:rgba(var(--student-brand-rgb),.6); box-shadow:0 12px 28px rgba(20,25,45,.08); }
.student-module-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:var(--student-brand); background:rgba(var(--student-brand-rgb),.13); font-size:20px; }
.student-module strong { display:block; font-size:14.5px; }
.student-module small { display:block; margin-top:4px; color:var(--student-muted); }
.student-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; font-size:10.5px; font-weight:850; }
.student-badge--success { color:#047857; background:#ecfdf5; }
.student-badge--warning { color:#a16207; background:#fffbeb; }
.student-badge--danger { color:#be123c; background:#fff1f2; }
.student-badge--info { color:#1d4ed8; background:#eff6ff; }
.student-tabs { display:flex; gap:6px; overflow:auto; padding:6px; border:1px solid var(--student-line); border-radius:15px; background:var(--student-card); }
.student-tab { min-height:42px; display:flex; align-items:center; gap:7px; padding:0 14px; border:0; border-radius:11px; background:transparent; color:var(--student-muted); font-weight:800; white-space:nowrap; cursor:pointer; }
.student-tab.active { color:var(--student-ink); background:rgba(var(--student-brand-rgb),.16); }
.student-resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.student-resource { min-height:155px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:15px; padding:17px; border:1px solid var(--student-line); border-radius:16px; background:var(--student-card); }
.student-resource-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:var(--student-brand); background:rgba(var(--student-brand-rgb),.13); font-size:20px; }
.student-resource h3 { margin:0; font-size:14px; }
.student-resource p { margin:5px 0 0; color:var(--student-muted); font-size:12px; }
.student-resource-actions { width:100%; display:flex; flex-wrap:wrap; gap:8px; }
.student-resource-actions .student-btn { flex:1 1 132px; }
.student-empty { min-height:220px; display:grid; place-items:center; padding:35px; text-align:center; color:var(--student-muted); }
.student-empty i { display:block; margin-bottom:12px; font-size:36px; opacity:.65; }
.student-table-wrap { overflow:auto; border:1px solid var(--student-line); border-radius:16px; background:var(--student-card); }
.student-table { width:100%; min-width:760px; border-collapse:collapse; }
.student-table th { padding:13px 14px; border-bottom:1px solid var(--student-line); color:var(--student-muted); background:color-mix(in srgb,var(--student-card) 92%,#94a3b8); font-size:10px; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.student-table td { padding:14px; border-bottom:1px solid var(--student-line); font-size:12.5px; vertical-align:middle; }
.student-table tbody tr:last-child td { border-bottom:0; }
.student-table tbody tr:hover { background:rgba(var(--student-brand-rgb),.04); }
.student-mobile-cards { display:none; }
.student-form { display:grid; gap:15px; }
.student-field label { display:block; margin-bottom:7px; font-size:12px; font-weight:800; }
.student-field input,.student-field select,.student-field textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--student-line); border-radius:12px; background:var(--student-card); color:var(--student-ink); outline:none; }
.student-field input:focus,.student-field select:focus,.student-field textarea:focus { border-color:var(--student-brand); box-shadow:0 0 0 4px rgba(var(--student-brand-rgb),.12); }
.student-alert { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border-radius:13px; font-size:12.5px; }
.student-alert--warning { color:#92400e; background:#fffbeb; border:1px solid #fde68a; }
.student-alert--danger { color:#9f1239; background:#fff1f2; border:1px solid #fecdd3; }
.student-alert--success { color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; }
.student-modal { position:fixed; z-index:400; inset:0; display:grid; place-items:center; padding:16px; background:rgba(8,10,16,.65); backdrop-filter:blur(5px); }
.student-modal-card { width:min(560px,100%); max-height:min(82vh,760px); overflow:auto; padding:22px; border:1px solid var(--student-line); border-radius:20px; background:var(--student-card); box-shadow:0 30px 80px rgba(0,0,0,.3); }
.student-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
.student-modal-head h2 { margin:0; font-size:18px; }
.student-video-frame { width:100%; aspect-ratio:16/9; border:0; border-radius:14px; background:#000; }
/* Actividad / timer */
.activity-shell { width:min(920px,100%); margin:0 auto; }
.activity-sticky { position:sticky; z-index:40; top:86px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:12px 15px; }
.activity-timer { display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid #a7f3d0; border-radius:999px; color:#047857; background:#ecfdf5; font-weight:900; font-variant-numeric:tabular-nums; }
.activity-timer.mid { color:#a16207; border-color:#fde68a; background:#fffbeb; }
.activity-timer.low { color:#be123c; border-color:#fecdd3; background:#fff1f2; animation:studentPulse 1s infinite; }
@keyframes studentPulse { 50% { transform:scale(1.025); } }
.activity-progress { flex:1; max-width:360px; }
.activity-progress-meta { display:flex; justify-content:space-between; margin-bottom:6px; color:var(--student-muted); font-size:11px; font-weight:750; }
.activity-progress-track { height:8px; overflow:hidden; border-radius:999px; background:var(--student-line); }
.activity-progress-fill { height:100%; border-radius:inherit; background:var(--student-brand); transition:width .2s ease; }
.activity-question { padding:20px; margin-bottom:14px; }
.activity-question-head { display:flex; align-items:flex-start; gap:12px; }
.activity-question-number { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#17120a; background:var(--student-brand); font-weight:900; }
.activity-question h3 { margin:4px 0 0; font-size:15px; line-height:1.5; }
.activity-options { display:grid; gap:9px; margin-top:16px; }
.activity-option { display:grid; grid-template-columns:auto 1fr; align-items:flex-start; gap:10px; padding:12px 13px; border:1px solid var(--student-line); border-radius:13px; cursor:pointer; transition:.13s ease; }
.activity-option:hover { border-color:rgba(var(--student-brand-rgb),.65); background:rgba(var(--student-brand-rgb),.04); }
.activity-option.selected { border-color:var(--student-brand); background:rgba(var(--student-brand-rgb),.11); box-shadow:0 0 0 2px rgba(var(--student-brand-rgb),.08); }
.activity-option.is-disabled { cursor:not-allowed; opacity:.72; }
.activity-option.is-disabled:hover { border-color:var(--student-line); background:transparent; }
.activity-option.is-disabled.selected:hover { border-color:var(--student-brand); background:rgba(var(--student-brand-rgb),.11); }
.activity-option input { margin-top:3px; accent-color:var(--student-brand); }
.activity-footer { position:sticky; z-index:35; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; }
.activity-footer > span { color:var(--student-muted); font-size:12px; }
.activity-inline-alert { margin:0 0 14px; }
.activity-back-actions,.activity-result-actions { margin-top:16px; }
.activity-hero { margin-bottom:14px; background:linear-gradient(135deg,rgba(var(--student-brand-rgb),.14),var(--student-card)); }
.activity-hero h1 { margin:6px 0; }
.activity-hero p,.activity-result-hero p,.activity-confirm-card > p { margin:0; color:var(--student-muted); }
.activity-result-hero h1 { margin:5px 0 7px; }
.activity-confirm-card { max-width:440px; }
.activity-confirm-warning { margin-bottom:14px; }
.activity-result { margin-top:18px; }
.activity-result-hero { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:20px; }
.activity-result-score { width:84px; height:84px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--student-success),#047857); font-size:25px; font-weight:900; }
.activity-review { display:grid; gap:10px; margin-top:14px; }
.activity-review-item { padding:14px; border:1px solid var(--student-line); border-left:4px solid var(--student-line); border-radius:13px; background:var(--student-card); }
.activity-review-item.ok { border-left-color:var(--student-success); }
.activity-review-item.bad { border-left-color:var(--student-danger); }
.activity-review-item.unanswered { border-left-color:var(--student-warning); }
.activity-review-item h4 { margin:0 0 8px; font-size:13px; }
.activity-review-item p { margin:3px 0; color:var(--student-muted); font-size:12px; }
/* receipt */
.receipt-screen { min-height:100vh; padding:24px; background:#eef1f6; }
.receipt-toolbar { width:min(920px,100%); display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 auto 18px; padding:14px 16px; border:1px solid #e3e7ef; border-radius:16px; background:#fff; box-shadow:0 12px 30px rgba(15,23,42,.08); color:#202438; }
.receipt-toolbar-actions { display:flex; gap:8px; }
.receipt-paper { position:relative; box-sizing:border-box; width:80mm; min-height:150mm; margin:0 auto; padding:6mm 5mm; overflow:hidden; background:#fff; color:#111827; font-family:Arial,Helvetica,sans-serif; font-size:10.5px; line-height:1.35; box-shadow:0 18px 48px rgba(15,23,42,.16); }
.receipt-brand,.receipt-document,.receipt-info,.receipt-detail,.receipt-totals,.receipt-payments,.receipt-note,.receipt-electronic,.receipt-footer { padding:3mm 0; border-bottom:1px dashed #687083; }
.receipt-brand { padding-top:0; text-align:center; }
.receipt-brand img { max-height:16mm; object-fit:contain; }
.receipt-brand h1 { margin:1mm 0; font-size:15px; }
.receipt-document,.receipt-electronic,.receipt-footer { text-align:center; }
.receipt-document strong { display:block; font-size:15px; }
.receipt-info-row { display:grid; grid-template-columns:25mm minmax(0,1fr); gap:2mm; margin:1.2mm 0; }
.receipt-info-row span { color:#596174; }
.receipt-info-row strong { text-align:right; overflow-wrap:anywhere; }
.receipt-detail-head,.receipt-detail-row { display:grid; grid-template-columns:minmax(0,1fr) 9mm 16mm 17mm; gap:1mm; align-items:start; }
.receipt-detail-head { padding-bottom:1.5mm; border-bottom:1px solid #d2d6df; color:#596174; font-size:8px; font-weight:900; text-transform:uppercase; }
.receipt-detail-row { padding:2mm 0; border-bottom:1px dotted #d6dae2; }
.receipt-detail-row > :not(:first-child),.receipt-detail-head > :not(:first-child) { text-align:right; }
.receipt-totals > div,.receipt-payment { display:flex; justify-content:space-between; gap:8px; margin:1mm 0; }
.receipt-total-grand { padding-top:1.5mm; border-top:1px solid #111827; font-size:13px; font-weight:900; }
.receipt-qr { width:32mm; margin:2mm auto; }
.receipt-qr svg { width:100%; height:auto; }
.receipt-footer { border-bottom:0; }
.receipt-void { position:absolute; z-index:3; top:48%; left:-8mm; width:96mm; transform:rotate(-28deg); border:2px solid rgba(190,18,60,.55); color:rgba(190,18,60,.55); font-size:25px; font-weight:900; letter-spacing:.18em; text-align:center; pointer-events:none; }
@media (max-width:1024px) {
    .student-sidebar { transform:translateX(calc(-100% - 24px)); }
    .student-shell.menu-open .student-sidebar { transform:translateX(0); }
    .student-shell.menu-open .student-overlay { display:block; }
    .student-main { margin-left:0; padding:10px 12px 96px; }
    .student-mobile-toggle { display:grid; }
    .student-grid--stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .student-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .student-bottom-nav { position:fixed; z-index:65; left:10px; right:10px; bottom:10px; display:grid; grid-template-columns:repeat(5,1fr); min-height:62px; padding:6px; border:1px solid var(--student-line); border-radius:18px; background:color-mix(in srgb,var(--student-card) 94%,transparent); backdrop-filter:blur(18px); box-shadow:0 14px 40px rgba(15,20,35,.18); }
    .student-bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:12px; color:var(--student-muted); text-decoration:none; font-size:9.5px; font-weight:800; }
    .student-bottom-nav a i { font-size:17px; }
    .student-bottom-nav a.active { color:var(--student-ink); background:rgba(var(--student-brand-rgb),.15); }
}
@media (max-width:700px) {
    .student-content { margin-top:12px; }
    .student-page-head { align-items:flex-start; flex-direction:column; }
    .student-grid--stats { grid-template-columns:1fr 1fr; gap:10px; }
    .student-stat { min-height:112px; padding:14px; }
    .student-stat strong { font-size:21px; }
    .student-resource-grid { grid-template-columns:1fr; }
    .student-card-pad { padding:15px; }
    .student-table-wrap { display:none; }
    .student-mobile-cards { display:grid; gap:10px; }
    .student-mobile-card { padding:15px; border:1px solid var(--student-line); border-radius:15px; background:var(--student-card); }
    .student-mobile-card dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 0; }
    .student-mobile-card dt { color:var(--student-muted); font-size:10px; }
    .student-mobile-card dd { margin:2px 0 0; font-size:12px; font-weight:750; }
    .activity-sticky { top:82px; align-items:stretch; flex-direction:column; }
    .activity-progress { max-width:none; }
    .activity-footer { bottom:80px; align-items:stretch; flex-direction:column; }
    .activity-footer .student-btn { width:100%; }
    .receipt-screen { padding:10px; }
    .receipt-toolbar { align-items:stretch; flex-direction:column; }
    .receipt-toolbar-actions { width:100%; }
    .receipt-toolbar-actions .student-btn { flex:1; }
    .receipt-paper { max-width:100%; }
}
@media print {
    @page { size:80mm auto; margin:0; }
    body * { visibility:hidden!important; }
    .receipt-paper,.receipt-paper * { visibility:visible!important; }
    .receipt-paper { position:absolute; inset:0 auto auto 0; width:80mm!important; min-height:0!important; margin:0!important; padding:4mm!important; box-shadow:none!important; }
    .screen-only { display:none!important; }
}

/* Componentes adicionales del portal del alumno */
.student-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.student-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.student-segmented { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--student-line); border-radius:13px; background:color-mix(in srgb,var(--student-card) 92%,#94a3b8); }
.student-segmented button { min-height:36px; padding:0 13px; border:0; border-radius:10px; background:transparent; color:var(--student-muted); font-size:11.5px; font-weight:850; cursor:pointer; }
.student-segmented button.active { color:var(--student-ink); background:var(--student-card); box-shadow:0 4px 12px rgba(15,23,42,.08); }
.student-mobile-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.student-mobile-card-head strong { font-size:13.5px; }
.student-mobile-note { margin:12px 0 0; padding:10px; border-radius:11px; color:var(--student-muted); background:color-mix(in srgb,var(--student-card) 92%,#94a3b8); font-size:11.5px; }
.student-practice-timeline { display:grid; gap:12px; }
.student-practice { display:grid; grid-template-columns:78px minmax(0,1fr); overflow:hidden; border:1px solid var(--student-line); border-radius:16px; background:var(--student-card); }
.student-practice-date { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:126px; padding:12px; border-right:1px solid var(--student-line); color:var(--student-ink); background:color-mix(in srgb,var(--student-card) 91%,#94a3b8); text-decoration:none; }
.student-practice-date strong { font-size:26px; line-height:1; }
.student-practice-date span { margin-top:4px; color:var(--student-muted); font-size:10px; font-weight:900; letter-spacing:.08em; }
.student-practice-date small { margin-top:8px; font-size:11px; font-weight:850; }
.student-practice-body { min-width:0; padding:15px; }
.student-practice-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.student-practice-head h3 { margin:0; font-size:14px; }
.student-practice-head p { margin:5px 0 0; color:var(--student-muted); font-size:11.5px; }
.student-practice-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:13px; color:var(--student-muted); font-size:11.5px; }
.student-practice-note { display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:9px 10px; border-radius:11px; color:var(--student-muted); background:color-mix(in srgb,var(--student-card) 92%,#94a3b8); font-size:11.5px; }
.student-account-alert { margin-bottom:16px; }
.student-money-pending { color:var(--student-danger); font-weight:900; }
.student-money-paid { color:var(--student-success); font-weight:900; }
.student-muted-text { color:var(--student-muted); }
.student-btn--small { min-height:34px; padding:0 11px; border-radius:10px; font-size:11px; }
.student-btn--block { width:100%; }
.student-module--locked { opacity:.82; }
.student-module--locked:hover { transform:none; border-color:var(--student-line); box-shadow:none; }
.student-module-copy { min-width:0; }
.student-module-arrow { color:var(--student-muted); }
.student-resource-copy { min-width:0; }
.student-modal-card--video { width:min(980px,100%); }
.receipt-paper--void { opacity:.9; }
.student-logout-state { width:min(520px,calc(100% - 28px)); margin:80px auto; padding:30px; text-align:center; }
.activity-review-number { float:left; margin-right:7px; color:var(--student-brand); }
.activity-rich { min-width:0; margin-top:2px; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.activity-rich--result { margin-bottom:8px; font-size:13px; }
.activity-rich > :first-child { margin-top:0; }
.activity-rich > :last-child { margin-bottom:0; }
.activity-rich img { display:block; max-width:100%; height:auto; margin:10px auto; border-radius:10px; }
.activity-rich table { width:100%; display:block; overflow-x:auto; border-collapse:collapse; }
.activity-rich th,.activity-rich td { padding:7px; border:1px solid var(--student-line); }
.activity-rich a { color:var(--student-info); text-decoration:underline; }

/* En modo oscuro el chrome se vuelve neutral; la marca permanece en el logo. */
[data-theme="dark"] .student-nav a:hover,
[data-theme="dark"] .student-nav a.active,
[data-theme="dark"] .student-user-card,
[data-theme="dark"] .student-stat::after,
[data-theme="dark"] .student-stat-icon,
[data-theme="dark"] .student-module-icon,
[data-theme="dark"] .student-resource-icon,
[data-theme="dark"] .student-tab.active,
[data-theme="dark"] .student-bottom-nav a.active,
[data-theme="dark"] .activity-option.selected,
[data-theme="dark"] .activity-option:hover {
    color:var(--student-ink);
    background:#25282e;
    box-shadow:none;
}
[data-theme="dark"] .student-nav a.active { box-shadow:inset 3px 0 0 #7f848e; }
[data-theme="dark"] .student-eyebrow,
[data-theme="dark"] .student-stat-icon,
[data-theme="dark"] .student-module-icon,
[data-theme="dark"] .student-resource-icon,
[data-theme="dark"] .activity-review-number { color:#d7dae0; }
[data-theme="dark"] .student-btn--primary { color:#111318; background:#d7dae0; box-shadow:none; }
[data-theme="dark"] .activity-question-number { color:#111318; background:#d7dae0; }
[data-theme="dark"] .activity-progress-fill { background:#aeb3bc; }
[data-theme="dark"] .student-search input:focus,
[data-theme="dark"] .student-field input:focus,
[data-theme="dark"] .student-field select:focus,
[data-theme="dark"] .student-field textarea:focus { border-color:#7f848e; box-shadow:0 0 0 4px rgba(127,132,142,.15); }
[data-theme="dark"] .student-badge--success,
[data-theme="dark"] .student-badge--warning,
[data-theme="dark"] .student-badge--danger,
[data-theme="dark"] .student-badge--info { color:#e3e5e9; background:#292c33; }
[data-theme="dark"] .student-alert--success,
[data-theme="dark"] .student-alert--warning,
[data-theme="dark"] .student-alert--danger { color:#e3e5e9; border-color:#353941; background:#202329; }

@media (max-width:700px) {
    .student-grid--three { grid-template-columns:1fr 1fr; }
    .student-list-toolbar { align-items:stretch; flex-direction:column; }
    .student-segmented { width:100%; }
    .student-segmented button { flex:1; }
    .student-practice { grid-template-columns:64px minmax(0,1fr); }
    .student-practice-date { min-height:140px; }
    .student-practice-head { flex-direction:column; }
    .activity-result-hero { grid-template-columns:1fr; text-align:center; }
    .activity-result-score { margin:0 auto; }
}

@media (max-width:430px) {
    .student-grid--stats,.student-grid--three { grid-template-columns:1fr; }
    .student-mobile-card dl { grid-template-columns:1fr; }
    .student-topbar-title span { display:none; }
    .student-practice { grid-template-columns:1fr; }
    .student-practice-date { min-height:auto; flex-direction:row; gap:8px; border-right:0; border-bottom:1px solid var(--student-line); }
    .student-practice-date strong { font-size:18px; }
    .student-practice-date span,.student-practice-date small { margin:0; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TRAINER — refinamiento visual premium v4
   Mejora contraste de iconos, botones, navegación y escala visual.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --student-brand: #f5a623;
    --student-brand-rgb: 245, 166, 35;
    --student-brand-strong: #df8d00;
    --student-accent: #211a58;
}

.student-nav a {
    min-height: 50px;
    gap: 10px;
    padding: 0 11px;
    border-radius: 14px;
}

.student-nav a i {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #7b8395;
    background: #f3f5f8;
    font-size: 14px;
    transition: .16s ease;
}

.student-nav a:hover i,
.student-nav a.active i {
    color: #8a5200;
    border-color: rgba(var(--student-brand-rgb), .24);
    background: rgba(var(--student-brand-rgb), .16);
}

.student-nav a.active {
    background: linear-gradient(90deg, rgba(var(--student-brand-rgb), .18), rgba(var(--student-brand-rgb), .07));
    box-shadow: inset 3px 0 0 var(--student-brand-strong);
}

.student-icon-btn {
    transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}

.student-icon-btn:hover {
    transform: translateY(-1px);
    color: #8a5200;
    border-color: rgba(var(--student-brand-rgb), .40);
    background: rgba(var(--student-brand-rgb), .10);
}

.student-btn {
    min-height: 44px;
    border-radius: 12px;
    font-size: 12px;
    letter-spacing: .01em;
}

.student-btn i {
    flex: 0 0 auto;
    font-size: 13px;
}

.student-btn--primary {
    color: #fff;
    border-color: rgba(214, 130, 0, .18);
    background: linear-gradient(135deg, #ffbc42 0%, #f4a51c 55%, #df8d00 100%);
    box-shadow: 0 10px 24px rgba(223, 141, 0, .24);
}

.student-btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(223, 141, 0, .30);
}

.student-btn--ghost:hover:not(:disabled) {
    border-color: rgba(var(--student-brand-rgb), .48);
    color: #8a5200;
    background: rgba(var(--student-brand-rgb), .08);
}

.student-module-icon,
.student-resource-icon,
.student-stat-icon {
    border: 1px solid rgba(var(--student-brand-rgb), .20);
}

.student-module-icon i,
.student-resource-icon i,
.student-stat-icon i,
.student-tab i,
.student-icon-btn i {
    line-height: 1;
}

.student-tab.active {
    color: #6f4300;
    background: linear-gradient(135deg, rgba(var(--student-brand-rgb), .19), rgba(var(--student-brand-rgb), .09));
}

.student-resource {
    box-shadow: 0 6px 20px rgba(25, 30, 48, .035);
}

.student-modal {
    background: rgba(8, 10, 16, .72);
    backdrop-filter: blur(8px);
}

[data-theme="dark"] .student-nav a i {
    color: #c2c6cf;
    border-color: #32353c;
    background: #25282e;
}

[data-theme="dark"] .student-nav a:hover i,
[data-theme="dark"] .student-nav a.active i {
    color: #fff;
    border-color: #4a4e57;
    background: #30343b;
}

[data-theme="dark"] .student-btn--primary {
    color: #111318;
    border-color: #c5c9d0;
    background: #d7dae0;
    box-shadow: none;
}

/* Iconografía robusta: solo Font Awesome Solid/Brands disponibles en el template. */
.student-avatar--icon {
    display: grid;
    place-items: center;
    color: #925900;
    background: linear-gradient(145deg, #fff8e7, #fff);
    font-size: 15px;
}

.student-shell i[class*="fa-"] {
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   RESULTADO DE ACTIVIDAD (evaluación / balotario) — vista premium
   Reemplaza visualmente a .activity-result-hero / .activity-review
   (esas reglas viejas quedan arriba sin usarse; puedes borrarlas
   cuando confirmes que el nuevo markup funciona).
   ═══════════════════════════════════════════════════════════════ */

.result-score-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    margin-top: 18px;
    padding: 26px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 95% 10%, rgba(var(--student-brand-rgb), .12), transparent 40%),
        var(--student-card);
}

.result-ring-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
}

.result-ring {
    width: 132px;
    height: 132px;
    transform: rotate(-90deg);
}

.result-ring-track {
    fill: none;
    stroke: var(--student-line);
    stroke-width: 10;
}

.result-ring-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset .5s ease;
}

.result-ring-fill--success { stroke: var(--student-success); }
.result-ring-fill--warning { stroke: var(--student-warning); }
.result-ring-fill--danger  { stroke: var(--student-danger); }

.result-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.result-ring-value {
    font: 900 30px/1 "Sora", "DM Sans", sans-serif;
    color: var(--student-ink);
}

.result-ring-value--success { color: var(--student-success); }
.result-ring-value--warning { color: var(--student-warning); }
.result-ring-value--danger  { color: var(--student-danger); }

.result-ring-label {
    color: var(--student-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.result-score-copy {
    min-width: 0;
}

.result-score-copy h1 {
    margin: 5px 0 6px;
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.25;
}

.result-score-copy p {
    margin: 0;
    color: var(--student-muted);
}

.result-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.result-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 850;
}

.result-chip--ok { color: #047857; background: #ecfdf5; }
.result-chip--bad { color: #be123c; background: #fff1f2; }
.result-chip--warn { color: #a16207; background: #fffbeb; }

.result-chip--grado.result-chip--success { color: #047857; background: #ecfdf5; }
.result-chip--grado.result-chip--warning { color: #a16207; background: #fffbeb; }
.result-chip--grado.result-chip--danger { color: #be123c; background: #fff1f2; }

.result-review {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.result-question-card {
    padding: 18px;
    border: 1px solid var(--student-line);
    border-left: 4px solid var(--student-line);
    border-radius: 16px;
    background: var(--student-card);
}

.result-question-card.ok { border-left-color: var(--student-success); }
.result-question-card.bad { border-left-color: var(--student-danger); }
.result-question-card.unanswered { border-left-color: var(--student-warning); }

.result-question-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
}

.result-question-number {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--student-ink);
    background: rgba(var(--student-brand-rgb), .14);
    font-size: 12.5px;
    font-weight: 900;
}

.result-question-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.result-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.result-answer-col {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--student-line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--student-card) 94%, #94a3b8);
}

.result-answer-col.is-correct {
    border-color: rgba(5, 150, 105, .35);
    background: #ecfdf5;
}

.result-answer-col.is-incorrect {
    border-color: rgba(220, 38, 38, .30);
    background: #fff1f2;
}

.result-answer-col.is-empty {
    border-color: rgba(217, 119, 6, .30);
    background: #fffbeb;
}

.result-answer-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--student-muted);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.result-answer-col.is-correct .result-answer-label { color: #047857; }
.result-answer-col.is-incorrect .result-answer-label { color: #be123c; }
.result-answer-col.is-empty .result-answer-label { color: #a16207; }

.result-answer-value {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

[data-theme="dark"] .result-ring-track { stroke: var(--student-line); }

[data-theme="dark"] .result-chip--ok,
[data-theme="dark"] .result-chip--bad,
[data-theme="dark"] .result-chip--warn,
[data-theme="dark"] .result-chip--grado {
    color: #e3e5e9;
    background: #292c33;
}

[data-theme="dark"] .result-answer-col {
    background: #1c1f25;
}

[data-theme="dark"] .result-answer-col.is-correct,
[data-theme="dark"] .result-answer-col.is-incorrect,
[data-theme="dark"] .result-answer-col.is-empty {
    background: #1c1f25;
    border-color: #353941;
}

@media (max-width: 700px) {
    .result-score-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 20px;
    }

    .result-chip-row {
        justify-content: center;
    }

    .result-answer-grid {
        grid-template-columns: 1fr;
    }

    .result-question-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .result-question-badge {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   POPUP DE PERFIL — bottom nav móvil (aula virtual)
   El tab "Perfil" abre este panel con Mi perfil / Cambiar contraseña /
   Cambiar tema / Cerrar sesión, en vez de navegar directo.
   ═══════════════════════════════════════════════════════════════ */

.student-bottom-nav .student-bn-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    background: none;
    color: var(--student-muted);
    text-decoration: none;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
}

.student-bottom-nav .student-bn-toggle i {
    font-size: 17px;
    line-height: 1;
}

.student-bottom-nav .student-bn-toggle.active-tab {
    color: var(--student-ink);
    background: rgba(var(--student-brand-rgb), .15);
}

.student-bn-pop {
    display: none;
    position: fixed;
    z-index: 9999;
    min-width: 208px;
    max-width: 260px;
    padding: 8px;
    border: 1px solid var(--student-line);
    border-radius: 16px;
    background: var(--student-card);
    box-shadow: 0 -10px 34px rgba(15, 20, 35, .18);
}

.student-bn-pop.open {
    display: block;
}

.student-bn-pop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: var(--student-ink);
    text-decoration: none;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.student-bn-pop-item:hover,
.student-bn-pop-item:active {
    background: rgba(var(--student-brand-rgb), .08);
}

.student-bn-pop-item i {
    width: 18px;
    text-align: center;
    color: var(--student-muted);
}

.student-bn-pop-item--danger,
.student-bn-pop-item--danger i {
    color: var(--student-danger);
}

.student-bn-pop-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--student-line);
}

[data-theme="dark"] .student-bn-pop-item--danger,
[data-theme="dark"] .student-bn-pop-item--danger i {
    color: #f87171;
}

@media (min-width: 1025px) {
    .student-bn-pop { display: none !important; }
}