/*
 * Índice de Blog — estilos del TOC plegable.
 *
 * Todos los colores se derivan de `currentColor` (el color de texto que herede
 * del tema), así que el componente queda legible tanto en blogs de fondo claro
 * como oscuro. La «card» es semitransparente sobre ese mismo color + un borde
 * + una sombra suave, de modo que se distingue del fondo en cualquier tema.
 * El degradado de acento (rosa/violeta) es de marca y funciona sobre ambos.
 */
.itoc{
  --itoc-text: inherit;
  --itoc-muted: color-mix(in srgb, currentColor 65%, transparent);
  --itoc-border: color-mix(in srgb, currentColor 22%, transparent);
  --itoc-border-hover: color-mix(in srgb, currentColor 62%, transparent);
  --itoc-line: color-mix(in srgb, currentColor 15%, transparent);
  --itoc-faint: color-mix(in srgb, currentColor 5%, transparent);
  --itoc-faint-2: color-mix(in srgb, currentColor 8%, transparent);
  --itoc-hairline: color-mix(in srgb, currentColor 16%, transparent);
  --itoc-accent-1: rgba(255,43,214,.35);
  --itoc-accent-2: rgba(124,58,237,.30);
  --itoc-offset: 96px;
  margin: 22px 0 28px;
}

/* Card: fondo semitransparente sobre el color de texto (hereda el fondo real de la web) */
.itoc__card{
  background: var(--itoc-faint);
  color: var(--itoc-text);
  border: 1px solid var(--itoc-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
  transition: border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.itoc__card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(135deg, var(--itoc-accent-1), var(--itoc-accent-2));
  opacity:.14;
}
.itoc__card:hover{
  border-color: var(--itoc-border-hover);
  box-shadow: 0 16px 44px rgba(0,0,0,.18);
}

.itoc__details{ position: relative; }

.itoc__summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.itoc__summary::-webkit-details-marker{ display:none; }

.itoc__summaryLeft{
  display:flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}
.itoc__title{
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .2px;
}
.itoc__subtitle{
  font-size: .82rem;
  color: var(--itoc-muted);
  font-weight: 700;
}

.itoc__summaryRight{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--itoc-hairline);
  background: var(--itoc-faint);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.itoc__summary:hover .itoc__summaryRight{
  border-color: var(--itoc-border-hover);
  background: var(--itoc-faint-2);
}
.itoc__chevIcon{
  width: 18px;
  height: 18px;
  display:block;
}
.itoc__details[open] .itoc__summaryRight{
  border-color: var(--itoc-border-hover);
}
.itoc__details[open] .itoc__summaryRight .itoc__chevIcon{
  transform: rotate(180deg);
  transition: transform .15s ease;
}

.itoc__body{
  position: relative;
  z-index: 1;
  padding: 0 16px 14px;
  border-top: 1px solid var(--itoc-line);
}
.itoc__nav{ margin-top: 12px; }

/* LISTA: elegante (sin aspecto de botones) */
.itoc__tree,
.itoc__list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.itoc__h2{ margin: 0; }

/* H2 row / summary */
.itoc__h2row,
.itoc__h2summary{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  text-align: left;
}
.itoc__h2summary{ cursor: pointer; list-style: none; }
.itoc__h2summary::-webkit-details-marker{ display:none; }

.itoc__chev{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--itoc-hairline);
  background: var(--itoc-faint);
  flex: 0 0 auto;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.itoc__chev .itoc__chevIcon{ width: 16px; height: 16px; }
.itoc__section:hover .itoc__chev{
  border-color: var(--itoc-border-hover);
  background: var(--itoc-faint-2);
}
.itoc__section[open] .itoc__chev .itoc__chevIcon{
  transform: rotate(180deg);
}

/* Enlaces: texto + punto (sin “pill”) */
.itoc__link{
  color: var(--itoc-text);
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.32;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
}
.itoc__link:before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  margin-top: .62em;
  background: var(--itoc-muted);
  box-shadow: 0 0 0 1px var(--itoc-line);
  flex: 0 0 auto;
}
.itoc__link:hover{
  border-bottom-color: var(--itoc-border-hover);
}
.itoc__link.is-active{
  font-weight: 900;
  border-bottom-color: var(--itoc-border-hover);
}
.itoc__link.is-active:before{
  background: currentColor;
  box-shadow: 0 0 0 1px var(--itoc-hairline), 0 0 16px rgba(255,43,214,.12);
}

