/* Módulo «indice»: el índice de la portada en ventanas (app/modulos/indice.php).
   Se enlaza después de site.css y antes del sitio.css de cada web, y solo usa las variables del
   tema: cada web sale con su tipografía y sus colores. Móvil primero. */

/* ── El bloque en el móvil: mapa, buscador, botones de zona y enlaces, uno debajo de otro ── */
.atlas--idx{display:block}
.atlas--idx>.atlas-map{margin-bottom:1.1rem}

/* Rótulos de grupo, como los del menú («Provincias», «Explorar»), y los números de sitios */
.idx-h{margin:1.15rem 0 .35rem;color:var(--dim);font:500 .95rem/1.3 var(--display)}
.idx-c{color:var(--dim);font-weight:400;font-size:.85em;font-variant-numeric:tabular-nums}

/* Los dos buscadores (el del índice y el de dentro de una ventana). Salen ocultos en el HTML y los
   enseña indice.js, que es quien filtra: sin JavaScript no hay campo que no haga nada. Letra de
   16 px o más, que con menos el iPhone amplía la página al tocar el campo. */
.idx-busca input,.idx-f input{display:block;width:100%;height:2.9rem;padding:0 1rem;border:1px solid var(--rule);border-radius:999px;background:var(--deep);color:var(--snow);font:400 1.05rem/1.2 var(--text);-webkit-appearance:none;appearance:none}
.idx-busca input::placeholder,.idx-f input::placeholder{color:var(--dim)}
.idx-busca input:focus,.idx-f input:focus{outline:2px solid var(--acento);outline-offset:1px}
.idx-res{list-style:none;margin:.4rem 0 0;padding:.25rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--deep)}
.idx-res a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.6rem;border-radius:4px;color:var(--snow);text-decoration:none;font:600 1.05rem/1.25 var(--display)}
.idx-res a:hover,.idx-res a:focus-visible{background:var(--deep2);color:var(--snow)}
.idx-res a:focus-visible{outline-offset:-2px}
.idx-res small{flex:none;max-width:45%;color:var(--dim);font:400 .85rem/1.2 var(--text);text-align:right}
.idx-nada{padding:.6rem;color:var(--dim)}

/* ── Las zonas: un botón por zona, con su número de sitios ──
   Cada zona es un <details>. Su <summary> es el botón y, abierto, su lista sale en una ventana fija.
   El velo es el «::before» del <summary> y el aspa su «::after»: tocar el velo o el aspa es tocar el
   <summary>, que la cierra. Ni «popover» ni JavaScript: vale en cualquier navegador con <details>.
   La ventana va anclada ARRIBA, no centrada ni pegada abajo: así no se mueve cuando el buscador de
   dentro acorta la lista, y el teclado del móvil no tapa el campo. Como su borde de arriba y sus
   lados son fijos, el aspa se puede colocar en su esquina aunque no sea hija suya.
   OJO: una ventana fija se queda dentro de cualquier antepasado que lleve «transform», «filter»,
   «contain» o un «z-index» propio. El bloque del mapa de la portada no puede llevarlos. */
.idx-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;--hoja-top:3.4rem;--hoja-lado:.5rem}
.idx-tile{display:flex;align-items:center;justify-content:space-between;gap:.5rem;box-sizing:border-box;height:100%;min-height:3.25rem;padding:.5rem .8rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--deep);color:var(--snow);font:600 1.05rem/1.2 var(--display);cursor:pointer}
.idx-tile:hover{border-color:var(--haze)}
.idx-tile .idx-c{flex:none}
/* Un nombre que no cabe en su botón («Centroamérica», a 360 px) se parte por sílabas, con su guion;
   solo si el navegador no sabe, por donde pueda. Sin esto ensanchaba su columna o se salía */
