/*
 * Talleres — capa de estilo mínima sobre los componentes nativos de BookStack.
 *
 * A propósito, esto NO define una paleta propia. Todo color sale de las
 * custom properties que BookStack ya expone en :root (--color-primary,
 * --color-positive, --color-warning, --color-info, --color-primary-light)
 * y la estructura reutiliza .callout / .button / .card / <table>, los
 * mismos componentes que usa el editor de páginas — así un taller se ve
 * como parte del sitio, con su tema claro/oscuro y su color de marca,
 * en vez de una skin aparte pegada encima.
 *
 * Clases nuevas, sin equivalente nativo:
 *   .taller            contenedor de ancho de lectura para un capítulo
 *   .taller details.card   módulo colapsable (sustituye el antiguo toggle por JS)
 *   .taller .callout > summary   pregunta con respuesta oculta (antes: botón + JS)
 *   .taller-controles  fila de controles (slider/botón) de un simulador
 *   .taller-canvas     lienzo de una simulación
 *   .taller-formula    resultado/fórmula destacada bajo un simulador
 *   .taller-value      valor puntual destacado (monoespaciado) junto a un control
 *
 * A propósito, esto es TODA la lista: cualquier widget de un capítulo
 * concreto sin equivalente nativo (barra de progreso, "dados", cuadrícula
 * de calor, …) se resuelve con estilos en línea (`style="…"`) puestos
 * directamente sobre sus elementos en vez de sumar una clase más aquí —
 * así el HTML de la página es autocontenido y un profesor que abra el
 * editor ve ahí mismo, en el propio marcado, qué produce cada estilo, sin
 * tener que saber que este archivo aparte existe. Ver build/README.md →
 * "Estilos de widgets específicos de un capítulo". Los pocos casos que sí
 * necesitan layout compartido reutilizan clases nativas de BookStack
 * (p. ej. `class="grid half"` para dos columnas, la misma que usa el
 * botón "Insert Grid" del editor) en vez de duplicar algo que el editor
 * ya sabe producir.
 */

.taller {
  max-width: 46rem;
}

/* Módulo colapsable: <details class="card"><summary>…</summary>…</details> */
.taller details.card {
  margin: 1.5rem 0;
  padding: 0;
  overflow: hidden;
}
.taller details.card > summary {
  cursor: pointer;
  padding: 0.9rem 1.2rem;
  background: var(--color-primary-light);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.taller details.card > summary::-webkit-details-marker {
  display: none;
}
.taller details.card > summary h3,
.taller details.card > summary h4 {
  display: inline;
  margin: 0;
  color: var(--color-primary);
}
.taller details.card > summary::after {
  content: '▸';
  color: var(--color-primary);
  transition: transform 120ms ease;
  flex-shrink: 0;
}
.taller details.card[open] > summary::after {
  transform: rotate(90deg);
}
.taller details.card > summary + * {
  margin-top: 0;
}
.taller details.card > *:not(summary) {
  padding: 0 1.2rem;
}
.taller details.card > *:last-child {
  padding-bottom: 1.2rem;
}

/* Pregunta con respuesta oculta: <details class="callout info"><summary>…</summary>…</details> */
.taller details.callout {
  cursor: default;
}
.taller details.callout > summary {
  cursor: pointer;
  font-weight: 600;
}
.taller details.callout > summary::-webkit-details-marker {
  display: none;
}
.taller details.callout > summary::before {
  /* Oculta el icono de bombilla nativo de .callout solo en la fila de resumen;
     el bloque de respuesta, abajo, conserva el suyo. */
  position: static;
  margin-inline-end: 0.4em;
}
.taller details.callout[open] > summary {
  margin-bottom: 0.6rem;
}

/* Panel de un simulador (controles + canvas + lectura de resultado) */
.taller .card {
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
}
.taller .card h4 {
  margin-top: 0;
}

.taller-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.taller-controles label {
  font-weight: 600;
  font-size: 0.9rem;
}
.taller-controles input[type="range"] {
  flex: 1;
  min-width: 140px;
}

.taller-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0.75rem auto;
  border: 1px solid var(--color-primary-light);
  border-radius: 6px;
}

.taller-formula {
  text-align: center;
  font-size: 0.95rem;
  margin: 0.5rem 0;
  overflow-x: auto;
}

.taller-value {
  font-family: var(--font-code);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .taller details.card > summary::after {
    transition: none;
  }
}