/* ════════════ PORTAL STYLES ════════════ */
html { font-size: var(--root-font-size, 100%) }
/* Variables (compatibles con exam.css) */
:root {
   --navy: #1a3a5c;
   --navy2: #254f7a;
   --gold: #e8a020;
   --gold2: #f5c842;
   --white: #ffffff;
   --bg: #f6f8fa;
   --surface: #ffffff;
   --primary: #1a3a5c;
   --primary-lt: #e8eef5;
   --accent: #e8a020;
   --accent-lt: #fef3d7;
   --green: #1e8a4a;
   --green-lt: #d4f0e2;
   --red: #c0392b;
   --red-lt: #fde8e6;
   --purple: #5b3fa0;
   --purple-lt: #ede8ff;
   --training-bg: #0f766e;
   --training-bg-2: #14b8a6;
   --training-tint: #ccfbf1;
   --training-tint-2: #f0fdfa;
   --training-border: #5eead4;
   --training-text: #0f766e;
   --training-text-d: #134e4a;
   --text: #111827;
   --text-2: #4b5563;
   --text-3: #9ca3af;
   --border: #e5e7eb;
   --shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);
   --shadow-md: 0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.05);
   --shadow-lg: 0 10px 30px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.06);
   --shadow: 0 4px 24px rgba(26, 58, 92, .12);
   --r: 12px;
   --r-sm: 8px;
   --r-lg: 16px;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   background: var(--navy)
}

body {
   font-family: 'Nunito', sans-serif;
   background: var(--bg);
   color: var(--text);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased
}

/* ── NAVBAR ── */
.navbar {
   background: var(--navy);
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 2px 16px rgba(0, 0, 0, .25)
}

.nav-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 10px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px
}

.nav-logo {
   display: flex;
   align-items: center;
   gap: 12px
}

.nav-logo-pill {
   background: #fff;
   border-radius: 8px;
   padding: 5px 10px;
   display: flex;
   align-items: center;
   height: 40px
}

.nav-logo-pill .sed-logo {
   height: 28px;
   width: auto;
   display: block
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 6px
}

.nav-links a {
   color: rgba(255, 255, 255, .8);
   text-decoration: none;
   font-size:0.8125rem;
   font-weight: 700;
   padding: 7px 14px;
   border-radius: 8px;
   transition: all .2s;
   letter-spacing: .3px
}

.nav-links a:hover {
   background: rgba(255, 255, 255, .12);
   color: #fff
}

.nav-links a.active {
   color: #fff;
   background: rgba(255, 255, 255, .12)
}

/* ── Hamburguesa móvil ── */
.nav-hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 38px;
   height: 38px;
   padding: 6px;
   cursor: pointer;
   border: none;
   background: rgba(255, 255, 255, .1);
   border-radius: 8px;
   transition: background .2s
}

.nav-hamburger:hover {
   background: rgba(255, 255, 255, .2)
}

.nav-hamburger span {
   display: block;
   height: 2.5px;
   border-radius: 2px;
   background: #fff;
   transition: all .3s
}

.nav-hamburger.open span:nth-child(1) {
   transform: translateY(7.5px) rotate(45deg)
}

.nav-hamburger.open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0)
}

.nav-hamburger.open span:nth-child(3) {
   transform: translateY(-7.5px) rotate(-45deg)
}

.nav-mobile-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background: var(--navy);
   border-top: 1px solid rgba(255, 255, 255, .12);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
   z-index: 200;
   padding: 8px 16px 12px
}

.nav-mobile-menu.open {
   display: block
}

.nav-mobile-menu a {
   display: block;
   color: rgba(255, 255, 255, .85);
   text-decoration: none;
   font-size:0.9375rem;
   font-weight: 700;
   padding: 12px 14px;
   border-radius: 8px;
   transition: background .15s;
   letter-spacing: .3px
}

.nav-mobile-menu a:hover,
.nav-mobile-menu a.active {
   background: rgba(255, 255, 255, .12);
   color: #fff
}

@media(max-width:640px) {
   .nav-links {
      display: none
   }

   .nav-hamburger {
      display: flex
   }

   .nav-inner {
      padding: 10px 16px;
      position: relative
   }

   .navbar {
      position: sticky;
      top: 0
   }
}

/* ── HERO ── */
.hero {
   position: relative;
   width: 100%;
   overflow: hidden
}

.hero-banner {
   display: block;
   width: 100%;
   height: auto
}

@media(min-width: 769px) {
   .hero-banner-movil {
      display: none
   }
}

@media(max-width: 768px) {
   .hero-banner-web {
      display: none
   }
}

/* ── SECTION ── */
.section {
   max-width: 1200px;
   margin: 0 auto;
   padding: 64px 24px
}

.section-eyebrow {
   font-size:0.6875rem;
   font-weight: 800;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 10px
}

.section-title {
   font-family: 'Playfair Display', serif;
   font-size: clamp(1.625rem, 4vw, 2.5rem);
   font-weight: 900;
   color: var(--navy);
   margin-bottom: 12px;
   line-height: 1.15
}

.section-sub {
   font-size: 0.9375rem;
   color: var(--text-2);
   max-width: 560px;
   line-height: 1.65;
   margin-bottom: 40px
}

/* ── SIMULACROS GRID ── */
.simulacros-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
}

