/* ═══════════════════════════════════════════════════════════
   ejerciciosolucion.css  —  CDI / Probabilidad 2026
   Paleta: navy #1a2e4a · teal #2a7f7f · gold #c8922a · cream #f8f4ed
   ═══════════════════════════════════════════════════════════ */

.ejercicio-solucion {
  margin: .5rem 0 1.2rem 0;
}

.ejercicio-solucion .solucion-container {
  margin-top: .6em;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Botón "Solución" ── */
.ejercicio-solucion .solucion-container button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .22rem .72rem .22rem .58rem;
  background: #2a7f7f;          /* teal */
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'DM Sans', 'PT Sans Narrow', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .18s, transform .1s, box-shadow .15s;
  box-shadow: 0 1px 4px rgba(42,127,127,.22);
}

/* Triángulo ▶ antes del texto */
.ejercicio-solucion .solucion-container button::before {
  content: '▶';
  font-size: .50rem;
  display: inline-block;
  transition: transform .25s ease;
}

/* Estado abierto */
.ejercicio-solucion .solucion-container button.sol-abierta {
  background: #1a2e4a;          /* navy */
}
.ejercicio-solucion .solucion-container button.sol-abierta::before {
  transform: rotate(90deg);
}

.ejercicio-solucion .solucion-container button:hover {
  background: #1a2e4a;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26,46,74,.2);
}

/* ── Panel solución ── */
.ejercicio-solucion .solucion {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height .38s cubic-bezier(.4,0,.2,1),
              margin-top .2s,
              visibility 0s .38s;
  margin-top: 0;
  display: block !important;
  background: #f8f4ed;
  border-left: 4px solid #2a7f7f;
  border-radius: 0 8px 8px 0;
}

.ejercicio-solucion .solucion.visible {
  max-height: 3000px;
  visibility: visible;
  margin-top: .6rem;
  padding: .85rem 1.1rem;
  transition: max-height .38s cubic-bezier(.4,0,.2,1),
              margin-top .2s,
              visibility 0s 0s;
}

.ejercicio-solucion .solucion > *,
.ejercicio-solucion .solucion > p:first-child {
  display: block;
  margin: 0 0 .5rem 0;
}
.ejercicio-solucion .solucion > *:last-child {
  margin-bottom: 0;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  .ejercicio-solucion .solucion-container button { box-shadow: none; }
  .ejercicio-solucion .solucion {
    background: #252525;
    color: #e4dfd8;
    border-left-color: #2a7f7f;
  }
}