/* ============================================================================
   Tne Academy · brand tokens, fonts and Stitch effects
   Layered on top of Bulma (loaded before this file in index.html).
   ============================================================================ */

:root {
    /* Brand palette (see Documentation/Stich Mokups/BRAND DESIGN.md) */
    --brand-blue: #002576;          /* Royal Blue · primary */
    --brand-blue-700: #001a57;
    --brand-blue-300: #4a63a8;
    --primary-container: #0038a8;   /* primary hover / lift */
    --brand-yellow: #fecc00;        /* Sunny Yellow · secondary-container */
    --brand-yellow-600: #e0b400;
    --on-secondary-container: #6e5700;

    /* Surfaces & neutrals (Heritage Learning tokens) */
    --surface: #f8f9ff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #eef4ff;
    --surface-container: #e5eeff;
    --surface-container-high: #dfe9fa;
    --surface-container-highest: #d9e3f4;
    --on-surface: #121c28;
    --on-surface-variant: #444653;
    --outline: #747685;
    --outline-variant: #c4c5d5;

    /* Back-compat aliases used elsewhere in the app */
    --pearl: var(--surface);
    --grey-50: var(--surface-container-low);
    --grey-100: var(--surface-container);
    --grey-300: var(--outline-variant);
    --grey-500: var(--outline);
    --grey-700: var(--on-surface-variant);
    --ink: var(--on-surface);

    /* Fonts */
    --font-heading: "Montserrat", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

    /* Map Bulma's primary/link onto the brand so stock components inherit it */
    --bulma-primary-h: 222deg;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 23%;
    --bulma-link-h: 222deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 23%;
    --bulma-family-primary: var(--font-body);
    --bulma-family-secondary: var(--font-heading);
}

html, body {
    font-family: var(--font-body);
    background-color: var(--surface);
    color: var(--on-surface);
}

/* Material Symbols (icons from the Stitch designs) -----------------------------*/
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}
.material-symbols-outlined.is-filled { font-variation-settings: 'FILL' 1; }

h1, h2, h3, h4, h5, h6,
.title, .subtitle.is-heading {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

/* Brand helpers --------------------------------------------------------------*/
.has-text-brand-blue { color: var(--brand-blue) !important; }
.has-text-brand-yellow { color: var(--brand-yellow) !important; }
.has-background-brand-blue { background-color: var(--brand-blue) !important; }
.has-background-brand-yellow { background-color: var(--brand-yellow) !important; }

.button.is-brand {
    background-color: var(--brand-blue);
    color: #fff;
    border-color: transparent;
}
.button.is-brand:hover { background-color: var(--brand-blue-700); color: #fff; }

.button.is-brand-yellow {
    background-color: var(--brand-yellow);
    color: var(--brand-blue);
    border-color: transparent;
    font-weight: 700;
}
.button.is-brand-yellow:hover { background-color: var(--brand-yellow-600); color: var(--brand-blue); }

/* Glassmorphism (Stitch) -----------------------------------------------------*/
.glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 37, 118, 0.12);
}
.glass-dark {
    background: rgba(0, 37, 118, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Landing background pattern/gradient (Stitch "banig") -----------------------*/
.banig-bg {
    background-color: var(--brand-blue);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(254, 204, 0, 0.18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(74, 99, 168, 0.35), transparent 45%),
        linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-700) 100%);
    color: #fff;
}

/* Banig pattern — light geometric "squares" weave (Stitch landing) ------------*/
.banig-pattern {
    background-color: var(--surface);
    background-image:
        linear-gradient(30deg, var(--surface-container) 12%, transparent 12.5%, transparent 87%, var(--surface-container) 87.5%, var(--surface-container)),
        linear-gradient(150deg, var(--surface-container) 12%, transparent 12.5%, transparent 87%, var(--surface-container) 87.5%, var(--surface-container)),
        linear-gradient(30deg, var(--surface-container) 12%, transparent 12.5%, transparent 87%, var(--surface-container) 87.5%, var(--surface-container)),
        linear-gradient(150deg, var(--surface-container) 12%, transparent 12.5%, transparent 87%, var(--surface-container) 87.5%, var(--surface-container)),
        linear-gradient(60deg, var(--surface-container-high) 25%, transparent 25.5%, transparent 75%, var(--surface-container-high) 75%, var(--surface-container-high)),
        linear-gradient(60deg, var(--surface-container-high) 25%, transparent 25.5%, transparent 75%, var(--surface-container-high) 75%, var(--surface-container-high));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* Bento grid -----------------------------------------------------------------*/
.bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: minmax(120px, auto);
    gap: 1.25rem;
}
.bento .bento-item {
    border-radius: 1rem;
    padding: 1.25rem;
    background: #fff;
    box-shadow: 0 4px 18px rgba(26, 29, 41, 0.06);
}
.bento .bento-item.is-wide { grid-column: span 2; }
.bento .bento-item.is-tall { grid-row: span 2; }

/* Progress ring (SVG/CSS) ----------------------------------------------------*/
/* Usage: <div class="progress-ring" style="--value:72">…</div> with an inner
   .progress-ring-value for the centered label. */
.progress-ring {
    --size: 96px;
    --thickness: 10px;
    --value: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, #fff calc(100% - var(--thickness)), transparent calc(100% - var(--thickness) + 1px)),
        conic-gradient(var(--brand-yellow) calc(var(--value) * 1%), var(--grey-100) 0);
}
.progress-ring .progress-ring-value {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--brand-blue);
}

/* App shell — sticky footer: footer pinned to the viewport bottom, content
   centered in whatever vertical space is left. ---------------------------------*/
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Body row: optional instructor sidebar + the page's main area. */
.app-body {
    flex: 1 0 auto;
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* The page's top-level block grows to fill the main area so its content can be
   vertically centered (see .fill-center). */
.app-main > * {
    flex: 1 0 auto;
}

/* Persistent instructor sidebar (lives in MainLayout, shown for teachers). */
.app-sidebar {
    width: 16rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    background: var(--surface-container-low);
    border-right: 1px solid var(--outline-variant);
}
.app-sidebar-head { padding: 0 0.4rem 0.75rem; }
.app-sidebar-sub { font-size: 0.78rem; color: var(--on-surface-variant); }
@media (max-width: 900px) {
    .app-sidebar { display: none; }
}
.fill-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Site header / footer (Stitch shared components) -----------------------------*/
.site-navbar {
    background-color: var(--surface-container-lowest);
    box-shadow: 0 2px 12px rgba(18, 28, 40, 0.06);
}
.site-navbar .navbar-item,
.site-navbar .navbar-link { color: var(--on-surface-variant); }
.site-navbar .navbar-item:hover { background-color: var(--surface-container-low); }
/* Active page marker (Stitch: border-b-2 border-primary). Inset shadow avoids layout shift. */
.site-navbar a.navbar-item.active {
    color: var(--brand-blue);
    font-weight: 700;
    background-color: transparent;
    box-shadow: inset 0 -3px 0 var(--brand-blue);
}
.brand-wordmark {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--brand-blue);
}

