/* ==========================================================================
   KlarARIA v3 — Shell compartido para fichas (alumno + asignatura)
   Derivado del mockup aprobado `klararia_redesign_v3.html`.
   ========================================================================== */

/* ── 1. DESIGN TOKENS (única fuente de verdad — demo klararia-redesign-demo.html) ── */
:root {
  /* Base / canvas */
  --bg-canvas:        #EDEAE3;
  --bg-app:           #F7F5F2;
  --bg-app-warm:      #F0EDE8;
  --bg-card:          #FFFFFF;
  --bg-soft:          #FAF8F4;

  /* Tipografía */
  --text-strong:      #2D2A27;
  --text-body:        #4A4642;
  --text-soft:        #756F69;
  --text-muted:       #A39D96;

  /* Primary (azul sereno · navegación y acciones principales) */
  --primary:          #3D5A80;
  --primary-soft:     #5B7EA1;
  --primary-deep:     #2E476B;
  --primary-wash:     #E8EEF4;
  --primary-wash-2:   #D9E3EF;

  /* Progress (verde salvia · logros, avance positivo) */
  --progress:         #6B9080;
  --progress-deep:    #4F6E5E;
  --progress-wash:    #E5F0EB;

  /* Attention (ocre cálido · foco y prioridades, no alarma) */
  --attention:        #D4A574;
  --attention-deep:   #8B6E3A;
  --attention-wash:   #FBF3EB;

  /* Alert (terracota suave · sólo para cosas urgentes reales) */
  --alert:            #C27C5A;
  --alert-deep:       #9B4332;
  --alert-wash:       #FBEEE6;

  /* Bordes */
  --border-soft:      rgba(45, 42, 39, 0.08);
  --border-med:       rgba(45, 42, 39, 0.14);
  --border-strong:    rgba(45, 42, 39, 0.22);

  /* Sombras */
  --shadow-card:      0 1px 3px rgba(45, 42, 39, 0.05), 0 1px 2px rgba(45, 42, 39, 0.03);
  --shadow-raised:    0 6px 20px rgba(45, 42, 39, 0.09), 0 2px 6px rgba(45, 42, 39, 0.04);
  --shadow-viewport:  0 24px 64px rgba(45, 42, 39, 0.12), 0 8px 24px rgba(45, 42, 39, 0.05);

  /* Radios */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* Espaciado (escala 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Tipografía stack */
  --font-body:    'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Focus ring accesible */
  --focus-ring:   0 0 0 3px rgba(61, 90, 128, 0.28);

  /* ── Aliases de compatibilidad (usados por templates y CSS heredado) ── */
  --sidebar-width:       252px;
  --base-bg:             var(--bg-app);
  --base-bg-warm:        var(--bg-app-warm);
  --base-text:           var(--text-strong);
  --base-text-soft:      var(--text-soft);
  --base-text-muted:     var(--text-muted);
  --card-bg:             var(--bg-card);
  --primary-light:       var(--primary-wash);
  --primary-dark:        var(--primary-soft);
  --progress-light:      var(--progress-wash);
  --progress-glow:       rgba(107, 144, 128, 0.25);
  --attention-light:     var(--attention-wash);
  --attention-soft:      #E8C4A0;
  --alert-light:         var(--alert-wash);
  --almost:              #C4A87C;
  --almost-light:        #F9F3E9;
  --concept:             #A0887A;
  --concept-light:       #F3EEEA;
  --border-med:          rgba(45, 42, 39, 0.14);
  --card-border:         var(--border-soft);
  --card-shadow:         var(--shadow-card);
  --card-shadow-hover:   var(--shadow-raised);
  --radius:              14px;
  --success:             var(--progress);
  --success-light:       var(--progress-wash);
  --accent:              var(--attention);
  --accent-light:        var(--attention-wash);
  --danger:              var(--alert);
  --danger-light:        var(--alert-wash);
  --text-main:           var(--text-strong);
  --text-dark:           var(--text-strong);
  --text-medium:         var(--text-soft);
  --text-light:          var(--text-muted);
  --body-bg:             var(--bg-app);
  --sidebar-bg:          var(--bg-card);
  --sidebar-hover:       var(--bg-app);
  --sidebar-text:        var(--text-soft);
  --sidebar-active-bg:   var(--primary-wash);
  --sidebar-active-text: var(--primary);
  --font-main:           'Atkinson Hyperlegible', sans-serif;
  --font-dyslexia:       'OpenDyslexic', serif;
  --font-size-base:      1rem;
  --line-height:         1.65;
  --letter-spacing:      0.01em;
}

/* ─────────────────────────────────────────────
   PAGE SHELL (container + header + crumbs)
   ───────────────────────────────────────────── */
.kla-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0 72px;
}
.kla-crumbs {
  font-size: 12px;
  color: var(--base-text-muted);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kla-crumbs a {
  color: var(--base-text-soft);
  text-decoration: none;
  font-weight: 700;
}
.kla-crumbs a:hover { color: var(--primary); }
.kla-crumbs .sep { color: var(--base-text-muted); opacity: .55; }

.kla-hero {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.kla-hero-avatar {
  width: 62px; height: 62px;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  flex-shrink: 0;
}
.kla-hero-info { flex: 1; min-width: 0; }
.kla-hero-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--base-text);
  margin: 0 0 4px;
  line-height: 1.2;
}
.kla-hero-meta {
  font-size: 13px;
  color: var(--base-text-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kla-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--base-text-muted); display: inline-block; }
