/* Need English Now: tema base sobre Bootstrap 5.3 */

:root {
    --brand: #2b6cb0;
    --brand-strong: #235a94;
    --brand-soft: #e8f0fa;
    --accent: #ffc861;
    --ink: #1c2430;
    --ink-muted: #5b6676;
    --surface: #ffffff;
    --canvas: #f5f6f8;
    --line: #e3e6eb;
    --radius: 14px;

    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--canvas);
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 43, 108, 176;
    --bs-link-hover-color: var(--brand-strong);
    --bs-link-hover-color-rgb: 35, 90, 148;
    --bs-border-color: var(--line);
    --bs-secondary-color: var(--ink-muted);
}

body {
    background: var(--canvas);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-strong);
    --bs-btn-hover-border-color: var(--brand-strong);
    --bs-btn-active-bg: var(--brand-strong);
    --bs-btn-active-border-color: var(--brand-strong);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    font-weight: 600;
    padding-block: .6rem;
}

.form-control {
    padding: .6rem .8rem;
    border-radius: 10px;
}

.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(43, 108, 176, .15);
}

.form-label {
    font-weight: 500;
    font-size: .925rem;
}

/* ---------- Marca ---------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--brand);
}

.brand-mark {
    width: 32px;
    height: 32px;
    flex: none;
}

.brand-name {
    color: var(--ink);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

/* ---------- Páginas de visitante ---------- */

.auth-body {
    min-height: 100vh;
}

.auth-shell {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 3.5rem 1rem 3rem;
}

.auth-brand {
    display: inline-block;
    text-decoration: none;
}

.auth-tagline {
    color: var(--ink-muted);
    margin: .5rem 0 1.75rem;
    font-size: .95rem;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .35rem;
}

.auth-subtitle {
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
}

.auth-switch {
    text-align: center;
    margin: 1.25rem 0 0;
    color: var(--ink-muted);
    font-size: .95rem;
}

@media (max-width: 480px) {
    .auth-shell {
        padding-top: 2rem;
    }

    .auth-card {
        padding: 1.5rem 1.25rem;
    }
}

/* ---------- Aplicación ---------- */

.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.app-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: 1rem;
}

.app-brand-link {
    text-decoration: none;
}

.app-nav-user {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.app-nav-name {
    color: var(--ink-muted);
    font-size: .95rem;
}

@media (max-width: 480px) {
    .app-nav-name {
        display: none;
    }
}

.app-main {
    padding-block: 2.5rem 3rem;
    max-width: 880px;
}

.welcome-title {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
}

.welcome-subtitle {
    color: var(--ink-muted);
    margin-bottom: 2.25rem;
}

.section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-bottom: .9rem;
}

.next-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}

.next-item-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.next-item-text {
    color: var(--ink-muted);
    margin: 0;
}

/* ---------- Errores ---------- */

.error-code {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    margin-bottom: .75rem;
}

.error-ref {
    margin: 1.25rem 0 0;
    font-size: .85rem;
    color: var(--ink-muted);
    text-align: center;
}

.error-debug {
    margin-top: 1.25rem;
    font-size: .8rem;
    border-top: 1px dashed var(--line);
    padding-top: .75rem;
}

.error-debug dd {
    word-break: break-word;
}

/* ================================================================
   Fase 2: navegación, dashboard, cursos, reproductor de ejercicios
   ================================================================ */

/* ---------- Menú ---------- */

.app-menu {
    display: flex;
    gap: .25rem;
    list-style: none;
    margin: 0 auto 0 1.5rem;
    padding: 0;
}

