:root {
  --fondo: #fbfaf7; --superficie: #ffffff; --suave: #f2efe8; --tinta: #1c1b18; --tinta2: #52514e; --tinta3: #76746e;
  --linea: #dedbd2; --rejilla: #ebe8e0; --sat: #d4551f; --reinfo: #2a78d6; --oro: #a86f00; --anp: #1b8f65; --prov: #efb9a1; --gris: #8c8a84; --sus: #b5c9e3;
  --serif: Georgia, "Times New Roman", serif; --sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.55 var(--sans); }
.ancho { width: min(1200px, 100% - 40px); margin-inline: auto; }
h1, h2 { font-family: var(--serif); font-weight: 700; line-height: 1.15; }
h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); margin: 0 0 .6rem; }
section, figure { scroll-margin-top: 110px; }
h3 { font-size: 1.02rem; margin: 0; line-height: 1.3; }
a { color: #1f5fae; }
.portada { background: #211d18; color: #f7f3ea; padding: 44px 0 24px; }
.antetitulo { margin: 0 0 12px; color: #f0a884; font-size: .85rem; font-weight: 600; letter-spacing: .03em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 18px; max-width: 18em; }
.pregunta { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 48em; margin: 0 0 10px; }
.contexto { max-width: 52em; color: #d8d2c5; margin: 0 0 22px; }
.ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 20px; border-top: 1px solid #5a5247; padding-top: 14px; }
.ficha dt { font-size: .78rem; color: #c4bdae; }
.ficha dd { margin: 2px 0 0; font-size: .95rem; }
.indice { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.indice a { color: #f7f3ea; font-size: .9rem; }
.seccion { padding: 44px 0; }
.ancho.seccion { padding: 44px 0; }
.ayuda { color: var(--tinta2); max-width: 60em; margin: 0 0 16px; }
.hallazgos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hallazgos article { border-top: 3px solid var(--tinta); padding-top: 12px; position: relative; }
.hallazgos .num { font: 700 1.9rem var(--serif); color: var(--sat); }
.hallazgos h3 { font: 700 1.28rem/1.25 var(--serif); margin: 2px 0 10px; }
.hallazgos p { margin: 0 0 10px; }
.contraste { color: var(--tinta2); font-size: .88rem; }
.filtros { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1.2fr .55fr .55fr 1.5fr 1.1fr auto; gap: 10px 12px; align-items: end; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(30, 25, 15, .07); }
.filtros label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--tinta2); min-width: 0; }
select, input[type=search] { font: inherit; font-size: .9rem; color: var(--tinta); background: var(--superficie); border: 1px solid #b9b6ad; border-radius: 6px; padding: 7px 8px; min-height: 38px; width: 100%; }
input[type=range] { accent-color: var(--sat); width: 100%; min-height: 26px; }
output { font-weight: 600; color: var(--tinta); }
.botones { display: flex; gap: 6px; }
button { font: inherit; }
.botones button { font-size: .85rem; font-weight: 600; min-height: 38px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--tinta); background: var(--tinta); color: #fff; cursor: pointer; white-space: nowrap; }
.botones .secundario { background: transparent; color: var(--tinta); border-color: #b9b6ad; }
:focus-visible { outline: 3px solid var(--reinfo); outline-offset: 2px; }
.estado { min-height: 1.5em; margin: 6px 0 10px; color: var(--tinta2); font-size: .92rem; }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 12px; min-width: 0; }
.kpi .v { font: 700 1.75rem/1.1 var(--serif); display: block; margin: 5px 0; font-variant-numeric: tabular-nums; }
.kpi .e { font-size: .79rem; color: var(--tinta2); font-weight: 600; display: block; line-height: 1.25; }
.kpi .s { font-size: .76rem; color: var(--tinta3); display: block; line-height: 1.3; }
.mapa-marco { background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 14px; margin-bottom: 18px; }
.mapa-cabecera { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.capas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .85rem; }
.capas label { display: inline-flex; gap: 5px; align-items: center; min-height: 28px; cursor: pointer; }
.capas select { min-height: 30px; padding: 2px 6px; width: auto; font-size: .82rem; }
#mapa { height: min(68vh, 620px); min-height: 400px; border-radius: 6px; background: #e8e6df; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 10px 0 0; font-size: .8rem; color: var(--tinta2); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.p { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.p-rec { background: var(--sat); } .p-ant { background: #6d6459; } .p-rej { background: var(--reinfo); opacity: .65; }
.a { width: 15px; height: 10px; display: inline-block; }
.a-anp { background: rgba(27, 143, 101, .22); border: 1.5px solid var(--anp); }
.a-amo { border: 1.5px dashed var(--anp); }
.a-cor { border: 2px dashed var(--oro); }
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tarjeta { margin: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 14px; min-width: 0; }
figcaption p { margin: 2px 0 8px; font-size: .84rem; color: var(--tinta2); }
.grafico { width: 100%; min-height: 240px; }
.grafico svg, .multiples svg { display: block; width: 100%; height: auto; overflow: visible; }
.multiples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.multiples h4 { margin: 0 0 2px; font-size: .82rem; font-weight: 600; color: var(--tinta2); }
.vacio { display: grid; place-items: center; min-height: 200px; color: var(--tinta2); font-size: .92rem; text-align: center; padding: 16px; background: var(--suave); border-radius: 6px; }
svg text { fill: var(--tinta2); font: 12px var(--sans); }
svg .val { fill: var(--tinta); font-weight: 600; }
svg .eje { stroke: #9b988f; }
svg .rj { stroke: var(--rejilla); }
.obj { cursor: default; }
.obj:hover { opacity: .78; }
.ley-g { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--tinta2); margin-top: 6px; }
.ley-g span { display: inline-flex; gap: 6px; align-items: center; }
.m { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.m-conf { background: var(--sat); } .m-prov { background: var(--prov); } .m-vig { background: var(--reinfo); } .m-sus { background: var(--sus); }
.l { width: 18px; height: 0; border-top: 2.5px solid; display: inline-block; }
.l-oro { border-color: var(--oro); } .l-det { border-color: var(--sat); }
.buscar { display: block; font-size: .8rem; color: var(--tinta2); max-width: 300px; margin-bottom: 10px; }
.tabla-marco { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; max-height: 520px; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; background: var(--suave); text-align: left; z-index: 1; }
th button { all: unset; display: block; cursor: pointer; font-size: .8rem; font-weight: 700; padding: 10px 12px; white-space: nowrap; }
th button:focus-visible { outline: 3px solid var(--reinfo); outline-offset: -3px; }
th.n, td.n { text-align: right; }
th.n button { width: 100%; box-sizing: border-box; text-align: right; }
td { padding: 8px 12px; border-top: 1px solid var(--rejilla); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--suave); }
tbody tr.sel { background: #fbe9df; font-weight: 600; }
.nota { font-size: .84rem; color: var(--tinta2); margin: 10px 0 0; }
.fondo-suave { background: var(--suave); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.dos ol, .dos ul { padding-left: 20px; margin: 0; }
.dos li { margin-bottom: 8px; }
.fuentes { padding-left: 20px; }
.fuentes li { margin-bottom: 6px; }
#tip { position: fixed; z-index: 50; pointer-events: none; background: #211d18; color: #fff; font-size: .8rem; line-height: 1.35; padding: 6px 9px; border-radius: 5px; max-width: 240px; }
.maplibregl-popup-content { font: 13px/1.4 var(--sans); }
@media (max-width: 1000px) {
  .filtros { position: static; grid-template-columns: 1fr 1fr; }
  .filtros label:nth-of-type(4), .filtros label:nth-of-type(5), .botones { grid-column: span 2; }
  .botones button { flex: 1; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .hallazgos, .rejilla, .dos, .ficha { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi .v { font-size: 1.45rem; }
  #mapa { min-height: 360px; height: 60vh; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }