/* =============================================
   GALOPE AL TROTE - v2.0 Styles
   Tema ecuestre cálido
   ============================================= */

/* --- Reset & Variables --- */
:root {
    --bg: #F4F1FF;
    --card-bg: #ffffff;
    --text: #1C1040;
    --text-light: #6B5B95;
    --text-muted: #9E8EC4;
    --primary: #6C35CB;
    --primary-light: #8A5CE6;
    --secondary: #EC4899;
    --accent: #FF6B35;
    --accent-light: #FF8F5A;
    --success: #10B981;
    --error: #EF4444;
    --border: #E8E0FF;
    --shadow: 0 4px 20px rgba(108,53,203,.12);
    --shadow-hover: 0 8px 28px rgba(108,53,203,.22);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;

    /* Galope colors - vibrantes */
    --g1: #22C55E;
    --g2: #3B82F6;
    --g3: #F59E0B;
    --g4: #A855F7;
    --g5: #EC4899;
    --g6: #06B6D4;
    --g7: #F97316;
}

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

body {
    font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

/* --- Utility --- */
.hidden { display: none !important; }
.text-center { text-align: center; }

/* --- Header --- */
.app-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(108,53,203,.25);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-left .logo {
    font-size: 1.5rem;
}

.header-left h1 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .5px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
}

.user-info .user-emoji {
    font-size: 1.3rem;
}

.btn-header {
    background: rgba(255,255,255,.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .82rem;
    transition: background .2s;
}

.btn-header:hover {
    background: rgba(255,255,255,.3);
}

.admin-link {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: .82rem;
    transition: color .2s;
}

.admin-link:hover {
    color: #fff;
}

/* --- Views --- */
.view {
    display: none;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.view.active {
    display: block;
}

/* --- LOGIN VIEW --- */
#view-login.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
}

.login-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 50px 40px;
    max-width: 420px;
    width: 100%;
}

.login-logo {
    font-size: 4rem;
    margin-bottom: 10px;
}

.login-card h2 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 6px;
}

.login-card p {
    color: var(--text-light);
    margin-bottom: 28px;
    font-size: .95rem;
}

.login-input-group {
    margin-bottom: 20px;
}

.login-input-group label {
    display: block;
    text-align: left;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: .9rem;
    color: var(--primary);
}

.login-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    outline: none;
    transition: border-color .2s;
    background: var(--bg);
}

.login-input:focus {
    border-color: var(--accent);
}

.login-input.shake {
    animation: shake .4s ease-in-out;
    border-color: var(--error);
}

.btn-enter {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, #f57c00 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    letter-spacing: .5px;
}

.btn-enter:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255,143,0,.4);
}

.btn-enter:active {
    transform: translateY(0);
}

/* --- DASHBOARD VIEW --- */
.dashboard-welcome {
    margin-bottom: 30px;
}

.dashboard-welcome h2 {
    font-size: 1.5rem;
    color: var(--primary);
}

.dashboard-welcome p {
    color: var(--text-light);
    font-size: .95rem;
}

.section-title {
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 16px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.galope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 36px;
}

.galope-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 18px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border-top: 4px solid var(--border);
    position: relative;
    overflow: hidden;
}

.galope-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(109,76,46,.18);
}

.galope-card .galope-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.galope-card h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.galope-card .galope-count {
    font-size: .8rem;
    color: var(--text-light);
}

.galope-card .galope-best {
    font-size: .75rem;
    color: var(--success);
    margin-top: 4px;
}

/* Galope card colors */
.galope-1 { border-top-color: var(--g1); }
.galope-1 .galope-icon { color: var(--g1); }
.galope-2 { border-top-color: var(--g2); }
.galope-2 .galope-icon { color: var(--g2); }
.galope-3 { border-top-color: var(--g3); }
.galope-3 .galope-icon { color: var(--g3); }
.galope-4 { border-top-color: var(--g4); }
.galope-4 .galope-icon { color: var(--g4); }
.galope-5 { border-top-color: var(--g5); }
.galope-5 .galope-icon { color: var(--g5); }
.galope-6 { border-top-color: var(--g6); }
.galope-6 .galope-icon { color: var(--g6); }
.galope-7 { border-top-color: var(--g7); }
.galope-7 .galope-icon { color: var(--g7); }
.galope-mix14 { border-top-color: var(--accent); }
.galope-mix14 .galope-icon { color: var(--accent); }
.galope-mix57 { border-top-color: var(--error); }
.galope-mix57 .galope-icon { color: var(--error); }

/* --- CONFIG VIEW --- */
#config-view {
    max-width: 500px;
}

.config-section {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 20px;
}

.config-section h3 {
    color: var(--primary);
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.config-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: .92rem;
    cursor: pointer;
}

.config-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 18px;
    height: 18px;
}

.question-count-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.question-count-row label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .9rem;
    transition: border-color .2s, background .2s;
}

.question-count-row input[type="radio"] {
    accent-color: var(--accent);
}

.question-count-row label:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255,143,0,.08);
}

.config-available {
    color: var(--text-light);
    font-size: .85rem;
    margin-top: 10px;
    font-style: italic;
}