/* H2 más prominente */
.itoc__link--h2{
  font-weight: 900;
  font-size: .98rem;
}
.itoc__link--h2:before{
  width: 8px;
  height: 8px;
  margin-top: .55em;
  background: linear-gradient(135deg, rgba(255,43,214,.85), rgba(124,58,237,.80));
  box-shadow: 0 0 0 1px var(--itoc-hairline), 0 0 18px rgba(255,43,214,.10);
}

/* Hijos con guía visual */
.itoc__children{
  margin: 6px 0 10px 14px;
  padding-left: 14px;
  border-left: 1px solid var(--itoc-line);
}
.itoc__list--h3{ display: grid; gap: 6px; }
.itoc__node--h3 .itoc__link{
  font-weight: 750;
  font-size: .92rem;
  color: color-mix(in srgb, currentColor 90%, transparent);
}
.itoc__node--h3 .itoc__link:before{
  width: 6px; height: 6px;
  background: color-mix(in srgb, currentColor 55%, transparent);
}
.itoc__list--h4{
  margin: 6px 0 0 14px;
  padding-left: 14px;
  border-left: 1px solid var(--itoc-line);
  display: grid;
  gap: 6px;
}
.itoc__node--h4 .itoc__link{
  font-weight: 700;
  font-size: .88rem;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.itoc__node--h4 .itoc__link:before{
  width: 5px; height: 5px;
  background: color-mix(in srgb, currentColor 40%, transparent);
}

/* Focus visible (accesibilidad) */
.itoc__link:focus-visible{
  outline: 2px solid var(--itoc-border-hover);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Scroll margin para anchors */
h2[id],h3[id],h4[id]{ scroll-margin-top: calc(var(--itoc-offset) + 8px); }

@media (max-width: 767px){
  .itoc{ margin: 18px 0 22px; }
  .itoc__summary{ padding: 12px 14px; }
  .itoc__body{ padding: 0 14px 12px; }
  .itoc__h2row, .itoc__h2summary{ padding: 10px 0; }
  .itoc__children{ margin-left: 12px; padding-left: 12px; }
  .itoc__summaryRight{ width: 32px; height: 32px; }
  .itoc__chev{ width: 30px; height: 30px; }
}

/* =====================================================================
 * v2.0 — Features opcionales (activados por classes en el <nav>)
 * =================================================================== */

/* Reading time -------------------------------------------------------- */
.itoc__readingTime{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  color: var(--itoc-muted);
  margin-top: 2px;
  font-weight: 600;
}

/* Progress bar -------------------------------------------------------- */
.itoc__progress{
  position: relative;
  height: 3px;
  background: var(--itoc-faint-2);
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  margin-bottom: -1px; /* solapa con el borde del card */
}
.itoc__progressBar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--itoc-accent-1), var(--itoc-accent-2));
  transition: width .12s linear;
}

/* Botón "volver arriba" ----------------------------------------------- */
.itoc__backToTop{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--itoc-border);
  background: var(--itoc-faint-2);
  color: var(--itoc-text);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 50;
  transition: transform .15s ease, opacity .15s ease;
}
.itoc__backToTop[hidden]{ display: none; }
.itoc__backToTop:hover{
  transform: translateY(-2px);
  border-color: var(--itoc-border-hover);
}
.itoc__backToTop:focus-visible{
  outline: 2px solid var(--itoc-border-hover);
  outline-offset: 3px;
}

