/* ============================================================
   REDPRO — Capa de tema oscuro
   Archivo: assets/css/redpro.css
   ============================================================
   Se carga DESPUÉS de Bootstrap y de main.css, y convierte toda
   la plataforma al sistema descrito en DESIGN-SYSTEM.md:
   fondo casi negro azulado con aurora lenta, superficies de
   vidrio esmerilado con canto luminoso, acento cian-azul y
   magenta reservado para acciones.

   Adaptación para panel de datos
   ------------------------------
   La guía original está escrita para un sitio de presentación.
   Aquí hay tablas, formularios largos y listas densas, así que:
     · El vidrio se usa en CONTENEDORES (tarjetas, paneles).
     · Las filas de tabla y las opciones de filtro NO llevan
       desenfoque propio: se apoyan en el velo de su contenedor.
       Anidar backdrop-filter es caro de pintar y enturbia el texto.
     · El texto de datos nunca baja de --t-mid.
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
    /* Superficies */
    --g-bg-0: #05081c;
    --g-bg-1: #0a1030;
    --g-bg-2: #0e1642;

    /* Acentos */
    --cyan:      #22d3ee;
    --cyan-2:    #67e8f9;
    --blue:      #3b82f6;
    --blue-2:    #60a5fa;
    --g-blue:    #1B2A6B;
    --g-blue-2:  #3d5ce0;
    --magenta:   #D6006E;
    --magenta-2: #ff4fa0;
    --violet:    #8b5cf6;
    --green:     #22c55e;
    --green-2:   #4ade80;

    /* Texto sobre oscuro */
    --t-hi:    #ffffff;
    --t-mid:   rgba(255,255,255,.76);
    --t-low:   rgba(255,255,255,.55);
    --t-faint: rgba(255,255,255,.38);

    /* Vidrio */
    --glass-fill:        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    --glass-fill-strong: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
    --glass-blur:        blur(22px) saturate(180%);
    --glass-blur-lg:     blur(34px) saturate(190%);
    --glass-edge:
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -1px 0 rgba(255,255,255,.05),
        inset 1px 0 0 rgba(255,255,255,.08),
        inset -1px 0 0 rgba(255,255,255,.08);
    --glass-lift:    0 18px 46px rgba(0,0,0,.42);
    --glass-lift-hi: 0 26px 70px rgba(0,0,0,.55);

    /* Radios concéntricos */
    --r-xl: 30px;
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 10px;

    /* Curva */
    --ease-glass: cubic-bezier(.22, 1, .36, 1);

    /* Reasignación de los tokens de main.css al tema oscuro */
    --color-primario:    #05081c;
    --color-secundario:  var(--cyan);
    --color-exito:       var(--green);
    --color-alerta:      #f59e0b;
    --color-peligro:     var(--magenta);
    --color-acento:      var(--cyan-2);
    --color-gris-claro:  transparent;
    --color-gris-medio:  rgba(255,255,255,.13);
    --color-texto:       var(--t-mid);
    --color-texto-muted: var(--t-low);
    --color-blanco:      var(--t-hi);

    --border-radius:     var(--r-md);
    --border-radius-lg:  var(--r-lg);

    --font-base:  'Roboto', system-ui, -apple-system, sans-serif;
    --font-title: 'Poppins', 'Raleway', sans-serif;
}

/* ── 2. Base ───────────────────────────────────────────────── */
/* El color va en <html> y no solo en <body>: body lleva la clase
   .app-layout, que más abajo se pone transparente para dejar ver el
   fondo global, y ganaría por especificidad. Sin esto, cualquier
   pantalla que no incluya las capas .g-* saldría en blanco. */
html {
    background: var(--g-bg-0);
    color-scheme: dark;
}
body {
    background: var(--g-bg-0);
    color: var(--t-mid);
    font-family: var(--font-base);
}

