/* ============================================================
   PALETA DE MARCA — Ceclaf
   Color de marca: #371373 (violeta profundo).
   Paleta moderna construida alrededor de ese color, con un
   acento cálido (fucsia/magenta) para degradados dinámicos y
   un acento frío (cian) para estados secundarios (diagnóstico).
   ============================================================ */
:root {
    --brand-primary: #371373;        /* Violeta profundo — color de marca */
    --brand-primary-dark: #240B4E;   /* Violeta más oscuro (hover, fondos) */
    --brand-primary-light: #6D3FC0;  /* Violeta claro (degradados, hover en oscuro) */
    --brand-accent: #C026D3;         /* Fucsia — acento cálido para degradados */
    --brand-accent-dark: #9D174D;
    --brand-cyan: #06B6D4;           /* Cian — acento frío (diagnóstico, info) */
    --brand-bg: #F6F5FA;             /* Fondo general (claro) — violeta muy tenue */
    --heading-accent: var(--brand-primary);

    --gradient-brand: linear-gradient(135deg, var(--brand-primary) 0%, #6C2BD9 55%, var(--brand-accent) 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(55,19,115,0.12) 0%, rgba(192,38,211,0.10) 100%);

    --card-radius: 14px;
    --card-border: rgba(55, 19, 115, 0.10);
}

body {
    background: var(--brand-bg);
}

/* ---- Fondo decorativo con formas difuminadas (usado en login/register) ---- */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.45;
}
.aurora-blob.b1 { width: 420px; height: 420px; background: var(--brand-primary); top: -120px; left: -100px; }
.aurora-blob.b2 { width: 380px; height: 380px; background: var(--brand-accent); bottom: -140px; right: -80px; }
.aurora-blob.b3 { width: 300px; height: 300px; background: var(--brand-cyan); top: 40%; right: 15%; opacity: 0.25; }

/* Wordmark de respaldo mientras no se suba assets/img/logo.png */
.brand-wordmark {
    font-weight: 800;
    letter-spacing: 0.3px;
    font-size: 1.3rem;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--gradient-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(55, 19, 115, 0.35);
}
.brand-subtitle {
    font-size: 0.78rem;
    color: #6b7280;
    border-left: 1px solid #d7dbe3;
    padding-left: 10px;
}

/* ---- Overrides sobre Bootstrap para usar la paleta de marca ---- */
.navbar { border-bottom-color: var(--card-border) !important; }

.btn-primary {
    background: var(--gradient-brand);
    border: none;
    box-shadow: 0 4px 14px rgba(55, 19, 115, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(55, 19, 115, 0.38);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background: var(--gradient-brand);
    border-color: transparent;
}

.bg-primary { background: var(--gradient-brand) !important; }
.text-primary { color: var(--heading-accent) !important; }
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-light); }

/* El acento cian marca lo "informativo": diagnóstico, resaltados suaves */
.bg-info { background-color: var(--brand-cyan) !important; }
.text-info { color: var(--brand-cyan) !important; }

.progress-bar { background: var(--gradient-brand) !important; }

/* ---- Tarjetas modernas: bordes suaves, esquinas redondeadas, elevación al pasar el mouse ---- */
.card {
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.card:hover, .card.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(55, 19, 115, 0.14) !important;
}

/* Insignia de icono cuadrada con degradado, usada en tarjetas de administración/dashboard */
.icon-badge {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: var(--gradient-brand);
    box-shadow: 0 4px 12px rgba(55, 19, 115, 0.25);
    flex-shrink: 0;
}
.icon-badge.cyan { background: linear-gradient(135deg, #0891B2, var(--brand-cyan)); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); }
.icon-badge.green { background: linear-gradient(135deg, #15803D, #22C55E); box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }
.icon-badge.amber { background: linear-gradient(135deg, #B45309, #F59E0B); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.icon-badge.rose { background: linear-gradient(135deg, #BE123C, #FB7185); box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3); }
.icon-badge.blue { background: linear-gradient(135deg, #1D4ED8, #60A5FA); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.icon-badge.teal { background: linear-gradient(135deg, #0F766E, #2DD4BF); box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3); }
.icon-badge.sm { width: 36px; height: 36px; font-size: 1.05rem; border-radius: 10px; }

/* ---- Elementos propios de la app ---- */
.badge-easy { background-color: #16A34A !important; }
.badge-medium { background-color: #D97706 !important; color: #fff; }
.badge-hard { background-color: #DC2626 !important; }

.option-row {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

.option-row.correct {
    background: rgba(34, 197, 94, 0.08);
    border-color: #22C55E;
}

.option-row.incorrect {
    background: rgba(220, 38, 38, 0.08);
    border-color: #DC2626;
}

.option-explanation {
    font-size: 0.87rem;
    color: #555;
    margin-top: 6px;
    margin-bottom: 0;
}

.timer-box {
    font-weight: 700;
    font-size: 1.1rem;
    color: #DC2626;
    position: sticky;
    top: 70px;
    z-index: 5;
}

.section-heading {
    background: var(--gradient-brand-soft);
    border-left: 4px solid var(--brand-primary);
    padding: 10px 16px;
    border-radius: 8px;
    margin: 24px 0 14px;
}

.result-score {
    font-size: 2.4rem;
    font-weight: 800;
}

.pass { color: #16A34A; }
.fail { color: #DC2626; }

.stat-number {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--heading-accent);
}

.radar-chart-wrap {
    max-width: 480px;
    margin: 0 auto;
}

.theme-toggle {
    line-height: 1;
}

/* ============================================================
   MODO OSCURO
   ============================================================ */
[data-bs-theme="dark"] {
    --brand-bg: #0F0B1A;
    --heading-accent: #B794F6; /* violeta claro con buen contraste sobre fondo oscuro */
    --card-border: rgba(183, 148, 246, 0.16);
}

[data-bs-theme="dark"] body {
    background: var(--brand-bg);
}

[data-bs-theme="dark"] .navbar {
    border-bottom-color: var(--card-border) !important;
}

[data-bs-theme="dark"] .brand-subtitle {
    color: #9aa4b2;
    border-left-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] a {
    color: #B794F6;
}
[data-bs-theme="dark"] a:hover {
    color: #D6BCFA;
}

/* Cualquier tarjeta-enlace usa el color de texto normal del tema (nunca "text-dark" forzado) */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] a.card {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .option-row {
    border-color: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="dark"] .option-row.correct {
    background: rgba(34, 197, 94, 0.16);
    border-color: #34D399;
}
[data-bs-theme="dark"] .option-row.incorrect {
    background: rgba(220, 38, 38, 0.16);
    border-color: #F87171;
}

[data-bs-theme="dark"] .option-explanation {
    color: #b6bdc8;
}

[data-bs-theme="dark"] .section-heading {
    background: rgba(183, 148, 246, 0.08);
}

[data-bs-theme="dark"] .timer-box {
    background: var(--bs-body-bg) !important;
    color: #FCA5A5;
}

[data-bs-theme="dark"] .study-sidebar .list-group-item.bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: inherit;
}

[data-bs-theme="dark"] .exam-topbar,
[data-bs-theme="dark"] .exam-bottombar {
    background: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .aurora-blob { opacity: 0.35; }