/* ==========================================================================
   CREATICS · indice.css — índice de la página (partes/indice.php + js/indice.js).
   Escritorio y tableta: barra fina que se queda fija bajo la cabecera al pasar el héroe.
   Móvil: no hay barra; el botón «Secciones» de la barra de abajo abre el panel.
   Requiere tokens + creatics.css. Prefijo .cs-indice
   ========================================================================== */

/* ---------- Barra (desde 768 px) ---------- */
/* La cabecera se pega a top: altura de la franja de administrador de WordPress (0 sin sesión);
   la barra, justo debajo. --cs-nav-h es la altura de la cabecera (la mide js/indice.js). */
.cs-indice{position:sticky;top:calc(var(--wp-admin--admin-bar--height, 0px) + var(--cs-nav-h, 77px));z-index:55;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.cs-indice__in{display:flex;align-items:center;gap:14px;padding-top:8px;padding-bottom:8px}
.cs-indice__titulo{flex:none;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-mute)}
.cs-indice__lista{display:flex;gap:4px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.cs-indice__lista::-webkit-scrollbar{display:none}
.cs-indice__lista li{flex:none}
.cs-indice__a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:var(--radius-pill);border:2px solid transparent;font-family:var(--font-heading);font-weight:600;font-size:var(--text-sm);line-height:1.2;color:var(--color-ink-soft);text-decoration:none;white-space:nowrap}
.cs-indice__a:hover{background:var(--neutral-100);color:var(--cs-ink)}
.cs-indice__a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
/* el apartado en el que estás, como las pastillas activas del sitio */
.cs-indice__a.is-actual{background:var(--cs-ink);border-color:var(--cs-ink);color:#fff}
@media (max-width:767px){.cs-indice{display:none}}
@media (max-width:900px){.cs-indice__titulo{display:none}}

/* ---------- Panel (móvil): se abre desde la barra de abajo ---------- */
.cs-indice-panel{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:85vh;margin:0;padding:0 0 calc(12px + env(safe-area-inset-bottom));overflow:auto;background:#fff;color:var(--cs-ink);border:0;border-top:var(--border-bold) solid var(--cs-ink);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:0 -10px 30px rgba(18,22,44,.18)}
.cs-indice-panel::backdrop{background:rgba(14,16,32,.45)}
.cs-indice-panel__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 8px 20px}
.cs-indice-panel__titulo{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-mute)}
.cs-indice-panel__cerrar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--cs-ink);color:var(--cs-ink);cursor:pointer}
.cs-indice-panel__cerrar .cs-i{width:20px;height:20px}
.cs-indice-panel__lista{margin:0;padding:0 12px;list-style:none}
.cs-indice-panel__lista li+li{border-top:1px solid var(--color-border)}
.cs-indice-panel__a{display:flex;justify-content:space-between;width:100%;min-height:52px;padding:10px 10px;border-radius:var(--radius-md);font-size:var(--text-md)}
.cs-indice-panel__a .cs-i{width:18px;height:18px;transform:rotate(-90deg);color:var(--color-ink-mute)}
.cs-indice-panel__a.is-actual .cs-i{color:#fff}

/* ---------- Botón «Secciones» de la barra de abajo (móvil) ---------- */
.cs-apn-barra__indice{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:52px;padding:0 14px;border-radius:var(--radius-pill);background:#fff;border:2px solid var(--cs-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);color:var(--cs-ink);cursor:pointer}
.cs-apn-barra__indice .cs-i{width:20px;height:20px}
.cs-apn-barra__indice:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
/* En móviles estrechos, solo el icono (el texto sigue para los lectores de pantalla) */
@media (max-width:380px){
	.cs-apn-barra__indice{width:52px;padding:0}
	.cs-apn-barra__indice span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}