.sim-card {
   background: var(--surface);
   border-radius: 16px;
   border: 1px solid var(--border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
   overflow: hidden;
   transition: transform 0.25s, box-shadow 0.25s;
   display: flex;
   flex-direction: column
}

.sim-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(26, 58, 92, 0.12)
}

.sim-card-header {
   background: linear-gradient(135deg, var(--navy) 0%, #0d2840 100%);
   padding: 28px 28px 24px;
   position: relative;
   overflow: hidden
}

.sim-card-header::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--gold), var(--gold2))
}

.sim-card-header::after {
   content: '';
   position: absolute;
   right: -40px;
   top: -40px;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(232, 160, 32, 0.12) 0%, transparent 70%)
}

.sim-year {
   font-family: var(--font-display);
   font-size:1.625rem;
   font-weight: 800;
   color: #fff;
   line-height: 1;
   position: relative;
   z-index: 1;
   letter-spacing: -0.5px
}

.sim-title {
   font-size:0.8125rem;
   color: rgba(255, 255, 255, 0.55);
   margin-top: 6px;
   font-weight: 500;
   letter-spacing: 0.5px;
   position: relative;
   z-index: 1
}

.sim-body {
   padding: 24px 28px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 6px
}

.sim-body .sim-desc {
   margin: 0;
   font-size:0.9375rem;
   color: var(--text-2);
   line-height: 1.5
}

.sim-badges {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 4px
}

.sim-badge {
   background: var(--primary-lt);
   border: none;
   border-radius: 20px;
   padding: 5px 12px;
   font-size:0.75rem;
   font-weight: 600;
   color: var(--primary)
}

.sim-footer {
   padding: 0 28px 24px;
   display: flex;
   gap: 12px
}

.sim-footer .btn {
   padding: 14px 24px;
   font-size:0.9375rem
}

/* ════════════ SIMULACRO CONFIG INLINE ════════════ */
.sim-config-inline {
   padding: 20px 24px;
   background: var(--surface);
   border-bottom: 1px solid var(--border)
}

.sim-config-title {
   font-size:0.75rem;
   font-weight: 800;
   color: var(--text);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 8px
}

.sim-config-title::before {
   content: '⚙️';
   font-size:0.875rem
}

.sim-subjects-config {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.sim-subject-config {
     display: flex;
     align-items: center;
     gap: 16px;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 12px 16px
}

.sim-subject-config-icon {
     font-size:1.625rem;
     text-align: center;
     flex-shrink: 0;
     width: 36px;
}

.sim-subject-config-name {
     font-size:0.875rem;
     font-weight: 600;
     color: var(--text);
     flex: 1;
     min-width: 0;
}

.sim-subject-controls {
     display: flex;
     gap: 20px;
     align-items: center;
     flex-shrink: 0;
}

.sim-control-group {
     display: flex;
     flex-direction: column;
     gap: 4px;
}

.sim-control-label {
     font-size:0.625rem;
     font-weight: 700;
     color: var(--text-3);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     text-align: center;
}

.sim-spinner {
   display: flex;
   align-items: center;
   background: var(--surface);
   border: 1.5px solid var(--border);
   border-radius: 8px;
   overflow: hidden;
   width: fit-content;
}

.sim-spinner-btn {
   width: 30px;
   height: 32px;
   border: none;
   background: var(--bg);
   color: var(--primary);
   font-size:1rem;
   font-weight: 700;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.15s, color 0.15s;
   flex-shrink: 0;
}

.sim-spinner-btn:hover {
   background: var(--primary);
   color: #fff
}

.sim-spinner-btn:active {
   background: var(--navy2)
}

.sim-spinner-input {
   width: 36px;
   height: 32px;
   padding: 0;
   font-size:0.875rem;
   font-weight: 700;
   font-family: var(--font-body);
   text-align: center;
   border: none;
   border-left: 1px solid var(--border);
   border-right: 1px solid var(--border);
   background: var(--surface);
   color: var(--primary);
   -moz-appearance: textfield
}

.sim-spinner-input:disabled {
   background: var(--bg);
   color: var(--text-3)
}

.sim-spinner-input::-webkit-outer-spin-button,
.sim-spinner-input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0
}

.sim-spinner-input:focus {
    outline: none
}

.sim-spinner-input.disabled {
    background: var(--bg);
    color: var(--text-3);
    cursor: not-allowed;
}

.sim-spinner-btn:disabled {
    background: var(--border);
    color: var(--text-3);
    cursor: not-allowed;
}

.sim-config-options {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 16px;
   padding-top: 16px;
   border-top: 1px solid var(--border)
}

.sim-config-toggle {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size:0.875rem;
   font-weight: 600;
   color: var(--text-2);
   cursor: pointer
}

.sim-config-toggle input {
   width: 20px;
   height: 20px;
   cursor: pointer;
   accent-color: var(--primary)
}

.sim-config-toggle-label {
   display: flex;
   align-items: center;
   gap: 6px
}

.sim-total-questions {
   font-size:0.875rem;
   font-weight: 700;
   color: var(--navy);
   background: var(--accent-lt);
   padding: 8px 16px;
   border-radius: 24px
}

.sim-total-questions span {
    color: var(--accent)
}

