/* ============================================================================
   visor.css — Solutiva Design System para los visores de mapa 01 (catastro),
   02 (diagnóstico) y 04 (modelación). Mismo lenguaje que el visor 03
   (alternativas): página de 1680 px con aire, panel y mapa como tarjetas con
   esquina de marca, rótulos verde 700, selectores en píldora, controles del
   mapa redondeados. Se enlaza DESPUÉS de ../marco.css. Solo estilo.
   ============================================================================ */
:root{
  --verde:#8CAA20;--verde-50:#F4F8E6;--verde-100:#E6EFC4;--verde-700:#5F7316;
  --carbon:#333333;--gris-100:#E8E8E8;--gris-50:#F5F5F4;--borde:#D6D6D5;--texto-2:#5C5C5C;
  --r-brand:22px 6px 22px 6px;--r-brand-sm:12px 4px 12px 4px;
  --sombra-xs:0 1px 2px rgba(0,0,0,.06);--sombra-md:0 6px 16px rgba(0,0,0,.08);
  --foco:0 0 0 4px rgba(140,170,32,.28);
}

/* ---------- controles Leaflet comunes */
.leaflet-bar{border-radius:var(--r-brand-sm) !important;overflow:hidden;box-shadow:var(--sombra-md) !important;border:1px solid var(--borde) !important}
.leaflet-bar a{color:var(--carbon) !important}
.leaflet-bar a:hover{background:var(--verde-50) !important}
.leaflet-control-attribution{font-size:12px !important;line-height:1.4;white-space:normal;max-width:calc(100% - 20px);border-top-left-radius:8px}
.leaflet-popup-content-wrapper{border-radius:var(--r-brand-sm) !important;box-shadow:var(--sombra-md) !important;font-family:"Montserrat",system-ui,sans-serif}
.leaflet-tooltip{border-radius:var(--r-brand-sm) !important;border-color:var(--borde) !important;font-family:"Montserrat",system-ui,sans-serif !important;font-size:12px !important}

