/* Explorar: panel de vista y filtros, escenario three.js y grilla de resultados.
   Ver docs/diseno-navegador.md. Las tarjetas son las de lista.css. */

.explorar-cabeza {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4);
  padding-top: var(--s-4); padding-bottom: var(--s-3);
}
.explorar-cabeza h1 {
  font-weight: 700; font-size: clamp(40px, 4.4vw, 64px); line-height: 0.96; letter-spacing: -0.03em;
}
.explorar-cabeza__bajada {
  max-width: 34em; font-weight: 300; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; color: var(--fg-2);
}

/* ---------- Explorador: panel + escenario ---------- */
.explorador {
  display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 0 var(--s-4);
  border-top: 1px solid var(--ink);
}
.explorador[hidden] { display: none; }

.panel { padding-top: var(--s-3); }
.panel__titulo {
  margin-bottom: 10px;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--fg-2);
}
.panel__filtros > summary { display: none; }
.filtro { margin-top: var(--s-4); }
.filtro__botones { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ver por: control segmentado (botón ink del DS para el activo). */
.vista { display: inline-flex; border: 1px solid var(--ink); border-radius: 6px; padding: 2px; gap: 2px; }
.vista__boton {
  font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1;
  padding: 11px 18px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vista__boton:hover { background: var(--ink-10); }
.vista__boton[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Filtros y leyenda: etiquetas (píldora del DS); activo en ink con texto paper. */
.filtro__boton, .leyenda__boton {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
  padding: 8px 13px; border: 1px solid var(--ink-30); border-radius: 999px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filtro__boton:hover, .leyenda__boton:hover { border-color: var(--ink); }
.filtro__n, .leyenda__n { font-weight: 400; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.filtro__boton[aria-pressed="true"], .leyenda__boton[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.filtro__boton[aria-pressed="true"] .filtro__n, .leyenda__boton[aria-pressed="true"] .leyenda__n { color: rgba(255, 255, 255, 0.72); }
.leyenda__boton--vacio:not([aria-pressed="true"]) { color: var(--fg-2); }

.panel__limpiar {
  margin-top: var(--s-4); padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 500; color: var(--ink);
  text-decoration: underline 1px var(--orange); text-underline-offset: 4px;
}
.panel__limpiar:hover { color: var(--orange-hover); }
.panel__limpiar:disabled { color: var(--fg-3); text-decoration-color: var(--ink-30); cursor: default; }

/* ---------- Escenario ---------- */
.escenario {
  position: relative;
  height: clamp(520px, calc(100svh - var(--nav-alto) - 140px), 860px);
}
.escenario__lienzo {
  display: block; width: 100%; max-width: 100%; height: 100%;
  touch-action: pan-y; cursor: grab;
  opacity: 1; transition: opacity 600ms var(--ease-out);
}
.escenario__lienzo.arrastrando { cursor: grabbing; }
.escenario__lienzo.fundido { opacity: 0; transition-duration: 180ms; }
.escenario__lienzo.sin-transicion { transition: none; }
.escenario[data-estado="cargando"] .escenario__lienzo { opacity: 0; transition-duration: 180ms; }
.escenario[data-estado="cargando"]::after {
  content: "Cargando…"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-small); color: var(--fg-3); pointer-events: none;
}

.escenario[data-estado="sin-3d"] { height: auto; padding: var(--s-4) 0; }
.escenario[data-estado="sin-3d"] .escenario__lienzo { display: none; }
.escenario[data-estado="sin-3d"] .escenario__pie { position: static; margin-top: var(--s-3); }
.escenario__aviso {
  max-width: 40em; padding: var(--s-4); background: var(--mist); border-radius: 4px;
  font-size: var(--fs-body); line-height: 1.5;
}
.escenario__aviso p + p { margin-top: var(--s-1); }

.escenario__pie {
  position: absolute; left: 0; right: 0; bottom: var(--s-2);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3);
  pointer-events: none;
}
.escenario__pie > * { pointer-events: auto; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px; max-width: 74%; }

/* En el globo, la leyenda es la referencia del mapa: una lista a la derecha, país y conteo. */
@media (min-width: 960px) {
  .escenario[data-vista="pais"] .escenario__pie {
    top: var(--s-3); bottom: var(--s-3); left: auto; right: 0; width: 212px;
    flex-direction: column; align-items: stretch; justify-content: space-between;
  }
  .escenario[data-vista="pais"] .leyenda { flex-direction: column; gap: 0; max-width: none; border-top: 1px solid var(--ink); }
  .escenario[data-vista="pais"] .leyenda__boton {
    justify-content: space-between; width: 100%;
    padding: 8px 10px; border: 0; border-bottom: 1px solid var(--ink-10); border-radius: 0; background: transparent;
  }
  .escenario[data-vista="pais"] .leyenda__boton:hover { background: var(--ink-10); }
  .escenario[data-vista="pais"] .leyenda__nombre { flex: 1; text-align: left; }
  .escenario[data-vista="pais"] .leyenda__boton[aria-pressed="true"] { background: var(--ink); }
  .escenario[data-vista="pais"] .zona { width: 100%; }
}

/* Zona «País a confirmar»: borde punteado, lo que no tiene lugar en el mapa. */
.zona {
  flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 16px; border: 1px dashed var(--ink-50); border-radius: 4px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.zona[hidden] { display: none; }
.zona:hover { border-color: var(--ink); }
.zona__nombre { font-weight: 500; }
.zona__n { color: var(--fg-2); }
.zona[aria-pressed="true"] { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.zona[aria-pressed="true"] .zona__n { color: rgba(255, 255, 255, 0.72); }

/* Franja: el caso (o país) bajo el puntero; zona fija, no flota sobre el contenido. */
.franja {
  position: absolute; top: var(--s-2); left: 0; max-width: min(520px, 80%);
  padding: 10px 14px 10px 16px; border-left: 2px solid var(--orange);
  background: rgba(255, 255, 255, 0.94);
  font-size: var(--fs-small); line-height: 1.4;
}
.franja[hidden] { display: none; }
.franja strong { display: block; font-weight: 600; font-size: 16px; }
.franja span { display: block; font-weight: 300; color: var(--fg-1); }
.franja__enlace { display: inline-block; margin-top: 6px; padding: 6px 0; font-weight: 500; }

/* ---------- Resultados ---------- */
.resultados { margin-top: var(--s-6); margin-bottom: var(--s-7); scroll-margin-top: calc(var(--nav-alto) + var(--s-3)); }
.resultados__cabeza {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  border-top: 1px solid var(--ink); padding-top: var(--s-2); margin-bottom: var(--s-4);
}
.resultados__cabeza h2 { font-weight: 600; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--ls-display); }
.resultados__conteo { color: var(--fg-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.resultados__vacio { padding: var(--s-4) 0 var(--s-5); }
.resultados__vacio p { font-weight: 300; font-size: var(--fs-lead); line-height: 1.35; max-width: 30em; }
.resultados__vacio .panel__limpiar { margin-top: var(--s-2); }
.resultados__vacio .panel__limpiar[hidden] { display: none; }

/* ---------- Tablet y mobile ---------- */
@media (max-width: 959px) {
  .explorador { grid-template-columns: minmax(0, 1fr); }
  .explorar-cabeza { padding-top: var(--s-3); padding-bottom: var(--s-2); }
  .explorar-cabeza__bajada { font-size: 17px; }
  .panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); padding-top: var(--s-2); }
  /* «Ver por» y «Filtros» en una fila: el título de la vista queda para lectores de pantalla. */
  .panel__vista .panel__titulo {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Cerrado, «Filtros» va al lado de «Ver por»; abierto, el bloque ocupa todo el ancho. */
  .panel__filtros[open] { flex-basis: 100%; }
  .panel__filtros > summary {
    display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
    padding: 10px 16px; border: 1px solid var(--ink-30); border-radius: 999px;
    font-size: var(--fs-small); font-weight: 500;
  }
  .panel__filtros > summary::-webkit-details-marker { display: none; }
  .panel__filtros > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .panel__filtros[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
  .panel__filtros[open] > summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .panel__filtros[open] > summary::after { border-color: var(--paper); }
  .filtro { margin-top: var(--s-3); }

  /* El pie (leyenda y zona) va debajo del canvas: el escenario crece para contenerlo. */
  .escenario { height: auto; margin: var(--s-2) calc(-1 * var(--margen)) 0; }
  .escenario__pie { padding: 0 var(--margen); }
  .escenario__lienzo { height: clamp(320px, 50svh, 560px); }
  .escenario__pie {
    position: static; flex-direction: column; align-items: stretch; gap: var(--s-2);
  }
  .leyenda {
    max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--margen)); padding: 2px var(--margen);
    scroll-padding: 0 var(--margen);
  }
  .leyenda::-webkit-scrollbar { display: none; }
  .leyenda__boton { flex: none; padding: 11px 14px; }
  .filtro__boton { padding: 11px 14px; }
  .zona { align-self: flex-start; flex-direction: row; gap: 8px; }
  /* La franja va debajo del canvas, sin taparlo; vacía, dice qué se puede tocar. */
  .franja { position: static; margin: var(--s-2) var(--margen) 0; max-width: none; min-height: 76px; }
  .franja[hidden] { display: block; border-left-color: var(--ink-10); }
  .franja[hidden]::before { content: attr(data-pista); color: var(--fg-2); }
  .escenario:not([data-estado="listo"]) .franja { display: none; }
}

/* Pantallas táctiles: controles de al menos 44 px de alto (WCAG 2.5.5). */
@media (max-width: 959px), (pointer: coarse) {
  .vista__boton, .filtro__boton, .leyenda__boton, .zona, .panel__limpiar, .panel__filtros > summary,
  .franja__enlace { min-height: 44px; }
  .franja__enlace { padding: 12px 0; }
  .filtro__boton, .leyenda__boton { align-items: center; }
}

/* Contraste alto (Windows): el fondo ink del botón activo se pierde; se marca con un borde
   doble del color de sistema y un tilde antes del texto. */
@media (forced-colors: active) {
  .vista__boton[aria-pressed="true"], .filtro__boton[aria-pressed="true"],
  .leyenda__boton[aria-pressed="true"], .zona[aria-pressed="true"] {
    border: 3px double Highlight;
  }
  .filtro__boton[aria-pressed="true"]::before, .leyenda__boton[aria-pressed="true"]::before,
  .vista__boton[aria-pressed="true"]::before { content: "✓ "; content: "✓ " / ""; }
  .franja { border: 1px solid CanvasText; }
}