/* =====================================================================
   Japón Solar · Índice de contenido de las guías
   Dos piezas de la misma cosa, con la paleta de la versión 10:
   · el sumario del principio, que se abre y se cierra
   · el botón flotante de abajo a la derecha, que abre la misma lista

   El botón lleva un aro de terracota permanente: es lo que lo hace
   visible sobre el papel cálido sin tener que gritar con un color fuerte.
   ===================================================================== */

/* El sitio ya trae scroll-padding-top:74px por el encabezado pegajoso;
   esto solo agrega un respiro para que el título no quede pegado a él. */
html.v10 .art-cuerpo h2,
html.v10 .art-faq h2{scroll-margin-top:16px}
html.v10 #inicio{scroll-margin-top:0}


/* =====================================================================
   1. El sumario del principio
   Idea: la página de apertura de un reportaje impreso. Una regla gruesa
   arriba, el sumario en dos columnas, números en terracota.
   ===================================================================== */
html.v10 .ind-a{margin:0 0 40px}
html.v10 .ind-a-caja{border-top:2px solid var(--tinta);border-bottom:1px solid var(--linea)}

html.v10 .ind-a-tit{
  display:flex;align-items:center;gap:12px;
  padding:14px 0;cursor:pointer;
  list-style:none;font-family:var(--sans);
}
html.v10 .ind-a-tit::-webkit-details-marker{display:none}
html.v10 .ind-a-tit::marker{content:""}
html.v10 .ind-a-tit:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
html.v10 .ind-a-rotulo{font-weight:650;font-size:15.5px;letter-spacing:.005em;color:var(--tinta)}
html.v10 .ind-a-num{font-size:14px;color:var(--gris);margin-left:auto}
html.v10 .ind-a-tit::after{
  content:"";flex:none;width:8px;height:8px;
  border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);
  transform:rotate(45deg);margin-top:-4px;transition:transform .18s ease;
}
html.v10 .ind-a-caja[open] .ind-a-tit::after{transform:rotate(-135deg);margin-top:3px}

html.v10 .ind-a-lista{
  list-style:none;counter-reset:ia;
  margin:0 0 20px;padding:0;
  columns:2;column-gap:40px;
}
html.v10 .ind-a-lista li{
  counter-increment:ia;break-inside:avoid;
  margin:0 0 10px;display:flex;gap:11px;align-items:baseline;
}
html.v10 .ind-a-lista li::before{
  content:counter(ia,decimal-leading-zero);
  font-family:var(--serif);font-size:13px;font-weight:600;
  color:var(--acento);min-width:1.7em;flex:none;
}
/* la especificidad es alta a propósito: el cuerpo del artículo pinta sus
   enlaces en negritas con subrayado, y el índice no debe verse así */
html.v10 .ind-a .ind-a-lista li > a{
  color:var(--texto);text-decoration:none;line-height:1.34;
  font-weight:400;box-shadow:none;
  border-bottom:1px solid transparent;
}
html.v10 .ind-a .ind-a-lista li > a:hover{color:var(--acento);border-bottom-color:var(--acento-claro)}
html.v10 .ind-a .ind-a-lista li > a:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}

/* Volver al inicio, al final de la guía (también es el respaldo cuando
   el navegador no corre JavaScript y el botón flotante no aparece) */
html.v10 .ind-a-volver{
  margin:38px 0 0;padding-top:22px;
  border-top:1px solid var(--linea);text-align:center;
}
html.v10 .ind-a-volver a{
  font-family:var(--sans);font-weight:600;font-size:15px;
  color:var(--gris);text-decoration:none;
  display:inline-block;padding:10px 16px;border-radius:999px;
}
html.v10 .ind-a-volver a:hover{color:var(--acento);background:var(--piedra)}
html.v10 .ind-a-volver a:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

@media (max-width:760px){
  html.v10 .ind-a-lista{columns:1}
  html.v10 .ind-a{margin-bottom:30px}
  html.v10 .ind-a-rotulo{font-size:15px}
  html.v10 .ind-a-num{font-size:13px}
  html.v10 .ind-a-tit{padding:16px 0}
}


/* =====================================================================
   2. El botón flotante
   ===================================================================== */
html.v10 .ind-b{position:fixed;z-index:58;right:22px;bottom:22px}
html.v10 .ind-b[hidden]{display:none}

html.v10 .ind-b-btn{
  display:inline-flex;align-items:center;gap:9px;
  font:inherit;font-family:var(--sans);font-size:14.5px;font-weight:600;
  color:var(--papel);background:var(--tinta);
  border:0;border-radius:999px;padding:11px 18px 11px 15px;cursor:pointer;
  /* El aro: un hilo de papel que lo despega del fondo y, afuera, la línea
     de terracota. Es lo que hace que se note sin ser un color chillón. */
  box-shadow:
    0 0 0 2px var(--papel),
    0 0 0 4px var(--acento),
    0 2px 6px rgba(26,25,23,.14),
    0 14px 34px -16px rgba(26,25,23,.45);
  transition:background .18s ease,transform .18s ease;
}
html.v10 .ind-b-btn:hover{background:var(--acento);transform:translateY(-1px)}
html.v10 .ind-b.abierto .ind-b-btn{background:var(--acento)}
/* el foco del teclado va MÁS afuera y en otro color, para no confundirse
   con el aro de siempre */