/* ── SIM CARD (base) ── */
.sim-body {
    padding: 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sim-body .sim-desc {
    margin: 0
}

.sim-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.sim-badge {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
   padding: 3px 10px;
   font-size:0.6875rem;
   font-weight: 700;
   color: var(--text-2)
}

.sim-desc {
   font-size:0.8125rem;
   color: var(--text-2);
   line-height: 1.6;
   flex: 1
}

.sim-footer {
   padding: 0 22px 20px;
   display: flex;
   gap: 10px
}

/* ── CODE SECTION ── */
.code-section {
    margin-top: 24px;
}

.code-section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.code-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.code-section-text {
    font-size:0.75rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.code-section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.code-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.code-section-icon {
    font-size:2.25rem;
}

.code-section-title {
    font-family: 'Playfair Display', serif;
    font-size:1.125rem;
    font-weight: 700;
    color: var(--navy);
}

.code-section-desc {
    font-size:0.8125rem;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: 18px;
}

.code-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.code-input-wrapper input {
    flex: 1;
    max-width: 280px;
    padding: 14px 20px;
    font-size:1.25rem;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    text-align: center;
    letter-spacing: 6px;
    text-transform: uppercase;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.code-input-wrapper input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(232, 160, 32, 0.15);
}

.code-input-wrapper input::placeholder {
    letter-spacing: 3px;
    font-size:0.875rem;
    color: var(--text-3);
}

.code-input-wrapper input.input-error {
    border-color: var(--red);
    background: var(--red-lt);
    animation: shake 0.3s ease;
}

.btn-code {
    padding: 14px 24px;
    background: var(--gold);
    color: var(--navy);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size:0.875rem;
    font-weight: 800;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-code:hover {
    background: var(--gold2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 160, 32, 0.3);
}

.code-error {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 12px 16px;
    border-radius: 10px;
    font-size:0.8125rem;
    font-weight: 600;
    margin-top: 14px;
    text-align: center;
    border: 1px solid #fcd34d;
}

.code-internet-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    font-size:0.75rem;
    font-weight: 600;
    color: var(--text-3);
}

.code-internet-warning svg {
    color: #f59e0b;
    flex-shrink: 0;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ── SIM CARD DYNAMIC ── */
.sim-card-dynamic {
    background: var(--surface);
    border: 2px solid var(--navy);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(26, 58, 92, 0.12);
}

.sim-card-dynamic:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(26, 58, 92, 0.18);
}

.sim-card-dynamic .sim-card-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 32px 32px;
    position: relative;
}

.sim-card-dynamic .sim-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold2), var(--gold));
}

.sim-dynamic-icon {
    font-size:3.5rem;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.sim-card-dynamic .sim-year {
    font-family: 'Playfair Display', serif;
    font-size:2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 4px;
}

.sim-card-dynamic .sim-title {
    font-size:0.875rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
}

.sim-card-dynamic .sim-body {
    padding: 24px 28px;
}

.sim-card-dynamic .sim-desc {
    font-size:0.9375rem;
    color: var(--text-2);
    line-height: 1.6;
    text-align: center;
}

.sim-card-dynamic .sim-config-inline {
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.sim-card-dynamic .sim-footer {
    padding: 20px 28px 24px;
}

.sim-card-dynamic .sim-footer .btn {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
    color: var(--navy);
    font-size:1rem;
    padding: 16px 28px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(232, 160, 32, 0.3);
}

.sim-card-dynamic .sim-footer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(232, 160, 32, 0.4);
}

@media (max-width: 640px) {
    .code-input-wrapper {
        flex-direction: column;
    }
    
    .code-input-wrapper input {
        max-width: 100%;
    }
    
    .btn-code {
        width: 100%;
        justify-content: center;
    }
    
    /* Mobile fixes for dynamic card */
    .sim-card-dynamic .sim-card-header {
        padding: 28px 20px 24px;
    }
    
    .sim-dynamic-icon {
        font-size:2.75rem;
        margin-bottom: 12px;
    }
    
    .sim-card-dynamic .sim-year {
        font-size:1.625rem;
    }
    
    .sim-card-dynamic .sim-body {
        padding: 20px;
    }
    
    .sim-card-dynamic .sim-desc {
        font-size:0.875rem;
    }
    
    .sim-card-dynamic .sim-config-inline {
        padding: 16px;
    }
    
    .sim-card-dynamic .sim-footer {
        padding: 16px;
    }
    
    .sim-card-dynamic .sim-footer .btn {
        width: 100%;
        font-size:0.9375rem;
        padding: 14px 20px;
    }
    
    .sim-subjects-config {
        gap: 10px;
    }
    
    .sim-subject-config {
        flex-wrap: wrap;
        padding: 12px;
        gap: 10px;
    }
    
    .sim-subject-config-icon {
        font-size:1.375rem;
        width: 28px;
    }
    
    .sim-subject-config-name {
        font-size:0.8125rem;
        flex: 1;
    }
    
    .sim-subject-controls {
        width: 100%;
        justify-content: space-around;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
        margin-top: 4px;
    }
    
    .sim-control-group {
        flex: 1;
        max-width: 140px;
    }
    
    .sim-control-label {
        font-size:0.5625rem;
        margin-bottom: 4px;
    }
    
    .sim-spinner-btn {
        width: 32px;
        height: 38px;
        font-size:1rem;
    }
    
    .sim-spinner-input {
        width: 36px;
        height: 38px;
        font-size:0.875rem;
    }
    
    .sim-config-title {
        font-size:0.6875rem;
        margin-bottom: 12px;
    }
    
    .sim-config-options {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .sim-config-toggle {
        font-size:0.8125rem;
    }
    
    .sim-total-questions {
        font-size:0.8125rem;
        padding: 6px 14px;
    }
}

/* ── BOTONES ── */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   font-family: 'Nunito', sans-serif;
   font-size:0.875rem;
   font-weight: 800;
   padding: 11px 22px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   text-decoration: none;
   transition: all .2s;
   letter-spacing: .2px;
   line-height: 1
}

.btn-primary {
   background: var(--navy);
   color: #fff;
   box-shadow: 0 2px 8px rgba(26, 58, 92, .25)
}

.btn-primary:hover {
   background: var(--navy2);
   transform: translateY(-1px);
   box-shadow: 0 5px 16px rgba(26, 58, 92, .3)
}

.btn-outline {
   background: var(--surface);
   color: var(--text);
   border: 2px solid var(--border)
}

.btn-outline:hover {
   border-color: var(--navy);
   background: #f0f4f8
}

.btn-disabled {
   background: #e5e7eb;
   color: #9ca3af;
   cursor: not-allowed;
   pointer-events: none
}

.sim-coming {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 44px;
   font-size:0.8125rem;
   color: var(--text-3);
   font-weight: 700;
   gap: 6px
}

/* ── BANNER SED ── */
.sed-banner {
   background: linear-gradient(110deg,
      var(--navy) 0%,
      var(--navy) 55%,
      #2a4d73 78%,
      #e8eef5 100%);
   color: #fff;
   padding: 56px 24px
}

.sed-inner {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 48px;
   align-items: center
}

.sed-text h2 {
   font-family: 'Playfair Display', serif;
   font-size: clamp(1.5rem, 4vw, 2.375rem);
   font-weight: 900;
   margin-bottom: 14px;
   color: #fff
}

.sed-text p {
   font-size:0.9375rem;
   color: rgba(255, 255, 255, .75);
   line-height: 1.7;
   max-width: 540px
}

.sed-text .sed-logo {
   height: 44px;
   width: auto;
   margin-bottom: 20px;
   display: block
}

.sed-logo-big {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   padding: 14px 22px;
   border-radius: 14px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .18),
               0 2px 6px rgba(0, 0, 0, .08);
   border: 1px solid rgba(232, 160, 32, .35)
}

.sed-logo-big .escudo-img {
   height: 120px;
   width: auto;
   display: block
}

@media(max-width:700px) {
   .sed-inner {
      grid-template-columns: 1fr
   }

   .sed-logo-big {
      display: none
   }
}

/* ── INFO CARDS ── */
.info-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 16px;
   margin-top: 40px
}

