/* ============================================================
   PWA Casa — style.css · v3 "Tiles & Medidores"
   Tema claro/escuro AUTOMÁTICO (prefers-color-scheme).
   Substitui o tema Aço Escovado (wallpaper aposentado).
   Compat: todas as classes do v2 continuam válidas — as telas
   não alteradas (util, cameras, app) herdam o visual novo.
   Segurança: nenhuma entidade/GA aqui; só apresentação.
   ============================================================ */

/* ---------- tokens (claro = padrão) ---------- */
:root{
  --bg:#F2F3F6; --card:#FFFFFF; --ink:#1C232E; --muted:#68727F;
  --line:#E4E7EC; --chip:#EFF1F4; --track:#ECEEF2;
  --acc:#E1922E; --acc-soft:#F9EBD4; --acc-ink:#8A5410;
  --ok:#3E8E5A;  --ok-soft:#E2F0E8;  --ok-ink:#2E6B45;
  --warn:#D99A06; --warn-soft:#F9EFD4; --warn-ink:#8A6204;
  --bad:#C6503C; --bad-soft:#F7E3DF; --bad-ink:#A03F2E;
  --blue:#3B6FD4; --blue-soft:#E3EAF9; --blue-ink:#2C55A8;
  --focus:#2E6FD8;
  --ch-grid:rgba(16,24,40,.08);
  --sombra-card:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  /* --- nomes herdados do v2 (telas antigas e gráficos leem daqui) --- */
  --fundo:var(--bg); --texto:var(--ink); --texto2:var(--muted);
  --borda:var(--line); --acento:var(--blue);
  --alerta:var(--warn); --erro:var(--bad);
  --raio:16px; --sombra:var(--sombra-card);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#11151B; --card:#1B212B; --ink:#E8ECF2; --muted:#94A0AF;
    --line:#2A3240; --chip:#252D39; --track:#232A35;
    --acc:#E8A94E; --acc-soft:#3A2F1B; --acc-ink:#F2C883;
    --ok:#33936B;  --ok-soft:#1C3129;  --ok-ink:#7FC49E;
    --warn:#B18C1F; --warn-soft:#332B14; --warn-ink:#E3C05C;
    --bad:#C14934; --bad-soft:#392019; --bad-ink:#E89A86;
    --blue:#6E97E8; --blue-soft:#20293C; --blue-ink:#9FBCF2;
    --focus:#7FA8EF;
    --ch-grid:rgba(255,255,255,.07);
    --sombra-card:0 0 0 1px rgba(255,255,255,.06);
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,'SF Pro Text',Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}

/* topo */
#topo{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 10px;
  max-width:520px; margin:0 auto; width:100%;
}
#topo h1{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
#relogio{color:var(--muted);font-variant-numeric:tabular-nums}
#sair{color:var(--muted)}

/* área da tela ativa */
#tela{flex:1; overflow-y:auto; padding:4px 14px 96px;
  max-width:520px; margin:0 auto; width:100%}
.aviso{color:var(--muted);text-align:center;margin-top:14px;font-size:.85rem}

/* grupos e grade */
.grupo{margin:18px 2px 8px; color:var(--muted);
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em}
.grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}

