/* topicCard.css */

.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: 110px;
  /* Grid item dentro de .topic-grid: sin esto, min-width:auto le impide encoger
     por debajo del min-content de su propio título/subtítulo y empuja la pista
     (el mismo atrapamiento que .app-outlet resolvió en la Task 1). Un subtítulo
     largo sin oportunidad de salto ("...SABA/LABA/SAMA/LAMA...") lo reproduce. */
  min-width: 0;
}
.topic-card:hover {
  border-color: var(--accent);
  background: var(--bg-overlay);
  text-decoration: none;
}

.topic-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.topic-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.tag-teorico   { color: var(--accent); border-color: var(--accent); }
.tag-seminario { color: var(--accent); border-color: var(--accent); }
.tag-aps       { color: var(--accent); border-color: var(--accent); }
.tag-integracion { color: var(--accent); border-color: var(--accent); }
.tag-referencia { color: var(--fg-muted); }

.topic-card-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topic-card-sub {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--line-base);
  /* El subtitle de data/ mide entre 0 y 1278 caracteres según el tópico: en
     unos es un resumen de una línea y en otros el índice entero del tema. Sin
     tope, CSS Grid estira toda la fila hasta la tarjeta más alta y el resto
     queda en blanco. Cuatro líneas alcanzan para distinguir «Digestivo I» de
     «Digestivo II»; el texto completo sigue entero en la página del tópico. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* min-width:0 en .topic-card libera la pista, pero un token largo sin espacios
   (p.ej. "Cadena iónico→eléctrico→mecánico→hemodinámico") seguiría desbordando
   la tarjeta si no tiene dónde partirse. */
.topic-card-title,
.topic-card-sub { overflow-wrap: anywhere; }

.topic-progress-track {
  height: 5px;
  background: var(--bg-overlay);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: var(--sp-3) 0 var(--sp-2);
}
.topic-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width var(--transition-base);
}
.topic-card[data-state="done"] .topic-progress-fill { background: var(--accent); }

.topic-pct {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  margin-left: auto;
}
.topic-pct-done { color: var(--accent); display: inline-flex; }

.topic-card-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.topic-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--border);
}

.topic-counts { font-size: var(--fs-xs); color: var(--fg-faint); }
.topic-status { font-size: var(--fs-xs); margin-left: auto; }
.status-none    { color: var(--fg-faint); }
.status-partial { color: var(--accent); }
.status-done    { color: var(--accent); }