:root{
    --bg-0:#0a0e16;
    --bg-1:#111726;
    --bg-2:#161e30;
    --line:rgba(255,255,255,.07);
    --text-0:#e8edf5;
    --text-1:#8b96ab;
    --text-2:#5b6579;
    --cold:#2fb8e0;
    --cool:#3ee0b0;
    --ok:#7fd858;
    --warm:#f2c94c;
    --hot:#f2913f;
    --burn:#e8543f;
    --radius:14px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Inter', sans-serif;
    background:
      radial-gradient(1200px 700px at 12% -10%, #16233b 0%, transparent 60%),
      radial-gradient(900px 600px at 110% 10%, #1a1530 0%, transparent 55%),
      var(--bg-0);
    color:var(--text-0);
    min-height:100vh;
    overflow-x:hidden;
  }
  h1,h2,h3,.mono{font-family:'Space Grotesk', sans-serif;}
  .num{font-family:'IBM Plex Mono', monospace;}

  /* ---------- WELCOME ---------- */
  #welcome{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:32px;
    position:relative;
  }
  #welcome .brand{
    display:flex; align-items:center; gap:10px;
    position:absolute; top:28px; left:32px;
    color:var(--text-1); font-size:14px; letter-spacing:.02em;
  }
  #welcome .brand .dot{width:9px;height:9px;border-radius:50%;
    background:conic-gradient(from 200deg, var(--cold), var(--ok), var(--hot), var(--burn));
    box-shadow:0 0 14px 2px rgba(242,145,63,.5);
  }
  .hero-therm{
    width:260px; height:260px; position:relative; margin-bottom:8px;
  }
  #welcome h1{
    font-size:clamp(32px,5vw,54px);
    font-weight:700;
    line-height:1.05;
    max-width:820px;
    letter-spacing:-.01em;
  }
  #welcome h1 .grad{
    background:linear-gradient(90deg, var(--cold), var(--ok) 45%, var(--hot) 75%, var(--burn));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  #welcome p{
    color:var(--text-1); max-width:520px; margin-top:16px; font-size:16px; line-height:1.6;
  }
  .cta{
    margin-top:36px;
    display:inline-flex; align-items:center; gap:10px;
    background:var(--text-0); color:var(--bg-0);
    padding:14px 26px; border-radius:999px; border:none;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
    cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .cta:hover{transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(242,145,63,.35);}
  .cta:active{transform:translateY(0);}
  .welcome-stats{
    display:flex; gap:28px; margin-top:56px; flex-wrap:wrap; justify-content:center;
  }
  .wstat{text-align:left; min-width:140px;}
  .wstat .n{font-size:26px; font-weight:600;}
  .wstat .l{color:var(--text-2); font-size:12.5px; margin-top:2px;}

  /* ---------- APP SHELL ---------- */
  #app{display:none; min-height:100vh;}
  #app.show{display:grid; grid-template-columns:216px 1fr;}
  aside{
    background:var(--bg-1);
    border-right:1px solid var(--line);
    padding:22px 14px;
    display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  .side-brand{display:flex; align-items:center; gap:9px; padding:6px 10px 22px;}
  .side-brand .dot{width:10px;height:10px;border-radius:50%;
    background:conic-gradient(from 200deg, var(--cold), var(--ok), var(--hot), var(--burn));}
  .side-brand span{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;}
  nav{display:flex; flex-direction:column; gap:2px;}
  .nav-btn{
    display:flex; align-items:center; gap:11px;
    padding:11px 12px; border-radius:10px; border:none; background:transparent;
    color:var(--text-1); font-size:14px; font-family:'Inter',sans-serif; font-weight:500;
    cursor:pointer; text-align:left; width:100%; transition:background .15s, color .15s;
  }
  .nav-btn svg{width:17px;height:17px; flex-shrink:0; opacity:.85;}
  .nav-btn:hover{background:var(--bg-2); color:var(--text-0);}
  .nav-btn.active{background:var(--bg-2); color:var(--text-0); box-shadow:inset 2px 0 0 var(--hot);}
  .side-foot{margin-top:auto; padding:12px 10px; color:var(--text-2); font-size:11.5px; line-height:1.5;}

  main{padding:26px 30px 60px; min-width:0;}
  .topbar{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
  .topbar h2{font-size:22px; font-weight:600;}
  .topbar .sub{color:var(--text-1); font-size:13.5px; margin-top:4px;}
  .clock{color:var(--text-2); font-size:12.5px;}
  .badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-1);
    background:var(--bg-2); border:1px solid var(--line); padding:5px 10px; border-radius:999px;}
  .badge .dot{width:6px;height:6px;border-radius:50%; background:var(--ok);}

  .view{display:none;}
  .view.active{display:block; animation:fade .35s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .panel{background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
  .grid-2{display:grid; grid-template-columns:1.3fr .9fr; gap:20px;}
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:980px){ .grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr;} #app.show{grid-template-columns:1fr;} aside{position:relative; height:auto;} }

  /* ---------- SITES VIEW ---------- */
  #site-grid-wrap{position:relative;}
  #site-grid{
    position:relative; width:100%; border-radius:10px;
    --cols:8; --rows:8;
    background:
      linear-gradient(var(--line) 1px, transparent 1px) 0 0/ calc(100% / var(--cols)) calc(100% / var(--rows)),
      linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/ calc(100% / var(--cols)) calc(100% / var(--rows)),
      var(--bg-2);
    border:1px solid var(--line);
    cursor:default;
  }
  .site-sq{
    position:absolute; width:34px; height:34px; transform:translate(-50%,-50%);
    border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
    color:#0a0e16; cursor:default; user-select:none;
    box-shadow:0 4px 14px -4px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.15) inset;
    transition:box-shadow .15s, left .4s cubic-bezier(0.2, 0.8, 0.2, 1), top .4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .site-sq:active{cursor:default; transition:box-shadow .15s;}
  .site-sq:hover{box-shadow:0 4px 18px -2px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.4) inset;}
  #site-grid .hint{position:absolute; bottom:10px; left:12px; color:var(--text-2); font-size:11.5px;}
  .site-list{max-height:520px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-top:14px;}
  .site-row{
    display:flex; align-items:center; gap:10px; background:var(--bg-2);
    border:1px solid var(--line); border-radius:9px; padding:8px 10px;
  }
  .site-row .sw{width:12px;height:12px;border-radius:3px; flex-shrink:0;}
  .site-row .name-input{
    background:transparent; border:none; color:var(--text-0); font-size:13px; font-weight:500;
    width:88px; font-family:'Inter',sans-serif;
  }
  .site-row .name-input:focus{outline:none; border-bottom:1px solid var(--text-2);}
  .site-row .filekey{margin-left:auto;}
  .site-row button{
    background:none; border:none; color:var(--text-2); cursor:pointer; font-size:15px; padding:2px 4px;
    border-radius:5px; transition:color .15s, background .15s;
  }
  .site-row button:hover{color:var(--burn); background:rgba(232,84,63,.1);}
  .counter{color:var(--text-1); font-size:12.5px; margin-top:12px;}
  .field-note{color:var(--text-2); font-size:12px; line-height:1.6; margin-top:14px;}
  .config-block{background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px;}
  .config-block h4{font-size:11.5px; text-transform:none; color:var(--text-1); font-weight:600; margin-bottom:10px; font-family:'Inter',sans-serif;}
  .config-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
  .config-row:last-child{margin-bottom:0;}
  .config-row label{font-size:12.5px; color:var(--text-1);}
  .config-row input[type="number"]{
    width:76px; background:var(--bg-1); border:1px solid var(--line); border-radius:7px;
    color:var(--text-0); padding:6px 8px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:right;
  }
  .config-check{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-0); cursor:pointer;}
  .config-check input{accent-color:var(--hot);}
  #live-url{
    width:100%; margin-top:8px; background:var(--bg-1); border:1px solid var(--line); border-radius:7px;
    color:var(--text-0); padding:8px 10px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  }
  #live-url:disabled{opacity:.4;}
  .filekey{
    background:var(--bg-1); border:1px solid var(--line); border-radius:6px; color:var(--text-1);
    font-family:'IBM Plex Mono',monospace; font-size:11px; width:74px; padding:3px 6px; text-align:center;
  }
  .site-sq.stale{outline:2px dashed rgba(255,255,255,.5); outline-offset:2px;}
  .site-label{
    position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:5px;
    font-size:10px; color:var(--text-0); background:rgba(8,11,18,.82); border:1px solid var(--line);
    padding:2px 7px; border-radius:6px; white-space:nowrap; pointer-events:none;
    max-width:120px; overflow:hidden; text-overflow:ellipsis;
  }

  /* ---------- MAP3D VIEW ---------- */
  #map3d-plotly{width:100%; height:520px;}
  #map3d-canvas{width:100%; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); display:block;}
  .legend-strip{display:flex; align-items:center; gap:10px; margin-top:14px;}
  .legend-bar{flex:1; height:10px; border-radius:999px;
    background:linear-gradient(90deg, var(--cold), var(--cool), var(--ok), var(--warm), var(--hot), var(--burn));}
  .legend-strip .lo,.legend-strip .hi{font-size:11.5px; color:var(--text-2); font-family:'IBM Plex Mono',monospace;}

  /* ---------- SCALE VIEW ---------- */
  .scale-band{
    position:relative; height:64px; border-radius:12px; overflow:hidden;
    background:linear-gradient(90deg, var(--cold) 0%, var(--cool) 22%, var(--ok) 42%, var(--warm) 62%, var(--hot) 80%, var(--burn) 100%);
  }
  .scale-tick{position:absolute; top:0; bottom:0; width:1px; background:rgba(0,0,0,.25);}
  .scale-tick span{position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
    font-size:11px; color:var(--text-2); font-family:'IBM Plex Mono',monospace; white-space:nowrap;}
  .site-marker{
    position:absolute; top:6px; width:18px; height:18px; transform:translateX(-50%);
    border-radius:5px; border:2px solid rgba(10,14,22,.85);
    display:flex; align-items:center; justify-content:center;
    font-size:9px; font-weight:700; color:#0a0e16; font-family:'IBM Plex Mono',monospace;
  }
  .zone-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:52px;}
  .zone-card{border-radius:12px; padding:16px; border:1px solid var(--line);}
  .zone-card .n{font-size:26px; font-weight:700; font-family:'IBM Plex Mono',monospace;}
  .zone-card .l{font-size:13px; color:var(--text-1); margin-top:2px;}
  .zone-card .r{font-size:11.5px; color:var(--text-2); margin-top:8px;}

  /* ---------- TERMINAL VIEW ---------- */
  .term-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:20px;}
  #term-log{
    background:#080b12; border:1px solid var(--line); border-radius:10px;
    height:420px; overflow-y:auto; padding:14px 16px;
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.9;
  }
  #term-log .t{color:var(--text-2);}
  #term-log .id{color:#7fb2e0;}
  #term-log .v{font-weight:600;}
  #term-log .meta{color:var(--text-2);}
  table{width:100%; border-collapse:collapse; font-size:12.5px;}
  th{text-align:left; color:var(--text-2); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line); font-size:11px;}
  td{padding:9px 10px; border-bottom:1px solid var(--line); color:var(--text-0);}
  tr:last-child td{border-bottom:none;}
  .pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:600; color:#0a0e16;}

  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:#2a3448; border-radius:8px;}
  ::-webkit-scrollbar-track{background:transparent;}

  /* ---------- ROOM 3D VIEW ---------- */
  .room-layout{display:grid; grid-template-columns:270px 1fr 250px; gap:16px; align-items:start;}
  @media (max-width:1200px){ .room-layout{grid-template-columns:1fr;} .room-layout > .room-col:nth-child(2){order:-1;} }
  .room-col{display:flex; flex-direction:column; gap:14px;}
  .room-card{background:var(--bg-1); border:1px solid var(--line); border-radius:12px; padding:15px;}
  .room-card h4{font-size:12.5px; color:var(--text-0); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:7px;}
  .room-card h4 .badge-n{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
    border-radius:5px; background:var(--hot); color:#0a0e16; font-size:11px; font-weight:700;}
  .room-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px;}
  .room-row:last-child{margin-bottom:0;}
  .room-row label{font-size:12.5px; color:var(--text-1);}
  .room-row input[type="number"]{
    width:78px; background:var(--bg-2); border:1px solid var(--line); border-radius:7px;
    color:var(--text-0); padding:7px 8px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:right;
  }
  .room-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .room-site-input{background:var(--bg-2); border:1px solid var(--line); border-radius:9px; padding:9px; text-align:center;}
  .room-site-input .rlabel{font-size:11px; font-weight:700; margin-bottom:2px;}
  .room-site-input .rcoord{font-size:9.5px; color:var(--text-2); font-family:'IBM Plex Mono',monospace; margin-bottom:6px;}
  .room-site-input input{
    width:100%; background:var(--bg-1); border:1px solid var(--line); border-radius:6px;
    color:var(--text-0); padding:5px 4px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-align:center;
  }
  .room-btn{
    width:100%; background:linear-gradient(90deg,#2fb8e0,#7fd858); color:#0a0e16; border:none; border-radius:9px;
    padding:11px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; cursor:pointer;
    transition:filter .15s;
  }
  .room-btn:hover{filter:brightness(1.08);}
  .room-howto{font-size:11.5px; color:var(--text-1); line-height:1.8;}
  .room-howto b{color:var(--text-0);}
  .room-summary{
    display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
    background:var(--bg-1); border:1px solid var(--line); border-radius:10px; padding:11px; margin-bottom:14px;
    font-size:13px; color:var(--text-1);
  }
  .room-summary b{color:var(--text-0); font-family:'IBM Plex Mono',monospace;}
  .room-empty{min-height:560px; display:flex; align-items:center; justify-content:center; text-align:center;
    padding:24px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); color:var(--text-2); font-size:14px;}
  .room-viewport{position:relative;}
  #room-empty-3d{position:absolute; inset:0; min-height:0; background:transparent; border:0; pointer-events:none;}
  .room-empty-plan{min-height:420px;}
  #room-plotly{width:100%; height:560px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); display:none;}
  #room-canvas{width:100%; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); display:none; cursor:grab;}
  #room-canvas:active{cursor:grabbing;}
  #room-plan{width:100%; height:420px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); display:none; position:relative;}
  .room-view-controls{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
  .room-vbtn{
    display:flex; align-items:center; gap:7px; background:var(--bg-2); border:1px solid var(--line); color:var(--text-0);
    padding:9px 14px; border-radius:9px; font-size:12.5px; font-family:'Inter',sans-serif; cursor:pointer;
  }
  .room-vbtn:hover{background:var(--bg-1);}
  .room-tip{margin-top:12px; font-size:11.5px; color:var(--text-2); background:var(--bg-1); border:1px solid var(--line);
    border-radius:9px; padding:10px 12px;}
  .room-vscale{position:relative; height:260px; width:34px; border-radius:8px; margin:0 auto;
    background:linear-gradient(0deg, var(--cold), var(--cool) 20%, var(--ok) 42%, var(--warm) 62%, var(--hot) 80%, var(--burn));}
  .room-vscale .vtick{position:absolute; left:100%; margin-left:6px; font-size:10px; color:var(--text-2); font-family:'IBM Plex Mono',monospace; transform:translateY(-50%);}
  .room-info-row{display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px;}
  .room-info-row span:first-child{color:var(--text-2);}
  .room-info-row span:last-child{color:var(--text-0); font-family:'IBM Plex Mono',monospace;}
  .room-device-list{display:flex; flex-direction:column; gap:7px; color:var(--text-2); font-size:12px;}
  .room-device{width:100%; padding:10px; text-align:left; color:var(--text-0); background:var(--bg-2);
    border:1px solid var(--line); border-radius:8px; cursor:pointer; font:inherit;}
  .room-device:hover{border-color:var(--cool);}
  .room-device small{display:block; margin-top:4px; color:var(--text-2);}
  .room-miniplan{position:relative; height:180px; border-radius:8px; overflow:hidden;
    background-color:var(--bg-2); border:1px solid var(--line);
    background-image:linear-gradient(rgba(139,150,171,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(139,150,171,.12) 1px,transparent 1px);
    background-size:25% 25%;}
  .room-mini-point{position:absolute; transform:translate(-50%,-50%); min-width:24px; height:24px;
    border:2px solid var(--text-0); border-radius:50%; color:#0a0e16; font-size:10px; font-weight:700; cursor:pointer;}
  .room-mini-point:hover{outline:2px solid var(--cool); outline-offset:2px;}
  .room-plan-fallback-point{position:absolute; transform:translate(-50%,-50%); padding:7px 10px; border:1px solid var(--text-0);
    border-radius:14px; color:#0a0e16; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;}
  .room-mini-cell{
    aspect-ratio:1; border-radius:7px; display:flex; align-items:center; justify-content:center;
    font-size:10.5px; font-weight:700; color:#0a0e16; border:1px solid rgba(255,255,255,.12);
  }

  /* ---------- ARDUINOS CONECTADOS (multi-dispositivo) ---------- */
  .dev-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:6px;}
  .dev-field{display:flex; flex-direction:column; gap:5px;}
  .dev-field label{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2);}
  .dev-field select, .dev-field input{
    background:var(--bg-2); border:1px solid var(--line); border-radius:8px;
    color:var(--text-0); padding:9px 10px; font-family:'IBM Plex Mono', monospace; font-size:12px;
    min-width:150px;
  }
  .dev-field select:focus, .dev-field input:focus{outline:none; border-color:rgba(62,224,176,.5);}
  .dev-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; margin-top:18px;}
  .dev-card{
    background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:15px 16px;
    position:relative;
  }
  .dev-card.on{border-color:rgba(127,216,88,.38);}
  .dev-card.off{opacity:.72;}
  .dev-card.err{border-color:rgba(232,84,63,.45);}
  .dev-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
  .dev-title{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;}
  .dev-title .dot{width:8px; height:8px; border-radius:50%; background:var(--text-2); flex:none;}
  .dev-card.on .dev-title .dot{background:var(--ok); box-shadow:0 0 9px rgba(127,216,88,.7); animation:devPulse 1.7s infinite;}
  .dev-card.err .dev-title .dot{background:var(--burn);}
  @keyframes devPulse{0%,100%{opacity:1}50%{opacity:.35}}
  .dev-read{font-family:'IBM Plex Mono', monospace; font-size:30px; font-weight:600; line-height:1.1; margin:2px 0 4px;}
  .dev-meta{font-size:11.5px; color:var(--text-2); line-height:1.75;}
  .dev-meta b{color:var(--text-1); font-weight:500;}
  .dev-assign{display:flex; align-items:center; gap:8px; margin-top:11px;}
  .dev-assign label{font-size:11.5px; color:var(--text-1); white-space:nowrap;}
  .dev-assign select{
    flex:1; background:var(--bg-1); border:1px solid var(--line); border-radius:7px;
    color:var(--text-0); padding:6px 8px; font-size:11.5px;
  }
  .dev-btns{display:flex; gap:8px; margin-top:12px;}
  .dev-btn{
    flex:1; background:var(--bg-1); border:1px solid var(--line); border-radius:8px;
    color:var(--text-1); padding:7px 10px; font-size:11.5px; cursor:pointer;
    font-family:'Inter', sans-serif; transition:.15s;
  }
  .dev-btn:hover{color:var(--text-0); border-color:rgba(255,255,255,.18);}
  .dev-btn.danger:hover{color:var(--burn); border-color:rgba(232,84,63,.4);}
  .dev-empty{
    border:1px dashed var(--line); border-radius:12px; padding:26px 20px; text-align:center;
    color:var(--text-2); font-size:12.5px; line-height:1.7;
  }
  .dev-log{
    background:var(--bg-0); border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; margin-top:16px; max-height:180px; overflow-y:auto;
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; line-height:1.85; color:var(--text-1);
  }
  .dev-log .t{color:var(--text-2); margin-right:7px;}
  .dev-log .ok{color:var(--ok);}
  .dev-log .er{color:var(--burn);}