h1, h2, h3, h4, h5, h6 { color: var(--t-hi); font-family: var(--font-title); }
.text-muted { color: var(--t-low) !important; }
.text-dark   { color: var(--t-mid) !important; }
.text-secondary { color: var(--t-low) !important; }
a { color: var(--cyan-2); }
a:hover { color: var(--cyan); }
hr { border-color: rgba(255,255,255,.12); opacity: 1; }
small, .small { color: inherit; }

/* Fondos claros heredados de Bootstrap que romperían el tema */
.bg-white, .bg-light, .bg-body, .bg-body-tertiary, .bg-light-subtle {
    background: transparent !important;
    color: var(--t-mid);
}

/* ── 3. Fondo global ───────────────────────────────────────── */
/* Sin orbes de colores ni aurora animada: en un panel de datos los
   resplandores de fondo compiten con la lectura de tablas y cifras.
   Queda un degradado oscuro muy sutil y la retícula técnica. */
.g-bg, .g-grid {
    position: fixed; inset: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}
.g-bg {
    z-index: -3;
    background: linear-gradient(165deg, #0a1030 0%, var(--g-bg-0) 60%, #060a20 100%);
}

.g-grid {
    z-index: -2;
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
            mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
}

/* Si alguna plantilla todavía trae el bloque de orbes, no se pinta */
.g-orbs { display: none !important; }

/* ── 4. Primitiva de vidrio ────────────────────────────────── */
.glass, .card, .modal-content, .dropdown-menu {
    position: relative;
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r-lg);
    box-shadow: var(--glass-edge), var(--glass-lift);
    color: var(--t-mid);
    isolation: isolate;
}

/* Canto especular: solo pinta el borde, recortado con mask-composite */
.glass::before, .card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,.06) 28%,
        rgba(255,255,255,0)   52%,
        rgba(255,255,255,.10) 82%,
        rgba(255,255,255,.30) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

.card-header, .card-footer {
    background: transparent !important;
    border-color: rgba(255,255,255,.10) !important;
    color: var(--t-hi);
}
.card-title, .card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 { color: var(--t-hi); }

/* ── 5. App shell ──────────────────────────────────────────── */
.app-layout, .app-container, .main-content, .page-content { background: transparent; }