.config-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.config-option {
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.config-option:hover:not(:disabled) {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.config-option.active {
    border-color: var(--accent);
    background: rgba(255,143,0,.1);
    color: #b86100;
}

.config-option:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.config-option-official {
    background: linear-gradient(135deg, rgba(255,143,0,.12) 0%, rgba(255,193,7,.16) 100%);
    border-color: #f5b85d;
}

.config-official-note {
    margin-top: 8px;
    color: #9a6c25;
    font-size: .82rem;
}

.btn-start {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--success) 0%, #388e3c 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(76,175,80,.4);
}

/* --- QUIZ VIEW --- */
.quiz-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.quiz-banner {
    width: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    border-radius: var(--radius);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
}

.quiz-banner-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.quiz-banner-logo {
    font-size: 1.35rem;
}

.quiz-banner-title {
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .3px;
}

.quiz-banner-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.quiz-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .86rem;
    font-weight: 600;
}

.btn-interrupt-quiz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.btn-interrupt-quiz:hover {
    background: rgba(255,255,255,.3);
}

.quiz-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.quiz-progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 999px;
    transition: width .3s ease;
}

.quiz-info-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quiz-counter {
    font-size: .92rem;
    font-weight: 700;
    color: var(--primary);
}

.quiz-score-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--primary);
}

.quiz-progress-text {
    font-size: .9rem;
    color: var(--text-light);
}

.quiz-category {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .3px;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: 4px;
    transition: width .4s ease;
}

.question-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
    margin-bottom: 20px;
    animation: fadeIn .3s ease;
}

.question-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(109,76,46,.08);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.question-text {
    font-size: 1.1rem;
    line-height: 1.65;
    margin-bottom: 20px;
    color: var(--text);
}

/* --- MC Options --- */
.mc-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mc-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .1s;
    font-size: .95rem;
}

.mc-option:hover:not(.disabled) {
    border-color: var(--accent);
    background: rgba(255,143,0,.04);
    transform: translateX(4px);
}

.mc-option .option-letter {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

.mc-option.correct {
    border-color: var(--success);
    background: rgba(76,175,80,.08);
}

.mc-option.correct .option-letter {
    background: var(--success);
}

.mc-option.incorrect {
    border-color: var(--error);
    background: rgba(229,57,53,.06);
}

.mc-option.incorrect .option-letter {
    background: var(--error);
}

.mc-option.disabled {
    pointer-events: none;
    opacity: .7;
}

/* --- True/False --- */
.tf-options {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.tf-btn {
    flex: 1;
    max-width: 200px;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: border-color .2s, background .2s, transform .1s;
    text-align: center;
}

.tf-btn:hover:not(.disabled) {
    transform: translateY(-2px);
}

.tf-btn.true:hover:not(.disabled) {
    border-color: var(--success);
    background: rgba(76,175,80,.06);
}

.tf-btn.false:hover:not(.disabled) {
    border-color: var(--error);
    background: rgba(229,57,53,.06);
}

.tf-btn.correct {
    border-color: var(--success);
    background: rgba(76,175,80,.12);
    color: var(--success);
}

.tf-btn.incorrect {
    border-color: var(--error);
    background: rgba(229,57,53,.08);
    color: var(--error);
}

.tf-btn.disabled {
    pointer-events: none;
    opacity: .7;
}

.tf-btn i {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 6px;
}

/* --- Match Pairs --- */
.match-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 4px;
}

.match-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.match-column-title {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-light);
    padding: 4px 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.match-item {
    padding: 10px 12px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .88rem;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
    min-height: 44px;
    display: flex;
    align-items: center;
    word-break: break-word;
    user-select: none;
}

.match-item:hover:not(.matched) {
    border-color: var(--accent);
    transform: translateX(2px);
}

.match-item.selected {
    border-color: var(--accent);
    background: rgba(255,107,53,.1);
    box-shadow: 0 0 0 3px rgba(255,107,53,.18);
    font-weight: 700;
}

.match-item.matched {
    border-color: var(--success);
    background: rgba(16,185,129,.1);
    color: #065f46;
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}

.match-item.error {
    border-color: var(--error);
    background: rgba(239,68,68,.09);
    animation: matchShake .35s ease-in-out;
}

@keyframes matchShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.match-score {
    margin-top: 10px;
    font-size: .88rem;
    color: var(--text-light);
    text-align: center;
    font-weight: 700;
}

/* --- Fill Blank --- */
.fill-blank-sentence {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: center;
    padding: 16px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.blank-slot {
    display: inline-block;
    min-width: 120px;
    padding: 4px 16px;
    border-bottom: 3px solid var(--accent);
    color: var(--accent);
    font-weight: 700;
    text-align: center;
    transition: border-color .3s, color .3s;
}

.blank-slot.correct {
    border-color: var(--success);
    color: var(--success);
}

.blank-slot.incorrect {
    border-color: var(--error);
    color: var(--error);
    text-decoration: line-through;
}

.fill-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.fill-chip {
    padding: 10px 20px;
    border: 2px solid var(--border);
    border-radius: 24px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: .95rem;
    font-weight: 500;
    transition: border-color .2s, background .2s, transform .15s;
}

.fill-chip:hover:not(.disabled) {
    border-color: var(--accent);
    background: rgba(255,143,0,.06);
    transform: translateY(-2px);
}

.fill-chip.correct {
    border-color: var(--success);
    background: rgba(76,175,80,.15);
    color: var(--success);
    font-weight: 700;
}

.fill-chip.incorrect {
    border-color: var(--error);
    background: rgba(229,57,53,.1);
    color: var(--error);
}

.fill-chip.disabled {
    pointer-events: none;
    opacity: .6;
}

/* --- Order Sequence --- */
.order-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: border-color .2s, background .2s, transform .1s;
    font-size: .9rem;
    user-select: none;
}

.order-item:active {
    cursor: grabbing;
}

.order-item .order-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .82rem;
    flex-shrink: 0;
}

