/* ═══════════════════════════════════════════════════════════════════════════
   v1.132 · el índice automático: los títulos de la hoja con su página
   (js/regions/indice-region.js; las cuentas, js/math/indice-doc.js)
   Todo con los colores del tema (claro y oscuro). Tres aspectos:
     libro    con serifa, el nivel 1 en versalitas y puntos guía finos
     moderno  número de sección en un círculo de color, raya de color
     sobrio   la letra de la hoja, sin adornos
   ═══════════════════════════════════════════════════════════════════════════ */
.esci-indice { min-width: 220px; }
.esci-indice > .esci-body { padding: 4px 6px 6px; }
.esci-ix {
  --ix-acento: var(--accent);
  --ix-tinta: var(--ink);
  --ix-tinta-2: var(--ink-2);
  --ix-puntos: var(--ink-4);
  color: var(--ix-tinta);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.35;
}
.esci-ix-titulo {
  font-size: 1.6em; font-weight: 600; letter-spacing: .01em;
  color: var(--ix-acento);
  padding: 0 0 .3em; margin: 0 0 .55em;
  border-bottom: 1.5px solid var(--ix-acento);
}
.esci-ix-lista { list-style: none; margin: 0; padding: 0; }
.esci-ix-e { margin: 0; padding: 0 0 0 var(--ix-sangria, 0); break-inside: avoid; page-break-inside: avoid; }
/* la fila es un botón (clic = ir al título) que se ve como una línea de libro */
.esci-ix-fila {
  display: flex; align-items: baseline; gap: .45em; width: 100%;
  margin: 0; padding: .16em .25em; border: 0; border-radius: var(--r-xs);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.esci-ix-fila:hover { background: var(--accent-soft); }
.esci-ix-fila:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.esci-ix-num { flex: none; min-width: 1.7em; font-variant-numeric: tabular-nums; color: var(--ix-acento); font-weight: 600; }
.esci-ix-txt { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* los puntos guía: una raya de puntos que llena el hueco hasta el número
   (se imprime bien: es un borde, no una imagen de fondo) */
.esci-ix-puntos { flex: 1 1 1.5em; min-width: 1.5em; align-self: flex-end; margin-bottom: .32em; border-bottom: 1.5px dotted var(--ix-puntos); }
.esci-ix-puntos.is-sin { border-bottom-color: transparent; }
.esci-ix-pag { flex: none; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums lining-nums; color: var(--ix-tinta); }

/* el nivel 1, más presente; el 3, más discreto */
.esci-ix-e.is-n1 > .esci-ix-fila { font-weight: 600; padding-top: .42em; }
.esci-ix-e.is-n1:first-child > .esci-ix-fila { padding-top: .16em; }
.esci-ix-e.is-n2 > .esci-ix-fila { color: var(--ix-tinta); }
.esci-ix-e.is-n3 > .esci-ix-fila { color: var(--ix-tinta-2); font-size: .93em; }
.esci-ix-e.is-cuadro > .esci-ix-fila { font-style: italic; font-weight: 400; }
.esci-ix-e.is-n1 .esci-ix-pag { font-weight: 600; }

/* ── libro ── */
.esci-ix[data-estilo="libro"] .esci-ix-titulo { font-variant: small-caps; letter-spacing: .04em; border-bottom-width: 1px; }
/* las versalitas achican la letra: el nivel 1 sube un poco para seguir mandando */
.esci-ix[data-estilo="libro"] .esci-ix-e.is-n1 > .esci-ix-fila .esci-ix-txt { font-variant: small-caps; letter-spacing: .02em; font-size: 1.1em; }
.esci-ix[data-estilo="libro"] .esci-ix-puntos { border-bottom-width: 1px; }

/* ── moderno ── */
.esci-ix[data-estilo="moderno"] { font-family: var(--sans); font-size: 14.5px; }
.esci-ix[data-estilo="moderno"] .esci-ix-titulo { font-weight: 700; border-bottom: 0; padding-left: .55em; border-left: 5px solid var(--ix-acento); color: var(--ix-tinta); }
.esci-ix[data-estilo="moderno"] .esci-ix-e.is-n1 > .esci-ix-fila .esci-ix-num {
  min-width: 1.75em; height: 1.75em; line-height: 1.75em; border-radius: 50%; text-align: center;
  background: var(--ix-acento); color: var(--on-accent); font-size: .85em;
}
.esci-ix[data-estilo="moderno"] .esci-ix-e.is-n1 .esci-ix-pag { color: var(--ix-acento); }
.esci-ix[data-estilo="moderno"] .esci-ix-puntos { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: var(--line); }

/* ── sobrio ── */
.esci-ix[data-estilo="sobrio"] { font-family: inherit; }
.esci-ix[data-estilo="sobrio"] .esci-ix-titulo { color: var(--ix-tinta); font-size: 1.3em; border-bottom-color: var(--line); }
.esci-ix[data-estilo="sobrio"] .esci-ix-num { color: var(--ix-tinta-2); }

/* las fórmulas de un título, del tamaño de su línea */
.esci-ix-txt .katex { font-size: 1.02em; }
.esci-ix-tex { font-family: var(--mono); font-size: .9em; }

/* la hoja sin títulos: lo dice y explica cómo ponerlos */
.esci-ix-vacio { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: .7em .9em; background: var(--sunk); font-family: var(--sans); }
.esci-ix-vacio-t { margin: 0 0 .35em; font-weight: 600; color: var(--ink); }
.esci-ix-vacio-t i { color: var(--accent); }
.esci-ix-vacio-d { margin: 0; font-size: .9em; color: var(--ink-2); }
.esci-ix-espera { margin: 0; color: var(--ink-3); font-family: var(--sans); font-size: .9em; }
.esci-ix-nota { margin: .55em 0 0; font-family: var(--sans); font-size: .8em; color: var(--ink-3); }

/* ── la ventana de opciones ── */
.esci-ixo { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.15fr); gap: 18px; align-items: start; }
.esci-ixo-izq { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.esci-ixo-campo { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-ui-sm); color: var(--ink-2); }
.esci-ixo-rot { font-weight: 600; color: var(--ink); }
.esci-ixo-ayuda { color: var(--ink-3); }
/* tres clases: el campo de un modal pesa (0,2,1) (CLAUDE.md §9) */
.esci-ixo .esci-ixo-campo .esci-ixo-sel { width: 100%; min-height: 32px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.esci-ixo-grupo { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 6px 10px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.esci-ixo-grupo legend { padding: 0 4px; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.esci-ixo-marca { display: flex; align-items: center; gap: 6px; font-size: var(--fs-ui-sm); color: var(--ink); cursor: pointer; min-height: 26px; }
.esci-ixo-marca input { width: 16px; height: 16px; accent-color: var(--accent); }
.esci-ixo-der { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.esci-ixo-vt { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.esci-ixo-vista { max-height: 420px; overflow: auto; padding: 16px 18px; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--r-sm); box-shadow: var(--shadow-1); }
.esci-ixo-vista .esci-ix-fila { cursor: default; }
.esci-ixo-vista .esci-ix-fila:hover { background: transparent; }
.esci-ixo-pie { margin: 0; font-size: var(--fs-ui-sm); color: var(--ink-3); }
@media (max-width: 720px) { .esci-ixo { grid-template-columns: 1fr; } .esci-ixo-vista { max-height: 260px; } }

@media print {
  .esci-ix-fila { cursor: auto; }
  .esci-ix-fila:hover { background: transparent; }
  .esci-ix-nota, .esci-ix-espera { display: none; }
}