/* Mejoras de usabilidad para la ficha de lugar (pueblos, despoblados con ficha propia).
   Se carga solo cuando ficha.grupo == "lugares" (ver detalle_ficha.html). */

/* 1) Indice fijo -- "En esta pagina" ------------------------------------ */
/* Rediseño aprobado en el catalogo de componentes visual (pedido explicito:
   "el cat-toc es muy feo y simple"), mismo tratamiento ya aplicado al indice
   del prototipo v2: cabecera navy con filete dorado abajo -- la variante
   "preferida" del sistema para piezas de primer nivel. Se mantiene la lista
   de pastillas del cuerpo (ya tenia buenos estados: hover, activa) --
   el problema señalado era la caja plana crema con etiqueta diminuta,
   no la lista de enlaces en si. */
.cat-place-toc {
  position: sticky;
  /* La topbar mide 71px de alto en escritorio (58px min-height + padding),
     no 62px: con el valor viejo, el indice se quedaba pegado 9px por debajo
     de donde termina la topbar y esa tira quedaba tapada por ella (topbar
     con z-index mas alto). Aqui debajo hay margen extra (4px) a proposito,
     para que no queden pegados. */
  top: 75px;
  z-index: 20;
  margin: .75rem 0 1.25rem;
  padding: 0;
  /* El 24rem del artifact es el ancho de SU caja de ejemplo aislada
     (.stage), no una medida de la pagina real -- aqui la ficha es una
     sola columna a ancho completo, sin sitio al lado para una barra
     lateral. Copiarlo tal cual dejaba una caja flotando pequeña con un
     hueco vacio enorme al lado en escritorio (captura real del
     propietario). Sin max-width: ocupa el ancho natural del contenido,
     igual que el resto de piezas de la ficha (cat-section, cat-hero...). */
  background: #fffdf8;
  border: 1px solid #e4d9c2;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgb(18 46 59 / 10%);
  overflow: hidden;
}
/* Bug real (detectado al verificar el rediseño agrupado, no supuesto):
   abierto por defecto y con 3 grupos de enlaces, el indice pasa a medir
   mucho mas que la version anterior (pastillas en fila) -- al ser
   position:sticky, tapaba el contenido de debajo al hacer scroll,
   confirmado con captura de pantalla completa. Se acota la altura del
   <details> (no del <nav>, para no romper el radio de esquina) con scroll
   propio; la cabecera sigue siempre visible porque encabeza el scroll. */
#main-content .cat-place-toc__details {
  max-height: min(65vh, 28rem);
  overflow-y: auto;
}
/* Bug real senalado (captura del propietario, escritorio): ".cat-place-toc"
   ya trae su propio marco (borde/fondo/sombra) en el <nav>, pero la regla
   generica "#main-content details {border;background;margin-top}" (mas
   abajo en este fichero) tambien se aplicaba al <details> DE DENTRO --
   caja dentro de caja, con el margin-top de la regla generica empujando un
   hueco visible. Se neutraliza aqui, especificidad igualada con
   #main-content. */
#main-content .cat-place-toc__details {
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
#main-content .cat-place-toc__details > *:not(summary) {
  padding: 0 !important;
}
/* Pieza real cat-toc del catalogo (antes: caja plana crema con pastillas
   sin agrupar). Cabecera navy + filete dorado abajo, texto "SECCIONES
   DISPONIBLES", mismo lenguaje que cat-section__head. */
#main-content .cat-place-toc__label {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: .6rem .9rem !important;
  background: var(--cat-blue-deep) !important;
  border-bottom: 3px solid var(--cat-gold) !important;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff !important;
}
#main-content .cat-place-toc__details > summary::after { color: #fff; }
.cat-place-toc__caret { display: none; }
/* El estado abierto/cerrado se controla a mano, NO confiando en que el
   navegador oculte el contenido solo (Chrome moderno no implementa
   <details> cerrado con un simple display:none heredado -- usa
   ::details-content con content-visibility, y cualquier display propio
   en los hijos se cuela por encima de forma inconsistente). Aplica a
   TODOS los hijos que no sean el summary (los grupos __group-label +
   __list), no solo a un <ol> como antes -- ahora son varios bloques. */
