/* Painel de parede do Nox — leve e compatível com Safari 10 (iPad 4).
   Sem flex gap, sem backdrop-filter, sem <dialog>. Cores reaproveitadas do app. */
:root{
  --bg:#07070c; --bg2:#0d0e16; --card:#12131d; --line:#242636;
  --text:#eef0f6; --muted:#9aa1b6; --lime:#b8ff3a; --violet:#7c5cff; --cyan:#26d0ff; --red:#ff5c6c;
  --verde:#4dffb8;
  --font:system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;width:100%;overflow:hidden}
body{
  background:radial-gradient(1200px 800px at 70% -10%,#141026,transparent),
             radial-gradient(circle at 28% 20%,rgba(28,120,160,.12),transparent 42%),
             var(--bg);
  color:var(--text);font-family:var(--font);
  -webkit-user-select:none;user-select:none;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}

/* ===== login ===== */
.login{position:fixed;top:0;left:0;right:0;bottom:0;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:340px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 24px;text-align:center}
.login-card h1{margin:0 0 6px;font-size:22px}
.login-sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.pin{width:100%;text-align:center;font-size:26px;letter-spacing:.4em;padding:14px;background:#0a0b12;border:1px solid var(--line);border-radius:12px;color:var(--text);margin-bottom:14px}
.pin:focus{outline:none;border-color:var(--violet)}
.login-erro{color:var(--red);font-size:13px;min-height:18px;margin-top:12px}

.btn{display:inline-block;width:100%;padding:14px 16px;border:none;border-radius:12px;background:var(--lime);color:#0a1206;font-weight:700;font-size:15px;letter-spacing:.05em}
.btn:active{opacity:.85}
.btn.grande{font-size:20px;padding:18px}
.btn[disabled]{opacity:.6}
.iconbtn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:6px 12px;font-size:20px;line-height:1}

/* ===== painel: pager horizontal de 2 páginas ===== */
.painel{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden}
/* trilho com 2 páginas lado a lado (200% de largura); desliza no eixo X */
.pager-track{position:absolute;top:0;left:0;bottom:0;width:200%;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:-webkit-transform .28s ease;transition:transform .28s ease}
.pager-track.arrastando{-webkit-transition:none;transition:none}
/* float+50% (de um trilho de 200%) = 100vw por página, sem depender de flex do trilho */
.pager-page{float:left;width:50%;height:100%;display:-webkit-box;-webkit-box-orient:vertical;display:flex;flex-direction:column;padding:10px 12px 26px}

/* bolinhas de navegação (alvo de toque grande pra painel de parede) */
.pager-dots{position:absolute;left:0;right:0;bottom:3px;text-align:center;z-index:40}
.pgdot{display:inline-block;background:none;border:none;padding:8px 6px;line-height:0;vertical-align:middle}
.pgdot i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3a3d50;-webkit-transition:all .2s ease;transition:all .2s ease}
.pgdot.ativo i{background:var(--lime);width:22px;border-radius:5px;box-shadow:0 0 6px rgba(184,255,58,.6)}

.pl-top{display:-webkit-box;-webkit-box-pack:justify;-webkit-box-align:center;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pl-top-titulo strong{font-size:16px;display:block}
.pl-top-titulo span{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.pl-top-botoes{white-space:nowrap}
.topbtn{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:10px;width:46px;height:44px;font-size:18px;margin-left:8px;vertical-align:middle}
.topbtn:active{background:#1b1d2b}
#plantaGirar[aria-pressed="true"]{border-color:var(--violet);color:var(--violet)}

.planta-wrap{position:relative;-webkit-box-flex:1;flex:1;min-height:0;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;display:flex;align-items:center;justify-content:center;overflow:hidden}
.planta-svg{width:100%;height:100%;max-height:100%;overflow:visible;display:block}

/* botões de zoom da planta (fallback garantido caso a pinça não pegue no Safari 10.3) */
.pl-zoom{position:absolute;right:8px;bottom:8px;z-index:20;text-align:center}
.plzbtn{display:block;width:46px;height:46px;margin-top:8px;border:1px solid rgba(140,175,190,.35);border-radius:12px;background:rgba(18,19,29,.45);color:rgba(238,240,246,.9);font-size:22px;line-height:1;padding:0}
.plzbtn:active{background:rgba(27,29,43,.75)}
.plzbtn.ativo{border-color:var(--lime);color:var(--lime)}

.pl-piso{fill:#152a35;stroke:none;filter:drop-shadow(0 12px 20px rgba(0,0,0,.5))}
.pl-paredes path{fill:none;stroke:#8bb4c0;stroke-width:5;stroke-linecap:square;stroke-linejoin:round;opacity:.8}
.pl-moveis{pointer-events:none}
.pl-moveis rect,.pl-moveis path,.pl-moveis ellipse{fill:#29404c;stroke:#6a8b95;stroke-width:1.5;stroke-opacity:.55}
.pl-moveis .pl-tapete{fill:#577482;fill-opacity:.14;stroke-opacity:.13}
.pl-moveis .pl-cama{fill:#557782;fill-opacity:.5}
.pl-moveis .pl-tela{fill:#123541;stroke:#6ab8c6;stroke-opacity:.6}
.pl-moveis .pl-planta{fill:#396c5c;stroke:#75a18c;stroke-width:2;opacity:.6}
.pl-moveis circle:not(.pl-planta){fill:#142f3b;stroke:#6a8b95;stroke-width:1.5}
.pl-moveis .pl-xbox rect{fill:#152722;stroke:#67977a}
.pl-moveis .pl-ps5 path:not(.pl-tela){fill:#b4c7d0;stroke:#d7e4e9}
.pl-portas path{fill:none;stroke:#7899a4;stroke-width:1;stroke-opacity:.45}
.pl-janelas path{fill:none;stroke:#7cd4e3;stroke-width:3;stroke-opacity:.8}
.pl-nomes text{fill:#c0d4da;text-anchor:middle;font:600 12px Consolas,monospace;letter-spacing:1.7px;paint-order:stroke;stroke:#142632;stroke-width:4;stroke-linejoin:round;opacity:.85;pointer-events:none}
/* Ventiladores de teto: os nós vêm de <use> (shadow tree), então o seletor
   PRECISA ser simples/sem escopo pra pegar o conteúdo clonado no Safari 10 —
   com escopo (.pl-ventiladores .pl-fan-base) eles renderizavam pretos no iPad. */
.pl-fan-base{fill:#102530;fill-opacity:.72;stroke:#8cbbc8;stroke-opacity:.25;stroke-width:1;stroke-dasharray:2 4}
.pl-fan-pa{fill:#8faeb9;fill-opacity:.65;stroke:#c3dce3;stroke-opacity:.5;stroke-width:1}
.pl-fan-miolo{fill:#284a5b;stroke:#b7d7e0;stroke-width:1.5}
.pl-ventilador-torre ellipse,.pl-ventilador-torre rect,.pl-ventilador-torre path,.pl-ventilador-torre circle{fill:#29404c;stroke:#6a8b95;stroke-opacity:.55}

/* pontos dos dispositivos */
.pl-ponto{cursor:pointer}
.pl-toque{fill:transparent}
.pl-halo{fill:rgba(120,150,170,.12);stroke:rgba(140,175,190,.45);stroke-width:2}
.pl-luz{fill:#4a5a68}
.pl-icone-svg{color:rgba(214,240,250,.88);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pl-ponto.on .pl-halo{fill:rgba(77,255,184,.16);stroke:rgba(77,255,184,.7)}
.pl-ponto.on .pl-luz{fill:#4dffb8;filter:drop-shadow(0 0 8px #4dffb8);-webkit-animation:plPulsa 2.2s ease-in-out infinite;animation:plPulsa 2.2s ease-in-out infinite}
.pl-ponto.on .pl-icone-svg{color:#032018}
.pl-ponto.sem-aparelho .pl-halo{stroke-dasharray:4 4}
.pl-ponto.sel .pl-halo{stroke:#fff;stroke-width:3}
@-webkit-keyframes plPulsa{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes plPulsa{0%,100%{opacity:1}50%{opacity:.55}}

.pl-legenda{display:-webkit-box;-webkit-box-align:center;display:flex;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.pl-legenda .lg{margin-right:16px;display:-webkit-inline-box;-webkit-box-align:center;display:inline-flex;align-items:center}
.pl-legenda .lg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:#4a5a68}
.pl-legenda .lg.on i{background:var(--verde);box-shadow:0 0 6px var(--verde)}
.pl-legenda .dica{color:#6f7690}

/* ===== popup central ===== */
.popup-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(4,5,10,.72);display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
.popup-caixa{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.popup-topo{display:-webkit-box;-webkit-box-pack:justify;-webkit-box-align:start;display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.popup-tit strong{font-size:19px;display:block;margin-bottom:4px}
.popup-tit span{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.popup-acoes{text-align:center}
.popup-estado{margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.popup-estado.on{color:var(--verde)}
.popup-reset{margin-top:10px;font-size:14px;padding:11px 16px;background:transparent;border:1px solid var(--line);color:var(--muted)}
.popup-reset.hidden{display:none}
/* Treinos (card na central + overlay da imagem) */
.ct-treinos{display:flex;gap:8px}
.ct-treino-btn{flex:1;padding:12px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--txt,#e8f4f7);font-size:14px}
.ct-treino-btn:active{opacity:.8}
.treino-caixa{max-width:560px}
.treino-corpo{max-height:70vh;overflow:auto;margin-top:6px}
.treino-lista{margin:0 0 12px;padding-left:18px;line-height:1.7;color:var(--txt,#e8f4f7)}
.treino-img{width:100%;border-radius:12px;display:block;margin-top:4px}
/* Finanças (resumo) */
.fin-dest span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fin-dest b{display:block;font-size:30px;margin:2px 0 10px}
.fin-dest b.bom{color:var(--verde)}
.fin-dest b.ruim{color:#ff8a8a}
.fin-lin div{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.fin-lin b{margin-left:10px;text-align:right}
.fin-t{margin:14px 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fin-erro{color:#ff8a8a;margin:0 0 8px}
/* Protetor de tela */
.pt{position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;background:#000;overflow:hidden}
.pt.hidden{display:none}
.pt-img{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#000;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:0}
.pt-img.vis{opacity:1}
.tr-fade .pt-img{-webkit-transition:opacity 1.6s ease;transition:opacity 1.6s ease}
.tr-corte .pt-img{-webkit-transition:none;transition:none}
.tr-deslizar .pt-img{opacity:1;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 1.1s ease;transition:transform 1.1s ease}
.tr-deslizar .pt-img.vis{-webkit-transform:translateX(0);transform:translateX(0);z-index:2}
.tr-deslizar .pt-img.sai{-webkit-transform:translateX(-100%);transform:translateX(-100%);z-index:1}
.tr-zoom .pt-img{-webkit-transition:opacity 1.8s ease;transition:opacity 1.8s ease}
.tr-zoom .pt-img.vis{-webkit-animation:ptKen 14s ease-out forwards;animation:ptKen 14s ease-out forwards}
@-webkit-keyframes ptKen{from{-webkit-transform:scale(1)}to{-webkit-transform:scale(1.12)}}
@keyframes ptKen{from{transform:scale(1)}to{transform:scale(1.12)}}
.pt-hora{position:absolute;right:28px;bottom:24px;text-align:right;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8);z-index:5}
.pt-hora b{display:block;font-size:64px;font-weight:300;line-height:1}
.pt-hora span{display:block;font-size:18px;opacity:.85;margin-top:4px}
/* sliders de brilho/temperatura da lâmpada (ES5/WebKit iPad) */
.popup-sliders{margin-top:18px;text-align:left}
.popup-sliders.hidden{display:none}
.popup-sl{margin-top:14px}
.popup-sl-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.popup-sl-cab span{font-size:14px;color:var(--txt,#e8f4f7)}
.popup-sl-cab b{font-size:12px;color:var(--verde);letter-spacing:.04em;text-transform:lowercase}
.popup-sl-leg{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.psl{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0}
.psl::-webkit-slider-runnable-track{height:12px;border-radius:8px}
.psl-brilho::-webkit-slider-runnable-track{background:-webkit-linear-gradient(left,#2a2f36,#ffd680)}
.psl-temp::-webkit-slider-runnable-track{background:-webkit-linear-gradient(left,#ffab3d,#fff)}
.psl::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-7px;border-radius:50%;background:#fff;border:2px solid var(--verde)}

/* loaderzinho no botão */
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(10,18,6,.35);border-top-color:#0a1206;border-radius:50%;vertical-align:-3px;margin-right:8px;-webkit-animation:sp .7s linear infinite;animation:sp .7s linear infinite}
@-webkit-keyframes sp{to{-webkit-transform:rotate(360deg)}}
@keyframes sp{to{transform:rotate(360deg)}}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#1b1d2b;border:1px solid var(--line);color:var(--text);padding:12px 18px;border-radius:12px;font-size:14px;z-index:60;max-width:80%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ===== tela CENTRAL (cômodos com botões) ===== */
.ct-scroll{-webkit-box-flex:1;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}
.ct-vazio{color:var(--muted);font-size:14px;text-align:center;padding:40px 10px}
.grupo-ct{margin-bottom:18px}
.grupo-ct-cab{cursor:pointer;-webkit-user-select:none;user-select:none}
.grupo-ct-seta{color:rgba(126,200,216,.55);font-style:normal;font-size:10px;margin-right:8px;line-height:1}
.grupo-ct-cab{display:-webkit-box;-webkit-box-pack:justify;-webkit-box-align:center;display:flex;align-items:center;justify-content:space-between;padding:0 2px 8px;border-bottom:1px solid rgba(32,220,255,.12);margin-bottom:10px}
.grupo-ct-nome{color:#cfeef7;font:600 12px Consolas,monospace;letter-spacing:.16em;text-transform:uppercase}
.grupo-ct-cont{color:rgba(126,200,216,.5);font:normal 10px Consolas,monospace;font-style:normal;letter-spacing:.08em;white-space:nowrap}
.grupo-ct-cont.tem{color:var(--verde)}

/* grade de botões: 1 coluna (bloco simples e robusto no Safari velho) */
.grupo-ct-grade{display:block}
.ct-btn{position:relative;display:-webkit-box;-webkit-box-align:center;display:flex;align-items:center;width:100%;min-height:68px;margin:0 0 10px;padding:12px 44px 12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,rgba(10,18,30,.85),rgba(12,13,24,.8));color:var(--text);text-align:left;font-family:inherit}
.ct-btn:active{background:#1b1d2b}
.ct-btn-icone{-webkit-box-flex:0;flex:none;width:40px;height:40px;margin-right:13px;border-radius:11px;background:#0a0b12;border:1px solid var(--line);color:#93b6c6;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;display:flex;align-items:center;justify-content:center}
.ct-ico-svg{width:22px;height:22px;display:block}
.ct-btn-texto{min-width:0;-webkit-box-flex:1;flex:1;display:-webkit-box;-webkit-box-orient:vertical;display:flex;flex-direction:column}
.ct-btn-nome{font-size:15px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-btn-est{margin-top:3px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* aceso = verde */
.ct-btn.on{border-color:rgba(77,255,184,.55);background:rgba(77,255,184,.1)}
.ct-btn.on .ct-btn-icone{background:var(--verde);border-color:var(--verde);color:#032018;box-shadow:0 0 10px rgba(77,255,184,.5)}
.ct-btn.on .ct-btn-est{color:var(--verde)}
.ct-btn.sem-aparelho .ct-btn-icone{border-style:dashed}
.ct-btn[disabled]{opacity:.7}
.ct-btn.carregando{opacity:.85}

/* 2 colunas em telas largas (iPad em paisagem): sem margin negativa, sem overflow */
@media (min-width:640px){
  .grupo-ct-grade{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;display:flex;flex-wrap:wrap;-webkit-box-pack:justify;justify-content:space-between}
  .ct-btn{width:48.7%}
}

/* spinner do botão da central */
.ct-spin{position:absolute;top:50%;right:14px;width:16px;height:16px;margin-top:-8px;border:2px solid rgba(154,161,182,.35);border-top-color:var(--text);border-radius:50%;-webkit-animation:sp .7s linear infinite;animation:sp .7s linear infinite}

/* ---- cartão base + cabeçalhos de seção (vibe do app oficial: borda ciano, cantos arredondados) ---- */
.ct-card{position:relative;background:linear-gradient(145deg,rgba(6,20,32,.72),rgba(8,10,20,.66));border:1px solid rgba(32,220,255,.18);border-right:2px solid rgba(38,208,255,.4);border-radius:16px;padding:16px;margin-bottom:20px}
.ct-sec-cab{display:-webkit-box;-webkit-box-align:center;display:flex;align-items:center;margin:0 2px 12px;padding-bottom:9px;border-bottom:1px solid rgba(32,220,255,.12)}
.ct-sec-num{-webkit-box-flex:0;flex:none;color:var(--cyan);font:700 11px Consolas,monospace;letter-spacing:.1em;margin-right:9px;opacity:.85}
.ct-sec-tit{color:#cfeef7;font:600 12px Consolas,monospace;letter-spacing:.2em;text-transform:uppercase}
.ct-sec-info{margin-left:auto;color:rgba(126,200,216,.55);font:normal 10px Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-left:8px}

/* ---- relógio + data (hora em destaque grande) ---- */
.ct-relogio{text-align:center;padding:14px 0 20px}
.ct-hora{font-size:88px;font-weight:800;line-height:.92;letter-spacing:.01em;text-shadow:0 0 30px rgba(38,208,255,.28)}
.ct-data{margin-top:10px;font:600 12px Consolas,monospace;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
@media (max-width:400px){.ct-hora{font-size:72px}}

/* ---- previsão do tempo (card mais alto, foto respira mais) ---- */
.ct-clima{min-height:212px;padding:20px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:justify;display:flex;flex-direction:column;justify-content:space-between}
.ct-clima-cab{display:-webkit-box;-webkit-box-pack:justify;-webkit-box-align:center;display:flex;align-items:center;justify-content:space-between}
.ct-clima-local{font:600 11px Consolas,monospace;letter-spacing:.16em;color:#cfeef7;text-transform:uppercase}
.ct-clima-icone{font-size:32px}
.ct-clima-linha{display:-webkit-box;-webkit-box-align:center;display:flex;align-items:center;margin:14px 0}
.ct-clima-temp{font-size:60px;font-weight:800;line-height:1;margin-right:16px;text-shadow:0 0 24px rgba(0,0,0,.55)}
.ct-clima-desc{font:600 12px Consolas,monospace;letter-spacing:.1em;color:var(--cyan);text-transform:uppercase}
.ct-clima-grade{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;display:flex;flex-wrap:wrap;border-top:1px solid rgba(32,220,255,.18);padding-top:14px}
.ct-mini{width:33.33%;padding:7px 2px;text-align:center}
.ct-mini span{display:block;font:10px Consolas,monospace;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.ct-mini b{display:block;margin-top:4px;font-size:16px;color:var(--text)}

/* ---- cenas (lista de cards expansíveis: ▶ executa, corpo abre as ações) ---- */
.ct-cenas{display:block;margin-bottom:16px}
.ct-cena{margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,rgba(14,12,28,.9),rgba(12,13,24,.82));color:var(--text);overflow:hidden}
.ct-cena-cab{display:-webkit-box;-webkit-box-align:center;display:flex;align-items:center;padding:11px 12px;cursor:pointer;-webkit-user-select:none;user-select:none}
.ct-cena-cab:active{background:#1b1d2b}
.ct-cena-play{-webkit-box-flex:0;flex:none;width:34px;height:34px;margin-right:11px;border:none;border-radius:9px;background:var(--violet);color:#fff;font-size:13px;font-style:normal;line-height:34px;text-align:center;padding:0}
.ct-cena-play:active{opacity:.8}
.ct-cena-nome{-webkit-box-flex:1;flex:1;min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-cena-cont{color:rgba(126,200,216,.5);font:normal 10px Consolas,monospace;font-style:normal;letter-spacing:.06em;white-space:nowrap;margin:0 10px}
.ct-cena-seta{-webkit-box-flex:0;flex:none;color:rgba(126,200,216,.6);font-style:normal;font-size:11px;line-height:1}
.ct-cena-det{border-top:1px solid rgba(32,220,255,.12);padding:6px 12px 10px}
.ct-cena-vazia{color:var(--muted);font-size:12px;padding:8px 0}
.ct-cena-acao{display:-webkit-box;-webkit-box-pack:justify;-webkit-box-align:center;display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ct-cena-dev{min-width:0;font-size:13px;color:#dfe6f2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px}
.ct-cena-cmd{-webkit-box-flex:0;flex:none;font:11px Consolas,monospace;letter-spacing:.04em;color:var(--cyan);text-transform:uppercase;white-space:nowrap}
/* mini-spinner dentro do botão ▶ enquanto executa */
.ct-spin-mini{display:inline-block;width:14px;height:14px;vertical-align:-2px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;-webkit-animation:sp .7s linear infinite;animation:sp .7s linear infinite}

/* ---- próximos eventos ---- */
.ct-eventos{margin-bottom:16px}
.ct-ev{display:-webkit-box;-webkit-box-align:center;display:flex;align-items:center;padding:11px 14px;margin-bottom:9px;border:1px solid var(--line);border-left:2px solid rgba(184,255,58,.5);border-radius:12px;background:linear-gradient(135deg,rgba(8,16,26,.82),rgba(10,11,20,.78))}
.ct-ev-quando{-webkit-box-flex:0;flex:none;width:46px;text-align:center;margin-right:12px}
.ct-ev-quando b{display:block;font-size:20px;line-height:1;color:var(--lime)}
.ct-ev-quando span{display:block;margin-top:2px;font:10px Consolas,monospace;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.ct-ev-copy{min-width:0;-webkit-box-flex:1;flex:1}
.ct-ev-del{-webkit-box-flex:0;flex:none;margin-left:10px;width:34px;height:34px;border:1px solid var(--line);background:rgba(52,8,17,.3);color:rgba(255,140,150,.78);border-radius:9px;font-size:18px;line-height:1;padding:0}
.ct-ev-del:active{background:rgba(255,80,98,.22)}
.ct-ev-copy strong{display:block;font-size:15px;line-height:1.25}
.ct-ev-copy span{display:block;margin-top:2px;font:10px Consolas,monospace;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}

/* ---- calendário do mês ---- */
.ct-cal-dow{display:-webkit-box;-webkit-box-orient:horizontal;display:flex;margin-bottom:6px}
.ct-cal-dow span{-webkit-box-flex:1;flex:1;text-align:center;font:10px Consolas,monospace;letter-spacing:.06em;color:var(--muted)}
.ct-cal-grade{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;display:flex;flex-wrap:wrap}
.ct-cal-dia{width:14.28%;height:38px;line-height:38px;text-align:center;font-size:13px;color:var(--text)}
.ct-cal-dia.fora{color:#3a3d50}
.ct-cal-dia.hoje{color:#0a1206;font-weight:700}
/* círculo do "hoje" perfeitamente centrado no número, em qualquer largura de célula */
.ct-cal-dia.hoje:before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%;background:var(--lime);z-index:-1;box-shadow:0 0 10px rgba(184,255,58,.45)}
.ct-cal-dia{position:relative;z-index:1}
.ct-cal-dia.tem-evento:after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:var(--cyan)}
.ct-cal-dia.hoje.tem-evento:after{background:#0a1206}
.ct-cal-dia{cursor:pointer}
.ct-cal-dia:active{background:rgba(38,208,255,.12)}
.ct-cal-dica{font:10px Consolas,monospace;letter-spacing:.06em;color:rgba(126,200,216,.5);text-transform:uppercase;text-align:center;margin-bottom:10px}

/* ===== cabeçalho de seção como ACORDEÃO (Cenas/Agenda/Calendário) ===== */
.ct-sec-cab.acordeao{cursor:pointer;-webkit-user-select:none;user-select:none}
.ct-sec-seta{-webkit-box-flex:0;flex:none;color:rgba(126,200,216,.6);font-style:normal;font-size:11px;margin-right:8px;line-height:1}
/* botão alternar lista/cards no cabeçalho DISPOSITIVOS */
.ct-sec-btn{-webkit-box-flex:0;flex:none;margin-left:8px;width:32px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;background:rgba(18,19,29,.6);color:#9fc3d2;font-size:15px;line-height:1;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;display:flex;align-items:center;justify-content:center}
.ct-sec-btn:active{background:#1b1d2b}
/* estado "conferindo…" (gira o ícone de refresh) */
.topbtn.girando,.ct-sec-btn.girando{-webkit-animation:sp .9s linear infinite;animation:sp .9s linear infinite}

/* ===== visualização em CARDS (2 colunas) — dispositivos e cenas ===== */
.vista-cards{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;display:flex;flex-wrap:wrap;-webkit-box-pack:justify;justify-content:space-between}
/* cada cômodo vira um card */
#centralLista.vista-cards .grupo-ct{width:48.7%;margin-bottom:14px;padding:10px 12px 4px;border:1px solid rgba(32,220,255,.16);border-right:2px solid rgba(38,208,255,.32);border-radius:14px;background:linear-gradient(145deg,rgba(6,20,32,.5),rgba(8,10,20,.45))}
#centralLista.vista-cards .grupo-ct-cab{margin-bottom:8px;padding-bottom:7px}
/* dentro do card os dispositivos ficam empilhados (1 coluna), mesmo em tela larga */
#centralLista.vista-cards .grupo-ct-grade{display:block}
#centralLista.vista-cards .ct-btn{width:100%}
/* cenas em 2 colunas */
.ct-cenas.vista-cards .ct-cena{width:48.7%;margin-bottom:12px}

/* ===== modal de novo evento (reusa .popup-bg / .popup-caixa) ===== */
.ev-form{margin-top:4px}
.ev-campo{display:block;margin-bottom:12px}
.ev-campo span{display:block;font:10px Consolas,monospace;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.ev-inp{width:100%;padding:12px 12px;background:#0a0b12;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:16px;font-family:inherit}
.ev-inp:focus{outline:none;border-color:var(--violet)}
.ev-erro{color:var(--red);font-size:13px;min-height:18px;margin:2px 0 10px}

/* Central: largura legível no desktop, blocos definidos e espaço consistente. */
#pageCentral{padding:0 0 26px}
.ct-scroll{padding:0 20px}
.ct-container{display:block;width:100%;max-width:1240px;margin:0 auto;padding:24px 0 42px}
.ct-relogio{margin:0 0 28px;padding:22px 24px 24px;border:1px solid rgba(38,208,255,.16);border-radius:18px;background:linear-gradient(130deg,rgba(13,32,45,.75),rgba(13,14,25,.58));box-shadow:0 18px 50px rgba(0,0,0,.13)}
.ct-hora{font-size:clamp(66px,7vw,92px)}
.ct-sec-cab{min-height:36px;margin:30px 0 14px;padding:0 3px 11px}
.ct-sec-cab:first-of-type{margin-top:0}
.ct-sec-tit{font-size:13px;letter-spacing:.16em}
.ct-clima{min-height:260px;margin-bottom:4px;padding:25px 30px;border-color:rgba(38,208,255,.24);border-right-width:1px;box-shadow:0 16px 45px rgba(0,0,0,.14)}
.ct-clima-grade{margin-top:5px}
.ct-mini{padding:11px 4px}
#centralLista{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-lines:multiple;display:flex;flex-wrap:wrap;margin:0 -7px 18px}
#centralLista .grupo-ct{width:calc(100% - 14px);margin:0 7px 10px;padding:15px;border:1px solid rgba(38,208,255,.16);border-radius:15px;background:linear-gradient(145deg,rgba(11,28,40,.8),rgba(10,13,23,.74));box-shadow:0 12px 30px rgba(0,0,0,.09)}
#centralLista.vista-cards .grupo-ct{width:calc(33.333% - 14px);margin-bottom:14px;border-right-width:1px}
#centralLista .grupo-ct-cab{min-height:25px;margin:0;padding:0;border:0;text-align:left}
#centralLista .grupo-ct-nome{font-size:12px;letter-spacing:.11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#centralLista .grupo-ct-cont{margin-left:8px}
#centralLista .grupo-ct-grade{display:block;margin-top:12px}
#centralLista .ct-btn{width:100%;min-height:62px;margin-bottom:8px}
#centralLista .ct-btn:last-child{margin-bottom:0}
.ct-cenas,.ct-eventos,.ct-cal{max-width:100%}
@media(max-width:1000px){#centralLista.vista-cards .grupo-ct{width:calc(50% - 14px)}}
@media(max-width:640px){
  .ct-scroll{padding:0 12px}
  .ct-container{padding:12px 0 38px}
  .ct-relogio{margin-bottom:20px;padding:19px 12px;border-radius:15px}
  .ct-hora{font-size:clamp(55px,15vw,72px)}
  .ct-data{font-size:10px;letter-spacing:.11em;line-height:1.5}
  .ct-sec-cab{margin:23px 0 12px}
  .ct-sec-tit{font-size:11px}
  .ct-clima{min-height:230px;padding:18px;border-radius:15px}
  .ct-clima-temp{font-size:54px}
  .ct-mini{width:50%;padding:9px 4px}
  #centralLista{margin-left:0;margin-right:0}
  #centralLista .grupo-ct,#centralLista.vista-cards .grupo-ct{width:100%;margin:0 0 10px;padding:14px}
}

/* ===== TELA GRANDE (iPad de parede em tela cheia): fontes maiores, city name em destaque ===== */
@media (min-width:760px){
  /* Tela cheia (sem barra do Safari): relógio + previsão ocupam a 1ª tela; Dispositivos fica abaixo da dobra.
     O card do tempo cresce pra preencher a altura da viewport (menos relógio/cabeçalho/paddings). */
  .ct-clima{min-height:calc(100vh - 340px);max-height:calc(100vh - 300px)}
  .ct-clima-local{font-size:32px;letter-spacing:.08em}
  .ct-clima-temp{font-size:96px}
  .ct-clima-desc{font-size:20px}
  .ct-clima-icone{font-size:44px}
  .ct-mini span{font-size:13px}
  .ct-mini b{font-size:28px}
  .ct-sec-num{font-size:15px}
  .ct-sec-tit{font-size:20px;letter-spacing:.18em}
  .ct-sec-info{font-size:14px}
  .ct-sec-seta{font-size:14px}
  .grupo-ct-nome{font-size:18px}
  .grupo-ct-cont{font-size:14px}
  .ct-btn-icone{width:48px;height:48px}
  .ct-btn-nome{font-size:19px}
  .ct-btn-est{font-size:12px;letter-spacing:.1em}
  .ct-data{font-size:16px;letter-spacing:.22em}
  .ct-cena-nome{font-size:19px}
  .ct-cena-cont{font-size:13px}
  .ct-ev-copy strong{font-size:19px}
  .ct-ev-copy span{font-size:12px}
  .ct-ev-quando b{font-size:26px}
  .ct-cal-dow span{font-size:13px}
  .ct-cal-dia{font-size:16px}
}

/* Banner de recado (mensagem recebida de outro aparelho) */
.recado-banner{display:none;position:fixed;top:14px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);max-width:88%;background:linear-gradient(135deg,#2a1e4a,#12131d);border:1px solid var(--violet);color:#fff;padding:16px 26px;border-radius:14px;z-index:120;box-shadow:0 10px 34px rgba(0,0,0,.55);font-size:19px;text-align:center;cursor:pointer}

/* protetor desligado neste iPad */
.ct-treino-btn.off{opacity:.55}
.ct-treino-btn:disabled{opacity:.35}
/* tempos do protetor neste iPad */
.ct-pt-cfg{display:flex;gap:8px;margin-top:8px}
.ct-pt-cfg label{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.ct-pt-cfg span{color:rgba(150,212,226,.75);font-size:13px}
.ct-pt-cfg select{font-size:16px;padding:4px 6px;border-radius:8px;background:#0b1a24;color:#e8f4f7;border:1px solid var(--line)}

/* ===== Saúde do sistema (healthcheck) ===== */
.ct-saude{display:block;margin-bottom:16px}
.ct-saude-item{display:-webkit-box;-webkit-box-align:center;display:flex;align-items:center;padding:11px 4px;border-bottom:1px solid rgba(32,220,255,.1)}
.ct-saude-item>i{width:11px;height:11px;border-radius:50%;background:#2ee06a;-webkit-box-shadow:0 0 9px #2ee06a;box-shadow:0 0 9px #2ee06a;-webkit-box-flex:0;flex:0 0 auto;margin-right:12px}
.ct-saude-item.aviso>i{background:#ffc93a;-webkit-box-shadow:0 0 9px #ffc93a;box-shadow:0 0 9px #ffc93a}
.ct-saude-item.erro>i{background:#ff4d5e;-webkit-box-shadow:0 0 9px #ff4d5e;box-shadow:0 0 9px #ff4d5e}
.ct-saude-nome{-webkit-box-flex:1;flex:1;color:#dffbff;font:14px/1.2 Consolas,monospace}
.ct-saude-st{color:#2ee06a;font:bold 12px Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ct-saude-item.aviso .ct-saude-st{color:#ffc93a}
.ct-saude-item.erro .ct-saude-st{color:#ff4d5e}
.ct-sec-info.ct-saude-g.ok{color:#8affc0}
.ct-sec-info.ct-saude-g.aviso{color:#ffd76a}
.ct-sec-info.ct-saude-g.erro{color:#ff6a78}