.sidebar {
    background: linear-gradient(180deg, rgba(10,16,48,.92), rgba(5,8,28,.96));
    backdrop-filter: var(--glass-blur-lg);
    -webkit-backdrop-filter: var(--glass-blur-lg);
    border-right: 1px solid rgba(255,255,255,.10);
    box-shadow: 4px 0 40px rgba(0,0,0,.5);
}
.sidebar-brand-name {
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(100deg, var(--cyan-2), var(--blue-2) 70%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sidebar-brand-sub {
    color: var(--t-faint);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-size: .62rem;
}
.sidebar-logo-icon {
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #05081c;
    box-shadow: 0 0 22px rgba(34,211,238,.45);
}
.sidebar-divider { border-color: rgba(255,255,255,.08); }
.sidebar-section-title { color: var(--t-faint); letter-spacing: 1.4px; }
.sidebar-user-name { color: var(--t-hi); }
.sidebar-user-rol  { color: var(--t-low); }
.user-avatar, .user-avatar-sm {
    background: linear-gradient(135deg, var(--g-blue), var(--g-blue-2));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.sidebar-link {
    color: var(--t-low);
    border-radius: var(--r-sm);
    transition: color .25s, background .25s, transform .25s var(--ease-glass);
}
.sidebar-link:hover {
    color: var(--t-hi);
    background: rgba(255,255,255,.06);
    transform: translateX(3px);
}
.sidebar-link.active {
    color: var(--t-hi);
    background: linear-gradient(100deg, rgba(34,211,238,.18), rgba(59,130,246,.10));
    box-shadow: inset 0 0 0 1px rgba(34,211,238,.30);
}
.sidebar-link.active i { color: var(--cyan); }

.topbar {
    background: rgba(10,16,48,.55);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.topbar-title { color: var(--t-hi); font-family: var(--font-title); font-weight: 700; }
.btn-ghost-topbar, .btn-ghost-sidebar { color: var(--t-low); border: 0; background: transparent; }
.btn-ghost-topbar:hover, .btn-ghost-sidebar:hover { color: var(--cyan-2); background: rgba(255,255,255,.07); }

/* ── 6. Botones ────────────────────────────────────────────── */
.btn {
    border-radius: 50px;
    font-weight: 700;
    transition: transform .4s var(--ease-glass), box-shadow .4s var(--ease-glass), background .4s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: linear-gradient(135deg, var(--magenta), var(--magenta-2));
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    box-shadow: 0 10px 32px rgba(214,0,110,.45), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--magenta-2), var(--magenta));
    box-shadow: 0 18px 46px rgba(214,0,110,.62), inset 0 1px 0 rgba(255,255,255,.55);
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-light {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--t-hi);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-outline-primary:hover {
    background: rgba(34,211,238,.16);
    border-color: rgba(34,211,238,.55);
    color: var(--t-hi);
}
.btn-outline-secondary:hover, .btn-outline-light:hover {
    background: rgba(255,255,255,.14); color: var(--t-hi);
}
.btn-outline-danger:hover {
    background: rgba(214,0,110,.20); border-color: var(--magenta-2); color: #fff;
}
.btn-success { background: linear-gradient(135deg, var(--green), var(--green-2)); border: 0; color: #05230f; }
.btn-light   { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: var(--t-hi); }

/* ── 7. Formularios ────────────────────────────────────────── */
.form-control, .form-select {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--r-sm);
    color: var(--t-hi);
}
.form-control::placeholder { color: var(--t-faint); }
.form-control:focus, .form-select:focus {
    background: rgba(255,255,255,.10);
    border-color: rgba(34,211,238,.6);
    box-shadow: 0 0 0 .2rem rgba(34,211,238,.18);
    color: var(--t-hi);
}
/* Las opciones nativas del select las pinta el sistema: sin fondo oscuro
   explícito quedarían texto blanco sobre blanco en Windows. */
.form-select option, .form-control option { background: #0a1030; color: #fff; }

.form-label { color: var(--t-mid); font-weight: 600; }
.form-text  { color: var(--t-faint); }
.form-check-input {
    background-color: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.28);
}
.form-check-input:checked {
    background-color: var(--cyan);
    border-color: var(--cyan);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(34,211,238,.25); }
.form-check-label { color: var(--t-mid); }
.input-group-text {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
    color: var(--t-low);
}
.form-range::-webkit-slider-thumb { background: var(--cyan); }
.form-range::-moz-range-thumb     { background: var(--cyan); }

/* ── 8. Tablas ─────────────────────────────────────────────── */
/* Superficie propia y legible: sin desenfoque anidado. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--t-mid);
    color: var(--t-mid);
    border-color: rgba(255,255,255,.10);
}
.table thead th {
    background: rgba(5,8,28,.55);
    color: var(--t-faint);
    border-bottom: 1px solid rgba(255,255,255,.14);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: .7rem;
    font-weight: 700;
}
.table tbody td {
    border-color: rgba(255,255,255,.07);
    color: var(--t-mid);
    vertical-align: middle;
}
.table tbody tr { transition: background .25s; }
.table-hover tbody tr:hover > * {
    background: rgba(34,211,238,.07);
    color: var(--t-hi);
}
.table > :not(caption) > * > * { background-color: transparent; }

/* ── 9. Componentes de Bootstrap ───────────────────────────── */
.nav-tabs { border-bottom-color: rgba(255,255,255,.12); }
.nav-tabs .nav-link {
    color: var(--t-low);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--t-hi); border-bottom-color: rgba(34,211,238,.35); }
.nav-tabs .nav-link.active {
    color: var(--cyan-2);
    background: transparent;
    border-bottom-color: var(--cyan);
}

.list-group { background: transparent; }
.list-group-item {
    background: transparent;
    border-color: rgba(255,255,255,.08);
    color: var(--t-mid);
}
.list-group-item-action:hover { background: rgba(255,255,255,.06); color: var(--t-hi); }
.list-group-item.active {
    background: linear-gradient(100deg, rgba(34,211,238,.20), rgba(59,130,246,.12));
    border-color: rgba(34,211,238,.35);
    color: var(--t-hi);
}

.accordion, .accordion-item { background: transparent; border-color: rgba(255,255,255,.08); }
.accordion-button {
    background: transparent !important;
    color: var(--t-mid) !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) { color: var(--cyan-2) !important; }
.accordion-button::after { filter: invert(1) opacity(.6); }
.accordion-body { background: rgba(255,255,255,.025); }

.dropdown-menu { border-radius: var(--r-md); }
.dropdown-item { color: var(--t-mid); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255,255,255,.08); color: var(--t-hi); }
.dropdown-divider { border-color: rgba(255,255,255,.10); }

.modal-content { border-radius: var(--r-lg); }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.10); }
.modal-title { color: var(--t-hi); }
.modal-backdrop.show { opacity: .72; }

