/* ================================================================
   Need English Now · diseño v2 dentro del sistema
   Lleva al panel, las lecciones y el resto de pantallas el acabado de la portada (landing-v2.css): botones «3D»
   más marcados, tarjetas más redondeadas con relieve de 6 px, títulos más grandes, etiquetas como las de la portada,
   franja azul suave arriba y colores con contraste AA (texto blanco solo sobre --brand-strong; gris #6b6b6b).
   Se carga después de theme.css; con DESIGN_VERSION=v1 en .env no se carga y vuelve el diseño anterior.
   ================================================================ */

:root {
    --ink-muted: #6b6b6b;          /* era #777 (4,48:1): ahora 5,3:1 sobre blanco */
    --lp2-muted: #5f5f5f;
    --radius: 20px;
    --radius-lg: 28px;
    --bs-link-color: var(--brand-strong);
    --bs-link-color-rgb: 25, 113, 194;
    --bs-link-hover-color: var(--brand-shadow);
    --bs-secondary-color: #6b6b6b;
}

:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 3px; }
a { color: var(--brand-strong); }
.text-secondary, .text-muted { color: #6b6b6b !important; }

/* ---------------------------------------------------------------- Botones (como .b3d de la portada) */
.btn {
    border-radius: 16px;
    font-weight: 900;
    box-shadow: 0 5px 0 var(--btn-shadow);
}
.btn:not(.btn-link):not(.btn-audio) { letter-spacing: .08em; }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-shadow); }
.btn-sm { border-radius: 12px; box-shadow: 0 3px 0 var(--btn-shadow); }
.btn-lg { border-radius: 16px; padding: .95rem 1.8rem; }

