/* ================================================================
   Carta Náutica PER — Premium Skin v7.3.1
   Identidad visual para alumnos y academias (B2B showcase)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,500&display=swap');

/* ── Tipografía global ── */
#spe-root,
#spe-root *:not(code):not(pre):not(.spe-ex-value):not(#spe-hud):not(#spe-hud *) {
    font-family: 'Outfit', system-ui, sans-serif !important;
}

/* ── Fondo inmersivo (profundidad oceánica + aurora) ── */
#spe-root {
    background: #060f1c !important;
    isolation: isolate;
    --txt: #fff;
    --muted: rgba(255, 255, 255, 0.65);
    color: #fff;
}
#spe-root::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(45, 212, 168, 0.12), transparent 55%),
        radial-gradient(ellipse 60% 40% at 85% 15%, rgba(124, 140, 248, 0.08), transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 110%, rgba(201, 162, 39, 0.06), transparent 55%),
        linear-gradient(180deg, #060f1c 0%, #0a1628 40%, #071018 100%);
}
#spe-root::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,.3), transparent);
    background-size: 100% 100%;
}

#spe-root::before,
#spe-root::after {
    z-index: 0;
}

/* Preservar layout fixed/absolute del simulador (v7.3.1 — evita pantalla negra) */
#spe-portal-bar {
    position: fixed !important;
    z-index: 100000001 !important;
}
#spe-root #spe-mapa {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}
#spe-root #spe-uploadZone {
    position: absolute !important;
    z-index: 2000 !important;
}
#spe-root #spe-leftPanel {
    position: absolute !important;
    z-index: 100000 !important;
    pointer-events: auto !important;
}
#spe-root #spe-togglePanel {
    position: absolute !important;
    z-index: 100000002 !important;
    pointer-events: auto !important;
}
#spe-chart-loader {
    z-index: 1500 !important;
    pointer-events: none !important;
}
#spe-root #spe-uploadZone {
    pointer-events: auto !important;
}
#spe-root.spe-chart-active #spe-uploadZone {
    display: none !important;
    pointer-events: none !important;
}
#spe-root.spe-chart-active #spe-mapa {
    display: block !important;
    pointer-events: auto !important;
    touch-action: none;
}
#spe-mini-toolbar {
    position: fixed !important;
    z-index: 99999990 !important;
}
#spe-chart-hud,
#spe-toast-host,
#spe-mini-toolbar,
#spe-theme-wrap,
#spe-lang-sel,
#spe-hud {
    z-index: 999991 !important;
}

/* ── Barra portal premium ── */
#spe-portal-bar {
    height: 48px !important;
    padding: 0 16px !important;
    background: rgba(8, 18, 32, 0.82) !important;
    border-bottom: 1px solid rgba(45, 212, 168, 0.12) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}
#spe-portal-bar .spe-portal-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    pointer-events: none;
}
#spe-portal-bar .spe-portal-brand-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #2dd4a8, #1aab88);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 0 16px rgba(45, 212, 168, 0.35);
}
#spe-portal-bar .spe-portal-brand-text {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
#spe-portal-bar .spe-portal-brand-text em {
    font-style: normal;
    background: linear-gradient(90deg, #d4a44a, #f0d78a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#spe-portal-bar .spe-portal-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.85);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(45, 212, 168, 0.2);
    background: rgba(45, 212, 168, 0.06);
}
.spe-portal-btn {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(45, 212, 168, 0.15) !important;
}
.spe-portal-salir {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 8px !important;
}
.spe-portal-salir:hover {
    background: rgba(244, 67, 54, 0.18) !important;
    border-color: rgba(244, 67, 54, 0.45) !important;
    color: #fff !important;
}

