/* ============================================================
   edoo · ui/student.css — portal del alumno (templates/student.html).
   Referencias: Pearson (acceso: tarjeta blanca de 440 px sobre fondo
   petróleo, etiquetas encima de los campos, un botón ancho), D2L
   (cabecera blanca con pestañas de texto y subrayado de 2 px), app
   móvil de Canvas ("Por hacer": filas con tipo, nombre, curso, nota
   de intentos y acción a la derecha), Canvas (tarjetas de curso con
   banda de color; avisos con fecha), Brightspace (progreso con
   barras finas y porcentaje en negrita).
   Decisiones de estructura:
   1. Bienvenida a pantalla completa sobre --band, sin adornos: marca,
      título, una frase, pestañas Entrar / Crear cuenta / Con código y
      el formulario. Sin orbes ni iconos flotantes.
   2. Dentro: cabecera blanca de 56 px (marca, pestañas, usuario) y
      página de 1120 px. Inicio: saludo de una línea con la fecha,
      barra "Unirse a un grupo", cifras en una tira, la siguiente
      tarea destacada y dos columnas: Por hacer | Avisos + Recientes.
   3. Tareas, recientes, historial y progreso son filas de lista
      dentro de una tarjeta (12 px arriba y abajo, hairline); el tipo
      es un icono pequeño en su color sobre gris, sin cuadros de
      colores llenos.
   4. Grupos como tarjetas con banda de 4 px del color del grupo.
   5. Modales sobre el chasis común (.modal-content); el botón de
      cerrar suelto va a la esquina.
   Clases de estado: active, show, is-read, is-done, is-scheduled,
   is-locked, is-retry, correct, incorrect, correct-ref, selected,
   missed, excellent, average, low (y band-*), pending, today,
   yesterday, week, older.
   Sin regla propia: ws-bg*, ws-floater* (retirados del marcado),
   sp-hero__art/blob/sticker (retirados), tone-* (los títulos de
   sección ya no llevan icono), collapsed (no hay barra lateral).
   ============================================================ */

.student-body { background: var(--bg); min-height: 100vh; }

/* ============ Bienvenida (acceso) ============ */
.welcome-screen { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: var(--band); overflow: hidden; }
/* retícula fina sobre la banda, como en la landing; la tarjeta queda encima */
.welcome-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, transparent 35%, var(--text) 100%); mask-image: radial-gradient(60% 60% at 50% 50%, transparent 35%, var(--text) 100%); }
.welcome-screen > * { position: relative; z-index: 1; }
.ws-center { width: 100%; display: flex; justify-content: center; }
.ws-card { width: 100%; max-width: 440px; padding: 32px 32px 28px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.ws-card__logo { margin-bottom: 20px; }
.ws-card__logo .edoo-logo { color: var(--primary-deep); }
.ws-card__title { font-size: var(--fs-h1); font-weight: var(--fw-title); line-height: 1.2; }
.ws-card__desc { margin-top: 6px; font-size: 14px; color: var(--text-secondary); }
.ws-auth-tabs { display: flex; margin: 24px 0 20px; border-bottom: 1px solid var(--border); }
.ws-auth-tab {
    flex: 1; min-height: 40px; margin-bottom: -1px; padding: 0 8px; border-bottom: 2px solid transparent;
    font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: color .12s, border-color .12s;
}
.ws-auth-tab:hover { color: var(--text); }
.ws-auth-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.ws-tab-short { display: none; }
.ws-auth-form { display: none; flex-direction: column; gap: 16px; }
.ws-auth-form.active { display: flex; }
.ws-field { display: flex; flex-direction: column; gap: 6px; }
.ws-field label { font-size: 13px; font-weight: 700; color: var(--text); }
.ws-field label i { display: none; }
.ws-field input { width: 100%; height: 40px; }
.ws-submit-btn { width: 100%; height: 42px; justify-content: center; margin-top: 4px; }
.ws-guest-hint { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.auth-consent-field { display: flex; flex-direction: column; gap: 10px; }
.auth-consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); cursor: pointer; }
.auth-consent-label input { margin-top: 2px; flex: 0 0 auto; }
.ws-auth-error:empty { display: none; }
.ws-auth-error { margin-top: 16px; padding: 10px 12px; border-left: 3px solid var(--danger); border-radius: var(--radius); background: var(--danger-bg); font-size: 14px; color: var(--text); }

