/* ════════════ GAMIFICACIÓN ════════════ */
/* Estilos para XP, niveles, insignias, racha y barras de progreso por
   asignatura. Pensados para integrarse con la paleta institucional (azul
   Nariño, dorado, teal) y los tokens de color por materia ya definidos en
   exam.css / portal.css. */

/* ─── Chip de navbar (nivel + racha) ─────────────────────────────────── */
.gam-nav-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 11px;
   border-radius: 999px;
   background: linear-gradient(135deg, #1a3a5c, #14b8a6);
   color: #fff;
   font-size: 0.75rem;
   font-weight: 800;
   letter-spacing: 0.3px;
   line-height: 1;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
   white-space: nowrap;
}
.gam-nav-streak {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding: 2px 6px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.18);
   font-weight: 800;
}
.gam-nav-level {
   font-weight: 800;
}

/* ─── Layout "simulacro + progreso" en home ──────────────────────────── */
/* Mobile-first: una sola columna (simulacro arriba, progreso debajo).
   Desktop (≥900px): dos columnas, simulacro a la izquierda (más ancho),
   progreso a la derecha (pegado al top, sin estirarse). */
.sim-with-progress {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
   align-items: start;
}
.sim-progress-aside {
   min-width: 0;
}
@media (min-width: 900px) {
   .sim-with-progress {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 24px;
   }
}

/* Título compacto dentro de la card cuando vive como aside */
.gam-progress-card-title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: 'Playfair Display', serif;
   font-size: 1.0625rem;
   font-weight: 700;
   color: #1a3a5c;
   margin-bottom: 14px;
   padding-bottom: 12px;
   border-bottom: 1px solid #e2e8f0;
}
/* Cuando el título vive dentro de la columna derecha del head, conserva
   el separador inferior (ahora actúa como divisor entre la cabecera y
   el bloque de identidad/chips) pero con menos padding para no crecer
   más que el ritmo de los chips. */
.gam-progress-right .gam-progress-card-title {
   margin-bottom: 0;
   padding-bottom: 8px;
   font-size: 1.125rem;
}
/* Bloque de identidad del estudiante (nombre + IE + ubicación) bajo
   el título "Tu progreso". Diseño compacto y discreto: el nombre con
   tipografía display destacada, IE y ubicación en filas con icono +
   texto truncado por elipsis para no romper el layout cuando el nombre
   de la IE es muy largo. */