.kla-hero-stats {
  display: flex;
  gap: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.kla-hero-stat { text-align: center; }
.kla-hero-stat-value {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--base-text);
  line-height: 1.1;
}
.kla-hero-stat-value.good { color: var(--progress); }
.kla-hero-stat-label {
  font-size: 11px;
  color: var(--base-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-top: 2px;
}
.kla-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   TABS
   ───────────────────────────────────────────── */
.kla-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 24px;
  position: relative;
  flex-wrap: wrap;
}
.kla-tab {
  padding: 11px 18px 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--base-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.kla-tab i { font-size: 12px; opacity: 0.75; }
.kla-tab:hover { color: var(--base-text-soft); }
.kla-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.kla-tab.active i { opacity: 1; }
.kla-tab-badge {
  display: inline-block;
  padding: 1px 7px;
  background: var(--border-soft);
  color: var(--base-text-soft);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  margin-left: 2px;
}
.kla-tab.active .kla-tab-badge {
  background: var(--primary-light);
  color: var(--primary);
}
.kla-tab-panel { display: none; }
.kla-tab-panel.active { display: block; animation: klaFadeIn .18s ease-out; }
@keyframes klaFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   SECTIONS
   ───────────────────────────────────────────── */
.kla-section { margin-bottom: 32px; }
.kla-section:last-child { margin-bottom: 0; }
.kla-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
  gap: 12px;
}
.kla-section-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--base-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.kla-section-title .kla-hint {
  font-size: 10px;
  font-weight: 700;
  color: var(--base-text-muted);
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  background: var(--base-bg-warm);
  border-radius: var(--radius-pill);
}
.kla-section-action {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kla-section-action:hover { color: var(--primary-deep); }

/* ─────────────────────────────────────────────
   CARDS + BUTTONS
   ───────────────────────────────────────────── */
.kla-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.kla-card-padded { padding: 20px 24px; }

.kla-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.2;
  white-space: nowrap;
}
.kla-btn i { font-size: 11px; }
.kla-btn-primary { background: var(--primary); color: #fff; }
.kla-btn-primary:hover { background: var(--primary-deep); color: #fff; }
.kla-btn-secondary {
  background: var(--card-bg);
  color: var(--base-text);
  border-color: var(--border-med);
}
.kla-btn-secondary:hover { border-color: var(--base-text-muted); color: var(--base-text); }
.kla-btn-ghost { background: transparent; color: var(--base-text-soft); }
.kla-btn-ghost:hover { background: var(--base-bg-warm); color: var(--base-text); }
.kla-btn-success { background: var(--progress); color: #fff; }
.kla-btn-success:hover { background: var(--progress-deep); color: #fff; }
.kla-btn-sm { padding: 6px 11px; font-size: 12px; }
.kla-btn-lg { padding: 12px 20px; font-size: 14px; }

.kla-icon-btn {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--base-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.kla-icon-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ─────────────────────────────────────────────
   MISSION INFO (informativo — qué hace el alumno)
   ───────────────────────────────────────────── */
.kla-mission-info {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--progress);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow-card);
}
.kla-mission-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--progress-light);
  color: var(--progress);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.kla-mission-body { flex: 1; min-width: 0; }
.kla-mission-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--progress);
  margin-bottom: 3px;
}
.kla-mission-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--base-text);
  margin: 0 0 2px;
}
.kla-mission-meta { font-size: 12px; color: var(--base-text-soft); }
.kla-mission-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Variante sin misión activa */
.kla-mission-info.empty { border-left-color: var(--border-med); }
.kla-mission-info.empty .kla-mission-icon { background: var(--base-bg-warm); color: var(--base-text-muted); }
.kla-mission-info.empty .kla-mission-label { color: var(--base-text-muted); }

/* ─────────────────────────────────────────────
   ALERT LIST (accionable tutor — invitacional)
   ───────────────────────────────────────────── */
.kla-alerts { display: flex; flex-direction: column; gap: 10px; }
.kla-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.kla-alert-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.kla-alert.attention .kla-alert-icon { background: var(--attention-light); color: var(--attention-deep); }
.kla-alert.soft .kla-alert-icon      { background: var(--primary-light);  color: var(--primary); }
.kla-alert.warm .kla-alert-icon      { background: var(--alert-light);    color: var(--alert-deep); }
.kla-alert.good .kla-alert-icon      { background: var(--progress-light); color: var(--progress-deep); }
.kla-alert-body { flex: 1; min-width: 0; }
.kla-alert-title { font-size: 14px; font-weight: 700; color: var(--base-text); margin-bottom: 1px; }
.kla-alert-sub   { font-size: 12px; color: var(--base-text-soft); line-height: 1.5; }
.kla-alert-actions { flex-shrink: 0; display: flex; gap: 6px; }

/* ─────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────── */
.kla-empty {
  padding: 32px 24px;
  text-align: center;
  background: var(--card-bg);
  border: 1px dashed var(--border-med);
  border-radius: var(--radius-lg);
  color: var(--base-text-muted);
}
.kla-empty i { font-size: 22px; color: var(--base-text-muted); margin-bottom: 10px; display: block; }
.kla-empty-title { font-weight: 800; color: var(--base-text-soft); margin-bottom: 4px; font-size: 14px; }
.kla-empty-sub   { font-size: 12px; line-height: 1.5; }

/* ─────────────────────────────────────────────
   STATUS PILLS (semáforo)
   ───────────────────────────────────────────── */
.kla-status-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.kla-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  color: var(--base-text-soft);
  cursor: pointer;
  text-decoration: none;
}
.kla-status-pill:hover { border-color: var(--border-med); }
.kla-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.kla-status-dot.green  { background: var(--progress); }
.kla-status-dot.yellow { background: var(--attention); }
.kla-status-dot.red    { background: var(--alert); }
.kla-status-dot.gray   { background: var(--base-text-muted); }
.kla-status-pill.red    { color: var(--alert-deep);      border-color: rgba(194, 124, 90, 0.30); background: var(--alert-light); }
.kla-status-pill.yellow { color: var(--attention-deep);  border-color: rgba(212, 165, 116, 0.32); background: var(--attention-light); }
.kla-status-pill.green  { color: var(--progress-deep); }

