/* El Día Grande — el mapa. Hereda los tokens de estilo.css; aquí solo lo del mapa. */

.mapa-zona { background: var(--tormenta-tinte); border-block: 1px solid var(--linea);
  padding-block: var(--e-4); margin-block: var(--e-4); }

/* ---------- mandos ---------- */
.mapa-mandos { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start; margin-bottom: var(--e-3); }
.mapa-mandos label, .mapa-mandos .etq { display: block; font-family: var(--sans); font-size: var(--t-s);
  font-weight: 600; color: var(--tinta-2); margin-bottom: var(--e-1); }
.mapa-mandos small { display: block; margin-top: .4rem; font-size: var(--t-xs); color: var(--tinta-3); }
.mapa-mandos .campo { width: 100%; }
.busca-aviso:empty { display: none; }
.busca-aviso { margin-top: .5rem; font-size: var(--t-xs); color: var(--arcilla-2); font-family: var(--sans); }

/* ---------- lienzo + panel ---------- */
.mapa-caja { display: grid; gap: var(--e-3); grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr);
  align-items: start; }
@media (max-width: 860px) { .mapa-caja { grid-template-columns: 1fr; } }

.mapa-lienzo { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e-2); }
#mapa-es { display: block; width: 100%; height: auto; max-width: 100%; }
#mapa-es .prov { fill: var(--papel-3); stroke: var(--papel); stroke-width: .8; cursor: pointer;
  transition: fill .18s ease, stroke .12s ease; }
#mapa-es:not(.listo) .prov { cursor: progress; }
#mapa-es .prov:hover { stroke: var(--tinta); stroke-width: 1.4; }
#mapa-es .prov:focus-visible { outline: none; stroke: var(--arcilla); stroke-width: 2.4; }
#mapa-es .prov.sel { stroke: var(--tinta); stroke-width: 2.2; }
#mapa-es .cartela { fill: none; stroke: var(--linea); stroke-width: 1; stroke-dasharray: 3 3; }
#mapa-es .cartela-txt { font-family: var(--sans); font-size: 13px; fill: var(--tinta-3); }

.mapa-fecha-txt { margin-top: var(--e-2); font-family: var(--sans); font-size: var(--t-s);
  color: var(--tinta-2); font-weight: 600; text-align: center; }

.leyenda { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: .4rem 1rem; justify-content: center; }
.leyenda li { display: flex; align-items: center; gap: .4rem; font-family: var(--sans); font-size: var(--t-xs); }
.leyenda b { font-weight: 600; color: var(--tinta); }
.leyenda small { color: var(--tinta-3); }
.muestra { width: 15px; height: 15px; border-radius: 3px; border: 1px solid rgba(31, 36, 51, .22);
  flex: none; }

/* ---------- panel ---------- */
.mapa-panel { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e-3); position: sticky; top: var(--e-2); }
.panel-vacio { font-family: var(--sans); font-size: var(--t-s); color: var(--tinta-3); margin: 0; }
.mapa-panel h3 { margin: .2rem 0 var(--e-2); font-size: var(--t-l); }
.panel-cifra { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0 0 var(--e-2); }
.panel-cifra b { font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 3.4rem); line-height: 1;
  color: var(--tinta); }
.panel-frase { font-size: var(--t-s); color: var(--tinta-2); margin: 0 0 var(--e-2); }
.panel-datos { list-style: none; margin: 0 0 var(--e-2); padding: 0; border-top: 1px solid var(--linea); }
.panel-datos li { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0;
  border-bottom: 1px solid var(--linea); font-family: var(--sans); font-size: var(--t-xs); }
.panel-datos li.ancho { flex-direction: column; gap: .2rem; }
.panel-datos span { color: var(--tinta-3); }
.panel-datos b { color: var(--tinta); font-weight: 600; text-align: right; }
.panel-datos li.ancho b { text-align: left; }
.panel-enlaces { margin: 0; font-family: var(--sans); font-size: var(--t-s); }

/* niveles: los mismos cinco cortes que usa la calculadora */
.nivel { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; padding: .2rem .55rem;
  border-radius: 999px; border: 1px solid; }
.n-muy-bajo { color: #2F6A4E; background: var(--salvia-claro); border-color: #B7D6C3; }
.n-bajo { color: #2F6A4E; background: var(--salvia-claro); border-color: #B7D6C3; }
.n-moderado { color: #7A5410; background: var(--ambar-claro); border-color: #E2CB93; }
.n-alto { color: var(--arcilla-2); background: var(--arcilla-claro); border-color: #E0B49E; }
.n-muy-alto { color: #fff; background: var(--arcilla-2); border-color: var(--arcilla-2); }

.mapa-nota { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--tinta-3);
  font-family: var(--sans); max-width: var(--medida); }

/* ---------- tira de meses ---------- */
.meses-tira { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: var(--e-2) 0 0; }
.meses-tira a { display: block; padding: .45rem .8rem; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  text-decoration: none; color: var(--tinta-2); }
.meses-tira a:hover { border-color: var(--tormenta); color: var(--tormenta-2); }
.meses-tira a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

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