.brand-divider {
    height: 4px;
    background: linear-gradient(to right, var(--brand-blue), var(--brand-yellow), var(--primary-container));
}

.site-footer {
    background-color: var(--surface-container-lowest);
    border-top: 1px solid var(--outline-variant);
    padding: 2.5rem 1.5rem;
}
.site-footer a { color: var(--on-surface-variant); }
.site-footer a:hover { color: var(--brand-blue); }

/* Auth screens (phase 08) -----------------------------------------------------*/
.auth-card {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.85);
}
.auth-card-header { margin-bottom: 1.25rem; }

/* Hero badge (yellow pill with icon) */
.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--brand-yellow);
    color: var(--on-secondary-container);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.brand-badge .material-symbols-outlined { font-size: 1.1rem; }

/* Feature cards under the hero headline (Accredited / Expert Tutors) */
.feature-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.feature-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 18px rgba(18, 28, 40, 0.05);
}
.feature-card .material-symbols-outlined {
    color: var(--brand-blue);
    font-size: 1.6rem;
    margin-bottom: 0.35rem;
}
.feature-card h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--brand-blue);
    margin-bottom: 0.1rem;
}
.feature-card p { color: var(--on-surface-variant); font-size: 0.85rem; }

/* Read-only level chips (landing hero) */
.level-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.level-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Selectable level grid (registration) */
.level-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.level-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid var(--grey-100);
    background: #fff;
    border-radius: 0.6rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.level-option:hover { border-color: var(--brand-blue-300); }
.level-option.is-selected {
    border-color: var(--brand-blue);
    background: var(--grey-50);
}

.level-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================================================
   Student dashboard — bento grid of levels (phase 09, Stitch "Lessons and levels")
   ============================================================================ */
.dashboard-head { margin-bottom: 2rem; max-width: 46rem; }

.button.is-outlined-brand {
    background: transparent;
    border: 2px solid var(--brand-blue);
    color: var(--brand-blue);
    font-weight: 600;
}
.button.is-outlined-brand:hover { background: var(--brand-blue); color: #fff; }

.level-bento { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.level-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--outline-variant);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.level-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -12px rgba(0, 37, 118, 0.28); }
.level-card.is-current {
    background: linear-gradient(150deg, var(--primary-container) 0%, var(--brand-blue) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 32px -14px rgba(0, 37, 118, 0.5);
}
.level-card.is-current .level-desc,
.level-card.is-current .level-tutor { color: rgba(255, 255, 255, 0.85); }

.level-ribbon {
    position: absolute;
    top: 0.9rem;
    right: -2.6rem;
    transform: rotate(35deg);
    background: var(--brand-yellow);
    color: var(--brand-blue);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.2rem 3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.level-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.level-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: hsl(var(--hue, 222) 70% 92%);
    color: hsl(var(--hue, 222) 60% 30%);
}
.level-card.is-current .level-badge { background: var(--brand-yellow); color: var(--brand-blue); }

.level-desc {
    color: var(--on-surface-variant);
    font-size: 0.92rem;
    margin: 0.35rem 0 0.85rem;
    min-height: 3.2rem;
}
.level-tutor {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--on-surface-variant);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: auto;
}
.level-tutor .material-symbols-outlined { font-size: 1.1rem; }

.level-progress { margin-top: 0.9rem; }
.level-progress-bar {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.level-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--brand-yellow);
}
.level-progress-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Dashboard progress + quick actions (Stitch "Learning Progress") -------------*/
.dash-progress {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (max-width: 900px) { .dash-progress { grid-template-columns: 1fr; } }

.dash-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.dash-section-link { color: var(--brand-blue); font-weight: 600; cursor: pointer; }
.dash-section-link:hover { text-decoration: underline; }

.dash-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
    padding: 1.75rem;
    border-radius: 1rem;
}
.progress-ring-inner { display: flex; flex-direction: column; align-items: center; }
.progress-ring-caption { font-size: 0.72rem; color: var(--on-surface-variant); letter-spacing: 0.04em; }

.dash-stat-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
    gap: 0.85rem;
    min-width: 16rem;
}
.dash-stat {
    background: var(--surface-container-low);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}
.dash-stat-label { display: block; font-size: 0.72rem; color: var(--on-surface-variant); margin-bottom: 0.2rem; }
.dash-stat-value { font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; color: var(--brand-blue); }
.has-text-brand-yellow-dark { color: var(--brand-yellow-600) !important; }

.dash-actions { display: flex; flex-direction: column; }
.dash-actions > .title { margin-bottom: 0.85rem; }
.dash-action-list { display: flex; flex-direction: column; gap: 0.65rem; }
.dash-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.85rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 0.85rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dash-action:hover { background: var(--surface-container); box-shadow: 0 6px 18px rgba(18, 28, 40, 0.08); }
.dash-action:disabled { opacity: 0.55; cursor: not-allowed; }
.dash-action-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
    color: #fff;
}
.dash-action-icon.tone-blue { background: var(--primary-container); }
.dash-action-icon.tone-yellow { background: var(--brand-yellow); color: var(--on-secondary-container); }
.dash-action-icon.tone-ink { background: var(--on-surface); }
.dash-action-body { display: flex; flex-direction: column; flex: 1; }
.dash-action-title { font-weight: 600; color: var(--on-surface); }
.dash-action-sub { font-size: 0.78rem; color: var(--on-surface-variant); }
.dash-action-chevron { color: var(--outline); }
.dash-action:hover .dash-action-chevron { color: var(--brand-blue); }

/* ============================================================================
   Classroom + lesson (phase 09, Stitch "Lesson Page")
   ============================================================================ */
.classroom-shell { width: 100%; display: flex; flex-direction: column; flex: 1 0 auto; }
.classroom-layout {
    display: grid;
    grid-template-columns: 20rem 1fr;
    align-items: stretch;   /* both columns share the tallest height */
    gap: 0;
    flex: 1 0 auto;         /* fill the main area so the sidebar reaches the bottom */
    min-height: 70vh;
}
@media (max-width: 900px) {
    .classroom-layout { grid-template-columns: 1fr; }
}

/* Sidebar / temario */
.syllabus-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: var(--surface-container-low);
    border-right: 1px solid var(--outline-variant);
    min-height: 100%;
}
.syllabus-head { padding: 0 0.4rem; }
.syllabus-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--outline);
}
.syllabus-progress { margin-top: 0.25rem; }
.progress.is-brand::-webkit-progress-value { background-color: var(--brand-yellow); }
.progress.is-brand::-moz-progress-bar { background-color: var(--brand-yellow); }
.progress.is-brand { background-color: var(--surface-container-highest); height: 0.55rem; }
.syllabus-progress-label { font-size: 0.75rem; font-weight: 600; color: var(--on-surface-variant); }