/* ── Panel izquierdo — dark premium ── */
#spe-root #spe-leftPanel {
    width: 304px !important;
    top: 48px !important;
    height: calc(100% - 48px) !important;
    left: -320px !important;
    background: linear-gradient(180deg, #070d14 0%, #050a12 100%) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
    border-right: 1px solid #0d1520 !important;
    box-shadow: 12px 0 48px rgba(0, 0, 0, 0.6), inset -1px 0 0 rgba(255, 255, 255, 0.03) !important;
    --txt: #fff;
    --muted: rgba(255, 255, 255, 0.65);
    --panel: #070d14;
    --panel2: #050a12;
    --b: #121c28;
    color: #fff !important;
}
#spe-root.spe-open #spe-leftPanel {
    left: 0 !important;
}
#spe-root.spe-open #spe-togglePanel {
    left: 316px !important;
}
#spe-root #spe-profile {
    background: linear-gradient(135deg, #060b10, #050a12) !important;
    border-bottom: 1px solid #121c28 !important;
    padding: 18px 16px 14px !important;
}
#spe-root #spe-profile-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: #fff !important;
}
#spe-root #spe-xp-text {
    color: rgba(255, 255, 255, 0.65) !important;
}
#spe-root #spe-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    box-shadow: 0 0 20px rgba(45, 212, 168, 0.3), inset 0 1px 0 rgba(255,255,255,.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
}
#spe-root #spe-level-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(212, 164, 74, 0.25) !important;
}

/* XP bar premium */
#spe-xpbar-wrap {
    background: linear-gradient(135deg, #060b10, #050a12) !important;
    border-bottom-color: #121c28 !important;
}
#spe-root #spe-xpbar-label {
    color: rgba(255, 255, 255, 0.65) !important;
}
#spe-xpbar {
    height: 6px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.35) !important;
}
#spe-xpbar-fill {
    border-radius: 4px !important;
    box-shadow: 0 0 12px rgba(45, 212, 168, 0.5) !important;
}

/* Stats pills */
.spe-stat-pill {
    background: rgba(7, 13, 20, 0.9) !important;
    border: 1px solid #121c28 !important;
    border-radius: 12px !important;
    padding: 8px 6px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: border-color 0.2s, transform 0.15s !important;
}
.spe-stat-pill:hover {
    border-color: rgba(45, 212, 168, 0.25) !important;
    transform: translateY(-1px);
}

/* Secciones con tarjetas */
.spe-section {
    margin: 0 10px 8px !important;
    padding: 14px 12px !important;
    background: rgba(7, 13, 20, 0.85) !important;
    border: 1px solid #121c28 !important;
    border-radius: 14px !important;
    border-bottom: 1px solid #121c28 !important;
}
.spe-sec-header {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    color: #fff !important;
}
.spe-sec-icon {
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ── Botones con brillo ── */
.spe-btn {
    border-radius: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
    overflow: hidden !important;
}
.spe-btn-primary {
    background: linear-gradient(135deg, #2dd4a8 0%, #1aab88 50%, #159a7a 100%) !important;
    color: #041018 !important;
    box-shadow: 0 4px 20px rgba(45, 212, 168, 0.35), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.spe-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.2) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
.spe-btn-primary:hover::after {
    transform: translateX(100%);
}
.spe-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(45, 212, 168, 0.45) !important;
}
.spe-btn-verify {
    background: linear-gradient(135deg, rgba(45, 212, 168, 0.15), rgba(26, 171, 136, 0.08)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(45, 212, 168, 0.35) !important;
}
.spe-btn-enunciado {
    background: linear-gradient(135deg, rgba(212, 164, 74, 0.12), rgba(212, 164, 74, 0.04)) !important;
    border-color: rgba(212, 164, 74, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Exercise card hero */
#spe-exercise-card {
    background: linear-gradient(145deg, #070d14, #050a12) !important;
    border: 1px solid #121c28 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#spe-exercise-card.spe-ex-active {
    border-color: rgba(45, 212, 168, 0.35) !important;
    box-shadow: 0 0 32px rgba(45, 212, 168, 0.12), 0 8px 32px rgba(0,0,0,.4) !important;
}
.spe-ex-type-badge {
    background: linear-gradient(135deg, rgba(45, 212, 168, 0.2), rgba(45, 212, 168, 0.08)) !important;
    border: 1px solid rgba(45, 212, 168, 0.2) !important;
}

/* Practice bank */
.spe-practice-bank {
    background: rgba(5, 10, 18, 0.7) !important;
    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
}
.spe-bank-chip {
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(.4,0,.2,1) !important;
}
.spe-bank-chip:hover {
    box-shadow: 0 4px 16px rgba(45, 212, 168, 0.2) !important;
}

/* Vectores — botones coloridos */
.spe-vec-btn {
    border-radius: 11px !important;
    transition: all 0.2s !important;
    border: 1px solid transparent !important;
}
.spe-vec-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ── Upload zone — hero de bienvenida ── */
#spe-root #spe-uploadZone {
    background: rgba(10, 22, 40, 0.75) !important;
    backdrop-filter: blur(28px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
    border: 1px solid rgba(45, 212, 168, 0.2) !important;
    border-radius: 24px !important;
    padding: 48px 40px 44px !important;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden;
}
#spe-root #spe-uploadZone::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(45,212,168,.06), transparent, rgba(212,164,74,.04), transparent);
    animation: speSkinSpin 20s linear infinite;
    pointer-events: none;
}
@keyframes speSkinSpin {
    to { transform: rotate(360deg); }
}
#spe-root .spe-up-wrap {
    position: relative;
    z-index: 1;
}
#spe-root .spe-up-anchor {
    font-size: 56px !important;
    animation: speAnchorFloat 4s ease-in-out infinite;
}
@keyframes speAnchorFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
#spe-root #spe-uploadZone h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 4px !important;
}
#spe-root #spe-uploadZone h2 span {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    color: #fff !important;
}
#spe-root .spe-up-tagline {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}
#spe-root .spe-up-features span {
    background: rgba(45, 212, 168, 0.06) !important;
    border: 1px solid rgba(45, 212, 168, 0.12) !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
}
#spe-root .spe-up-btn,
#spe-root #spe-uploadZone label {
    border-radius: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 6px 24px rgba(45, 212, 168, 0.4) !important;
}