/* ─────────────────────────────────────────────
   SUPERVISION BLOCK
   ───────────────────────────────────────────── */
.kla-supervision {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
}
.kla-supervision-facts {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.kla-supervision-facts li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  color: var(--base-text-soft);
}
.kla-supervision-facts li i {
  width: 18px;
  color: var(--base-text-muted);
  font-size: 11px;
  text-align: center;
}
.kla-supervision-facts li b { color: var(--base-text); font-weight: 700; }
.kla-supervision-facts li.warn i { color: var(--alert); }
.kla-supervision-facts li.good i { color: var(--progress); }

/* ─────────────────────────────────────────────
   QUICK ACTIONS
   ───────────────────────────────────────────── */
.kla-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 18px;
  background: var(--base-bg-warm);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-med);
}
.kla-quick-label {
  grid-column: 1 / -1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--base-text-muted);
  margin-bottom: 4px;
}
.kla-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--base-text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.kla-quick-btn:hover { border-color: var(--primary); color: var(--primary); }
.kla-quick-btn i { font-size: 18px; color: var(--primary); }

/* ─────────────────────────────────────────────
   SUBJECT GRID (alumno > asignaturas)
   ───────────────────────────────────────────── */
.kla-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.kla-filter-chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  color: var(--base-text-soft);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.kla-filter-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.kla-filter-chip:hover:not(.active) { border-color: var(--border-med); }

.kla-subj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.kla-subj-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  padding-right: 44px; /* space for absolute-positioned actions */
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--base-text);
  transition: border-color .15s, box-shadow .15s;
  position: relative;
  min-width: 0;
}
.kla-subj-card:hover {
  border-color: var(--border-med);
  color: var(--base-text);
  box-shadow: var(--shadow-viewport);
}
.kla-subj-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.kla-subj-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.kla-subj-name {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--base-text);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.kla-subj-trend {
  font-size: 11px;
  color: var(--base-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.kla-subj-trend.up   { color: var(--progress); }
.kla-subj-trend.down { color: var(--alert); }
.kla-subj-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--base-text-muted);
}
.kla-subj-mean {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--base-text);
  line-height: 1;
}
.kla-subj-mean.red    { color: var(--alert-deep); }
.kla-subj-mean.yellow { color: var(--attention-deep); }
.kla-subj-mean.green  { color: var(--progress); }
.kla-subj-mean-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-top: 1px;
}
.kla-subj-stats-mini {
  margin-left: auto;
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--base-text-soft);
}
.kla-subj-stats-mini span { display: inline-flex; align-items: center; gap: 4px; }
.kla-subj-stats-mini i { font-size: 10px; color: var(--base-text-muted); }
.kla-subj-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--attention-light);
  color: var(--attention-deep);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.kla-subj-badge.kla-danger { background: var(--alert-light);    color: var(--alert-deep); }
.kla-subj-badge.ok    { background: var(--progress-light); color: var(--progress-deep); }

/* Card priority border — solo ATENCIÓN */
.kla-subj-card.kla-card--red    { border-left: 3px solid var(--alert); }

/* Global content constraint */
.content-area {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ─────────────────────────────────────────────
   NOTAS OFICIALES (tabla)
   ───────────────────────────────────────────── */
.kla-grades-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.kla-grades-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.kla-grades-table thead th {
  background: var(--base-bg-warm);
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--base-text-soft);
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.kla-grades-table thead th:first-child { text-align: left; }
.kla-grades-table tbody td {
  padding: 13px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
  color: var(--base-text);
  vertical-align: middle;
}
.kla-grades-table tbody tr:last-child td { border-bottom: 0; }
.kla-grades-table tbody td:first-child { text-align: left; font-weight: 700; }
.kla-grade-val { font-family: var(--font-heading); font-weight: 800; }
.kla-grade-val.pass { color: var(--base-text); }
.kla-grade-val.fail { color: var(--alert-deep); }
.kla-grade-val.high { color: var(--progress); }
.kla-grade-empty    { color: var(--base-text-muted); }
.kla-grade-recup {
  font-size: 11px;
  color: var(--progress);
  display: block;
  margin-top: 2px;
  font-weight: 700;
}
.kla-grade-recup s { color: var(--alert); text-decoration: line-through; margin-right: 4px; font-weight: 600; }
.kla-subject-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kla-subject-cell .kla-subj-icon-sm {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.kla-comment-row td {
  background: var(--base-bg-warm);
  padding: 10px 18px 14px 60px !important;
  font-size: 12px !important;
  color: var(--base-text-soft) !important;
  text-align: left !important;
  font-style: italic;
  border-bottom: 1px solid var(--border-soft) !important;
}
.kla-comment-row td i {
  margin-right: 6px;
  color: var(--attention);
  font-style: normal;
}

/* ─────────────────────────────────────────────
   INFORMES TIMELINE
   ───────────────────────────────────────────── */
.kla-timeline {
  position: relative;
  padding-left: 32px;
}
.kla-timeline::before {
  content: "";
  position: absolute;
  left: 12px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border-soft);
}
.kla-timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.kla-timeline-item:last-child { padding-bottom: 0; }
.kla-timeline-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 3px solid var(--primary);
}
.kla-timeline-item.type-medical::before { border-color: var(--attention); }
.kla-timeline-item.type-school::before  { border-color: var(--progress); }
.kla-timeline-item.type-diverg::before  { border-color: var(--alert); }
.kla-timeline-date {
  font-size: 11px;
  color: var(--base-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-bottom: 6px;
}
.kla-timeline-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.kla-timeline-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.kla-timeline-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--base-bg-warm);
  color: var(--base-text-soft);
}
.kla-timeline-type.medical { background: var(--attention-light); color: var(--attention-deep); }
.kla-timeline-type.school  { background: var(--progress-light);  color: var(--progress-deep); }
.kla-timeline-type.diverg  { background: var(--alert-light);     color: var(--alert-deep); }
.kla-timeline-card h4 {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--base-text);
  margin: 0;
}
.kla-timeline-summary {
  font-size: 13px;
  color: var(--base-text-soft);
  line-height: 1.6;
  margin-top: 4px;
}
.kla-timeline-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--base-text-muted);
  flex-wrap: wrap;
}
.kla-timeline-foot a { color: var(--primary); text-decoration: none; font-weight: 700; }
.kla-timeline-foot a:hover { color: var(--primary-deep); }

