/* topic.css */

.topic-shell-head {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-2);
}
.topic-shell-head .mono { color: var(--fg-muted); font-size: var(--fs-sm); }

.topic-tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  margin: var(--sp-5) 0 var(--sp-4);
  overflow-x: auto;
}

.topic-tab {
  font-family: var(--font-display);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.topic-tab:hover {
  color: var(--fg-strong);
  background: var(--bg-elev);
  text-decoration: none;
}
.topic-tab.active                           { color: var(--accent);        border-bottom-color: var(--accent); }
/* Sin color por pestaña: el ícono y la etiqueta ya distinguen. Pintarlas con
   los tokens pedagógicos le robaba al contenido cinco de sus seis matices
   (spec §2.2). La regla .topic-tab.active de arriba las cubre a las seis. */
.topic-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tab-slot { margin-top: var(--sp-2); }

/* Cadena de alto, sin números mágicos: el outlet toma la ventana menos el
   encabezado, el envoltorio del tópico la hereda, y el slot se queda con lo que
   sobra después del título y las pestañas. Así los paneles cortos saben cuánto
   espacio tienen sin que nadie descuente 255px a mano — un número que además
   cambia cuando el título ocupa dos o tres líneas. */
.app-outlet { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; }
.topic-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tab-slot { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Los paneles cortos —quiz, fichas, oral, vacíos— centran verticalmente en vez
   de colgar del borde de arriba con media pantalla en blanco debajo. Aprender y
   Resumen NO están en la lista: son contenido largo y tienen que empezar
   arriba. */
.tab-slot > .fc-root > .fc-board { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.tab-slot > .quiz-pick,
.tab-slot > .fc-root,
.tab-slot > .oral-board,
.tab-slot > .actividades-empty,
.tab-slot > .tab-stub {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tab-stub {
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}