.gam-progress-student {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 4px 0 2px;
}
.gam-progress-student-name {
   font-family: 'Playfair Display', serif;
   font-size: 1rem;
   font-weight: 700;
   color: #0f2c4a;
   line-height: 1.2;
   letter-spacing: 0.1px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.gam-progress-student-row {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.75rem;
   color: #64748b;
   font-weight: 500;
   min-width: 0;
}
.gam-progress-student-ico {
   font-size: 0.875rem;
   line-height: 1;
   flex-shrink: 0;
   opacity: 0.85;
}
.gam-progress-student-txt {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
}
.gam-progress-card-title-icon {
   font-size: 1.25rem;
}

/* ─── Card "Tu progreso" en home ─────────────────────────────────────── */
.gam-progress-card {
   background: linear-gradient(135deg, #ffffff 0%, #f7fbfa 100%);
   border: 1px solid #d8e6e3;
   border-radius: 16px;
   padding: 20px 22px;
   box-shadow: 0 2px 8px rgba(20, 184, 166, 0.06);
}
.gam-progress-head {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 18px;
   margin-bottom: 14px;
}
.gam-progress-right {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.gam-progress-level-name { display: none; }
/* Sprite del escudo de nivel — recorta UNA CARD COMPLETA de la tira
   (`niveles-gamification.webp`, 1100×322, 7 cards + 12 px de padding
   transparente top/bottom). Re-detección con PIL (ver bloque inferior
   del SDD v2.05): los cards reales miden 137–147 px en el arte fuente
   (NO 153–161 — ese rango anterior incluía los gaps oscuros). Gaps
   entre cards ≈ 12 px. Cards en el sprite escalado a 700×205 px:
     n1 [6.4, 98.6]   n2 [109.4, 195.9]  n3 [205.4, 297.6]
     n4 [304.7, 396.5] n5 [403.9, 493.5] n6 [504.4, 597.4]
     n7 [604.9, 698.1]
   Ventana visible 96×205 px (= bg_h ⇒ sin crop vertical): cada card
   queda con 1–5 px de margen lateral (que cae dentro del gap o del
   padding del sprite), sin bleed del card vecino (los centros adya-
   centes están separados ~99 px, > visible_w/2 + neighbor_card_w/2).
   Posiciones por nivel = visible_w/2 − card_center_x. */
.gam-progress-level-shield {
   position: relative;
   display: inline-block;
   width: 96px;
   height: 205px;
   border-radius: 14px;
   background-image: url('../img/portal/niveles-gamification.webp');
   background-repeat: no-repeat;
   background-size: 700px 205px;
   background-position: -5px 0;
   box-shadow: 0 6px 18px rgba(15, 44, 74, 0.25);
   flex-shrink: 0;
}
.gam-progress-level-shield[data-nivel="1"] { background-position:   -5px 0; }
.gam-progress-level-shield[data-nivel="2"] { background-position: -105px 0; }
.gam-progress-level-shield[data-nivel="3"] { background-position: -204px 0; }
.gam-progress-level-shield[data-nivel="4"] { background-position: -303px 0; }
.gam-progress-level-shield[data-nivel="5"] { background-position: -401px 0; }
.gam-progress-level-shield[data-nivel="6"] { background-position: -503px 0; }
.gam-progress-level-shield[data-nivel="7"] { background-position: -604px 0; }
.gam-progress-level-shield-num { display: none; }
/* Compat: bloque histórico (renderHistory) sigue usando el badge plano */
.gam-progress-level-num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 48px;
   height: 48px;
   padding: 0 12px;
   border-radius: 14px;
   background: linear-gradient(135deg, #1a3a5c, #0f766e);
   color: #fff;
   font-weight: 900;
   font-size: 1rem;
   letter-spacing: 0.5px;
}
.gam-progress-level-name {
   font-family: 'Playfair Display', serif;
   font-size: 1.25rem;
   color: #1a3a5c;
   font-weight: 700;
}
.gam-progress-meta {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 8px;
   font-size: 0.8125rem;
   color: #475569;
   font-weight: 600;
   align-items: center;
}
.gam-progress-xp,
.gam-progress-streak,
.gam-progress-badges {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
   border-radius: 999px;
   background: rgba(15, 118, 110, 0.08);
   color: #0f766e;
   font-weight: 700;
}
.gam-progress-streak {
   background: rgba(232, 160, 32, 0.12);
   color: #b45309;
}
.gam-progress-bar-wrap {
   height: 10px;
   border-radius: 999px;
   background: #e2e8f0;
   overflow: hidden;
}
.gam-progress-bar-fill {
   height: 100%;
   background: linear-gradient(90deg, #1a3a5c, #14b8a6);
   border-radius: 999px;
   transition: width 0.35s ease;
}
.gam-progress-next {
   font-size: 0.8125rem;
   color: #64748b;
}
.gam-progress-next strong {
   color: #1a3a5c;
}

/* Barras por materia */
.gam-subjects {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 12px;
}
.gam-subj-row {
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.gam-subj-head {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.875rem;
}
.gam-subj-icon {
   font-size: 1rem;
}
.gam-subj-name {
   flex: 1;
   color: #374151;
   font-weight: 600;
}
.gam-subj-val {
   font-family: 'Space Mono', monospace;
   font-weight: 700;
   font-size: 0.8125rem;
}
.gam-subj-bar {
   height: 8px;
   border-radius: 999px;
   background: #e2e8f0;
   overflow: hidden;
}
.gam-subj-fill {
   height: 100%;
   border-radius: 999px;
   transition: width 0.4s ease;
}
.gam-progress-foot {
   font-size: 0.75rem;
   color: #94a3b8;
   text-align: center;
   border-top: 1px dashed #e2e8f0;
   padding-top: 10px;
}
.gam-progress-foot a {
   color: #0f766e;
   font-weight: 700;
   text-decoration: none;
}
.gam-progress-foot a:hover {
   text-decoration: underline;
}
.gam-progress-empty {
   text-align: center;
   padding: 24px;
   background: #f8fafc;
   border-radius: 14px;
   border: 1px dashed #cbd5e1;
}
.gam-progress-empty-icon {
   font-size: 2.5rem;
   margin-bottom: 8px;
}
.gam-progress-empty p {
   color: #64748b;
   margin: 0;
}

/* ─── Card de resultados (post-simulacro) ────────────────────────────── */
.gam-result-card {
   margin-top: 16px;
   padding: 18px 22px;
   background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
   border: 1px solid #fde68a;
   border-radius: 14px;
}
/* Caso "intento sin respuestas → no cuenta para gamificación" */
.gam-result-skipped {
   display: flex;
   gap: 14px;
   align-items: center;
   background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
   border-color: #cbd5e1;
}
.gam-skipped-icon {
   font-size: 2rem;
   flex-shrink: 0;
}
.gam-skipped-title {
   font-weight: 800;
   color: #475569;
   font-size: 1rem;
   margin-bottom: 4px;
}
.gam-skipped-text {
   font-size: 0.875rem;
   color: #64748b;
   line-height: 1.4;
}

.gam-levelup-banner {
   display: inline-block;
   padding: 6px 14px;
   border-radius: 999px;
   background: linear-gradient(135deg, #e8a020, #f59e0b);
   color: #fff;
   font-weight: 800;
   font-size: 0.875rem;
   margin-bottom: 12px;
   box-shadow: 0 2px 8px rgba(232, 160, 32, 0.3);
}
.gam-result-row {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 10px;
}
.gam-xp-pill {
   display: inline-flex;
   align-items: baseline;
   gap: 4px;
   padding: 10px 16px;
   border-radius: 14px;
   background: linear-gradient(135deg, #0f766e, #14b8a6);
   color: #fff;
   box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}
.gam-xp-plus {
   font-family: 'Space Mono', monospace;
   font-weight: 700;
   font-size: 1.5rem;
   line-height: 1;
}
.gam-xp-label {
   font-size: 0.75rem;
   font-weight: 800;
   letter-spacing: 0.5px;
}
.gam-level-info {
   flex: 1;
   min-width: 180px;
}
.gam-level-name {
   font-family: 'Playfair Display', serif;
   color: #1a3a5c;
   font-size: 1.125rem;
   font-weight: 700;
   margin-bottom: 4px;
}
.gam-level-progress {
   display: flex;
   align-items: center;
   gap: 8px;
}
.gam-level-bar {
   flex: 1;
   height: 6px;
   background: #e2e8f0;
   border-radius: 999px;
   overflow: hidden;
}
.gam-level-fill {
   height: 100%;
   background: linear-gradient(90deg, #1a3a5c, #14b8a6);
   border-radius: 999px;
}
.gam-level-meta {
   font-family: 'Space Mono', monospace;
   font-size: 0.75rem;
   color: #64748b;
   white-space: nowrap;
}
.gam-streak {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(232, 160, 32, 0.15);
   color: #b45309;
   font-weight: 700;
   font-size: 0.875rem;
}
.gam-streak-icon {
   font-size: 1.125rem;
}
.gam-next {
   font-size: 0.875rem;
   color: #64748b;
   margin-bottom: 12px;
}
.gam-next strong {
   color: #1a3a5c;
}
.gam-new-badges-wrap {
   border-top: 1px dashed #fde68a;
   padding-top: 12px;
   margin-top: 8px;
}
.gam-new-badges-title {
   font-size: 0.875rem;
   font-weight: 800;
   color: #b45309;
   margin-bottom: 10px;
}
.gam-new-badges-grid {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}
.gam-badge-new {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 999px;
   background: linear-gradient(135deg, #fef3c7, #fffbeb);
   border: 1px solid #fcd34d;
   font-size: 0.8125rem;
   font-weight: 700;
   color: #78350f;
   animation: gam-badge-pulse 0.6s ease-out;
}
.gam-badge-icon {
   font-size: 1.125rem;
}

@keyframes gam-badge-pulse {
   0%   { transform: scale(0.85); opacity: 0; }
   60%  { transform: scale(1.08); opacity: 1; }
   100% { transform: scale(1);    opacity: 1; }
}

/* ─── Panel en histórico ─────────────────────────────────────────────── */
.gam-history-section {
   /* hereda de .history-section */
}
.gam-history-card {
   background: linear-gradient(135deg, #ffffff, #f7fbfa);
   border: 1px solid #d8e6e3;
   border-radius: 14px;
   padding: 18px 20px;
   margin-bottom: 16px;
}
.gam-history-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 12px;
}
.gam-history-level {
   display: flex;
   align-items: center;
   gap: 10px;
}
.gam-history-level-num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   height: 44px;
   padding: 0 12px;
   border-radius: 12px;
   background: linear-gradient(135deg, #1a3a5c, #0f766e);
   color: #fff;
   font-weight: 900;
   font-size: 0.875rem;
}
.gam-history-level-name {
   font-family: 'Playfair Display', serif;
   font-size: 1.125rem;
   color: #1a3a5c;
   font-weight: 700;
}
.gam-history-meta {
   display: inline-flex;
   gap: 8px;
   flex-wrap: wrap;
   font-size: 0.8125rem;
   font-weight: 600;
}
.gam-history-xp,
.gam-history-streak,
.gam-history-longest {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
   border-radius: 999px;
   background: rgba(15, 118, 110, 0.08);
   color: #0f766e;
}
.gam-history-streak {
   background: rgba(232, 160, 32, 0.12);
   color: #b45309;
}
.gam-history-longest {
   background: rgba(91, 63, 160, 0.10);
   color: #5b3fa0;
}
.gam-history-next {
   font-size: 0.8125rem;
   color: #64748b;
   margin-top: 6px;
}
.gam-history-next strong {
   color: #1a3a5c;
}

/* Galería de insignias */
.gam-badges-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 1rem;
   font-weight: 800;
   color: #1a3a5c;
   margin-bottom: 12px;
}
.gam-badges-count {
   font-family: 'Space Mono', monospace;
   font-size: 0.8125rem;
   font-weight: 700;
   color: #0f766e;
   background: rgba(15, 118, 110, 0.10);
   padding: 3px 10px;
   border-radius: 999px;
}
.gam-badges-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 10px;
}
.gam-badge-card {
   padding: 14px 10px;
   border-radius: 12px;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   text-align: center;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gam-badge-card.is-unlocked {
   background: linear-gradient(135deg, #fffbeb, #fef3c7);
   border-color: #fcd34d;
}
.gam-badge-card.is-locked {
   opacity: 0.55;
   filter: grayscale(0.5);
}
.gam-badge-card:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.gam-badge-card-icon {
   font-size: 2rem;
   margin-bottom: 6px;
}
.gam-badge-card-name {
   font-weight: 800;
   font-size: 0.875rem;
   color: #1a3a5c;
   margin-bottom: 4px;
}
.gam-badge-card-desc {
   font-size: 0.6875rem;
   color: #64748b;
   line-height: 1.35;
}
/* Barra de progreso para insignias bloqueadas con métrica acumulable
   (5 simulacros, 150 correctas, etc.). Sólo se renderiza si la insignia
   no está desbloqueada Y badgeProgress() devuelve { current, target }. */
.gam-badge-card-progress {
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px dashed #e2e8f0;
}
.gam-badge-card-progress-bar {
   height: 5px;
   background: #e2e8f0;
   border-radius: 999px;
   overflow: hidden;
   margin-bottom: 4px;
}
.gam-badge-card-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #e8a020, #f59e0b);
   border-radius: 999px;
   transition: width .35s ease;
}
.gam-badge-card-progress-text {
   font-family: 'Space Mono', monospace;
   font-size: 0.6875rem;
   font-weight: 700;
   color: #b45309;
   text-align: right;
}

/* (Eliminado) Antes en desktop, cuando "Tu progreso" iba como aside, se
   apilaba el header en columna para evitar que los 3 chips compitieran
   con el badge plano por el ancho. Con el nuevo escudo-card de 54×111
   y los chips ya en columna vertical (`gam-progress-meta`), la fila
   horizontal cabe holgadamente — y el apilar dejaba los chips colgando
   debajo del escudo en lugar de a su lado. */

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
   /* `.gam-progress-head` mantiene `flex-direction: row` también en
      mobile para que el escudo y la columna de info queden lado a lado
      (decisión 2.08). El histórico sí sigue apilando en columna porque
      su layout es distinto. */
   .gam-history-head {
      flex-direction: column;
      align-items: flex-start;
   }
   .gam-history-meta { width: 100%; }
   .gam-progress-head { gap: 12px; }
   .gam-progress-right { min-width: 0; }
   .gam-progress-meta { width: auto; }
   /* Escudo más compacto en mobile (80×170 vs 96×205 desktop). Sprite
      recalibrado a 580×170 (scale 0.527) — mismo método de centros
      reales por nivel, pero con offsets propios. */
   .gam-progress-level-shield {
      width: 80px;
      height: 170px;
      background-size: 580px 170px;
   }
   .gam-progress-level-shield[data-nivel="1"] { background-position:   -4px 0; }
   .gam-progress-level-shield[data-nivel="2"] { background-position:  -87px 0; }
   .gam-progress-level-shield[data-nivel="3"] { background-position: -168px 0; }
   .gam-progress-level-shield[data-nivel="4"] { background-position: -250px 0; }
   .gam-progress-level-shield[data-nivel="5"] { background-position: -332px 0; }
   .gam-progress-level-shield[data-nivel="6"] { background-position: -416px 0; }
   .gam-progress-level-shield[data-nivel="7"] { background-position: -500px 0; }
   /* Chips pueden envolver a 2 filas si no caben — flex-wrap ya lo
      permite, sólo reducimos el padding para mantenerlos legibles. */
   .gam-progress-xp,
   .gam-progress-streak,
   .gam-progress-badges {
      padding: 4px 8px;
      font-size: 0.75rem;
   }
   .gam-nav-chip {
      font-size: 0.6875rem;
      padding: 3px 9px;
   }
   .gam-badges-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* ─── Misiones semanales (Phase 3) ───────────────────────────────────── */
/* Vive dentro del aside "Tu progreso", debajo de las barras por materia.
   El margin-top separa visualmente de la card de progreso. */
.gam-missions-wrap {
   display: grid;
   gap: 12px;
   padding: 18px 20px;
   margin-top: 16px;
   background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
   border: 1px solid #fde68a;
   border-radius: 16px;
}
.gam-missions-card-title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-family: 'Playfair Display', serif;
   font-size: 1.0625rem;
   font-weight: 700;
   color: #92400e;
   padding-bottom: 10px;
   border-bottom: 1px solid #fde68a;
}
.gam-missions-card-title-icon {
   font-size: 1.25rem;
}
.gam-missions-header {
   font-weight: 800;
   color: #92400e;
   font-size: 0.875rem;
}
.gam-missions-foot {
   font-size: 0.75rem;
   color: #94a3b8;
   text-align: center;
   border-top: 1px dashed #fde68a;
   padding-top: 8px;
   margin-top: 4px;
}
.gam-mission-card {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 12px 14px;
   transition: border-color 0.2s ease;
}
.gam-mission-card.is-completed {
   background: linear-gradient(135deg, #d1fae5, #a7f3d0);
   border-color: #10b981;
}
.gam-mission-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   margin-bottom: 8px;
}
.gam-mission-label {
   font-weight: 700;
   color: #1f2937;
   font-size: 0.875rem;
   flex: 1;
}
.gam-mission-status {
   font-family: 'Space Mono', monospace;
   font-size: 0.75rem;
   font-weight: 800;
   color: #92400e;
   white-space: nowrap;
}
.gam-mission-card.is-completed .gam-mission-status {
   color: #065f46;
}
.gam-mission-bar {
   height: 6px;
   background: #e2e8f0;
   border-radius: 999px;
   overflow: hidden;
}
.gam-mission-fill {
   height: 100%;
   background: linear-gradient(90deg, #f59e0b, #fbbf24);
   border-radius: 999px;
   transition: width 0.35s ease;
}
.gam-mission-card.is-completed .gam-mission-fill {
   background: linear-gradient(90deg, #10b981, #34d399);
}

/* Misiones completadas en card de resultados */
.gam-missions-done-wrap {
   border-top: 1px dashed #fde68a;
   padding-top: 12px;
   margin-top: 8px;
}
.gam-missions-done-title {
   font-size: 0.875rem;
   font-weight: 800;
   color: #b45309;
   margin-bottom: 10px;
}
.gam-missions-done-list {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}
.gam-mission-done-chip {
   display: inline-flex;
   align-items: center;
   padding: 6px 12px;
   border-radius: 999px;
   background: linear-gradient(135deg, #d1fae5, #a7f3d0);
   border: 1px solid #10b981;
   color: #065f46;
   font-weight: 700;
   font-size: 0.8125rem;
}

/* ─── Coach por competencia (Phase 4) ────────────────────────────────── */
.gam-coach-card {
   margin-top: 16px;
   padding: 16px 20px;
   background: linear-gradient(135deg, #ecfeff 0%, #ffffff 100%);
   border: 1px solid #a5f3fc;
   border-radius: 14px;
}
.gam-coach-title {
   font-family: 'Playfair Display', serif;
   color: #0e7490;
   font-size: 1.0625rem;
   font-weight: 700;
   margin-bottom: 12px;
   padding-bottom: 10px;
   border-bottom: 1px solid #cffafe;
}
.gam-coach-row {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 10px 0;
}
.gam-coach-row + .gam-coach-row {
   border-top: 1px dashed #cffafe;
}
.gam-coach-icon {
   font-size: 1.5rem;
   flex-shrink: 0;
}
.gam-coach-body {
   flex: 1;
}
.gam-coach-label {
   font-size: 0.75rem;
   color: #64748b;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 4px;
}
.gam-coach-detail {
   font-size: 0.9375rem;
   color: #155e75;
   margin-bottom: 4px;
}
.gam-coach-meta {
   font-size: 0.8125rem;
   color: #64748b;
}
.gam-coach-link {
   color: #0e7490;
   font-weight: 700;
   text-decoration: none;
}
.gam-coach-link:hover {
   text-decoration: underline;
}
.gam-coach-foot {
   margin-top: 8px;
   padding-top: 10px;
   border-top: 1px dashed #cffafe;
   font-size: 0.75rem;
   color: #94a3b8;
   text-align: center;
}

/* Sección en histórico — más detallada con columnas */
.gam-coach-section { /* hereda de .history-section */ }
.gam-coach-weeksubj {
   background: #fef3c7;
   border: 1px solid #fde68a;
   border-radius: 10px;
   padding: 10px 14px;
   margin-bottom: 14px;
   color: #78350f;
   font-size: 0.875rem;
}
.gam-coach-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   margin-bottom: 14px;
}
@media (min-width: 760px) {
   .gam-coach-grid { grid-template-columns: 1fr 1fr; }
}
.gam-coach-col-title {
   font-weight: 800;
   color: #1f2937;
   font-size: 0.875rem;
   margin-bottom: 8px;
}
.gam-coach-item {
   background: #ffffff;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   padding: 10px 12px;
   margin-bottom: 8px;
}
/* Chip de materia sobre cada competencia del coach (v0.10.43). Color
   propio de cada asignatura vía custom props --subj-light / --subj-main
   inyectadas inline desde history.js — permite override limpio en dark
   theme sin !important. */
.gam-coach-item-subj {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 2px 9px 2px 7px;
   border-radius: 999px;
   background: var(--subj-light, #f1f5f9);
   color: var(--subj-main, #475569);
   border: 1px solid color-mix(in srgb, var(--subj-main, #475569) 20%, transparent);
   font-size: 0.6875rem;
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   line-height: 1.4;
   margin-bottom: 6px;
   max-width: 100%;
}
.gam-coach-item-subj-icon {
   font-size: 0.875rem;
   line-height: 1;
   text-transform: none;
}
.gam-coach-item-name {
   font-weight: 700;
   color: #1f2937;
   font-size: 0.875rem;
   margin-bottom: 4px;
   line-height: 1.3;
}
.gam-coach-item-meta {
   font-family: 'Space Mono', monospace;
   font-size: 0.75rem;
   color: #64748b;
   margin-bottom: 6px;
}
.gam-coach-item-bar {
   height: 5px;
   background: #e2e8f0;
   border-radius: 999px;
   overflow: hidden;
}
.gam-coach-item-fill {
   height: 100%;
   border-radius: 999px;
}
.gam-coach-item-fill-weak {
   background: linear-gradient(90deg, #f59e0b, #fb923c);
}
.gam-coach-item-fill-strong {
   background: linear-gradient(90deg, #10b981, #34d399);
}
.gam-coach-empty {
   font-size: 0.8125rem;
   color: #94a3b8;
   font-style: italic;
   padding: 12px;
   text-align: center;
}
.gam-coach-section-foot {
   font-size: 0.75rem;
   color: #94a3b8;
   text-align: center;
   border-top: 1px dashed #e2e8f0;
   padding-top: 10px;
}

/* ════════════ DARK THEME — gamificación ════════════ */
/* Overrides para que las cards "Tu progreso", "+XP", galería de insignias y
   panel del histórico se vean bien con data-theme="dark" del portal. */
[data-theme="dark"] .gam-progress-card,
[data-theme="dark"] .gam-history-card {
   background: linear-gradient(135deg, #1e293b 0%, #1a2540 100%);
   border-color: #334155;
   box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
[data-theme="dark"] .gam-progress-card-title {
   color: #e2e8f0;
   border-bottom-color: #334155;
}
[data-theme="dark"] .gam-progress-student-name {
   color: #f1f5f9;
}
[data-theme="dark"] .gam-progress-student-row {
   color: #94a3b8;
}
[data-theme="dark"] .gam-progress-level-name,
[data-theme="dark"] .gam-history-level-name {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-progress-meta,
[data-theme="dark"] .gam-history-meta {
   color: #cbd5e1;
}
[data-theme="dark"] .gam-progress-xp,
[data-theme="dark"] .gam-progress-badges,
[data-theme="dark"] .gam-history-xp {
   background: rgba(20, 184, 166, 0.18);
   color: #5eead4;
}
[data-theme="dark"] .gam-progress-streak,
[data-theme="dark"] .gam-history-streak {
   background: rgba(245, 181, 58, 0.18);
   color: #fcd34d;
}
[data-theme="dark"] .gam-history-longest {
   background: rgba(139, 92, 246, 0.18);
   color: #c4b5fd;
}
[data-theme="dark"] .gam-progress-bar-wrap,
[data-theme="dark"] .gam-subj-bar,
[data-theme="dark"] .gam-level-bar {
   background: #334155;
}
[data-theme="dark"] .gam-progress-next,
[data-theme="dark"] .gam-history-next {
   color: #94a3b8;
}
[data-theme="dark"] .gam-progress-next strong,
[data-theme="dark"] .gam-history-next strong {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-subj-head {
   color: #cbd5e1;
}
[data-theme="dark"] .gam-subj-name {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-progress-foot {
   color: #94a3b8;
   border-top-color: #334155;
}
[data-theme="dark"] .gam-progress-foot a {
   color: #5eead4;
}
[data-theme="dark"] .gam-progress-empty {
   background: #1e293b;
   border-color: #475569;
}
[data-theme="dark"] .gam-progress-empty p {
   color: #cbd5e1;
}

/* Card de resultados (+XP) en tema oscuro */
[data-theme="dark"] .gam-result-card {
   background: linear-gradient(135deg, #2a1d05 0%, #1e293b 100%);
   border-color: #5a4218;
}
[data-theme="dark"] .gam-level-name {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-level-meta {
   color: #94a3b8;
}
[data-theme="dark"] .gam-next {
   color: #94a3b8;
}
[data-theme="dark"] .gam-next strong {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-new-badges-wrap {
   border-top-color: #5a4218;
}
[data-theme="dark"] .gam-new-badges-title {
   color: #fcd34d;
}
[data-theme="dark"] .gam-badge-new {
   background: linear-gradient(135deg, #3d2f15, #2a1d05);
   border-color: #92581e;
   color: #fde68a;
}
[data-theme="dark"] .gam-result-skipped {
   background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
   border-color: #475569;
}
[data-theme="dark"] .gam-skipped-title {
   color: #cbd5e1;
}
[data-theme="dark"] .gam-skipped-text {
   color: #94a3b8;
}

/* Galería de insignias en histórico */
[data-theme="dark"] .gam-badges-title {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-badges-count {
   background: rgba(20, 184, 166, 0.18);
   color: #5eead4;
}
[data-theme="dark"] .gam-badge-card {
   background: #1e293b;
   border-color: #334155;
}
[data-theme="dark"] .gam-badge-card.is-unlocked {
   background: linear-gradient(135deg, #3d2f15, #2a1d05);
   border-color: #92581e;
}
[data-theme="dark"] .gam-badge-card-name {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-badge-card-desc {
   color: #94a3b8;
}
[data-theme="dark"] .gam-badge-card-progress {
   border-top-color: #334155;
}
[data-theme="dark"] .gam-badge-card-progress-bar {
   background: #1e293b;
}
[data-theme="dark"] .gam-badge-card-progress-text {
   color: #fbbf24;
}
[data-theme="dark"] .gam-badge-card:hover {
   box-shadow: 0 4px 12px rgba(0,0,0,.5);
}

/* Misiones — dark */
[data-theme="dark"] .gam-missions-wrap {
   background: linear-gradient(135deg, #2a1d05 0%, #1e293b 100%);
   border-color: #5a4218;
}
[data-theme="dark"] .gam-missions-card-title {
   color: #fcd34d;
   border-bottom-color: #5a4218;
}
[data-theme="dark"] .gam-missions-header {
   color: #fcd34d;
}
[data-theme="dark"] .gam-missions-foot {
   color: #94a3b8;
   border-top-color: #5a4218;
}
[data-theme="dark"] .gam-mission-card {
   background: #1e293b;
   border-color: #334155;
}
[data-theme="dark"] .gam-mission-card.is-completed {
   background: linear-gradient(135deg, #064e3b, #065f46);
   border-color: #10b981;
}
[data-theme="dark"] .gam-mission-label {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-mission-status {
   color: #fcd34d;
}
[data-theme="dark"] .gam-mission-card.is-completed .gam-mission-status {
   color: #a7f3d0;
}
[data-theme="dark"] .gam-mission-bar {
   background: #334155;
}
[data-theme="dark"] .gam-missions-done-wrap {
   border-top-color: #5a4218;
}
[data-theme="dark"] .gam-missions-done-title {
   color: #fcd34d;
}
[data-theme="dark"] .gam-mission-done-chip {
   background: linear-gradient(135deg, #064e3b, #065f46);
   border-color: #10b981;
   color: #a7f3d0;
}

/* Coach — dark */
[data-theme="dark"] .gam-coach-card {
   background: linear-gradient(135deg, #0e2a35 0%, #1e293b 100%);
   border-color: #155e75;
}
[data-theme="dark"] .gam-coach-title {
   color: #67e8f9;
   border-bottom-color: #155e75;
}
[data-theme="dark"] .gam-coach-row + .gam-coach-row {
   border-top-color: #155e75;
}
[data-theme="dark"] .gam-coach-label {
   color: #94a3b8;
}
[data-theme="dark"] .gam-coach-detail {
   color: #67e8f9;
}
[data-theme="dark"] .gam-coach-meta {
   color: #94a3b8;
}
[data-theme="dark"] .gam-coach-link {
   color: #67e8f9;
}
[data-theme="dark"] .gam-coach-foot {
   color: #64748b;
   border-top-color: #155e75;
}
[data-theme="dark"] .gam-coach-weeksubj {
   background: #2a1d05;
   border-color: #5a4218;
   color: #fcd34d;
}
[data-theme="dark"] .gam-coach-col-title {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-coach-item {
   background: #1e293b;
   border-color: #334155;
}
[data-theme="dark"] .gam-coach-item-name {
   color: #e2e8f0;
}
[data-theme="dark"] .gam-coach-item-meta {
   color: #94a3b8;
}
[data-theme="dark"] .gam-coach-item-bar {
   background: #334155;
}
/* Dark theme: el fondo light pastel del chip (--subj-light) se mezcla mal
   con el card oscuro; usamos un fondo translúcido del color principal y
   subimos el color del texto a una versión más clara. */
[data-theme="dark"] .gam-coach-item-subj {
   background: color-mix(in srgb, var(--subj-main, #475569) 22%, transparent);
   color: color-mix(in srgb, var(--subj-main, #475569) 35%, #ffffff);
   border-color: color-mix(in srgb, var(--subj-main, #475569) 50%, transparent);
}
[data-theme="dark"] .gam-coach-section-foot {
   color: #64748b;
   border-top-color: #334155;
}