.info-card {
   background: var(--surface);
   border-radius: var(--r);
   border: 1px solid var(--border);
   padding: 22px 20px;
   box-shadow: 0 2px 8px rgba(26, 58, 92, .06)
}

.info-icon {
   font-size:1.75rem;
   margin-bottom: 10px;
   display: block
}

.info-title {
   font-size: 0.875rem;
   font-weight: 800;
   color: var(--navy);
   margin-bottom: 6px
}

.info-desc {
   font-size: 0.8125rem;
   color: var(--text-2);
   line-height: 1.55
}

/* ── FEEDBACK / SUGERENCIAS ── */
.feedback-card {
   display: flex;
   align-items: center;
   gap: 16px;
   max-width: 620px;
   margin: 40px auto 0;
   padding: 18px 22px;
   background: linear-gradient(135deg, var(--accent-lt) 0%, #fff8e7 100%);
   border: 1px solid rgba(232, 160, 32, .28);
   border-radius: var(--r);
   box-shadow: 0 2px 10px rgba(26, 58, 92, .06)
}

.feedback-icon {
   font-size:1.875rem;
   line-height: 1;
   flex-shrink: 0
}

.feedback-content {
   flex: 1;
   min-width: 0
}

.feedback-title {
   font-size:0.875rem;
   font-weight: 800;
   color: var(--navy);
   margin-bottom: 4px
}

.feedback-desc {
   font-size:0.8125rem;
   color: var(--text-2);
   line-height: 1.55
}

.feedback-email {
   color: var(--primary);
   font-weight: 700;
   text-decoration: none;
   border-bottom: 1px dashed rgba(26, 58, 92, .4);
   transition: color .15s, border-color .15s;
   word-break: break-word
}

.feedback-email:hover,
.feedback-email:focus {
   color: var(--accent);
   border-bottom-color: var(--accent);
   outline: none
}

@media (max-width: 520px) {
   .feedback-card {
      flex-direction: column;
      text-align: center;
      padding: 20px 18px;
      gap: 10px
   }
}

/* ── FOOTER ── */
footer {
   background: var(--navy);
   color: rgba(255, 255, 255, .6);
   text-align: center;
   padding: 28px 24px;
   font-size:0.75rem
}

footer a {
   color: rgba(255, 255, 255, .8);
   text-decoration: none;
   font-weight: 700
}

footer strong {
   color: #fff
}

/* ── ABOUT PAGE ── */
.page {
   display: none
}

.page.active {
   display: block
}

.about-hero {
   background: var(--navy);
   padding: 60px 24px;
   text-align: center;
   color: #fff
}

.about-hero h1 {
   font-family: 'Playfair Display', serif;
   font-size: clamp(1.75rem, 5vw, 2.875rem);
   font-weight: 900;
   color: #fff;
   margin-bottom: 12px
}

.about-hero p {
   font-size:1rem;
   color: rgba(255, 255, 255, .75);
   max-width: 540px;
   margin: 0 auto;
   line-height: 1.65
}

.about-section {
   max-width: 900px;
   margin: 0 auto;
   padding: 56px 24px
}

.about-block {
   background: var(--surface);
   border-radius: var(--r);
   border: 1px solid var(--border);
   padding: 28px;
   margin-bottom: 20px;
   box-shadow: 0 2px 8px rgba(26, 58, 92, .06)
}

.about-block h3 {
   font-size:1.125rem;
   font-weight: 900;
   color: var(--navy);
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 10px
}

.about-block p {
   font-size: 0.875rem;
   color: var(--text-2);
   line-height: 1.7
}

.about-block ul {
   font-size: 0.875rem;
   color: var(--text-2);
   line-height: 1.8;
   padding-left: 20px;
   margin-top: 8px
}

.team-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 14px;
   margin-top: 16px
}

