/* =====================================================================
   DOS AMBIENTES, UN SISTEMA
   El profesor trabaja horas en el editor, el libro de notas y el
   calendario: necesita calma (tema "Calma"). El alumno entra a practicar
   un rato: necesita energia y una recompensa visible al acertar (tema
   "Pizarra"). Mismos componentes, mismas variables; solo cambian los
   valores. La clase la pone _DashboardLayout segun el rol.
   ===================================================================== */

body.theme-teacher {
    --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --canvas: #F6F7FB;
    --surface: #FFFFFF;
    --ink: #1E2340;
    --muted: #676E8A;
    --faint: #9AA0B8;
    --line: #E1E4F2;
    --line-soft: #EEF0F8;

    /* primary = acciones (Publish, Invite). active = seleccion y foco. */
    --primary: #4C5BD4;
    --primary-hover: #3E4CC0;
    --on-primary: #FFFFFF;
    --primary-soft: #EEF0FD;
    --active: #4C5BD4;
    --accent: #4C5BD4;

    --nav-active-bg: #EEF0FD;
    --nav-active-fg: #3E4CC0;
    --nav-hover-bg: #F2F3FA;

    --cover-bg: #4C5BD4;
    --cover-fg: #FFFFFF;

    /* Notas sobre el texto: amarillo de rotulador en los dos temas. */
    --note-bg: #FFF3C4;
    --note-strong: #FFE68A;
    --note-line: #D9A300;

    --radius: 14px;
}

body.theme-student {
    --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Neutros con un punto de ciruela: acompanan al rosa sin competir. */
    --canvas: #FBF9FB;
    --surface: #FFFFFF;
    --ink: #1F1A24;
    --muted: #6D6473;
    --faint: #A39AA8;
    --line: #ECE6EC;
    --line-soft: #F5F0F5;

    /* Rosa mexicano: color con caracter, pero adulto. Va en lo que se pulsa
       y en el avance; la seleccion usa el tono profundo para no gritar. */
    --primary: #D6006F;
    --primary-hover: #A50057;
    --on-primary: #FFFFFF;
    --primary-soft: #FCE8F2;
    --primary-glow: rgba(214, 0, 111, .28);
    --active: #A50057;

    /* Turquesa para enlaces y aciertos: complementa al rosa. */
    --accent: #0E8C86;

    --nav-active-bg: #FCE8F2;
    --nav-active-fg: #A50057;
    --nav-hover-bg: #F5F0F5;

    --cover-bg: #FCE8F2;
    --cover-fg: #A50057;

    --note-bg: #FFF3C4;
    --note-strong: #FFE68A;
    --note-line: #D9A300;

    --radius: 16px;
}

/* ---------------------------------------------------------- profesor */

/* Un color suave por curso, como las carpetas de un archivador: la
   rejilla se reconoce de un vistazo sin leer titulos. */
.theme-teacher .course-cover.cover-0 { background: #FFE3D3; color: #B5532A; }
.theme-teacher .course-cover.cover-1 { background: #E3F6EC; color: #1E7A4C; }
.theme-teacher .course-cover.cover-2 { background: #EEF0FD; color: #3E4CC0; }
.theme-teacher .course-cover.cover-3 { background: #FFF3C4; color: #8A6100; }
.theme-teacher .course-cover.cover-4 { background: #FBE4F0; color: #A12E6B; }

/* ------------------------------------------------------------ alumno */

/* Boton principal solido y plano, con una sombra de su propio color: se
   nota que se pulsa sin parecer un dibujo animado. */
.theme-student .btn-ink {
    font-weight: 700;
    border-radius: 12px;
    padding: 11px 20px;
    border: 0;
    box-shadow: 0 8px 18px -10px var(--primary-glow);
}

.theme-student .btn-ink:focus-visible {
    outline: 3px solid var(--primary-glow);
    outline-offset: 3px;
}

/* El hueco se ve como algo por rellenar: fondo rosa suave y linea debajo. */
.theme-student .player-gap {
    border: 0;
    border-bottom: 2px solid var(--primary);
    border-radius: 8px 8px 2px 2px;
    background: var(--primary-soft);
    color: var(--active);
    font-weight: 700;
}

.theme-student .player-gap:focus {
    outline: 0;
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.theme-student .player-choice:hover { border-color: var(--primary); }

.theme-student .player-choice.is-selected {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.theme-student .player-choice input,
.theme-student input[type="checkbox"],
.theme-student input[type="radio"] { accent-color: var(--primary); }

/* Acierto en turquesa, a juego con el rosa (y lejos del verde "lechuza"). */
.theme-student .is-right {
    background: #E2F4F1 !important;
    border-color: #0B8A7E !important;
}

.theme-student .segmented label.is-right { background: #E2F4F1; color: #0B8A7E; }

/* Ya corregido, el hueco deja el rosa: el texto toma el color del resultado. */
.theme-student .player-gap.is-right { color: #0B8A7E; }
.theme-student .player-gap.is-wrong { color: var(--danger); }

.theme-student .progress-bar { height: 8px; background: var(--line); }
.theme-student .progress-bar span { background: var(--primary); }

.theme-student .reader { border-radius: 18px; }

/* Ejercicios: frase grande, huecos comodos y boton a todo el ancho, como
   en el demo. En movil es lo que hay que pulsar con el pulgar. */
.theme-student .player-text { font-size: 19px; line-height: 1.95; }
.theme-student .player p b { font-size: 17px; }

.theme-student .player-gap {
    width: 112px;
    padding: 2px 8px;
    font-size: 18px;
}

.theme-student .player-choice { padding: 12px 14px; border-radius: 12px; font-size: 15.5px; }

.theme-student .player-check,
.theme-student .player-retry {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
}

.theme-student .player-retry { border-radius: 12px; font-weight: 700; }

/* Temario: la leccion abierta en rosa suave, no en un bloque macizo. */
.theme-student .outline-item.is-active { background: var(--primary-soft); }
.theme-student .outline-item.is-active .outline-link { color: var(--active); font-weight: 650; }
.theme-student .outline-item.is-active .lesson-count { color: var(--active); }
.theme-student .lesson-done { color: #0B8A7E; }

/* Tarjetas de curso horizontales: portada pequena con el nivel al lado del avance. */
.theme-student .course-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.theme-student .course-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.theme-student .course-cover {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 800;
}

.theme-student .course-body { flex: 1; min-width: 0; padding: 0; }
.theme-student .course-title { margin: 0 0 8px; font-size: 16px; }

.theme-student .course-card:hover {
    border-color: var(--primary-soft);
    box-shadow: 0 12px 28px -16px rgba(31, 26, 36, .3);
}

/* La recompensa: un pequeno salto de la nota cuando todo esta bien.
   Un solo momento orquestado vale mas que animaciones por todas partes. */
.theme-student .player-score { display: inline-block; }

.theme-student .player-score.is-perfect {
    color: #0B8A7E;
    animation: score-pop .35s cubic-bezier(.3, 1.4, .5, 1) both;
}

@keyframes score-pop {
    0%   { transform: scale(.8); }
    100% { transform: scale(1); }
}