.order-item.dragging {
    opacity: .5;
    border-color: var(--accent);
}

.order-item.drag-over {
    border-color: var(--accent);
    background: rgba(255,143,0,.06);
    transform: translateX(8px);
}

.order-item.in-place {
    border-color: var(--success);
    background: rgba(76,175,80,.08);
}

.order-item.in-place .order-number {
    background: var(--success);
}

.order-item.out-of-place {
    border-color: var(--error);
    background: rgba(229,57,53,.06);
}

.order-item.out-of-place .order-number {
    background: var(--error);
}

.btn-check-order {
    margin-top: 14px;
    padding: 12px 28px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.btn-check-order:hover {
    background: #e68200;
}

/* --- Feedback --- */
.feedback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 150;
    padding: 16px;
}

.feedback-overlay.active {
    display: flex;
}

.feedback-content {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    width: min(680px, 96vw);
    min-width: 320px;
    max-height: 82vh;
    overflow-y: auto;
    padding: 24px;
    text-align: center;
    border: 2px solid rgba(109,76,46,.14);
}

.feedback-content.feedback-mode-ok {
    border-color: rgba(76,175,80,.45);
    box-shadow: 0 10px 30px rgba(76,175,80,.18);
}

.feedback-content.feedback-mode-fail {
    border-color: rgba(229,57,53,.35);
    box-shadow: 0 10px 30px rgba(229,57,53,.14);
}

.feedback-area {
    text-align: center;
    padding: 20px;
}

.feedback-icon {
    font-size: 2.35rem;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(109,76,46,.08);
    margin-bottom: 8px;
}

.feedback-icon.correct { color: var(--success); }
.feedback-icon.incorrect { color: var(--error); }

.feedback-text {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 12px;
    font-weight: 700;
}

.feedback-explanation {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text);
    margin-top: 4px;
}

.feedback-manual {
    background: rgba(109,76,46,.05);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 16px;
    margin: 16px 0;
    text-align: left;
    max-height: 220px;
    overflow-y: auto;
}

.manual-ref-header {
    font-weight: 700;
    color: var(--primary);
    font-size: .85rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.manual-ref-text {
    font-size: .88rem;
    line-height: 1.65;
    color: var(--text);
}

.btn-feedback-continue {
    padding: 12px 36px;
    background: linear-gradient(135deg, var(--accent) 0%, #f57c00 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .feedback-content {
        width: min(740px, 92vw);
        max-height: 80vh;
        padding: 28px;
    }

    .feedback-manual {
        max-height: 260px;
    }
}

.btn-feedback-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(245,124,0,.35);
}

/* --- RESULTS VIEW --- */
.results-container {
    position: relative;
    min-height: calc(100vh - 110px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 22px 16px 30px;
}

#confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
}

.results-card {
    position: relative;
    z-index: 2;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
    text-align: center;
    width: min(760px, 96vw);
    margin-top: 6px;
}

.results-emoji {
    font-size: 2rem;
    margin-bottom: 6px;
}

.results-title {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 12px;
}

.results-score-ring {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 18px;
}

.score-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring-bg {
    fill: none;
    stroke: #e8e0d5;
    stroke-width: 8;
}

.score-ring-fill {
    fill: none;
    stroke: var(--success);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.3;
    stroke-dashoffset: 339.3;
    transition: stroke-dashoffset .9s ease, stroke .3s ease;
}

.score-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.results-score {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 16px 0;
}

.results-score.pass { color: var(--success); }
.results-score.fail { color: var(--error); }

.results-message {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 8px;
}

.results-details {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 16px;
    flex-wrap: wrap;
}

.results-detail {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.results-galope-info {
    color: var(--text-light);
    font-size: .9rem;
}

.results-achievement {
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(76,175,80,.12) 0%, rgba(255,193,7,.15) 100%);
    border: 1px solid rgba(76,175,80,.35);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.results-achievement-text {
    color: #2f5d34;
    font-weight: 700;
    line-height: 1.5;
}

.results-share-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.results-detail-item {
    text-align: center;
}

.results-detail-item .detail-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.results-detail-item .detail-label {
    font-size: .8rem;
    color: var(--text-light);
}

.results-detail-item .detail-number.correct { color: var(--success); }
.results-detail-item .detail-number.incorrect { color: var(--error); }

.results-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform .15s, box-shadow .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, #f57c00 100%);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: var(--primary);
    border: 2px solid var(--border);
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-1px);
}

.btn-result {
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform .15s;
}

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

.btn-result.primary {
    background: linear-gradient(135deg, var(--accent) 0%, #f57c00 100%);
    color: #fff;
}

.btn-result.secondary {
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text);
}

/* --- HISTORY VIEW --- */
.history-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filter-btn {
    padding: 6px 14px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--card-bg);
    font-size: .82rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.filter-btn:hover {
    border-color: var(--accent);
}

.filter-btn.active {
    border-color: var(--accent);
    background: rgba(255,143,0,.1);
    color: var(--accent);
    font-weight: 600;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--border);
}

.history-item .history-galope {
    font-weight: 600;
    font-size: .95rem;
}