.team-card {
   background: var(--bg);
   border-radius: var(--r);
   padding: 20px 16px;
   text-align: center;
   border: 1px solid var(--border)
}

.team-avatar {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--navy);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size:1.375rem;
   margin: 0 auto 12px
}

.team-name {
   font-size:0.8125rem;
   font-weight: 800;
   color: var(--navy)
}

.team-role {
   font-size:0.6875rem;
   color: var(--text-3);
   margin-top: 3px
}

/* ════ SPLASH SCREEN ════════════════════════════════════════════ */
#splashScreen {
   position: fixed;
   inset: 0;
   z-index: 99999;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background: #0d1b2a;
   cursor: pointer;
}

#splashScreen.sp-fade-out {
   opacity: 0;
   pointer-events: none;
   transition: opacity .6s ease;
}

.sp-logo {
   width: min(400px, 90vw);
   animation: spFadeIn .8s ease both;
}

.sp-loader {
   width: 40px;
   height: 40px;
   border: 3px solid rgba(255, 255, 255, .1);
   border-top-color: #18a13b;
   border-radius: 50%;
   margin-top: 24px;
   animation: spSpin 1s linear infinite;
}

.sp-hint {
   font-size:0.75rem;
   color: rgba(255, 255, 255, .4);
   margin-top: 16px;
   animation: spFadeIn 1s .5s ease both;
}

@keyframes spFadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes spSpin {
   to {
      transform: rotate(360deg)
   }
}

/* ════════════ CONFIG MODAL ════════════ */
.config-modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 1000;
   align-items: center;
   justify-content: center;
   padding: 20px
}

.config-modal.open {
   display: flex
}

.config-modal-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px)
}

.config-modal-card {
   position: relative;
   background: var(--surface);
   border-radius: 16px;
   width: 100%;
   max-width: 640px;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
   animation: configModalIn 0.3s ease
}

@keyframes configModalIn {
   from {
      opacity: 0;
      transform: scale(0.95) translateY(10px)
   }
   to {
      opacity: 1;
      transform: scale(1) translateY(0)
   }
}

.config-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
   border-bottom: 1px solid var(--border)
}

.config-modal-header h2 {
   font-family: var(--font-display);
   font-size:1.25rem;
   font-weight: 700;
   color: var(--primary);
   margin: 0
}

.config-modal-close {
   width: 36px;
   height: 36px;
   border: none;
   background: var(--bg);
   border-radius: 50%;
   font-size:1.5rem;
   color: var(--text-2);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s
}

.config-modal-close:hover {
   background: var(--border);
   color: var(--text)
}

.config-modal-body {
   padding: 24px;
   overflow-y: auto;
   flex: 1
}

.config-modal-desc {
   font-size:0.875rem;
   color: var(--text-2);
   margin-bottom: 20px;
   line-height: 1.5
}

.config-modal-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
   margin-bottom: 20px
}

.config-modal-subject {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 16px
}

.config-modal-subject-header {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 14px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border)
}

.config-modal-subject-icon {
   font-size:1.75rem
}

.config-modal-subject-name {
   font-size:0.9375rem;
   font-weight: 700;
   color: var(--text)
}

.config-modal-subject-info {
   font-size:0.6875rem;
   color: var(--text-3)
}

.config-modal-fields {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px
}

.config-modal-field {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.config-modal-field label {
   font-size:0.625rem;
   font-weight: 700;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: 0.5px
}

.config-modal-field input[type="number"] {
   font-family: var(--font-body);
   padding: 10px 12px;
   font-size:0.875rem;
   border: 1.5px solid var(--border);
   border-radius: 8px;
   background: var(--surface);
   color: var(--text);
   width: 100%;
   transition: border-color 0.2s
}

.config-modal-field input[type="number"]:focus {
   outline: none;
   border-color: var(--primary)
}

.config-modal-field input[type="checkbox"] {
   width: 20px;
   height: 20px;
   cursor: pointer
}

.config-modal-global {
   padding: 14px 16px;
   background: var(--primary-lt);
   border-radius: 10px
}

.config-modal-checkbox {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size:0.875rem;
   font-weight: 600;
   color: var(--text);
   cursor: pointer
}

.config-modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   padding: 20px 24px;
   border-top: 1px solid var(--border)
}