/* ─────────────────────────────────────────────
   SUBJECT HERO (ficha asignatura)
   ───────────────────────────────────────────── */
.kla-hero-subject {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 20px;
}
.kla-hero-subject-top {
  padding: 20px 24px 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.kla-hero-subject-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.kla-hero-subject-info { flex: 1; min-width: 0; }
.kla-hero-subject-info h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--base-text);
  margin: 0 0 2px;
}
.kla-hero-subject-meta {
  font-size: 13px;
  color: var(--base-text-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kla-hero-subject-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.kla-hero-subject-msg {
  padding: 0 24px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--base-text);
  line-height: 1.5;
}
.kla-hero-subject-msg i { color: var(--attention-deep); }
.kla-hero-subject-next {
  padding: 8px 12px;
  background: #FFF0F0;
  border: 1px solid rgba(200, 80, 80, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kla-hero-subject-next-date {
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.kla-hero-subject-next-date .day {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-strong);
}
.kla-hero-subject-next-date .month {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-top: 1px;
}
.kla-hero-subject-next-body { flex: 1; min-width: 0; }
.kla-hero-subject-next-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.kla-hero-subject-next-label i { margin-right: 3px; }
.kla-hero-subject-next-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--base-text);
  margin-top: 1px;
}
.kla-hero-subject-next-countdown {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  background: var(--base-bg);
  color: var(--text-soft);
}
.kla-hero-subject-next.urgent .kla-hero-subject-next-countdown {
  background: var(--alert-wash, #fde8e8);
  color: var(--alert);
}
.kla-hero-subject-next.calm .kla-hero-subject-next-countdown {
  background: var(--progress-light);
  color: var(--progress-deep);
}
/* ── Plan list (subject detail) ── */
.kla-plan-list { display: flex; flex-direction: column; gap: 6px; }
.kla-plan-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-decoration: none; color: inherit;
  transition: border-color .15s;
}
.kla-plan-item:hover { border-color: var(--primary); }
.kla-plan-item-icon { font-size: 16px; color: var(--primary); flex-shrink: 0; }
.kla-plan-item-body { flex: 1; min-width: 0; }
.kla-plan-item-title { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.kla-plan-item-meta { font-size: 11px; color: var(--base-text-muted); margin-top: 1px; }

.kla-hero-subject-weak {
  padding: 14px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kla-hero-subject-weak-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--base-text-muted);
}
.kla-weak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  background: var(--alert-light);
  color: var(--alert-deep);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(194, 124, 90, 0.18);
}
.kla-weak-chip .count {
  background: rgba(194, 124, 90, 0.2);
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
}

/* ─────────────────────────────────────────────
   STATUS GRID (asignatura > resumen)
   ───────────────────────────────────────────── */
.kla-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.kla-status-tile {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.kla-status-tile-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--base-text-muted);
}
.kla-status-tile-value {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--base-text);
  line-height: 1.05;
}
.kla-status-tile-value.high { color: var(--progress); }
.kla-status-tile-value.mid  { color: var(--attention-deep); }
.kla-status-tile-value.low  { color: var(--alert-deep); }
.kla-status-tile-sub {
  font-size: 11px;
  color: var(--base-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.kla-status-tile-sub .trend-up   { color: var(--progress); }
.kla-status-tile-sub .trend-down { color: var(--alert); }

/* Recommendations block (primary-anchored) */
.kla-reco-block {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.kla-reco-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kla-reco-sub {
  font-size: 12px;
  color: var(--base-text-muted);
  margin-bottom: 14px;
}
.kla-reco-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}
.kla-reco-item:first-of-type { border-top: 0; }
.kla-reco-item-body { flex: 1; min-width: 0; }
.kla-reco-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--base-text);
  margin-bottom: 1px;
}
.kla-reco-item-desc {
  font-size: 12px;
  color: var(--base-text-soft);
  line-height: 1.45;
}

/* ─────────────────────────────────────────────
   CALENDAR LIST
   ───────────────────────────────────────────── */
.kla-cal-list {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.kla-cal-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.kla-cal-item:last-child { border-bottom: 0; }
.kla-cal-date {
  flex-shrink: 0;
  width: 54px;
  text-align: center;
  background: var(--base-bg-warm);
  border-radius: var(--radius-sm);
  padding: 6px 0;
}
.kla-cal-day {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--base-text);
  line-height: 1;
}
.kla-cal-month {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--base-text-muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.kla-cal-body { flex: 1; min-width: 0; }
.kla-cal-title { font-size: 13px; font-weight: 700; color: var(--base-text); }
.kla-cal-meta  { font-size: 11px; color: var(--base-text-muted); margin-top: 2px; }
.kla-cal-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--progress-light);
  color: var(--progress-deep);
}
.kla-cal-badge.urgent { background: var(--alert-light);     color: var(--alert-deep); }
.kla-cal-badge.soon   { background: var(--attention-light); color: var(--attention-deep); }

/* ─────────────────────────────────────────────
   BIBLIOTECA — topic rows (card grid)
   ───────────────────────────────────────────── */