/* Paginación */
.pagination { --bs-pagination-bg: transparent; margin-bottom: 0; }
.page-link {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color: var(--t-mid);
    border-radius: var(--r-sm);
    margin: 0 2px;
}
.page-link:hover {
    background: rgba(34,211,238,.16);
    border-color: rgba(34,211,238,.45);
    color: var(--t-hi);
}
.page-item.active .page-link {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #05081c;
    font-weight: 700;
}
.page-item.disabled .page-link {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08);
    color: var(--t-faint);
}

.progress { background: rgba(255,255,255,.08); border-radius: 50px; }
.progress-bar { background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.progress-bar.bg-success { background: linear-gradient(90deg, var(--green), var(--green-2)); }
.progress-bar.bg-warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-bar.bg-danger  { background: linear-gradient(90deg, var(--magenta), var(--magenta-2)); }
.progress-bar.bg-primary { background: linear-gradient(90deg, var(--cyan), var(--blue)); }

/* Cierre de alertas y modales: el icono nativo es negro */
.btn-close { filter: invert(1) grayscale(1) opacity(.7); }
.btn-close:hover { filter: invert(1) grayscale(1) opacity(1); }

/* ── 10. Alertas y badges ──────────────────────────────────── */
.alert {
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--t-mid);
}
.alert-success { border-color: rgba(34,197,94,.45);  background: rgba(34,197,94,.10);  color: var(--green-2); }
.alert-danger  { border-color: rgba(214,0,110,.48);  background: rgba(214,0,110,.10);  color: var(--magenta-2); }
.alert-warning { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.10); color: #fcd34d; }
.alert-info    { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.10); color: var(--cyan-2); }
.alert-light   { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--t-mid); }
.alert h6, .alert strong { color: inherit; }

.badge { border-radius: var(--r-sm); font-weight: 700; letter-spacing: .02em; }

/* ── El texto de una etiqueta lo decide SU FONDO ──
   Bootstrap combina `bg-X bg-opacity-10 text-X` para lograr un chip
   suave. Aquí los fondos son sólidos, así que `text-X` (un tono claro)
   quedaba ilegible encima — por ejemplo cian claro sobre cian.
   Estos selectores llevan dos clases, así que ganan por especificidad
   sobre `.text-X`, que solo lleva una. */