@media(max-width: 640px) {
   .config-modal-card {
      max-height: 95vh
   }
   .config-modal-grid {
      grid-template-columns: 1fr
   }
   .config-modal-fields {
      grid-template-columns: 1fr 1fr
   }
   .config-modal-field:last-child {
      grid-column: span 2
   }
}

/* ── Sello visual: Modo entrenamiento (sin rastreo) ── */
.training-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   border-radius: 999px;
   background: linear-gradient(135deg, var(--training-bg), var(--training-bg-2));
   color: #fff;
   font-size:0.6875rem;
   font-weight: 800;
   letter-spacing: .5px;
   text-transform: uppercase;
   white-space: nowrap;
   box-shadow: 0 0 0 1px rgba(94,234,212,.4) inset, 0 2px 6px rgba(20,184,166,.25);
   user-select: none;
}
.training-pill svg { width: 14px; height: 14px; flex-shrink: 0 }
.training-pill .training-pill-short { display: none }
@media (max-width: 920px) {
   .training-pill .training-pill-full { display: none }
   .training-pill .training-pill-short { display: inline }
   .training-pill { padding: 5px 10px; font-size:0.65625rem }
}
@media (max-width: 520px) {
   .training-pill .training-pill-short { display: none }
   .training-pill { padding: 6px }
}

.training-callout {
   max-width: 1200px;
   margin: 32px auto 0;
   padding: 0 24px;
}
.training-callout-inner {
   display: flex;
   align-items: center;
   gap: 22px;
   background: linear-gradient(135deg, var(--training-tint) 0%, var(--training-tint-2) 100%);
   border: 1.5px solid var(--training-border);
   border-radius: 16px;
   padding: 24px 28px;
   box-shadow: 0 4px 14px rgba(20,184,166,.12);
}
.training-callout-icon {
   flex-shrink: 0;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--training-bg), var(--training-bg-2));
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 16px rgba(15,118,110,.3);
}
.training-callout-icon svg { width: 32px; height: 32px; color: #fff }
.training-callout-body { flex: 1 }
.training-callout-eyebrow {
   font-size:0.6875rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--training-text);
   margin-bottom: 6px;
}
.training-callout-text {
   font-size:0.875rem;
   font-weight: 500;
   line-height: 1.55;
   color: var(--training-text-d);
   margin-bottom: 12px;
}
.training-callout-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.training-pill-mini {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: #fff;
   border: 1px solid var(--training-border);
   color: var(--training-text);
   font-size:0.6875rem;
   font-weight: 700;
   padding: 5px 11px;
   border-radius: 999px;
   letter-spacing: .2px;
}
.training-pill-mini svg { width: 12px; height: 12px }
@media (max-width: 640px) {
   .training-callout { padding: 0 16px }
   .training-callout-inner {
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 18px;
      gap: 14px;
   }
   .training-callout-icon { width: 52px; height: 52px; align-self: center }
   .training-callout-icon svg { width: 26px; height: 26px }
   .training-callout-eyebrow { text-align: center }
   .training-callout-pills { justify-content: center }
}