.syllabus-section {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--outline);
    padding: 0.5rem 0.4rem 0;
}
.syllabus-list { display: flex; flex-direction: column; gap: 0.25rem; }
.syllabus-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.65rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    font: inherit;
    transition: background 0.15s ease;
}
.syllabus-item:hover { background: var(--surface-container-high); }
.syllabus-item.is-completed { color: var(--on-surface); }
.syllabus-item.is-completed .material-symbols-outlined { color: #2a8a4a; }
.syllabus-item.is-active {
    background: var(--brand-yellow);
    color: var(--brand-blue);
    font-weight: 600;
}
.syllabus-item.is-active .material-symbols-outlined { color: var(--brand-blue); }
.syllabus-item .material-symbols-outlined { font-size: 1.4rem; flex-shrink: 0; }
.syllabus-item-body { display: flex; flex-direction: column; line-height: 1.2; }
.syllabus-item-title { font-size: 0.9rem; }
.syllabus-item-state { font-size: 0.68rem; opacity: 0.75; }
.syllabus-foot { margin-top: auto; padding-top: 0.75rem; }

/* Content pane */
.classroom-content { padding: 2rem clamp(1rem, 4vw, 3rem); max-width: 60rem; }
.lesson-view { display: flex; flex-direction: column; gap: 1.75rem; }
.lesson-header { display: flex; flex-direction: column; gap: 0.5rem; }
.lesson-badge {
    align-self: flex-start;
    background: var(--surface-container);
    color: var(--brand-blue);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
}

.lesson-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    background: #000;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45);
}
.lesson-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lesson-text { color: var(--on-surface-variant); line-height: 1.7; }

.lesson-section { display: flex; flex-direction: column; gap: 0.85rem; }
.lesson-section-title {
    border-bottom: 1px solid var(--outline-variant);
    padding-bottom: 0.4rem;
    margin-bottom: 0;
}