/* =========================== 04 · MODELACIÓN =========================== */
body.v-modelacion{background:#fff !important}

body.v-modelacion aside{width:360px !important;min-width:360px !important;border:1px solid var(--borde) !important;
  border-radius:var(--r-brand);box-shadow:var(--sombra-xs);overflow-y:auto;background:#fff}
body.v-modelacion main{position:relative;border:1px solid var(--borde);border-radius:var(--r-brand);overflow:hidden;box-shadow:var(--sombra-md);background:#eceae5}
body.v-modelacion aside header{border-bottom:1px solid var(--borde) !important}
body.v-modelacion aside header .tit{padding:20px 22px 16px !important}
body.v-modelacion aside header h1{font-size:22px !important;font-weight:800 !important;line-height:1.2 !important;color:#3a3a3a}
body.v-modelacion aside header p{font-size:12px !important;letter-spacing:.2em !important;color:var(--verde-700) !important;font-weight:700;margin-top:8px !important}
body.v-modelacion section{padding:16px 22px !important;border-bottom:1px solid var(--borde) !important}
body.v-modelacion section > h2{font-size:12px !important;letter-spacing:.2em !important;color:var(--verde-700) !important;margin-bottom:10px !important}
body.v-modelacion #h_ley{font-size:12px !important;font-weight:700 !important;color:var(--texto-2);margin:12px 0 6px !important}
body.v-modelacion .pills{display:inline-flex !important;flex-wrap:wrap;gap:4px !important;background:var(--gris-100);padding:4px;border-radius:20px}
body.v-modelacion .pill{border:0 !important;background:transparent !important;border-radius:999px !important;color:var(--carbon) !important;
  font:600 12px/1.2 "Montserrat",sans-serif !important;padding:8px 12px !important;min-height:32px;transition:background .2s,color .2s}
body.v-modelacion .pill:hover{background:#fff !important}
body.v-modelacion .pill.on{background:var(--carbon) !important;color:#fff !important;box-shadow:var(--sombra-xs)}
body.v-modelacion .pill.off,body.v-modelacion .pill:disabled{opacity:.35}
body.v-modelacion .pill.mini{background:#fff !important;border:1.5px solid var(--borde) !important;padding:6px 12px !important}
body.v-modelacion .pill.mini:hover{border-color:var(--verde) !important;background:var(--verde-50) !important}
body.v-modelacion .pills .pill.mini{background:transparent !important;border:0 !important}
body.v-modelacion .pill.on,body.v-modelacion .pill.mini.on,body.v-modelacion .pill.mini[aria-pressed="true"]{background:var(--carbon) !important;color:#fff !important}
body.v-modelacion .pill:focus-visible{outline:0 !important;box-shadow:var(--foco)}
body.v-modelacion select{border:1.5px solid var(--borde) !important;border-radius:var(--r-brand-sm) !important;background:#fff !important;
  font-size:13px !important;padding:9px 10px !important;color:var(--carbon) !important}
body.v-modelacion select:focus{border-color:var(--verde) !important;box-shadow:var(--foco)}
body.v-modelacion .fila > span:first-child,body.v-modelacion .chk{font-size:13px !important;color:var(--carbon) !important}
body.v-modelacion .val,body.v-modelacion .chk .zg,body.v-modelacion .ley .it,body.v-modelacion .ley .n,body.v-modelacion .nota,
body.v-modelacion aside footer,body.v-modelacion table,body.v-modelacion th{font-size:12px !important}
body.v-modelacion .nota{color:var(--texto-2) !important}
body.v-modelacion input[type=range],body.v-modelacion .chk input{accent-color:var(--verde-700) !important}
body.v-modelacion .sw{border-radius:3px !important}
body.v-modelacion .ley .it{border-radius:8px !important;padding:3px 6px !important}
body.v-modelacion .hist div{background:var(--carbon) !important;border-radius:2px 2px 0 0 !important}
body.v-modelacion th{color:var(--verde-700) !important;font-weight:700 !important;letter-spacing:.06em}
body.v-modelacion th,body.v-modelacion td{border-bottom:1px solid var(--borde) !important;padding:6px 4px !important}
body.v-modelacion tr.click:hover td{background:var(--verde-50) !important}
body.v-modelacion kbd{border-radius:4px !important;font-size:12px !important}
body.v-modelacion aside footer{color:var(--texto-2) !important;padding:16px 22px 20px !important}
body.v-modelacion #hud,body.v-modelacion #esc{border:1px solid var(--borde) !important;border-radius:var(--r-brand-sm) !important;
  box-shadow:var(--sombra-md);font-size:12px !important;background:rgba(255,255,255,.96) !important;padding:10px 14px !important}
body.v-modelacion #esc .barra{border-radius:2px !important;background:var(--carbon) !important}
@media (max-width:700px){
  body.v-modelacion #app{padding:16px 16px 24px;height:auto !important}
  body.v-modelacion aside{width:100% !important;min-width:0 !important;max-height:none}
  body.v-modelacion main{min-height:60vh}
}

/* ================= 01 · CATASTRO y 02 · DIAGNÓSTICO (exports qgis2web) =================
   Misma estructura en los dos: título, columna de gráficos (solo 01), lista de capas,
   mapa y leyenda de la capa activa abajo. Se reordena con grid sin tocar el markup. */
body.v-qgis{background:#fff !important}
body.v-qgis main{width:100% !important;max-width:1680px !important;margin:0 auto !important;padding:28px 24px 48px !important;
  box-sizing:border-box;display:block !important;height:auto !important;font-family:"Montserrat",system-ui,sans-serif;color:var(--carbon)}
body.v-qgis main .project-title-container{background:transparent !important;border:0 !important;padding:0 0 20px !important;min-height:0 !important;
  flex-wrap:wrap;align-items:flex-end !important;width:100% !important}
body.v-qgis main .project-title-container h1{font-weight:800 !important;font-size:clamp(24px,2.6vw,34px) !important;line-height:1.15 !important;color:#3a3a3a !important;letter-spacing:-.01em}
body.v-qgis main .project-title-container{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
body.v-qgis main .project-zone{flex-direction:row !important;align-items:center !important;gap:10px !important;background:var(--gris-100);border-radius:999px;padding:5px 14px 5px 12px !important;text-align:left !important}
body.v-qgis main .project-zone h3{line-height:1 !important;font-size:12px !important;font-weight:700 !important;letter-spacing:.2em !important;text-transform:uppercase;color:var(--verde-700) !important}
body.v-qgis main .project-zone span{line-height:1 !important;font-size:13px !important;font-weight:600 !important;color:var(--carbon) !important}

body.v-qgis .total-container{display:grid !important;grid-template-columns:minmax(0,1fr);gap:16px !important;width:100% !important;height:auto !important;
  background:transparent !important;padding:0 !important;margin:0 !important;box-sizing:border-box}
body.v-qgis.con-graficos .total-container{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
body.v-qgis .right-subcontainer{display:flex !important;flex-direction:column;gap:16px;width:auto !important;height:auto !important;min-width:0;margin:0 !important;padding:0 !important}
body.v-qgis.con-graficos .left-graph-section{order:2}

body.v-qgis .map-section{display:grid !important;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:16px;
  width:100% !important;height:clamp(560px,calc(100vh - 250px),880px) !important;margin:0 !important;padding:0 !important;background:transparent !important}
body.v-qgis .map-section{align-items:stretch !important}
body.v-qgis .btn-list{width:auto !important;height:100% !important;max-height:none !important;min-height:0;overflow:auto !important;margin:0 !important;
  background:#fff !important;border:1px solid var(--borde) !important;border-radius:var(--r-brand) !important;box-shadow:var(--sombra-xs);padding:8px 10px 14px !important;box-sizing:border-box;scrollbar-width:thin}
body.v-qgis .btn-list .categories{display:flex !important;flex-direction:column;gap:2px;width:auto !important;height:auto !important;margin:0 0 6px !important;padding:0 !important;background:transparent !important;border:0 !important}
body.v-qgis .category-title{position:sticky;top:-8px;z-index:1;background:#fff !important;border:0 !important;border-radius:0 !important;
  font:700 12px/1.3 "Montserrat",sans-serif !important;letter-spacing:.16em !important;text-transform:uppercase;color:var(--verde-700) !important;
  padding:14px 8px 8px !important;margin:0 !important;height:auto !important;width:auto !important;text-align:left !important;display:block !important}
body.v-qgis .category-title p{margin:0 !important;font:inherit !important;color:inherit !important;letter-spacing:inherit !important}
body.v-qgis .btn-list .btn{display:flex !important;align-items:center;gap:10px;width:100% !important;height:auto !important;min-height:38px;margin:0 !important;
  padding:7px 10px !important;border:1px solid transparent !important;border-radius:var(--r-brand-sm) !important;background:transparent !important;
  font:500 13px/1.3 "Montserrat",sans-serif !important;color:var(--carbon) !important;text-align:left !important;box-sizing:border-box;transition:background .12s}
body.v-qgis .btn-list .btn img{width:18px !important;height:18px !important;object-fit:contain;flex:none;margin:0 !important}
body.v-qgis .btn-list .btn:hover{background:var(--gris-50) !important}
body.v-qgis .btn-list .btn.presionado,body.v-qgis .btn-list .btn[aria-pressed="true"]{background:var(--verde-50) !important;border-color:var(--verde-100) !important;font-weight:700 !important}
body.v-qgis .btn-list .btn:focus-visible{outline:0 !important;box-shadow:var(--foco)}

body.v-qgis #map{box-sizing:border-box !important;position:relative !important;width:100% !important;height:100% !important;min-height:0;margin:0 !important;
  border:1px solid var(--borde) !important;border-radius:var(--r-brand) !important;overflow:hidden;box-shadow:var(--sombra-md);background:#eceae5}

/* leyenda de la capa activa: tres tarjetas */
body.v-qgis .bottom-chart-section{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100% !important;height:auto !important;
  margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important}
body.v-qgis .bottom-container{width:auto !important;height:auto !important;min-height:0;margin:0 !important;padding:16px 18px !important;background:#fff !important;
  border:1px solid var(--borde) !important;border-radius:var(--r-brand) !important;box-shadow:var(--sombra-xs);display:flex !important;flex-direction:column;align-items:flex-start !important;gap:8px}
body.v-qgis .bottom-container:has(span:empty + span:empty){display:none !important}
body.v-qgis [id^="bottom-information"]{font:700 12px/1.3 "Montserrat",sans-serif !important;letter-spacing:.14em !important;text-transform:uppercase;color:var(--verde-700) !important}
body.v-qgis [id^="bottom-result"]{font:500 13px/1.5 "Montserrat",sans-serif !important;color:var(--carbon) !important;display:flex;flex-direction:column;gap:4px;text-align:left !important}

/* gráficos (01) */
body.v-qgis .left-graph-section{display:flex;flex-direction:column;gap:16px;width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;background:transparent !important}
body.v-qgis .left-charts{width:auto !important;height:auto !important;min-height:220px;margin:0 !important;padding:12px !important;background:#fff !important;
  border:1px solid var(--borde) !important;border-radius:var(--r-brand) !important;box-shadow:var(--sombra-xs);overflow:hidden}

body.v-qgis .left-charts:not(:has(.plot-container,svg,canvas)){display:none !important}
body.v-qgis.con-graficos:not(:has(.left-charts .plot-container,.left-charts svg)) .total-container{grid-template-columns:minmax(0,1fr) !important}
body.v-qgis.con-graficos:not(:has(.left-charts .plot-container,.left-charts svg)) .left-graph-section{display:none !important}
/* controles OpenLayers (02) */
body.v-qgis .top-left-title,body.v-qgis .project-abstract,body.v-qgis .project-abstract-uncollapsed{display:none !important}
body.v-qgis .gcd-gl-control{background:transparent !important}
body.v-qgis .gcd-gl-control:not(.gcd-gl-expanded){width:38px !important;height:38px !important}
body.v-qgis .gcd-gl-control.gcd-gl-expanded{width:200px !important;height:38px !important;overflow:visible !important;background:#fff !important;border-radius:var(--r-brand-sm) !important;box-shadow:var(--sombra-md)}
body.v-qgis .gcd-gl-control.gcd-gl-expanded .gcd-gl-input{left:40px !important;top:3px !important;width:154px !important;visibility:visible !important}
body.v-qgis .gcd-gl-btn{top:2px !important;left:2px !important;margin:0 !important}
body.v-qgis .gcd-gl-control:not(.gcd-gl-expanded) .gcd-gl-input{visibility:hidden !important}
body.v-qgis .top-left-title{background:rgba(255,255,255,.96) !important;border:1px solid var(--borde);border-radius:var(--r-brand-sm) !important;box-shadow:var(--sombra-md);padding:8px 14px !important;top:12px !important;left:12px !important}
body.v-qgis .top-left-title .project-title{font:800 15px/1.25 "Montserrat",sans-serif !important;color:var(--carbon) !important;margin:0 !important;background:transparent !important;padding:0 !important}
body.v-qgis .project-abstract,body.v-qgis .project-abstract-uncollapsed{background:rgba(255,255,255,.96) !important;border:1px solid var(--borde) !important;border-radius:var(--r-brand-sm) !important;
  box-shadow:var(--sombra-xs);font:500 12px/1.45 "Montserrat",sans-serif !important;color:var(--texto-2) !important;padding:8px 12px !important}
body.v-qgis .ol-control{background:transparent !important}
body.v-qgis .ol-control button{background:#fff !important;color:var(--carbon) !important;border:1px solid var(--borde) !important;border-radius:var(--r-brand-sm) !important;box-shadow:var(--sombra-md);margin:2px !important}
body.v-qgis .ol-control button:hover{background:var(--verde-50) !important}
body.v-qgis .ol-attribution{border-radius:8px 0 0 0 !important;font-size:12px !important}
body.v-qgis .ol-popup{border-radius:var(--r-brand-sm) !important;box-shadow:var(--sombra-md) !important;border:1px solid var(--borde) !important;font-family:"Montserrat",sans-serif}

@media (max-width:1100px){ body.v-qgis.con-graficos .total-container{grid-template-columns:minmax(0,1fr)}
  body.v-qgis.con-graficos .left-graph-section{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  body.v-qgis main{padding:18px 16px 32px !important}
  body.v-qgis .map-section{grid-template-columns:minmax(0,1fr);grid-template-rows:auto clamp(380px,62vh,560px);height:auto !important}
  body.v-qgis .btn-list{max-height:240px !important}
  body.v-qgis .bottom-chart-section,body.v-qgis.con-graficos .left-graph-section{grid-template-columns:minmax(0,1fr)}
}

/* DENSIDAD 04: qué red se ve (situación · corte · período) en una barra sobre el mapa;
   el panel queda solo para cómo se ve. */
body.v-modelacion main{display:flex;flex-direction:column;min-width:0}
body.v-modelacion #map{position:relative !important;inset:auto !important;flex:1 1 auto;min-height:0}
#selbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--borde);z-index:5}
#selbar .sb-g{display:flex;align-items:center;gap:8px;min-width:0}
#selbar .sb-l{font:700 12px/1 "Montserrat",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-700);white-space:nowrap}
#selbar .pills{flex-wrap:wrap}
#selbar .sb-per{margin-left:auto}
body.v-modelacion #selbar .pill{padding:6px 11px !important;min-height:28px}
body.v-modelacion #selbar #b_play{border:1.5px solid var(--borde) !important;background:#fff !important;border-radius:999px !important}
body.v-modelacion #selbar #b_play[aria-pressed="true"]{background:var(--carbon) !important;color:#fff !important;border-color:var(--carbon) !important}
body.v-modelacion aside{width:320px !important;min-width:320px !important}
body.v-modelacion aside header .tit{padding:14px 18px 12px !important}
body.v-modelacion aside header h1{font-size:18px !important}
body.v-modelacion aside header p{margin-top:4px !important}
body.v-modelacion section{padding:12px 18px !important}
body.v-modelacion section > h2{margin-bottom:8px !important}
body.v-modelacion .pills{border-radius:16px}
body.v-modelacion .pill{padding:6px 10px !important;min-height:28px}
body.v-modelacion .fila{margin:6px 0 !important}
body.v-modelacion select{padding:7px 9px !important}
body.v-modelacion aside footer{padding:12px 18px 16px !important}
@media (max-width:1100px){ #selbar .sb-per{margin-left:0} }

/* TRES COLUMNAS 04: arriba qué red (situación · corte · período); izquierda cómo se ve;
   centro el mapa; derecha resumen, diez mayores, arco seleccionado y distribución. */
body.v-modelacion #vis{max-width:1760px;width:100%;margin:0 auto;padding:20px 24px 36px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px}
body.v-modelacion #selbar{border:1px solid var(--borde);border-radius:var(--r-brand);box-shadow:var(--sombra-xs);padding:10px 16px}
body.v-modelacion #app{display:grid !important;grid-template-columns:300px minmax(0,1fr) 320px;gap:12px;padding:0 !important;margin:0 !important;max-width:none;
  height:clamp(560px,calc(100vh - 220px),900px) !important;min-height:0 !important}
body.v-modelacion aside{width:auto !important;min-width:0 !important}
body.v-modelacion aside.der{border:1px solid var(--borde);border-radius:var(--r-brand);box-shadow:var(--sombra-xs);background:#fff;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin}
body.v-modelacion aside.der section:last-of-type{border-bottom:0 !important}
body.v-modelacion aside.der footer{order:9;border-top:1px solid var(--borde)}
body.v-modelacion main{min-height:0}
@media (max-width:1280px){
  body.v-modelacion #app{grid-template-columns:290px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;height:auto !important}
  body.v-modelacion aside:not(.der){grid-row:1 / 3}
  body.v-modelacion main{min-height:520px}
  body.v-modelacion aside.der{max-height:none}
}
@media (max-width:700px){
  body.v-modelacion #vis{padding:14px 14px 24px}
  body.v-modelacion #app{grid-template-columns:minmax(0,1fr);height:auto !important}
  body.v-modelacion aside:not(.der){grid-row:auto}
  body.v-modelacion main{min-height:60vh;order:-1}
}

body.v-modelacion .vhead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:8px 0 6px}
body.v-modelacion aside:not(.der) > header{display:none !important}

/* La caja de escala de anchos quedaba encima de la atribucion de Leaflet: se sube sobre ella. */
body.v-modelacion #esc{bottom:30px !important}

/* El export dibuja un marco gris (border:1px solid gray) en la columna de graficos, detras de las
   tarjetas: se quita, las tarjetas ya llevan su borde. */
body.v-qgis .left-graph-section{border:0 !important;outline:0 !important}