@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#080d1b;--accent:#8b6cff;--accent-rgb:139,108,255;--glass:rgba(255,255,255,.18);--radius:22px;--gap:12px;--font-size:16px;--font-weight:600;--card-bg:rgba(22,30,53,.74);--text:#f6f7ff;--muted:#a9b1ca}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size);font-weight:var(--font-weight);min-height:100vh;overflow-x:hidden}
.ambient{position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.24;pointer-events:none}.ambient-a{width:390px;height:390px;background:#314fff;top:-180px;right:-130px}.ambient-b{width:350px;height:350px;background:#743bff;bottom:-180px;left:-160px}
.app-shell{max-width:1050px;margin:auto;padding:24px 24px 110px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);font-size:23px;font-weight:600;letter-spacing:-.8px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(140deg,#35c8ff,var(--accent));font-size:31px;line-height:1;color:white}.brand-accent{color:#9d8aff}.top-actions{display:flex;gap:10px}.icon-btn,.round-add{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.08);color:white;border-radius:50%;width:44px;height:44px;font-size:23px;cursor:pointer;backdrop-filter:blur(16px)}
.welcome{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:2px;color:#9c8aff;font-weight:700}.welcome h1{font-size:clamp(30px,5vw,48px);letter-spacing:-2px;margin:8px 0 2px;font-weight:600}.welcome p{margin:0;color:var(--muted);font-size:14px;font-weight:400}.weather-chip{display:flex;align-items:center;gap:10px;padding:13px 17px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(20px)}.weather-icon{font-size:28px;color:#ffc65a}.weather-chip b,.weather-chip small{display:block}.weather-chip small{font-size:11px;color:var(--muted);font-weight:400}
.glass{background:linear-gradient(110deg,rgba(255,255,255,.13),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(22px);box-shadow:0 18px 55px rgba(0,0,0,.12)}.overview{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-radius:20px;margin-bottom:25px}.overview-home,.overview-stat{display:flex;align-items:center;gap:13px}.home-symbol{font-size:30px;color:#8b9cff}.overview b,.overview small{display:block}.overview small{color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}.online-dot{display:inline-block;width:7px;height:7px;background:#4de0b2;border-radius:50%;margin-right:5px}.overview-stat{padding-left:22px;border-left:1px solid rgba(255,255,255,.13)}.overview-stat>span{font-size:25px;color:#9b8aff}.section-tabs{display:flex;gap:7px;padding:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.055);border-radius:18px;margin-bottom:31px;overflow:auto}.tab{flex:1;white-space:nowrap;border:0;border-radius:13px;padding:12px 15px;background:transparent;color:#b5bdd4;font:inherit;font-size:13px;cursor:pointer}.tab span{margin-left:7px}.tab.active{color:white;background:linear-gradient(110deg,#6548ef,#397ee9);box-shadow:0 5px 22px rgba(93,79,255,.25)}
.view{display:none}.view.active-view{display:block}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.section-heading h2{font-size:25px;letter-spacing:-.8px;margin:5px 0 0}.text-btn{border:0;background:none;color:#bcb0ff;font:inherit;font-size:13px;cursor:pointer}.round-add{background:linear-gradient(135deg,#7657ff,#3e8cf2);border:0;font-size:25px}.device-grid{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:var(--gap);}.device-card{position:relative;min-height:154px;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);overflow:hidden;background:var(--card-bg);backdrop-filter:blur(18px);box-shadow:0 12px 30px rgba(0,0,0,.13);padding:18px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}.device-card:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 90% 0%,rgba(var(--tile-rgb),.30),transparent 58%)}.device-card.has-image:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,12,27,.9),rgba(7,12,27,.45))}.device-card.has-image{background-size:cover;background-position:center}.device-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.device-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(var(--tile-rgb),.18);font-size:23px}.device-actions{display:flex;gap:6px}.tiny-btn{border:0;background:rgba(255,255,255,.09);color:#c5cbe0;border-radius:10px;width:29px;height:29px;font-size:15px;cursor:pointer}.tiny-btn.fav{color:#ffd36d}.device-name{font-size:15px;font-weight:600;margin:15px 0 3px}.device-meta{font-size:11px;color:#b2bad2;font-weight:400}.device-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.device-status{font-size:11px;color:#c2c9dc}.power-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#d7d9eb;font-size:18px;cursor:pointer}.power-btn.on{background:linear-gradient(135deg,#7657ff,#358fe8);box-shadow:0 0 22px rgba(112,93,255,.4);color:white}.device-slider{width:100%;accent-color:var(--accent);margin-top:9px}.empty-state{text-align:center;padding:42px 20px;color:var(--muted)}.empty-state>span{font-size:38px;color:var(--accent)}.empty-state h3{color:white}.empty-state p{font-size:13px;line-height:1.6}.hidden{display:none!important}
.search-wrap{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);padding:0 14px;border-radius:14px;margin-bottom:13px}.search-wrap span{font-size:23px;color:#a99bff}.search-wrap input{width:100%;padding:14px 0;background:transparent;border:0;outline:0;color:white;font:inherit;font-size:13px}.filter-row{display:flex;gap:7px;overflow:auto;padding-bottom:15px}.filter{white-space:nowrap;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#aeb6cf;border-radius:30px;padding:8px 13px;font:inherit;font-size:11px;cursor:pointer}.filter.active{background:rgba(139,108,255,.24);border-color:rgba(155,133,255,.6);color:white}
.room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}.room-card{border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);padding:22px;background:linear-gradient(135deg,rgba(92,112,180,.23),rgba(255,255,255,.045));min-height:125px}.room-card .room-icon{font-size:25px}.room-card h3{margin:12px 0 4px;font-size:16px}.room-card p{margin:0;color:var(--muted);font-size:11px;font-weight:400}
.scene-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}.scene-card{padding:19px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.07);display:flex;align-items:center;gap:14px}.scene-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:15px;background:rgba(139,108,255,.2);font-size:23px}.scene-card b,.scene-card small{display:block}.scene-card small{color:var(--muted);font-size:11px;margin-top:4px;font-weight:400}.scene-card button{margin-left:auto}
.bottom-nav{position:fixed;z-index:5;bottom:14px;left:50%;transform:translateX(-50%);width:min(650px,calc(100% - 26px));display:flex;justify-content:space-around;padding:10px 8px calc(10px + env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.14);border-radius:22px;background:rgba(17,24,45,.88);backdrop-filter:blur(25px);box-shadow:0 15px 50px rgba(0,0,0,.35)}.bottom-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px;border:0;background:none;color:#929bb7;font:inherit;font-size:10px;cursor:pointer}.bottom-item span{font-size:21px}.bottom-item.selected{color:#a997ff}.bottom-item.selected span{filter:drop-shadow(0 0 8px var(--accent))}
.editor-drawer{position:fixed;z-index:20;top:0;right:0;width:min(420px,100%);height:100dvh;padding:25px 23px 22px;background:#10172b;border-left:1px solid rgba(255,255,255,.12);box-shadow:-25px 0 70px rgba(0,0,0,.35);transform:translateX(105%);transition:transform .28s ease;overflow:auto}.editor-drawer.open{transform:translateX(0)}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head h2{margin:5px 0;font-size:25px}.drawer-intro,.panel-note{font-size:12px;color:var(--muted);line-height:1.6;font-weight:400}.editor-tabs{display:flex;gap:5px;margin:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}.editor-tab{flex:1;padding:11px 4px;background:none;border:0;border-bottom:2px solid transparent;color:#aeb6ce;font:inherit;font-size:12px;cursor:pointer}.editor-tab.active{color:white;border-color:var(--accent)}.editor-panel{display:none}.editor-panel.active{display:block}.editor-panel label,.modal label{display:block;margin:17px 0;color:#dce1f3;font-size:12px}.editor-panel input:not([type=color]),.editor-panel select,.modal input:not([type=checkbox]),.modal select{display:block;width:100%;margin-top:8px;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#1a2340;color:white;font:inherit;font-size:13px}.editor-panel input[type=range]{width:100%;accent-color:var(--accent)}.editor-panel input[type=color],.modal input[type=color]{display:block;margin-top:8px;width:100%;height:38px;border:0;background:transparent}.editor-panel output{float:right;color:#a99bff}.drawer-foot{position:sticky;bottom:-22px;padding:15px 0 4px;background:linear-gradient(transparent,#10172b 25%)}.scrim{position:fixed;z-index:15;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s}.scrim.show{opacity:1;pointer-events:auto}
.primary-btn,.secondary-btn{border:0;border-radius:12px;padding:12px 17px;font:inherit;font-size:13px;cursor:pointer}.primary-btn{background:linear-gradient(110deg,#7657ff,#3789ed);color:white;font-weight:600}.secondary-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:#d9def0}.full{width:100%;margin-top:9px}
.modal{width:min(440px,calc(100% - 28px));border:1px solid rgba(255,255,255,.15);border-radius:22px;background:#11192e;color:white;padding:22px;box-shadow:0 25px 80px #0009}.modal::backdrop{background:rgba(0,0,0,.65);backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:5px 0;font-size:21px}.modal .close-modal{width:35px;height:35px}.check-label{display:flex!important;align-items:center;gap:9px}.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}.modal-actions button{flex:1}.toast{position:fixed;z-index:40;bottom:100px;left:50%;transform:translate(-50%,20px);padding:11px 17px;border-radius:12px;background:#252f4d;color:white;font-size:12px;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:620px){.app-shell{padding:18px 15px 110px}.topbar{margin-bottom:26px}.welcome{align-items:flex-start}.weather-chip{padding:10px 12px}.overview{padding:14px 13px}.overview-stat{padding-left:12px;gap:7px}.overview-stat>span{font-size:20px}.overview-home{gap:8px}.overview small{font-size:9px}.section-tabs{margin-bottom:25px}.tab{padding:11px 9px;font-size:12px}.tab span{margin-left:4px}.device-card{min-height:147px;padding:13px}.device-name{font-size:13px}.device-icon{width:37px;height:37px}.room-grid,.scene-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.device-grid{grid-template-columns:1fr!important}.weather-chip{display:none}.overview-stat:nth-child(3){display:none}.section-tabs .tab{font-size:11px}.section-tabs .tab span{display:block;margin:3px 0 0}}

/* Ajuste de áreas seguras iOS: separa cabecera y contenido de la barra de estado */
.app-shell{padding-top:calc(24px + env(safe-area-inset-top))}
@media(max-width:620px){.app-shell{padding-top:calc(28px + env(safe-area-inset-top))}.topbar{padding-top:5px;margin-bottom:30px}.welcome{margin-top:5px}}
@supports (-webkit-touch-callout:none){body{min-height:100svh}.app-shell{padding-top:calc(30px + env(safe-area-inset-top))}.editor-drawer{padding-top:calc(25px + env(safe-area-inset-top))}}
.overview-custom{position:relative;min-width:0;border-radius:15px;padding:5px 8px;transition:background .2s ease,color .2s ease}
.overview-edit{border:0;background:rgba(255,255,255,.09);color:#e5e8fa;border-radius:8px;width:25px;height:25px;font-size:17px;line-height:1;cursor:pointer;margin-left:4px}
.overview-custom>div{min-width:0}.overview-custom b,.overview-custom small{overflow-wrap:anywhere}
.scene-card{border-color:color-mix(in srgb,var(--scene-color) 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--scene-color) 19%,transparent),rgba(255,255,255,.045))}
.scene-icon{background:color-mix(in srgb,var(--scene-color) 25%,transparent)}
.scene-copy{min-width:0;flex:1}.scene-copy b,.scene-copy small{overflow-wrap:anywhere}
.scene-actions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 8px;color:#e5e9f8;font-size:13px}
.scene-action-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;gap:7px;margin:8px 0;align-items:center}
.scene-action-row select{min-width:0;width:100%;padding:10px 7px;border-radius:9px;border:1px solid rgba(255,255,255,.13);background:#1a2340;color:white;font:inherit;font-size:11px}
.scene-modal{max-height:88dvh;overflow:auto}
.scene-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:380px){.overview{gap:3px}.overview-custom{padding:4px}.overview-edit{width:21px;height:21px}.overview-home{gap:5px}.overview-stat{padding-left:7px}.scene-action-row{grid-template-columns:1fr 1fr 28px}}

renderOverview();


/* v0.7 — tarjetas pulsables y paneles individuales de dispositivo */
.device-card-clickable{cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.device-card-clickable:hover{transform:translateY(-2px);border-color:rgba(155,137,255,.48);box-shadow:0 16px 38px rgba(0,0,0,.22)}
.device-card-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.card-open-hint{display:flex;justify-content:space-between;align-items:center;margin-top:9px;color:#a9b3d2;font-size:10px;font-weight:400;opacity:.78}
.card-open-hint span{font-size:14px;color:#b6a8ff}
.control-modal{width:min(500px,calc(100% - 22px));max-height:min(90dvh,850px);overflow:auto;padding:22px;background:linear-gradient(155deg,#151f3b,#0d1428 78%);border-color:rgba(167,153,255,.23)}
.control-modal[open]{animation:controlIn .22s ease}
@keyframes controlIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.control-modal .modal-head{align-items:flex-start;margin-bottom:20px}
.control-modal .modal-head h2{font-size:23px;letter-spacing:-.6px}
.control-room{margin:5px 0 0;color:var(--muted);font-size:12px;font-weight:400}
.control-modal .close-modal{flex:0 0 auto}
.climate-hero{padding:22px 16px 18px;border:1px solid rgba(130,170,255,.18);border-radius:24px;background:radial-gradient(circle at 50% 30%,rgba(65,133,255,.22),transparent 66%),rgba(255,255,255,.035);text-align:center}
.climate-state{display:flex;justify-content:center;align-items:center;gap:7px;color:#c9d5f4;font-size:12px}
.state-dot,.demo-indicator i{width:7px;height:7px;border-radius:50%;background:#65718f;display:inline-block}
.state-dot.active,.demo-indicator i{background:#56d9b0;box-shadow:0 0 10px #56d9b077}
.temperature-caption{margin-top:20px;color:#aebbd9;font-size:11px;font-weight:400}
.temperature-dial{display:flex;align-items:center;justify-content:center;gap:20px;margin:8px auto}
.temp-value{display:flex;align-items:flex-start;justify-content:center;min-width:130px;color:#fff}
.temp-value strong{font-size:76px;line-height:1;font-weight:500;letter-spacing:-5px}
.temp-value span{font-size:22px;color:#9fb7ff;margin:9px 0 0 5px}
.temp-step{width:42px;height:42px;border:1px solid rgba(151,173,255,.28);border-radius:50%;background:rgba(111,145,255,.13);color:white;font-size:24px;cursor:pointer}
.current-temperature{font-size:12px;color:#9eabc9;font-weight:400}
.current-temperature b{color:#e9efff;margin-left:6px;font-weight:600}
.control-power-row{display:flex;justify-content:space-between;align-items:center;margin:16px 0;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.09)}
.control-power-row b,.control-power-row small{display:block}
.control-power-row b{font-size:14px}.control-power-row small{font-size:11px;color:var(--muted);margin-top:4px;font-weight:400}
.power-btn.large{width:48px;height:48px;font-size:21px}
.control-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.control-field-grid label{margin:8px 0 4px!important;color:#dce4fa!important}
.control-field-grid select{display:block;width:100%;margin-top:8px;padding:12px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:#1a2542;color:white;font:inherit;font-size:12px}
.control-note{margin:17px 0 2px;padding:12px 13px;border-radius:12px;background:rgba(255,255,255,.045);color:#9daac8;font-size:10px;line-height:1.55;font-weight:400}
.generic-device-hero{display:flex;align-items:center;gap:15px;padding:17px;border-radius:19px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.generic-device-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:rgba(var(--tile-rgb),.19);font-size:29px}
.generic-state{font-size:13px;color:#aab4d0}.generic-state.active{color:#67dfb5}
.generic-device-hero p{margin:5px 0 0;color:#aab4d0;font-size:11px;font-weight:400}
.level-control{padding:17px 2px 5px}
.level-heading{display:flex;justify-content:space-between;align-items:center;color:#dce4fa;font-size:13px}
.level-heading strong{color:#b8a9ff}
.level-control input{width:100%;margin:16px 0 4px;accent-color:var(--accent)}
.level-ends{display:flex;justify-content:space-between;color:#8f9bb9;font-size:10px}
.control-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:19px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.demo-indicator{display:flex;align-items:center;gap:7px;color:#9ca9c7;font-size:10px;font-weight:400}
.control-footer .secondary-btn{font-size:11px;padding:10px}
@media(max-width:420px){.control-modal{padding:17px}.temp-value strong{font-size:66px}.temperature-dial{gap:12px}.control-field-grid{grid-template-columns:1fr}.control-footer{align-items:flex-start;flex-direction:column}.control-footer .secondary-btn{width:100%}}