/* Toggle + mini toolbar */
#spe-root #spe-togglePanel {
    top: 62px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(45, 212, 168, 0.15) !important;
}
#spe-mini-toolbar {
    border-radius: 14px !important;
    padding: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
}

/* HUD coordenadas */
#spe-root #spe-hud {
    background: rgba(8, 18, 32, 0.88) !important;
    border: 1px solid rgba(45, 212, 168, 0.15) !important;
    border-radius: 24px !important;
    padding: 6px 20px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    font-family: 'Outfit', monospace !important;
}

/* Chart exercise HUD */
#spe-chart-hud .spe-ch-grid {
    border-radius: 14px !important;
    border-color: rgba(45, 212, 168, 0.2) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Selector idioma + tema */
#spe-lang-sel,
#spe-theme-wrap #spe-theme-toggle {
    background: rgba(8, 18, 32, 0.9) !important;
    border-color: rgba(45, 212, 168, 0.15) !important;
    backdrop-filter: blur(12px) !important;
}
.spe-lang-btn[data-lang].active,
.spe-lang-btn:hover {
    background: rgba(45, 212, 168, 0.2) !important;
    color: #fff !important;
}
#spe-theme-dropdown {
    border-radius: 16px !important;
    border-color: rgba(45, 212, 168, 0.15) !important;
}