.lesson-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.85rem; }
.lesson-file {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 0.85rem;
    box-shadow: 0 4px 14px rgba(18, 28, 40, 0.05);
}
.lesson-file-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
}
.lesson-file-icon .material-symbols-outlined { font-size: 1.7rem; }
.lesson-file-icon.tone-pdf { background: #ffdad6; color: #ba1a1a; }
.lesson-file-icon.tone-doc { background: var(--surface-container-high); color: var(--brand-blue); }
.lesson-file-icon.tone-mp3 { background: #e0f0e6; color: #2a8a4a; }
.lesson-file-icon.tone-ppt { background: var(--brand-yellow); color: var(--on-secondary-container); }
.lesson-file-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lesson-file-name { font-weight: 600; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-file-type { font-size: 0.72rem; color: var(--on-surface-variant); letter-spacing: 0.05em; }
.lesson-file-download { flex-shrink: 0; }

.lesson-exercises { display: flex; flex-direction: column; gap: 1rem; }

/* Help / Q&A card (Stitch "Need Help with this Lesson?") */
.lesson-help {
    position: relative;
    overflow: hidden;
    background: var(--surface-container);
    border: 1px solid rgba(0, 37, 118, 0.1);
    border-radius: 1.25rem;
    padding: 1.75rem;
}
.lesson-help-body { position: relative; z-index: 1; max-width: 34rem; }
.lesson-help-body p { color: var(--on-surface-variant); }
.lesson-help-glow {
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: rgba(0, 37, 118, 0.08);
    filter: blur(40px);
}

.lesson-footer { border-top: 1px solid var(--outline-variant); padding-top: 1.25rem; }

/* Exercise player */
.exercise {
    padding: 1.1rem 1.25rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 0.9rem;
}
.exercise-question { font-weight: 600; color: var(--on-surface); margin-bottom: 0.75rem; }
.exercise-options { display: flex; flex-direction: column; gap: 0.5rem; }
.exercise-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--outline-variant);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.exercise-option:hover { border-color: var(--brand-blue-300); }
.exercise-option.is-selected { border-color: var(--brand-blue); background: var(--surface-container-low); }
.exercise-option.is-correct { border-color: #2a8a4a; background: #e7f6ec; }
.exercise-option.is-wrong { border-color: #ba1a1a; background: #ffeceb; }
.exercise-option input { accent-color: var(--brand-blue); }
.exercise-mark { margin-left: auto; }
.exercise-mark.is-correct { color: #2a8a4a; }
.exercise-mark.is-wrong { color: #ba1a1a; }

.exercise-feedback {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.6rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.exercise-feedback.is-correct { background: #e7f6ec; color: #1f6e3a; }
.exercise-feedback.is-wrong { background: #ffeceb; color: #93000a; }

/* Loading spinner shared by lesson/classroom */
.lesson-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    color: var(--on-surface-variant);
}
.rotating { animation: tne-spin 1s linear infinite; }
@keyframes tne-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   Teacher panel (phase 10, Stitch "Teacher Page")
   ============================================================================ */
/* Navigation items — used by the persistent instructor sidebar in MainLayout. */
.teacher-nav-list { display: flex; flex-direction: column; gap: 0.25rem; }
.teacher-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.65rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    transition: background 0.15s ease;
}
.teacher-nav-item:hover { background: var(--surface-container-high); }
.teacher-nav-item.is-active,
.teacher-nav-item.active {
    background: var(--brand-yellow);
    color: var(--brand-blue);
    font-weight: 600;
}
.teacher-nav-item.is-active .material-symbols-outlined,
.teacher-nav-item.active .material-symbols-outlined { color: var(--brand-blue); }
.teacher-nav-item .material-symbols-outlined { font-size: 1.35rem; flex-shrink: 0; }
.teacher-nav-item-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.teacher-nav-item-title { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teacher-nav-item-meta { font-size: 0.68rem; opacity: 0.75; }
.teacher-nav-section {
    margin: 0.6rem 0.65rem 0.1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--outline);
}

/* Main canvas */
.teacher-main { padding: 1.75rem clamp(1rem, 3.5vw, 2.75rem); min-width: 0; }
.teacher-main-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.teacher-head-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.teacher-content-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 22rem) 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1023px) {
    .teacher-content-grid { grid-template-columns: 1fr; }
}
.teacher-col { display: flex; flex-direction: column; gap: 1.25rem; }

.bento-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 0.9rem;
    padding: 1.25rem;
    box-shadow: 0 4px 18px rgba(18, 28, 40, 0.05);
}
.teacher-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.teacher-card-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.6rem;
    background: var(--surface-container);
    color: var(--brand-blue);
    flex-shrink: 0;
}
.teacher-card-icon .material-symbols-outlined { font-size: 1.4rem; }
.teacher-count-pill,
.teacher-status-count { font-family: var(--font-heading); }
.teacher-count-pill {
    margin-left: auto;
    background: var(--surface-container);
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 0.1rem 0.7rem;
}

.teacher-feedback { padding: 0.6rem 2.2rem 0.6rem 0.85rem; }

/* Dynamic rows (files / exercises) */
.teacher-rows-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.teacher-rows-head .material-symbols-outlined { font-size: 1.1rem; }
.teacher-empty-hint { font-size: 0.82rem; color: var(--on-surface-variant); }

.teacher-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.teacher-row .control { margin-bottom: 0; }
.teacher-row-remove { color: var(--outline); }
.teacher-row-remove:hover { color: #ba1a1a; }
.teacher-row-remove .material-symbols-outlined { font-size: 1.1rem; }

.teacher-exercise {
    border: 1px solid var(--outline-variant);
    border-radius: 0.7rem;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
    background: var(--surface-container-low);
}
.teacher-exercise-head { display: flex; align-items: center; gap: 0.4rem; }
.teacher-exercise-hint { font-size: 0.75rem; color: var(--on-surface-variant); margin: 0.4rem 0; }
.teacher-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.teacher-option input[type="radio"] { accent-color: var(--brand-blue); flex-shrink: 0; }
.teacher-option .input { margin-bottom: 0; }

.teacher-editor-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

/* Curriculum status card */
.teacher-status {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--primary-container) 0%, var(--brand-blue) 100%);
    border-color: transparent;
    color: #fff;
}
.teacher-status-caption { font-size: 0.75rem; opacity: 0.8; margin-bottom: 0.75rem; }
.teacher-status-figure { display: flex; align-items: flex-end; gap: 0.5rem; }
.teacher-status-count { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.teacher-status-label { font-size: 0.8rem; opacity: 0.85; margin-bottom: 0.3rem; }
.teacher-status-bar {
    margin-top: 0.75rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}
.teacher-status-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-yellow); }
.teacher-status-glyph {
    position: absolute;
    right: -1rem;
    bottom: -1.5rem;
    font-size: 7rem;
    opacity: 0.12;
}

/* Lessons & roster tables */
.teacher-table th {
    color: var(--on-surface-variant);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom-color: var(--outline-variant);
}
.teacher-table td { vertical-align: middle; border-bottom-color: var(--surface-container-high); }
.teacher-table tr.is-editing { background: var(--surface-container-low); }

.teacher-lesson-name { display: flex; flex-direction: column; line-height: 1.3; }
.teacher-lesson-sub { font-size: 0.72rem; color: var(--on-surface-variant); }

.teacher-resources { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.teacher-res {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.4rem;
}
.teacher-res .material-symbols-outlined { font-size: 1.05rem; }
.teacher-res.tone-pdf { background: #ffdad6; color: #ba1a1a; }
.teacher-res.tone-doc { background: var(--surface-container-high); color: var(--brand-blue); }
.teacher-res.tone-mp3 { background: #e0f0e6; color: #2a8a4a; }
.teacher-res.tone-ppt { background: var(--brand-yellow); color: var(--on-secondary-container); }
.teacher-res.tone-video { background: var(--surface-container); color: var(--brand-blue); }
.teacher-res-none { color: var(--outline); }

.teacher-actions { display: inline-flex; gap: 0.3rem; }
.teacher-actions .material-symbols-outlined { font-size: 1.1rem; }
.teacher-delete:hover { color: #ba1a1a; }

.teacher-student-name { display: inline-flex; align-items: center; gap: 0.5rem; }
.teacher-student-name .material-symbols-outlined { color: var(--brand-blue); font-size: 1.6rem; }

/* ============================================================================
   Teacher Students roster (phase 14): bento metrics + enriched student rows
   ============================================================================ */
.roster-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
    .roster-bento { grid-template-columns: 1fr; }
}
.roster-metric { display: flex; align-items: center; gap: 1rem; }
.roster-metric-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.roster-metric-icon .material-symbols-outlined { font-size: 1.5rem; }
.roster-metric-icon.tone-total { background: var(--primary-container); color: #fff; }
.roster-metric-icon.tone-progress { background: var(--brand-yellow); color: var(--on-secondary-container); }
.roster-metric-icon.tone-risk { background: #ffdad6; color: #ba1a1a; }
.roster-metric-label { font-size: 0.78rem; color: var(--on-surface-variant); }
.roster-metric-value { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--brand-blue); }

.roster-list { display: flex; flex-direction: column; gap: 0.65rem; }
.roster-head,
.roster-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) auto;
    align-items: center;
    gap: 1rem;
}
.roster-head {
    padding: 0 1.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
}
@media (max-width: 768px) { .roster-head { display: none; } }
.roster-col-actions { justify-self: end; }

.roster-row {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 0.9rem;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 2px 10px rgba(18, 28, 40, 0.04);
    transition: box-shadow 0.15s ease;
}
.roster-row:hover { box-shadow: 0 6px 18px rgba(18, 28, 40, 0.08); }
.roster-row.is-at-risk { border-left: 4px solid #ba1a1a; }
@media (max-width: 768px) {
    .roster-row { grid-template-columns: 1fr; }
    .roster-col-actions { justify-self: stretch; }
}

.roster-col-student { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.roster-avatar {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--surface-container);
    color: var(--brand-blue);
    border: 2px solid var(--brand-yellow);
}
.roster-avatar.is-at-risk { border-color: #ba1a1a; color: #ba1a1a; background: #ffdad6; }
.roster-identity { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.roster-name-line { display: flex; align-items: center; gap: 0.5rem; }
.roster-name { font-weight: 700; color: var(--brand-blue); }
.roster-risk-tag { background: #ffdad6; color: #ba1a1a; font-weight: 700; font-size: 0.65rem; text-transform: uppercase; }
.roster-email { font-size: 0.8rem; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; }
.roster-enrolled { font-size: 0.72rem; color: var(--outline); }

.roster-col-progress { display: flex; flex-direction: column; gap: 0.35rem; }
.roster-bar {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--surface-container-highest);
    overflow: hidden;
}
.roster-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-blue); }
.roster-bar > span.is-at-risk { background: #ba1a1a; }
.roster-progress-label { font-size: 0.76rem; font-weight: 600; color: var(--brand-blue); }

.roster-actions { display: inline-flex; gap: 0.4rem; }
.roster-col-actions { display: inline-flex; gap: 0.4rem; }
.roster-col-actions .material-symbols-outlined { font-size: 1.05rem; }
.roster-remove { color: #ba1a1a; border-color: var(--outline-variant); }
.roster-remove:hover:not([disabled]) { background: #ffdad6; color: #ba1a1a; border-color: #ba1a1a; }

/* ============================================================================
   Blazor framework defaults (kept from the template)
   ============================================================================ */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* Global error popup (shown by Blazor as a bottom-centered toast on unhandled errors) */
#blazor-error-ui {
    color-scheme: light only;
    display: none;             /* Blazor flips this to block when an error occurs */
    position: fixed;
    inset: auto 0 1.25rem 0;   /* bottom, centered horizontally */
    z-index: 2000;
    pointer-events: none;      /* let the card capture clicks, not the full-width wrapper */
    padding: 0 1rem;
}

    #blazor-error-ui .error-card {
        pointer-events: auto;
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        width: min(560px, 100%);
        margin: 0 auto;
        padding: 1rem 1.1rem;
        background: var(--surface-container-lowest, #fff);
        border: 1px solid var(--outline-variant, #c4c5d5);
        border-left: 5px solid #c62828;
        border-radius: 14px;
        box-shadow: 0 12px 32px -8px rgba(18, 28, 40, 0.35), 0 4px 10px -4px rgba(18, 28, 40, 0.2);
        font-family: var(--font-body, system-ui, sans-serif);
        color: var(--on-surface, #121c28);
        animation: blazor-error-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #blazor-error-ui .error-icon {
        color: #c62828;
        font-size: 1.6rem;
        line-height: 1.4;
        flex: 0 0 auto;
    }

    #blazor-error-ui .error-body {
        flex: 1 1 auto;
        min-width: 0;
    }

    #blazor-error-ui .error-title {
        margin: 0 0 0.15rem;
        font-family: var(--font-heading, system-ui, sans-serif);
        font-weight: 700;
        font-size: 1rem;
    }

    #blazor-error-ui .error-text {
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.4;
        color: var(--on-surface-variant, #444653);
    }

    #blazor-error-ui .reload {
        flex: 0 0 auto;
        align-self: center;
        display: inline-flex;
        align-items: center;
        padding: 0.45rem 0.95rem;
        border-radius: 9px;
        background: var(--brand-blue, #002576);
        color: #fff;
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
        transition: background 0.15s ease;
    }

        #blazor-error-ui .reload:hover {
            background: var(--primary-container, #0038a8);
        }

    #blazor-error-ui .dismiss {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        background: transparent;
        color: var(--on-surface-variant, #444653);
        padding: 0.2rem;
        border-radius: 8px;
        line-height: 0;
        transition: background 0.15s ease, color 0.15s ease;
    }

        #blazor-error-ui .dismiss:hover {
            background: var(--surface-container, #e5eeff);
            color: var(--on-surface, #121c28);
        }

        #blazor-error-ui .dismiss .material-symbols-outlined {
            font-size: 1.25rem;
        }

@keyframes blazor-error-in {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--grey-100, #e0e0e0);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brand-blue, #1b6ec2);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* ============================================================================
   Messaging (Stitch "Messaging Page") · phase 12
   Two panels: conversation list + active chat thread. Reproduced with flexbox
   over the brand tokens (no Tailwind).
   ============================================================================ */

/* Full-bleed: the messaging interface fills the main area (no card, no border, no max-width),
   like the mock. The height comes from the flex chain (app-body → app-main → msg-shell), so the
   thread scrolls internally and the composer stays pinned at the bottom. */
.msg-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    max-width: none;
}

.msg-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--surface-container-lowest);
    overflow: hidden;
}

/* Custom scrollbar matching the mock --------------------------------------- */
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--surface-container-highest); border-radius: 10px; }
.chat-scroll::-webkit-scrollbar-thumb:hover { background: var(--outline-variant); }

/* Conversation list -------------------------------------------------------- */
.msg-list {
    width: 22rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--outline-variant);
    background: var(--surface);
}

.msg-list-head {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-bright, var(--surface-container-low));
}