.badge.bg-primary   { color: #05081c !important; }   /* cian    */
.badge.bg-success   { color: #05230f !important; }   /* verde   */
.badge.bg-warning   { color: #2b1a00 !important; }   /* ámbar   */
.badge.bg-danger    { color: #ffffff !important; }   /* magenta */
.badge.bg-secondary { color: var(--t-hi) !important; }
/* El azul medio (#3b82f6) con texto blanco solo daba 3.68 de contraste,
   por debajo del mínimo legible. Para etiqueta se usa un azul más
   profundo, que con blanco sube a más de 6. */
.badge.bg-info      { background: #1d4ed8 !important; color: #ffffff !important; }

/* Fuera de una etiqueta, bg-opacity sí debe verse translúcido
   (avisos y recuadros de apoyo), y ahí el texto claro sí funciona. */
:not(.badge).bg-primary.bg-opacity-10 { background: rgba(34,211,238,.12) !important; }
:not(.badge).bg-success.bg-opacity-10 { background: rgba(34,197,94,.12) !important; }
:not(.badge).bg-warning.bg-opacity-10 { background: rgba(245,158,11,.12) !important; }
:not(.badge).bg-info.bg-opacity-10    { background: rgba(59,130,246,.12) !important; }
:not(.badge).bg-danger.bg-opacity-10  { background: rgba(214,0,110,.12) !important; }
.bg-primary   { background: var(--cyan) !important;  color: #05081c !important; }
.bg-secondary { background: rgba(255,255,255,.16) !important; color: var(--t-hi) !important; }
.bg-success   { background: var(--green) !important; color: #05230f !important; }
.bg-danger    { background: var(--magenta) !important; color: #fff !important; }
.bg-warning   { background: #f59e0b !important; color: #2b1a00 !important; }
.bg-info      { background: var(--blue) !important; color: #fff !important; }

/* Variantes suaves (Bootstrap 5.3) */
.bg-primary-subtle   { background: rgba(34,211,238,.14) !important; }
.bg-success-subtle   { background: rgba(34,197,94,.14) !important; }
.bg-danger-subtle    { background: rgba(214,0,110,.14) !important; }
.bg-warning-subtle   { background: rgba(245,158,11,.14) !important; }
.bg-secondary-subtle { background: rgba(255,255,255,.10) !important; }
.text-primary   { color: var(--cyan-2) !important; }
.text-success   { color: var(--green-2) !important; }
.text-danger    { color: var(--magenta-2) !important; }
.text-warning   { color: #fcd34d !important; }
.border-primary-subtle   { border-color: rgba(34,211,238,.35) !important; }
.border-success-subtle   { border-color: rgba(34,197,94,.35) !important; }
.border-danger-subtle    { border-color: rgba(214,0,110,.35) !important; }
.border { border-color: rgba(255,255,255,.12) !important; }
.border-bottom { border-bottom-color: rgba(255,255,255,.10) !important; }
.border-top    { border-top-color: rgba(255,255,255,.10) !important; }

/* ── 11. KPIs del dashboard ────────────────────────────────── */
.kpi-card {
    background: var(--glass-fill);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r-lg);
    transition: transform .45s var(--ease-glass), box-shadow .45s var(--ease-glass);
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--glass-lift-hi); }
.kpi-value { color: var(--t-hi); font-family: var(--font-title); font-weight: 800; }
.kpi-label { color: var(--t-low); }
.kpi-sub   { color: var(--t-faint); }
.kpi-blue::before   { background: var(--cyan) !important; }
.kpi-gold::before   { background: var(--cyan-2) !important; }
.kpi-green::before  { background: var(--green) !important; }
.kpi-purple::before { background: var(--violet) !important; }
.kpi-blue .kpi-icon   { background: rgba(34,211,238,.14) !important; color: var(--cyan) !important; }
.kpi-gold .kpi-icon   { background: rgba(103,232,249,.14) !important; color: var(--cyan-2) !important; }
.kpi-green .kpi-icon  { background: rgba(34,197,94,.14) !important; color: var(--green-2) !important; }
.kpi-purple .kpi-icon { background: rgba(139,92,246,.16) !important; color: #c4b5fd !important; }
/* main.css le da fondo blanco: hay que apagarlo explícitamente */
.mini-kpi {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--r-md);
}
.mini-kpi-value { color: var(--t-hi); }
.mini-kpi-label { color: var(--t-low); }

/* Barra de desplazamiento acorde al tema */
::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,.45); }

/* ── 12. Cuestionario y buscador ───────────────────────────── */
.cuest-numero        { color: var(--cyan); }
.cuest-texto-en      { color: var(--t-faint); }
.cuest-hero-icon     { background: rgba(34,211,238,.12); color: var(--cyan); }
.cuest-step-num      { background: rgba(255,255,255,.10); color: var(--t-mid); }
.cuest-step-num.done { background: var(--green); color: #05230f; }
.cuest-stepper .list-group-item.active .cuest-step-num { background: rgba(255,255,255,.28); color: #fff; }
.cuest-opciones-scroll, .filtro-opciones-scroll {
    border-color: rgba(255,255,255,.12);
    background: rgba(0,0,0,.18);
}
.cuest-tabla-fila { border-bottom-color: rgba(255,255,255,.08); }
.cuest-cta        { border-left-color: var(--cyan) !important; }
.cuest-cta-icon   { background: rgba(34,211,238,.12); color: var(--cyan); }
.cuest-pre        { background: rgba(0,0,0,.28); color: var(--t-mid); }
.cuest-lectura dd { border-bottom-color: rgba(255,255,255,.07); }

.filtro-pregunta > summary        { color: var(--t-low); }
.filtro-pregunta > summary:hover  { color: var(--cyan-2); }
.filtro-pregunta > summary::before{ color: var(--t-faint); }
.filtros-chips .badge             { background: rgba(34,211,238,.16); color: var(--cyan-2); }
.score-success { border-color: var(--green) !important;   color: var(--green-2) !important;   background: rgba(34,197,94,.08) !important; }
.score-warning { border-color: #f59e0b !important;        color: #fcd34d !important;          background: rgba(245,158,11,.08) !important; }
.score-danger  { border-color: var(--magenta) !important; color: var(--magenta-2) !important; background: rgba(214,0,110,.08) !important; }

.empresa-avatar {
    background: linear-gradient(135deg, var(--g-blue), var(--g-blue-2));
    color: #fff;
}
.pais-combo-menu {
    background: #0a1030;
    border-color: rgba(255,255,255,.16);
    box-shadow: var(--glass-lift);
}
.pais-combo-option { color: var(--t-mid); }
.pais-combo-option:hover, .pais-combo-option.active { background: rgba(255,255,255,.09); color: var(--t-hi); }
.pais-combo-caret, .pais-combo-empty { color: var(--t-faint); }

.footer-app { background: transparent; color: var(--t-faint); border-top: 1px solid rgba(255,255,255,.08); }
.timeline-marker { border-color: var(--cyan); }
.timeline-content { color: var(--t-mid); }
.empty-chart-msg, .empty-chart-msg p { color: var(--t-faint); }

/* ── 13. Login y registro (páginas públicas) ───────────────── */
.login-page    { background: transparent; }
.login-wrapper {
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur-lg);
    -webkit-backdrop-filter: var(--glass-blur-lg);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--r-xl);
    box-shadow: var(--glass-edge), var(--glass-lift-hi);
    overflow: hidden;
}
.login-brand {
    background: linear-gradient(160deg, rgba(27,42,107,.85), rgba(5,8,28,.92));
}
.login-brand-title {
    font-family: var(--font-title);
    background: linear-gradient(100deg, var(--cyan-2), var(--blue-2) 70%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-brand-tagline, .login-feature-item { color: var(--t-low); }
.login-feature-item i { color: var(--cyan); }
.login-logo-icon, .login-logo-icon-sm {
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #05081c;
    box-shadow: 0 0 26px rgba(34,211,238,.45);
}
.login-logo-icon--img, .login-logo-icon-sm--img {
    background: none;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    padding: 0;
}
.login-logo-icon--img {
    width: auto; height: auto;
    max-width: 320px;
}
.login-logo-icon--img img {
    display: block;
    width: 100%;
    height: auto;
}
.login-logo-icon-sm--img {
    width: auto; height: auto;
    max-width: 220px;
}
.login-logo-icon-sm--img img {
    display: block;
    width: 100%;
    height: auto;
}
.sidebar-logo-icon--img {
    width: auto; height: 46px;
    background: none;
    box-shadow: none;
    padding: 0;
}
.sidebar-logo-icon--img img {
    display: block;
    height: 100%;
    width: auto;
}
.login-form-panel  { background: transparent; }
.login-form-title  { color: var(--t-hi); font-family: var(--font-title); }
.login-form-subtitle, .login-security-notice { color: var(--t-low); }
.login-divider span { background: transparent; color: var(--t-faint); }
.login-divider::before { border-color: rgba(255,255,255,.12); }

/* ── 14. Accesibilidad ─────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--magenta-2);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── 15. Barra superior que crece con su contenido ─────────── */
/* main.css le fija una altura (64px, 56px en móvil). Cuando el
   subtítulo se envuelve en varias líneas, el texto se sale de la
   barra y cae ENCIMA del contenido de la página. Aquí la altura
   pasa a ser mínima y la barra puede crecer. */
.topbar {
    height: auto;
    min-height: var(--topbar-height);
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    row-gap: .35rem;
}
.topbar > * { min-width: 0; }           /* deja que el texto se recorte */
.topbar-title {
    font-size: 1.12rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* El subtítulo se limita a dos líneas para que la barra no crezca sin fin */
.topbar small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

/* ── 16. Responsive: el desenfoque es lo más caro de pintar ── */
@media (max-width: 767px) {
    :root {
        --glass-blur:    blur(14px) saturate(160%);
        --glass-blur-lg: blur(18px) saturate(170%);
    }
    .g-grid { background-size: 44px 44px; }
    .page-content { padding-top: 1.25rem; padding-bottom: 1.25rem; }

    /* ── Barra superior compacta ──
       Es sticky: si crece, se come la pantalla. En móvil se queda en
       un solo renglón, el subtítulo se oculta (es texto de apoyo) y
       el título se recorta con puntos suspensivos. */
    .topbar {
        min-height: 56px;
        padding-left: .85rem;
        padding-right: .85rem;
        flex-wrap: nowrap;
    }
    .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
    .topbar-title {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .topbar small { display: none; }

    /* Los botones de la barra no se estiran ni parten palabras */
    .topbar .btn { white-space: nowrap; flex: 0 0 auto; }
    /* Un botón con texto largo se recorta antes que empujar el título */
    .topbar .btn-sm { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

    /* Nada de paneles pegados en móvil: ocupan toda la pantalla */
    .filtros-card, .cuest-stepper-card { position: static; max-height: none; }
    .filtros-scroll { max-height: none; }

    /* Tablas anchas: que se desplacen solas en vez de romper la página */
    .table-responsive-auto, .card-body > .table,
    .card-body > table.table { display: block; overflow-x: auto; }

    /* Las tablas dinámicas del cuestionario apiladas se ven mejor separadas */
    .cuest-tabla-fila { padding-bottom: .85rem; margin-bottom: .85rem; }

    /* Botonera del asistente: que no se salga */
    .card-footer .d-flex { flex-wrap: wrap; }
    .card-footer .btn { flex: 1 1 auto; }

    /* Área táctil mínima cómoda para el dedo */
    .btn, .form-check-input, .page-link { min-height: 34px; }
    .btn-sm { min-height: 34px; }
    .form-check-input { min-width: 1.1em; }

    /* El login ocupa la pantalla completa y apila sus dos mitades */
    .login-wrapper { flex-direction: column; margin: 0; border-radius: 0; min-height: 100vh; }
    .login-brand { padding: 1.75rem 1.25rem; }
    .login-features { display: none; }   /* la lista de bondades sobra en móvil */
}

/* ── 17. Nunca desplazamiento horizontal de página ─────────── */
html, body { max-width: 100%; overflow-x: hidden; }
.page-content { overflow-x: hidden; }

/* ── 18. Movimiento reducido ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ── 19. Impresión: el tema oscuro no se imprime ───────────── */
@media print {
    .g-bg, .g-grid, .g-orbs, .sidebar, .topbar { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .card, .glass {
        background: #fff !important;
        backdrop-filter: none !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        color: #000 !important;
    }
    .card::before, .glass::before { display: none !important; }
    h1, h2, h3, h4, h5, h6, .table, .table td, .table th { color: #000 !important; }
    .main-content { margin-left: 0 !important; }
}