/* ============ Cabecera del portal ============ */
.sp-topbar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.sp-topbar__inner { display: flex; align-items: center; gap: 32px; max-width: 1168px; height: 56px; margin: 0 auto; padding: 0 24px; }
.sp-brand { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--primary-deep); text-decoration: none !important; }
.sp-tabs { display: flex; align-self: stretch; gap: 24px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 2px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: color .12s, border-color .12s;
}
.sp-tab i { display: none; }
.sp-tab:hover { color: var(--text); border-bottom-color: var(--primary-tint-strong); }
.sp-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.sp-user { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 4px; border-radius: 20px; flex: 0 0 auto; }
.sp-user:hover { background: var(--surface-2); }
.sp-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary-tint-strong); color: var(--primary-deep); font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.sp-user__name { font-size: 14px; font-weight: 700; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-user > i { font-size: 10px; color: var(--muted); }

/* ============ Página ============ */
.sp-main { max-width: 1168px; margin: 0 auto; padding: 28px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
.sp-main > .panel { display: none; }
.sp-main > .panel.active { display: flex; flex-direction: column; gap: 24px; }
.sp-hero h1, .sp-page-head h1 { font-size: var(--fs-h1); font-weight: var(--fw-title); line-height: 1.2; }
.sp-hero__date, .sp-page-head__sub { margin-top: 4px; font-size: 14px; color: var(--muted); }
.sp-hero__date::first-letter { text-transform: uppercase; }
.sp-eyebrow { display: none; }

/* unirse a un grupo */
.sp-join {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; order: 1;
    padding: 14px 16px 14px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.sp-main > .panel { order: 0; }
.sp-main > .panel.active { order: 0; }
.sp-join__icon { display: none; }
.sp-join__text { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }
.sp-join__text strong { font-size: 15px; }
.sp-join__text span { font-size: 13px; color: var(--muted); }
.sp-join__form { display: flex; gap: 8px; flex: 0 1 360px; }
.sp-join__form input { flex: 1; min-width: 0; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sp-join__btn { flex: 0 0 auto; }

/* cifras */
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sp-stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; min-width: 0; }
.sp-stat + .sp-stat { border-left: 1px solid var(--border-light); }
.sp-stat__icon { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--primary-tint); color: var(--primary); font-size: 13px; }
.sp-stat__body { padding-right: 40px; }
.sp-stat__body { display: flex; flex-direction: column-reverse; gap: 2px; }
.sp-stat__label { font-size: 13px; color: var(--muted); }
.sp-stat__value { font-family: var(--font-title); font-size: 30px; font-weight: var(--fw-title); line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.sp-stat.excellent .sp-stat__value { color: var(--success); }
.sp-stat.average .sp-stat__value { color: var(--warning); }
.sp-stat.low .sp-stat__value { color: var(--danger); }
.sp-stat__badge { margin-top: 2px; }
.indicator-badge { font-size: 12px; color: var(--muted); }
.sp-stats-skeleton { min-height: 86px; }
.sp-avg-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: -12px; font-size: 13px; color: var(--muted); }
.sp-avg-filters__label { font-weight: 700; color: var(--text-secondary); }
.sp-select { width: auto; min-width: 180px; height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* siguiente pendiente */
#continue-card-wrap:empty { display: none; }
.sp-continue {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-lg);
    transition: border-color .12s, box-shadow .12s;
}
.sp-continue:hover { box-shadow: var(--shadow-sm); }
.sp-continue__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-tint); color: var(--primary); font-size: 16px; }
.sp-continue__body { flex: 1; min-width: 0; }
.sp-continue__eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-continue__body h3 { margin-top: 2px; font-size: 17px; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
.sp-continue__body p { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.sp-continue__body p i { display: none; }
.sp-continue__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 700; }
.sp-continue__cta:hover { background: var(--primary-dark); }

/* columnas de Inicio */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.sp-col-main, .sp-col-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sp-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sp-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px 8px 20px; border-bottom: 1px solid var(--border-light); }
.sp-section__head h2 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h3); font-weight: 700; }
.sp-section__icon { display: none; }
.sp-link { font-size: 13px; font-weight: 700; }