.msg-list-items { flex: 1; min-height: 0; overflow-y: auto; }

.msg-list-empty,
.msg-list-item-preview { color: var(--on-surface-variant); }

.msg-list-empty { padding: 1.5rem 1rem; }

.msg-list-item {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border: none;
    border-left: 4px solid transparent;
    border-bottom: 1px solid rgba(196, 197, 213, 0.3);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.msg-list-item:hover { background: var(--surface-container); }

.msg-list-item.is-active {
    background: rgba(254, 204, 0, 0.18);
    border-left-color: var(--brand-yellow);
}

.msg-list-item-body { flex: 1; min-width: 0; }

.msg-list-item-top,
.msg-list-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.msg-list-item-top { margin-bottom: 0.2rem; }

.msg-list-item-name {
    font-weight: 600;
    color: var(--on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-list-item-time { font-size: 0.75rem; color: var(--on-surface-variant); flex-shrink: 0; }

.msg-list-item-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.msg-unread-badge {
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: var(--brand-blue);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Avatar (initials) -------------------------------------------------------- */
.msg-avatar {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--brand-blue);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
}

.msg-avatar.is-small { width: 2rem; height: 2rem; font-size: 0.75rem; margin-top: 0.4rem; }

/* Chat thread -------------------------------------------------------------- */
.msg-thread-pane { flex: 1; min-width: 0; min-height: 0; display: flex; }

.msg-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--surface-bright, var(--surface));
    min-width: 0;
    min-height: 0;
}

.msg-thread-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
}

.msg-thread-name { font-family: var(--font-heading); font-weight: 600; color: var(--on-surface); margin: 0; }

.msg-thread-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

.msg-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #22c55e; display: inline-block; }

.msg-thread-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--surface);
    background-image: radial-gradient(var(--surface-container-highest) 1px, transparent 1px);
    background-size: 24px 24px;
}

.msg-date-separator { display: flex; justify-content: center; }

.msg-date-separator span {
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    background: var(--surface-container);
    color: var(--on-surface-variant);
    font-size: 0.8rem;
    font-weight: 500;
}

.msg-bubble-row { display: flex; gap: 0.75rem; max-width: 80%; }

.msg-bubble-row.is-theirs { align-self: flex-start; }

.msg-bubble-row.is-mine { align-self: flex-end; flex-direction: row-reverse; }

.msg-bubble-group { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.msg-bubble-row.is-mine .msg-bubble-group { align-items: flex-end; }

.msg-bubble {
    padding: 0.7rem 1rem;
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 37, 118, 0.08);
    white-space: pre-wrap;
    word-break: break-word;
}

.msg-bubble-row.is-theirs .msg-bubble {
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
    border-top-left-radius: 0;
}

.msg-bubble-row.is-mine .msg-bubble {
    background: var(--brand-blue);
    color: #fff;
    border-top-right-radius: 0;
}

.msg-bubble-meta { font-size: 0.72rem; color: var(--on-surface-variant); padding: 0 0.25rem; }

/* Lesson question card (a message that references a lesson: title header + question) */
.msg-lesson-card {
    border: 1px solid var(--outline-variant);
    border-left: 4px solid var(--brand-blue);
    border-radius: 0.85rem;
    background: var(--surface-container-lowest);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 37, 118, 0.08);
    max-width: 100%;
}

.msg-lesson-card-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: var(--surface-container-high);
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 0.85rem;
}

.msg-lesson-card-head .material-symbols-outlined { font-size: 1.1rem; }

.msg-lesson-card-title { word-break: break-word; }

.msg-lesson-card-body {
    padding: 0.7rem 0.85rem;
    color: var(--on-surface-variant);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Composer (Stitch chat input bar) ----------------------------------------- */
.msg-composer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
}

