/* ═══════════════════════════════════════════════════════════
   ejerciciosolucion.css — versión con clase independiente
   - panel sin “velo”
   - borde gris fino
   - enumerate con numeración a la izquierda
   - desplazamiento horizontal para contenido largo
   ═══════════════════════════════════════════════════════════ */

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

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

/* ── Botón "Solución" (AHORA CON CLASE EXCLUSIVA) ── */
.btn-toggle-solucion {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .22rem .72rem .22rem .58rem;
  background: #2a7f7f;
  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);
}

.btn-toggle-solucion::before {
  content: '▶';
  font-size: .50rem;
  display: inline-block;
  transition: transform .25s ease;
}

.btn-toggle-solucion.sol-abierta {
  background: #1a2e4a;
}

.btn-toggle-solucion.sol-abierta::before {
  transform: rotate(90deg);
}

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

/* ── Contenedor animado ── */
.ejercicio-solucion .solucion {
  display: block !important;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;

  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  margin-top: 0;
  padding: 0;

  background: transparent !important;
  color: inherit;
  border: 0;

  transition:
    max-height .38s cubic-bezier(.4,0,.2,1),
    margin-top .2s,
    visibility 0s .38s;
}

.ejercicio-solucion .solucion.visible {
  max-height: 5000px;
  visibility: visible;
  margin-top: .6rem;
  padding: 0;

  transition:
    max-height .38s cubic-bezier(.4,0,.2,1),
    margin-top .2s,
    visibility 0s 0s;
}

/* ── Caja visible de la solución ── */
.ejercicio-solucion .solucion-inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;

  padding: .85rem 1.1rem;
  background: transparent !important;
  color: inherit;

  border: 1px solid #51989d;
  border-radius: 6px;

  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.ejercicio-solucion .solucion-inner > * {
  margin-top: 0;
  margin-bottom: .5rem;
}

.ejercicio-solucion .solucion-inner > *:last-child {
  margin-bottom: 0;
}

/* ── Enumerate dentro de una solución ── */
.ejercicio-solucion .solucion-inner ol {
  display: block !important;
  box-sizing: border-box;
  width: auto !important;
  max-width: none !important;

  margin: .55em 0 .65em 0 !important;
  padding-inline-start: 2.25em !important;

  list-style-position: outside !important;
  list-style-type: decimal !important;
  text-align: left !important;
}

.ejercicio-solucion .solucion-inner ol ol {
  list-style-type: lower-alpha !important;
}

.ejercicio-solucion .solucion-inner ol ol ol {
  list-style-type: lower-roman !important;
}

.ejercicio-solucion .solucion-inner ol > li {
  display: list-item !important;
  position: static !important;
  float: none !important;

  width: auto !important;
  max-width: none !important;
  margin: .35em 0 !important;
  padding: 0 0 0 .2em !important;

  list-style-position: outside !important;
  text-align: left !important;
}

.ejercicio-solucion .solucion-inner ol > li::before {
  content: none !important;
  display: none !important;
}

.ejercicio-solucion .solucion-inner ol > li > p:first-child {
  margin-top: 0;
}

.ejercicio-solucion .solucion-inner ol > li > p:last-child {
  margin-bottom: 0;
}

.ejercicio-solucion .solucion-inner pre,
.ejercicio-solucion .solucion-inner table,
.ejercicio-solucion .solucion-inner math[display="block"],
.ejercicio-solucion .solucion-inner mjx-container[display="true"] {
  max-width: none;
}

.ejercicio-solucion .solucion-inner::-webkit-scrollbar {
  height: 8px;
}

.ejercicio-solucion .solucion-inner::-webkit-scrollbar-track {
  background: transparent;
}

.ejercicio-solucion .solucion-inner::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 999px;
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  .btn-toggle-solucion {
    box-shadow: none;
  }

  .ejercicio-solucion .solucion,
  .ejercicio-solucion .solucion-inner {
    background: transparent !important;
    color: inherit;
  }

  .ejercicio-solucion .solucion-inner {
    border-color: #777;
    scrollbar-color: #777 transparent;
  }
}