:root {
  --mar: #c9dcea;
  --tierra: #f5f1e6;
  --tierra-hover: #efe7d2;
  --tierra-seleccion: #bcd6e8;
  --vecino: #dedbd3;
  --borde: #7d8a93;
  --borde-vecino: #b6b3ab;
  --acento: #2e5f7a;
  --tinta: #22313a;
  --papel: #fbfaf6;
  --sombra: 0 10px 30px rgba(20, 40, 60, .25);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta); background: var(--papel);
}
.cabecera { padding: .6rem 1rem; border-bottom: 1px solid #e2ddd0; }
.cabecera h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; }
.cabecera p { margin: .15rem 0 0; font-size: .85rem; color: #5b6b75; }
main { position: relative; flex: 1; min-height: 0; }
#mapa { position: absolute; inset: 0; }
#mapa:focus { outline: none; }
.leaflet-container { background: var(--mar); font: inherit; }
.pie { padding: .4rem 1rem; font-size: .72rem; color: #6b7a83; border-top: 1px solid #e2ddd0; }
.pie p { margin: 0; }
.pie a { color: inherit; }
.aviso {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--papel); border: 1px solid #e2ddd0; border-radius: 10px;
  padding: 1rem 1.25rem; box-shadow: var(--sombra); text-align: center; z-index: 500;
}
.aviso p { margin: 0 0 .5rem; }
.aviso button {
  padding: .55rem 1rem; font: inherit; border: 1px solid var(--acento);
  background: var(--acento); color: #fff; border-radius: 8px; cursor: pointer;
}
/* Etiquetas del mapa (tooltips permanentes) */
.etiqueta {
  background: transparent; border: none; box-shadow: none; padding: 0;
  color: #30414c; font-size: .74rem; font-weight: 600;
  text-shadow: 0 0 3px var(--tierra), 0 0 3px var(--tierra), 0 0 4px var(--tierra), 0 0 6px var(--tierra);
  pointer-events: auto;
  cursor: pointer;
}
.etiqueta:hover { text-decoration: underline; text-underline-offset: 2px; }
.leaflet-tooltip.etiqueta::before { display: none; }
/* Modal (escritorio: centrado) */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(24, 38, 48, .45);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal[hidden] { display: none; }
.modal-panel {
  position: relative; background: var(--papel); border-radius: 14px; box-shadow: var(--sombra);
  padding: 1.5rem 1.6rem; max-width: 420px; width: 100%; max-height: 85vh; overflow: auto;
  animation: aparecer .18s ease-out;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal-cerrar {
  position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid #d8d2c2; background: #fff;
  font-size: 1.05rem; cursor: pointer;
}
.modal-campo { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7a83; }
#modal-estado { margin: .1rem 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; }
.modal-capital { margin: 0; font-size: 1.9rem; font-weight: 600; color: var(--acento); font-family: Georgia, "Times New Roman", serif; }
.modal-nota { margin: .8rem 0 0; font-size: .85rem; color: #5b6b75; font-style: italic; }
/* Responsive: móvil (<700px) = hoja inferior; punteros táctiles = objetivos ≥44px */
@media (max-width: 700px) {
  .cabecera { padding: .5rem .8rem; }
  .cabecera h1 { font-size: 1.2rem; }
  .cabecera p { display: none; }
  .pie { font-size: .64rem; padding: .3rem .8rem; }
  .etiqueta { font-size: .62rem; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-panel {
    max-width: none; width: 100%; max-height: 80vh;
    border-radius: 16px 16px 0 0;
    padding: 1.3rem 1.4rem calc(1.3rem + env(safe-area-inset-bottom));
    animation: subir .2s ease-out;
  }
  .modal-campo { font-size: .8rem; }
  #modal-estado { font-size: 1.35rem; }
  .modal-capital { font-size: 1.7rem; }
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
@media (pointer: coarse) {
  .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 1.2rem; }
}