/* lista "Por hacer" agrupada por día */
.sp-tasks > .ld { padding: 24px; }
.sp-tasks > .js-skeleton, .sp-recents > .js-skeleton, .sp-history > .js-skeleton { padding: 12px 20px; }
.sp-daygroup + .sp-daygroup { border-top: 1px solid var(--border); }
.sp-daygroup__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border-light); }
.sp-daychip { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.sp-daychip.today { color: var(--primary-dark); }
.sp-daygroup__count { font-size: 12px; color: var(--muted); }
.sp-task { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 20px; cursor: pointer; transition: background-color .12s; }
.sp-task + .sp-task { border-top: 1px solid var(--border-light); }
.sp-task:hover { background: var(--bg); }
.sp-task:hover h4 { text-decoration: underline; }
.sp-task.is-scheduled { cursor: default; }
.sp-task.is-scheduled:hover { background: none; }
.sp-task.is-scheduled:hover h4 { text-decoration: none; }
.sp-task__body { flex: 1; min-width: 0; }
.sp-task__body h4 { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--primary); overflow-wrap: anywhere; }
.sp-task.is-scheduled .sp-task__body h4 { color: var(--text); }
.sp-task__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.sp-task__note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.sp-task__action { flex: 0 0 auto; }
.sp-task__btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius);
    border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.sp-task__btn i { font-size: 11px; }
.sp-task__btn.is-retry { background: var(--surface); color: var(--primary); }
.sp-task__btn.is-locked { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* icono de tipo e insignias en línea */
.sp-tile { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--surface-2); color: var(--tc, var(--muted)); font-size: 14px; }
.sp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sp-chip > i { font-size: 11px; }
.sp-chip--type { color: var(--text-secondary); }
.sp-chip--type > i { color: var(--tc, var(--muted)); }
.sp-chip--group > i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.sp-chip--ok > i { color: var(--success); }
.sp-chip--bad > i { color: var(--danger); }
.sp-score { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sp-score--lg { font-size: 20px; }
.sp-score.band-excellent { color: var(--success); }
.sp-score.band-average { color: var(--warning); }
.sp-score.band-low { color: var(--danger); }

/* avisos */
.sp-anns > .ld { padding: 20px; }
.sp-ann { padding: 14px 16px 14px 20px; border-left: 3px solid var(--gc, var(--primary)); }
.sp-ann + .sp-ann { border-top: 1px solid var(--border-light); }
.sp-ann.is-read { border-left-color: var(--border); }
.sp-ann__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-ann__date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sp-ann__title { display: block; margin-top: 6px; font-size: 14px; }
.sp-ann__text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.sp-ann.is-read .sp-ann__text { color: var(--muted); }
.sp-ann__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.sp-ann__btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: var(--radius); font-size: 12px; font-weight: 700; color: var(--primary); }
.sp-ann__btn:hover { background: var(--primary-tint); }
.sp-ann__btn.is-dismiss { width: 28px; padding: 0; justify-content: center; color: var(--muted); }
.sp-ann__btn.is-dismiss:hover { background: var(--surface-2); color: var(--text); }
.sp-ann__read { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* recientes */
.sp-recents > .ld { padding: 20px; }
.sp-recent { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; cursor: pointer; }
.sp-recent + .sp-recent { border-top: 1px solid var(--border-light); }
.sp-recent:hover { background: var(--bg); }
.sp-recent__tile { width: 32px; height: 32px; font-size: 13px; }
.sp-recent__body { flex: 1; min-width: 0; }
.sp-recent__body h4 { font-size: 14px; font-weight: 700; color: var(--primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-recent__body p { font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* vacíos */
.sp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 24px; text-align: center; color: var(--muted); }
.sp-empty__icon { font-size: 24px; color: var(--muted-light); margin-bottom: 6px; }
.sp-empty h3 { font-size: var(--fs-h3); color: var(--text); }
.sp-empty p { font-size: 14px; max-width: 420px; }
.sp-empty .btn { margin-top: 12px; }
.sp-empty--mini { padding: 20px; }
.sp-empty--mini > i { display: none; }
.sp-main > .panel > .sp-empty, .sp-progress > .sp-empty, .sp-history > .sp-empty { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }

/* ============ Mis grupos ============ */
.sp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.sp-groups:empty { display: none; }
.sp-group { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--gc, var(--primary)); border-radius: var(--radius-lg); overflow: hidden; }
.sp-group__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; }
.sp-group__logo { width: 36px; height: 36px; object-fit: contain; border-radius: var(--radius); border: 1px solid var(--border-light); }
.sp-group__title { flex: 1; min-width: 0; }
.sp-group__title h4 { font-size: 17px; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
.sp-group__title span { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; color: var(--muted); }
.sp-group__title span i { font-size: 11px; }
.sp-group__status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--success); white-space: nowrap; }
.sp-group__status.pending { color: var(--warning); }
.sp-group__status i { font-size: 11px; }
.sp-group__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 20px; border-top: 1px solid var(--border-light); }
.sp-group__stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; }
.sp-group__stat b, .sp-group__stat .sp-score { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-group__stat span:last-child { font-size: 12px; color: var(--muted); }
.sp-group__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--border-light); background: var(--bg); }