.msg-composer-bar { display: flex; align-items: flex-end; gap: 0.5rem; }

/* Attach (add_circle) button on the left */
.msg-composer-attach {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.msg-composer-attach:hover,
.msg-composer-attach.is-active { background: var(--surface-container); color: var(--brand-blue); }
.msg-composer-attach .material-symbols-outlined { font-size: 1.6rem; }

/* Rounded input field wrapping the textarea */
.msg-composer-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: 1.25rem;
    transition: border-color 0.15s ease;
}
.msg-composer-field:focus-within { border-color: var(--brand-blue); }

.msg-composer-input {
    flex: 1;
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    box-shadow: none;
    resize: none;
    min-height: 1.5rem;
    max-height: 8rem;
    padding: 0.7rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--on-surface);
}
.msg-composer-input::placeholder { color: var(--outline); }

.msg-send-button {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 9999px;
    background: var(--brand-blue);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 37, 118, 0.25);
    transition: transform 0.1s ease, background-color 0.15s ease;
}

.msg-send-button:hover:not(:disabled) { background: var(--brand-blue-700); transform: scale(1.05); }
.msg-send-button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Lesson-file picker (teacher attaches material already uploaded in their lessons) */
.msg-file-picker {
    border: 1px solid var(--outline-variant);
    border-radius: 0.75rem;
    background: var(--surface-container-low);
    overflow: hidden;
}
.msg-file-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--outline-variant);
    font-size: 0.9rem;
}
.msg-file-picker-close {
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    display: inline-flex;
    padding: 0.15rem;
    border-radius: 9999px;
}
.msg-file-picker-close:hover { color: var(--brand-blue); background: var(--surface-container); }
.msg-file-picker-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.85rem;
    color: var(--on-surface-variant);
    font-size: 0.9rem;
}
.msg-file-picker-list { max-height: 14rem; overflow-y: auto; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; }
.msg-file-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border: none;
    border-radius: 0.6rem;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--on-surface);
    transition: background-color 0.15s ease;
}
.msg-file-option:hover:not(:disabled) { background: var(--surface-container); }
.msg-file-option:disabled { opacity: 0.6; cursor: not-allowed; }
.msg-file-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file-option-add { color: var(--brand-blue); flex-shrink: 0; }

/* Attachment chip inside a message bubble (downloadable) */
.msg-attachment {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.7rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    text-decoration: none;
    min-width: 12rem;
    max-width: 18rem;
    transition: box-shadow 0.15s ease;
}
.msg-attachment:hover { box-shadow: 0 2px 10px rgba(0, 37, 118, 0.12); }
.msg-attachment-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--surface-container);
    color: var(--brand-blue);
    flex-shrink: 0;
}
.msg-attachment-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.msg-attachment-name { font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-attachment-hint { font-size: 0.72rem; color: var(--on-surface-variant); }
.msg-attachment-dl { color: var(--on-surface-variant); font-size: 1.2rem; margin-left: auto; flex-shrink: 0; }

/* Empty thread state ------------------------------------------------------- */
.msg-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--on-surface-variant);
}

.msg-empty .material-symbols-outlined { font-size: 3rem; color: var(--outline); }

/* Responsive: stack the panels (list above the thread) --------------------- */
@media (max-width: 768px) {
    .msg-layout { flex-direction: column; height: auto; }
    .msg-list { width: 100%; max-height: 18rem; }
    .msg-thread { min-height: 28rem; }
    .msg-bubble-row { max-width: 90%; }
}

/* ============================================================================
   Teacher Dashboard (Stitch "Curriculum Management") · phase 15
   Bento layout: course-progress ring + syllabus by module + analytics banner.
   ============================================================================ */
.teacher-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--brand-blue);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    margin-bottom: 0.35rem;
}
.teacher-back:hover { color: var(--primary-container); }
.teacher-back .material-symbols-outlined { font-size: 1.05rem; }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1023px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* Course-progress card with SVG ring */
.dashboard-progress { display: flex; flex-direction: column; gap: 1rem; }
.progress-ring-row { display: flex; align-items: center; gap: 1rem; }
.progress-ring { position: relative; width: 5rem; height: 5rem; flex-shrink: 0; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring-track { stroke: var(--surface-container-highest); }
.progress-ring-value {
    stroke: var(--brand-yellow);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease;
}
.progress-ring-label {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--brand-blue);
}
.dashboard-milestone {
    background: var(--surface-container);
    border: 1px solid var(--outline-variant);
    border-radius: 0.6rem;
    padding: 0.7rem 0.85rem;
}

/* Module list */
.dashboard-modules { display: flex; flex-direction: column; gap: 1rem; }
.module-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(18, 28, 40, 0.05);
}
.module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
}
.module-head-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.module-drag { color: var(--outline); cursor: grab; }
.module-status {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    flex-shrink: 0;
}
.module-status.is-active { background: var(--brand-yellow); color: var(--on-secondary-container); }
.module-status.is-draft { background: var(--outline-variant); color: var(--on-surface-variant); }