.app-menu-link {
    display: block;
    padding: .4rem .75rem;
    border-radius: 8px;
    color: var(--ink-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
}

.app-menu-link:hover {
    color: var(--ink);
    background: var(--canvas);
}

.app-menu-link.is-active {
    color: var(--brand);
    background: var(--brand-soft);
}

@media (max-width: 640px) {
    .app-nav {
        flex-wrap: wrap;
        padding-block: .5rem;
    }

    .app-menu {
        order: 3;
        width: 100%;
        margin: .25rem 0 0;
        overflow-x: auto;
    }
}

/* ---------- Barras de progreso (<progress>, sin estilos en línea por la CSP) ---------- */

progress {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    color: var(--brand);
}

progress::-webkit-progress-bar {
    background: var(--line);
    border-radius: 999px;
}

progress::-webkit-progress-value {
    background: var(--brand);
    border-radius: 999px;
    transition: width .3s ease;
}

progress::-moz-progress-bar {
    background: var(--brand);
    border-radius: 999px;
}

/* ---------- Páginas ---------- */

.page-header {
    margin-bottom: 1.75rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
}

.page-subtitle {
    color: var(--ink-muted);
    margin-bottom: .75rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: .9rem;
}

.back-link:hover {
    color: var(--brand);
}

/* ---------- Dashboard ---------- */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.dash-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.35rem;
}

.dash-section {
    margin-bottom: 2.25rem;
}

.level-badge-lg {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    margin-bottom: .5rem;
}

.level-badge-lg.is-pending {
    font-size: 1.35rem;
    color: var(--ink-muted);
}

.next-lesson-course {
    color: var(--ink-muted);
    font-size: .85rem;
    margin-bottom: .1rem;
}

.next-lesson-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .9rem;
}

.skill-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .65rem;
}

.skill-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 2.5rem minmax(80px, 2fr) 3.5rem;
    align-items: center;
    gap: .75rem;
}

.skill-name {
    font-weight: 500;
}

.skill-level {
    font-weight: 700;
    color: var(--brand);
}

.skill-pct {
    text-align: right;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.placement-result .skill-row {
    grid-template-columns: 1fr 2.5rem 3.5rem;
}

@media (max-width: 480px) {
    .skill-row {
        grid-template-columns: 1fr 2.5rem 3rem;
    }

    .skill-row .skill-bar {
        grid-column: 1 / -1;
        order: 4;
    }
}

.course-mini-list,
.course-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .75rem;
}

.course-mini,
.course-card {
    display: grid;
    gap: .35rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.course-mini:hover,
.course-card:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 10px rgba(43, 108, 176, .08);
}

.course-mini-title,
.course-title {
    font-weight: 600;
    font-size: 1.05rem;
}

.course-card .course-title {
    font-size: 1.25rem;
}

.course-mini-meta,
.course-meta,
.course-desc {
    color: var(--ink-muted);
    font-size: .9rem;
}

.course-levels {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--brand);
    margin: 0;
}

/* ---------- Curso: unidades y camino de lecciones ---------- */

.unit {
    margin-bottom: 2rem;
}

.unit-header {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin-bottom: .9rem;
}

.level-pill {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 800;
    font-size: .9rem;
}

.unit.is-completed .level-pill {
    background: var(--brand);
    color: #fff;
}

.unit-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: .1rem 0 .15rem;
}

.unit-desc {
    color: var(--ink-muted);
    margin: 0;
    font-size: .95rem;
}

.lesson-path {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}

.lesson-row {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .8rem 1rem;
}

.lesson-row.is-locked {
    background: transparent;
    border-style: dashed;
}

.lesson-row.is-locked .lesson-title {
    color: var(--ink-muted);
}

.lesson-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--canvas);
    font-size: .85rem;
}

.lesson-row.is-available .lesson-icon,
.lesson-row.is-in_progress .lesson-icon {
    background: var(--brand-soft);
    color: var(--brand);
}

.lesson-row.is-completed .lesson-icon {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
}

