/* La Documentación (web-v5): la Ayuda del programa, con su índice al lado. */

.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 24px 0 96px; align-items: start; }
.doc-indice { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; font-size: 0.9rem; padding-right: 6px; }
.doc-indice ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.doc-indice ul ul { gap: 2px; margin-top: 6px; }
.doc-indice span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); }
.doc-indice a { display: block; text-decoration: none; color: var(--texto-2); padding: 4px 8px; border-radius: 6px; border-left: 2px solid transparent; }
.doc-indice a:hover { color: var(--texto); background: var(--superficie-2); border-left-color: var(--ambar); }

.doc-cuerpo { min-width: 0; display: grid; gap: 8px; }
.doc-grupo { margin-top: 36px; }
.doc-grupo:first-child { margin-top: 0; }
.doc-capitulo {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px;
  padding: clamp(20px, 3vw, 32px); scroll-margin-top: 84px; color: var(--texto-2);
}
.doc-capitulo h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; color: var(--texto); margin-bottom: 14px; }
.doc-capitulo h4 { font-family: var(--mono); font-size: 1rem; color: var(--texto); margin: 22px 0 8px; }
.doc-capitulo p, .doc-capitulo li { max-width: 72ch; }
.doc-capitulo p + p { margin-top: 10px; }
.doc-capitulo ul, .doc-capitulo ol { padding-left: 22px; display: grid; gap: 6px; margin: 10px 0; }
.doc-capitulo strong { color: var(--texto); }
.doc-capitulo .info, .doc-capitulo .warning { border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 14px 0; max-width: 76ch; }
.doc-capitulo .info { border-left: 3px solid var(--traza); background: color-mix(in srgb, var(--traza) 10%, transparent); }
.doc-capitulo .warning { border-left: 3px solid var(--ambar); background: var(--ambar-suave); }

.doc-pregunta { border-top: 1px solid var(--linea); padding: 12px 0; }
.doc-pregunta:first-of-type { border-top: 0; }
.doc-pregunta summary { cursor: pointer; color: var(--texto); font-weight: 600; }
.doc-pregunta div { margin-top: 8px; }

.doc-glosario { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.doc-glosario div { border: 1px solid var(--linea); border-radius: 10px; padding: 14px; background: var(--superficie-2); }
.doc-glosario dt { font-family: var(--mono); font-weight: 600; color: var(--texto); }
.doc-glosario dd { margin: 6px 0 0; font-size: 0.92rem; }

@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; }
  .doc-indice { position: static; max-height: none; border: 1px solid var(--linea); border-radius: 12px; padding: 16px; background: var(--superficie); }
}

/* Que un código largo de la Ayuda no estire el capítulo más allá de un teléfono. */
.doc-capitulo { min-width: 0; overflow-wrap: anywhere; }
.doc-capitulo pre { overflow-x: auto; white-space: pre; overflow-wrap: normal; }
@media (max-width: 900px) { .doc { grid-template-columns: minmax(0, 1fr); } }