/* ════════════ HISTORIAL DE INTENTOS ════════════ */
.history-container {
   max-width: 1080px;
   margin: 0 auto;
   padding: 36px 20px 48px;
}
.history-hero {
   text-align: center;
   padding: 24px 16px 28px;
   margin-bottom: 24px;
   border-radius: 18px;
   background: linear-gradient(135deg, var(--primary) 0%, #2a4a72 100%);
   color: #fff;
}
.history-hero h1 {
   font-size:1.75rem;
   margin: 0 0 8px;
   font-weight: 800;
   letter-spacing: -0.5px;
}
.history-hero p {
   font-size: 0.875rem;
   opacity: .9;
   margin: 0;
}
.history-section {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 22px 22px 18px;
   margin-bottom: 20px;
   box-shadow: 0 2px 6px rgba(15,30,60,0.04);
}
.history-section-title {
   font-size: 0.8125rem;
   font-weight: 800;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--primary);
   margin-bottom: 14px;
}
.history-section-hint {
   margin-top: 10px;
   font-size: 0.75rem;
   color: var(--text-3);
   text-align: center;
}
.history-chart-wrap {
   position: relative;
   width: 100%;
}
.history-chart {
   width: 100%;
   height: auto;
   display: block;
   touch-action: manipulation;
}
.chart-grid-line {
   stroke: #e2e8f0;
   stroke-width: 1;
   stroke-dasharray: 2 3;
}
.chart-axis-y {
   font: 0.6875rem 'Nunito', sans-serif;
   fill: #94a3b8;
   text-anchor: end;
}
.chart-axis-x {
   font: 0.6875rem 'Nunito', sans-serif;
   fill: #94a3b8;
   text-anchor: middle;
}
.chart-line {
   fill: none;
   stroke-width: 2.5;
   stroke-linecap: round;
   stroke-linejoin: round;
}
.chart-line-gap {
   stroke-dasharray: 4 4;
   opacity: 0.7;
}
.chart-dot {
   stroke: #fff;
   stroke-width: 1.5;
   cursor: pointer;
   transition: r .15s ease;
}
.chart-dot:hover { r: 6.5 }
.chart-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 14px;
   justify-content: center;
}
.chart-legend-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   border-radius: 999px;
   border: 1.5px solid var(--border);
   background: var(--surface);
   color: var(--text);
   font: 600 0.75rem 'Nunito', sans-serif;
   cursor: pointer;
   transition: all .18s ease;
}
.chart-legend-chip:hover { border-color: #94a3b8 }
.chart-legend-chip.is-off {
   opacity: .35;
   text-decoration: line-through;
}
.chart-legend-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
}
.chart-tooltip {
   position: absolute;
   transform: translate(-50%, -100%);
   background: #0f172a;
   color: #fff;
   font: 600 0.6875rem 'Nunito', sans-serif;
   padding: 6px 10px;
   border-radius: 8px;
   pointer-events: none;
   white-space: nowrap;
   z-index: 5;
   box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.chart-tooltip[hidden] { display: none }
.history-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.history-card {
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 12px 14px;
   background: var(--bg);
}
.history-card-head {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   font: 600 0.8125rem 'Nunito', sans-serif;
   color: var(--text);
   margin-bottom: 8px;
}
.history-card-num {
   background: var(--primary);
   color: #fff;
   padding: 3px 9px;
   border-radius: 999px;
   font-size:0.6875rem;
   font-weight: 800;
   letter-spacing: 0.5px;
}
.history-card-date { color: var(--text-3); font-size: 0.75rem }
.history-card-sim {
   background: var(--surface);
   border: 1px solid var(--border);
   padding: 3px 9px;
   border-radius: 999px;
   font-size:0.6875rem;
}
.history-card-mode {
   background: var(--accent-lt);
   color: #7a5010;
   padding: 3px 9px;
   border-radius: 999px;
   font-size:0.6875rem;
   font-weight: 700;
}
.history-card-score {
   margin-left: auto;
   font-size: 0.8125rem;
   color: var(--primary);
}
.history-card-subjects {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}
.history-subj-badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 4px 9px;
   border-radius: 999px;
   border: 1px solid var(--c);
   color: var(--c);
   font: 600 0.6875rem 'Nunito', sans-serif;
   background: var(--surface);
}
.history-subj-icon { font-size:0.75rem }
.history-subj-frac {
   font-weight: 700;
   color: #475569;
   font-size:0.65625rem;
   letter-spacing: 0.2px;
}
.history-subj-pct {
   font-weight: 800;
   color: #1f2937;
}
.history-actions {
   display: flex;
   justify-content: center;
   margin: 18px 0 12px;
}
.history-clear-btn {
   color: #b91c1c;
   border-color: #fecaca;
}
.history-clear-btn:hover {
   background: #fef2f2;
   border-color: #f87171;
}
.history-privacy-note {
   text-align: center;
   font-size:0.75rem;
   color: #64748b;
   padding: 10px 16px;
   background: #f1f5f9;
   border-radius: 10px;
   margin-top: 10px;
}
.history-empty {
   text-align: center;
   padding: 40px 20px 36px;
   background: var(--surface);
   border: 1px dashed var(--border);
   border-radius: 16px;
   margin-bottom: 16px;
}
.history-empty-icon {
   font-size:3rem;
   margin-bottom: 12px;
   opacity: .6;
}
.history-empty h3 {
   font-size: 1.125rem;
   color: var(--primary);
   margin: 0 0 8px;
}
.history-empty p {
   color: var(--text-2);
   margin: 0 0 18px;
   font-size: 0.875rem;
}
@media (max-width: 640px) {
   .history-container { padding: 24px 14px 36px }
   .history-hero { padding: 20px 14px 22px }
   .history-hero h1 { font-size:1.375rem }
   .history-section { padding: 16px 14px 14px }
   .chart-axis-y { font-size:0.625rem }
   .chart-axis-x { font-size:0.625rem }
   .history-card-head { gap: 6px }
   .history-card-score { margin-left: 0; width: 100% }
}