.cat-place-toc__details > :not(summary) { display: none !important; }
.cat-place-toc__details[open] > :not(summary) { display: block !important; }
.cat-place-toc__details > summary::-webkit-details-marker,
.cat-place-toc__details > summary::marker { display: none; content: none; }
.cat-place-toc__group-label {
  margin: .85rem .9rem .3rem;
  color: var(--cat-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cat-place-toc__list {
  margin: 0 0 .5rem;
  padding: 0 .5rem;
  list-style: none;
}
.cat-place-toc a {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .6rem;
  border-radius: 6px;
  color: #15252e;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, padding-left .15s ease, color .15s ease;
}
.cat-place-toc a::before {
  content: "→";
  flex-shrink: 0;
  color: var(--cat-gold);
  font-weight: 700;
}
.cat-place-toc a:hover,
.cat-place-toc a:focus-visible { background: #f3ead7; padding-left: .85rem; color: #173a4b; }
.cat-place-toc a[data-place-toc-active] {
  background: #173a4b;
  color: #fff;
}
.cat-place-toc a[data-place-toc-active]::before { color: #f2c45d; }

/* 4) Un unico estilo de acordeon para toda la ficha de lugar ------------- */
#main-content details {
  border: 1px solid #ddcfb7 !important;
  border-radius: 6px !important;
  background: #fffdf8 !important;
  margin-top: .85rem;
}
#main-content details > summary {
  padding: .7rem .9rem !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: .6rem;
  list-style: none;
  font-weight: 700;
  color: #173a4b !important;
  border-bottom: none !important;
  background: none !important;
}
#main-content details > summary::-webkit-details-marker { display: none; }
#main-content details > summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.1rem;
  color: #bd7c16;
  flex-shrink: 0;
}
#main-content details[open] > summary::after { content: "\2212"; }
#main-content details > summary > i,
#main-content details > summary > span[aria-hidden="true"] { display: none; }
#main-content details > summary small { display: block; font-weight: 500; font-size: .74rem; color: #6b5c46; }
#main-content details > *:not(summary) { padding: 0 .9rem .9rem; }
#main-content details > div.cat-accordion__body,
#main-content details > div.cat-historical-method__body,
#main-content details > ol,
#main-content details > table,
#main-content details > div.cat-open-context__archaeology-body,
#main-content details > div.cat-open-context__related {
  padding: 0 .9rem .9rem;
}
#main-content details table { margin-left: .9rem; }

