/* ============================================================================
   ÍNDICE «EN ESTA PÁGINA»
   ----------------------------------------------------------------------------
   ⚠️ ESTO VIVÍA EN maqueta/v1.2/v1.2.css, QUE NO SE CARGA EN WORDPRESS. El
   script ya está en el tema, pero un script sin su CSS no basta: en móvil la
   librería esconde el índice con `display: none`, así que en las 15 fichas de
   psicoterapeuta no había índice ninguno en un teléfono, aunque indice.js
   estuviera corriendo y lo estuviera plegando.

   Se trae tal cual, con las decisiones que ya se tomaron: el resumen no es un
   botón en escritorio, y la sección actual se marca sin filete de color.
   ========================================================================== */

/* El resumen del <details> hace de titular. `list-style: none` y el ::marker
   quitan el triangulito del navegador, que aquí sobra. */
.c-longread__index summary {
  list-style: none;
}

.c-longread__index summary::-webkit-details-marker { display: none; }

.c-longread__index summary h2 { display: inline; }

/* ⚠️ EN ESCRITORIO EL RESUMEN NO ES UN BOTÓN: es el titular de la columna. Al
   pulsar «En esta página» el índice se plegaba y desaparecía justo cuando hace
   falta. Quien cancela el clic es indice.js; aquí solo se quita la mano del
   cursor, para que no invite a pulsar. El plegado sigue existiendo en móvil,
   donde una lista de nueve enlaces sí estorba. */
@container (min-width: 64rem) {
  .c-longread__index summary { cursor: default; }
}

@container (max-width: 63.99rem) {
  .c-longread__index summary { cursor: pointer; }
}

/* La sección en la que estás. La marca la pone indice.js al pasar por delante.
 *
 * ⚠️ SIN FILETE DE COLOR A LA IZQUIERDA. Llevaba uno de 2 px en `accent-warm`,
 * el naranja de marca, que sobre la lista azul se leía como una alarma roja. La
 * marca se hace ahora solo con lo que la sección ya tiene: el azul oscuro del
 * :hover y el peso 500. Ni un color nuevo.
 */
.c-longread__index a {
  transition: color 160ms ease, font-weight 160ms ease;
}

.c-longread__index .es-aqui a {
  color: var(--wp--preset--color--primary);
  font-weight: var(--wp--custom--typography--weight--medium, 500);
}

/* ----------------------------------------------------------------------------
   ESCRITORIO: pegado JUSTO DEBAJO de la cabecera.
   ----------------------------------------------------------------------------
   plantilla.css lo pegaba a 48 px del borde, y la cabecera pegada mide más:
   el índice quedaba debajo de ella. componentes.js publica la altura real de
   la cabecera en --cds-header-visible; el índice la respeta. 2026-09-16.
   ------------------------------------------------------------------------- */
@container (min-width: 64rem) {
  .c-longread__index {
    top: calc(var(--cds-header-visible, 0px) + var(--wp--preset--spacing--40));
    transition: top 200ms ease;
  }
}

/* Los saltos del índice dejan sitio a lo que hay pegado arriba. */
.c-longread [id] {
  scroll-margin-top: calc(var(--cds-header-visible, 0px) + var(--wp--preset--spacing--60));
}

/* ----------------------------------------------------------------------------
   MÓVIL: una barra horizontal de chips, siempre a la vista.
   ----------------------------------------------------------------------------
   Antes era una línea plegada que había que tocar. Ahora es una barra pegada
   debajo de la cabecera —o arriba del todo cuando la cabecera se esconde al
   bajar— con un chip por sección; se desliza con el dedo y el chip de la
   sección actual se centra solo (indice.js). El <details> queda siempre
   abierto y su resumen escondido. 2026-09-16.
   ------------------------------------------------------------------------- */