.kla-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.kla-topic-row {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-width: 0;
}
.kla-topic-row:hover {
  border-color: var(--border-med);
  box-shadow: var(--shadow-viewport);
}
.kla-topic-row.kla-dragging {
  opacity: 0.55;
  transform: scale(0.98);
  cursor: grabbing;
}
.kla-topic-row.kla-drag-over {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.kla-topic-grab {
  display: none;
  color: var(--base-text-muted);
  cursor: grab;
  padding: 0 4px;
  font-size: 12px;
  flex-shrink: 0;
}
.kla-topic-grab:active { cursor: grabbing; }
[data-sortable="1"] .kla-topic-grab { display: inline-flex; align-items: center; }

/* ── Sortable reuse for subject cards ── */
.kla-subj-card.kla-dragging {
  opacity: .55;
  transform: scale(.98);
  cursor: grabbing !important;
}
.kla-subj-card.kla-drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
}
[data-sortable="1"] .kla-subj-card { cursor: grab; }
[data-sortable="1"] .kla-subj-grab {
  display: inline-flex;
  align-items: center;
  color: var(--base-text-muted);
  margin-right: 6px;
  cursor: grab;
}
[data-sortable="1"] .kla-subj-grab:hover { color: var(--primary); }
.kla-topic-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  /* Refactor 2026-05-24 (Oscar): antes height: 96px fijo recortaba el
     contenido cuando el tema tenía mucho meta (3 docs · 4 tareas · 1
     examen · 2 planes). Usamos min-height para mantener proporción
     visual sin desbordar. */
  min-height: 96px;
}
.kla-topic-meta { line-height: 1.5; }
.kla-topic-title { line-height: 1.3; word-break: break-word; }
.kla-topic-num {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.kla-topic-body { flex: 1; min-width: 0; }
.kla-topic-title { font-size: 14px; font-weight: 700; color: var(--base-text); }
.kla-topic-meta  { font-size: 11px; color: var(--base-text-muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.kla-topic-meta i { font-size: 10px; opacity: 0.6; margin-right: 2px; }
.kla-topic-chip {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--progress-light);
  color: var(--progress-deep);
}
.kla-topic-chip.weak { background: var(--alert-light);     color: var(--alert-deep); }
.kla-topic-chip.new  { background: var(--attention-light); color: var(--attention-deep); }
.kla-topic-expand { color: var(--base-text-muted); font-size: 12px; margin-left: 8px; }
.kla-topic-expanded {
  border-top: 1px solid var(--border-soft);
  background: var(--base-bg-warm);
  padding: 14px 18px 16px;
  display: none;
}
.kla-topic-row.open .kla-topic-expanded { display: block; }
.kla-topic-row.open .kla-topic-expand { transform: rotate(90deg); }
.kla-topic-sub-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--base-text-muted);
  margin-bottom: 8px;
}
.kla-topic-docs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.kla-topic-doc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* badges + tools bajan de línea si no caben */
  gap: 6px 10px;              /* row-gap pequeño cuando wrap, col-gap normal */
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 12px;
  min-width: 0;               /* dentro de un flex parent, permite shrink */
  overflow: hidden;           /* defensa: nada se escapa del contenedor */
}
.kla-topic-doc > i { color: var(--primary); flex-shrink: 0; }
/* Nombre del fichero: primer <span> directo del .kla-topic-doc. Crece
   ocupando el espacio sobrante y hace wrap si el filename es largo. */
.kla-topic-doc > span:first-of-type {
  flex: 1 1 140px;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.kla-topic-doc .doc-meta {
  color: var(--base-text-muted);
  font-size: 11px;
  margin-left: auto;          /* empuja meta+tools a la derecha cuando cabe */
  flex-shrink: 0;
  white-space: nowrap;
}
/* Badges tipo "TAREA REALIZADA" / "Nota del profe" / etc.: no se rompen */
.kla-topic-doc > span[style*="border-radius"] { flex-shrink: 0; }
.kla-doc-tools { flex-shrink: 0; }
.kla-topic-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kla-period-group { margin-bottom: 20px; }
.kla-period-group:last-child { margin-bottom: 0; }
.kla-period-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--base-bg-warm);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--base-text-soft);
}
.kla-period-head .count {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--card-bg);
  border-radius: var(--radius-pill);
  font-size: 10px;
}

/* ─────────────────────────────────────────────
   HISTORIAL — exam rows
   ───────────────────────────────────────────── */