/* Botón "copiar enlace de sección" ------------------------------------ */
.itoc__copyLink{
  background: transparent;
  border: 0;
  padding: 0 4px;
  color: var(--itoc-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.itoc__copyLink:focus-visible,
.itoc__h2row:hover .itoc__copyLink,
.itoc__h2summary:hover .itoc__copyLink,
.itoc__node:hover .itoc__copyLink{
  opacity: 1;
}
.itoc__copyLink:hover{ color: var(--itoc-text); }
.itoc__copyLink.is-copied{
  opacity: 1;
  color: #10b981;
}

/* Numeración (CSS counters; sin JS) -----------------------------------
 * Reset compartido del ::before para los 3 estilos (decimal/roman/alpha).
 * Solo `content:` varía. Centralizado para que cambios futuros (e.g.
 * `display:inline-block`) no tengan que duplicarse en 3 lugares. */
.itoc[class*="itoc--numbering-"] .itoc__tree{ counter-reset: itoc-h2; }
.itoc[class*="itoc--numbering-"] .itoc__h2{ counter-increment: itoc-h2; }
.itoc[class*="itoc--numbering-"] .itoc__h2 > details > summary .itoc__link::before,
.itoc[class*="itoc--numbering-"] .itoc__h2 > .itoc__h2row .itoc__link::before{
  /* Reescribir solo para top-level: el bullet original se conserva si no se especifica. */
  font-weight: 700;
  background: transparent;
  width: auto;
  height: auto;
  box-shadow: none;
  margin-top: 0;
}
.itoc--numbering-decimal .itoc__h2 > details > summary .itoc__link::before,
.itoc--numbering-decimal .itoc__h2 > .itoc__h2row .itoc__link::before{
  content: counter(itoc-h2) ". ";
}
.itoc--numbering-roman .itoc__h2 > details > summary .itoc__link::before,
.itoc--numbering-roman .itoc__h2 > .itoc__h2row .itoc__link::before{
  content: counter(itoc-h2, upper-roman) ". ";
}
.itoc--numbering-alpha .itoc__h2 > details > summary .itoc__link::before,
.itoc--numbering-alpha .itoc__h2 > .itoc__h2row .itoc__link::before{
  content: counter(itoc-h2, upper-alpha) ". ";
}

/* H3 sub-numeración (solo cuando hay numeración decimal — los tipos
 * roman/alpha generalmente no llevan sub-índices). */
.itoc--numbering-decimal .itoc__children{ counter-reset: itoc-h3; }
.itoc--numbering-decimal .itoc__node--h3{ counter-increment: itoc-h3; }
.itoc--numbering-decimal .itoc__node--h3 .itoc__link::before{
  content: counter(itoc-h2) "." counter(itoc-h3) " ";
  font-weight: 700;
  background: transparent;
  width: auto;
  height: auto;
  box-shadow: none;
  margin-top: 0;
}

/* Sticky lateral (desktop) -------------------------------------------- */
@media (min-width: 1024px){
  .itoc--sticky-desktop{
    position: sticky;
    top: 96px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}
/* Para temas que necesitan personalizar el breakpoint, JS añade
   `.itoc--sticky-active` cuando el window width supera el data-itoc-sticky-breakpoint.
   El sticky base usa 1024 vía media query; el modifier hace el sticky con un
   offset configurable. */
.itoc--sticky-active{
  position: sticky;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Iconos alternativos: para no romper el SVG actual, el módulo solo
 * conmuta el contenido del span vía CSS content. */
.itoc--icon-plus .itoc__chevIcon,
.itoc--icon-arrow .itoc__chevIcon,
.itoc--icon-none .itoc__chevIcon{ display: none; }
.itoc--icon-plus .itoc__summaryRight::before,
.itoc--icon-plus .itoc__chev::before{
  content: "+";
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.itoc--icon-arrow .itoc__summaryRight::before,
.itoc--icon-arrow .itoc__chev::before{
  content: "›";
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.itoc--icon-none .itoc__summaryRight{ display: none; }
.itoc--icon-none .itoc__chev{ display: none; }

/* Print-friendly: activo por defecto (behavior.print_friendly=true).
 * Si el admin desactiva la opción, el `<nav>` gana la class
 * `.itoc--no-print-friendly` y los overrides se neutralizan. La doble
 * negación (`:not(.itoc--no-print-friendly)`) preserva el comportamiento
 * v1.9 exacto cuando el setting no se ha tocado. */
@media print{
  .itoc:not(.itoc--no-print-friendly) .itoc__progress,
  .itoc:not(.itoc--no-print-friendly) .itoc__backToTop,
  .itoc:not(.itoc--no-print-friendly) .itoc__copyLink{ display: none !important; }
  .itoc:not(.itoc--no-print-friendly) .itoc__body{ display: block !important; }
  .itoc:not(.itoc--no-print-friendly) .itoc__children{ display: block !important; }
}