.thermo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-primary { background: rgba(29, 30, 148, 0.1); color: var(--brand-primary); }
.badge-interactive { background: rgba(14, 155, 181, 0.15); color: var(--color-interactive); }
.badge-danger { background: rgba(217, 58, 43, 0.15); color: var(--color-danger); }
.badge-muted { background: var(--color-bg); color: var(--color-muted); border: 1px solid var(--color-border); }

.formula-box {
  background: #ECEFF8;
  border-left: 4px solid var(--brand-primary);
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1rem;
  overflow-x: auto;
}

.todo-marker {
  background: rgba(217, 58, 43, 0.08);
  border: 1px dashed var(--color-danger);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.85rem;
  margin: 14px 0;
}

.search-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.92rem;
  margin-bottom: 18px;
  outline: none;
}
.search-input:focus { border-color: var(--color-interactive); }

.glossary-item {
  background: var(--color-bg);
  padding: 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-interactive);
}
.glossary-item strong { color: var(--brand-primary); }
.glossary-item p { font-size: 0.88rem; margin-top: 4px; }

.quiz-item { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.quiz-options { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.control-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
}
.control-btn:hover { border-color: var(--color-interactive); }
.control-btn:focus-visible { outline: 2px solid var(--color-interactive); outline-offset: 2px; }
.control-btn.correct { border-color: var(--color-interactive); background: rgba(14,155,181,0.1); }
.control-btn.incorrect { border-color: var(--color-danger); background: rgba(217,58,43,0.08); }

.quiz-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  display: none;
}

label.field-label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.slider-row { margin-bottom: 16px; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--color-interactive); }
.slider-value { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-muted); }

/* --- Autoevaluación: flashcards y ensayo (además de las MC de arriba) --- */
.quiz-toggle-btn { margin-top: 10px; }

.quiz-feedback-box {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.92rem;
  color: var(--brand-ink);
}
.quiz-feedback-box.abierta { display: block; }

.quiz-essay-textarea {
  width: 100%;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.92rem;
  resize: vertical;
}
.quiz-essay-textarea:focus { outline: none; border-color: var(--color-interactive); }