/* ==========================================================================
   termometro.css — Mapa de provincias
   Se carga sobre app.css y hub.css.
   ========================================================================== */

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mando { margin: 14px 0 12px; }
.mando .seg button { font-size: var(--fs-sm); }
/* Cuatro capas: en dos filas en el móvil, en una desde tableta */
.mando .seg.capas { display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 680px) { .mando .seg.capas { grid-template-columns: repeat(4, 1fr); } }

/* En movil el mapa sale del contenedor y ocupa la pantalla entera: con diez
   columnas, cada punto de pulsacion pasa de 29 a 35 px. Sigue por debajo de los
   44 px recomendados, asi que el mapa es la vista de conjunto y la TABLA de
   abajo es la ruta tactil precisa, con filas y enlaces de tamano normal. */
.mapa-caja {
  border: 1px solid var(--line);
  border-top-width: 1px;
  border-radius: 0;
  background: var(--surface);
  padding: 14px 4px 12px;
  margin: 0 calc(var(--pad) * -1) 16px;
}

#mapa { width: 100%; height: auto; display: block; }

/* Rampa propia del mapa, de claro a intenso. No usa el terracota de comprar
   ni el verde azulado de alquilar: aqui el color mide una cifra, no una de
   las dos opciones. Cada tono esta comprobado con su cifra encima: 4,7:1 el
   que menos, en los dos temas. */
:root {
  --rampa-0: #f6ecc4;
  --rampa-1: #f0c777;
  --rampa-2: #e0904a;
  --rampa-3: #b8563c;
  --rampa-4: #7a2e4a;
  --rampa-texto-bajo: #16202a;
  --rampa-texto-alto: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rampa-0: #2f2a3d;
    --rampa-1: #57344a;
    --rampa-2: #8f4540;
    --rampa-3: #cc7440;
    --rampa-4: #f0b85e;
    --rampa-texto-bajo: #e2e8ec;
    --rampa-texto-alto: #0e151b;
  }
}
:root[data-theme="dark"] {
  --rampa-0: #2f2a3d;
  --rampa-1: #57344a;
  --rampa-2: #8f4540;
  --rampa-3: #cc7440;
  --rampa-4: #f0b85e;
  --rampa-texto-bajo: #e2e8ec;
  --rampa-texto-alto: #0e151b;
}

/* Provincias y ciudades. La clase de color llega como data-color, de 0 a 4. */
#mapa { cursor: pointer; }
#mapa .prov path,
#mapa .prov .punto,
#mapa .ciudad {
  fill: var(--surface-2);
  stroke: var(--surface);
  stroke-width: .8;
  /* Al cambiar de capa, el color cambia fundido y no de golpe */
  transition: fill .4s cubic-bezier(.2, .7, .2, 1), stroke .12s ease, opacity .3s;
}
#mapa .prov[data-color="0"] path, #mapa .prov[data-color="0"] .punto, #mapa .ciudad[data-color="0"], .clases i[data-color="0"] { fill: var(--rampa-0); background: var(--rampa-0); }
#mapa .prov[data-color="1"] path, #mapa .prov[data-color="1"] .punto, #mapa .ciudad[data-color="1"], .clases i[data-color="1"] { fill: var(--rampa-1); background: var(--rampa-1); }
#mapa .prov[data-color="2"] path, #mapa .prov[data-color="2"] .punto, #mapa .ciudad[data-color="2"], .clases i[data-color="2"] { fill: var(--rampa-2); background: var(--rampa-2); }
#mapa .prov[data-color="3"] path, #mapa .prov[data-color="3"] .punto, #mapa .ciudad[data-color="3"], .clases i[data-color="3"] { fill: var(--rampa-3); background: var(--rampa-3); }
#mapa .prov[data-color="4"] path, #mapa .prov[data-color="4"] .punto, #mapa .ciudad[data-color="4"], .clases i[data-color="4"] { fill: var(--rampa-4); background: var(--rampa-4); }
#mapa .prov.sin-dato path { fill: var(--surface-2); stroke-dasharray: 2 2; stroke: var(--ink-faint); }
#mapa .prov .punto { stroke: var(--ink); stroke-width: 1; }

