/* ==========================================================================
   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: 18px 0 14px; }
.mando .seg button { font-size: var(--fs-sm); }

/* 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;
}

/* Cada provincia. La clase de color llega como data-color, de 0 a 4. */
#mapa .prov { cursor: pointer; }
#mapa .prov rect {
  fill: var(--surface-2);
  stroke: var(--surface);
  stroke-width: 1;
  /* Al cambiar de capa, el color cambia fundido y no de golpe */
  transition: fill .4s cubic-bezier(.2, .7, .2, 1), stroke .12s ease;
}
#mapa .prov[data-color="0"] rect, .clases i[data-color="0"] { fill: var(--rampa-0); background: var(--rampa-0); }
#mapa .prov[data-color="1"] rect, .clases i[data-color="1"] { fill: var(--rampa-1); background: var(--rampa-1); }
#mapa .prov[data-color="2"] rect, .clases i[data-color="2"] { fill: var(--rampa-2); background: var(--rampa-2); }
#mapa .prov[data-color="3"] rect, .clases i[data-color="3"] { fill: var(--rampa-3); background: var(--rampa-3); }
#mapa .prov[data-color="4"] rect, .clases i[data-color="4"] { fill: var(--rampa-4); background: var(--rampa-4); }
#mapa .prov.sin-dato rect {
  fill: var(--surface-2);
  stroke-dasharray: 3 2;
  stroke: var(--ink-faint);
}
#mapa .prov text { transition: fill .4s;
  text-anchor: middle;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  fill: var(--rampa-texto-bajo);
}
/* En unidades del lienzo SVG, no px de pantalla: con 490 de ancho y un movil
   de 360 px se ven al 73 %. A 10 la sigla quedaba en 7 px reales. */
#mapa .prov .sigla { font-size: 15px; opacity: .78; }
#mapa .prov .cifra { font-size: 18px; font-weight: 600; }

/* Los dos tonos intensos llevan el texto invertido */
#mapa .prov[data-color="3"] text,
#mapa .prov[data-color="4"] text { fill: var(--rampa-texto-alto); }
#mapa .prov[data-color="3"] .sigla,
#mapa .prov[data-color="4"] .sigla { opacity: .88; }
#mapa .prov.sin-dato text { fill: var(--ink-soft); }

#mapa .prov:hover rect { stroke: var(--ink); stroke-width: 2; }
#mapa .prov:focus-visible { outline: none; }
#mapa .prov:focus-visible rect { stroke: var(--brand); stroke-width: 3; }
#mapa .prov.elegida rect { stroke: var(--ink); stroke-width: 3; }

/* -------------------------------------------------------------- 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;
}
.datos-ficha .dato.destacado b { font-size: var(--fs-xl); 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; }
#tabla tbody tr:hover td { background: var(--surface-2); }