.galope-badge small {
    font-weight: 600;
    opacity: .9;
}

.history-item .history-date {
    font-size: .78rem;
    color: var(--text-light);
}

.history-item .history-score {
    font-weight: 700;
    font-size: 1.1rem;
}

.history-item .history-score.pass { color: var(--success); }
.history-item .history-score.fail { color: var(--error); }

.history-empty {
    text-align: center;
    color: var(--text-light);
    padding: 40px 20px;
    font-size: .95rem;
}

.btn-back {
    padding: 10px 24px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    margin-top: 16px;
}

.btn-back:hover {
    border-color: var(--primary);
}

/* Chart canvas */
.chart-container {
    max-width: 100%;
    margin: 20px auto;
}

/* --- Toast --- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--primary);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
    z-index: 999;
    pointer-events: none;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* --- Confetti --- */
.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    top: -20px;
    z-index: 998;
    animation: confettiFall 2.5s ease-out forwards;
}

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.animate-in {
    animation: fadeIn .4s ease both;
}

/* --- Streak badge --- */
.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,143,0,.12);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    margin-top: 6px;
}

/* --- ADMIN PAGE STYLES --- */
.admin-header {
    background: linear-gradient(135deg, #37474f 0%, #546e7a 100%);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-header h1 {
    font-size: 1.15rem;
}

.admin-header a {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: .85rem;
}

.admin-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.admin-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    align-items: center;
}

.admin-toolbar select,
.admin-toolbar input {
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    background: var(--card-bg);
}

.btn-admin {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.btn-admin.primary {
    background: var(--accent);
    color: #fff;
}

.btn-admin.success {
    background: var(--success);
    color: #fff;
}

.btn-admin.danger {
    background: var(--error);
    color: #fff;
}

.btn-admin.secondary {
    background: var(--bg);
    border: 2px solid var(--border);
    color: var(--text);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.admin-table th {
    background: var(--primary);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-size: .85rem;
}

.admin-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
    vertical-align: top;
}

.admin-table tr:hover {
    background: rgba(109,76,46,.03);
}

.admin-table .type-badge {
    display: inline-block;
    background: rgba(109,76,46,.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 600;
}

.admin-table .actions-cell {
    white-space: nowrap;
}

.admin-table .actions-cell button {
    padding: 4px 10px;
    margin: 0 2px;
    border: none;
    border-radius: 4px;
    font-size: .78rem;
    cursor: pointer;
}

.admin-table .btn-edit {
    background: var(--accent);
    color: #fff;
}

.admin-table .btn-delete {
    background: var(--error);
    color: #fff;
}

/* Admin Form Modal */
.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.admin-modal {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0,0,0,.25);
    padding: 28px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.admin-modal h3 {
    color: var(--primary);
    margin-bottom: 18px;
    font-size: 1.1rem;
}

.admin-form-group {
    margin-bottom: 14px;
}

.admin-form-group label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 4px;
    color: var(--text);
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-family: inherit;
}

.admin-form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.admin-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.admin-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.admin-stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 16px 20px;
    text-align: center;
    min-width: 100px;
}

.admin-stat-card .stat-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
}

.admin-stat-card .stat-label {
    font-size: .78rem;
    color: var(--text-light);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .app-header {
        padding: 10px 14px;
    }

    .header-left h1 {
        font-size: .95rem;
    }

    .view {
        padding: 14px;
    }

    .login-card {
        padding: 32px 24px;
    }

    .galope-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .question-card {
        padding: 20px 16px;
    }

    .quiz-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .quiz-banner-actions {
        width: 100%;
        justify-content: space-between;
    }

    .btn-interrupt-quiz span {
        display: none;
    }

    .tf-options {
        flex-direction: column;
        align-items: center;
    }

    .tf-btn {
        max-width: 100%;
    }

    .match-container {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .match-item {
        font-size: .78rem;
        padding: 8px 8px;
        min-height: 38px;
    }

    .results-details {
        gap: 14px;
    }

    .results-container {
        min-height: calc(100vh - 90px);
        padding: 12px 8px 18px;
    }

    .results-card {
        width: 100%;
        padding: 20px 14px;
    }

    .results-score-ring {
        width: 176px;
        height: 176px;
    }

    .score-ring-text {
        font-size: 1.6rem;
    }

    .results-actions {
        gap: 8px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .feedback-manual {
        max-height: 180px;
        padding: 12px;
        font-size: .84rem;
    }

    .feedback-content {
        width: 100%;
        max-height: 88vh;
        border-radius: 10px;
        padding: 16px 14px;
    }

    .feedback-text {
        font-size: .98rem;
    }

    .btn-feedback-continue {
        width: 100%;
        padding: 12px 16px;
    }

    .admin-table {
        font-size: .78rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 6px 8px;
    }
}

/* =============================================
   MODERN TEEN AESTHETIC OVERRIDES  v3.0
   Nunito · Vibrante · Glassmorphism
   ============================================= */

/* --- Login moderno --- */
#view-login.active {
    background: linear-gradient(135deg, #6C35CB 0%, #8A5CE6 30%, #EC4899 70%, #FF6B35 100%);
    background-size: 200% 200%;
    animation: gradientFloat 8s ease infinite;
    min-height: 100vh;
    padding: 20px;
}

@keyframes gradientFloat {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.login-card {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    padding: 44px 36px;
    max-width: 420px;
    border: 1px solid rgba(255,255,255,.8);
}

.login-logo { font-size: 4.5rem; margin-bottom: 4px; }

.login-title {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
}

.login-subtitle {
    color: var(--text-light);
    font-size: .95rem;
    margin-bottom: 20px;
}

.login-features {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(108,53,203,.08);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
}

.login-label {
    display: block;
    font-weight: 800;
    font-size: .9rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.login-input-group {
    position: relative;
    margin-bottom: 16px;
}

.login-input-group > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.login-input {
    width: 100%;
    padding: 14px 16px 14px 40px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    background: var(--bg);
    color: var(--text);
}

.login-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,53,203,.15);
}

.btn-enter {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-enter:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108,53,203,.4);
}

.login-disclaimer {
    color: var(--text-muted);
    font-size: .78rem;
    margin-top: 12px;
    text-align: center;
}

/* --- Decorative floats --- */
.login-decoration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.horseshoe-float {
    position: absolute;
    font-size: 2.5rem;
    animation: floatDeco 4s ease-in-out infinite;
    opacity: .6;
}
.horseshoe-1 { top: 8%; left: 5%; animation-delay: 0s; }
.horseshoe-2 { top: 15%; right: 8%; animation-delay: 1.5s; }
.horseshoe-3 { bottom: 10%; left: 12%; animation-delay: 3s; }

@keyframes floatDeco {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-18px) rotate(5deg); }
}