.btn-primary {
    --bs-btn-bg: var(--brand-strong);
    --bs-btn-border-color: var(--brand-strong);
    --bs-btn-hover-bg: var(--brand-shadow);
    --bs-btn-hover-border-color: var(--brand-shadow);
    --bs-btn-active-bg: var(--brand-strong);
    --bs-btn-active-border-color: var(--brand-strong);
    --btn-shadow: var(--brand-shadow);
}
/* Verde de la marca con texto oscuro (el blanco sobre verde no llega a 3:1). */
.btn-success {
    --bs-btn-color: var(--ink-strong);
    --bs-btn-hover-color: var(--ink-strong);
    --bs-btn-active-color: var(--ink-strong);
    --bs-btn-disabled-color: var(--ink-strong);
}
.btn-danger {
    --btn-shadow: #a51d1d;
    --bs-btn-bg: #c92a2a;
    --bs-btn-border-color: #c92a2a;
    --bs-btn-hover-bg: #b02525;
    --bs-btn-hover-border-color: #b02525;
    --bs-btn-active-bg: #c92a2a;
    --bs-btn-active-border-color: #c92a2a;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    --btn-shadow: var(--line-strong);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-bg: #f1f7fe;
    --bs-btn-hover-border-color: var(--line-strong);
    --bs-btn-active-border-color: var(--line-strong);
}
.btn-outline-primary { --bs-btn-color: var(--brand-strong); --bs-btn-hover-color: var(--brand-shadow); --bs-btn-active-color: var(--brand-shadow); }
.btn-outline-secondary { --bs-btn-color: var(--lp2-muted); }
.btn-outline-danger { --bs-btn-color: #c92a2a; --bs-btn-hover-color: #a51d1d; --bs-btn-hover-bg: #fff5f5; }
.btn-light { --btn-shadow: var(--brand-line); }
.btn-audio { --btn-shadow: var(--brand-shadow); }

/* ---------------------------------------------------------------- Formularios */
.form-control, .form-select { border-radius: 16px; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 .2rem rgba(25, 113, 194, .15); }
.alert { border-radius: 20px; }

/* ---------------------------------------------------------------- Armazón: franja azul suave arriba, como el inicio de la portada */
.shell-main {
    background:
        radial-gradient(circle at 92% 0, rgba(88, 204, 2, .10) 0, rgba(88, 204, 2, 0) 320px),
        linear-gradient(180deg, var(--brand-soft) 0, var(--canvas) 380px) no-repeat;
    background-color: var(--canvas);
}
.topbar { background: rgba(255, 255, 255, .94); border-bottom-color: #eef0f3; }
.sidebar { border-right-color: #eef0f3; }
.tabbar { border-top-color: #eef0f3; }
.side-link { border-radius: 16px; }
.side-link.is-active { border-color: var(--brand-line); box-shadow: 0 4px 0 var(--brand-line); }

/* ---------------------------------------------------------------- Cabecera de cada página (como los titulares de la portada) */
.page-eyebrow,
.continue-kicker {
    font-size: .8125rem;
    font-weight: 900;
    letter-spacing: .14em;
}
.page-eyebrow { color: var(--brand-strong); }
.page-title,
.page-header .page-title,
.welcome-title {
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1.06;
    letter-spacing: -.025em;
}
.page-subtitle { font-size: 1.08rem; line-height: 1.55; color: var(--lp2-muted); }
.section-title,
.stat-label,
.hero-level-label,
.game-label {
    font-size: .78rem;
    letter-spacing: .12em;
    color: #6b6b6b;
}
.back-link { color: var(--brand-strong); }

/* ---------------------------------------------------------------- Tarjetas: más redondeadas y con relieve de 6 px */
.dash-card,
.auth-card,
.course-card,
.course-mini,
.achievement,
.chart-card {
    border-radius: 24px;
}
.dash-card,
.auth-card,
.chart-card { box-shadow: 0 6px 0 var(--line); }
.course-card,
.course-mini { box-shadow: 0 6px 0 var(--line); }
.course-card:hover,
.course-mini:hover { box-shadow: 0 6px 0 var(--brand-line); }
.stat-tile,
.summary-stat {
    border-radius: 20px;
    box-shadow: 0 5px 0 var(--line);
}
.stat-value { letter-spacing: -.02em; }

/* ---------------------------------------------------------------- Tarjeta azul del panel (como el bloque azul de la portada) */
.continue-card {
    background: var(--brand-strong);
    box-shadow: 0 6px 0 var(--brand-shadow);
    border-radius: 28px;
}
.continue-card::before {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -200px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: var(--brand);
    opacity: .55;
    pointer-events: none;
}
.continue-card > * { position: relative; z-index: 1; }
.continue-kicker { color: #fff; }

/* ---------------------------------------------------------------- Lecciones */
.player-close,
.player-lesson-title { color: #6b6b6b; }

/* ---------------------------------------------------------------- Entrar / crear cuenta: panel como la llamada final de la portada */
.auth-panel { background: var(--brand-strong); }
.auth-panel::before { background: var(--brand); opacity: .6; }
.auth-panel::after { background: var(--brand-shadow); opacity: .9; }
.auth-panel-title { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; }
.auth-point-icon { background: rgba(255, 255, 255, .16); border-radius: 14px; }
.bubble.is-user { color: var(--ink-strong); }
.auth-card { border-radius: 28px; padding: 2.25rem 2rem; }
.auth-title { font-size: clamp(1.8rem, 3vw, 2.3rem); letter-spacing: -.025em; }

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:active:not(:disabled) { transform: none; }
}

/* Etiquetas de nivel ajustadas a su texto (como las de la portada), no estiradas a todo el ancho de la tarjeta. */
.course-levels { align-self: flex-start; justify-self: start; width: fit-content; border-radius: 10px; padding: .25rem .7rem; }

/* ---------------------------------------------------------------- Contraste AA (revisado con Lighthouse en todas las pantallas)
   Azul de marca sobre azul claro: --brand-shadow (5,4:1). Texto blanco: solo sobre --brand-strong (5:1). */
.course-levels,
.level-pill,
.slot-tag,
.pr-tab.is-active,
.tab.is-active,
.side-link.is-active,
.btn-audio-slow { color: var(--brand-shadow); }
.btn-audio,
.range-switch .is-active { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn-audio:hover { background: var(--brand-shadow); }
.flashcard-show kbd,
.rating-btn kbd { background: rgba(0, 0, 0, .22); }
.mission-meta strong,
.vocab-chip strong { color: #8a5a00; }
.exercise-meta { color: #7b3fc4; }
.learn-card .exercise-meta { background: var(--green-soft); color: #2b6a00; }
.learn-intro .exercise-meta { background: var(--brand-soft); color: var(--brand-shadow); }
.vocab-chip.is-new strong,
.slot-tag.is-review { color: #8a5a00; }
.vocab-chip.is-review strong { color: var(--brand-strong); }
.slot-tag.is-new { color: var(--brand-shadow); }