/* ============================================================
   Ejercicios resueltos y práctica con respuesta oculta
   ------------------------------------------------------------
   Capa: componente
   Reúne, en este orden: ejercicio.css, practica.css
   ============================================================ */

/* ═══════════════════════════════════════════════════
   EJERCICIOS — acordeón premium
═══════════════════════════════════════════════════ */
.ejercicio-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 14px 0; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.ejercicio-item:hover { box-shadow: var(--shadow-sm); }
.ejercicio-item.open {
  border-color: rgba(var(--accent-rgb),.4);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.ejercicio-pregunta {
  padding: 16px 22px;
  background: var(--card2); font-weight: 500;
  cursor: pointer; display: flex;
  justify-content: space-between; align-items: center;
  min-height: 54px;
  transition: background .2s;
}
.ejercicio-pregunta:hover { background: rgba(var(--accent-rgb),.07); }
.ejercicio-item.open .ejercicio-pregunta { background: rgba(var(--accent-rgb),.06); }

.ejercicio-respuesta {
  display: none; padding: 20px 22px;
  border-top: 1px solid var(--border);
  background: var(--card);
  font-size: .92rem;
  transition: background var(--t), border-color var(--t);
  animation: sectionOpen .3s cubic-bezier(.22,1,.36,1) forwards;
}
.ejercicio-item.open .ejercicio-respuesta { display: block; }
body.dark-mode .ejercicio-respuesta { background: var(--card2); }

.ej-toggle {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-dim);
  color: var(--accent-strong); font-size: .85rem; font-weight: 700;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.ejercicio-item.open .ej-toggle {
  transform: rotate(180deg);
  background: var(--accent); color: var(--card);
}
html.dark-mode .ej-toggle, body.dark-mode .ej-toggle { color: var(--accent); }

/* ═══════════════════════════════════════════════════
   PRÁCTICA
═══════════════════════════════════════════════════ */
.practica-item {
  margin: 14px 0; padding: 18px 22px;
  background: var(--card2);
  border-radius: var(--radius); border: 1px solid var(--border);
  transition: background var(--t), border-color var(--t);
}
.practica-header {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; user-select: none;
}
.practica-num {
  flex-shrink: 0; width: 28px; height: 28px;
  background: var(--accent-2); color: var(--on-accent-2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  transition: background var(--t);
}
body.dark-mode .practica-num { background: var(--accent-2-strong); }
.practica-label {
  font-family: var(--font-mono); font-size: .67rem;
  color: var(--accent-strong); letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--t);
}
html.dark-mode .practica-label, body.dark-mode .practica-label { color: var(--accent); }
.practica-formula { flex: 1; font-size: .95rem; color: var(--text); }
.practica-btn {
  font-family: var(--font-body); font-size: .82rem;
  color: var(--accent-strong); font-weight: 600;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 4px; padding: 0;
  flex-shrink: 0; transition: color var(--t);
}
html.dark-mode .practica-btn, body.dark-mode .practica-btn { color: var(--accent); }
.practica-btn::after { content: '\2192'; transition: transform .2s; }
.practica-btn.open::after { content: '\2193'; }
.practica-respuesta {
  display: none; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border); transition: border-color var(--t);
}
.practica-respuesta.visible { display: block; }