.lesson-body {
    flex: 1;
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.lesson-title {
    font-weight: 600;
}

.lesson-meta,
.lesson-hint {
    font-size: .85rem;
    color: var(--ink-muted);
}

/* ---------- Reproductor (lección y test de nivel) ---------- */

.player {
    max-width: 680px;
    margin: 0 auto;
}

.player-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.player-close {
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: .25rem;
}

.player-progress {
    flex: 1;
    height: 12px;
}

.player-combo {
    flex: none;
    font-weight: 700;
    color: #b7791f;
    font-size: .9rem;
}

.player-lesson-title {
    color: var(--ink-muted);
    font-size: .85rem;
    margin-bottom: 1.5rem;
    min-height: 1.2em;
}

.player-stage {
    min-height: 320px;
}

.player-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
}

.player-footer.is-correct {
    background: #e8f6ee;
    border-color: #b9e3c9;
}

.player-footer.is-incorrect {
    background: #fdecec;
    border-color: #f5c2c2;
}

.player-feedback p {
    margin-bottom: .2rem;
}

.feedback-title {
    font-weight: 700;
}

.is-correct .feedback-title {
    color: #1e7b45;
}

.is-incorrect .feedback-title {
    color: #b42318;
}

.feedback-explanation {
    color: var(--ink-muted);
    font-size: .9rem;
}

.player-action {
    flex: none;
    min-width: 9rem;
}

@media (max-width: 480px) {
    .player-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---------- Ejercicios ---------- */

.exercise-meta {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--brand);
    margin-bottom: .35rem;
}

.exercise-prompt {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
}

.exercise-hint {
    color: var(--ink-muted);
    font-size: .9rem;
}

.passage {
    background: var(--surface);
    border-left: 4px solid var(--brand);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
    /* Diálogos y textos de varias líneas de los cursos por nivel. */
    white-space: pre-line;
}

.source-text {
    font-size: 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .9rem 1.1rem;
}

.answer-text {
    font-size: 1.05rem;
}

.choice-list {
    display: grid;
    gap: .6rem;
}

.choice {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 12px;
    padding: .75rem 1rem;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color .12s ease, background .12s ease;
}

.choice:hover:not(:disabled) {
    border-color: #b6c8de;
}