/* 3) Comparador de paisaje consolidado ----------------------------------- */
.cat-place-compare {
  margin: 1.75rem 0;
  padding: 1.1rem 1.35rem 1.4rem;
  border: 1px solid #ddcfb7;
  border-radius: 8px;
  background: #fffdf8;
}
.cat-place-compare__head { margin-bottom: .9rem; }
.cat-place-compare__head h2 { margin: .15rem 0 .4rem; color: #143f4d; }
.cat-place-compare__tabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .6rem;
  margin-bottom: 1.1rem;
}
.cat-place-compare__tabs {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  gap: .6rem;
}
.cat-place-compare__tabs [data-place-tab-button] {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 240px;
  padding: .7rem .9rem;
  background: #f3ead7;
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cat-place-compare__tabs [data-place-tab-button]:hover { background: #ecdfc2; }
.cat-place-compare__tabs [data-place-tab-button][aria-selected="true"] {
  background: #173a4b;
  border-color: #bd7c16;
  box-shadow: 0 2px 8px rgb(23 58 75 / 25%);
}
.cat-place-compare__tab-icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 55%);
  font-size: 1.05rem;
  color: #173a4b;
}
[aria-selected="true"] .cat-place-compare__tab-icon { background: rgb(255 255 255 / 15%); color: #f2c45d; }
.cat-place-compare__tab-text { display: grid; gap: .1rem; }
.cat-place-compare__tab-text strong { font-size: .9rem; color: #173a4b; }
.cat-place-compare__tab-text small { font-size: .74rem; color: #6b5c46; }
[aria-selected="true"] .cat-place-compare__tab-text strong { color: #fff; }
[aria-selected="true"] .cat-place-compare__tab-text small { color: #cdd9de; }

.cat-place-compare__expand {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  padding: 0 1rem;
  background: #fff;
  border: 2px solid #ddcfb7;
  border-radius: 8px;
  font-weight: 700;
  font-size: .84rem;
  color: #173a4b;
  cursor: pointer;
}
.cat-place-compare__expand:hover { border-color: #bd7c16; }

[data-place-tab-panel] { padding-top: .25rem; }

/* Modo de mapa ampliado -------------------------------------------------- */
.cat-place-compare--expanded {
  position: fixed;
  inset: 0;
  z-index: 100;
  margin: 0;
  border-radius: 0;
  overflow-y: auto;
  padding: 1rem 1.35rem 1.5rem;
}
.cat-place-compare--expanded .cat-municipal-viewer__shell,
.cat-place-compare--expanded .cat-municipal-viewer__map,
.cat-place-compare--expanded .cat-time-compare__stage {
  height: min(78vh, 820px);
}
.cat-place-no-scroll { overflow: hidden; }

@media (max-width: 900px) {
  /* Segundo menu movil: el indice "En esta pagina" deja de ser una lista de
     11 pastillas ocupando media pantalla y pasa a un desplegable nativo
     (<details>), pegado justo debajo de la cabecera fija (64px, ver
     responsive-a11y.css). Se renderiza abierto por defecto (mismo atributo
     `open` que en escritorio, ver detalle_ficha.html) para no depender de
     que ninguna regla CSS gane ninguna pelea de especificidad -- pero sigue
     siendo un <details> normal: quien quiera recuperar el espacio lo cierra
     tocando la cabecera, igual que cualquier otro acordeon del sitio. */
  .cat-place-toc {
    position: sticky;
    top: 64px;
    z-index: 25;
    max-width: none;
    margin: 0 -1rem 1rem;
    padding: 0;
    border-radius: 0;
    border-width: 0 0 1px;
  }
  #main-content .cat-place-toc__label {
    min-height: 2.75rem;
    padding: .8rem 1rem !important;
  }
  .cat-place-toc a { min-height: 2.75rem; }
  .cat-place-toc a[data-place-toc-active] { border-radius: 6px; }

  /* Bug real señalado: cada pestaña conservaba el tamaño de escritorio
     (icono 2.1rem, padding .7rem .9rem) apiladas en columna -- dos cajas
     enormes en vez de dos filas compactas. Mismo ajuste que ya tenia el
     prototipo v2 para este mismo problema. */
  .cat-place-compare__tabs-row { flex-direction: column; gap: .4rem; }
  .cat-place-compare__tabs { gap: .4rem; }
  .cat-place-compare__tabs [data-place-tab-button] { flex: 1 1 auto; min-width: 0; padding: .5rem .7rem; }
  .cat-place-compare__tab-icon { width: 1.7rem; height: 1.7rem; font-size: .85rem; }
  .cat-place-compare__tab-text strong { font-size: .82rem; }
  .cat-place-compare__tab-text small { font-size: .68rem; }
  .cat-place-compare__expand { flex: 1 1 auto; justify-content: center; padding: .6rem; }

  /* Bug real medido en vivo (no supuesto): padding lateral anidado --
     <main> 16px + .cat-place-compare 21.6px (1.35rem) + la propia caja
     de alternativa textual 16px -- sumaban 53.6px perdidos A CADA LADO
     (mas de 107px de un viewport de 375px, mas de una cuarta parte de
     la pantalla) antes de que empezara a verse ni una letra. Mismo
     motivo que ya llevo a reducir este padding en el prototipo v2
     ("en escritorio el respiro tiene sentido, en movil solo resta area
     util al mapa"), aplicado aqui a la ficha real. */
  .cat-place-compare { padding: 1rem .6rem 1.2rem; }
}

/* Tamaño pedido explicitamente, SOLO escritorio: en movil se queda en
   .74rem (regla base mas arriba, #main-content details > summary small). */
@media (min-width: 901px) {
  #main-content details > summary small { font-size: .95rem; }
}