.module-lessons { display: flex; flex-direction: column; padding: 0.5rem; gap: 0.25rem; }
.module-lesson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.module-lesson:hover { background: var(--surface-container-low); border-color: var(--outline-variant); }
.module-lesson-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.module-lesson-thumb {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.55rem;
    flex-shrink: 0;
}
.module-lesson-thumb .material-symbols-outlined { font-size: 1.3rem; }
.module-lesson-thumb.tone-pdf { background: #ffdad6; color: #ba1a1a; }
.module-lesson-thumb.tone-doc { background: var(--surface-container-high); color: var(--brand-blue); }
.module-lesson-thumb.tone-mp3 { background: #e0f0e6; color: #2a8a4a; }
.module-lesson-thumb.tone-ppt { background: var(--brand-yellow); color: var(--on-secondary-container); }
.module-lesson-thumb.tone-video { background: var(--surface-container); color: var(--brand-blue); }
.module-lesson-thumb.tone-draft { background: var(--surface-container-high); color: var(--outline); }
.module-lesson-text { min-width: 0; }
.module-lesson-title {
    font-weight: 600;
    color: var(--on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.module-lesson-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}
.module-lesson-meta .material-symbols-outlined { font-size: 0.95rem; }
.module-lesson-draft { color: var(--outline); }
.module-lesson-actions { display: inline-flex; gap: 0.25rem; flex-shrink: 0; }
.module-lesson-actions .material-symbols-outlined { font-size: 1.1rem; }

.module-foot {
    border-top: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    text-align: center;
}
.module-add {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    color: var(--brand-blue);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
.module-add:hover { text-decoration: underline; }
.module-add .material-symbols-outlined { font-size: 1.15rem; }

/* ============================================================================
   Teacher Dashboard (multi-aula) + Classroom page · CHANGE-15
   ============================================================================ */
/* Dashboard: per-aula overview cards */
.classroom-list-card { margin-bottom: 1.5rem; }
.classroom-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.85rem;
}
.classroom-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 0.7rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.classroom-card:hover { box-shadow: 0 4px 14px rgba(0, 37, 118, 0.1); }
.classroom-card.is-selected {
    border-color: var(--brand-blue);
    background: var(--surface-container-lowest);
    box-shadow: inset 0 0 0 1px var(--brand-blue);
}
.classroom-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.classroom-card-name { font-weight: 700; color: var(--brand-blue); }
.classroom-card-count { font-size: 0.72rem; color: var(--on-surface-variant); white-space: nowrap; }
.classroom-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.classroom-card-manage {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--brand-blue);
}
.classroom-card-manage .material-symbols-outlined { font-size: 1rem; }
.classroom-card-manage:hover { text-decoration: underline; }

.dashboard-syllabus-head { margin-top: 0.5rem; }

/* Classroom page: mini-dashboard metric strip */
.classroom-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
    .classroom-metrics { grid-template-columns: repeat(2, 1fr); }
}
.classroom-metric { display: flex; align-items: center; gap: 0.85rem; }
.classroom-metric-icon {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.classroom-metric-icon .material-symbols-outlined { font-size: 1.4rem; }
.classroom-metric-icon.tone-progress { background: var(--brand-yellow); color: var(--on-secondary-container); }
.classroom-metric-icon.tone-total { background: var(--primary-container); color: #fff; }
.classroom-metric-icon.tone-lessons { background: var(--surface-container); color: var(--brand-blue); }
.classroom-metric-icon.tone-modules { background: var(--surface-container-high); color: var(--brand-blue); }
.classroom-metric-label { font-size: 0.76rem; color: var(--on-surface-variant); }
.classroom-metric-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--brand-blue); }

/* Classroom page: editor WIDE (left) · lessons NARROW (right) */
.classroom-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 22rem);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1023px) {
    .classroom-content-grid { grid-template-columns: 1fr; }
}

/* Compact lesson list (the narrow column) */
.lesson-mini-list { display: flex; flex-direction: column; gap: 0.4rem; }
.lesson-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--outline-variant);
    border-radius: 0.6rem;
    background: var(--surface-container-lowest);
}
.lesson-mini.is-editing { border-color: var(--brand-blue); background: var(--surface-container-low); }
.lesson-mini-main { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lesson-mini-sub { font-size: 0.72rem; color: var(--on-surface-variant); }

/* ============================================================================
   Teacher Student Portfolio (phase 16): header + classroom selector + bento
   ============================================================================ */
.portfolio-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0.75rem 0 1.5rem;
}
.portfolio-head-id { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.portfolio-avatar {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.7rem;
    background: var(--surface-container);
    color: var(--brand-blue);
    border: 3px solid var(--brand-yellow);
}
.portfolio-identity { min-width: 0; }
.portfolio-name-line { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.portfolio-level-badge {
    background: var(--brand-yellow);
    color: var(--on-secondary-container);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}
.portfolio-contact { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.portfolio-contact span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--on-surface-variant);
}
.portfolio-contact .material-symbols-outlined { font-size: 1.05rem; color: var(--outline); }
.portfolio-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Aula activa como desplegable: el valor seleccionado luce como el badge amarillo
   (afordancia de "clic para cambiar de aula"); las opciones abiertas salen en blanco normal. */
.portfolio-level-select { position: relative; display: inline-flex; }
.portfolio-level-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--brand-yellow);
    color: var(--on-secondary-container);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: none;
    border-radius: 999px;
    padding: 0.25rem 1.7rem 0.25rem 0.75rem;
    cursor: pointer;
    line-height: 1.2;
}
.portfolio-level-select select:hover { background: var(--brand-yellow-600, #e0b400); }
.portfolio-level-select select:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* Caret propio (la flecha nativa se oculta con appearance:none) */
.portfolio-level-select::after {
    content: "";
    position: absolute;
    right: 0.7rem;
    top: 50%;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid var(--on-secondary-container);
    border-bottom: 2px solid var(--on-secondary-container);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
/* Opciones desplegadas: aspecto normal (blanco), no la pastilla amarilla. */
.portfolio-level-select select option {
    background: #fff;
    color: var(--on-surface);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

/* Bento: 12-col grid that collapses to one column on narrow viewports. */
.portfolio-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}
.portfolio-progress { grid-column: span 4; display: flex; flex-direction: column; }
.portfolio-trend { grid-column: span 8; }
.portfolio-notes { grid-column: span 5; }
.portfolio-timeline-card { grid-column: span 7; }
.portfolio-table-card { grid-column: span 12; }
@media (max-width: 1023px) {
    .portfolio-progress,
    .portfolio-trend,
    .portfolio-notes,
    .portfolio-timeline-card,
    .portfolio-table-card { grid-column: 1 / -1; }
}

.portfolio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.portfolio-placeholder-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    background: var(--surface-container-high);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}
.portfolio-placeholder-note { font-size: 0.78rem; color: var(--on-surface-variant); margin-top: 0.75rem; }

/* Progress card */
.portfolio-progress-line { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.4rem; }
.portfolio-progress-course { font-size: 0.85rem; color: var(--on-surface-variant); }
.portfolio-progress-pct { font-family: var(--font-heading); font-weight: 700; color: var(--brand-blue); }
.portfolio-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: auto; }
.portfolio-stat { text-align: center; background: var(--surface-container-low); border-radius: 0.7rem; padding: 0.75rem; }
.portfolio-stat-value { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--brand-blue); }
.portfolio-stat-label { font-size: 0.74rem; color: var(--on-surface-variant); margin-top: 0.2rem; }

/* Evolution chart placeholder */
.portfolio-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    height: 10rem;
    padding: 0 0.25rem;
}
.portfolio-bar {
    flex: 1;
    min-height: 0.5rem;
    border-radius: 0.4rem 0.4rem 0 0;
    background: var(--primary-fixed, var(--surface-container-highest));
}
.portfolio-bar:last-child { background: var(--brand-yellow); }

/* Empty / placeholder states */
.portfolio-empty {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-container-low);
    border-radius: 0.7rem;
    color: var(--on-surface-variant);
    font-size: 0.85rem;
}
.portfolio-empty .material-symbols-outlined { font-size: 1.6rem; color: var(--outline); flex-shrink: 0; }
.portfolio-empty p { margin: 0; }

/* Activity timeline */
.portfolio-timeline { list-style: none; margin: 0; padding: 0 0 0 0.5rem; border-left: 2px solid var(--outline-variant); }
.portfolio-timeline li { position: relative; display: flex; gap: 0.75rem; padding: 0 0 1rem 1rem; }
.portfolio-timeline li:last-child { padding-bottom: 0; }
.portfolio-timeline li.is-muted { color: var(--on-surface-variant); }
.portfolio-timeline-dot {
    position: absolute;
    left: -1.4rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--surface-container);
    color: var(--brand-blue);
    border: 3px solid var(--surface-container-lowest);
}
.portfolio-timeline-dot .material-symbols-outlined { font-size: 1rem; }
.portfolio-timeline-title { font-weight: 600; font-size: 0.85rem; }
.portfolio-timeline-meta { font-size: 0.74rem; color: var(--on-surface-variant); }