/* --- Login container --- */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    position: relative;
}

/* --- Dashboard header --- */
#view-dashboard .app-header {
    background: linear-gradient(135deg, var(--primary) 0%, #5B21B6 50%, var(--primary-light) 100%);
    border-bottom: none;
}

.header-logo {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: .3px;
}

/* --- Galope cards modernas --- */
.galope-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border-top: 4px solid var(--border);
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
}

.galope-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(108,53,203,.04) 100%);
    pointer-events: none;
}

.galope-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.galope-level {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: .78rem;
    font-weight: 900;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(108,53,203,.12);
    color: var(--primary);
}

.galope-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 5px; }
.galope-card p { font-size: .78rem; color: var(--text-light); line-height: 1.45; }
.galope-badge { margin-top: 10px; font-size: .72rem; line-height: 1.4; }

/* Galope card colors - nuevos */
.galope-1 { border-top-color: var(--g1); }
.galope-1 .galope-icon { color: var(--g1); }
.galope-2 { border-top-color: var(--g2); }
.galope-2 .galope-icon { color: var(--g2); }
.galope-3 { border-top-color: var(--g3); }
.galope-3 .galope-icon { color: var(--g3); }
.galope-4 { border-top-color: var(--g4); }
.galope-4 .galope-icon { color: var(--g4); }
.galope-5 { border-top-color: var(--g5); }
.galope-5 .galope-icon { color: var(--g5); }
.galope-6 { border-top-color: var(--g6); }
.galope-6 .galope-icon { color: var(--g6); }
.galope-7 { border-top-color: var(--g7); }
.galope-7 .galope-icon { color: var(--g7); }
.galope-mix14 { border-top-color: var(--accent); }
.galope-mix14 .galope-icon { color: var(--accent); }
.galope-mix57 { border-top-color: var(--secondary); }
.galope-mix57 .galope-icon { color: var(--secondary); }

/* --- Section titles --- */
.section-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
    letter-spacing: .3px;
}

/* --- Stats bar como footer --- */
.dashboard-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 2px solid var(--border);
}

.stats-bar {
    display: flex;
    justify-content: space-around;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px 10px;
    box-shadow: var(--shadow);
    gap: 8px;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* --- Config screen moderna --- */
.config-main { padding: 16px; max-width: 540px; margin: 0 auto; }

.config-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
}

.config-card h2 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 4px;
}

.config-card > p { color: var(--text-light); font-size: .9rem; margin-bottom: 2px; }

.config-section {
    background: rgba(108,53,203,.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin: 18px 0;
}

.config-label {
    font-weight: 800;
    font-size: .9rem;
    color: var(--primary);
    margin-bottom: 10px;
    display: block;
}

.config-option {
    padding: 9px 16px;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}

.config-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(108,53,203,.06);
    transform: translateY(-1px);
}

.config-option.active {
    border-color: var(--primary);
    background: rgba(108,53,203,.1);
    color: var(--primary);
    font-weight: 800;
}

.config-option-official {
    background: linear-gradient(135deg, rgba(108,53,203,.08) 0%, rgba(236,72,153,.1) 100%);
    border-color: rgba(108,53,203,.3);
    border-radius: var(--radius-sm) !important;
    width: 100%;
    margin-top: 4px;
    font-size: .88rem;
}

.config-option-official.active {
    background: linear-gradient(135deg, rgba(108,53,203,.18) 0%, rgba(236,72,153,.2) 100%);
    border-color: var(--primary);
}

.config-official-note {
    margin-top: 10px;
    color: var(--text-light);
    font-size: .8rem;
    line-height: 1.5;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.config-type-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.config-type-check:hover { border-color: var(--primary); background: rgba(108,53,203,.04); }

.config-types { display: flex; flex-direction: column; }

.check-icon {
    width: 32px;
    height: 32px;
    background: rgba(108,53,203,.1);
    color: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    flex-shrink: 0;
}

.btn-start-quiz {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    letter-spacing: .5px;
    font-family: inherit;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-start-quiz:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108,53,203,.4);
}

