/* dashboard.css */

/* ── Stats bar ─────────────────────────────────────────────────────────── */
.stats-bar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  transition: border-color var(--transition-fast);
}
.stat-value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 600; color: var(--fg-strong); }
.stat-label { font-size: var(--fs-xs); color: var(--fg-muted); }

.stat-streak-active {
  border-color: var(--warn);
  background: rgba(240, 136, 62, 0.07);
}
.stat-streak-active .stat-value { color: var(--warn); }

.stat-fc-due {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.stat-fc-due .stat-value { color: var(--accent); }

/* ── Calendar widget ───────────────────────────────────────────────────── */
.cal-widget {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.cal-widget-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.cal-widget-title { color: var(--fg-strong); }

/* El widget pasó de una lista a dos bloques: la semana en curso y las
   evaluaciones. Cada bloque lleva su propio encabezado, y el del widget queda
   como título general. */
.cal-week { margin-bottom: var(--sp-4); }
.cal-week:last-child { margin-bottom: 0; }

.cal-week-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.cal-week-title {
  font-weight: 600;
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
}
.cal-week-dates { color: var(--fg-muted); }

.cal-week-feriado {
  font-size: var(--fs-xs);
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.cal-week-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cal-wk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-muted);
  font-size: var(--fs-sm);
  /* La materia se distingue por el filete lateral, no por el color del texto:
     así se lee igual en tema claro y oscuro. */
  border-left: 3px solid var(--border);
}

.cal-exams { margin-top: var(--sp-4); }
.cal-exams:first-child { margin-top: 0; }

@media (max-width: 700px) {
  .stats-bar { gap: var(--sp-2); }
  .stat-pill  { padding: var(--sp-2) var(--sp-3); }
  .cal-wk-materia { display: none; }
}

.subject-section {
  margin: var(--sp-8) 0;
}

.subject-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

.subject-title {
  margin: 0;
  font-size: var(--fs-xl);
}

/* .era-header pasó de <div> a <button> para plegar su ERA. Las tres primeras
   reglas neutralizan lo que el navegador le pone a los botones. align-items
   queda en center y no baseline: el chevron es un ícono, no texto, y con
   baseline colgaba por debajo de la línea. */
.era-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
  padding: var(--sp-1);
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-md);
}
.era-header:hover { background: var(--bg-muted); }
.era-header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.era-chevron { flex: none; color: var(--fg-muted); transition: transform 0.15s ease; }
.era-header[aria-expanded="true"] .era-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .era-chevron { transition: none; }
}
/* El recuento se va al extremo: plegada, es el único dato que queda. */
.era-header .era-count { margin-left: auto; }
.era-name {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.era-sub { color: var(--fg-muted); font-size: var(--fs-sm); }
.era-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}

.empty-state {
  max-width: 720px;
}
.empty-state .key-concept {
  margin-top: var(--sp-5);
}

.cal-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cal-chip {
  display: flex; flex-direction: column; gap: 2px;
  /* min-width: 0 desactiva el mínimo automático de los flex items (su
     max-content), que si no fuese éste el desborde nº4 del proyecto: un
     título largo empujaría el chip más allá del ancho disponible en vez de
     dejarlo encoger y envolver. Ver Fix round 1, Finding 1. */
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  text-decoration: none;
}
.cal-chip:hover { border-color: var(--border-strong); text-decoration: none; }
.cal-chip-count {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-sm); color: var(--fg-strong);
  white-space: nowrap; /* corto por construcción: "16 días", "mañana" */
}
.cal-chip-title {
  /* Los títulos de evaluación de hoy no pasan de 35 caracteres, pero los de
     clase ya llegan a 80 en data/calendario.js y nada limita la longitud.
     Se envuelve en vez de truncar: un chip de dos líneas es mejor que un
     título de evaluación cortado. */
  white-space: normal;
  overflow-wrap: break-word;
}
.cal-chip-soon   { border-color: var(--accent); }
.cal-chip-soon   .cal-chip-count { color: var(--accent); }
.cal-chip-urgent { border-color: var(--danger); }
.cal-chip-urgent .cal-chip-count { color: var(--danger); }
/* Distante: el chip sigue ahí y se puede leer, pero deja de competir por la
   atención con lo que sí es de esta semana. */
.cal-chip-distant { opacity: 0.6; }
.cal-chip-distant .cal-chip-count { color: var(--fg-muted); }
.stat-icon { color: var(--fg-muted); flex: none; }

.cal-wk-titles { flex: 1; color: var(--fg); }
.cal-wk-materia { font-size: var(--fs-xs); color: var(--fg-muted); white-space: nowrap; }
.cal-wk-fisio { border-left-color: var(--m-fisio); }
.cal-wk-bq    { border-left-color: var(--m-bq); }
.cal-wk-otro  { border-left-color: var(--border-strong); }