:root{--panel:#fff;--ink:#2e3a44;--dim:#7f8c99;--line:#e9eef2;--green:#22b573;--green-d:#127a4c;--green-l:#e9f9f0;--sun:#ffcf3f;--amber:#ff9f1c;--shadow:0 10px 26px rgba(40,70,60,.14)}
  *{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;color:var(--ink);overflow:hidden}
  body{display:flex;flex-direction:column;background:linear-gradient(180deg,#8fd0f5,#d6f0ff 58%,#95d873 58%,#72c257);transition:background .8s}
  body.night{background:linear-gradient(180deg,#16244d,#2b3866 58%,#254a30 58%,#1a3a24)}
  header{display:flex;align-items:center;gap:9px;padding:8px 13px;background:rgba(255,255,255,.94);box-shadow:0 2px 12px rgba(0,0,0,.08);z-index:30;flex-wrap:wrap}
  header .logo{font-size:23px}header h1{font-size:17px;margin:0;font-weight:800}header .sub{font-size:11px;color:var(--dim)}
  .spacer{flex:1}
  .navtab{border:none;background:#eef4f8;border-radius:11px;padding:7px 12px;font-weight:800;font-size:12.5px;cursor:pointer;color:var(--dim)}
  .navtab.on{background:var(--green);color:#fff}
  .toggle{cursor:pointer;border:none;border-radius:11px;padding:7px 11px;font-weight:800;font-size:12.5px;background:linear-gradient(90deg,var(--sun),var(--amber));color:#5a3d00}
  body.night .toggle{background:linear-gradient(90deg,#465699,#2a3566);color:#e6ecff}
  main{flex:1;display:flex;gap:8px;padding:8px;min-height:0}
  .side{width:144px;background:var(--panel);border-radius:18px;box-shadow:var(--shadow);padding:9px;overflow-y:auto;flex-shrink:0}
  .side h2{font-size:12.5px;margin:2px 0 6px;color:var(--green-d)}
  .side .cat{font-size:9.5px;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin:8px 2px 5px}
  .tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .tile{background:#f6faf8;border:1.5px solid var(--line);border-radius:13px;padding:6px 3px;text-align:center;cursor:grab;touch-action:none;position:relative}
  .tile:active{transform:scale(.93)}.tile.on{border-color:var(--green);background:var(--green-l)}
  .tile.solar{background:var(--green-l);border-color:#cdeedd}
  .tile .em{font-size:22px;pointer-events:none}.tile .nm{font-size:9px;font-weight:700;margin-top:2px;color:#5a6672;pointer-events:none;line-height:1.05}
  .tile .badge{position:absolute;top:-6px;right:-6px;min-width:16px;font-size:9.5px;font-weight:800;color:#fff;background:var(--green);border-radius:10px;padding:1px 4px;display:none}
  /* escena */
  .stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative}
  .daybar{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.9);border-radius:14px;padding:5px 11px;margin-bottom:6px;box-shadow:var(--shadow);z-index:6;flex-wrap:wrap;justify-content:center}
  .daybar .clock{font-weight:800;font-size:15px;min-width:50px;text-align:center}
  .daybar select{border:none;background:#eef4f8;border-radius:9px;padding:4px 6px;font-weight:700}
  .daybar input[type=range]{width:140px}
  .playb{border:none;background:var(--green);color:#fff;border-radius:10px;padding:5px 10px;font-weight:800;cursor:pointer}
  .scene{position:relative;width:min(97vw, calc((100vh - 175px) * 1.7777));aspect-ratio:16/9;background:url('ARTE_JUEGO/pixar_w.png?v=22') center/cover no-repeat;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
  /* etiquetas sobre cada elemento */
  .tag2{position:absolute;background:rgba(255,255,255,.94);border-radius:11px;padding:3px 9px;font-weight:800;font-size:clamp(10px,1.4vw,15px);box-shadow:var(--shadow);z-index:5;white-space:nowrap;transition:opacity .4s;display:flex;flex-direction:column;line-height:1.15}
  .tag2 small{font-weight:700;color:var(--dim);font-size:.72em}
  .tag2.off{opacity:.35}
  .virt{position:absolute;left:2.5%;top:5%;z-index:5;background:linear-gradient(135deg,#ffd23e,#ff9f1c);color:#5a3d00;border-radius:14px;padding:6px 11px;text-align:center;box-shadow:var(--shadow);font-weight:800}
  .virt .big{font-size:clamp(15px,2vw,22px)}.virt small{font-size:.62em;display:block;font-weight:800}
  #chars,#critters{position:absolute;inset:0;pointer-events:none;z-index:4}
  .char{position:absolute;transform:translate(-50%,-100%);transition:opacity .7s ease,left 1.8s ease,top 1.8s ease;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
  .char.flip{transform:translate(-50%,-100%) scaleX(-1)}
  .char img{height:100%;display:block;animation:cbob 4.2s ease-in-out infinite;transform-origin:bottom center}
  .char.walk img{animation:cwalk .5s ease-in-out infinite}
  .char.sit img{animation:cbob 3.4s ease-in-out infinite;transform:translateY(6%) scale(.88)}
  .char.sleep img{animation:none;transform:rotate(80deg) translateX(-6%)}
  @keyframes cbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
  @keyframes cwalk{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9%) rotate(4deg)}}
  .zzz{position:absolute;left:52%;top:-16%;font-size:clamp(9px,1.2vw,14px);color:#fff;text-shadow:0 1px 2px #0007;animation:zzz 3s ease-in-out infinite}
  @keyframes zzz{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-30%)}}
  .critter{position:absolute;transform:translate(-50%,-100%);transition:left 2s ease-in-out,opacity .9s;opacity:0;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
  .critter img{height:100%;display:block;animation:cbob 2.4s ease-in-out infinite}
  .critter.show{opacity:1}
  .critter.flip{transform:translate(-50%,-100%) scaleX(-1)}
  #cr-coche img{animation:none}
  /* ojos que se abren a ratos en los dormitorios a oscuras */
  .eyes{position:absolute;transform:translate(-50%,-100%);z-index:4;display:flex;gap:.45vw;opacity:0;animation:blink 8s ease-in-out infinite;pointer-events:none}
  .eyes b{width:.55vw;height:.75vw;min-width:5px;min-height:7px;background:#fff6c8;border-radius:60% 60% 55% 55%;box-shadow:0 0 5px #fff6c8}
  @keyframes blink{0%,80%,100%{opacity:0}84%{opacity:0}85%,90%{opacity:.92}87%{opacity:.15}95%{opacity:.92}97%{opacity:0}}
  .scene.drop{outline:4px dashed var(--green);outline-offset:5px}
  .flows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
  .flow{opacity:0;transition:opacity .5s}
  .flow.on{opacity:1}
  .flow circle{filter:drop-shadow(0 0 1.4px currentColor)}
  .batUnit{position:absolute;left:28.5%;top:60%;width:2.4%;height:12%;min-width:16px;border:2px solid #2e3a44;border-radius:4px;background:#fff;overflow:hidden;z-index:3;box-shadow:0 2px 5px rgba(0,0,0,.25)}
  .batUnit:before{content:'';position:absolute;top:-4px;left:30%;width:40%;height:3px;background:#2e3a44;border-radius:2px}
  .batUnit .bfill{position:absolute;bottom:0;width:100%;background:linear-gradient(#7fe8b0,#2fae6a);transition:height .6s}
  .leyenda{position:absolute;left:0;bottom:4px;width:100%;display:flex;justify-content:center;gap:10px;z-index:4;flex-wrap:wrap}
  .leyenda span{background:rgba(255,255,255,.9);border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700;color:#3a4653;display:flex;align-items:center;gap:4px}
  .leyenda i{width:8px;height:8px;border-radius:50%;display:inline-block}
  .night-ov{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(20,30,70,0),rgba(10,15,45,.55));opacity:0;transition:opacity .8s;pointer-events:none;border-radius:14px}
  body.night .night-ov{opacity:1}
  /* apagón: el barrio a oscuras; con batería la casa sigue iluminada */
  .apagon-ov{position:absolute;inset:0;border-radius:14px;pointer-events:none;opacity:0;transition:opacity 1s;z-index:6}
  body.apagon .apagon-ov{opacity:1;background:radial-gradient(ellipse 34% 46% at 51% 42%,rgba(6,9,26,0) 42%,rgba(6,9,26,.5) 68%,rgba(3,5,18,.84))}
  body.apagon.apagon-dark .apagon-ov{background:rgba(3,5,18,.88)}
  .apagon-ban{position:absolute;left:50%;top:7%;transform:translateX(-50%);z-index:8;display:none;background:rgba(32,22,54,.94);color:#fff;padding:8px 15px;border-radius:13px;font-size:clamp(10px,1.45vw,14px);font-weight:700;box-shadow:var(--shadow);max-width:82%;text-align:center;border:1.5px solid var(--sun);line-height:1.3}
  .glow{position:absolute;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s}
  .glow.on{opacity:1}
  .tv-glow{width:9%;height:9%;background:radial-gradient(circle,#bfe0ff,#6db3ff00 70%);filter:blur(2px)}
  .lamp-glow{width:14%;height:16%;background:radial-gradient(circle,#ffe9a8cc,#ffce5f00 70%)}
  .sun-glow{width:30%;height:26%;background:radial-gradient(circle,#fff6cf88,#ffe58a00 70%);top:2%;left:50%;transform:translateX(-50%)}
  .char{position:absolute;height:15%;transform:translate(-50%,-100%);transition:opacity .9s ease,left 3.2s cubic-bezier(.45,0,.3,1),top 3.2s cubic-bezier(.45,0,.3,1);pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));z-index:4}
  .char img{height:100%;display:block;animation:bob 5.2s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3%) rotate(-1deg)}}
  .char.flip img{transform:scaleX(-1)}
  .celest{position:absolute;top:-4px;font-size:26px;transition:left .5s,top .5s;z-index:2}
  .bubbles{position:absolute;inset:0;pointer-events:none}
  .bubble{position:absolute;background:rgba(255,255,255,.95);border-radius:11px;padding:3px 8px;font-weight:800;font-size:11.5px;box-shadow:var(--shadow)}
  .bubble small{font-weight:700;color:var(--dim);font-size:9px;display:block}
  #bSolar{top:2%;left:1%;color:#c98a00}#bCons{top:2%;right:1%;color:#c0392b}
  #bBat{bottom:2%;right:1%;color:var(--green-d)}#bRed{bottom:2%;left:1%;color:#2c6fb0}
  /* derecha */
  .srow{display:flex;align-items:center;gap:6px;background:#f6faf8;border:1.5px solid var(--line);border-radius:12px;padding:6px 7px;margin-bottom:5px;font-size:11px}
  .srow .em{font-size:18px}.srow b{display:block;font-size:11.5px}.srow span{color:var(--dim);font-size:10px}
  .seg{display:flex;gap:4px;margin:2px 0 6px}.seg button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:4px;font-weight:800;font-size:10.5px;cursor:pointer}.seg button.on{background:var(--green);color:#fff;border-color:var(--green)}
  .kpis{display:flex;gap:7px;padding:7px 11px;background:rgba(255,255,255,.95);box-shadow:0 -2px 12px rgba(0,0,0,.08);z-index:30;flex-wrap:wrap}
  .kpi{flex:1;min-width:104px;background:#f6faf8;border-radius:13px;padding:6px 10px;border:1.5px solid var(--line)}
  .kpi.hl{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;border:none}
  .kpi .l{font-size:9.5px;font-weight:700;opacity:.9;text-transform:uppercase}.kpi .v{font-size:19px;font-weight:800}.kpi .v small{font-size:10.5px}
  .kcta{align-self:center;background:var(--green);color:#fff;border:none;border-radius:13px;padding:9px 15px;font-weight:800;font-size:13.5px;cursor:pointer;box-shadow:var(--shadow)}
  #numeros{flex:1;overflow:auto;padding:14px 20px;display:none}
  #numeros h2{margin:0 0 4px}.muted{color:var(--dim);font-size:12px}
  .ncards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
  .ncard{background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}.ncard .v{font-size:22px;font-weight:800;color:var(--green-d)}.ncard .l{font-size:11px;color:var(--dim)}
  table.liq{width:100%;border-collapse:collapse;font-size:11.5px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
  table.liq th,table.liq td{padding:5px 7px;border-bottom:1px solid var(--line);text-align:right}table.liq th{background:#f0f6f2;color:var(--green-d);font-size:10.5px}table.liq td:first-child,table.liq th:first-child{text-align:left}
  #ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.3));display:none;font-size:30px}#ghost img{height:70px}
  #toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#2e3a44;color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:700;opacity:0;transition:.3s;z-index:60;pointer-events:none}
  #modal{position:fixed;inset:0;background:rgba(20,30,25,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
  .card{background:#fff;border-radius:18px;padding:22px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4)}
  .card h3{margin:0 0 4px}.card input{width:100%;padding:10px;border:1.5px solid var(--line);border-radius:10px;margin-top:8px;font-size:14px}.card .row{display:flex;gap:8px}.card .row input{flex:1}
  .btn{cursor:pointer;border:none;border-radius:11px;padding:8px 14px;font-weight:800;font-size:13px}.btn.cta{background:var(--green);color:#fff}
  @media(max-width:820px){.side{width:104px}.tile .em{font-size:18px}.sub{display:none}.scene{width:98vw}}