/* Respuestas alumno */
.spe-resp-input {
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(21, 42, 66, 0.9) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.spe-resp-input:focus {
    border-color: rgba(45, 212, 168, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 168, 0.1) !important;
}
.spe-resp-progress-fill {
    background: linear-gradient(90deg, #2dd4a8, #7c8cf8) !important;
    box-shadow: 0 0 8px rgba(45, 212, 168, 0.4) !important;
}

/* Premium badge */
.spe-premium-badge {
    background: linear-gradient(135deg, #d4a44a, #f0d78a) !important;
    color: #1a1000 !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    padding: 2px 8px !important;
    box-shadow: 0 2px 10px rgba(212, 164, 74, 0.35) !important;
}

/* Toasts premium */
.spe-toast {
    border-radius: 12px !important;
    backdrop-filter: blur(12px) !important;
    font-weight: 600 !important;
}

/* Canvas vignette sutil */
#spe-root #spe-mapa {
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.35);
}

/* ── Panel izquierdo: texto claro (solo temas oscuros) ── */
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-sec-hint,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-empty-hint,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-enunciado-hint,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-ex-label,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel label {
    color: rgba(255, 255, 255, 0.65) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-sec-badge {
    color: rgba(255, 255, 255, 0.65) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #1a2535 !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-btn-ghost {
    color: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-btn-ghost:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel .spe-manual-row {
    color: rgba(255, 255, 255, 0.65) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel #spe-sesion-stats {
    background: #040810 !important;
    border-bottom-color: #121c28 !important;
}

/* ══════════════════════════════════════════════════════════════
   TEXTO BLANCO GLOBAL — temas oscuros (excluye blanco)
   ══════════════════════════════════════════════════════════════ */
#spe-root:not([data-spe-theme="blanco"]) {
    --txt: #fff;
    --muted: rgba(255, 255, 255, 0.65);
    color: #fff;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-portal-bar,
#spe-root:not([data-spe-theme="blanco"]) .spe-portal-btn,
#spe-root:not([data-spe-theme="blanco"]) .spe-portal-salir {
    color: rgba(255, 255, 255, 0.85) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-hud,
#spe-root:not([data-spe-theme="blanco"]) #spe-tooltip,
#spe-root:not([data-spe-theme="blanco"]) #spe-info,
#spe-root:not([data-spe-theme="blanco"]) .spe-hud-div {
    color: #fff !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-uploadZone h2,
#spe-root:not([data-spe-theme="blanco"]) #spe-uploadZone p,
#spe-root:not([data-spe-theme="blanco"]) .spe-up-hint,
#spe-root:not([data-spe-theme="blanco"]) .spe-up-features,
#spe-root:not([data-spe-theme="blanco"]) .spe-up-tagline {
    color: rgba(255, 255, 255, 0.85) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-uploadZone h2 span {
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-calibPanel,
#spe-root:not([data-spe-theme="blanco"]) #spe-calibInstrucciones,
#spe-root:not([data-spe-theme="blanco"]) #spe-exercise-card,
#spe-root:not([data-spe-theme="blanco"]) .spe-ex-value,
#spe-root:not([data-spe-theme="blanco"]) .spe-ex-label,
#spe-root:not([data-spe-theme="blanco"]) .spe-resp-title,
#spe-root:not([data-spe-theme="blanco"]) .spe-resp-label,
#spe-root:not([data-spe-theme="blanco"]) .spe-resp-input,
#spe-root:not([data-spe-theme="blanco"]) .spe-enunciado-textarea,
#spe-root:not([data-spe-theme="blanco"]) .spe-enunciado-hint,
#spe-root:not([data-spe-theme="blanco"]) .spe-guia-step,
#spe-root:not([data-spe-theme="blanco"]) .spe-guia-formula,
#spe-root:not([data-spe-theme="blanco"]) .spe-guia-datos,
#spe-root:not([data-spe-theme="blanco"]) .spe-transp-badge,
#spe-root:not([data-spe-theme="blanco"]) .spe-theme-label,
#spe-root:not([data-spe-theme="blanco"]) .spe-mt-btn,
#spe-root:not([data-spe-theme="blanco"]) #spe-theme-wrap,
#spe-root:not([data-spe-theme="blanco"]) #spe-lang-sel,
#spe-root:not([data-spe-theme="blanco"]) .spe-lang-btn {
    color: rgba(255, 255, 255, 0.85) !important;
}
#spe-root:not([data-spe-theme="blanco"]) .spe-sec-hint,
#spe-root:not([data-spe-theme="blanco"]) .spe-empty-hint,
#spe-root:not([data-spe-theme="blanco"]) .spe-sec-badge,
#spe-root:not([data-spe-theme="blanco"]) #spe-xp-text,
#spe-root:not([data-spe-theme="blanco"]) #spe-xpbar-label,
#spe-root:not([data-spe-theme="blanco"]) .spe-manual-row,
#spe-root:not([data-spe-theme="blanco"]) .spe-resp-feedback {
    color: rgba(255, 255, 255, 0.65) !important;
}
#spe-root:not([data-spe-theme="blanco"]) .spe-resp-input::placeholder,
#spe-root:not([data-spe-theme="blanco"]) .spe-enunciado-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
#spe-root:not([data-spe-theme="blanco"]) .spe-btn-outline,
#spe-root:not([data-spe-theme="blanco"]) .spe-btn-ghost,
#spe-root:not([data-spe-theme="blanco"]) .spe-btn-enunciado,
#spe-root:not([data-spe-theme="blanco"]) .spe-btn-verify,
#spe-root:not([data-spe-theme="blanco"]) .spe-vec-btn,
#spe-root:not([data-spe-theme="blanco"]) #spe-togglePanel,
#spe-root:not([data-spe-theme="blanco"]) #spe-btn-academia {
    color: rgba(255, 255, 255, 0.9) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-chart-hud,
#spe-root:not([data-spe-theme="blanco"]) #spe-chart-hud * {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* MarIA chat — contrast outside #spe-root (evita texto blanco invisible) */
#maria-root #maria-messages {
    color: rgba(215, 238, 255, 0.92) !important;
}
#maria-root .maria-msg.bot,
#maria-root .maria-msg.bot strong,
#maria-root .maria-msg.bot em,
#maria-root .maria-msg.bot .spe-maria-status {
    color: rgba(215, 238, 255, 0.92) !important;
}
#maria-root .maria-msg.user {
    color: rgba(255, 255, 255, 0.95) !important;
}
#maria-root #maria-quick button {
    color: rgba(200, 230, 255, 0.88) !important;
}