@container (max-width: 63.99rem) {
  .c-longread__index {
    display: block;
    /* Como ítem de rejilla, sin esto crece hasta el ancho de los chips
       (min-width: auto) y la barra no desliza: se sale de la pantalla. */
    min-width: 0;
    max-width: 100vw;
    overflow: hidden;
    position: sticky;
    top: var(--cds-header-visible, 0px);
    z-index: 2;
    /* A sangre: de borde a borde de la ventana sea cual sea el margen del
       contenedor (20px en móvil, 48px en tableta; con -20px fijo quedaban
       28px sin cubrir a 768). Igual que las bandas del acordeón. */
    margin-inline: calc(50% - 50vw);
    padding: 0;
    background-color: var(--wp--preset--color--base);
    border-bottom: 1px solid var(--wp--preset--color--border);
    transition: top 200ms ease;
  }

  .c-longread__index summary { display: none; }

  .c-longread__index ol {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--20);
    margin: 0;
    /* El hueco lateral vuelve como padding, con el MISMO token que el
       contenedor (componentes.css .cmp__inner): gutter-sm en móvil y
       spacing-60 desde 48rem. Así el primer chip alinea con el texto. */
    padding: var(--wp--preset--spacing--20) var(--cds-indice-sangria, var(--wp--custom--space--gutter-sm));
    scroll-padding-inline: var(--cds-indice-sangria, var(--wp--custom--space--gutter-sm));
    list-style: none;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .c-longread__index ol::-webkit-scrollbar { display: none; }

  .c-longread__index li {
    /* Como flex, el <li> mide lo que mide el chip: con el <a> en inline-block
       el <li> guardaba ~10px de línea base por debajo y los chips quedaban
       altos dentro de la barra. */
    display: flex;
    flex: none;
    margin: 0;
    scroll-snap-align: center;
  }

  .c-longread__index a {
    display: block;
    padding: 0.4em 0.9em;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--wp--custom--radius--pill);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.2;
    white-space: nowrap;
    /* Un título largo no se lleva media barra: se recorta con puntos. */
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: var(--wp--preset--color--primary);
    background-color: transparent;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  }

  .c-longread__index .es-aqui a {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--on-primary);
    font-weight: var(--wp--custom--typography--weight--regular);
  }

  .c-longread [id] {
    scroll-margin-top: calc(var(--cds-header-visible, 0px) + 4rem);
  }
}

@container (min-width: 48rem) and (max-width: 63.99rem) {
  .c-longread__index { --cds-indice-sangria: var(--wp--preset--spacing--60); }
}

@media (prefers-reduced-motion: reduce) {
  .c-longread__index { transition: none; }
}

/* ----------------------------------------------------------------------------
   12 · EL ÍNDICE SE PEGA DE VERDAD
   ----------------------------------------------------------------------------
   `position: sticky` estaba declarado en plantilla.css desde el principio y NO
   FUNCIONABA. Medido bajando la página de 600 en 600 px: el índice empezaba a
   1663 px del borde y llegaba a −4337, o sea que se iba con el resto del texto.

   La causa es `.page { overflow: hidden }`, de pagina.css. Un antepasado con
   overflow distinto de `visible` se convierte en el contenedor de scroll del
   elemento pegajoso: el índice se pegaba a `.page`, que no se desplaza, así que
   no se pegaba a nada.

   `overflow-x: clip` recorta igual por los lados —que es para lo que estaba, por
   los trazos decorativos que sobresalen— pero NO crea contenedor de scroll.

   ⚠️ TIENE QUE SER `clip`, NO `hidden`. `overflow-x: hidden` con `overflow-y:
   visible` no es una combinación válida: el navegador convierte la `y` en
   `auto`, vuelve a haber contenedor de scroll y el sticky se rompe otra vez.

   Va aquí y no en pagina.css porque esa hoja es del tema y esto es la maqueta.
   ------------------------------------------------------------------------- */
.page {
  overflow: visible;
  overflow-x: clip;
  overflow-y: visible;
}

/* Sin índice (un artículo sin H2), el texto ocupa todo el ancho: no se queda
   en la columna estrecha de 16rem. */
@container (min-width: 64rem) {
  .c-longread__inner:not(:has(> .c-longread__index)) { grid-template-columns: 1fr; }
}
.c-articulo__cuerpo { min-width: 0; }

/* Fichas de profesional: sin el titular «En esta página» a la vista (Laura y
   Marta, 12-10-2026). Se queda para el lector de pantalla: nombra el índice. */
.c-longread__index--sin-titulo summary {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}