/* MatterAI · motor de dashboards (celular y tablet): grafito, acento cálido, Red Hat, íconos de línea */
.vista{--bg:#161b21;--card:#1e242e;--card2:#262e3a;--line:rgba(160,175,200,.15);--fg:#e9ecf2;--muted:#8f99ab;
  --warm:#f2b766;--warm-s:rgba(242,183,102,.15);--cool:#7cc4f0;--cool-s:rgba(124,196,240,.15);--green:#7fd6a4;--red:#f08a7c;--red-s:rgba(240,138,124,.15);--off:#3a4150;
  --f-display:"Red Hat Display",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono:"Red Hat Mono",ui-monospace,Menlo,monospace;
  position:relative;color:var(--fg);font:14px/1.35 var(--f-display);background:var(--bg)}
.vista *{box-sizing:border-box}
html.with-inicio,body.with-inicio,body.with-inicio .home{background:#161b21}
.vista button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;padding:0}
.vista svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vista h3{margin:22px 2px 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vista .v-card h3{margin:0 0 10px}
.v-empty{color:var(--muted);font-size:13px;padding:8px 2px}.v-empty.big{text-align:center;padding:30px 0}
/* ───── celular ───── */
.vista.k-phone{max-width:640px;margin:0 auto;min-height:100vh;padding:18px 18px 110px}
.vista.k-phone.with-player{padding-bottom:170px}
.v-head{display:flex;align-items:center;gap:10px}
.k-phone .v-head{margin-bottom:18px}
.v-when{flex:1;min-width:0}
.v-when b{display:block;white-space:nowrap;font-family:var(--f-mono);font-size:30px;font-weight:400;letter-spacing:-.02em;line-height:1}
.v-when span{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-chip{display:flex;align-items:center;gap:6px;padding:9px 12px!important;border-radius:14px;background:var(--card)!important;border:1px solid var(--line)!important;font-size:15px;font-weight:600;white-space:nowrap}
.v-chip svg.i{color:var(--warm)}.v-chip small{font-size:12px;color:var(--muted);font-weight:500}
.v-sq{width:42px;height:42px;border-radius:14px;background:var(--card)!important;border:1px solid var(--line)!important;display:grid!important;place-items:center;position:relative;flex:none}
.v-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--warm);color:#1b1408;font:700 11px/19px var(--f-mono);text-align:center;border:2px solid var(--bg)}
/* resumen */
.v-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v-kpis.n1{grid-template-columns:1fr}.v-kpis.n2{grid-template-columns:1fr 1fr}.v-kpis.n4{grid-template-columns:repeat(4,1fr)}.v-kpis.n5{grid-template-columns:repeat(5,1fr)}.v-kpis.n6{grid-template-columns:repeat(6,1fr)}
.v-kpi{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:14px;padding:11px 12px!important;min-width:0}
.v-kpi .l{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}.v-kpi .l span{overflow:hidden;text-overflow:ellipsis}
.v-kpi .l svg.i{width:13px;height:13px}
.v-kpi .v{display:block;font-size:16px;font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-kpi .v.g{color:var(--green)}.v-kpi .v.w{color:var(--warm)}.v-kpi .v.r{color:var(--red)}.v-kpi .v.c{color:var(--cool)}
.v-kpi.alert{border-color:rgba(240,138,124,.5)!important;background:linear-gradient(var(--red-s),var(--red-s)),var(--card)!important}
/* cámara */
.v-cam{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0b0e12;border:1px solid var(--line)}
.k-tablet .v-cam{aspect-ratio:16/9}
.v-feed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.v-feed.none{background:radial-gradient(75% 70% at 55% 40%,#2c333f,#13171d 75%)}
.v-cam::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(10,13,16,.85));pointer-events:none}
.v-live{position:absolute;z-index:1;top:10px;left:10px;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:20px;background:rgba(22,27,33,.85);font-size:10.5px;font-weight:700;letter-spacing:.1em}
.v-live i{width:6px;height:6px;border-radius:50%;background:var(--red);animation:v-bl 1.4s infinite}@keyframes v-bl{50%{opacity:.25}}
.v-lbl{position:absolute;z-index:1;left:14px;bottom:14px;font-size:15px;font-weight:700;max-width:40%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-cact{position:absolute;z-index:1;right:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:62%}
.v-gate{display:flex!important;align-items:center;gap:8px;padding:11px 15px!important;border-radius:13px;background:var(--warm)!important;color:#1b1408!important;font-weight:700!important}
.v-gate.open{background:var(--red)!important;color:#1d0e0b!important}.v-gate.mv{background:var(--card2)!important;color:var(--fg)!important}
.v-dots{position:absolute;z-index:1;top:12px;right:12px;display:flex;gap:5px;pointer-events:none}.v-dots b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}.v-dots b.on{background:#fff}
.v-cam{touch-action:pan-y}
.v-lslot{cursor:default;background:#0b0e12;overflow:hidden}
/* el visor de Frigate fuera de Home Assistant viene con fondo blanco: se le da el fondo oscuro y la proporción del video */
.v-lslot>advanced-camera-card{display:block;width:100%;height:calc(100% + 2px);margin-bottom:-2px;background:#0b0e12;--ha-card-background:#0b0e12;--card-background-color:#0b0e12;
  --primary-background-color:#0b0e12;--secondary-background-color:#0b0e12;--ha-card-border-width:0;--ha-card-border-radius:0}
.v-cam.is-live,.k-tablet .v-cam.is-live{aspect-ratio:16/9;background:#0b0e12}
.v-cam.is-live::after{height:28%}
.v-live.photo{color:var(--muted);letter-spacing:.06em}
.v-cbtn{display:flex!important;align-items:center;gap:6px;padding:10px 12px!important;border-radius:12px;background:rgba(22,27,33,.82)!important;border:1px solid var(--line)!important;font-weight:600;font-size:12.5px}
/* ambientes */
.v-rooms{display:flex;flex-direction:column;gap:8px}
.v-room{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.v-room.mark{border-color:rgba(242,183,102,.4)}
.v-room.press,.v-tile.press{animation:v-pr .5s}@keyframes v-pr{40%{transform:scale(.97)}}
.v-ric{width:40px;height:40px;border-radius:12px;background:var(--card2);display:grid;place-items:center;color:var(--muted);flex:none}
.v-ric.on{background:var(--warm-s);color:var(--warm)}
.v-tx{flex:1;min-width:0}.v-tx b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v-tx span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-pw{width:46px;height:27px;border-radius:27px!important;background:var(--off)!important;position:relative;flex:none}
.v-pw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--fg);transition:transform .2s}
.v-pw.on{background:var(--warm)!important}.v-pw.on::after{transform:translateX(19px)}
.v-chev{color:var(--muted)}
.v-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.v-tile{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer;user-select:none;-webkit-user-select:none}
.v-tile b{font-size:13.5px;margin-top:6px}.v-tile span{font-size:11.5px;color:var(--muted)}.v-tic{color:var(--muted)}
.v-tile.lit{background:linear-gradient(160deg,rgba(242,183,102,.16),var(--card) 70%);border-color:rgba(242,183,102,.3)}.v-tile.lit .v-tic{color:var(--warm)}
/* escenas */
.v-scenes{display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:0 18px;scrollbar-width:none}
.v-scenes::-webkit-scrollbar{display:none}
.v-scene{flex:none;display:flex!important;align-items:center;gap:8px;padding:11px 14px!important;border-radius:13px;background:var(--card)!important;border:1px solid var(--line)!important;font-weight:600;font-size:13.5px;white-space:nowrap}
.v-sic{color:var(--muted);display:flex}
.v-scene.act{border-color:var(--warm)!important;background:linear-gradient(var(--warm-s),var(--warm-s)),var(--card)!important}.v-scene.act .v-sic{color:var(--warm)}
.v-sgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v-sgrid .v-scene{padding:13px 12px!important;white-space:normal}
/* botones */
.v-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.v-btns.list{grid-template-columns:1fr}
.v-btn{display:flex!important;align-items:center;gap:10px;padding:11px!important;border-radius:15px;background:var(--card)!important;border:1px solid var(--line)!important;min-width:0}
.v-bic{width:34px;height:34px;border-radius:11px;background:var(--card2);display:grid;place-items:center;color:var(--muted);flex:none}
.v-btn.on{border-color:rgba(242,183,102,.35)!important}.v-btn.on .v-bic{background:var(--warm);color:#1b1408}
.v-btn .v-tx b{font-size:13.5px}
/* tarjetas varias */
.v-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}
.v-card.away{border-color:rgba(124,196,240,.5);background:linear-gradient(var(--cool-s),var(--cool-s)),var(--card)}
.v-row{display:flex;align-items:center;gap:12px}
.v-btn1{padding:8px 13px!important;border-radius:11px;background:var(--card2)!important;border:1px solid var(--line)!important;font-size:12.5px;font-weight:600;white-space:nowrap}
.v-btn1.w{background:var(--warm)!important;color:#1b1408!important;border:0!important}
.v-alarm{display:flex!important;align-items:center;gap:14px;width:100%;padding:16px!important;border-radius:18px;background:linear-gradient(135deg,rgba(127,214,164,.16),rgba(127,214,164,.04)),var(--card)!important;border:1px solid rgba(127,214,164,.35)!important}
.v-alarm svg.i{width:26px;height:26px;color:var(--green)}
.v-alarm.armed{background:linear-gradient(135deg,rgba(240,138,124,.22),rgba(240,138,124,.05)),var(--card)!important;border-color:rgba(240,138,124,.5)!important}.v-alarm.armed svg.i{color:var(--red)}
.v-alarm .v-tx b{font-size:17px}
.v-rt{display:flex;flex-direction:column;gap:6px}
.v-rti{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:13px;background:var(--card2)}.v-rti .v-tx b{font-size:13px}
.v-music{display:flex;align-items:center;gap:12px}
.v-art{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#f2b766,#c56a7b 55%,#5b6fd1);background-size:cover;background-position:center;flex:none}
.v-mb{width:40px;height:40px;border-radius:50%!important;display:grid!important;place-items:center;background:var(--card2)!important}.v-mb.pl{background:var(--fg)!important;color:var(--bg)!important}
.v-lk{width:46px;height:46px;border-radius:14px;display:grid!important;place-items:center;background:rgba(127,214,164,.15)!important;color:var(--green)!important;flex:none}
.v-lk.open{background:var(--red-s)!important;color:var(--red)!important}
.v-clock{display:flex;align-items:center;gap:14px;cursor:pointer}.v-clock b{font-family:var(--f-mono);font-size:46px;font-weight:400;white-space:nowrap}.v-clock span{color:var(--muted);text-transform:capitalize;flex:1}
/* plano */
.v-plan{position:relative;width:100%;border-radius:20px;overflow:hidden;background:#181c24;border:1px solid var(--line)}
.v-plan>svg{position:absolute;inset:0;width:100%;height:100%}
.v-plan.empty{aspect-ratio:.7;display:grid;place-items:center;text-align:center;color:var(--muted);padding:20px}
.v-hit{fill:transparent;stroke:transparent;stroke-width:3;cursor:pointer;transition:fill .2s,stroke .2s}
.v-hit:hover{fill:rgba(242,183,102,.08);stroke:rgba(242,183,102,.45)}
.v-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;padding:5px 9px 5px 6px;border-radius:999px;background:rgba(18,22,29,.86);border:1px solid rgba(255,255,255,.18);font-size:11.5px;cursor:pointer;white-space:nowrap;user-select:none;-webkit-user-select:none}
.v-pin b{font-weight:600}.v-pin svg.i{width:15px;height:15px;padding:3px;border-radius:50%;background:var(--off);color:#c4cad6;box-sizing:content-box}
.v-pin svg.i.on{background:var(--warm);color:#1b1408}.v-pin svg.i.ac{background:var(--cool);color:#0b1620}.v-pin svg.i.mu{background:#b48cf2;color:#160b24}.v-pin svg.i.al{background:var(--red);color:#1b0b0b}
.v-pin{gap:4px}.v-pin b{margin-left:3px}
.v-ptag{position:absolute;left:50%;top:10px;transform:translateX(-50%);padding:5px 11px;border-radius:999px;background:rgba(20,25,32,.85);border:1px solid var(--line);font-size:11.5px;color:var(--muted);white-space:nowrap;pointer-events:none}
/* todo / reproductor / barra (celular) */
.v-allb{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;padding:13px!important;border-radius:14px;border:1px dashed var(--line)!important;color:var(--muted);font-weight:600;text-align:center}
/* abajo, siempre juntos: el reproductor (sólo con música) arriba de la barra */
.v-bottom{position:fixed;z-index:16;left:0;right:0;bottom:0;display:flex;flex-direction:column;pointer-events:none}
.v-bottom>*{pointer-events:auto}
.v-player{position:relative;z-index:1;margin:0 12px 8px;width:auto;max-width:616px;align-self:stretch;display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:var(--card2);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.4);cursor:pointer;transition:transform .28s ease,opacity .28s ease}
.v-player.hide{position:absolute;left:12px;right:12px;bottom:70px;opacity:0;transform:translate(34%,70px) scale(.3);pointer-events:none}
@media (min-width:640px){.v-player{margin:0 auto 8px;width:calc(100% - 24px)}}
.v-player .v-art{width:40px;height:40px;border-radius:10px}
.v-prog{position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--off);overflow:hidden}.v-prog i{display:block;height:100%;background:var(--warm)}
.k-tablet .v-player{margin:0;max-width:none;width:auto;box-shadow:none;padding:10px 12px}.k-tablet .v-player.hide{display:none}
.k-tablet .v-player .v-art{width:46px;height:46px}.k-tablet .v-player .v-tx b{font-size:14.5px}
.v-pl{width:38px;height:38px;border-radius:50%!important;background:var(--fg)!important;color:var(--bg)!important;display:grid!important;place-items:center}
.v-hide{width:32px;height:38px;display:grid!important;place-items:center;color:var(--muted)}
.v-nav{position:relative;padding:10px 14px calc(max(env(safe-area-inset-bottom,0px),var(--sb,0px)) + 14px);display:flex;justify-content:space-around;align-items:center;background:var(--bg);border-top:1px solid var(--line)}
.v-nav button,.v-dock button{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);width:62px;text-align:center!important}
.v-nav button svg.i,.v-dock button svg.i{width:21px;height:21px}.v-nav button.on,.v-dock button.on{color:var(--fg)}
.v-mic{width:50px!important;height:50px;border-radius:50%;background:var(--fg)!important;color:var(--bg)!important;display:grid!important;place-items:center;margin-top:-22px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.v-eq{position:absolute;top:-2px;right:12px;display:flex;gap:2px;align-items:flex-end;height:12px}
.v-eq i{width:3px;border-radius:2px;background:var(--warm);animation:v-eq 1s infinite ease-in-out}.v-eq i:nth-child(2){animation-delay:.2s}.v-eq i:nth-child(3){animation-delay:.4s}
@keyframes v-eq{0%,100%{height:4px}50%{height:12px}}
/* ───── tablet (horizontal: plano · columnas; vertical: plano arriba) ───── */
.vista.k-tablet{height:100vh;padding:16px;overflow:hidden;box-sizing:border-box}
.v-tab{display:flex;gap:16px;height:100%}
.v-c0{height:100%;flex:none;display:flex;flex-direction:column;gap:12px;max-width:46%}
.v-c0 .v-b{height:100%}.v-c0 .v-plan{height:100%;width:auto;max-width:100%}
.v-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.k-tablet .v-head{gap:12px}.k-tablet .v-head .v-when b{font-size:50px;line-height:.95}.k-tablet .v-head .v-when span{font-size:13.5px}
.k-tablet .v-chip{padding:10px 14px!important;border-radius:18px;font-size:22px;font-weight:400}.k-tablet .v-chip svg.i{width:26px;height:26px}
.k-tablet .v-sq{width:44px;height:44px}
.v-top:empty{display:none}
.k-tablet .v-kpi{border-radius:16px}.k-tablet .v-kpi .l{font-size:11.5px}.k-tablet .v-kpi .v{font-size:19px}
.k-tablet .v-c1>.v-b,.k-tablet .v-c2>.v-b{flex:none}
.k-tablet :is(.v-c1,.v-c2)>:is(.t-rooms,.t-scenes,.t-buttons,.t-camera,.t-featured,.t-kpis){background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px}
.k-tablet :is(.v-c1,.v-c2)>:is(.t-camera,.t-featured){padding:10px}.k-tablet :is(.v-c1,.v-c2)>:is(.t-camera,.t-featured)>h3{margin:4px 4px 10px}
.k-tablet :is(.v-c1,.v-c2)>.v-b>h3{margin:0 0 10px}
.k-tablet .v-b .v-card{border-radius:20px}
.k-tablet .v-b .v-room,.k-tablet .v-b .v-tile,.k-tablet .v-b .v-scene,.k-tablet .v-b .v-btn,.k-tablet .v-b .v-kpi{background:var(--card2)!important;border-color:transparent!important}
.k-tablet .v-b .v-tile.lit{background:linear-gradient(160deg,rgba(242,183,102,.18),var(--card2) 70%)!important;border-color:rgba(242,183,102,.3)!important}
.k-tablet .v-b .v-scene.act{border-color:var(--warm)!important;background:var(--warm-s)!important}
.k-tablet .v-top .v-kpi{background:var(--card)!important;border:1px solid var(--line)!important}
.k-tablet .v-sgrid .v-scene{padding:14px 12px!important;border-radius:16px}
.v-cols{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v-c1,.v-c2{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;scrollbar-width:none}
.v-c1::-webkit-scrollbar,.v-c2::-webkit-scrollbar{display:none}
.k-tablet .v-b>h3:first-child{margin-top:0}
.v-dock{display:flex;justify-content:space-between;gap:6px;padding:8px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.vista .v-dock button{flex:1;width:auto;padding:8px 4px!important;border-radius:14px;font-size:11.5px;gap:4px}
.vista .v-dock button svg.i{width:22px;height:22px}.vista .v-dock button.on{background:var(--card2)!important}
.vista .v-nav .v-mic,.vista .v-dock .v-mic{display:grid!important;place-items:center;flex:none;padding:0!important}
.vista .v-dock .v-mic{width:58px!important;height:58px;margin:-18px 6px 0;border-radius:50%;background:var(--fg)!important;color:var(--bg)!important}
.vista .v-dock .v-mic svg.i{width:24px;height:24px}
.v-dock .v-eq{top:4px;right:calc(50% - 20px)}
/* tablet en vertical (como el diseño): el plano a la izquierda; arriba a la derecha la hora, el resumen y la
   primera columna; abajo, de lado a lado, la segunda columna, la música y la barra */
.vista.k-tablet.vert{height:100vh;overflow:hidden}
.vert .v-tab{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:12px;height:100%}
.vert .v-main,.vert .v-cols{display:contents}
.vert .v-c0{grid-row:1/4;grid-column:1;height:100%;max-width:52vw;min-height:0}
.vert .v-c0 .v-b{height:100%}.vert .v-c0 .v-plan{height:100%;width:auto;max-width:100%}
.vert .v-head{grid-row:1;grid-column:2;flex-wrap:wrap;gap:10px}.vert .v-head .v-when b{font-size:40px}
.vert .v-top{grid-row:2;grid-column:2;min-width:0}.vert .v-top .v-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.vert .v-c1{grid-row:3;grid-column:2;min-height:0}
.vert .v-c2{grid-row:4;grid-column:1/3;flex-direction:row;overflow-x:auto;overflow-y:hidden;align-items:stretch;max-height:34vh}
.vert .v-c2>.v-b,.vert .v-c2>.v-halfs{flex:1 0 260px;min-width:0;overflow:auto}
.vert .v-c2>.v-eadd{flex:0 0 160px;margin:0}
.vert .v-player{grid-row:5;grid-column:1/3}.vert .v-dock{grid-row:6;grid-column:1/3}
.vert .v-top:empty{display:none}
/* ───── tema claro (se elige en el editor: oscuro, claro o según el equipo) ───── */
.vista.light{--bg:#f2f3f5;--card:#ffffff;--card2:#eceef2;--line:rgba(22,27,33,.10);--fg:#161b21;--muted:#6a7383;--off:#d3d8e0;
  --warm:#d58a24;--warm-s:rgba(213,138,36,.14);--cool:#2b86c5;--cool-s:rgba(43,134,197,.12);--green:#2f9e63;--red:#d9534a;--red-s:rgba(217,83,74,.12)}
.vista.light .v-cam,.vista.light .v-imgc{border-color:var(--line)}
.vista.light .v-player,.vista.light .v-kpi,.vista.light .v-card{box-shadow:0 1px 2px rgba(20,25,35,.06)}
.vista.light .v-pw::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.vista.light .v-mic{background:var(--fg)!important;color:#fff!important}
html.mae-light.with-inicio,html.mae-light body.with-inicio,html.mae-light body.with-inicio .home{background:#f2f3f5}
/* ───── hojas propias ───── */
.v-sheet{position:fixed;inset:0;z-index:18;background:rgba(8,10,14,.55);display:none;align-items:flex-end;justify-content:center}
.v-sheet.show{display:flex}
.k-tablet .v-sheet{align-items:center}
.v-sin{width:100%;max-width:640px;max-height:88vh;overflow:auto;background:var(--card);border-radius:24px 24px 0 0;border-top:1px solid var(--line);padding:8px 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
.k-tablet .v-sin{max-width:460px;border-radius:24px;border:1px solid var(--line)}
.v-grab{width:38px;height:4px;border-radius:4px;background:var(--off);margin:6px auto 14px}
.v-sh{display:flex;align-items:center;gap:10px;margin-bottom:14px}.v-sh>div{flex:1}.v-sh h2{margin:0;font-size:20px}.v-sh small{display:block;color:var(--muted);font-size:12px}
.v-x{width:34px;height:34px;border-radius:50%!important;background:var(--card2)!important;display:grid!important;place-items:center}
.v-list{display:flex;flex-direction:column;gap:8px}
.v-ntf{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
.v-ntf.w{border-color:rgba(242,183,102,.45)}.v-ntf.r{border-color:rgba(240,138,124,.55)}
.v-nic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--card);color:var(--muted);flex:none}
.v-ntf.w .v-nic{background:var(--warm-s);color:var(--warm)}.v-ntf.r .v-nic{background:var(--red-s);color:var(--red)}
.v-dx{width:30px;height:30px;border-radius:50%;display:grid!important;place-items:center;color:var(--muted)}
.v-opt{display:flex!important;align-items:center;gap:12px;width:100%;padding:14px!important;border-radius:14px;background:var(--card2)!important;font-weight:600}
.v-opt.w{background:var(--warm)!important;color:#1b1408!important}.v-opt.ghost{background:none!important;border:1px solid var(--line)!important}
.v-note{color:var(--muted);font-size:12px;margin-top:12px}
.v-menu{position:fixed;inset:0;z-index:19;background:rgba(8,10,14,.55);display:none;align-items:center;justify-content:center;padding:22px}
.v-menu.show{display:flex}
.v-min{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.v-min .t{padding:16px 18px 4px;font-weight:700;font-size:16px}.v-min p{margin:0;padding:0 18px 12px;color:var(--muted);font-size:12.5px}
.v-min button{display:flex!important;align-items:center;gap:10px;width:100%;padding:14px 18px!important;border-top:1px solid var(--line)!important;font-weight:600}
.v-min button.del{color:var(--red)}
/* ───── tarjetas de la 2.16 ───── */
.v-halfs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.v-halfs>.v-b>h3:first-child{margin-top:0}
.v-big{font-size:28px!important;font-weight:600!important;letter-spacing:-.01em;line-height:1.1}.v-big small{font-size:13px;color:var(--muted);font-weight:500}
.v-wx{cursor:pointer}.v-wxi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--warm-s);color:var(--warm);flex:none}.v-wxi svg.i{width:28px;height:28px}
.v-chev{color:var(--muted);flex:none}
.v-bic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--card2);color:var(--muted);flex:none}
.v-clim.on .v-bic{background:var(--cool-s);color:var(--cool)}
.v-cset{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:12px}.v-cset b{font:600 30px/1 var(--f-mono);min-width:96px;text-align:center}
.v-cb{width:40px;height:40px;border-radius:12px!important;display:grid!important;place-items:center;background:var(--card2)!important;font-size:22px!important;font-weight:600;flex:none}
.v-cb:active{background:var(--warm)!important;color:#1b1408}
.v-list2{display:flex;flex-direction:column;gap:12px}
.v-cov{display:flex;align-items:center;gap:6px}.v-cov .v-cb{width:36px;height:36px}
.v-pos{display:block;height:3px;border-radius:3px;background:var(--off);margin-top:6px;overflow:hidden}.v-pos i{display:block;height:100%;background:var(--cool)}
.v-lt.on .v-bic{background:var(--warm-s);color:var(--warm)}
.v-bri{width:100%;margin:10px 0 0;accent-color:var(--warm);height:22px}
.v-en .v-bic{background:var(--warm-s);color:var(--warm)}
.v-spark{display:block;width:100%;height:60px;margin-top:10px}.v-spark polyline{fill:none;stroke:var(--warm);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.v-spark.none{height:20px}
.v-gauge{text-align:center;cursor:pointer}.v-gauge svg{width:100%;max-width:200px;display:block;margin:0 auto}
.v-gauge path{fill:none;stroke-width:9;stroke-linecap:round}.v-gauge .g0{stroke:var(--off)}.v-gauge .g1{stroke:var(--cool)}
.v-gauge>b{display:block;font:600 24px/1.1 var(--f-mono);margin-top:-14px}.v-gauge>b small{font-size:12px;color:var(--muted)}.v-gauge>span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.v-ppl{display:flex;flex-wrap:wrap;gap:14px}
.v-pp{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px;opacity:.6}.v-pp.home{opacity:1}
.v-av{width:46px;height:46px;border-radius:50%;background:var(--card2) center/cover;display:grid;place-items:center;font-weight:700;border:2px solid var(--off)}
.v-pp.home .v-av{border-color:var(--green)}.v-pp b{font-size:13px;font-weight:600}.v-pp span{font-size:11px;color:var(--muted)}
.v-sep{display:flex;align-items:center;gap:10px;margin:14px 2px 2px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.v-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.v-text b{display:block;font-size:15px;margin-bottom:6px}.v-text p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.v-imgc{position:relative;border-radius:18px;overflow:hidden;background:var(--card)}.v-imgc img{display:block;width:100%;height:auto}
.v-imgc span{position:absolute;left:12px;bottom:10px;padding:4px 10px;border-radius:10px;background:rgba(10,12,16,.6);font-size:12.5px;font-weight:600}
.v-imgc[data-btap]{cursor:pointer}
/* ───── modo edición (vista previa del editor) ───── */
.vista.editing .v-b [data-room],.vista.editing .v-b [data-kt],.vista.editing .v-b [data-it]{pointer-events:auto;cursor:pointer;transition:box-shadow .15s}
.vista.editing .v-b [data-room]:hover,.vista.editing .v-b [data-kt]:hover,.vista.editing .v-b [data-it]:hover{box-shadow:0 0 0 2px var(--warm)}
.vista.editing .v-sheet .v-sin{outline:2px solid var(--warm)}
.v-rer{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.v-rer.on .v-bic{background:var(--warm-s);color:var(--warm)}
.v-ret{display:flex;gap:2px;flex:none}.v-ret button{width:30px;height:30px;border-radius:9px!important;display:grid!important;place-items:center;color:var(--muted)}
.v-ret button:hover{background:var(--card2)!important;color:var(--fg)}.v-ret .i{width:16px;height:16px}
.v-rblk{margin-bottom:16px}.v-rblk h4{display:flex;align-items:center;gap:8px;margin:0 2px 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v-rblk h4 svg.i{width:15px;height:15px}
.v-rgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.v-rlist{display:flex;flex-direction:column;gap:8px}
.v-rgrid .v-rer{flex-wrap:wrap;position:relative;padding-right:8px}.v-rgrid .v-rer .v-ret{position:absolute;top:2px;right:2px;opacity:.55}.v-rgrid .v-rer:hover .v-ret{opacity:1}
.v-rgrid .v-rer .v-tx{padding-right:24px}
.v-rcam{position:relative;border-radius:16px;overflow:hidden;background:#0b0e12;aspect-ratio:16/9}.v-rcam img{width:100%;height:100%;object-fit:cover;display:block}
.v-rcn{position:absolute;left:10px;bottom:8px;font-weight:700;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.8);color:#fff}
.v-rcam .v-ret{position:absolute;top:6px;right:6px;background:rgba(10,12,16,.7);border-radius:10px}.v-rcam .v-ret button{color:#fff}
.v-rsave{display:block;width:100%;margin-top:4px;padding:13px!important;border-radius:14px;background:var(--warm)!important;color:#1b1408!important;font-weight:700!important;text-align:center!important}
.vista.editing .v-b [data-el],.vista.editing .v-b .v-ehandle,.vista.editing .v-b .v-ehandle *,.vista.editing .v-b .v-eltool,.vista.editing .v-b .v-eltool *,.vista.editing .v-b .v-eladd{pointer-events:auto}
.vista.editing .v-b [data-el]{cursor:pointer}
.vista.editing .v-b [data-el]:hover{box-shadow:0 0 0 2px rgba(242,183,102,.55)}
.vista.editing .v-b [data-elsel]{box-shadow:0 0 0 2px var(--warm)!important}
.vista.editing .v-b.elsel{outline-style:dashed}
.v-ehandle{position:absolute;z-index:4;top:-12px;left:-10px;width:26px;height:26px;border-radius:8px;display:none;place-items:center;background:var(--card2);border:1px solid var(--line);color:var(--muted);cursor:grab}
.vista.editing .v-b:hover>.v-ehandle,.vista.editing .v-b.sel>.v-ehandle{display:grid}.v-ehandle .i{width:14px;height:14px}
.vista.editing .v-b.sel .v-etool{left:22px}
.v-eltool{position:absolute;z-index:6;display:flex;gap:2px;padding:2px;border-radius:9px;background:var(--warm);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.v-eltool button{width:26px;height:24px;display:grid;place-items:center;border:0;border-radius:7px;background:none;color:#1b1408;cursor:pointer;padding:0}
.v-eltool button:hover{background:rgba(0,0,0,.14)}.v-eltool .i{width:15px;height:15px;stroke:#1b1408}
.v-eladd{display:block;width:100%;margin-top:8px;padding:9px;border-radius:12px;border:1px dashed rgba(242,183,102,.5);background:none;color:var(--warm);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:center}
/* editor como Lovelace: ✎ y ⋮ arriba a la derecha de cada tarjeta; la tarjeta entera se arrastra */
.v-ecard{position:absolute;z-index:5;top:-14px;right:-6px;display:none;gap:4px}
.vista.editing .v-b:hover>.v-ecard,.vista.editing .v-b.sel>.v-ecard{display:flex}
.vista.editing .v-b .v-ecard,.vista.editing .v-b .v-ecard *{pointer-events:auto}
.v-ecard button{width:32px;height:32px;border-radius:50%!important;display:grid!important;place-items:center;background:var(--card2)!important;border:1px solid var(--line)!important;color:var(--fg);box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer}
.v-ecard button:first-child{background:var(--warm)!important;color:#1b1408;border:0!important}.v-ecard .i{width:16px;height:16px}
/* el cartel con el tipo de tarjeta va a la derecha (al lado de ✎ y ⋮): así no tapa el título de la tarjeta */
.vista.editing .v-b .v-btag{left:auto;right:74px;max-width:calc(100% - 90px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vista.editing .v-b[draggable="true"]{cursor:grab}.vista.editing .v-b[draggable="true"]:active{cursor:grabbing}
.vista.editing .v-b.hid{opacity:.4}.vista.editing .v-b.cond .v-btag{border-style:dashed}
.vista.editing .v-b{position:relative;outline:1px dashed rgba(160,175,200,.35);outline-offset:4px;border-radius:14px;cursor:pointer;min-height:40px;margin-bottom:6px}
.vista.editing .v-b:hover{outline-color:rgba(242,183,102,.6)}
.vista.editing .v-b.sel{outline:2px solid var(--warm)}
.vista.editing .v-b *{pointer-events:none}
.v-btag{position:absolute;z-index:3;top:-9px;right:6px;padding:1px 8px;border-radius:8px;background:var(--card2);border:1px solid var(--line);font-size:10.5px;color:var(--muted)}
.vista.editing .v-b.sel .v-btag{background:var(--warm);color:#1b1408;border:0}
.vista.editing .v-player{pointer-events:none}
.v-hsp{flex:1}
/* editor: el encabezado y la barra de abajo se tocan para editarlos */
.vista.editing #v-head,.vista.editing .v-nav,.vista.editing .v-dock{cursor:pointer;outline:1px dashed transparent;outline-offset:4px;border-radius:14px}
.vista.editing #v-head:hover,.vista.editing .v-nav:hover,.vista.editing .v-dock:hover{outline-color:rgba(242,183,102,.6)}
.vista.editing #v-head.zsel,.vista.editing .v-nav.zsel,.vista.editing .v-dock.zsel{outline:2px solid var(--warm)}
.vista.editing #v-head *,.vista.editing .v-nav *,.vista.editing .v-dock *{pointer-events:none}
/* editor: zonas del plano y carteles que se arrastran */
.vista.editing .v-b .v-plan [data-zone]{pointer-events:auto;cursor:pointer}.vista.editing .v-b .v-plan .v-pin{cursor:grab;touch-action:none}
.vista.editing .v-plan .v-hit:hover{fill:rgba(242,183,102,.12)}
.v-hit.zsel{fill:rgba(242,183,102,.22)!important;stroke:var(--warm);stroke-width:4;vector-effect:non-scaling-stroke}
/* editor: las columnas de la tablet muestran su barra para recorrerlas */
.vista.editing .v-c1,.vista.editing .v-c2,.vista.editing .v-c0{scrollbar-width:thin;scrollbar-color:rgba(242,183,102,.5) transparent}
.vista.editing .v-c1::-webkit-scrollbar,.vista.editing .v-c2::-webkit-scrollbar{display:block;width:6px}
.vista.editing .v-c1::-webkit-scrollbar-thumb,.vista.editing .v-c2::-webkit-scrollbar-thumb{background:rgba(242,183,102,.5);border-radius:6px}
.vista.editing .v-b{cursor:grab}.vista.editing .v-b.dragging{opacity:.35}
.vista.editing .v-b.dropb{box-shadow:0 -4px 0 var(--warm)}.vista.editing .v-b.dropa{box-shadow:0 4px 0 var(--warm)}
.v-etool{position:absolute;z-index:4;top:-15px;left:8px;display:flex;gap:2px;padding:2px;border-radius:9px;background:var(--warm);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.vista.editing .v-b .v-etool,.vista.editing .v-b .v-etool *{pointer-events:auto}
.v-etool button{width:26px;height:24px;display:grid;place-items:center;border:0;border-radius:7px;background:none;color:#1b1408;cursor:pointer;padding:0}
.v-etool button:hover{background:rgba(0,0,0,.14)}.v-etool .i{width:15px;height:15px;stroke:#1b1408}
.v-eadd{display:block;width:100%;margin:4px 0 10px;padding:12px;border-radius:14px;border:1px dashed rgba(160,175,200,.35);background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.v-eadd:hover{border-color:var(--warm);color:var(--warm)}
.vista.editing .v-c0,.vista.editing .v-c1,.vista.editing .v-c2{min-height:120px}
.vista.editing [data-ri]{cursor:grab}.vista.editing [data-ri].dragging{opacity:.35}.vista.editing [data-ri].dropb{box-shadow:0 -3px 0 var(--warm)}
html.mae-ed.mae-light,html.mae-ed.mae-light body{background:#f2f3f5!important}
.v-allb.off{display:none!important}.vista.editing .v-allb.off{display:flex!important;opacity:.35}
.vista.editing #v-allb{cursor:pointer;outline:1px dashed transparent;outline-offset:3px}.vista.editing #v-allb:hover{outline-color:rgba(242,183,102,.6)}.vista.editing #v-allb.zsel{outline:2px solid var(--warm)}
.vista.editing #v-allb *{pointer-events:none}
/* cámara en video: nada encima de la imagen; los botones del portero van debajo */
.v-cam.clean::after{display:none}
.v-cbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:10px}
.v-cbar .v-cbtn{background:var(--card2)!important;color:var(--fg)}
/* editor: lo de adentro de una tarjeta se arrastra de a uno */
.vista.editing .v-b [data-el][draggable="true"]{cursor:grab}.vista.editing [data-el].dragging{opacity:.35}
.vista.editing [data-el].dropb{box-shadow:0 0 0 2px var(--warm),-4px 0 0 var(--warm)!important}
/* ───── fondo propio del diseño (color, degradé o imagen): queda fijo detrás de todo ───── */
.vista.has-bg{background:transparent;isolation:isolate}
.vista.has-bg::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--v-bgx);pointer-events:none}
.vista.has-bg .v-card,.vista.has-bg .v-kpi,.vista.has-bg .v-room,.vista.has-bg .v-chip,.vista.has-bg .v-sq{box-shadow:0 6px 24px rgba(0,0,0,.18)}
/* ───── estilo «tipo Apple»: letra del sistema, tarjetas muy redondeadas sin borde, títulos grandes ───── */
.vista.st-apple{--f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,system-ui,sans-serif;--f-mono:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",Roboto,system-ui,sans-serif;
  --bg:#000;--card:#1c1c1e;--card2:#2c2c2e;--line:rgba(255,255,255,.04);--fg:#fff;--muted:#8e8e93;--off:#3a3a3c;
  --warm:#ff9f0a;--warm-s:rgba(255,159,10,.16);--cool:#0a84ff;--cool-s:rgba(10,132,255,.16);--green:#30d158;--red:#ff453a;--red-s:rgba(255,69,58,.16);letter-spacing:-.01em}
.vista.st-apple.light{--bg:#f2f2f7;--card:#fff;--card2:#e9e9ee;--line:rgba(0,0,0,.04);--fg:#000;--muted:#6e6e73;--off:#d1d1d6;
  --warm:#ff9500;--warm-s:rgba(255,149,0,.14);--cool:#007aff;--cool-s:rgba(0,122,255,.12);--green:#34c759;--red:#ff3b30;--red-s:rgba(255,59,48,.12)}
.vista.st-apple h3{text-transform:none;letter-spacing:-.02em;font-size:21px;font-weight:700;color:var(--fg);margin:26px 4px 10px}
.vista.st-apple .v-card h3{font-size:17px;margin:0 0 10px}
.vista.st-apple .v-when b{font-weight:700;letter-spacing:-.03em;font-size:34px}
.vista.st-apple :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-imgc,.v-cam,.v-scene,.v-btn,.v-alarm,.v-min){border-radius:22px!important;border-color:transparent!important}
.vista.st-apple :is(.v-chip,.v-sq){border-radius:16px!important;border-color:transparent!important}
.vista.st-apple.light :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-scene,.v-chip,.v-sq){box-shadow:0 1px 3px rgba(0,0,0,.05)}
.vista.st-apple .v-kpi .v{font-size:18px;font-weight:700}
.vista.st-apple :is(.v-dock,.v-nav){border-radius:26px!important}
/* ───── estilo «cristal» (burbujas): tarjetas translúcidas y bien redondas sobre un fondo de color ───── */
.vista.st-cristal{--f-display:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,sans-serif;
  --bg:#0f1419;--card:rgba(255,255,255,.09);--card2:rgba(255,255,255,.14);--line:rgba(255,255,255,.16);--fg:#fff;--muted:rgba(255,255,255,.66);--off:rgba(255,255,255,.22);
  --warm:#ffc777;--warm-s:rgba(255,199,119,.2);--cool:#8fd3ff;--cool-s:rgba(143,211,255,.2);--green:#8cf0b6;--red:#ff9a8a;--red-s:rgba(255,154,138,.2)}
.vista.st-cristal:not(.has-bg){background:radial-gradient(90% 70% at 15% 10%,#2b5876 0,transparent 60%),radial-gradient(80% 70% at 90% 30%,#4e4376 0,transparent 60%),radial-gradient(90% 80% at 50% 100%,#1d6b5f 0,transparent 60%),#0f1419;background-attachment:fixed}
.vista.st-cristal.light{--card:rgba(255,255,255,.55);--card2:rgba(255,255,255,.7);--line:rgba(255,255,255,.75);--fg:#14202e;--muted:rgba(20,32,46,.62);--off:rgba(20,32,46,.18);
  --warm:#c9781a;--warm-s:rgba(201,120,26,.16);--cool:#1f7fc0;--cool-s:rgba(31,127,192,.14);--green:#23915a;--red:#d24b40;--red-s:rgba(210,75,64,.14)}
.vista.st-cristal.light:not(.has-bg){background:linear-gradient(170deg,#eef3fa 0%,#dbe6f4 55%,#c9d8ee 100%)}
.vista.st-cristal :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-imgc,.v-cam,.v-scene,.v-btn,.v-alarm,.v-chip,.v-sq,.v-dock,.v-nav){border-radius:26px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 30px rgba(0,0,0,.18)}
.vista.st-cristal :is(.v-chip,.v-sq){border-radius:18px!important}
.vista.st-cristal h3{letter-spacing:.06em;color:var(--muted)}
.vista.st-cristal .v-sin,.vista.st-cristal .v-min{background:rgba(24,30,40,.92)}
.vista.st-cristal.light .v-sin,.vista.st-cristal.light .v-min{background:rgba(245,248,252,.95)}
/* el desenfoque real sólo en pantallas con mouse: en celulares y tablets traba el scroll */
@media (hover:hover) and (pointer:fine){
  .vista.st-cristal :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-dock,.v-nav){-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
}

/* ───── tarjetas nuevas (2.23): termostato grande, aberturas, agenda, riego y pilas ───── */
.v-dial{text-align:center}
.v-dring{position:relative;width:min(220px,80%);margin:4px auto 0;aspect-ratio:1}
.v-dring svg{width:100%;height:100%;transform:rotate(135deg)}
.v-dring circle{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:75 100}
.v-dring .d0{stroke:var(--off)}.v-dring .d1{stroke:var(--muted);transition:stroke-dasharray .3s}
.v-dial.m-cool .d1,.v-dial.m-dry .d1{stroke:var(--cool)}.v-dial.m-heat .d1{stroke:var(--warm)}.v-dial.m-heat_cool .d1,.v-dial.m-auto .d1,.v-dial.m-fan_only .d1{stroke:var(--green)}
.v-dmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.v-dmid small{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.v-dmid b{font:500 54px/1 var(--f-mono);letter-spacing:-.04em}.v-dmid b i{font-style:normal;font-size:24px;vertical-align:top;margin-left:2px;color:var(--muted)}
.v-dmid span{font-size:12.5px;color:var(--muted);margin-top:4px}
.v-dbar{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:-6px}
.v-dbar .v-cb{width:52px;height:52px;border-radius:50%!important;font-size:26px}
.v-open.ok .v-bic,.v-bat.ok .v-bic{background:rgba(127,214,164,.15);color:var(--green)}
.v-open.warn .v-bic,.v-bat.warn .v-bic{background:var(--red-s);color:var(--red)}
.v-open .v-row{cursor:pointer}
.v-orow{display:flex;align-items:center;gap:10px;padding:8px 2px;cursor:pointer;border-top:1px solid var(--line)}
.v-orow>i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}.v-orow.o>i{background:var(--red)}
.v-orow .v-tx span{color:var(--muted);font-size:12px}
.v-card .v-list2{margin-top:6px}
.v-agd{cursor:pointer}
.v-arow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}.v-arow:first-child{border-top:0}
.v-arow.now .v-bic{background:var(--warm-s);color:var(--warm)}.v-arow .v-tx span{color:var(--muted);font-size:12px}
.v-isub{display:flex;align-items:center;gap:6px;margin:-4px 0 6px;color:var(--muted);font-size:12.5px}.v-isub svg.i{width:15px;height:15px;color:var(--cool)}

/* tamaño del plano (tarjeta Plano → Tamaño): chico, mediano, normal o grande */
.v-c0:has(.v-plan.sz-s),.v-c0:has(.v-plan.sz-m){justify-content:center}
.v-c0 .v-plan.sz-s{height:62%}.v-c0 .v-plan.sz-m{height:80%}
.v-c0:has(.v-plan.sz-xl){max-width:60%}.vert .v-c0:has(.v-plan.sz-xl){max-width:64vw}
.k-phone .v-plan.sz-s{width:64%;margin:0 auto}.k-phone .v-plan.sz-m{width:82%;margin:0 auto}

/* ───── estilo «Vision» (como Apple Vision Pro): vidrio esmerilado cálido, números grandes y finos, acento lima ───── */
.vista.st-vision{--f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,system-ui,sans-serif;--f-mono:var(--f-display);
  --bg:#6f5847;--card:rgba(255,255,255,.16);--card2:rgba(255,255,255,.24);--line:rgba(255,255,255,.22);--fg:#fff;--muted:rgba(255,255,255,.72);--off:rgba(255,255,255,.28);
  --warm:#d4f05a;--warm-s:rgba(212,240,90,.22);--cool:#cfe8ff;--cool-s:rgba(207,232,255,.2);--green:#d4f05a;--red:#ffb4a6;--red-s:rgba(255,180,166,.22);letter-spacing:-.01em}
.vista.st-vision:not(.has-bg){background:radial-gradient(80% 60% at 20% 20%,#a8876a 0,transparent 60%),radial-gradient(70% 60% at 85% 80%,#6f5643 0,transparent 60%),linear-gradient(160deg,#8d735d,#5a4636);background-attachment:fixed}
.vista.st-vision.light{--card:rgba(255,255,255,.55);--card2:rgba(255,255,255,.7);--line:rgba(255,255,255,.8);--fg:#2a2420;--muted:rgba(42,36,32,.62);--off:rgba(42,36,32,.18);--warm:#7aa316;--warm-s:rgba(122,163,22,.18);--green:#5f8a0e}
.vista.st-vision.light:not(.has-bg){background:linear-gradient(170deg,#efe7dd,#d9cbbb)}
.vista.st-vision :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-imgc,.v-cam,.v-scene,.v-btn,.v-alarm,.v-chip,.v-sq,.v-dock,.v-nav){border-radius:28px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 30px rgba(0,0,0,.14)}
.vista.st-vision :is(.v-chip,.v-sq){border-radius:20px!important}
.vista.st-vision h3{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--fg)}
.vista.st-vision .v-when b,.vista.st-vision .v-dmid b,.vista.st-vision .v-kpi .v{font-weight:300}
.vista.st-vision .v-pw.on{background:var(--warm)!important}
.vista.st-vision .v-sin,.vista.st-vision .v-min{background:rgba(70,56,46,.94)}.vista.st-vision.light .v-sin,.vista.st-vision.light .v-min{background:rgba(245,240,234,.96)}
/* ───── estilo «Control4»: oscuro con color de fondo, tarjetas sólidas, acento azul ───── */
.vista.st-control4{--f-display:"Roboto","Segoe UI",system-ui,sans-serif;--f-mono:var(--f-display);
  --bg:#141522;--card:rgba(32,34,46,.88);--card2:rgba(48,51,66,.92);--line:rgba(255,255,255,.07);--fg:#f2f3f7;--muted:#9aa0b4;--off:#3b3f52;
  --warm:#4c9bff;--warm-s:rgba(76,155,255,.18);--cool:#4c9bff;--cool-s:rgba(76,155,255,.18);--green:#3ddc84;--red:#ff5d6c;--red-s:rgba(255,93,108,.18)}
.vista.st-control4:not(.has-bg){background:radial-gradient(90% 70% at 85% 10%,#6b2c4f 0,transparent 60%),radial-gradient(80% 70% at 10% 90%,#2b2e6b 0,transparent 60%),#141522;background-attachment:fixed}
.vista.st-control4.light{--bg:#eef0f6;--card:#fff;--card2:#e8ebf3;--line:rgba(0,0,0,.06);--fg:#14161f;--muted:#5f6577;--off:#cfd4e0}
.vista.st-control4.light:not(.has-bg){background:linear-gradient(170deg,#eef0f6,#dfe3ee)}
.vista.st-control4 :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-imgc,.v-cam,.v-scene,.v-btn,.v-alarm,.v-min){border-radius:14px!important}
.vista.st-control4 :is(.v-chip,.v-sq){border-radius:999px!important}
.vista.st-control4 .v-kpi{border-left:3px solid var(--warm)!important}
.vista.st-control4 h3{text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--fg)}
.vista.st-control4 .v-art{border-radius:10px!important}
/* ───── estilo «Savant»: negro, minimalista, títulos finos en mayúsculas y acento dorado ───── */
.vista.st-savant{--f-display:"Helvetica Neue","Segoe UI Light","Segoe UI",system-ui,sans-serif;--f-mono:var(--f-display);
  --bg:#050505;--card:#111111;--card2:#1b1b1b;--line:rgba(255,255,255,.06);--fg:#f4f1ea;--muted:#8b877e;--off:#2a2a2a;
  --warm:#c9a96e;--warm-s:rgba(201,169,110,.16);--cool:#c9a96e;--cool-s:rgba(201,169,110,.14);--green:#c9a96e;--red:#e0796a;--red-s:rgba(224,121,106,.16)}
.vista.st-savant.light{--bg:#f6f4ef;--card:#fff;--card2:#efece5;--line:rgba(0,0,0,.06);--fg:#141310;--muted:#7a756b;--off:#dcd7cc;--warm:#a7843f;--warm-s:rgba(167,132,63,.14)}
.vista.st-savant :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-imgc,.v-cam,.v-scene,.v-btn,.v-alarm,.v-min){border-radius:6px!important}
.vista.st-savant :is(.v-chip,.v-sq){border-radius:6px!important}
.vista.st-savant h3{font-weight:300;letter-spacing:.28em;font-size:10.5px;color:var(--muted)}
.vista.st-savant .v-when b,.vista.st-savant .v-dmid b,.vista.st-savant .v-kpi .v,.vista.st-savant .v-tile b,.vista.st-savant .v-room b{font-weight:300}
.vista.st-savant .v-tile{min-height:120px;justify-content:flex-end}
.vista.st-savant .v-pw.on{background:var(--warm)!important}
/* el desenfoque real sólo en pantallas con mouse (en celulares y tablets traba el scroll) */
@media (hover:hover) and (pointer:fine){
  .vista.st-vision :is(.v-card,.v-kpi,.v-room,.v-tile,.v-player,.v-dock,.v-nav){-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%)}
}