/* Submissions & queries table */
.portfolio-table th { color: var(--on-surface-variant); font-size: 0.78rem; }
.portfolio-status { font-weight: 700; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; }
.portfolio-status.is-pending { background: #ffdad6; color: #ba1a1a; }
.portfolio-status.is-answered { background: var(--surface-container-highest); color: var(--on-surface-variant); }

/* ============================================================
   Student Profile (phase 17) — Stitch "Student Profile" in Bulma
   ============================================================ */
.profile .lesson-loading { margin-top: 2rem; }

/* Cabecera: franja decorada (motivo de "estrellas") que cruza por la mitad del avatar; el nombre y las
   pills quedan DEBAJO de la franja, sobre fondo claro, para que se lean en azul de marca sin esfuerzo. */
.profile-banner { position: relative; margin-bottom: 1.75rem; }
.profile-banner-strip {
    height: 7.5rem;
    border-radius: 0.9rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Ccircle cx='23' cy='23' r='1.6' fill='%23ffffff' fill-opacity='0.22'/%3E%3C/svg%3E"),
        radial-gradient(circle at 86% 16%, rgba(254, 204, 0, 0.30), transparent 44%),
        linear-gradient(120deg, var(--brand-blue), var(--brand-blue-300, #4a63a8));
    box-shadow: 0 8px 22px rgba(0, 37, 118, 0.20);
}
.profile-banner-foot { display: flex; align-items: flex-end; gap: 1.25rem; padding: 0 1.25rem; }

.profile-avatar-wrap { position: relative; flex-shrink: 0; margin-top: -3.25rem; }
.profile-avatar {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    border-radius: 1rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.1rem;
    background: var(--surface-container);
    color: var(--brand-blue);
    border: 4px solid #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    overflow: hidden;
}
img.profile-avatar { background: #fff; }
.profile-avatar-edit {
    position: absolute;
    right: -0.45rem;
    bottom: -0.45rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.6rem;
    background: var(--brand-yellow);
    color: var(--on-secondary-container, #4a3a00);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    transition: transform 0.12s ease;
}
.profile-avatar-edit:hover { transform: scale(1.08); }
.profile-avatar-edit .material-symbols-outlined { font-size: 1.25rem; }
.profile-avatar-edit input { display: none; }   /* oculta el control nativo del InputFile */

.profile-identity { flex-grow: 1; min-width: 0; padding-bottom: 0.15rem; }
.profile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.55rem; }
.profile-pill {
    background: var(--brand-yellow);
    color: var(--on-secondary-container, #4a3a00);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.74rem;
    font-weight: 700;
}
.profile-meta-empty { color: var(--on-surface-variant); font-size: 0.82rem; }
.profile-location { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--on-surface-variant); }
.profile-location .material-symbols-outlined { font-size: 1rem; color: var(--outline); }
.profile-banner-actions { padding-bottom: 0.2rem; }

/* Bento (como el mock): izquierda = form (fila 1) + progreso/certificados (fila 2);
   derecha = tutores ocupando las dos filas. */
.profile-bento { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; align-items: start; }
.profile-form-card { grid-column: 1 / 3; grid-row: 1; }
.profile-progress-card { grid-column: 1; grid-row: 2; }
.profile-certs-card { grid-column: 2; grid-row: 2; }
.profile-tutors-card { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; }
@media (max-width: 1023px) {
    .profile-bento { grid-template-columns: 1fr; }
    .profile-form-card,
    .profile-progress-card,
    .profile-certs-card,
    .profile-tutors-card { grid-column: 1; grid-row: auto; }
}

.profile-card-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1rem; }
.profile-card-head .material-symbols-outlined { color: var(--brand-blue); }

/* Información personal: dos columnas, la dirección ocupa ambas. */
.profile-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; }
.profile-field-wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .profile-fields { grid-template-columns: 1fr; } }

/* Progreso por aula */
.profile-progress-total {
    margin-left: auto;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--brand-yellow-600, #e0b400);
}
.profile-progress-list { display: flex; flex-direction: column; gap: 1.1rem; }
.profile-progress-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.profile-progress-name { font-weight: 600; font-size: 0.9rem; color: var(--on-surface); }
.profile-progress-pct { font-weight: 700; color: var(--brand-blue); }
.profile-progress-note { font-size: 0.78rem; color: var(--on-surface-variant); margin-top: 0.3rem; }

/* Certificados (aulas completadas) */
.profile-certs-count {
    margin-left: auto;
    background: var(--brand-yellow);
    color: var(--on-secondary-container, #4a3a00);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
}
.profile-cert-list { display: flex; flex-direction: column; gap: 0.6rem; }
.profile-cert {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem;
    border: 1px solid var(--outline-variant, #c4c5d5);
    border-radius: 0.6rem;
    background: var(--surface-container-low, #eef4ff);
}
.profile-cert-icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: var(--brand-blue);
    color: #fff;
}
.profile-cert-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-cert-name { font-weight: 700; font-size: 0.9rem; color: var(--brand-blue); }
.profile-cert-meta { font-size: 0.75rem; color: var(--on-surface-variant); }
.profile-cert-check { color: #1b8a3a; }

/* Mis tutores (columna derecha) */
.profile-tutor-list { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-tutor {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.profile-tutor:hover:not(:disabled) { background: var(--surface-container-low, #eef4ff); border-color: var(--outline-variant, #c4c5d5); }
.profile-tutor:disabled { cursor: default; opacity: 0.7; }
.profile-tutor-avatar {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.6rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--surface-container);
    color: var(--brand-blue);
}
.profile-tutor-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-tutor-name { font-weight: 700; font-size: 0.88rem; color: var(--on-surface); }
.profile-tutor-meta { font-size: 0.75rem; color: var(--on-surface-variant); }
.profile-tutor-chat { color: var(--brand-blue); transition: transform 0.15s ease; }
.profile-tutor:hover:not(:disabled) .profile-tutor-chat { transform: translateX(3px); }

/* Próxima sesión: placeholder al fondo de la tarjeta de tutores (la agenda es función mayor, pendiente). */
.profile-next-session {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 0.6rem;
    background: var(--brand-blue);
    color: #fff;
}
.profile-next-session .material-symbols-outlined { font-size: 1.5rem; }
.profile-next-session-body { display: flex; flex-direction: column; min-width: 0; }
.profile-next-session-title { font-weight: 700; font-size: 0.85rem; }
.profile-next-session-meta { font-size: 0.74rem; color: rgba(255, 255, 255, 0.85); }