/* --- Quiz - banner y tarjeta modernos --- */
.quiz-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(108,53,203,.25);
}

.quiz-timer {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.3);
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 800;
}

.btn-interrupt-quiz {
    border-radius: 999px;
    font-weight: 800;
    font-size: .8rem;
}

.quiz-progress-fill {
    background: linear-gradient(90deg, var(--secondary) 0%, var(--accent) 100%);
}

.question-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 22px;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
}

/* Imagen en pregunta */
.question-image {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    border: 2px solid var(--border);
}

.question-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Colores por tipo de pregunta */
.question-type-badge:has(.fa-list) { background: rgba(59,130,246,.12); color: #1d4ed8; }
.question-type-badge:has(.fa-check-circle) { background: rgba(16,185,129,.12); color: #065f46; }
.question-type-badge:has(.fa-arrows-alt-h) { background: rgba(168,85,247,.12); color: #7c3aed; }
.question-type-badge:has(.fa-pen-fancy) { background: rgba(236,72,153,.12); color: #be185d; }
.question-type-badge:has(.fa-sort-amount-down) { background: rgba(249,115,22,.12); color: #c2410c; }

.question-text {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 18px;
    color: var(--text);
}

.question-category {
    font-size: .78rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 12px;
}

/* --- MC options modernas --- */
.mc-option {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--bg);
    transition: all .2s;
    font-weight: 600;
    font-size: .95rem;
    font-family: inherit;
}

.mc-option:hover:not(.disabled) {
    border-color: var(--primary);
    background: rgba(108,53,203,.05);
    transform: translateX(4px);
}

.mc-option.correct {
    border-color: var(--success);
    background: rgba(16,185,129,.1);
}

.mc-option.correct .mc-option-letter { background: var(--success); }

.mc-option.incorrect {
    border-color: var(--error);
    background: rgba(239,68,68,.07);
}

.mc-option.incorrect .mc-option-letter { background: var(--error); }

.mc-option-letter {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .8rem;
    flex-shrink: 0;
}

/* --- TF options modernas --- */
.tf-option {
    flex: 1;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    cursor: pointer;
    transition: all .2s;
    padding: 18px;
    text-align: center;
    font-family: inherit;
    font-weight: 700;
}

.tf-option .tf-icon { font-size: 2rem; margin-bottom: 6px; display: block; }
.tf-option .tf-text { font-size: .95rem; font-weight: 800; }

.tf-option:hover:not(.disabled) { transform: translateY(-3px); }
.tf-option.true-btn:hover:not(.disabled) { border-color: var(--success); background: rgba(16,185,129,.07); }
.tf-option.false-btn:hover:not(.disabled) { border-color: var(--error); background: rgba(239,68,68,.07); }
.tf-option.correct { border-color: var(--success); background: rgba(16,185,129,.12); }
.tf-option.incorrect { border-color: var(--error); background: rgba(239,68,68,.08); }
.tf-option.disabled { pointer-events: none; opacity: .7; }

/* --- Fill blank moderno --- */
.blank-slot {
    border-bottom: 3px solid var(--accent);
    color: var(--accent);
    font-weight: 800;
}

.blank-slot.correct { border-color: var(--success); color: var(--success); }
.blank-slot.incorrect { border-color: var(--error); color: var(--error); text-decoration: line-through; }

.fill-chip {
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--card-bg);
    font-family: inherit;
    font-weight: 700;
}

.fill-chip:hover:not(.disabled) {
    border-color: var(--primary);
    background: rgba(108,53,203,.06);
    transform: translateY(-2px);
}

.fill-chip.correct { border-color: var(--success); background: rgba(16,185,129,.12); color: #065f46; }
.fill-chip.incorrect { border-color: var(--error); background: rgba(239,68,68,.08); color: var(--error); }

/* --- Order sequence moderno --- */
.order-item {
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    font-family: inherit;
    font-weight: 600;
    background: var(--bg);
}

.order-item .order-num {
    background: var(--primary);
}

.order-item.correct { border-color: var(--success); background: rgba(16,185,129,.08); }
.order-item.incorrect { border-color: var(--error); background: rgba(239,68,68,.06); }

/* --- Feedback overlay moderno --- */
.feedback-content {
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
    border: 2px solid rgba(108,53,203,.12);
}

.feedback-content.feedback-mode-ok {
    border-color: rgba(16,185,129,.45);
    box-shadow: 0 16px 48px rgba(16,185,129,.18);
}

.feedback-content.feedback-mode-fail {
    border-color: rgba(239,68,68,.35);
    box-shadow: 0 16px 48px rgba(239,68,68,.14);
}

.btn-feedback-continue {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 999px;
    font-weight: 800;
    font-family: inherit;
    padding: 13px 40px;
}

.btn-feedback-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108,53,203,.35);
}

/* --- Results moderno --- */
.results-title {
    font-size: 1.7rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 999px;
    font-weight: 800;
    font-family: inherit;
    padding: 12px 24px;
    font-size: .92rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(108,53,203,.35);
}

.btn-secondary {
    border-radius: 999px;
    font-weight: 700;
    font-family: inherit;
    border-color: var(--border);
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: rgba(108,53,203,.05);
}

/* --- History moderno --- */
.filter-btn {
    border-radius: 999px;
    font-weight: 700;
    font-family: inherit;
}

.filter-btn.active {
    border-color: var(--primary);
    background: rgba(108,53,203,.1);
    color: var(--primary);
}

.history-score-badge {
    min-width: 52px;
    text-align: center;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-weight: 900;
    font-size: .92rem;
    margin-right: 12px;
    flex-shrink: 0;
}

.history-score-badge.excellent { background: rgba(16,185,129,.15); color: #065f46; }
.history-score-badge.good { background: rgba(59,130,246,.15); color: #1d4ed8; }
.history-score-badge.fair { background: rgba(249,115,22,.15); color: #9a3412; }
.history-score-badge.poor { background: rgba(239,68,68,.15); color: #991b1b; }

/* --- Diploma modal --- */
.diploma-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,0,30,.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 20px;
    animation: fadeIn .4s ease;
}

.diploma-overlay.hidden { display: none; }

.diploma-card {
    background: linear-gradient(160deg, #fff 0%, #F4F1FF 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 72px rgba(108,53,203,.35);
    padding: 36px 28px 28px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    border: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
    animation: diplomaIn .5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes diplomaIn {
    from { transform: scale(.7) translateY(40px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.diploma-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    border-radius: inherit;
    z-index: -1;
}

.diploma-confetti-row { font-size: 1.6rem; margin-bottom: 6px; letter-spacing: 8px; }
.diploma-stars { font-size: 2rem; margin-bottom: 6px; letter-spacing: 4px; }
.diploma-logo { font-size: 3.5rem; margin-bottom: 6px; }
.diploma-label {
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.diploma-title {
    font-size: 1.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.diploma-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 10px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 10px;
}

.diploma-level-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    padding: 8px 24px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin: 8px 0;
}

.diploma-desc {
    font-size: .88rem;
    color: var(--text-light);
    line-height: 1.55;
    margin: 12px 0;
}

.diploma-seal { font-size: 2.5rem; margin: 8px 0; }

.diploma-footer-text {
    font-size: .75rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.diploma-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Simulacro indicator badge in quiz --- */
.simulacro-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(108,53,203,.18) 0%, rgba(236,72,153,.18) 100%);
    border: 1px solid rgba(108,53,203,.3);
    color: var(--primary);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}

/* --- User badge en header --- */
.user-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .85rem;
    font-weight: 700;
}

.btn-icon {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
    font-size: .92rem;
}

.btn-icon:hover { background: rgba(255,255,255,.3); }
.btn-logout { background: rgba(239,68,68,.3); border-color: rgba(239,68,68,.4); }

/* Toast modernos */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    animation: toastIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
    background: var(--primary);
    color: #fff;
}

.toast.success { background: var(--success); }
.toast.error { background: var(--error); }
.toast.info { background: var(--primary); }

@keyframes toastIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- Responsive extras modernos --- */
@media (max-width: 600px) {
    .login-card { padding: 28px 22px; }
    .diploma-card { padding: 28px 20px 20px; }
    .galope-card { padding: 18px 12px; }
    .question-card { padding: 18px 14px; }
    .match-container { gap: 6px; }
    .match-item { word-break: break-word; hyphens: auto; }
}

/* =========================================================
   HERO CHOICES (Dashboard 2 paths)
   ========================================================= */
.hero-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 680px;
    margin: 0 auto 30px;
}

.hero-card {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 20px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hero-card:nth-child(1)::before {
    background: linear-gradient(135deg, rgba(108, 53, 203, 0.2), rgba(236, 72, 153, 0.15));
}
.hero-card:nth-child(2)::before {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.15));
}

.hero-card:hover::before,
.hero-card:active::before {
    opacity: 1;
}

.hero-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-hover);
}

.hero-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
}

.hero-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text);
}