.kla-exam-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
}
.kla-exam-row:hover { border-color: var(--border-med); color: inherit; }
.kla-score-circle {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.kla-score-circle.high    { background: var(--progress-light);  color: var(--progress); }
.kla-score-circle.mid     { background: var(--attention-light); color: var(--attention-deep); }
.kla-score-circle.low     { background: var(--alert-light);     color: var(--alert-deep); }
.kla-score-circle.pending { background: var(--base-bg-warm);    color: var(--base-text-muted); font-size: 13px; }
.kla-exam-body { flex: 1; min-width: 0; }
.kla-exam-title { font-size: 14px; font-weight: 700; color: var(--base-text); }
.kla-exam-meta {
  font-size: 11px;
  color: var(--base-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kla-exam-meta .chip-exam {
  padding: 2px 8px;
  background: var(--base-bg-warm);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  color: var(--base-text-soft);
}
.kla-exam-meta .chip-exam.ai { background: var(--primary-light); color: var(--primary); }

/* ==========================================================================
   COMPONENTES UNIFICADOS (rediseño · demo klararia-redesign-demo.html)
   Estos selectores son los canónicos del sistema de diseño nuevo.
   Los selectores kla-* heredados coexisten y no se borran en esta fase.
   ========================================================================== */

/* ── PAGE HEADER (plano, sin gradientes) ───────────────────────────────── */
.page-header {
  background: var(--primary-wash);
  border: 1px solid rgba(61, 90, 128, 0.14);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.page-header .ph-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 22px;
  border: 1px solid rgba(61, 90, 128, 0.14);
  flex-shrink: 0;
}
.page-header .ph-body { flex: 1; min-width: 0; }
.page-header h1 { color: var(--primary-deep); margin-bottom: 4px; font-size: 24px; }
.page-header .lead { color: var(--primary-deep); opacity: 0.78; font-size: 14px; }
.page-header .ph-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

/* ── SECTION + SECTION-HEAD ────────────────────────────────────────────── */
.section { margin-bottom: 32px; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.section-head h2 { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.section-head .muted { font-size: 12px; color: var(--text-muted); }
.section-head .actions { display: flex; gap: 8px; }

/* ── CARD + SOFT-CARD ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.card h3 { margin-bottom: 4px; }
.card p { color: var(--text-soft); font-size: 14px; }

.soft-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

/* ── BOTONES ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  line-height: 1.2;
}
.btn i { font-size: 12px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); color: #fff; }
.btn-secondary {
  background: var(--bg-card);
  color: var(--primary);
  border-color: rgba(61, 90, 128, 0.28);
}
.btn-secondary:hover { background: var(--primary-wash); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--text-strong); }
.btn-lg { padding: 14px 24px; font-size: 14px; }
.btn-sm { padding: 7px 12px; font-size: 12px; }

/* ── CHIPS / BADGES ─────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--primary-wash);
  color: var(--primary-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.chip.progress  { background: var(--progress-wash);  color: var(--progress-deep); }
.chip.attention { background: var(--attention-wash); color: var(--attention-deep); }
.chip.alert     { background: var(--alert-wash);     color: var(--alert-deep); }
.chip.neutral   { background: var(--bg-soft);        color: var(--text-soft); }

/* ── DOT STATUS ─────────────────────────────────────────────────────────── */
.dot-status {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--progress);
  vertical-align: middle;
}
.dot-status.attention { background: var(--attention); }
.dot-status.alert     { background: var(--alert); }

/* ── ALERT SOFT ─────────────────────────────────────────────────────────── */
.alert-soft {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--attention-wash);
  border: 1px solid rgba(212, 165, 116, 0.35);
  border-radius: var(--radius-md);
  align-items: flex-start;
}
.alert-soft.primary  {
  background: var(--primary-wash);
  border-color: rgba(61, 90, 128, 0.18);
}
.alert-soft.progress {
  background: var(--progress-wash);
  border-color: rgba(107, 144, 128, 0.28);
}
.alert-soft .icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--attention-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.alert-soft.primary  .icon { color: var(--primary-deep); }
.alert-soft.progress .icon { color: var(--progress-deep); }
.alert-soft .body { flex: 1; min-width: 0; }
.alert-soft .title {
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 2px;
  font-size: 14px;
}
.alert-soft .sub { font-size: 13px; color: var(--text-body); }
.alert-soft .cta { flex-shrink: 0; }

/* ── PROGRESS BAR ───────────────────────────────────────────────────────── */
.progress {
  height: 8px;
  background: var(--bg-app-warm);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--progress);
  border-radius: 4px;
}
.progress.attention > span { background: var(--attention); }
.progress.alert     > span { background: var(--alert); }

/* ── STAT CARD ──────────────────────────────────────────────────────────── */
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.stat .stat-ico {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--primary-wash);
  color: var(--primary);
  flex-shrink: 0;
}
.stat.good  .stat-ico { background: var(--progress-wash);  color: var(--progress-deep); }
.stat.focus .stat-ico { background: var(--attention-wash); color: var(--attention-deep); }
.stat .stat-val {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-strong);
  line-height: 1;
}
.stat .stat-lbl {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── TAB BAR ────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 24px;
  width: fit-content;
}
.tab-bar .tab {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  border-radius: 7px;
  transition: background .15s, color .15s;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-bar .tab.active {
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: var(--shadow-card);
}
.tab-bar .tab:hover:not(.active) { color: var(--text-strong); }

/* ── FORM FIELDS ────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.field .help { font-size: 12px; color: var(--text-muted); }
.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-strong);
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-body);
}
.field select {
  background-color: var(--bg-card);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-strong);
  transition: border-color .15s, box-shadow .15s;
  font-family: var(--font-body);
}
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.field-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

/* ── CHOICE GRID (radio/checkbox cards) ─────────────────────────────────── */
.choice-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.choice {
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s, background .15s;
  position: relative;
}
.choice:hover { border-color: var(--primary-soft); }
.choice.selected {
  border-color: var(--primary);
  background: var(--primary-wash);
}
.choice.selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 10px; right: 12px;
  color: var(--primary);
  font-size: 12px;
}
.choice .c-icon { font-size: 18px; color: var(--primary); }
.choice .c-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
}
.choice .c-sub { font-size: 12px; color: var(--text-soft); }

/* ── LAYOUT GRIDS ───────────────────────────────────────────────────────── */
.grid-auto    { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 1fr; }
.grid-2       { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.grid-3       { display: grid; gap: 16px; grid-template-columns: 1fr 1fr 1fr; }
.grid-sidebar { display: grid; gap: 24px; grid-template-columns: 1fr 300px; }

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 820px) {
  .kla-hero {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px;
  }
  .kla-hero-stats {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border-soft);
    padding-top: 14px;
    width: 100%;
    justify-content: space-around;
  }
  .kla-hero-actions { width: 100%; }
  .kla-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .kla-tab { white-space: nowrap; }
  .kla-hero-subject-top { flex-wrap: wrap; }
  .kla-hero-subject-actions { width: 100%; }
}

/* ── TAKE EXAM · vista inmersiva (fase 4.5) ────────────────────────────── */
.exam-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--base-bg);
}

