/* plegable.css — un <details> con el triángulo dibujado a mano.
   Se le quita el marcador nativo (`::-webkit-details-marker` y `list-style`)
   porque cada navegador pone uno distinto y descolocaba la fila. */

.plegable{margin-top:1rem; border-top:1px solid var(--line); padding-top:.85rem}
.plegable > summary{
  cursor:pointer; font-weight:600; font-size:.92rem; list-style:none;
  display:flex; align-items:center; gap:.4rem;
}
.plegable > summary::-webkit-details-marker{display:none}
.plegable > summary::before{content:'▸'; color:var(--muted); transition:transform .15s}
.plegable[open] > summary::before{transform:rotate(90deg)}
.plegable > summary span{color:var(--muted); font-weight:400}
.plegable .ayuda{display:block; margin:.15rem 0 .5rem}