.hero-card p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.5;
}

@media (max-width: 520px) {
    .hero-choices { grid-template-columns: 1fr; gap: 14px; }
    .hero-card { padding: 24px 16px; }
    .hero-icon { font-size: 2.4rem; }
}

/* =========================================================
   VIEW: TEST HUB (back button + galope grid)
   ========================================================= */
.view-header-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.view-header-bar .btn-back {
    background: rgba(108, 53, 203, 0.08);
    border: none;
    color: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s;
}

.view-header-bar .btn-back:hover {
    background: rgba(108, 53, 203, 0.15);
}

.view-header-bar h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

/* =========================================================
   VIEW: STUDY HUB  (3 study cards)
   ========================================================= */
.study-hub-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 560px;
    margin: 0 auto;
}

.study-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
}

.study-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}

.study-card-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 53, 203, 0.08);
    border-radius: 14px;
}

.study-card-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}

.study-card-text p {
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.4;
}

.study-card-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: transform 0.2s, color 0.2s;
}

.study-card:hover .study-card-arrow {
    transform: translateX(4px);
    color: var(--primary);
}

/* =========================================================
   VIEW: DICCIONARIO
   ========================================================= */
.dictionary-main {
    max-width: 680px;
    margin: 0 auto;
}

.dict-search-bar {
    position: relative;
    margin-bottom: 14px;
}

.dict-search-bar input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s, background 0.25s;
    box-sizing: border-box;
}

.dict-search-bar input::placeholder { color: var(--text-muted); }

.dict-search-bar input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108, 53, 203, 0.15);
}

