:root{
      --bg:#f4f6f5; --card:#ffffff; --surface:#ffffff; --surface-alt:#eef2f0;
      --border:#d6ded9; --border-light:#e9eeeb;
      --text:#151f1b; --text-secondary:#53615b; --muted:#76837d;
      --accent:#16a34a; --accent-dark:#166534; --accent-light:#bbf7d0; --accent-glow:rgba(22,163,74,.18);
      --green:#16a34a; --green-bg:rgba(22,163,74,.12); --red:#f43f5e; --orange:#d97706;
      --graphite:#26312d; --graphite-dark:#151f1b; --slate:#334155;
      --radius-sm:8px; --radius:14px; --radius-lg:20px; --radius-xl:24px;
      --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono','Courier New',monospace;
      --transition:.2s cubic-bezier(.4,0,.2,1);
      --shadow-sm:0 1px 2px rgba(15,23,42,.04);
      --shadow:0 10px 30px rgba(15,23,42,.065),0 1px 0 rgba(255,255,255,.85) inset,0 0 1px rgba(15,23,42,.14);
      --shadow-lg:0 18px 42px rgba(15,23,42,.10),0 1px 0 rgba(255,255,255,.88) inset;
      --shadow-xl:0 24px 70px rgba(0,0,0,.30);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
    ::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:#cbd5d0;border-radius:10px}

    /* ─── LOGIN INDUSTRIAL MODERNO ───────────────────────────── */
    #login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px) 0 0/26px 26px,linear-gradient(45deg,rgba(255,255,255,.025) 0 1px,transparent 1px) 0 0/42px 42px,radial-gradient(circle at 22% 22%,rgba(22,163,74,.26),transparent 30%),radial-gradient(circle at 78% 18%,rgba(148,163,184,.18),transparent 36%),radial-gradient(circle at 50% 92%,rgba(22,163,74,.13),transparent 42%),linear-gradient(135deg,#101815 0%,#1e2925 46%,#0b1110 100%)}
    #login-screen::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%),radial-gradient(circle at 18% 82%,rgba(22,163,74,.18) 0%,transparent 46%),radial-gradient(circle at 82% 18%,rgba(203,213,225,.10) 0%,transparent 48%);opacity:.75;animation:bgShift 20s ease-in-out infinite alternate;pointer-events:none}
    @keyframes bgShift{to{transform:translate(2%,-1%) scale(1.03)}}
    .login-box{background:linear-gradient(180deg,rgba(39,50,46,.88) 0%,rgba(22,31,28,.92) 100%);backdrop-filter:blur(24px);border:1px solid rgba(203,213,225,.18);border-radius:var(--radius-xl);padding:42px 36px;width:100%;max-width:410px;box-shadow:0 28px 80px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.22),0 0 0 1px rgba(22,163,74,.08);position:relative;z-index:1;color:#e8efeb;overflow:hidden}
    .login-box::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.12),transparent 26%,transparent 72%,rgba(255,255,255,.05)),radial-gradient(circle at 32% 0%,rgba(34,197,94,.13),transparent 34%)}
    .login-logo{position:relative;z-index:1}.brand-logo-full{width:min(100%,330px);margin:0 auto 26px}.brand-logo-svg,.brand-sidebar-svg{display:block;width:100%;height:auto}
    .brand-gear{fill:#cbd5d0}.brand-gear-hole{fill:#18221f}.brand-leaf{fill:#22c55e;stroke:#16a34a;stroke-width:2.4;stroke-linejoin:round}.brand-vein{fill:none;stroke:#18221f;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;opacity:.95}.brand-word{font-family:var(--font);font-size:44px;font-weight:800;letter-spacing:-1.6px;fill:#f3f7f5}.brand-by{font-family:var(--font);font-size:28px;font-weight:700;letter-spacing:-.8px;fill:#b7c4bf}.brand-word-side{font-size:41px}.brand-by-side{font-size:25px}
    .login-title{position:relative;z-index:1;font-size:18px;font-weight:800;margin-bottom:4px;color:#f3f7f5;letter-spacing:-.2px}.login-sub{position:relative;z-index:1;color:#aab8b2;font-size:13.5px;margin-bottom:24px}.login-err{position:relative;z-index:1;background:rgba(244,63,94,.14);border:1px solid rgba(244,63,94,.34);color:#fecdd3;border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;margin-bottom:12px;display:none;font-weight:600}
    .field{position:relative;z-index:1;margin-bottom:14px}.field label{display:block;font-size:12.5px;font-weight:700;color:#b7c4bf;margin-bottom:5px}.field input,.field select{width:100%;padding:11px 14px;background:rgba(15,23,20,.72);border:1.5px solid rgba(203,213,225,.18);border-radius:var(--radius-sm);color:#eef5f1;font-family:var(--font);font-size:14px;outline:none;transition:all var(--transition);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.28)}
    .field input::placeholder{color:rgba(203,213,225,.58)}.field input:focus,.field select:focus{background:rgba(10,17,15,.86);border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18),0 0 24px rgba(34,197,94,.10),inset 0 1px 0 rgba(255,255,255,.06)}
    .btn-primary,.btn-save,.btn-confirm{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 46%),linear-gradient(135deg,#166534 0%,#16a34a 52%,#22c55e 100%);color:#fff;border:1px solid rgba(134,239,172,.28);border-radius:var(--radius-sm);font-family:var(--font);font-weight:700;cursor:pointer;transition:all var(--transition);box-shadow:0 12px 28px rgba(22,163,74,.20),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.20)}
    .btn-primary{position:relative;z-index:1;width:100%;padding:12px;margin-top:6px;font-size:14.5px}.btn-primary:hover,.btn-save:hover,.btn-confirm:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(22,163,74,.30),0 0 0 3px rgba(34,197,94,.10),inset 0 1px 0 rgba(255,255,255,.22)}

    /* ─── APP GRAPHITE + GREEN ───────────────────────────────── */
    #app{display:none;height:100vh;flex-direction:row}.visible{display:flex!important}
    .sidebar{width:252px;flex-shrink:0;background:linear-gradient(180deg,#26312d 0%,#1b2421 100%);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:100;box-shadow:10px 0 32px rgba(15,23,42,.12)}
    .sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-logo .brand-word{fill:#f8faf9}.sidebar-logo .brand-by{fill:#b8c4bf}.sidebar-logo .brand-gear{fill:#d7ded9}.sidebar-logo .brand-gear-hole{fill:#26312d}.sidebar-logo .brand-leaf{fill:#22c55e;stroke:#16a34a}.brand-sidebar-wrap{width:100%}
    .sidebar-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:4px}.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-size:13.5px;font-weight:600;color:#b8c4bf;cursor:pointer;border:none;background:none;font-family:var(--font);transition:all var(--transition);width:100%;text-align:left}.sidebar-link:hover{background:rgba(255,255,255,.07);color:#fff}.sidebar-link.active{background:linear-gradient(135deg,rgba(22,163,74,.24),rgba(34,197,94,.12));color:#86efac;box-shadow:inset 0 0 0 1px rgba(134,239,172,.16)}.sidebar-link .icon{font-size:16px;width:20px;text-align:center}
    .sidebar-footer{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px}.sidebar-user-email{font-size:12px;color:#9ca9a4;font-weight:500;word-break:break-all}.btn-logout{padding:7px 12px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#cbd5d0;font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer}.btn-logout:hover{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.25);color:#fecdd3}
    .main-content{flex:1;overflow-y:auto;padding:30px 34px 42px;background:radial-gradient(circle at 18% 0%,rgba(22,163,74,.08),transparent 30%),radial-gradient(circle at 90% 8%,rgba(51,65,85,.06),transparent 32%),linear-gradient(180deg,#f7f9f8 0%,#eef2f0 100%);min-height:100vh}
    .section{display:none}.section.active{display:block;animation:fadeIn .35s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.section-title{font-size:22px;font-weight:800;margin-bottom:20px;letter-spacing:-.4px;color:#151f1b}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
    .card,.gw-card,.profile-card,.device-item,.hist-item,.history-node-item{background:rgba(255,255,255,.92);border:1px solid #d6ded9;border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(10px)}.card{padding:20px}.gw-card{border-radius:20px;margin-bottom:18px;overflow:hidden;transition:all var(--transition)}.gw-card:hover,.history-node-item:hover,.device-item:hover{transform:none;box-shadow:var(--shadow)}
    .gw-header{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid #e9eeeb;flex-wrap:wrap;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,249,.95))}.gw-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.gw-status-dot.online{background:#16a34a;box-shadow:0 0 0 6px rgba(22,163,74,.12);animation:pulseOnline 2s ease-in-out infinite}.gw-status-dot.offline{background:#cbd5d0;box-shadow:0 0 0 6px rgba(203,213,208,.35)}@keyframes pulseOnline{50%{box-shadow:0 0 0 10px transparent}}.gw-name{font-weight:700;font-size:15px;flex:1;color:#151f1b}.gw-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .nodes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:18px 22px}.node-tile{background:linear-gradient(180deg,#fff,#f8faf9);border:1px solid #dce5df;border-radius:16px;padding:16px 18px;box-shadow:0 4px 16px rgba(15,23,42,.045);transition:all var(--transition)}.node-tile:hover{border-color:#dce5df;box-shadow:0 4px 16px rgba(15,23,42,.045)}.node-tile-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.node-tile-name,.device-item-name,.hist-node,.history-node-name{font-weight:700;font-size:14.5px;color:#151f1b}.node-tile-badges{display:flex;gap:8px;align-items:center}.node-actions{display:flex;flex-direction:column;gap:10px}
    .action-group{background:#f8faf9;border:1px solid #e2e9e5;border-radius:12px;padding:10px 12px}.action-group-title{font-size:12.5px;font-weight:800;color:#166534;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}.action-group-buttons{display:flex;gap:8px;flex-wrap:wrap}.action-btn{padding:7px 14px;border-radius:20px;border:none;font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:5px;min-width:80px;justify-content:center}.action-btn.state-unknown{background:#eef2f0;color:#53615b;border:1px solid #d6ded9}.action-btn.state-open{background:#dcfce7;color:#15803d;border:1px solid #86efac}.action-btn.state-close{background:#ffe4e6;color:#be123c;border:1px solid #fecdd3}.action-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,.10)}.action-btn:disabled,.action-btn.locked{opacity:.55;cursor:not-allowed;pointer-events:none;transform:none!important;box-shadow:none!important;filter:grayscale(.12)}
    .modern-signal{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700}.signal-svg{width:18px;height:18px}.signal-bar{rx:2}.signal-good{color:#059669}.signal-ok{color:#d97706}.signal-weak{color:#e11d48}.signal-none{color:#94a3b8}.sig-fill-good{fill:#059669}.sig-fill-ok{fill:#d97706}.sig-fill-weak{fill:#e11d48}.sig-fill-off{fill:#cbd5e1}.icon-batt{font-size:15px}.batt-full{color:#16a34a}.batt-med{color:#d97706}.batt-low{color:#e11d48}
    .devices-tabs{display:flex;gap:4px;margin-bottom:18px;background:#e9eeeb;border:1px solid #d6ded9;padding:4px;border-radius:10px;width:fit-content}.dtab{padding:7px 16px;border-radius:8px;border:none;background:none;color:#53615b;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer}.dtab.active{background:#fff;color:#166534;font-weight:800;box-shadow:0 3px 10px rgba(15,23,42,.08)}
    .device-list,.hist-list,.history-node-list{display:flex;flex-direction:column;gap:10px}.device-item,.hist-item,.history-node-item{padding:16px 20px;display:flex;align-items:center;gap:14px;transition:all var(--transition)}.device-item-info,.hist-info,.history-node-main{flex:1}.device-item-sub,.history-node-sub{font-family:var(--mono);font-size:11.5px;color:#76837d;margin-top:2px}.device-item-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn-sm,.btn-cancel{padding:7px 12px;border-radius:20px;background:#fff;border:1px solid #d6ded9;color:#53615b;font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap}.btn-sm:hover{background:#f0fdf4;border-color:#86efac;color:#166534}.btn-sm.danger:hover{border-color:#fecdd3;color:#e11d48;background:#fff1f2}.btn-add{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:20px;background:linear-gradient(135deg,#dcfce7,#f0fdf4);border:1px solid #86efac;color:#166534;font-family:var(--font);font-size:13.5px;font-weight:800;cursor:pointer;margin-bottom:18px;box-shadow:0 6px 16px rgba(22,163,74,.10)}
    .badge,.status-pill{display:inline-flex;align-items:center;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 10px}.badge-green,.pill-online{background:#dcfce7;color:#15803d}.badge-red{background:#fff1f2;color:#e11d48}.badge-gray,.pill-offline,.pill-unknown{background:#eef2f0;color:#76837d}.badge-blue{background:#e0f2fe;color:#0369a1}.hist-icon{font-size:20px}.hist-action{font-size:12px;color:#76837d}.hist-time{font-size:11.5px;color:#76837d;text-align:right}.history-node-item{justify-content:space-between;cursor:pointer}.history-back{margin-bottom:14px}.empty-state{text-align:center;padding:56px 24px;color:#76837d}.empty-state .empty-icon{font-size:44px;margin-bottom:14px;opacity:.55}.empty-state h3{font-size:16px;font-weight:700;color:#53615b;margin-bottom:6px}.empty-state p{font-size:13.5px;max-width:320px;margin:0 auto}
    .profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-card{padding:24px;border-radius:20px}.profile-card h3{font-size:15px;font-weight:800;margin-bottom:18px}.pfield{margin-bottom:12px}.pfield label{display:block;font-size:11.5px;font-weight:700;color:#76837d;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}.pfield input{width:100%;padding:10px 12px;background:#f8faf9;border:1.5px solid #d6ded9;border-radius:8px;color:#151f1b;font-family:var(--font);font-size:14px;outline:none}.pfield input:focus{background:#fff;border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18)}.pfield input[readonly]{opacity:.72;background:#eef2f0}.btn-save{padding:9px 20px;border-radius:20px;background:linear-gradient(135deg,#166534,#16a34a)}.profile-msg,.modal-msg{font-size:13px;margin-top:10px;display:none;font-weight:600}.ok{color:#16a34a}.err{color:#e11d48}
    .modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s ease}.modal-overlay.open{opacity:1;pointer-events:all}.modal{background:#fff;border:1px solid #d6ded9;border-radius:24px;padding:28px;width:100%;max-width:440px;transform:translateY(16px) scale(.97);transition:transform .3s;box-shadow:var(--shadow-xl)}.modal-overlay.open .modal{transform:none}.modal-title{font-size:17px;font-weight:800;margin-bottom:18px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}.btn-confirm{padding:9px 18px;border-radius:20px;background:linear-gradient(135deg,#166534,#16a34a);font-size:13.5px}.btn-confirm.danger{background:linear-gradient(135deg,#f43f5e 0%,#e11d48 100%)}.confirm-text{font-size:14.5px;color:#53615b}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:#151f1b;color:#fff;border-radius:20px;padding:12px 22px;font-size:13.5px;font-weight:600;opacity:0;transition:all .35s;pointer-events:none;box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:999;white-space:nowrap}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

    /* ─── CHARTS ─────────────────────────────────────────────── */
    .hist-tabs{display:flex;gap:8px;margin-bottom:20px}
    .hist-tab{padding:8px 18px;border-radius:20px;border:1.5px solid #d6ded9;background:#fff;color:#53615b;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all var(--transition)}
    .hist-tab.active{background:linear-gradient(135deg,#dcfce7,#f0fdf4);border-color:#86efac;color:#166534}
    .metrics-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
    .periodo-btns{display:flex;gap:6px}
    .periodo-btn{padding:5px 14px;border-radius:16px;border:1.5px solid #d6ded9;background:#fff;color:#53615b;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;transition:all var(--transition)}
    .periodo-btn.active{background:#166534;border-color:#166534;color:#fff}
    .date-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .date-nav input[type=date]{padding:5px 10px;border-radius:16px;border:1.5px solid #d6ded9;background:#fff;color:#1a2e1f;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;outline:none}
    .date-nav input[type=date]:focus{border-color:#166534}
    .nav-arrow{padding:5px 10px;border-radius:16px;border:1.5px solid #d6ded9;background:#fff;color:#53615b;font-size:13px;cursor:pointer}
    .nav-arrow:hover{background:#f0f5f1;border-color:#166534}
    .chart-card{background:rgba(255,255,255,.92);border:1px solid #d6ded9;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;padding-bottom:28px;margin-bottom:16px;overflow:hidden}
    .chart-title{font-size:13px;font-weight:700;color:#53615b;margin-bottom:12px;display:flex;align-items:center;gap:8px}
    .chart-title span{font-size:18px}
    .chart-wrap{position:relative;width:100%;min-height:120px}
    .chart-canvas{width:100%;display:block;cursor:crosshair}
    .chart-tooltip{position:absolute;background:rgba(21,31,27,.9);color:#fff;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:600;pointer-events:none;display:none;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.3);z-index:10}
    .gw-select-wrap{margin-bottom:18px}
    .gw-select-wrap select{padding:9px 14px;border-radius:10px;border:1.5px solid #d6ded9;background:#fff;color:#151f1b;font-family:var(--font);font-size:14px;outline:none;min-width:220px}
    .gw-select-wrap select:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
    .chart-no-data{text-align:center;padding:40px;color:#76837d;font-size:13px}

    .node-vars{display:flex;flex-direction:column;gap:6px}
    .node-var-row{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;border-radius:10px;cursor:pointer;transition:background .15s}
    .node-var-row:hover{background:rgba(22,163,74,.08)}
    .node-var-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
    .node-var-value{font-size:13px;font-weight:700;color:#151f1b}
    .node-badges{display:flex;align-items:center;gap:6px}
    .batt-icon{font-size:14px}
    .gw-group{margin-bottom:20px}
    .gw-group-title{font-size:13px;font-weight:700;color:#53615b;padding:8px 0;border-bottom:1px solid #e8ecf0;margin-bottom:10px;display:flex;align-items:center;gap:8px}
    .node-hist-list{display:flex;flex-direction:column;gap:8px}
    .node-hist-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border:1px solid #e8ecf0;border-radius:12px;cursor:pointer;transition:all .15s}
    .node-hist-item:hover{border-color:#86efac;background:#f0fdf4}
    .node-hist-name{font-weight:700;font-size:13px;color:#151f1b}
    .node-hist-sub{font-size:11px;color:#76837d;margin-top:2px}
    .node-hist-badge{font-size:11px;color:#76837d}
    /* ─── AUTOMATIZACIONES ───────────────────────────────── */
    .auto-list{display:flex;flex-direction:column;gap:12px}
    .auto-item{background:#fff;border:1px solid #d6ded9;border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);transition:all var(--transition)}
    .auto-item:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
    .auto-item-left{display:flex;align-items:center;gap:12px;flex:1}
    .auto-toggle{width:38px;height:22px;border-radius:11px;border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
    .auto-toggle.on{background:#16a34a}.auto-toggle.off{background:#cbd5d0}
    .auto-toggle::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
    .auto-toggle.on::after{left:19px}.auto-toggle.off::after{left:3px}
    .auto-info{flex:1}
    .auto-name{font-weight:700;font-size:14.5px;color:#151f1b}
    .auto-desc{font-size:12px;color:#76837d;margin-top:3px}
    .auto-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
    .auto-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
    .auto-badge.red{background:#fff1f2;color:#be123c;border-color:#fecdd3}
    .auto-badge.blue{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
    .auto-actions{display:flex;gap:8px;align-items:center}
    .auto-prio{font-size:11px;font-weight:700;color:#76837d;background:#f4f6f5;border:1px solid #e2e9e5;border-radius:8px;padding:3px 8px}
    /* Auto form nueva pagina unica */
    .auto-form-nombre{font-size:20px;font-weight:800;color:#151f1b;border:none;border-bottom:2px solid #e2e9e5;outline:none;background:transparent;font-family:var(--font);width:100%;padding:4px 0;margin-bottom:14px;letter-spacing:-.3px}
    .auto-form-nombre::placeholder{color:#b0bcb7}.auto-form-nombre:focus{border-bottom-color:#16a34a}
    .auto-toggle-row{display:flex;background:#f0f4f2;border-radius:20px;padding:3px;gap:2px;margin-bottom:16px;width:fit-content}
    .auto-toggle-btn{padding:6px 16px;border-radius:18px;border:none;font-family:var(--font);font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s;color:#76837d;background:transparent}
    .auto-toggle-btn.active-on{background:#fff;color:#16a34a;box-shadow:0 1px 4px rgba(0,0,0,.1)}
    .auto-toggle-btn.active-off{background:#fff;color:#e11d48;box-shadow:0 1px 4px rgba(0,0,0,.1)}
    .auto-section{border:1px solid #e2e9e5;border-radius:14px;margin-bottom:12px;overflow:hidden}
    .auto-section-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8faf9}
    .auto-section-title{font-size:13.5px;font-weight:800;color:#151f1b}
    .auto-section-sub{font-size:12px;color:#76837d;margin-top:2px}
    .auto-section-body{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
    .btn-add-item{width:30px;height:30px;border-radius:50%;border:none;background:#e8f5e9;color:#16a34a;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;line-height:1}
    .btn-add-item:hover{background:#dcfce7}
    .activador-tipo-btn{flex:1;padding:10px;border-radius:10px;border:1.5px solid #d6ded9;background:#fff;color:#53615b;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;text-align:center}
    .activador-tipo-btn.selected{background:#dcfce7;border-color:#86efac;color:#166534}
    .days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0}
    .day-btn{padding:7px 2px;border-radius:8px;border:1.5px solid #d6ded9;background:#fff;color:#76837d;font-family:var(--font);font-size:11.5px;font-weight:700;cursor:pointer;text-align:center;transition:all .15s}
    .day-btn.selected{background:#dcfce7;border-color:#86efac;color:#166534}
    .form-label{font-size:11.5px;font-weight:700;color:#76837d;display:block}
    .item-card{background:#fff;border:1px solid #e2e9e5;border-radius:10px;padding:11px 14px;display:flex;align-items:center;gap:10px}
    .item-card-icon{font-size:17px;flex-shrink:0}.item-card-info{flex:1;font-size:13px;font-weight:600;color:#151f1b}
    .item-card-sub{font-size:11.5px;color:#76837d;margin-top:1px}
    .btn-remove-item{padding:3px 8px;border-radius:8px;background:#fff1f2;border:1px solid #fecdd3;color:#e11d48;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0}
    .auto-form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #e9eeeb}
    .sub-form{background:#f4f7f5;border-top:1px solid #e2e9e5;padding:14px 16px}
    .sub-form-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
    .sub-form-row select,.sub-form-row input{padding:8px 10px;border-radius:8px;border:1.5px solid #d6ded9;background:#fff;color:#151f1b;font-family:var(--font);font-size:13px;outline:none;flex:1;min-width:70px}
    .sub-form-row select:focus,.sub-form-row input:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
    .tipo-row{display:flex;gap:8px;margin-bottom:12px}
    /* Dashboard auto widget */
    .dash-auto-widget{background:rgba(255,255,255,.92);border:1px solid #d6ded9;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-top:18px}
    .dash-auto-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .dash-auto-title{font-size:14px;font-weight:800;color:#151f1b;display:flex;align-items:center;gap:7px}
    .dash-auto-list{display:flex;flex-direction:column;gap:8px}
    .dash-auto-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:#f8faf9;border:1px solid #e9eeeb}
    .dash-auto-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .dash-auto-dot.on{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
    .dash-auto-dot.off{background:#cbd5d0}
    .dash-auto-name{font-size:13px;font-weight:700;color:#151f1b;flex:1}
    .dash-auto-sub{font-size:11.5px;color:#76837d}
    .dash-auto-ver{font-size:12px;color:#16a34a;font-weight:700;cursor:pointer;text-decoration:none}
    .dash-auto-ver:hover{text-decoration:underline}


/* Dashboard drag & drop */
.nodes-grid[data-gateway-id] .node-tile{
  cursor:grab;
  user-select:none;
}
.nodes-grid[data-gateway-id] .node-tile:active{
  cursor:grabbing;
}
.node-tile.dragging{
  opacity:.55;
  transform:scale(.985);
  outline:2px dashed #16a34a;
  outline-offset:3px;
}
.node-tile.drag-saving{
  box-shadow:0 0 0 3px rgba(22,163,74,.16), var(--shadow);
}


/* Dashboard modo ordenar paneles */
.nodes-grid:not(.order-edit-mode) .node-tile{
  cursor:default!important;
}
.nodes-grid.order-edit-mode .node-tile{
  cursor:grab!important;
}
.nodes-grid.order-edit-mode .node-tile:active{
  cursor:grabbing!important;
}
.dashboard-order-hint{
  font-size:12px;
  font-weight:700;
  color:#166534;
  background:#dcfce7;
  border:1px solid #86efac;
  border-radius:20px;
  padding:7px 12px;
}

    @media(max-width:768px){#app{flex-direction:column}.sidebar{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;padding:8px;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-logo{border-bottom:none;padding:8px}.brand-sidebar-wrap{max-width:210px}.sidebar-nav{flex-direction:row;flex-wrap:wrap;padding:4px;gap:4px}.sidebar-link{padding:6px 10px;font-size:12px;gap:5px}.sidebar-footer{flex-direction:row;align-items:center;border-top:none;padding:4px 8px;gap:10px}.main-content{padding:16px}.profile-grid{grid-template-columns:1fr}}
  
/* Dashboard offline visual */
.node-tile.node-offline{
  opacity:.72;
  filter:grayscale(.25);
  background:linear-gradient(180deg,#f3f5f4,#eef2f0);
  border-color:#cbd5d0;
}
.node-tile.node-offline .node-var-row{
  background:rgba(148,163,184,.08);
}
.node-tile.node-offline .node-var-label,
.node-tile.node-offline .node-var-value,
.node-tile.node-offline .action-group-title{
  color:#76837d!important;
}
.node-tile.node-offline .action-btn{
  opacity:.55;
  pointer-events:none;
  filter:grayscale(.3);
}
.node-offline-note{
  font-size:11.5px;
  color:#76837d;
  font-weight:700;
  margin-bottom:8px;
  padding:6px 8px;
  border-radius:10px;
  background:#eef2f0;
  border:1px solid #d6ded9;
}


/* Corrección scroll modal automatizaciones */
#modal-auto-wizard .modal{
  max-height:calc(100vh - 56px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-gutter:stable;
  clip-path:inset(0 round 24px);
}

#modal-auto-wizard .modal::-webkit-scrollbar{
  width:8px;
}

#modal-auto-wizard .modal::-webkit-scrollbar-track{
  background:transparent;
  margin:14px 0;
}

#modal-auto-wizard .modal::-webkit-scrollbar-thumb{
  background:#cbd5d0;
  border-radius:10px;
  border:2px solid #ffffff;
}


    .auth-links{position:relative;z-index:1;margin-top:14px;display:flex;flex-direction:column;gap:6px;align-items:center}
    .auth-link{background:transparent;border:0;color:#22c55e;font-weight:800;cursor:pointer;font-size:13.5px;padding:6px 8px}
    .auth-link:hover{text-decoration:underline}
    .auth-ok{position:relative;z-index:1;background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.34);color:#bbf7d0;border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;margin-bottom:12px;display:none;font-weight:700}

/* PWA mobile layout */
@media (max-width: 768px) {
  html, body {
    min-height: 100%;
    overflow-x: hidden;
  }

  #app {
    min-height: 100dvh;
  }

  .login-box {
    width: calc(100% - 24px);
    padding: 28px 20px;
  }

  .main-content {
    width: 100%;
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 150;
    overflow-x: auto;
  }

  .sidebar-logo,
  .sidebar-footer {
    display: none;
  }

  .sidebar-nav {
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
  }

  .sidebar-link {
    min-height: 44px;
    white-space: nowrap;
  }

  .nodes-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .section-header,
  .gw-header,
  .device-item,
  .history-node-item {
    align-items: stretch;
  }

  .device-item,
  .history-node-item {
    flex-direction: column;
  }

  .device-item-actions,
  .modal-actions,
  .auto-form-footer {
    width: 100%;
    flex-wrap: wrap;
  }

  .btn-primary,
  .btn-save,
  .btn-confirm,
  .btn-cancel,
  .btn-add,
  .btn-sm {
    min-height: 44px;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: none;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 22px 22px 0 0;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  #toast {
    width: calc(100% - 24px);
    bottom: calc(12px + env(safe-area-inset-bottom));
    text-align: center;
    white-space: normal;
  }
}