:root{
  --mar:#0D2B33;        /* el océano alrededor del país */
  --mar-2:#12353F;      /* panel lateral */
  --tierra:#1C4551;     /* tierra sin explorar */
  --trama:#2C6272;      /* rayitas de la niebla */
  --mango:#F2A93B;      /* lo que ya pisaste */
  --mango-claro:#FFC567;
  --hueso:#EAE6D8;
  --hueso-tenue:#9DB4B8;
  --linea:rgba(234,230,216,.14);
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --mono:'DM Mono', ui-monospace, Menlo, monospace;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--mar);
  color:var(--hueso);
  font:400 15px/1.45 var(--display);
  -webkit-font-smoothing:antialiased;
}
:focus-visible{ outline:2px solid var(--mango-claro); outline-offset:2px; }

/* ---------- estructura ---------- */
.app{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  height:100vh; height:100dvh;
}
.mapa-wrap{ position:relative; min-height:0; }
#mapa{ position:absolute; inset:0; background:var(--mar); }
.panel{
  background:var(--mar-2);
  border-left:1px solid var(--linea);
  overflow-y:auto;
  padding:28px 24px 20px;
  display:flex; flex-direction:column; gap:22px;
}

/* ---------- encabezado ---------- */
.eyebrow{
  margin:0 0 10px;
  font:500 11px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--hueso-tenue);
}
h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(38px,5vw,48px);
  line-height:.9;
  letter-spacing:-.015em;
  font-variation-settings:'wdth' 78, 'opsz' 96;
  font-weight:300;
}
h1 strong{ display:block; font-weight:800; }
.lema{ margin:12px 0 0; color:var(--hueso-tenue); max-width:30ch; }

/* ---------- resumen ---------- */
.resumen{ border-top:1px solid var(--linea); padding-top:18px; }
.resumen p{ margin:0 0 12px; font-size:17px; line-height:1.3; }
.resumen b{ font:500 17px var(--mono); color:var(--mango); }
.barra{
  height:8px; background:rgba(234,230,216,.1); border-radius:99px; overflow:hidden;
}
.barra > i{
  display:block; height:100%; width:0; background:var(--mango);
  border-radius:99px; transition:width .35s ease;
}
.pct{ margin-top:6px; font:400 12px var(--mono); color:var(--hueso-tenue); text-align:right; }

/* ---------- provincias ---------- */
.etiqueta{
  margin:0 0 8px;
  font:500 11px/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--hueso-tenue);
}
.prov{ border-top:1px solid var(--linea); }
.prov:last-of-type{ border-bottom:1px solid var(--linea); }
.prov > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:1fr auto 14px; align-items:center; gap:10px;
  padding:12px 2px 6px;
}
.prov > summary::-webkit-details-marker{ display:none; }
.prov > summary::after{
  content:''; width:7px; height:7px;
  border-right:2px solid var(--hueso-tenue); border-bottom:2px solid var(--hueso-tenue);
  transform:rotate(45deg); transition:transform .2s; justify-self:end; margin-top:-3px;
  grid-column:3; grid-row:1;
}
.prov[open] > summary::after{ transform:rotate(-135deg); margin-top:3px; }
.prov .nombre{ font-weight:600; font-size:16px; }
.prov .cuenta{ font:400 12px var(--mono); color:var(--hueso-tenue); }
.prov .mini{ grid-column:1 / -1; grid-row:2; height:4px; background:rgba(234,230,216,.1); border-radius:99px; overflow:hidden; }
.prov .mini > i{ display:block; height:100%; width:0; background:var(--mango); transition:width .35s ease; }
.prov.completa .nombre::after{
  content:'completa'; margin-left:8px; padding:2px 6px; border-radius:3px;
  background:var(--mango); color:var(--mar);
  font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; vertical-align:2px;
}
.lista{
  list-style:none; margin:0; padding:6px 0 14px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 12px;
}
.lista label{
  display:flex; align-items:center; gap:8px; padding:5px 2px; cursor:pointer;
  font-size:14px; color:var(--hueso);
}
.lista input{ accent-color:var(--mango); width:16px; height:16px; margin:0; flex:none; }
.lista input:checked + span{ color:var(--mango-claro); }

/* ---------- pie ---------- */
.pie{ margin-top:auto; padding-top:8px; display:flex; flex-direction:column; gap:10px; }
.borrar{
  align-self:flex-start; background:none; color:var(--hueso-tenue);
  border:1px solid var(--linea); border-radius:6px; padding:7px 12px;
  font:400 13px var(--display); cursor:pointer;
}
.borrar:hover{ color:var(--hueso); border-color:var(--hueso-tenue); }
.creditos{ margin:0; font-size:12px; color:var(--hueso-tenue); }
.creditos a{ color:inherit; }

/* ---------- mapa ---------- */
.leaflet-container{ background:var(--mar); font:inherit; }
.canton{ fill:url(#niebla); cursor:pointer; }
.canton.visitado{ fill:var(--mango); }
.canton:hover{ stroke:var(--hueso); stroke-width:2px; }
.canton.visitado:hover{ fill:var(--mango-claro); }
.canton.sello{
  transform-box:fill-box; transform-origin:center;
  animation:sello .38s cubic-bezier(.2,.8,.3,1);
}
@keyframes sello{ 0%{ transform:scale(1.07); } 100%{ transform:scale(1); } }

.tip{
  background:var(--mar); color:var(--hueso);
  border:1px solid rgba(234,230,216,.3); border-radius:5px; box-shadow:none;
  padding:6px 9px; font:400 12px/1.35 var(--mono);
}
.tip::before{ display:none; }
.tip b{ display:block; font:600 14px var(--display); }
.tip .si{ color:var(--mango); }

.leaflet-bar a, .leaflet-bar a:hover{
  background:var(--mar-2); color:var(--hueso); border-color:var(--linea);
}
.leaflet-bar a:hover{ background:var(--tierra); }
.leaflet-control-attribution{
  background:rgba(13,43,51,.82) !important; color:var(--hueso-tenue) !important;
}
.leaflet-control-attribution a{ color:var(--hueso) !important; }

.leyenda{
  position:absolute; left:14px; bottom:14px; z-index:500; pointer-events:none;
  display:flex; gap:14px; padding:8px 12px;
  background:rgba(13,43,51,.86); border:1px solid var(--linea); border-radius:6px;
  font:400 12px var(--mono); color:var(--hueso);
}
.leyenda span{ display:flex; align-items:center; gap:7px; }
.leyenda i{ width:14px; height:14px; border-radius:3px; display:block; }
.leyenda .niebla{
  background:repeating-linear-gradient(45deg, var(--tierra) 0 3px, var(--trama) 3px 4.5px);
}
.leyenda .pisado{ background:var(--mango); }

.aviso{ position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:var(--hueso-tenue); }

/* ---------- celular ---------- */
@media (max-width:820px){
  .app{ display:block; height:auto; }
  .mapa-wrap{ height:62vh; height:62svh; min-height:340px; }
  .leyenda{ bottom:38px; }
  .panel{ overflow:visible; border-left:0; border-top:1px solid var(--linea); padding:24px 18px 28px; }
  .lista{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  .canton.sello{ animation:none; }
  .barra > i, .prov .mini > i, .prov > summary::after{ transition:none; }
}