.exam-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 32px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-soft);
}
.exam-topbar .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.exam-topbar .back:hover {
  background: var(--base-bg);
  color: var(--primary);
  border-color: var(--border-soft);
}
.exam-topbar .ctx {
  flex: 1;
  font-size: 13px;
  color: var(--text-soft);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exam-topbar .ctx strong {
  color: var(--text-main);
}
.exam-topbar .timer-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-light);
  color: var(--primary);
  padding: 8px 14px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  border: 1px solid rgba(61,90,128,.2);
  min-width: 88px;
  justify-content: center;
}

.exam-progress {
  padding: 20px 32px 0;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.exam-progress .step-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

.answer-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  cursor: pointer;
  background: var(--card-bg);
  transition: border-color .15s, background .15s;
}
.answer-option:hover {
  border-color: rgba(61,90,128,.3);
  background: var(--base-bg);
}
.answer-option.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}
.answer-option .letter {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--base-bg);
  color: var(--text-soft);
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.answer-option.selected .letter {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.answer-option .text {
  flex: 1;
  font-size: 14px;
  color: var(--text-main);
}
.answer-option.selected .text {
  color: var(--primary);
  font-weight: 700;
}
.answer-option input[type="radio"] {
  display: none;
}

.exam-footer-nav {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px 40px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 64px);
  box-sizing: border-box;
}

/* exam-shell overrides: hide app-shell chrome */
body:has(.exam-shell) .sidebar,
body:has(.exam-shell) .topbar,
body:has(.exam-shell) #a11y-btn,
body:has(.exam-shell) #a11y-panel,
body:has(.exam-shell) .main-content > .px-4 { display: none !important; }
body:has(.exam-shell) .main-content { margin-left: 0 !important; }
body:has(.exam-shell) .content-area {
  padding: 0 !important;
  max-width: none !important;
}

@media (max-width: 600px) {
  .exam-topbar { padding: 12px 16px; gap: 10px; }
  .exam-topbar .ctx { font-size: 12px; }
  .exam-progress { padding: 14px 16px 0; }
  .answer-option { padding: 12px 14px; }
  .exam-footer-nav { padding: 0 16px 24px; width: calc(100% - 32px); }
}

/* ── EXAM RESULTS (fase 4.6) ───────────────────────────────────────────── */
.result-hero {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.result-donut {
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  position: relative;
}
.result-donut svg { transform: rotate(-90deg); }
.result-donut .center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.result-donut .center .val {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 34px;
  color: var(--text-main);
  line-height: 1;
}
.result-donut .center .lbl {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.result-hero .rh-body { flex: 1; min-width: 220px; }
.result-hero .rh-title { font-size: 20px; font-weight: 700; color: var(--text-main); margin: 0 0 4px; }
.result-hero .rh-sub { color: var(--text-soft); font-size: 13px; margin: 0 0 14px; }
.result-hero .quick-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.result-hero .quick-stats .it strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-main);
}
.result-hero .quick-stats .it small {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.review-question {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--progress);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 10px;
}
.review-question.wrong { border-left-color: var(--alert, #D4A574); }
.review-question .rq-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.review-question .rq-head .status.ok { color: var(--progress); font-weight: 700; }
.review-question .rq-head .status.bad { color: var(--attention); font-weight: 700; }
.review-question .rq-q { font-weight: 600; color: var(--text-main); margin-bottom: 8px; font-size: 14px; line-height: 1.55; }
.review-question .rq-a { font-size: 13px; color: var(--text-soft); }
.review-question .rq-a strong { color: var(--text-main); }
.review-question .rq-explanation {
  margin-top: 10px;
  background: var(--base-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs, 6px);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-soft);
}
.review-question .rq-explanation i { color: var(--primary); }

@media (max-width: 600px) {
  .result-hero { padding: 20px 18px; gap: 18px; }
  .result-donut { width: 110px; height: 110px; }
  .result-donut .center .val { font-size: 26px; }
  .result-hero .rh-title { font-size: 17px; }
  .review-question { padding: 14px 14px; }
}

/* ── ACCESS SHELL (fase 4.7) ────────────────────────────────────────────── */
.access-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-app);
  padding: 32px 16px;
}

/* Hide app chrome when access-shell is present */
body:has(.access-shell) .sidebar,
body:has(.access-shell) .topbar,
body:has(.access-shell) #a11y-btn,
body:has(.access-shell) #a11y-panel { display: none !important; }
body:has(.access-shell) .main-content { margin-left: 0 !important; }
body:has(.access-shell) .content-area { padding: 0 !important; max-width: none !important; }

.access-brand {
  text-align: center;
  margin-bottom: 24px;
}
.access-brand-logo {
  height: 36px;
  width: auto;
  display: block;
  margin: 0 auto 8px;
}
.access-brand-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: .01em;
}

.access-role-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.access-role-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.access-role-icon--tutor {
  background: var(--primary-wash);
  color: var(--primary);
}
.access-role-icon--alumno {
  background: var(--progress-wash);
  color: var(--progress-deep);
}

.access-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 20px;
  color: var(--text-muted);
  font-size: 12px;
}
.access-divider::before,
.access-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.access-footer-note {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0;
  font-size: 11px;
  color: var(--text-muted);
  opacity: .65;
  letter-spacing: .02em;
}

@media (max-width: 480px) {
  .access-shell .card { padding: 28px 20px; }
}

/* ── FORMS MENORES (fase 4.8) ── */
.ph-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

.form-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 20px;
  margin-top: 8px;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 600px) {
  .field-grid { grid-template-columns: 1fr; }
  .form-footer { flex-direction: column-reverse; }
  .form-footer .btn { width: 100%; justify-content: center; }
}

/* ── CAMBIO 1: Dashboard 2 columnas adaptativo ── */
.kla-dashboard-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
@media (max-width: 880px) {
  .kla-dashboard-grid { grid-template-columns: 1fr; }
}