/* ============ Mi progreso ============ */
.sp-progress { display: flex; flex-direction: column; gap: 16px; }
.sp-overview { display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sp-ring { flex: 0 0 auto; }
.sp-ring__bg { fill: none; stroke: var(--border-light); stroke-width: 7; }
.sp-ring__fg { fill: none; stroke-width: 7; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 48px 48px; }
.sp-ring__txt { font-family: var(--font-title); font-size: 20px; font-weight: 700; fill: var(--text); }
.sp-ring__sub { font-size: 10px; fill: var(--muted); }
.sp-overview__text { flex: 1; min-width: 0; }
.sp-overview__text h3 { font-size: var(--fs-h3); }
.sp-overview__text p { margin-top: 2px; font-size: 14px; color: var(--muted); }
.sp-overview__boxes, .sp-detail__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--border-light); border-radius: var(--radius); }
.sp-box { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 14px; }
.sp-box + .sp-box { border-left: 1px solid var(--border-light); }
.sp-box b { font-size: 20px; font-weight: var(--fw-title); font-variant-numeric: tabular-nums; }
.sp-box span { font-size: 12px; color: var(--muted); }
.sp-box--ok b { color: var(--success); }
.sp-box--bad b { color: var(--danger); }
.sp-pgroup { padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gc, var(--primary)); border-radius: var(--radius-lg); }
.sp-pgroup__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-pgroup__head h4 { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.sp-pgroup__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.sp-pgroup__bar { height: 6px; margin-top: 12px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
.sp-pgroup__bar > span { display: block; height: 100%; }
.sp-pgroup__list { margin-top: 12px; border-top: 1px solid var(--border-light); }
.sp-prow { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.sp-prow + .sp-prow { border-top: 1px solid var(--border-light); }
.sp-prow:hover .sp-prow__name { text-decoration: underline; }
.sp-prow__tile { width: 28px; height: 28px; font-size: 12px; }
.sp-prow__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-prow__date { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ============ Historial ============ */
.sp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-history { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sp-history:has(> .sp-empty) { background: none; border: 0; }
.sp-hist { display: flex; align-items: center; gap: 14px; padding: 12px 20px; cursor: pointer; }
.sp-hist + .sp-hist { border-top: 1px solid var(--border-light); }
.sp-hist:hover { background: var(--bg); }
.sp-hist:hover h4 { text-decoration: underline; }
.sp-hist__body { flex: 1; min-width: 0; }
.sp-hist__body h4 { font-size: 15px; font-weight: 700; color: var(--primary); overflow-wrap: anywhere; }
.sp-hist__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.sp-hist__result { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sp-hist__date { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ============ Modales ============ */
/* .modal-content (chasis común): cada bloque lleva el relleno de 24 px */
.student-body .modal-content > * { padding-left: 24px; padding-right: 24px; }
.student-body .modal-content > :first-child:not(.modal-close-btn), .student-body .modal-content > .modal-close-btn + * { padding-top: 22px; }
.student-body .modal-content > :last-child { padding-bottom: 22px; }
.student-body .modal-content > .modal-close-btn { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; min-height: 0; padding: 0; justify-content: center; border-color: transparent; background: none; }
.student-body .modal-content > .modal-close-btn:hover { background: var(--surface-2); }
/* unirse */
.join-found-modal { max-width: 460px; }
.join-found-header { display: flex; align-items: center; gap: 12px; padding: 22px 24px 0 !important; }
.join-found-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-tint); color: var(--primary); font-size: 16px; }
.join-found-badge { font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.join-found-body { padding: 14px 24px 20px !important; }
.join-found-body h2 { font-size: 20px; font-weight: 400; }
.join-found-subtitle { margin-top: 4px; font-size: 14px; color: var(--muted); }
.join-found-details { margin-top: 16px; border: 1px solid var(--border-light); border-radius: var(--radius); }
.join-detail-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.join-detail-item + .join-detail-item { border-top: 1px solid var(--border-light); }
.join-detail-icon { width: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.join-detail-content { display: flex; flex-direction: column; min-width: 0; }
.join-detail-label { font-size: 12px; color: var(--muted); }
.join-detail-value { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.join-found-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px !important; border-top: 1px solid var(--border); background: var(--surface-2); }
/* error de código */
#error-modal .modal-content { max-width: 420px; text-align: center; }
#error-modal .modal-icon { margin: 0 auto 12px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--danger-bg); color: var(--danger); font-size: 20px; }
#error-modal h2 { font-size: 20px; font-weight: 400; }
#error-modal p { margin-top: 6px; font-size: 14px; color: var(--muted); }
#error-modal .modal-actions { justify-content: center; margin: 20px 0 0; padding: 14px 24px; }
/* detalle de una actividad */
#activity-detail-modal .modal-content { max-width: 760px; }
.activity-detail-header { padding-right: 56px !important; padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.sp-detail { display: flex; align-items: center; gap: 14px; }
.sp-detail__tile { width: 40px; height: 40px; }
.sp-detail__info { flex: 1; min-width: 0; }
.sp-detail__info h2 { font-size: 22px; font-weight: var(--fw-title); line-height: 1.25; overflow-wrap: anywhere; }
.sp-detail__info p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.activity-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px !important; }
.sp-detail__stats { margin-top: 16px; }
.detail-questions { margin-top: 20px; }
.detail-questions h4 { margin-bottom: 8px; font-size: var(--fs-h3); }
.question-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-light); }
.question-number { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.question-item.correct .question-number { background: var(--success-bg); color: var(--success); }
.question-item.incorrect .question-number { background: var(--danger-bg); color: var(--danger); }
.question-content { flex: 1; min-width: 0; }
.question-text { font-size: 14px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.question-visual { margin-top: 8px; }
.question-status { display: none; }
/* respuestas del alumno (sq-*) */
.sq-options, .sq-blanks, .sq-order, .sq-pairs, .sq-timeline, .sq-word-list { display: flex; flex-direction: column; gap: 6px; }
.sq-opt, .sq-blank-row, .sq-order-item, .sq-pair, .sq-tl-item, .sq-word, .sq-generic-row {
    display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px;
    border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
}
.sq-opt.correct, .sq-blank-row.correct, .sq-order-item.correct, .sq-pair.correct, .sq-tl-item.correct, .sq-word.correct { border-color: var(--success); background: var(--success-bg); }
.sq-opt.incorrect, .sq-blank-row.incorrect, .sq-order-item.incorrect, .sq-pair.incorrect, .sq-tl-item.incorrect, .sq-word.incorrect { border-color: var(--danger); background: var(--danger-bg); }
.sq-opt.correct-ref, .sq-generic-row.correct-ref { border-style: dashed; border-color: var(--success); }
.sq-opt-letter, .sq-blank-num, .sq-order-num, .sq-tl-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.sq-tf { display: flex; gap: 8px; flex-wrap: wrap; }
.sq-tf-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 130px; height: 36px; padding: 0 14px; border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 14px; color: var(--text-secondary); }
.sq-tf-btn i { font-size: 12px; }
.sq-tf-btn.correct { border-color: var(--success); background: var(--success-bg); color: var(--text); }
.sq-tf-btn.incorrect { border-color: var(--danger); background: var(--danger-bg); color: var(--text); }
.sq-tf-btn.correct-ref { border-style: dashed; border-color: var(--success); }
.sq-blank-user { font-weight: 700; }
.sq-blank-correct { font-weight: 700; color: var(--success); }
.sq-pair-left { font-weight: 700; }
.sq-pair-correct { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--success); }
.sq-tl-date { min-width: 56px; font-size: 13px; font-weight: 700; color: var(--primary-dark); }
.sq-tl-event { flex: 1; }
.sq-categories { display: flex; flex-direction: column; gap: 8px; }
.sq-category { padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius); }
.sq-cat-name { font-size: 14px; font-weight: 700; }
.sq-cat-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sq-cat-item { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-light); border-radius: 14px; font-size: 13px; }
.sq-cat-item.correct { border-color: var(--success); background: var(--success-bg); }
.sq-cat-item.incorrect { border-color: var(--danger); background: var(--danger-bg); }
.sq-crossword-summary { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.sq-mark-words { font-size: 15px; line-height: 1.9; }
.sq-mw { padding: 1px 3px; border-radius: 3px; }
.sq-mw.correct { background: var(--success-bg); color: var(--success); font-weight: 700; }
.sq-mw.incorrect { background: var(--danger-bg); color: var(--danger); font-weight: 700; text-decoration: line-through; }
.sq-mw.missed { box-shadow: inset 0 -2px 0 var(--warning); }
.sq-open { display: flex; flex-direction: column; gap: 8px; }
.sq-open-student, .sq-open-sample { padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 14px; line-height: 1.5; }
.sq-open-sample { border-style: dashed; background: var(--surface-2); }
.sq-flashcard { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sq-generic { display: flex; flex-direction: column; gap: 6px; }
.sq-generic-label { font-size: 12px; font-weight: 700; color: var(--muted); }
/* perfil del profesor */
.teacher-profile-modal { max-width: 480px; }
.teacher-profile-header { display: flex; align-items: center; gap: 14px; padding-right: 56px !important; padding-bottom: 16px !important; border-bottom: 1px solid var(--border); }
.teacher-avatar, .student-avatar-large { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-tint-strong); color: var(--primary-deep); font-size: 18px; font-weight: 700; }
.teacher-header-info h2, .student-profile-title h2 { font-size: 20px; font-weight: 400; overflow-wrap: anywhere; }
.teacher-header-info p, .student-profile-title p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.teacher-profile-body { padding-top: 12px !important; padding-bottom: 12px !important; }
.teacher-info-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.teacher-info-item + .teacher-info-item { border-top: 1px solid var(--border-light); }
.teacher-info-icon { width: 16px; text-align: center; color: var(--muted); font-size: 13px; padding-top: 2px; }
.teacher-info-content { display: flex; flex-direction: column; min-width: 0; }
.teacher-info-label { font-size: 12px; color: var(--muted); }
.teacher-info-value { font-size: 14px; overflow-wrap: anywhere; }
.teacher-message-box { margin-top: 8px; padding: 12px 14px; border-left: 3px solid var(--primary); border-radius: var(--radius); background: var(--primary-tint); font-size: 14px; line-height: 1.5; }
.teacher-no-info { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 0; color: var(--muted); font-size: 14px; text-align: center; }
.teacher-profile-footer { display: flex; justify-content: flex-end; padding: 14px 24px !important; border-top: 1px solid var(--border); background: var(--surface-2); }
/* perfil del alumno */
.student-profile-modal { max-width: 460px; }
.student-profile-header { display: flex; align-items: center; gap: 14px; padding-right: 56px !important; padding-bottom: 16px !important; border-bottom: 1px solid var(--border); }
.profile-groups-block { padding-top: 16px !important; }
.profile-groups-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.profile-groups-count { font-weight: 400; color: var(--muted); }
.profile-groups-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profile-group-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 14px; font-size: 13px; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; }
.profile-groups-empty { font-size: 13px; color: var(--muted); }
.profile-edit { margin-top: 16px; padding-top: 12px !important; border-top: 1px solid var(--border-light); }
.profile-edit summary { font-size: 14px; font-weight: 700; color: var(--primary); cursor: pointer; }
.student-profile-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.profile-field { display: flex; flex-direction: column; gap: 6px; }
.profile-field label { font-size: 13px; font-weight: 700; }
.profile-field label i { display: none; }
.btn-profile-save { align-self: flex-start; }
.student-profile-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding: 14px 24px !important; border-top: 1px solid var(--border); background: var(--surface-2); }
.sp-logout { color: var(--danger); }
.sp-logout:hover { background: var(--danger-bg); color: var(--danger); }

/* ============ Responsive ============ */
@media (max-width: 1023px) {
    .sp-grid { grid-template-columns: minmax(0, 1fr); }
    .sp-topbar__inner { gap: 20px; }
    .sp-user__name { display: none; }
}
@media (max-width: 760px) {
    .ws-card { padding: 24px 20px; }
    .ws-tab-long { display: none; }
    .ws-tab-short { display: inline; }
    .sp-topbar__inner { flex-wrap: wrap; height: auto; padding: 0 16px; column-gap: 12px; }
    .sp-brand { height: 52px; }
    .sp-user { margin-left: auto; }
    .sp-tabs { order: 3; flex-basis: 100%; height: 44px; gap: 20px; }
    .sp-main { padding: 20px 16px 40px; gap: 20px; }
    .sp-hero h1, .sp-page-head h1 { font-size: 24px; }
    .sp-join { padding: 14px 16px; }
    .sp-join__form { flex-basis: 100%; }
    .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-stat:nth-child(3) { border-left: 0; }
    .sp-stat:nth-child(n+3) { border-top: 1px solid var(--border-light); }
    .sp-stat { padding: 12px 14px; }
    .sp-stat__value { font-size: 24px; }
    .sp-avg-filters { margin-top: -8px; }
    .sp-select { flex: 1 1 140px; min-width: 0; }
    .sp-continue { flex-wrap: wrap; padding: 14px 16px; }
    .sp-continue__cta { width: 100%; justify-content: center; }
    .sp-task { flex-wrap: wrap; padding: 12px 16px; }
    .sp-task__body { flex-basis: calc(100% - 50px); }
    .sp-task__action { margin-left: 50px; }
    .sp-groups { grid-template-columns: minmax(0, 1fr); }
    .sp-group__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-overview { flex-direction: column; align-items: flex-start; padding: 16px; }
    .sp-overview__text { width: 100%; }
    .sp-hist { flex-wrap: wrap; padding: 12px 16px; }
    .sp-hist__body { flex-basis: calc(100% - 50px); }
    .sp-hist__result { flex-direction: row; align-items: baseline; gap: 10px; margin-left: 50px; }
    .sp-detail { flex-wrap: wrap; }
    .student-profile-actions { flex-wrap: wrap; }
}