.idx-n{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.idx-v[open]>.idx-tile::before{content:"";position:fixed;inset:0;z-index:200;background:rgba(var(--chapa-rgb),.55);cursor:default}
/* El aspa, dibujada (dos líneas cruzadas): no depende de que la letra de la web traiga el signo, y
   un lector de pantalla no la lee como parte del nombre del botón */
.idx-v[open]>.idx-tile::after{content:"";position:fixed;z-index:202;top:calc(var(--hoja-top) + .55rem);right:calc(var(--hoja-lado) + .7rem);width:2.75rem;height:2.75rem;border:1px solid var(--rule);border-radius:50%;
  background:linear-gradient(45deg,transparent calc(50% - 1px),var(--snow) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/1rem 1rem no-repeat,
    linear-gradient(-45deg,transparent calc(50% - 1px),var(--snow) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/1rem 1rem no-repeat,
    var(--deep2)}
.idx-hoja{position:fixed;z-index:201;top:var(--hoja-top);left:var(--hoja-lado);right:var(--hoja-lado);max-height:calc(100vh - var(--hoja-top) - .6rem);max-height:calc(100dvh - var(--hoja-top) - .6rem);overflow-y:auto;overscroll-behavior:contain;scroll-padding:8.5rem 0 1rem;padding:0 1rem calc(.8rem + env(safe-area-inset-bottom,0px));border-radius:14px;background:var(--deep);color:var(--snow);box-shadow:0 18px 50px rgba(var(--sombra-rgb),.4)}
.idx-hoja-h{position:sticky;top:0;z-index:1;padding:.45rem 0 .7rem;background:var(--deep);border-bottom:1px solid var(--rule)}
.idx-hoja-t{display:flex;align-items:baseline;gap:.5rem;padding:.75rem 3.4rem .55rem 0}
.idx-hoja-t h3{margin:0;font:600 1.3rem/1.2 var(--display)}
.idx-f{margin:.2rem 0 .1rem}
.idx-f input{background:var(--night)}
.idx-vacio{margin:0;padding:.8rem 0;color:var(--dim)}
.idx-hoja:focus-visible{outline-offset:-4px}
/* Un doble toque sobre el botón no puede acabar en un sitio que nadie eligió, ni abrir y cerrar a la
   vez: la hoja sale justo debajo del dedo. Durante casi medio segundo después de abrirse, nada de la
   ventana recibe toques (ni sus enlaces, ni el velo, ni el aspa): el segundo toque cae en la página
   de debajo, donde está el propio botón, que tampoco lo recibe. Va en el <details> y no en la lista
   porque es lo único que el navegador recalcula en cada apertura: lo de dentro, mientras está
   cerrado, no se recalcula, y una animación puesta ahí solo corría la primera vez.
   No es un adorno: va también con «menos movimiento». */
.idx-v[open]{animation:idx-quieto .45s step-end}
@keyframes idx-quieto{from{pointer-events:none}}
/* Con una ventana abierta, la página de debajo no se desplaza (lo mismo que hace el menú). Donde la
   barra de desplazamiento ocupa sitio (Windows), su hueco se guarda para que la página no dé un
   salto; ese hueco no lo tapa el velo, así que se pinta del color que deja el velo sobre el fondo. */
html:has(.idx-v[open]){overflow:hidden;scrollbar-gutter:stable;background:color-mix(in srgb,rgb(var(--chapa-rgb)) 55%,var(--night))}
@media (prefers-reduced-motion:no-preference){
  .idx-v[open]>.idx-hoja{animation:idx-sube .18s ease}
  .idx-v[open]>.idx-tile::before{animation:idx-velo .18s ease}
  @keyframes idx-sube{from{translate:0 1rem;opacity:0}}
  @keyframes idx-velo{from{opacity:0}}
}

/* Los sitios de un grupo, en las columnas que quepan: «columns: N ancho» pone hasta N columnas de al
   menos ese ancho, así que el mismo renglón da dos en un móvil (desde 352 px de pantalla: el más
   común mide 360), una en uno muy estrecho y tres en la ventana del ordenador. Con nombres largos,
   la mitad. */
.idx-l{list-style:none;margin:0;padding:.3rem 0 .2rem;columns:3 9rem;column-gap:1rem}
.idx-l--largos{columns:2 17rem}
.idx-l li{break-inside:avoid}
.idx-l a{display:block;padding:.6rem 0;color:var(--haze);text-decoration:none;font:500 1rem/1.25 var(--display)}
.idx-l a:hover{color:var(--hot);text-decoration:underline}
.idx-mas{margin:0;padding:.2rem 0 .4rem;font:600 1rem/1.3 var(--display)}
.idx-mas a{display:inline-block;padding:.45rem 0;color:var(--link)}
.idx-mas a:hover{color:var(--hot)}
/* La flecha no es parte del texto del enlace: el segundo «content» la calla en los lectores de
   pantalla que lo entienden; los demás se quedan con el primero */
.idx-mas a::after{content:" \2192";content:" \2192" / ""}

/* «Explorar», las secciones y las zonas de dentro de una ventana: enlaces a su página, con su
   número, en las columnas que quepan */
.idx-enl{list-style:none;margin:0;padding:0 0 .3rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0 1rem;border-top:1px solid var(--rule)}
.idx-enl--largos{grid-template-columns:1fr}
.idx-enl li{display:flex;align-items:baseline;gap:.5rem;font:500 1.05rem/1.25 var(--display)}
.idx-enl a{flex:1;padding:.55rem 0;color:var(--haze);text-decoration:none}
.idx-enl a:hover{color:var(--hot);text-decoration:underline}
.idx-hoja .idx-h{margin-top:.6rem}

/* Pantalla muy baja (un móvil apaisado): la cabecera de la ventana no se queda pegada, que se comía
   más de un tercio del alto */
@media (max-height:30rem){.idx-hoja-h{position:static}.idx-hoja{scroll-padding-top:1rem}}

/* ── Pantallas medianas: más botones por fila y la ventana centrada ── */
@media (min-width:40rem){
  .idx-vs{grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));--hoja-top:9vh;--hoja-lado:calc(50% - min(27rem,50vw - 2rem))}
  .idx-hoja{max-height:82vh;padding:0 1.6rem 1rem}
  .idx-hoja-h{padding:.6rem 0 .8rem}
  .idx-f{max-width:24rem}
  .idx-l{column-gap:1.6rem}
  .idx-v[open]>.idx-tile::after{right:calc(var(--hoja-lado) + 1.2rem)}
}

/* ── Ordenador: el mapa a la izquierda y el índice a su lado ── */
@media (min-width:60rem){
  .atlas--idx{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:1.8rem;align-items:start}
  .atlas--idx>.atlas-map{grid-area:mapa;margin-bottom:0}
  .atlas--idx>.idx-busca{grid-area:busca}
  .atlas--idx>.idx{grid-area:zonas}
  .atlas--idx>.idx-exp{grid-area:exp}
  /* Pocas zonas: sus botones, junto al mapa, entre el buscador y «Explorar» */
  .atlas--zl{grid-template-rows:auto auto 1fr;grid-template-areas:"mapa busca" "mapa zonas" "mapa exp"}
  .atlas--zl .idx-vs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Muchas: junto al mapa quedan el buscador y «Explorar», y los botones van debajo a todo el ancho */
  .atlas--dir{grid-template-rows:auto 1fr auto;grid-template-areas:"mapa busca" "mapa exp" "zonas zonas"}
  .atlas--dir>.idx{margin-top:.2rem}
  .atlas--idx .idx-exp>.idx-h:first-child{margin-top:.9rem}
  .idx-l a{padding:.42rem 0}
  .idx-enl a{padding:.4rem 0}
}