/* ── CAMBIO 5: Iconos de tipo evento (badges) ── */
.kla-cal-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  margin-right: 8px;
  font-size: 11px;
  vertical-align: middle;
}
.kla-cal-type.exam     { background: var(--alert-wash);     color: var(--alert-deep); }
.kla-cal-type.delivery { background: var(--primary-wash);   color: var(--primary); }
.kla-cal-type.custom   { background: var(--bg-app);         color: var(--text-soft); }

/* ── CAMBIO 6: Próximos eventos en resumen alumno ── */
.kla-upcoming-list { display: flex; flex-direction: column; gap: 10px; }
.kla-upcoming-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kla-upcoming-row:hover {
  border-color: var(--primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.kla-upcoming-date {
  flex-shrink: 0;
  min-width: 58px;
  text-align: center;
  background: var(--primary-wash);
  border-radius: var(--radius-md);
  padding: 10px 6px;
}
.kla-upcoming-date .day {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}
.kla-upcoming-date .month {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-top: 4px;
}
.kla-upcoming-body { flex: 1; min-width: 0; }
.kla-upcoming-subject {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kla-upcoming-subject i { color: var(--primary); }
.kla-upcoming-sep { opacity: .4; }
.kla-upcoming-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  margin-top: 4px;
}
.kla-upcoming-countdown {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--bg-app);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-soft);
}
.kla-upcoming-countdown.soon   { background: var(--attention-wash); color: var(--attention-deep); }
.kla-upcoming-countdown.urgent { background: var(--alert-wash);     color: var(--alert-deep); }

/* ============================================================
   DARK MODE — overrides de tokens
   ============================================================
   Activación: cuando body.theme-dark está presente (toggle manual,
   se guarda en localStorage). NO usamos prefers-color-scheme por
   defecto — el alumno tiene que activarlo conscientemente para
   evitar sorpresas si su sistema operativo está en dark sin querer.

   Diseño: misma jerarquía de colores que claro pero invertida.
   Mantenemos el primary/progress/attention/alert distinguibles
   ajustando la luminosidad.
*/

body.theme-dark {
  /* Base — fondos oscuros con textura sutil */
  --bg-canvas:        #14171C;
  --bg-app:           #1A1E25;
  --bg-app-warm:      #1E222A;
  --bg-card:          #232830;
  --bg-soft:          #1D2128;

  /* Tipografía — claros para contraste WCAG AA */
  --text-strong:      #F4F2EE;
  --text-body:        #D4D0CA;
  --text-soft:        #A39D96;
  --text-muted:       #6B6661;

  /* Primary — más brillante para destacar sobre fondo oscuro */
  --primary:          #7B9BCA;
  --primary-soft:     #93B0DC;
  --primary-deep:     #5B7EA1;
  --primary-wash:     rgba(123, 155, 202, 0.16);
  --primary-wash-2:   rgba(123, 155, 202, 0.24);

  /* Progress — verde salvia más vivo */
  --progress:         #8FB7A4;
  --progress-deep:    #6B9080;
  --progress-wash:    rgba(143, 183, 164, 0.16);

  /* Attention — ocre más cálido */
  --attention:        #E2B987;
  --attention-deep:   #C5994C;
  --attention-wash:   rgba(226, 185, 135, 0.14);

  /* Alert — terracota más visible */
  --alert:            #D89072;
  --alert-deep:       #C27C5A;
  --alert-wash:       rgba(216, 144, 114, 0.14);

  /* Bordes — sutiles pero visibles sobre fondos oscuros */
  --border-soft:      rgba(244, 242, 238, 0.10);
  --border-med:       rgba(244, 242, 238, 0.16);
  --border-strong:    rgba(244, 242, 238, 0.24);

  /* Sombras — más sutiles en dark, solo separación */
  --shadow-card:      0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-raised:    0 6px 20px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-viewport:  0 24px 64px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.30);

  /* Focus ring */
  --focus-ring:       0 0 0 3px rgba(123, 155, 202, 0.40);
}

/* Toggle button visual styling */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-soft);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle-btn:hover {
  background: var(--bg-soft);
  border-color: var(--border-med);
  color: var(--text-strong);
}
body.theme-dark .theme-toggle-btn .fa-sun { display: inline-block; }
body.theme-dark .theme-toggle-btn .fa-moon { display: none; }
body:not(.theme-dark) .theme-toggle-btn .fa-sun { display: none; }
body:not(.theme-dark) .theme-toggle-btn .fa-moon { display: inline-block; }

/* Ajustes específicos para componentes que asumen color claro:
   Las cards, inputs, etc. ya usan --bg-card / --text-strong, así que
   se adaptan solos. Algunos componentes con colores hardcoded
   necesitan ajuste explícito. */

body.theme-dark .form-control,
body.theme-dark .q-input,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="number"],
body.theme-dark textarea,
body.theme-dark select {
  background: var(--bg-soft);
  border-color: var(--border-med);
  color: var(--text-strong);
}
body.theme-dark .form-control::placeholder,
body.theme-dark textarea::placeholder,
body.theme-dark input::placeholder {
  color: var(--text-muted);
}

body.theme-dark .alert {
  background: var(--bg-soft);
  border-color: var(--border-med);
  color: var(--text-body);
}

body.theme-dark .btn-outline-secondary {
  border-color: var(--border-med);
  color: var(--text-body);
}
body.theme-dark .btn-outline-secondary:hover {
  background: var(--bg-soft);
  color: var(--text-strong);
}

/* Tablas */
body.theme-dark table { color: var(--text-body); }
body.theme-dark th { color: var(--text-soft); }
body.theme-dark .table-striped tbody tr:nth-of-type(odd) { background: var(--bg-soft); }

/* Code blocks */
body.theme-dark code, body.theme-dark pre {
  background: var(--bg-canvas);
  color: var(--text-body);
  border-color: var(--border-soft);
}