/* ---------- cards ---------- */
.card{
  background:var(--card); border:0; border-radius:16px;
  box-shadow:var(--sombra-card);
  padding:13px 15px; display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.card .rotulo{color:var(--muted); font-size:.8rem; font-weight:600;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.card .valor{font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
.card .valor small{font-size:.85rem; color:var(--muted); font-weight:600; margin-left:3px}
.card .valor-texto{font-size:1.02rem; line-height:1.45}
.card .sub{color:var(--muted); font-size:.86rem}
.card.ok    .valor{color:var(--ok)}
.card.alerta .valor{color:var(--warn-ink)}
.card.erro  .valor{color:var(--bad-ink); font-size:1rem}
.card.ok::before, .card.alerta::before, .card.erro::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px}
.card.ok::before{background:var(--ok)}
.card.alerta::before{background:var(--warn)}
.card.erro::before{background:var(--bad)}
.card.span{margin:10px 0 0}
.grade + .card.span{margin-top:10px}
.card.toque{cursor:pointer}
.card.toque:active{transform:scale(.985)}
.dica{margin-left:auto; font-size:.66rem; color:var(--blue-ink);
  background:var(--blue-soft); border:0; border-radius:8px; padding:2px 8px; font-weight:700}

/* hero (Visão: SOC em destaque) */
.card.hero{grid-column:1/-1}
.card.hero .valor{font-size:2rem}
.card.hero .linha-sub{display:flex; justify-content:space-between; align-items:flex-end; gap:10px}
.card.hero .linha-sub .sub b{color:var(--ink)}
.mini-barra{height:6px; border-radius:99px; background:var(--track); margin-top:8px; overflow:hidden}
.mini-barra i{display:block; height:100%; border-radius:99px; background:var(--ok)}

/* selos (chips de estado) */
.selo{font-size:.72rem; font-weight:700; border-radius:99px; padding:3px 9px; white-space:nowrap}
.selo.ok{background:var(--ok-soft); color:var(--ok-ink)}
.selo.warn{background:var(--warn-soft); color:var(--warn-ink)}
.selo.bad{background:var(--bad-soft); color:var(--bad-ink)}
.selo.acc{background:var(--acc-soft); color:var(--acc-ink)}
.selo.neutro{background:var(--chip); color:var(--muted)}

/* badge de falha (Quem Opera) e badge do Aquecer-até */
.badge-erro{display:none; margin-left:auto; background:var(--bad);
  color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.06em;
  padding:2px 8px; border-radius:8px}
.badge-aq{margin-left:6px; font-size:.7rem; font-weight:800; color:var(--acc-ink);
  background:var(--acc-soft); border-radius:8px; padding:2px 7px}
.badge-aq:empty{display:none}

/* linha de controle */
.linha-controle{flex-direction:row; align-items:center; justify-content:space-between}

/* segmented */
.seg{display:flex; gap:4px; background:var(--chip); border:0; border-radius:12px;
  overflow:hidden; padding:4px}
.seg button{
  flex:1; padding:9px 4px; background:none; border:none; border-radius:8px;
  color:var(--muted); font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.seg button.ativo{background:var(--card); color:var(--ink); box-shadow:var(--sombra-card)}

/* toggle */
.toggle{width:50px; height:30px; border-radius:15px; background:var(--track);
  position:relative; cursor:pointer; transition:background .18s; flex:none}
.toggle .bolinha{width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  position:absolute; top:3px; left:3px; transition:left .18s}
.toggle.on{background:var(--ok)}
.toggle.on .bolinha{left:23px}

/* modal / stepper */
.modal-fundo{position:fixed; inset:0; background:rgba(10,14,20,.55);
  display:flex; align-items:center; justify-content:center; z-index:50;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:18px}
.modal{background:var(--card); border:0; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:20px; width:min(88vw,380px); display:flex; flex-direction:column; gap:12px}
.modal h3{font-size:1.02rem}
.modal p{color:var(--muted); font-size:.9rem; line-height:1.45}
.modal-botoes{display:flex; gap:10px; justify-content:flex-end; margin-top:4px}
.btn{border:none; border-radius:12px; padding:11px 16px;
  font-size:.88rem; font-weight:700; cursor:pointer;
  background:var(--chip); color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5; cursor:default}
.btn-cinza{background:var(--chip); color:var(--ink)}
.btn-azul{background:var(--blue-soft); color:var(--blue-ink)}
.btn-mini{padding:8px 13px;font-size:.78rem;margin-left:6px}
.stepper{display:flex; align-items:center; justify-content:center; gap:16px}
.stepper .btn{font-size:1.25rem; padding:8px 18px}
.stepper-valor{font-size:1.5rem; font-weight:700; min-width:110px; text-align:center;
  font-variant-numeric:tabular-nums}
.stepper-faixa{text-align:center; font-size:.76rem; color:var(--muted)}

/* ---------- navegação inferior ---------- */
#menu{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:space-around;
  background:var(--card);
  border-top:1px solid var(--line);
  padding:7px 4px calc(env(safe-area-inset-bottom) + 7px);
}
#menu a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--muted); min-width:52px;
  font-size:1.1rem;
}
#menu a svg{width:22px; height:22px}
#menu a span{font-size:.6rem; font-weight:700; letter-spacing:.02em}
#menu a.ativo{color:var(--acc)}

/* ---------- gráficos (tela Energia) ---------- */
.card-grafico{height:280px;padding:12px}
.card-grafico canvas{width:100%!important;height:100%!important}

/* ---------- tela Luz · v3: tiles ---------- */
.search{position:relative; margin:12px 0 8px}
.search input{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px 10px 36px; outline:none;
}
.search input::placeholder{color:var(--muted)}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--muted)}
.filtros{display:flex; gap:8px; margin:0 0 4px}
.chip-filtro{
  appearance:none; border:1px solid var(--line); background:var(--card); color:var(--muted);
  font:inherit; font-size:.78rem; font-weight:700; border-radius:99px; padding:8px 14px; cursor:pointer;
}
.chip-filtro[aria-pressed="true"]{background:var(--acc-soft); color:var(--acc-ink); border-color:transparent}
.masonry{columns:2; column-gap:10px}
.tile{
  break-inside:avoid; margin-bottom:10px;
  background:var(--card); border-radius:16px; box-shadow:var(--sombra-card);
  padding:12px; display:flex; flex-direction:column; gap:10px;
}
.tile .topo-tile{display:flex; align-items:center; gap:10px; min-width:0}
.tile .ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--chip); color:var(--muted); border:0; cursor:pointer; padding:0;
  transition:background .15s,color .15s;
}
.tile .ic svg{width:22px; height:22px}
.tile.on .ic{background:var(--icone-bg,var(--acc-soft)); color:var(--icone-cor,var(--acc))}
.tile .meta{min-width:0; cursor:pointer}
.tile .nm{font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .st{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.tile .barrow{display:none}
.tile.on.dim .barrow{display:flex; gap:8px; align-items:stretch}
.bar{flex:1; position:relative; height:38px; border-radius:12px;
  background:var(--track); overflow:hidden; cursor:pointer; touch-action:none}
.bar .fill{position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--fill-cor,var(--acc)); border-radius:12px 0 0 12px; transition:width .12s ease-out}
.bar.cheia .fill{border-radius:12px}
.tile-especial{
  background:var(--card); border-radius:16px; box-shadow:var(--sombra-card);
  padding:12px 14px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tile-especial .nm{font-size:.9rem; font-weight:600}
.tile-especial .sub{color:var(--muted); font-size:.76rem}
.grupo-luz{display:flex; align-items:baseline; justify-content:space-between; margin:16px 2px 8px}
.grupo-luz h2{color:var(--muted); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em}
.grupo-luz .contador{color:var(--muted); font-size:.76rem; font-variant-numeric:tabular-nums; font-weight:700}
.grupo-luz .contador.aceso{color:var(--acc-ink); background:var(--acc-soft);
  border-radius:99px; padding:2px 9px}

/* acordeão antigo (compat — não usado pela Luz v3) */
.area{background:var(--card);border:0;border-radius:16px;box-shadow:var(--sombra-card);
  margin:12px 0;overflow:hidden}
.area summary{display:flex;justify-content:space-between;align-items:center;
  padding:15px;cursor:pointer;font-weight:650;list-style:none}
.area summary::-webkit-details-marker{display:none}
.area[open] summary{border-bottom:1px solid var(--line)}
.contador{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.contador.aceso{color:var(--ok);font-weight:700}
.luz-linha{display:flex;justify-content:space-between;align-items:center;
  padding:11px 15px;border-top:1px solid var(--line);gap:10px}
.luz-linha.especial{background:var(--chip)}
.luz-nome{flex:1;font-size:.92rem;cursor:pointer;padding:4px 0}
.slider{width:100%;accent-color:var(--acc);height:28px}
.cor{width:52px;height:36px;border:none;border-radius:8px;background:none;cursor:pointer}

/* ---------- tela Boilers · v3: medidores ---------- */
.gauges{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.gcard{background:var(--card); border-radius:16px; box-shadow:var(--sombra-card);
  padding:12px 8px 10px; text-align:center}
.gcard svg{width:100%; height:auto; display:block}
.gcard .gnome{font-size:.88rem; font-weight:700; margin-top:2px}
.gcard .gsub{font-size:.74rem; color:var(--muted); margin-top:2px}
.gcard .gnum{fill:var(--ink); paint-order:stroke; stroke:var(--card); stroke-width:5px;
  stroke-linejoin:round; font-size:30px; font-weight:700; font-variant-numeric:tabular-nums}
.gcard .gunit{fill:var(--muted); font-size:14px; font-weight:600}
.gcard .gminmax{fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums}
.gcard .gtick{stroke:var(--muted); stroke-width:1.5}
.gcard .agulha{fill:var(--ink); transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.gcard .hub{fill:var(--ink)}
.atividade{
  width:100%; border:0; text-align:left; cursor:pointer;
  background:var(--acc-soft); border-radius:14px; padding:12px 14px; margin-top:10px;
  display:flex; align-items:center; gap:10px;
  font:inherit; font-size:.82rem; color:var(--acc-ink); font-weight:700;
}
.atividade svg{width:17px; height:17px; flex:0 0 auto}

/* ---------- tela Câmeras · v3 (modelo aprovado: imagem cheia,
   nome/status embaixo, selo de movimento sobre a imagem) ---------- */
.cam-card{padding:12px;cursor:pointer}
.cam-img{width:100%;border-radius:12px;background:#000;min-height:120px}
.cam-img.erro{opacity:.35}
.cam-v3{padding:0; overflow:hidden; cursor:pointer}
.cam-v3:active{transform:scale(.99)}
.cam-v3 .vid{position:relative; background:#000; min-height:150px; line-height:0}
.cam-v3 .cam-img{display:block; width:100%; border-radius:0; min-height:150px;
  aspect-ratio:16/9; object-fit:cover}
.cam-v3 .selo-mov{position:absolute; top:10px; left:10px; line-height:1.3}
.cam-v3 .base{padding:11px 15px 12px}
.cam-v3 .nm{font-size:.95rem; font-weight:650}
.cam-v3 .st{color:var(--muted); font-size:.8rem; margin-top:2px}
.placa-lpr{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.25rem; font-weight:700; letter-spacing:.1em; padding:5px 13px;
  border:2px solid var(--ink); border-radius:8px}
.cam-full-caixa{width:min(96vw,1100px);display:flex;flex-direction:column;gap:8px}
.cam-full-topo{display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.cam-full-caixa img{width:100%;border-radius:12px;background:#000}

/* barra de contexto (Visão) */
.topo-info{padding:12px 15px;border-radius:14px;margin:10px 0 2px;
  background:var(--card);box-shadow:var(--sombra-card);
  color:var(--muted);font-size:.9rem}
.topo-info b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- acessibilidade ---------- */
button:focus-visible, input:focus-visible, .toggle:focus-visible, .bar:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}