/* ══════════════════════════════════════════════════════════════
   BOTONES SESIÓN / PORTAL — contraste garantizado (v7.3.18)
   ══════════════════════════════════════════════════════════════ */
#spe-root:not([data-spe-theme="blanco"]) #spe-logoutBtn,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel #spe-logoutBtn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-logoutBtn:hover,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel #spe-logoutBtn:hover {
    background: rgba(244, 67, 54, 0.18) !important;
    border-color: rgba(244, 67, 54, 0.45) !important;
    color: #ff8a80 !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-closePanel,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel #spe-closePanel {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
#spe-root:not([data-spe-theme="blanco"]) #spe-closePanel:hover,
#spe-root:not([data-spe-theme="blanco"]) #spe-leftPanel #spe-closePanel:hover {
    background: rgba(244, 67, 54, 0.15) !important;
    border-color: rgba(244, 67, 54, 0.4) !important;
    color: #ff8a80 !important;
}
#spe-root:not([data-spe-theme="blanco"]) .spe-portal-salir,
#spe-root:not([data-spe-theme="blanco"]) #spe-btn-salir {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
#spe-root:not([data-spe-theme="blanco"]) .spe-portal-salir:hover,
#spe-root:not([data-spe-theme="blanco"]) #spe-btn-salir:hover {
    background: rgba(244, 67, 54, 0.18) !important;
    border-color: rgba(244, 67, 54, 0.45) !important;
    color: #fff !important;
}
#spe-root:not([data-spe-theme="blanco"]) .spe-portal-btn,
#spe-root:not([data-spe-theme="blanco"]) #spe-btn-home {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
#spe-root:not([data-spe-theme="blanco"]) .spe-login-link,
#spe-root:not([data-spe-theme="blanco"]) #spe-profile-login-link,
#spe-root:not([data-spe-theme="blanco"]) #spe-bar-login-link {
    color: #5eb8ff !important;
    font-weight: 600 !important;
}
#spe-root[data-spe-theme="blanco"] #spe-logoutBtn,
#spe-root[data-spe-theme="blanco"] #spe-leftPanel #spe-logoutBtn {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    color: #444 !important;
}
#spe-root[data-spe-theme="blanco"] #spe-logoutBtn:hover,
#spe-root[data-spe-theme="blanco"] #spe-leftPanel #spe-logoutBtn:hover {
    background: #fee !important;
    border-color: #e57373 !important;
    color: #c62828 !important;
}
#spe-root[data-spe-theme="blanco"] #spe-closePanel,
#spe-root[data-spe-theme="blanco"] #spe-leftPanel #spe-closePanel {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    color: #555 !important;
}
#spe-root[data-spe-theme="blanco"] .spe-portal-salir,
#spe-root[data-spe-theme="blanco"] #spe-btn-salir {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    color: #333 !important;
}
#spe-root[data-spe-theme="blanco"] .spe-portal-salir:hover,
#spe-root[data-spe-theme="blanco"] #spe-btn-salir:hover {
    background: #fee !important;
    border-color: #e57373 !important;
    color: #c62828 !important;
}
#spe-root[data-spe-theme="blanco"] .spe-login-link,
#spe-root[data-spe-theme="blanco"] #spe-profile-login-link,
#spe-root[data-spe-theme="blanco"] #spe-bar-login-link {
    color: #1565c0 !important;
}