/* Estilo inspirado en Esri Calcite Design System (tema claro de ArcGIS) */
:root{
  --brand:#007ac2;--brand-h:#00619b;--brand-p:#004874;--brand-l:#e5f1f9;
  --bg:#f8f8f8;--fg1:#ffffff;--fg2:#f3f3f3;--fg3:#eaeaea;
  --t1:#151515;--t2:#4a4a4a;--t3:#6a6a6a;
  --b1:#cacaca;--b2:#d4d4d4;--b3:#dfdfdf;
  --ok:#35ac46;--ok-d:#288835;--warn:#edd317;--warn-d:#b39b00;--danger:#d83020;--danger-d:#a82b1e;
  --shadow:0 2px 12px -4px rgba(0,0,0,.2),0 2px 4px -2px rgba(0,0,0,.16);
  --font:"Avenir Next LT Pro","Avenir Next","Avenir","Helvetica Neue",Arial,sans-serif;
  font-family:var(--font);color:var(--t1);background:var(--bg)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg)}
.ic{display:inline-block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;vertical-align:-3px}
.ic.spin,.rc-spin .ic{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
button .ic,summary .ic,.warning>.ic{margin-right:7px}

/* encabezado */
header{height:52px;padding:0 16px;display:flex;align-items:center;gap:18px;background:var(--fg1);border-bottom:1px solid var(--b3);box-shadow:0 1px 4px rgba(0,0,0,.06);position:relative;z-index:2000}
header .brand{display:flex;align-items:center;gap:10px;font-size:16px}
header .logo{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:var(--brand);color:#fff}
header .logo .ic{width:20px;height:20px;vertical-align:0}
header b{font-weight:600;letter-spacing:.2px}
header .ver{font-size:12px;color:var(--t3);border-left:1px solid var(--b2);padding-left:10px}
header small{color:var(--t3);font-size:12px;flex:1}
header .hdr-btn{width:auto;margin:0;white-space:nowrap}
#runChip{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:16px;background:var(--brand-l);color:var(--brand-p);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
#runChip .ic{margin:0}

/* panel lateral */
main{display:grid;grid-template-columns:350px 1fr;height:calc(100vh - 52px)}
aside{padding:0 0 14px;overflow:auto;background:var(--fg1);border-right:1px solid var(--b3)}
details{border-bottom:1px solid var(--b3);padding:0 14px;background:var(--fg1)}
details[open]{padding-bottom:12px}
summary{cursor:pointer;padding:13px 0;font-weight:600;font-size:14px;color:var(--t1);list-style:none;display:flex;align-items:center}
summary>.ic{color:var(--brand);width:18px;height:18px;margin-right:9px}
summary::-webkit-details-marker{display:none}
summary::after{content:'';width:16px;height:16px;margin-left:auto;background:var(--t3);-webkit-mask:url(https://cdn.jsdelivr.net/npm/@esri/calcite-ui-icons@4.5.0/icons/chevron-down-16.svg) center/contain no-repeat;mask:url(https://cdn.jsdelivr.net/npm/@esri/calcite-ui-icons@4.5.0/icons/chevron-down-16.svg) center/contain no-repeat;transform:rotate(-90deg);transition:transform .15s}
details[open] summary::after{transform:none}
summary:hover{color:var(--brand)}
label{display:block;font-size:12px;color:var(--t2);margin:9px 0;font-weight:500}
label.check{display:flex;align-items:center;gap:7px}
label.check input{width:auto;margin:0;accent-color:var(--brand)}
input,select{width:100%;margin-top:4px;background:var(--fg1);color:var(--t1);border:1px solid var(--b1);border-radius:2px;padding:7px 8px;font:inherit;font-size:13px;transition:border-color .1s}
input:hover,select:hover{border-color:#949494}
input:focus,select:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
input[type=range]{padding:0;border:0;accent-color:var(--brand);background:transparent}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.row{display:flex;gap:8px}
output{float:right;color:var(--brand);font-weight:600}
button{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:9px 12px;margin:6px 0;border:1px solid var(--brand);border-radius:2px;font:600 14px var(--font);background:var(--brand);color:#fff;cursor:pointer;transition:background .1s,border-color .1s}
button:hover{background:var(--brand-h);border-color:var(--brand-h)}
button:active{background:var(--brand-p)}
button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
button.secondary,button.tool{background:var(--fg1);color:var(--brand);border-color:var(--brand)}
button.secondary:hover,button.tool:hover{background:var(--brand-l)}
button.tool{font-size:13px;padding:7px 10px;font-weight:500;color:var(--t1);border-color:var(--b1)}
button.tool .ic{color:var(--brand)}
button.tool.active{background:var(--brand);color:#fff;border-color:var(--brand)}
button.tool.active .ic{color:#fff}
label.file-btn{display:flex;align-items:center;justify-content:center;margin:0 0 6px;padding:7px 10px;border:1px solid var(--b1);border-radius:2px;background:var(--fg1);color:var(--t1);font:500 13px var(--font);cursor:pointer}
label.file-btn:hover{background:var(--brand-l)}
label.file-btn .ic{color:var(--brand);margin-right:7px}
label.file-btn input{display:none}
button:disabled{opacity:.5;cursor:default;pointer-events:none}
#run{font-size:15px;padding:11px;white-space:nowrap}
#run .ic,#cancel .ic{flex:none}
aside>.row,aside>.progress,aside>#status,aside>#summary,aside>.warning{margin-left:14px;margin-right:14px}
aside>.row{margin-top:12px}
.progress{height:4px;background:var(--fg3);overflow:hidden;margin-top:4px}
.progress i{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
#status,#summary,.info{font-size:13px;padding:10px 12px;margin-top:8px;background:var(--fg2);border-left:3px solid var(--b1);line-height:1.5;color:var(--t2)}
#status{border-left-color:var(--brand)}
#status.err{border-left-color:var(--danger);color:var(--danger-d);background:#fdf1ef}
#status .ic{color:var(--ok)}
.info:empty,#summary:empty{display:none}
#summary{border-left-color:var(--ok);background:var(--fg1);border:1px solid var(--b3);border-left:3px solid var(--ok)}
#summary b{color:var(--t1)}
#summary table{width:100%;border-collapse:collapse}
#summary td{padding:3px 0;border-bottom:1px solid var(--fg3)}
#summary td+td{text-align:right;color:var(--t1);font-variant-numeric:tabular-nums;font-weight:500}
#summary .warn{color:var(--warn-d);margin-top:6px}
.hint,.warning{font-size:12px;color:var(--t3);line-height:1.45}
.warning{margin-top:14px;padding:10px 12px;border-left:3px solid var(--warn);background:#fffbe6;color:var(--t2);display:flex;align-items:flex-start}
.warning>.ic{color:var(--warn-d);margin-top:1px}

/* mapa y escena */
section{--split:42%;display:grid;grid-template-rows:var(--split) minmax(0,1fr);min-width:0;position:relative}
#map,#scene{width:100%;height:100%}
#map{border-bottom:1px solid var(--b2)}
#map.drawing{cursor:crosshair}
#map.drawing .leaflet-interactive{cursor:crosshair}
#scene{position:relative;background:#1f2a33;overflow:hidden}
#gl{display:block;width:100%;height:100%}
#toolbar,#player,#legend{background:var(--fg1);box-shadow:var(--shadow);border-radius:0;color:var(--t1)}
#toolbar{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:end;padding:8px 12px;max-width:calc(100% - 24px)}
#toolbar label{margin:0;font-size:11px;color:var(--t3)}
#toolbar label.check{padding-bottom:5px}
#toolbar input[type=range]{width:110px;display:block}
#toolbar select{width:auto;max-width:230px;display:block;padding:5px 7px;font-size:12px}
#toolbar output{float:none;margin-left:4px}
#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c9d3da;font-size:15px;pointer-events:none}
#player{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:6px 10px;width:min(580px,calc(100% - 260px))}
#player button{width:34px;height:32px;margin:0;padding:0}
#player button .ic{margin:0}
#player input{flex:1;margin:0;border:0}
#player select{width:64px;margin:0;padding:4px}
#timeLabel{font-size:12px;min-width:92px;font-variant-numeric:tabular-nums;color:var(--t2)}
#legend{position:absolute;bottom:12px;right:12px;padding:9px 11px;font-size:11px;min-width:210px;color:var(--t2)}
#legend .ramp{height:9px;margin:4px 0 2px}
#legend .ticks{display:flex;justify-content:space-between;color:var(--t3)}
#legend .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 8px;vertical-align:-1px}
.leaflet-container{font-family:var(--font)}
.leaflet-bar{border:0!important;box-shadow:var(--shadow)!important;border-radius:0!important}
.leaflet-bar a{border-radius:0!important;color:var(--t2)!important;width:32px!important;height:32px!important;line-height:32px!important}
.leaflet-bar a:hover{background:var(--fg2)!important;color:var(--brand)!important}
.leaflet-control-layers{border:0!important;border-radius:0!important;box-shadow:var(--shadow)!important;font-size:13px}
.leaflet-control-layers-expanded{padding:10px 14px}
.leaflet-control-scale-line{border-color:var(--t2);background:#fffc;color:var(--t1)}
.leaflet-tooltip.area-tip{background:var(--fg1);color:var(--t1);border:0;font-size:12px;box-shadow:var(--shadow)}
@media(max-width:800px){main{grid-template-columns:1fr;height:auto}aside{order:2}section{height:90vh}#player{width:calc(100% - 24px);bottom:64px}header small{display:none}}

/* ayuda contextual */
.help-i{display:inline-block;width:15px;height:15px;margin:0 0 0 6px;font-size:10px;line-height:15px;color:transparent;overflow:hidden;cursor:help;vertical-align:middle;flex:none;background:var(--t3);-webkit-mask:url(https://cdn.jsdelivr.net/npm/@esri/calcite-ui-icons@4.5.0/icons/information-16.svg) center/contain no-repeat;mask:url(https://cdn.jsdelivr.net/npm/@esri/calcite-ui-icons@4.5.0/icons/information-16.svg) center/contain no-repeat}
.help-i:hover,.help-i:focus{background:var(--brand);outline:none}
summary .help-i{margin-left:8px}
#helpPop{position:fixed;z-index:10000;max-width:340px;background:var(--fg1);border:1px solid var(--b3);padding:12px 14px;font-size:13px;line-height:1.45;color:var(--t2);box-shadow:0 6px 24px rgba(0,0,0,.18)}
#helpPop b{color:var(--t1);font-size:14px}
#helpPop p{margin:6px 0 8px}
#helpPop .hrow{display:grid;grid-template-columns:56px 1fr;gap:6px;margin-top:5px;padding-top:5px;border-top:1px solid var(--fg3)}
#helpPop .hrow span{color:var(--brand);font-weight:600;font-size:12px}
input.bad{border-color:var(--danger);background:#fdf1ef}
#player label.follow{margin:0;font-size:12px;white-space:nowrap;color:var(--t2)}

/* panel de impacto */
.impact{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--b3)}
.impact .zone{margin-top:10px}
.impact .zname{font-weight:600;color:var(--brand);margin-bottom:3px}
.impact .bar{display:flex;height:8px;background:var(--fg3);overflow:hidden;margin:3px 0 5px}
.impact .bar i{display:block;height:100%}
.impact .hint{margin-top:6px}
.impact svg.hydro{width:100%;height:auto;background:var(--fg2);margin:4px 0}
.impact svg.hydro text{fill:var(--t3);font-size:8px}
.impact td.sub{color:var(--t3);font-size:11px;padding-left:14px}
.gauge-label{color:#fff;font-size:11px;font-weight:700;text-shadow:0 0 3px #000,0 0 3px #000;white-space:nowrap}

/* tarjeta de progreso de la simulación */
#runCard{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:1700;width:min(520px,calc(100% - 28px));background:var(--fg1);box-shadow:0 8px 32px rgba(0,0,0,.25);border-top:4px solid var(--brand);padding:14px 16px 12px}
.rc-head{display:flex;align-items:center;gap:12px}
.rc-spin{color:var(--brand);display:flex}
.rc-spin .ic{width:28px;height:28px;margin:0}
.rc-titles{flex:1;min-width:0}
.rc-titles b{display:block;font-size:16px;font-weight:600}
.rc-titles small{display:block;color:var(--t3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rcPct{font-size:28px;font-weight:600;color:var(--brand);font-variant-numeric:tabular-nums}
button.rc-btn{width:30px;height:30px;padding:0;margin:0;background:transparent;border:0;color:var(--t3)}
button.rc-btn:hover{background:var(--fg2);color:var(--t1)}
button.rc-btn .ic{margin:0}
.rc-bar{height:8px;background:var(--fg3);margin:12px 0 10px;overflow:hidden;position:relative}
.rc-bar i{display:block;height:100%;width:0;background:var(--brand);transition:width .5s}
.rc-bar i.indet{width:30%!important;animation:indet 1.4s ease-in-out infinite}
@keyframes indet{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.rc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px}
.rc-grid div{display:flex;flex-direction:column;gap:2px;min-width:0}
.rc-grid span{font-size:11px;color:var(--t3);white-space:nowrap}
.rc-grid span .ic{width:14px;height:14px;margin-right:5px;color:var(--brand)}
.rc-grid b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-cancel{margin:12px 0 0;padding:7px;font-size:13px;border-color:var(--danger)!important;color:var(--danger)!important}
.rc-cancel:hover{background:#fdf1ef!important}
.rc-cancel .ic{color:var(--danger)}
#runCard.mini{width:auto;padding:8px 12px}
#runCard.mini .rc-grid,#runCard.mini .rc-cancel,#runCard.mini .rc-titles small{display:none}
#runCard.mini .rc-bar{margin:8px 0 0;height:4px}
#runCard.mini #rcPct{font-size:18px}
#runCard.mini .rc-titles b{font-size:14px}
#runCard.mini #rcMin .ic{transform:rotate(180deg)}

/* avisos (estilo calcite-alert) */
#toasts{position:absolute;right:14px;bottom:14px;z-index:1800;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;width:min(420px,calc(100vw - 40px));background:var(--fg1);box-shadow:0 8px 30px rgba(0,0,0,.28);border-top:4px solid var(--brand);padding:14px 12px 12px 16px;animation:tin .25s ease-out}
.toast.success{border-top-color:var(--ok)}
.toast.danger{border-top-color:var(--danger)}
.toast.warning{border-top-color:var(--warn)}
.toast .tk-ic{width:24px;height:24px;margin:0;color:var(--brand)}
.toast.success .tk-ic{color:var(--ok)}
.toast.danger .tk-ic{color:var(--danger)}
.tk-body{flex:1;font-size:13px;color:var(--t2);line-height:1.5;min-width:0;word-wrap:break-word}
.tk-body>b{display:block;font-size:16px;color:var(--t1);font-weight:600;margin-bottom:2px}
.tk-act{display:flex;gap:8px;margin-top:8px}
.tk-act:empty{display:none}
.tk-act button{width:auto;margin:0;padding:6px 12px;font-size:13px}
button.tk-x{width:28px;height:28px;padding:0;margin:0;background:transparent;border:0;color:var(--t3)}
button.tk-x:hover{background:var(--fg2);color:var(--t1)}
button.tk-x .ic{margin:0}
.toast.out{opacity:0;transform:translateY(8px);transition:.25s}
@keyframes tin{from{opacity:0;transform:translateY(12px)}}

/* ── editor del escenario: panel claro sobre todo el lado derecho (mapa + 3D) */
main>section{position:relative}
#editor{--ed-bg:#f8f8f8;--ed-card:#fff;--ed-line:#dfdfdf;--ed-text:#151515;--ed-mute:#6a6a6a;--ed-acc:#007ac2;
  position:absolute;inset:0;z-index:1500;display:flex;flex-direction:column;background:var(--ed-bg);color:var(--ed-text);font-size:13px;box-shadow:0 0 0 1px #0003}
#editor.mini{inset:auto 0 0 0;box-shadow:0 -6px 20px #0006}
#editor.mini .ed-tabs,#editor.mini .ed-body,#editor.mini .ed-foot{display:none}
#editor label{color:var(--ed-mute);font-size:12px}
#editor input,#editor select,#editor textarea{background:#fff;color:var(--ed-text);border:1px solid #cacaca;border-radius:2px}
#editor input:focus,#editor select:focus,#editor textarea:focus{outline:2px solid #007ac2;outline-offset:-1px;border-color:#007ac2}
#editor input.bad{border-color:#d9534f;background:#fdeceb}
#editor button.tool,#editor label.ed-file{background:#fff;color:var(--ed-text);border:1px solid #cacaca;border-radius:2px}
#editor button.tool:hover,#editor label.ed-file:hover{background:#e5f1f9;border-color:#007ac2}
#editor button.tool.active{background:#007ac2;color:#fff;border-color:#007ac2}
#editor .hint{color:var(--ed-mute)}
#editor a{color:#0b6fb8}
.ed-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;color:#151515;border-bottom:1px solid var(--ed-line);font-size:15px}
.ed-head .ed-title{color:#6a6a6a;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#editor .ed-head button.ed-x{width:auto;margin:0;padding:5px 12px}

.ed-tabs{display:flex;gap:0;padding:0 14px;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--ed-line)}
#editor .ed-tabs button{width:auto;margin:0;padding:11px 14px;background:transparent;border:0;border-bottom:3px solid transparent;color:#4a4a4a;font-weight:500}
#editor .ed-tabs button:hover{color:#151515;background:#f3f3f3}
#editor .ed-tabs button.active{background:transparent;color:#151515;border-bottom-color:#007ac2;font-weight:600}
.ed-badge{display:inline-block;margin-left:6px;background:#d9534f;color:#fff;border-radius:8px;padding:0 6px;font-size:10px}
.ed-body{flex:1;overflow:auto;padding:6px 18px 18px}
.ed-foot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--ed-line);background:#fff;flex-wrap:wrap}
.ed-foot button,.ed-foot .ed-file{width:auto;margin:0;padding:9px 16px}
.ed-pick{padding:10px 14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff4d6;color:#5a4300;font-weight:600}
.ed-pick button{width:auto;margin:0;padding:6px 12px}
.ed-sub{margin:16px 0 6px;font-weight:700;color:var(--ed-acc);font-size:13px;text-transform:uppercase;letter-spacing:.4px}
.ed-grid1 label{margin:8px 0}
#editor textarea{width:100%;margin-top:4px;padding:7px 8px;font:12px/1.45 ui-monospace,Menlo,monospace;resize:vertical}
.ed-grid1 textarea{font-family:inherit!important;font-size:13px!important}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 10px}
.ed-table{width:100%;border-collapse:collapse;background:var(--ed-card);border:1px solid var(--ed-line);border-radius:6px}
.ed-table td,.ed-table th{padding:4px 8px;border-bottom:1px solid #e6ecf1;text-align:left;vertical-align:middle}
.ed-table th{color:var(--ed-mute);font-weight:600;position:sticky;top:0;background:#eef3f7;z-index:1}
.ed-table input,.ed-table select{margin:0}
.ed-table td:first-child{color:var(--ed-text);width:38%}
.ed-btable td:first-child{width:auto}
.ed-btable tr.sel td{background:#fde9fb}
.ed-btable input{padding:3px 6px}
.ed-scroll{max-height:380px;overflow:auto;border:1px solid var(--ed-line);border-radius:6px}
.ed-rng{color:var(--ed-mute);font-size:11px;white-space:nowrap}
.ed-src{color:var(--ed-mute);font-size:11px;white-space:nowrap}
.ed-tag{display:inline-block;font-size:10px;border-radius:4px;padding:1px 6px;white-space:nowrap;font-weight:600}
.ed-tag.ok{background:#dcf3e8;color:#0f7a52}
.ed-tag.mod{background:#fff0cc;color:#8a5a00}
.ed-tag.def{background:#fde2e0;color:#b3261e}
.ed-list{margin-top:10px;border:1px solid var(--ed-line);border-radius:8px;background:var(--ed-card);padding:0 12px}
.ed-list[open]{padding-bottom:10px}
#editor .ed-list summary{color:var(--ed-text)}
.ed-count{color:var(--ed-acc);font-weight:700;margin-left:4px}
.ed-card{border:1px solid var(--ed-line);border-radius:8px;padding:8px 12px;margin:8px 0;background:#f9fbfc}
.ed-card-h{display:flex;align-items:center;justify-content:space-between}
#editor button.ed-del{width:auto;margin:0;padding:3px 8px;font-size:11px;background:#fff;color:#b3261e;border:1px solid #efc4c0}
#editor button.ed-add{width:auto;padding:6px 12px}
.ed-geomlbl{font-size:12px;color:var(--ed-mute);margin-top:6px}
.ed-geom{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0}
.ed-geom button{width:auto;margin:0;padding:5px 10px}
.ed-ginfo{color:var(--ed-text);min-width:150px;font-weight:600}
.ed-err{color:#b3261e;width:100%}
.ed-sublist{border-left:3px solid var(--ed-line);padding-left:10px;margin-top:6px}
.ed-subitem{display:flex;gap:6px;align-items:end}
.ed-subitem .grid3{flex:1}
.ed-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.ed-row select{width:auto;flex:1;min-width:200px;margin:0}
.ed-row button,.ed-row .ed-file{width:auto;margin:0;padding:7px 12px}
label.ed-file{display:inline-block;cursor:pointer;border-radius:7px;font-weight:600;font-size:12px;text-align:center}
label.ed-file input{display:none}
.ed-inline{display:flex;align-items:center;gap:8px}
.ed-inline input{width:90px;margin:0}
.ed-stats td{width:auto!important}
.ed-warn{color:#b86e00;font-weight:700}
.ed-miss li{margin:5px 0}
.ed-miss li.hard a{color:#b3261e}
.ed-miss li.soft a{color:#8a5a00}
#editor output{color:var(--ed-acc)}
@media(max-width:800px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
#editor button .ic,#editor label.ed-file .ic{margin-right:6px;color:inherit}
#editor button.tool .ic,#editor label.ed-file .ic{color:#007ac2}
#editor button.ed-del .ic{margin:0;color:#d83020}
.ed-head b .ic{color:#007ac2}
label.ed-file{display:inline-flex;align-items:center}
/* ficha del ejemplo: créditos y datos de campo */
#exInfo .credits,#exInfo .fielddata{margin:10px 0 8px;padding:8px 10px;background:var(--fg1);border:1px solid var(--b3);border-left:3px solid var(--brand);font-size:12px}
#exInfo .fielddata{border-left-color:var(--ok)}
#exInfo .credits b,#exInfo .fielddata b{color:var(--t1);display:inline-flex;align-items:center}
#exInfo .credits b .ic,#exInfo .fielddata b .ic{margin-right:6px;color:var(--brand)}
#exInfo .fielddata b .ic{color:var(--ok-d)}
#exInfo .credits p,#exInfo .fielddata p{margin:5px 0 0}
#exInfo a{color:var(--brand);word-break:break-all}
/* desencadenante por lluvia */
#rainBody label{position:relative}
#rainBody input[type=range]{margin-top:6px}
#rainBody input.rain-num{width:96px;margin-top:2px;padding:4px 6px;font-size:12px}
details.rain-soil{border:1px solid var(--b3);padding:0 10px;margin:8px 0}
details.rain-soil summary{font-size:13px;padding:8px 0}
.rain-res{margin-top:8px;padding:10px 12px;background:var(--fg2);border-left:3px solid var(--b1);font-size:13px;line-height:1.5;color:var(--t2)}
.rain-res b{display:flex;align-items:center;gap:6px;color:var(--t1);margin-bottom:4px}
.rain-res.fail{border-left-color:var(--danger);background:#fdf1ef}
.rain-res.fail b .ic{color:var(--danger)}
.rain-res.stable{border-left-color:var(--ok);background:#eef8f0}
.rain-res.stable b .ic{color:var(--ok-d)}
.rain-res table{width:100%;border-collapse:collapse;margin:4px 0}
.rain-res td{padding:2px 0;border-bottom:1px solid #0000000d}
.rain-res td+td{text-align:right;color:var(--t1);font-variant-numeric:tabular-nums}
.rain-res .hint{margin-top:4px}
.ed-objbox{border-left:3px solid #a83bd6;padding:4px 0 6px 10px;margin-top:8px}

/* cuencas y tormenta */
#basinBody b.sub{display:block;margin:10px 0 2px;color:var(--t1);font-size:13px}
.basins-res{margin-top:8px;font-size:12.5px;color:var(--t2)}
.basins-res .warn{color:var(--warn-d);margin:4px 0}
.basins-res svg.hydro,#summary svg.hydro{width:100%;height:auto;background:var(--fg2);margin:4px 0}
.basins-res svg.hydro text{fill:var(--t3);font-size:8px}
.basins-res .zname,#summary .zname{font-weight:600;color:var(--brand);margin:8px 0 3px}
.basins-res table{width:100%;border-collapse:collapse;margin:4px 0}
.basins-res td{padding:2px 0;border-bottom:1px solid #0000000d}
.basins-res td+td{text-align:right;font-variant-numeric:tabular-nums}
table.basins th{font-weight:600;color:var(--t3);text-align:right;padding:2px 3px;font-size:11px}
table.basins th:first-child{text-align:left}
table.basins td{padding:3px 3px;text-align:right;font-variant-numeric:tabular-nums}
table.basins td:first-child{text-align:left}
table.basins tr[data-bid]{cursor:pointer}
table.basins tr[data-bid]:hover td{background:var(--fg2)}
.flow-badge{display:inline-block;padding:1px 6px;border-radius:8px;color:#fff;font-size:10.5px;white-space:nowrap}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 8px;vertical-align:-1px}

/* selector de tipo de simulación */
.modebar{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 14px 10px}
.mode-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;font-size:13px;line-height:1.2;text-align:center;
  background:var(--fg2);color:var(--t2);border:1px solid var(--b3);border-radius:6px;cursor:pointer}
.mode-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.sel-info{margin:6px 0 4px;display:flex;flex-direction:column;gap:2px}
.sel-info b{color:var(--brand)}
table.basins input[type=checkbox]{margin:0 4px 0 0;vertical-align:-2px;width:auto}
table.basins .indent{display:inline-block;width:18px}

/* ── proyecto y biblioteca de análisis */
aside textarea{width:100%;margin-top:4px;background:var(--fg1);color:var(--t1);border:1px solid var(--b1);border-radius:2px;padding:7px 8px;font:13px/1.4 var(--font);resize:vertical}
aside textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.sum-count{font-weight:400;color:var(--t3);margin-left:6px}
#libList{max-height:340px;overflow:auto;border:1px solid var(--b3);background:var(--fg2);margin-top:4px}
.lib-empty{padding:10px 12px}
.lib-proj{display:flex;align-items:center;gap:6px;padding:7px 8px 5px;font-size:12px;font-weight:600;color:var(--brand-p);background:var(--brand-l);position:sticky;top:0;z-index:1}
.lib-proj span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-proj small{color:var(--t3);font-weight:400}
.lib-item{display:flex;align-items:flex-start;gap:6px;padding:7px 6px 7px 8px;background:var(--fg1);border-bottom:1px solid var(--b3);border-left:3px solid transparent}
.lib-item:hover{background:#f6fbff}
.lib-item.current{border-left-color:var(--ok);background:#f2faf3}
.lib-item.sel{background:var(--brand-l)}
.lib-chk{width:auto!important;margin:3px 0 0!important;accent-color:var(--brand);flex:none}
.lib-main{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.lib-main b{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-main b .ic{color:var(--brand);margin-right:5px;width:14px;height:14px}
.lib-main small{font-size:11px;color:var(--t3)}
.lib-facts{color:var(--t2)!important}
.lib-crit{color:var(--danger-d);font-weight:600}
.lib-acts{display:flex;flex:none;opacity:.55}
.lib-item:hover .lib-acts,.lib-item.current .lib-acts{opacity:1}
button.lib-mini{width:26px;height:26px;padding:0;margin:0;background:transparent;border:0;color:var(--t2)}
button.lib-mini:hover{background:var(--fg3);color:var(--brand)}
button.lib-mini .ic{margin:0}
.lib-proj button.lib-mini{width:22px;height:22px;color:var(--brand)}
.lib-item.editing{flex-direction:column;align-items:stretch;background:#fffdf3}
.lib-item.editing label{margin:4px 0}
.lib-item.editing .row button{margin:4px 0}

/* encabezado del análisis abierto y zonas */
.ana-head{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--b3)}
.ana-head>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.ana-head>div:first-child .ic{color:var(--brand)}
.ana-head b{font-size:14px}
.ana-head small{flex-basis:100%;color:var(--t3);padding-left:22px}
.ana-head .row button{margin:6px 0 0;font-size:12px;padding:6px 8px}
.crit,.dmg{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;line-height:1.5}
.zones-panel label.check{margin:6px 0}
table.zlist th{text-align:left;font-size:11px;color:var(--t3);font-weight:500;padding:2px 0}
table.zlist tr[data-zone]{cursor:pointer}
table.zlist tr[data-zone]:hover td{background:var(--brand-l)}
#summary table.zlist td+td{text-align:left}
#summary table.zlist td:last-child{text-align:right}
.zone-label span{display:inline-block;background:#fff;border:2px solid #6b0a0a;color:#111;font:700 11px var(--font);padding:0 4px;white-space:nowrap;box-shadow:0 1px 3px #0005;transform:translate(-50%,-50%)}
#map.drawing .leaflet-zonesPane-pane *,#map.drawing .leaflet-buildingsPane-pane *{pointer-events:none!important}

/* ventanas emergentes del mapa (zona y edificio) */
.leaflet-popup-content{margin:12px 14px;font-size:12.5px;line-height:1.4}
.pop-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:14px}
.pop table{width:100%;border-collapse:collapse}
.pop td{padding:2px 0;border-bottom:1px solid var(--fg3)}
.pop td+td{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.pop .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.pop-sec{margin:10px 0 4px;font-weight:600}
.pop .bar{display:flex;height:9px;background:var(--fg3);overflow:hidden;margin:3px 0 5px}
.pop .bar i{display:block;height:100%}
.dmg-legend{display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:6px;font-size:11px}
.pop-list{max-height:220px;overflow:auto;border:1px solid var(--b3);margin:4px 0}
.pop-list th{position:sticky;top:0;background:var(--fg2);font-size:11px;font-weight:600;text-align:left;padding:3px 4px;color:var(--t2)}
.pop-list td{padding:3px 4px;font-size:11.5px;white-space:nowrap}
.pop-list td+td{text-align:left}
.pop-list tr[data-b]{cursor:pointer}
.pop-list tr[data-b]:hover td{background:var(--brand-l)}
.pop .hint{margin-top:4px}

/* visor de informes y comparaciones (sobre el mapa y la vista 3D) */
#docview{position:absolute;inset:0;z-index:1600;display:flex;flex-direction:column;background:#e9ecef}
.dv-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--fg1);border-bottom:1px solid var(--b3);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.dv-head .dv-title{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-head button{width:auto;margin:0;padding:7px 12px;font-size:13px}
.dv-body{flex:1;position:relative;min-height:0}
.dv-body iframe{width:100%;height:100%;border:0;display:block;background:#e9ecef}
.dv-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--t2);font-size:14px}
.dv-spin{width:36px;height:36px;border:4px solid var(--b2);border-top-color:var(--brand);border-radius:50%;animation:spin .9s linear infinite}
@media(max-width:800px){.dv-head{flex-wrap:wrap}.dv-head .dv-title{flex-basis:100%}}

/* ── índice de pasos en la barra lateral */
.steps-card{margin:0 14px 4px;border:1px solid var(--b3);border-radius:6px;background:var(--fg2);overflow:hidden}
.steps-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--b3);background:var(--fg1)}
.steps-head b{font-size:13px}
.steps-head button{width:auto;margin:0;padding:5px 10px}
#stepList{list-style:none;margin:0;padding:4px 0}
#stepList li{display:flex;align-items:flex-start;gap:10px;padding:6px 10px;cursor:pointer;border-left:3px solid transparent}
#stepList li:hover{background:var(--brand-l)}
#stepList li.cur{background:var(--brand-l);border-left-color:var(--brand)}
.st-n{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--fg1);border:1.5px solid var(--b1);font-size:12px;font-weight:600;color:var(--t2);display:flex;align-items:center;justify-content:center}
#stepList li.cur .st-n{background:var(--brand);border-color:var(--brand);color:#fff}
.st-t{flex:1;min-width:0;display:flex;flex-direction:column}
.st-t b{font-size:13px;font-weight:600;color:var(--t1)}
.st-t small{font-size:11.5px;color:var(--t3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.st-go{color:var(--t3);margin-top:3px;opacity:0}
#stepList li:hover .st-go{opacity:1;color:var(--brand)}

/* ── asistente flotante */
#wizard{position:absolute;left:56px;top:12px;z-index:1200;width:400px;max-width:calc(100% - 24px);max-height:calc(100% - 24px);display:flex;flex-direction:column;
  background:var(--fg1);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.32),0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
#wizard.dragging{opacity:.92;user-select:none}
.wz-head{display:flex;align-items:center;gap:6px;padding:9px 8px 9px 6px;background:linear-gradient(120deg,#0b4f7f,var(--brand));color:#fff;cursor:move;user-select:none;touch-action:none}
.wz-grip{opacity:.7;display:flex}
.wz-grip .ic{margin:0}
.wz-titles{flex:1;min-width:0;display:flex;flex-direction:column}
.wz-titles small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.wz-titles b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.wz-btn{width:30px;height:30px;padding:0;margin:0;background:transparent;border:0;border-radius:4px;color:#fff}
button.wz-btn:hover{background:rgba(255,255,255,.18)}
button.wz-btn .ic{margin:0}
.wz-steps{display:flex;align-items:center;list-style:none;margin:0;padding:10px 14px;border-bottom:1px solid var(--b3);background:var(--fg2)}
.wz-steps li{flex:1;display:flex;align-items:center}
.wz-steps li:not(:last-child)::after{content:'';flex:1;height:2px;background:var(--b2);margin:0 4px}
.wz-steps li.done:not(:last-child)::after{background:var(--brand)}
.wz-steps li:last-child{flex:none}
.wz-steps button{width:26px;height:26px;padding:0;margin:0;border-radius:50%;font-size:12px;font-weight:600;background:var(--fg1);color:var(--t2);border:1.5px solid var(--b1)}
.wz-steps button:hover{border-color:var(--brand);color:var(--brand);background:var(--fg1)}
.wz-steps li.done button{border-color:var(--brand);color:var(--brand)}
.wz-steps li.cur button{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 3px var(--brand-l)}
.wz-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.wz-body details{border-bottom:0;padding:0 16px}
.wz-body details+details:not(.wz-off){border-top:1px solid var(--b3)}
.wz-body summary{cursor:default;font-size:15px}
.wz-body summary::after{display:none}
.wz-body summary:hover{color:var(--t1)}
.wz-off{display:none!important}
.wz-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--b3);background:var(--fg2)}
.wz-foot button{margin:0}
.wz-foot #wzPrev{flex:0 0 auto;width:auto}
.wz-foot #wzNext{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-foot #wzNext .ic{margin:0 0 0 6px}
.wz-foot #wzNext.wz-run .ic{margin:0 7px 0 0}
.wz-foot #wzNext.wz-run{background:var(--ok);border-color:var(--ok)}
.wz-foot #wzNext.wz-run:hover{background:var(--ok-d);border-color:var(--ok-d)}
.wz-draw{padding:8px 14px;font-size:13px;background:#fff8e1;color:var(--t2)}
#wizard.min .wz-steps,#wizard.min .wz-body,#wizard.min .wz-foot,
#wizard.drawing .wz-steps,#wizard.drawing .wz-body,#wizard.drawing .wz-foot{display:none}
#wizard.min,#wizard.drawing{width:340px}
@media(max-width:800px){#wizard{position:fixed;left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;max-width:none;max-height:72vh}}

/* ── divisor entre el mapa y la vista 3D (se arrastra) */
#split{position:absolute;left:0;right:0;top:calc(var(--split) - 6px);height:12px;z-index:1100;cursor:row-resize;display:flex;align-items:center;justify-content:center;touch-action:none}
#split::before{content:'';position:absolute;left:0;right:0;top:5px;height:2px;background:transparent;transition:background .12s}
#split span{position:relative;width:56px;height:8px;border-radius:4px;background:var(--fg1);box-shadow:0 1px 4px rgba(0,0,0,.35);border:1px solid var(--b1)}
#split:hover::before,#split.on::before,#split:focus-visible::before{background:var(--brand)}
#split:hover span,#split.on span{background:var(--brand);border-color:var(--brand)}
#split:focus-visible{outline:none}
body.splitting{cursor:row-resize;user-select:none}
body.splitting #map,body.splitting #scene{pointer-events:none}