/* Paleta apta para daltonismo (protanopia/deuteranopia/tritanopia), inspirada
   en Okabe-Ito: cada rol semántico usa un matiz bien separado de los demás
   (bomba=verde azulado, ventilación=magenta, auto=azul, simulación=violeta,
   manual/luces=ámbar, alarma=rosa-rojo) para que no dependa sólo del color
   -siempre va acompañado de ícono + texto+ estado. */
:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#e8f1ec;background:#0b1411;--panel:#13221c;--line:#28443a;--green:#22c55e;--cyan:#14b8a6;--teal:#ec4899;--blue:#0ea5e9;--violet:#8b5cf6;--amber:#f59e0b;--red:#f43f5e;--muted:#97aaa0}
[data-hc="1"]{--panel:#ffffff;--line:#111111;--green:#0f7a3d;--cyan:#0d7a6c;--teal:#a3006b;--blue:#00588f;--violet:#4c1d95;--amber:#8a5300;--red:#b3001f;--muted:#3f3f3f;color:#0a0a0a;background:#f4f4f0}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#0b1411,#0d1915 45%,#0a1210);min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:#0d1915e8;position:sticky;top:0;z-index:5}
.token-banner{display:flex;align-items:center;gap:12px;padding:10px clamp(16px,4vw,48px);background:#4a3208;color:#fcd34d;border-bottom:2px solid var(--amber);font-size:14px;position:sticky;top:0;z-index:4}
.token-banner svg{width:20px;height:20px;fill:currentColor;flex:none}
.token-banner span{flex:1}
.token-banner button{white-space:nowrap;border-color:var(--amber);color:#fcd34d}
[data-hc="1"] .token-banner{background:#fdf0d9;color:#5c3a00;border-bottom-color:var(--amber)}
[data-hc="1"] .token-banner button{border-color:var(--amber);color:#5c3a00}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#2a8d63,#194a38);box-shadow:0 8px 20px #0006}
.brand-mark svg{width:24px;height:24px;fill:#fff}
.topbar h1{margin:0 0 3px;font-size:clamp(19px,2.6vw,28px)}
.topbar p{margin:0;color:var(--muted);font-size:13px}
.status-cluster{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;border:1px solid var(--line);background:#182a24;color:var(--muted)}
.chip svg{width:14px;height:14px;fill:currentColor}
.chip.mode-auto{background:#0a3049;color:#7dd3fc;border-color:var(--blue)}
.chip.mode-manual{background:#4a3208;color:#fcd34d;border-color:var(--amber)}
.chip.mode-emergency{background:#4a0f1c;color:#fda4af;border-color:var(--red);animation:pulse-chip 1.1s infinite}
.chip.alarm-ok{background:#0b3d24;color:#86efac;border-color:var(--green)}
.chip.alarm-active{background:#4a0f1c;color:#fda4af;border-color:var(--red);animation:pulse-chip 1.1s infinite}
.chip.mqtt-on{background:#0b3d24;color:#86efac;border-color:var(--green)}
.chip.mqtt-off{background:#20302c;color:var(--muted)}
@keyframes pulse-chip{50%{opacity:.45}}
.status-wrap{display:flex;gap:8px;align-items:center}.dot{width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px currentColor}.dot.ok{background:var(--green)}.dot.bad{background:var(--red)}
.tabs{display:flex;gap:8px;padding:14px clamp(16px,4vw,48px);overflow:auto;border-bottom:1px solid var(--line)}
.tab{display:inline-flex;align-items:center;gap:7px}
.tab svg{width:15px;height:15px;fill:currentColor}
button,.button{display:inline-flex;align-items:center;gap:6px}
button svg,.button svg{width:15px;height:15px;fill:currentColor;flex:none}
h2 svg,h3 svg{width:16px;height:16px;fill:currentColor;vertical-align:-3px;margin-right:4px}
.card-head{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin-bottom:6px}
.card .card-icon{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.05)}
.card-icon svg{width:15px;height:15px;fill:currentColor}
.card-icon.green{color:var(--green)}.card-icon.blue{color:var(--blue)}.card-icon.cyan{color:var(--cyan)}.card-icon.teal{color:var(--teal)}.card-icon.violet{color:var(--violet)}.card-icon.amber{color:var(--amber)}
button,.button,select,input{border:1px solid var(--line);background:#172a22;color:#e8f1ec;border-radius:10px;padding:10px 14px;font:inherit}button,.button{cursor:pointer;text-decoration:none}button:hover,.button:hover{border-color:var(--green)}.tab.active{background:var(--green);color:#06120b;border-color:var(--green);font-weight:700}
.tab.active svg{fill:#06120b}main{padding:24px clamp(16px,4vw,48px) 64px}.view{display:none}.view.active{display:block}.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px;margin:18px 0}.card,.panel{background:linear-gradient(145deg,#14261e,#101d18);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 12px 30px #0004}.card span,.weather-grid span{display:block;color:var(--muted);font-size:13px}.card strong{font-size:34px;margin-right:5px}.card small{color:var(--muted)}.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin:16px 0}.weather-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.weather-grid b{display:block;margin-top:4px}.alarm-summary strong{font-size:64px;color:var(--red)}.alarm-summary p{color:var(--muted)}.chart-panel{margin-top:16px}.legend{color:var(--muted);font-size:13px}.legend i{display:inline-block;width:18px;height:3px;margin:0 5px 3px 14px}.l1{background:var(--green)}.l2{background:var(--cyan)}.l3{background:var(--amber)}canvas{width:100%;height:auto;max-height:460px}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.table-wrap{overflow:auto;margin-top:16px}table{width:100%;border-collapse:collapse;min-width:850px}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);font-size:13px}th{color:var(--muted);font-weight:600}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#294539;font-size:12px;font-weight:800}.badge.open,.badge.alarm{background:#4a0f1c;color:#fda4af}.badge.closed,.badge.info{background:#0b3d24;color:#86efac}.badge.warning{background:#4a3208;color:#fcd34d}.badge.running{background:#0b3d24;color:#86efac;box-shadow:0 0 10px #22c55e55}.badge.idle{background:#20302c;color:var(--muted)}pre{white-space:pre-wrap;color:#b7c9c0}.error{color:var(--red)}@media(max-width:800px){.grid2{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:18px}.weather-grid{grid-template-columns:1fr}.card strong{font-size:28px}}

/* Fase 3 · panel de control (botones, planes de riego, ajustes) */
.hint{color:var(--muted);font-size:13px;margin:10px 0}
.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
button.active{background:var(--green);color:#06120b;border-color:var(--green);font-weight:700}
button.danger{border-color:var(--red);color:#fda4af}
button.danger.active{background:var(--red);color:#2c0709;border-color:var(--red)}
button.secondary{background:transparent;color:var(--muted)}
button:disabled{opacity:.45;cursor:not-allowed}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}
.settings-grid label,.preset-row label,.toggle-label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}
.toggle-label{flex-direction:row!important;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:14px 0}
.plan-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:linear-gradient(145deg,#14261e,#101d18);display:flex;flex-direction:column;gap:10px}
.plan-card.disabled{opacity:.55}
.plan-card.active{border-color:var(--green);box-shadow:0 0 0 1px rgba(68,210,125,.3)}
.plan-card-head{display:flex;justify-content:space-between;gap:8px}
.plan-card h3{margin:0;font-size:15px}
.plan-card em{color:var(--muted);font-size:12px}
.plan-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:12px}
.plan-meta div{padding:6px 8px;border-radius:8px;background:#0000002a}
.plan-meta span{display:block;color:var(--muted);font-size:11px}
.plan-actions{display:flex;gap:6px;flex-wrap:wrap}
.plan-actions button{padding:7px 9px;font-size:12px;flex:1}
.plan-dialog{width:min(760px,94vw);border:1px solid var(--line);border-radius:16px;background:#101e1a;color:#e8f1ec;padding:20px;box-shadow:0 25px 80px #0008}
.plan-dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.preset-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-bottom:12px}
.icon-button{width:34px;height:34px;padding:0;border-radius:50%;font-size:20px;line-height:1}

/* Botones de control estilo pulsador industrial: apagado = contorno con el
   color de su función; encendido = "iluminado" con relleno sólido. */
.ctl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 10px;border-radius:14px;background:#101d18;font-weight:800;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase}
.ctl svg{width:26px;height:26px;fill:currentColor}
.ctl:disabled{opacity:.4;cursor:not-allowed}
.ctl-mode{color:var(--blue);border-color:#20415e}
.ctl-mode.active{background:var(--blue);color:#06172c;border-color:var(--blue)}
.ctl-sim{color:var(--violet);border-color:#3d3159}
.ctl-sim.active{background:var(--violet);color:#1c1230;border-color:var(--violet)}
.ctl-pump{color:var(--cyan);border-color:#204252}
.ctl-pump.active{background:var(--cyan);color:#06272f;border-color:var(--cyan)}
.ctl-vent{color:var(--teal);border-color:#1e433d}
.ctl-vent.active{background:var(--teal);color:#052420;border-color:var(--teal)}
.ctl-light{color:var(--amber);border-color:#4a3b1a}
.ctl-light.active{background:var(--amber);color:#2c2005;border-color:var(--amber)}
.ctl-emergency{color:var(--red);border-color:#5c2a2d}
.ctl-emergency.active{background:var(--red);color:#2c0709;border-color:var(--red);animation:pulse-ctl 1s infinite}
@keyframes pulse-ctl{50%{filter:brightness(1.3)}}

.plan-system-icon{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;background:#0000002a;color:var(--green)}
.plan-system-icon svg{width:15px;height:15px;fill:currentColor}
.plan-system-icon.dwc{color:var(--blue)}
.plan-system-icon.nft{color:var(--cyan)}
.plan-system-icon.substrate{color:var(--amber)}
.plan-card-head{align-items:center}

/* Mapa hidráulico: tanque -> bomba -> colector -> válvula por zona. */
.hydraulic-map{width:100%;overflow-x:auto}
.hydraulic-map svg{display:block;min-width:520px}
.map-label{fill:var(--muted);font-size:11px}
.map-zone-label{fill:#e8f1ec;font-size:12px;font-weight:600}
.map-zone-sub{fill:var(--muted);font-size:11px}
[data-hc="1"] .map-zone-label{fill:#0a0a0a}
.pipe{stroke:var(--line);stroke-width:6;stroke-linecap:round}
.pipe.flow{stroke:var(--cyan);stroke-dasharray:10 8;animation:bv-flow 0.6s linear infinite}
@keyframes bv-flow{to{stroke-dashoffset:-18}}
.pump-node{fill:#101d18;stroke:var(--line);stroke-width:2}
.pump-node.on{fill:var(--cyan);stroke:var(--cyan)}
.valve-node rect{fill:#101d18;stroke:var(--line);stroke-width:2}
.valve-node.open rect{fill:var(--cyan);stroke:var(--cyan)}
.zone-box{fill:#101d18;stroke:var(--line);stroke-width:1.5}
.zone-box.active{stroke:var(--cyan)}
.zone-box.manual{stroke:var(--amber);stroke-dasharray:4 3}
.map-clickable{cursor:pointer}
.map-clickable:hover .zone-box,.map-clickable:hover .pump-node,.map-clickable:hover .tank-outline{stroke:var(--green);stroke-width:2.5}
.zone-box.selected,.map-clickable.selected .pump-node,.map-clickable.selected .tank-outline{stroke:var(--green);stroke-width:3}
#hydraulicMapDetail h3{margin-top:0}

.hc-toggle{display:inline-flex;align-items:center;gap:6px}
.hc-toggle svg{width:15px;height:15px;fill:currentColor}

/* Modo alta luminosidad / exterior: fondo claro y bordes marcados en vez de
   degradés oscuros de bajo contraste, que se lavan con luz solar directa. */
[data-hc="1"] body{background:#f4f4f0;color:#0a0a0a}
[data-hc="1"] .topbar{background:#ffffffed;border-bottom:2px solid var(--line)}
[data-hc="1"] .topbar p{color:#3f3f3f}
[data-hc="1"] .brand-mark{background:linear-gradient(145deg,#0f7a3d,#0a5a2c);box-shadow:0 8px 20px #0002}
[data-hc="1"] .tabs{border-bottom:2px solid var(--line)}
[data-hc="1"] button,[data-hc="1"] .button,[data-hc="1"] select,[data-hc="1"] input{background:#ffffff;color:#0a0a0a;border:2px solid var(--line)}
[data-hc="1"] .tab.active{background:var(--green);color:#ffffff;border-color:var(--green)}
[data-hc="1"] .tab.active svg{fill:#ffffff}
[data-hc="1"] .card,[data-hc="1"] .panel,[data-hc="1"] .plan-card,[data-hc="1"] .plan-dialog{background:#ffffff;border:2px solid var(--line);box-shadow:0 4px 14px #0001}
[data-hc="1"] .card span,[data-hc="1"] .weather-grid span,[data-hc="1"] .card small,[data-hc="1"] .legend,[data-hc="1"] .hint,[data-hc="1"] th{color:#3f3f3f}
[data-hc="1"] th,[data-hc="1"] td{border-bottom:1px solid var(--line)}
[data-hc="1"] .chip{border-width:2px;font-weight:900}
[data-hc="1"] .chip.mode-auto{background:#dff1fb;color:#00405f;border-color:var(--blue)}
[data-hc="1"] .chip.mode-manual{background:#fdf0d9;color:#5c3a00;border-color:var(--amber)}
[data-hc="1"] .chip.mode-emergency,[data-hc="1"] .chip.alarm-active{background:#fbdfe4;color:#7a0018;border-color:var(--red)}
[data-hc="1"] .chip.alarm-ok,[data-hc="1"] .chip.mqtt-on{background:#dcf3e4;color:#0a4d26;border-color:var(--green)}
[data-hc="1"] .chip.mqtt-off{background:#e8e8e4;color:#3f3f3f;border-color:var(--line)}
[data-hc="1"] .badge{font-weight:900}
[data-hc="1"] .badge.open,[data-hc="1"] .badge.alarm{background:#fbdfe4;color:#7a0018}
[data-hc="1"] .badge.closed,[data-hc="1"] .badge.info,[data-hc="1"] .badge.running{background:#dcf3e4;color:#0a4d26}
[data-hc="1"] .badge.warning{background:#fdf0d9;color:#5c3a00}
[data-hc="1"] .badge.idle{background:#e8e8e4;color:#3f3f3f}
[data-hc="1"] .ctl{background:#ffffff;border-width:2px}
[data-hc="1"] .ctl-mode.active{color:#ffffff}
[data-hc="1"] .ctl-sim.active{color:#ffffff}
[data-hc="1"] .ctl-pump.active{color:#ffffff}
[data-hc="1"] .ctl-vent.active{color:#ffffff}
[data-hc="1"] .ctl-light.active{color:#1a1200}
[data-hc="1"] .ctl-emergency.active{color:#ffffff}
[data-hc="1"] .plan-system-icon{background:#e8e8e4}
[data-hc="1"] pre{color:#1a1a1a}