.choice.is-selected {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.choice:disabled {
    cursor: default;
    opacity: .85;
}

.choice-key {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: .8rem;
    color: var(--ink-muted);
}

.sentence {
    font-size: 1.3rem;
    line-height: 2.2;
}

.blank-input {
    display: inline-block;
    width: 9rem;
    margin: 0 .35rem;
    padding: .15rem .5rem;
    border: 0;
    border-bottom: 2px solid var(--brand);
    background: var(--brand-soft);
    border-radius: 6px 6px 0 0;
    font: inherit;
    text-align: center;
}

.blank-input:focus {
    outline: none;
    background: #dbe8f7;
}

.audio-controls {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.btn-audio {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: .65rem 1.1rem;
}

.btn-audio:hover {
    background: var(--brand-strong);
    color: #fff;
}

.btn-audio-slow {
    background: var(--brand-soft);
    color: var(--brand);
}

.btn-audio-slow:hover {
    background: #dbe8f7;
    color: var(--brand-strong);
}

.wo-answer {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 3.4rem;
    padding: .5rem 0;
    border-bottom: 2px solid var(--line);
    margin-bottom: 1rem;
}

.wo-bank {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.wo-token,
.wo-slot {
    border: 2px solid var(--line);
    border-bottom-width: 3px;
    border-radius: 10px;
    background: var(--surface);
    padding: .4rem .8rem;
    font-size: 1rem;
    color: var(--ink);
}

.wo-slot {
    color: transparent;
    background: var(--canvas);
    border-color: var(--canvas);
}

.wo-clear {
    padding-left: 0;
    margin-top: .75rem;
}

.match-list {
    display: grid;
    gap: .6rem;
}

.match-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    align-items: center;
}

.match-left {
    font-weight: 600;
}

/* ---------- Resumen / intro ---------- */

.summary,
.intro {
    text-align: center;
    padding: 1.5rem 0;
}

.intro {
    text-align: left;
}

.summary-icon {
    font-size: 2.75rem;
    margin-bottom: .25rem;
}

.summary-title {
    font-size: 1.6rem;
    font-weight: 700;
}

.summary-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.summary-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .75rem 1.25rem;
    min-width: 7.5rem;
}

.summary-stat dt {
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.summary-stat dd {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.summary-unlocked {
    margin-bottom: 1.5rem;
}

.summary-unlocked ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: 600;
}

.summary-actions {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.placement-result {
    text-align: left;
    max-width: 420px;
    margin: 1.5rem auto;
}

.choice.is-right {
    border-color: #2f9e5b;
    background: #e8f6ee;
}

.choice.is-wrong {
    border-color: #d64545;
    background: #fdecec;
}

/* ================================================================
   Fase 3: vocabulario (flashcards SRS y estadísticas)
   ================================================================ */

.vocab {
    margin: 0;
}

.vocab-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vocab-counts {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .5rem 0 1.25rem;
    min-height: 1.9rem;
}

.vocab-chip {
    font-size: .85rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-muted);
}

.vocab-chip strong {
    color: var(--ink);
}

.vocab-chip.is-new strong { color: #b7791f; }
.vocab-chip.is-learning strong { color: #c2410c; }
.vocab-chip.is-review strong { color: var(--brand); }

.flashcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 6px 24px rgba(28, 36, 48, .06);
    text-align: center;
}

.flashcard-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.level-pill-sm {
    width: 2.1rem;
    height: 1.6rem;
    border-radius: 8px;
    font-size: .75rem;
}

.flashcard-topic {
    font-size: .8rem;
    color: var(--ink-muted);
}

.flashcard-word {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: .25rem;
    word-break: break-word;
}

.flashcard-meta {
    color: var(--ink-muted);
    margin-bottom: 1rem;
}

.flashcard-ipa {
    font-family: "Segoe UI", "Lucida Sans Unicode", "DejaVu Sans", sans-serif;
}

.flashcard-back {
    border-top: 1px dashed var(--line);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.flashcard-translation {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: .5rem;
}

.flashcard-definition {
    color: var(--ink-muted);
    margin-bottom: 1rem;
}

.flashcard-example {
    text-align: left;
    background: var(--canvas);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin: 0;
}

.flashcard-example-es {
    color: var(--ink-muted);
    font-size: .9rem;
}

.flashcard-actions {
    margin-top: 1.5rem;
}

.flashcard-show kbd,
.rating-btn kbd {
    font-size: .7rem;
    background: rgba(255, 255, 255, .25);
    color: inherit;
    padding: .05rem .35rem;
}

.rating-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.rating-btn {
    display: grid;
    gap: .15rem;
    justify-items: center;
    padding: .6rem .25rem;
    border-radius: 12px;
    border: 2px solid transparent;
    font-weight: 600;
    color: #fff;
    transition: filter .12s ease;
}

.rating-btn:hover:not(:disabled) {
    filter: brightness(1.07);
}

.rating-btn:disabled {
    opacity: .6;
}

.rating-btn.is-again { background: #d64545; }
.rating-btn.is-hard  { background: #d97706; }
.rating-btn.is-good  { background: #2f9e5b; }
.rating-btn.is-easy  { background: var(--brand); }

.rating-ivl {
    font-size: .75rem;
    font-weight: 500;
    opacity: .9;
}

.rating-btn kbd {
    display: none;
}

@media (min-width: 640px) {
    .rating-btn kbd {
        display: inline;
    }
}

/* Dashboard */

.dash-vocab {
    margin-bottom: 2.25rem;
}

.dash-vocab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-vocab-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0;
}

.dash-vocab-stats dt {
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-muted);
}

.dash-vocab-stats dd {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

/* Estadísticas */

.range-switch {
    display: flex;
    gap: .25rem;
}

.range-switch .is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.stat-tile {
    display: grid;
    gap: .1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .85rem 1rem;
}

.stat-label {
    font-size: .8rem;
    color: var(--ink-muted);
    font-weight: 500;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
}

.stat-sub {
    font-size: .75rem;
    color: var(--ink-muted);
}

/* ================================================================
   Fase 4: Learning Engine (foco, práctica adaptativa, temas)
   ================================================================ */

.focus-card {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--brand);
}

.focus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
}

.focus-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    background: var(--canvas);
}

.focus-item.is-weak_topic,
.focus-item.is-recent_errors {
    background: #fdf1ec;
}

.focus-item.is-placement {
    background: var(--brand-soft);
}

.focus-title {
    font-weight: 600;
    margin: 0;
}

.focus-detail {
    color: var(--ink-muted);
    font-size: .88rem;
    margin: 0;
}

.focus-item .btn {
    flex: none;
}

@media (max-width: 480px) {
    .focus-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.topic-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .45rem;
}

.topic-list li {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.topic-meta {
    color: var(--ink-muted);
    font-size: .88rem;
    white-space: nowrap;
}

.slot-tag {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--canvas);
    color: var(--ink-muted);
}

.slot-tag.is-weak { background: #fdecec; color: #b42318; }
.slot-tag.is-review { background: #fff4e0; color: #b7791f; }
.slot-tag.is-new { background: var(--brand-soft); color: var(--brand); }
.slot-tag.is-strong { background: #e8f6ee; color: #1e7b45; }

.summary-topics {
    max-width: 420px;
    margin: 0 auto 1.5rem;
    text-align: left;
}

.summary-topics ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-topics li {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    border-bottom: 1px solid var(--line);
}

.topic-status { font-weight: 700; }
.topic-status.is-weak { color: #b42318; }
.topic-status.is-strong { color: #1e7b45; }
.topic-status.is-developing, .topic-status.is-unknown { color: var(--ink-muted); }

/* ------------------------------------------------------------------ Fase 8: Gamificación */

.game-card {
    margin-bottom: 1.25rem;
}

.game-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.game-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
}

.game-stat,
.game-goal {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--canvas);
    border-radius: 10px;
    padding: .7rem .9rem;
}

.game-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
}

.game-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
}

.game-level .game-value {
    color: var(--brand);
}

.game-sub {
    font-size: .8rem;
    color: var(--ink-muted);
}

.game-bar {
    width: 100%;
    height: .5rem;
    accent-color: var(--brand);
}

.game-goals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

.game-goal[data-goal-met="1"] .game-sub {
    color: #1e7b45;
    font-weight: 600;
}

.game-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.game-subtitle {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .4rem;
}

.game-period {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-muted);
    margin: .4rem 0 .2rem;
}

.mission-list,
.achievement-mini-list,
.xp-history {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mission {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 .5rem;
    padding: .35rem 0;
}

.mission .game-bar {
    grid-column: 1 / -1;
    height: .35rem;
}

.mission.is-done .mission-title {
    color: #1e7b45;
}

.mission-meta {
    font-size: .8rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

.achievement-mini-list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .35rem 0;
}

.achievement-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.game-note {
    margin-top: 1rem;
    border-top: 1px solid var(--line);
    padding-top: .6rem;
}

.achievement-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
}

.achievement {
    display: flex;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}

.achievement:not(.is-unlocked) .achievement-icon {
    filter: grayscale(1);
    opacity: .45;
}

.achievement.is-unlocked {
    border-color: var(--accent);
    background: #fffaf0;
}

.achievement-body {
    flex: 1;
    min-width: 0;
}

.achievement-name {
    font-weight: 700;
    margin: 0;
}

.achievement-desc,
.achievement-meta {
    font-size: .85rem;
    color: var(--ink-muted);
    margin: .1rem 0 0;
}

.xp-history li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--line);
}

.xp-history-meta {
    white-space: nowrap;
    color: var(--ink-muted);
    font-size: .9rem;
}