html.v10 .ind-b-btn:focus-visible{outline:3px solid var(--tinta);outline-offset:7px}

html.v10 .ind-b-icono{display:flex;flex-direction:column;gap:3px;width:14px;flex:none}
html.v10 .ind-b-icono i{display:block;height:2px;border-radius:1px;background:currentColor}
html.v10 .ind-b-icono i:nth-child(1){width:100%}
html.v10 .ind-b-icono i:nth-child(2){width:72%}
html.v10 .ind-b-icono i:nth-child(3){width:86%}

/* Entra una sola vez, apenas perceptible: lo suficiente para que el ojo
   lo registre de reojo, no tanto como para distraer de la lectura. */
@keyframes ind-b-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.v10 .ind-b.entrando .ind-b-btn{animation:ind-b-entra .34s ease-out both}

/* ---------- El panel ---------- */
html.v10 .ind-b-panel{
  position:absolute;right:0;bottom:calc(100% + 14px);
  width:min(23rem,calc(100vw - 44px));
  background:var(--papel);
  border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 2px 8px rgba(26,25,23,.08),0 26px 60px -24px rgba(26,25,23,.45);
  padding:6px 6px 8px;
  display:flex;flex-direction:column;max-height:min(70vh,560px);
}
html.v10 .ind-b-panel[hidden]{display:none}

html.v10 .ind-b-cab{
  display:flex;align-items:center;gap:10px;
  padding:10px 8px 10px 14px;border-bottom:1px solid var(--linea);
}
html.v10 .ind-b-cab strong{
  font-family:var(--sans);font-size:13px;font-weight:650;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
}
html.v10 .ind-b-cerrar{
  margin-left:auto;font:inherit;font-size:22px;line-height:1;
  color:var(--gris);background:none;border:0;cursor:pointer;
  width:32px;height:32px;border-radius:50%;
}
html.v10 .ind-b-cerrar:hover{background:var(--piedra);color:var(--tinta)}
html.v10 .ind-b-cerrar:focus-visible{outline:2px solid var(--acento);outline-offset:1px}

html.v10 .ind-b-lista{
  list-style:none;counter-reset:ib;margin:0;padding:6px 0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
html.v10 .ind-b-lista li{counter-increment:ib;margin:0}
html.v10 .ind-b-lista a{
  display:flex;gap:11px;align-items:baseline;
  padding:9px 14px;border-radius:9px;
  color:var(--texto);text-decoration:none;
  font-size:15.5px;line-height:1.3;
}
html.v10 .ind-b-lista a::before{
  content:counter(ib,decimal-leading-zero);
  font-family:var(--serif);font-size:12px;font-weight:600;
  color:var(--gris);min-width:1.7em;flex:none;
}
html.v10 .ind-b-lista a:hover{background:var(--piedra);color:var(--tinta)}
html.v10 .ind-b-lista a:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
html.v10 .ind-b-lista .aqui a{background:var(--acento-suave);color:var(--tinta);font-weight:650}
html.v10 .ind-b-lista .aqui a::before{color:var(--acento)}

html.v10 .ind-b-arriba{
  margin:4px 6px 2px;padding:11px 14px;
  border-top:1px solid var(--linea);
  font-family:var(--sans);font-size:14.5px;font-weight:600;
  color:var(--acento);text-decoration:none;text-align:center;
}
html.v10 .ind-b-arriba:hover{background:var(--piedra)}
html.v10 .ind-b-arriba:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}

/* Si choca con el botón de WhatsApp, se pasa a la izquierda. Hoy las guías
   no traen ese botón; si mañana se agrega, el índice se mueve solo. */
html.v10 .ind-b.ind-b-izq{right:auto;left:14px}
html.v10 .ind-b.ind-b-izq .ind-b-panel{right:auto;left:0}

@media (max-width:900px){
  html.v10 .ind-b{right:14px;bottom:14px}
  html.v10 .ind-b-btn{padding:10px 15px 10px 13px;font-size:14px}
  html.v10 .ind-b-panel{width:min(21rem,calc(100vw - 28px));max-height:min(62vh,460px)}
}
@media (max-width:420px){
  html.v10 .ind-b-panel{width:calc(100vw - 28px);right:0}
  html.v10 .ind-b.ind-b-izq .ind-b-panel{left:0;right:auto}
  /* La palabra "Secciones" se queda aunque la pantalla sea chica: un botón
     con puras rayitas se confunde con el menú del encabezado. */
  html.v10 .ind-b-btn{padding:10px 14px 10px 12px;font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  html.v10 .ind-b-btn{transition:none}
  html.v10 .ind-b-btn:hover{transform:none}
  html.v10 .ind-b.entrando .ind-b-btn{animation:none}
}