#mapa .prov:focus-visible { outline: none; }
#mapa .prov:focus-visible path { stroke: var(--brand); stroke-width: 2.5; }
#mapa .prov.elegida path, #mapa .prov.elegida .punto { stroke: var(--ink); stroke-width: 2.2; }
@media (hover: hover) { #mapa .prov:hover path { stroke: var(--ink); stroke-width: 1.4; } }

/* Cifra sobre cada provincia grande, con halo para leerse sobre cualquier color.
   Solo en pantallas anchas: en un móvil, a la escala del mapa, quedarían en 7 px;
   ahí la cifra está en la ficha y en la tabla. */
#cifras text {
  text-anchor: middle;
  pointer-events: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--ink);
  stroke: var(--surface);
  stroke-width: 3px;
  paint-order: stroke;
}
@media (max-width: 679px) { #cifras { display: none; } }

/* Ciudades: ocultas en modo provincias; en modo ciudades las provincias se
   quedan de fondo, sin color, para que manden los puntos */
#capa-ciudades { display: none; }
.mapa-caja[data-zona="ciudades"] #capa-ciudades { display: inline; }
.mapa-caja[data-zona="ciudades"] #cifras { display: none; }
.mapa-caja[data-zona="ciudades"] .prov path,
.mapa-caja[data-zona="ciudades"] .prov .punto { fill: var(--surface-2) !important; stroke: var(--line); }
#mapa .ciudad { stroke: var(--ink); stroke-width: .7; }
#mapa .ciudad.elegida { stroke-width: 2.4; }

#mapa .recuadro { fill: none; stroke: var(--line); stroke-width: 1; }
#mapa .rotulo-recuadro { font-size: 11px; fill: var(--ink-faint); pointer-events: none; }

.pista-mapa { font-size: var(--fs-xs); color: var(--ink-faint); margin: 6px 10px 0 !important; }

/* Buscador y mandos */
.mando { display: grid; gap: 8px; }
.buscar input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
}
.buscar input:focus { border-color: var(--brand); outline: 2px solid var(--brand-wash); }
.mando .seg.zonas { display: grid; grid-template-columns: 1fr 1fr; }

/* Tabla de ciudades, plegada: son trescientas filas */
details.tabla-ciudades > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
details.tabla-ciudades > summary::-webkit-details-marker { display: none; }
details.tabla-ciudades > summary h2 { margin: 38px 0 12px; }
details.tabla-ciudades > summary span { font-size: var(--fs-sm); color: var(--brand); white-space: nowrap; }
details.tabla-ciudades[open] > summary span { visibility: hidden; }
table.datos small { display: block; font-size: var(--fs-xs); color: var(--ink-faint); }
/* Sin clases por celda: las cifras, a la derecha por posición */
#tabla td:nth-child(n+2):not(:last-child), #tabla-ciudades td:nth-child(n+2) {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#tabla tbody tr, #tabla-ciudades tbody tr { cursor: pointer; }

/* -------------------------------------------------------------- escala -- */
.escala {
  padding: 0 10px;
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.escala .rotulo { display: block; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }
.clases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}
.clases li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clases i { display: block; height: 10px; border-radius: 2px; }
.clases span {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}
.escala .nota-escala { display: block; margin-top: 8px; }

/* --------------------------------------------------------------- ficha -- */
.ficha {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.ficha .vacia {
  margin: 0 !important;
  font-size: var(--fs-sm) !important;
  color: var(--ink-faint) !important;
  text-align: center;
  padding: 12px 0;
}
.ficha h3 { margin: 0 0 2px; font-size: var(--fs-lg); letter-spacing: -.015em; }
.ficha .ccaa {
  font-size: var(--fs-xs) !important;
  color: var(--ink-faint) !important;
  margin: 0 0 14px !important;
}

.datos-ficha { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); }
.datos-ficha .dato {
  background: var(--surface);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}
.datos-ficha .dato span { font-size: var(--fs-sm); color: var(--ink-soft); }
.datos-ficha .dato b {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* a partir de 4 años y 11 meses no cabe a 24 px en un móvil */
.datos-ficha .dato.destacado b { font-size: var(--fs-lg); text-align: right; font-weight: 600; color: var(--buy); letter-spacing: -.02em; }

.ficha a.cta { margin: 16px 0 0; }
/* Enlace secundario a la guia de la comunidad, solo si existe */
.ficha .enlace-guia {
  display: block;
  margin-top: 12px;
  padding: 10px 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  text-underline-offset: 3px;
}
.ficha .enlace-guia:hover { color: var(--ink); }

@media (min-width: 680px) {
  .mapa-caja { padding: 20px; margin: 0 0 16px; border-radius: var(--r); }
  .escala { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #mapa .prov rect { transition: none; }
}

/* La tabla es la ruta táctil precisa del mapa, así que sus enlaces necesitan
   un objetivo de verdad: en el mapa la casilla se queda en 34 px. */
#tabla tbody a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  margin: -10px 0;
  font-weight: 500;
  white-space: nowrap;
}
#tabla tbody td { padding-top: 6px; padding-bottom: 6px; }
/* La comunidad, bajo el nombre de la provincia: es un pie de dato, no una
   acción, así que no hereda el objetivo táctil de «Simular». */
#tabla .zona-ccaa a, #tabla-ciudades .zona-ccaa a {
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-weight: 400;
  color: var(--ink-faint);
}
#tabla .zona-ccaa a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
#tabla tbody tr:hover td { background: var(--surface-2); }

/* ==========================================================================
   Vista del mapa: todo a la vez
   «Hay que hacer scroll para verlo todo y no se entienden las opciones.»
   Móvil: mandos compactos, la explicación de lo que se ve, el mapa con su
   leyenda y la ficha debajo. Escritorio: mapa a la izquierda y, a la derecha,
   mandos y ficha fijos, sin bajar.
   ========================================================================== */