/* ════════════ ACCESIBILIDAD: TOOLBAR + DARK MODE ════════════ */
.a11y-toolbar {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 6px;
   margin-left: 6px;
   background: rgba(255,255,255,0.08);
   border-radius: 999px;
   border: 1px solid rgba(255,255,255,0.18);
}
.a11y-btn {
   background: transparent;
   border: none;
   color: rgba(255,255,255,0.85);
   width: 28px;
   height: 28px;
   border-radius: 999px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: 'Nunito', sans-serif;
   font-weight: 800;
   line-height: 1;
   transition: all .18s ease;
   font-size:0.875rem;
   padding: 0;
}
.a11y-btn:hover { background: rgba(255,255,255,0.14); color: #fff }
.a11y-btn.is-active { background: var(--gold); color: #1a3a5c }
.a11y-font-group {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding-right: 4px;
   border-right: 1px solid rgba(255,255,255,0.2);
   margin-right: 2px;
}
.a11y-font-letter { display: inline-block; line-height: 1 }
@media (max-width: 720px) {
   .a11y-toolbar { gap: 2px; padding: 3px 4px; margin-left: 4px }
   .a11y-btn { width: 26px; height: 26px; font-size:0.8125rem }
}

/* DARK THEME — sobreescribe variables al activar data-theme="dark" */
[data-theme="dark"] {
   --bg: #0f172a;
   --surface: #1e293b;
   --primary: #2a4a72;
   --primary-lt: #233040;
   --accent: #f5b53a;
   --accent-lt: #3d2f15;
   --text: #f1f5f9;
   --text-2: #cbd5e1;
   --text-3: #94a3b8;
   --border: #334155;
   --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
   --shadow-md: 0 4px 12px rgba(0,0,0,.45);
   --shadow-lg: 0 10px 30px rgba(0,0,0,.55);
   --shadow: 0 4px 24px rgba(0,0,0,.4);
   --green-lt: #14322a;
   --red-lt: #3a1a17;
   --purple-lt: #2c1f4a;
}
[data-theme="dark"] body { background: var(--bg); color: var(--text) }
[data-theme="dark"] .navbar { background: #0c1424; border-bottom: 1px solid var(--border) }
[data-theme="dark"] .training-callout {
   background: linear-gradient(135deg, #0f3a37 0%, #134e4a 100%);
   border-color: var(--training-border);
   color: var(--training-tint);
}
[data-theme="dark"] .info-card,
[data-theme="dark"] .feedback-card,
[data-theme="dark"] .sim-card,
[data-theme="dark"] .history-section,
[data-theme="dark"] .history-card,
[data-theme="dark"] .history-empty,
[data-theme="dark"] .about-block {
   background: var(--surface);
   border-color: var(--border);
   color: var(--text);
}
[data-theme="dark"] .info-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .feedback-title,
[data-theme="dark"] .about-block h3,
[data-theme="dark"] .history-empty h3,
[data-theme="dark"] .history-section-title { color: #e2e8f0 }
[data-theme="dark"] .info-desc,
[data-theme="dark"] .section-sub,
[data-theme="dark"] .feedback-desc,
[data-theme="dark"] .history-empty p,
[data-theme="dark"] .history-section-hint,
[data-theme="dark"] .about-block p,
[data-theme="dark"] .about-block li { color: var(--text-2) }
[data-theme="dark"] .sim-card-header { background: linear-gradient(135deg, #1e3a60 0%, #2a4a72 100%); color: #fff }
[data-theme="dark"] .sim-spinner-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
   background: #0c1424;
   color: var(--text);
   border-color: var(--border);
}
[data-theme="dark"] .history-card { background: #182234 }
[data-theme="dark"] .history-card-sim { background: #182234; border-color: var(--border); color: var(--text-2) }
[data-theme="dark"] .history-privacy-note { background: #182234; color: var(--text-2) }
[data-theme="dark"] .chart-grid-line { stroke: #334155 }
[data-theme="dark"] .chart-axis-y,
[data-theme="dark"] .chart-axis-x { fill: #94a3b8 }
[data-theme="dark"] .chart-legend-chip { background: #182234; border-color: var(--border); color: var(--text) }
[data-theme="dark"] .chart-dot { stroke: #1e293b }
[data-theme="dark"] .history-hero { background: linear-gradient(135deg, #1a3a5c 0%, #0f2236 100%) }
[data-theme="dark"] .btn-outline { background: transparent; color: var(--text); border-color: var(--border) }
[data-theme="dark"] .btn-outline:hover { background: var(--primary-lt) }
[data-theme="dark"] footer { background: #0c1424; color: rgba(255,255,255,0.6) }
[data-theme="dark"] .a11y-toolbar { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12) }
[data-theme="dark"] .a11y-btn.is-active { background: var(--accent); color: #0f172a }
[data-theme="dark"] .history-subj-badge.subj-lc { background: #2c1f4a; border-color: #8b6cd9; color: #c5b3ff }
[data-theme="dark"] .history-subj-badge.subj-mat { background: #1f3a5c; border-color: #5b8cc7; color: #9ec5f0 }
[data-theme="dark"] .history-subj-badge.subj-soc { background: #3d2f15; border-color: #f5b53a; color: #fcd34d }
[data-theme="dark"] .history-subj-badge.subj-cn { background: #14322a; border-color: #2dba5e; color: #86efac }
[data-theme="dark"] .history-subj-badge.subj-ing { background: #3a1a17; border-color: #e25b4d; color: #fca5a5 }
[data-theme="dark"] .history-subj-badge .history-subj-pct { color: var(--text) }
[data-theme="dark"] .history-subj-badge .history-subj-frac { color: var(--text-2) }
[data-theme="dark"] .sim-total-questions { background: #3d2f15; color: var(--accent) }
[data-theme="dark"] .sim-total-questions span { color: #fcd34d }
[data-theme="dark"] .sim-spinner-input:disabled,
[data-theme="dark"] .sim-spinner-input.disabled,
[data-theme="dark"] .sim-spinner-btn:disabled { background: #0a1120; color: #475569; opacity: 0.55 }
[data-theme="dark"] .sim-spinner:has(.sim-spinner-input:disabled),
[data-theme="dark"] .sim-spinner:has(.sim-spinner-input.disabled) { border-color: #1e2a3f; background: #0a1120 }
[data-theme="dark"] .feedback-email { color: var(--accent); border-bottom-color: rgba(245,181,58,.45) }
[data-theme="dark"] .feedback-email:hover,
[data-theme="dark"] .feedback-email:focus { color: #fcd34d; border-bottom-color: #fcd34d }