.dict-search-bar .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.dict-letter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.dict-letter-btn {
    background: rgba(108, 53, 203, 0.06);
    border: 1px solid var(--border);
    color: var(--text-light);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.dict-letter-btn:hover { background: rgba(108, 53, 203, 0.12); }
.dict-letter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.dict-cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.dict-cat-btn {
    background: rgba(108, 53, 203, 0.06);
    border: 1px solid var(--border);
    color: var(--text-light);
    border-radius: 10px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.dict-cat-btn:hover { background: rgba(108, 53, 203, 0.12); }
.dict-cat-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Dictionary entries */
.dict-entry {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(108, 53, 203, 0.06);
}

.dict-entry:hover {
    box-shadow: var(--shadow);
    border-color: var(--primary-light);
}

.dict-entry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}

.dict-emoji {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.dict-term {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    flex-grow: 1;
}

.dict-galope-tag {
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.dict-expand-icon {
    color: var(--text-muted);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.dict-entry.expanded .dict-expand-icon {
    transform: rotate(180deg);
}

.dict-entry-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 16px;
}

.dict-entry.expanded .dict-entry-body {
    max-height: 200px;
    padding: 0 16px 16px;
}

.dict-definition {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 8px;
}

.dict-definition mark {
    background: rgba(236, 72, 153, 0.15);
    color: var(--secondary);
    padding: 0 3px;
    border-radius: 3px;
}

.dict-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dict-cat-tag {
    background: rgba(108, 53, 203, 0.1);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 6px;
}

.dict-galope-info {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.dict-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.dict-empty i { font-size: 2rem; margin-bottom: 10px; display: block; }

/* =========================================================
   VIEW: RESULTADOS TEST DE NIVEL
   ========================================================= */
.level-hero {
    text-align: center;
    margin-bottom: 20px;
}

.level-hero-emoji { font-size: 3rem; margin-bottom: 8px; }

.level-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 16px;
}

.level-hero-overall { margin-bottom: 8px; }

.level-overall-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    box-shadow: 0 6px 24px rgba(108, 53, 203, 0.4);
}

.level-overall-pct {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
}

.level-hero-overall p {
    color: var(--text-light);
    font-size: 0.88rem;
}

.level-consolidated-banner {
    background: linear-gradient(90deg, rgba(108, 53, 203, 0.08), rgba(59, 130, 246, 0.06));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--text);
    font-size: 0.95rem;
}

.level-consolidated-banner i {
    font-size: 1.4rem;
    color: var(--accent);
}

.level-bars h3 {
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.level-bars h3 i { margin-right: 8px; color: var(--accent); }

.level-bar-row {
    display: grid;
    grid-template-columns: 120px 1fr 50px 140px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.level-bar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text);
    font-size: 0.88rem;
}

.level-bar-track {
    height: 14px;
    background: rgba(108, 53, 203, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.level-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.8s ease;
    min-width: 2px;
}

.level-bar-pct {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    text-align: right;
}

.level-bar-status {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
}

.level-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
}

@media (max-width: 600px) {
    .level-bar-row {
        grid-template-columns: 90px 1fr 42px;
    }
    .level-bar-status { display: none; }
}

/* =========================================================
   VIEW: FICHAS DE REPASO
   ========================================================= */
.fichas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}

.ficha-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(108, 53, 203, 0.06);
}

.ficha-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--primary-light);
    transform: translateY(-2px);
}

.ficha-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(108, 53, 203, 0.08);
    border-radius: 12px;
}

.ficha-info {
    flex-grow: 1;
}

.ficha-info h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.ficha-info p {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.4;
    margin-bottom: 4px;
}

.ficha-galope-tag {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(108, 53, 203, 0.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 6px;
}

.ficha-download-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ficha-download-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(108,53,203,0.4);
}

/* =============================================
   BOTÓN FLOTANTE DE MÚSICA
   ============================================= */
.music-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(108, 53, 203, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.3s;
    animation: music-pulse 2s ease-in-out infinite;
}

.music-toggle:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 24px rgba(108, 53, 203, 0.55);
}

.music-toggle:active {
    transform: scale(0.95);
}

.music-toggle.muted {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: none;
}

@keyframes music-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(108, 53, 203, 0.4); }
    50% { box-shadow: 0 4px 24px rgba(108, 53, 203, 0.65); }
}

/* =============================================
   AUTH - Login / Registro (Firebase)
   ============================================= */
.auth-tabs {
    display: flex;
    gap: 6px;
    background: var(--bg);
    padding: 5px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}
.auth-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: .92rem;
    color: var(--text-light);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.auth-tab.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(108,53,203,.15);
}

.auth-form { text-align: left; }
.auth-form.hidden { display: none; }

.auth-row { display: flex; gap: 10px; margin-bottom: 16px; }
.auth-row .login-select { flex: 1; }

.login-select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    background: var(--bg);
    color: var(--text);
    outline: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.login-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,53,203,.15);
}
.login-input-sm {
    width: 108px;
    flex: none;
    padding-left: 16px;
}

.auth-link {
    background: none;
    border: none;
    color: var(--primary);
    font-family: inherit;
    font-weight: 700;
    font-size: .86rem;
    cursor: pointer;
    margin-top: 12px;
    width: 100%;
    text-align: center;
}
.auth-link:hover { text-decoration: underline; }

.auth-warning {
    background: #FDE4E4;
    border: 1px solid #F5B5B5;
    color: #B42318;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.45;
}
.auth-warning code {
    background: rgba(180,35,24,.12);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .92em;
}

.btn-enter:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}