.termo-vista { display: flex; flex-direction: column; }
.termo-mapa, .termo-lado { display: contents; }
.termo-vista .mando { order: 1; margin: 14px 0 12px; }
.termo-vista .mapa-caja { order: 2; }
.termo-vista .ficha { order: 3; }

.entradilla { margin-bottom: 8px !important; }

.mando-fila { display: flex; gap: 8px; align-items: stretch; }
.mando-fila .buscar { flex: 1; min-width: 0; }
.mando-fila .buscar input { font-size: var(--fs-sm); }
.mando .seg.zonas { flex: none; display: flex; }
.mando .seg.zonas button { padding: 0 10px; }

.capas-grupo { margin: 10px 0 0; min-width: 0; }
.capas-titulo { margin: 0 0 6px !important; font-size: var(--fs-xs) !important; font-weight: 600; color: var(--ink-soft) !important; }

/* Móvil: arriba solo buscador y capas; la explicación va con la leyenda, bajo
   el mapa. Así el mapa entero cabe en la primera pantalla. */
@media (max-width: 1023px) {
  .termo-vista .mando, .termo-vista .capas-grupo { display: contents; }
  .termo-vista .mando-fila { order: 1; margin-top: 12px; }
  .termo-vista .capas-titulo { order: 2; margin-top: 10px !important; }
  .termo-vista .seg.capas { order: 3; margin-bottom: 12px; }
  .termo-vista .mapa-caja { order: 4; }
  .termo-vista .capa-explica { order: 5; margin: -8px 0 14px !important; }
  .termo-vista .ficha { order: 6; }
}
@media (max-width: 679px) {
  .migas { display: none; }
  main h1 { margin-top: 14px; }
  .entradilla { font-size: var(--fs-sm) !important; }
}
.mando .seg.capas button { min-height: 40px; }
.capa-explica {
  margin: 8px 0 0 !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 8px 10px;
}

.mapa-caja { padding: 8px 4px 10px; }
.escala .extremos {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-weight: 500;
  color: var(--ink-soft);
}
.escala .nota-escala { margin-top: 4px; }

@media (min-width: 1024px) {
  body .wrap:has(> .termo-vista) { max-width: 1180px; }
  .wrap:has(> .termo-vista) > :not(.termo-vista) { max-width: 760px; }

  .termo-vista {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 12px;
  }
  .termo-mapa { display: block; }
  .termo-lado {
    display: block;
    position: sticky;
    top: calc(var(--alto-barra-visible, 0px) + 12px);
  }
  .termo-vista .mando { margin: 0 0 12px; }
  .termo-vista .mapa-caja { margin: 0; }
  /* El mapa cabe en la pantalla con su leyenda: nada que bajar para verlo */
  #mapa { max-height: calc(100vh - 410px); min-height: 320px; }
  /* En el panel lateral, las cuatro capas en dos filas: en una no caben los rótulos */
  .termo-vista .mando .seg.capas { grid-template-columns: 1fr 1fr; }
  .termo-vista .mapa-caja { padding: 12px 16px; }
  .termo-vista .ficha { margin-bottom: 0; }
  .datos-ficha .dato { padding: 7px 0; }
  .ficha a.cta { margin-top: 12px; padding: 12px 16px; }
}

/* ==========================================================================
   Zoom del mapa
   Al acercar, trazos, cifras y puntos de ciudad mantienen su tamaño en
   pantalla: si crecieran con el mapa, taparían lo que se quiere ver.
   ========================================================================== */
.mapa-lienzo { position: relative; }
#mapa { --zoom: 1; --zoom-texto: 1; touch-action: pan-y; }
.mapa-caja.con-zoom #mapa { touch-action: none; cursor: grab; }
.mapa-caja.con-zoom #mapa:active { cursor: grabbing; }
#mapa path, #mapa circle, #mapa .recuadro { vector-effect: non-scaling-stroke; }
#mapa .ciudad { r: calc(3.6px / var(--zoom)); }
#mapa .ciudad.elegida { r: calc(5.5px / var(--zoom)); }
#mapa .prov .punto { r: calc(5px / var(--zoom)); }
#cifras text { font-size: calc(12px / var(--zoom-texto)); stroke-width: calc(3px / var(--zoom-texto)); }
#mapa .rotulo-recuadro { font-size: calc(11px / var(--zoom)); }

.mapa-zoom {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mapa-zoom button {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font: inherit;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.mapa-zoom button[data-zoom="todo"] { font-size: var(--fs-xs); font-weight: 600; }
.mapa-zoom button:hover:not(:disabled) { border-color: var(--ink-faint); }
.mapa-zoom button:disabled { color: var(--ink-faint); cursor: default; box-shadow: none; }
.pista-zoom { margin: 6px 10px 0 !important; font-size: var(--fs-xs) !important; color: var(--ink-faint) !important; }

/* Escritorio: lo que va debajo del mapa, centrado con su ancho de lectura en
   vez de pegado a la izquierda */
@media (min-width: 1024px) {
  .wrap:has(> .termo-vista) > .termo-vista ~ * { margin-left: auto; margin-right: auto; }
  .pista-zoom { margin: 8px 0 0 !important; }
}