/* FrioControl · Casa da Automação — tema escuro, azul petróleo e dourado */
:root{
  --bg:#0f1a21; --surface:#1a2a34; --surface2:#22343f; --line:#2b3d48; --line2:#3a4f5c;
  --brand:#2e4250; --gold:#c3a274; --gold-ink:#0f1a21;
  --fg:#e8eef1; --muted:#9fb0ba; --muted2:#b4c2ca; --ice:#7fd3ff;
  --ok:#3ecf8e; --warn:#f2c14e; --alarm:#ff6b4a; --deg:#5aa9ff; --off:#8a98a2;
  --f-ui:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-num:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg);margin:0}
body{color:var(--fg);font-family:var(--f-ui);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--brand)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:12px}
.carregando{padding:40px;text-align:center;color:var(--muted)}

/* topo */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--brand);padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
.top-in{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand b{font-size:20px;display:block;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{font-size:12px;color:var(--gold);font-weight:500}
.top-nav{display:flex;gap:4px}
.top-nav a{color:#d5dee3;text-decoration:none;font-weight:600;padding:8px 12px;border-radius:8px;font-size:14px}
.top-nav a[aria-current]{background:rgba(195,162,116,.18);color:var(--gold)}
.chip-online{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex-shrink:0}
.dot.off{background:var(--off)}

main{padding:16px max(16px,env(safe-area-inset-right,0px)) calc(96px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.view{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.h2{font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:4px 0 0}
.titulo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.titulo h1{font-size:22px;margin:0}
.panel{background:var(--surface);border-radius:16px;padding:16px;min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.panel-h b{font-size:16px}

/* resumo e cartões */
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{background:var(--surface);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tile .num{font-size:24px;font-weight:600;line-height:1.1}
.tile span:last-child{font-size:12px;color:var(--muted2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.card{background:var(--surface);border:2px solid transparent;border-radius:14px;padding:12px 14px 10px;text-align:left;display:flex;flex-direction:column;gap:4px;min-height:150px;text-decoration:none;color:var(--fg)}
.card:hover{border-color:var(--line2)}
.card.s-alarme{border-color:var(--alarm)}
.card.s-atencao{border-color:rgba(242,193,78,.55)}
.card.s-semcom{opacity:.75;border-style:dashed;border-color:var(--line2)}
.c-top{display:flex;justify-content:space-between;align-items:center;gap:4px 6px;flex-wrap:wrap}
.c-name{font-size:15px;font-weight:700}
.c-type{font-size:12px;color:var(--muted)}
.c-temp{font-family:var(--f-num);font-size:30px;font-weight:600;line-height:1.05}
.c-temp small{font-size:14px;font-weight:500;color:var(--muted)}
.c-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:6px}
.pill{font-size:11px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.p-ok{color:var(--ok);background:rgba(62,207,142,.12)}
.p-atencao{color:var(--warn);background:rgba(242,193,78,.14)}
.p-alarme{color:#fff;background:var(--alarm)}
.p-degelo{color:var(--deg);background:rgba(90,169,255,.14)}
.p-desligada,.p-semcom{color:var(--off);background:rgba(138,152,162,.16)}
.t-ok{color:var(--fg)}.t-atencao{color:var(--warn)}.t-alarme{color:var(--alarm)}.t-degelo{color:var(--deg)}.t-desligada,.t-semcom{color:var(--off)}
.comp{display:inline-flex;align-items:center;gap:4px}
.comp i{width:7px;height:7px;border-radius:50%;background:var(--off)}
.comp.on i{background:var(--ice);box-shadow:0 0 6px var(--ice)}
.grupo-cliente{display:flex;flex-direction:column;gap:10px}
.grupo-cliente h3{margin:6px 0 0;font-size:15px;color:var(--gold)}
.vazio{padding:28px 16px;text-align:center;color:var(--muted);background:var(--surface);border-radius:16px;display:flex;flex-direction:column;gap:8px;align-items:center}

/* eventos */
.events{display:flex;flex-direction:column}
.ev{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.ev:first-child{border-top:0}
.ev time{font-family:var(--f-num);font-size:12px;color:var(--muted);width:92px;flex-shrink:0;padding-top:2px}

/* detalhe da câmara */
.back{display:flex;align-items:center;gap:8px}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--fg);text-decoration:none}
.d-title{display:flex;flex-direction:column;flex-grow:1;min-width:0}
.d-title b{font-size:22px;line-height:1.1}
.d-title span{font-size:13px;color:var(--gold)}
.banner{display:flex;gap:10px;align-items:center;border-radius:12px;padding:12px 14px;font-weight:600;font-size:14px}
.b-alarme{background:rgba(255,107,74,.15);color:#ffb3a1}
.b-atencao{background:rgba(242,193,78,.12);color:#f5d27e}
.b-degelo{background:rgba(90,169,255,.12);color:#a8d0ff}
.b-desligada,.b-semcom{background:rgba(138,152,162,.14);color:var(--muted2)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hero-temp{font-family:var(--f-num);font-size:58px;font-weight:600;line-height:1}
.hero-temp small{font-size:22px}
.mini-stats{display:grid;grid-template-columns:auto auto;gap:4px 12px;font-size:13px;color:var(--muted)}
.mini-stats b{font-family:var(--f-num);color:var(--fg);text-align:right}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row-l{display:flex;flex-direction:column}
.row-l b{font-size:15px}
.row-l span{font-size:12px;color:var(--muted)}
.switch{width:58px;height:34px;border-radius:999px;border:0;background:var(--line2);position:relative;flex-shrink:0;transition:background .2s}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:var(--fg);transition:left .2s}
.switch[aria-checked="true"]{background:var(--ok)}
.switch[aria-checked="true"]::after{left:28px}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);font-size:22px;font-weight:600}
.stepper output{font-family:var(--f-num);font-size:22px;font-weight:600;min-width:92px;text-align:center}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-block:12px 4px}
.fields2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.field input,.field select{height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);padding:0 10px;font-size:15px;width:100%;min-width:0;color:var(--fg)}
.field input[type=number]{font-family:var(--f-num)}
.check{display:flex;align-items:center;gap:10px;font-size:14px;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--gold)}
.btn{height:46px;border-radius:12px;border:0;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;text-decoration:none;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:#d0b286}
.btn-line{background:transparent;border:2px solid var(--gold);color:var(--gold)}
.btn-ghost{background:var(--surface2);color:var(--fg)}
.btn-danger{background:transparent;border:1px solid rgba(255,107,74,.6);color:#ff9a80}
.btn-sm{height:36px;font-size:13px;padding:0 12px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:default}
.btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.pending{font-size:12px;color:var(--gold);font-weight:600}
.io{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.io div{background:var(--bg);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.io span{font-size:12px;color:var(--muted)}
.io b{font-size:14px}
.hor-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:var(--bg);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.hor-top span{font-size:12px;color:var(--muted)}
.hor-top b{font-size:20px}
.hor{width:100%;border-collapse:collapse;font-size:14px}
.hor th{font-size:12px;color:var(--muted);font-weight:600;text-align:right;padding:4px 6px 6px}
.hor th:first-child,.hor td:first-child{text-align:left;padding-left:2px}
.hor td{padding:9px 6px;border-top:1px solid var(--line,rgba(255,255,255,.08));text-align:right;white-space:nowrap}
.hor td:first-child{color:var(--muted2);white-space:normal}
.hor-rodape{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.on-c{color:var(--ok)}.off-c{color:var(--off)}.ice-c{color:var(--ice)}.warn-c{color:var(--warn)}
.aviso{font-size:13px;color:var(--muted2);background:var(--surface2);border-radius:10px;padding:10px 12px}

/* gráfico */
.chart-box{position:relative;cursor:crosshair;touch-action:pan-y}
.chart{width:100%;display:block}
.tip{position:absolute;transform:translateX(-50%);pointer-events:none;background:var(--surface2);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;color:var(--muted2);white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.35);z-index:2}
.tip b{font-size:15px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted2);margin-top:6px}
.legend span{display:flex;align-items:center;gap:6px}
.lg-line{width:16px;border-top:2px solid var(--ice)}
.lg-sp{width:16px;border-top:2px dashed var(--gold)}
.lg-band{width:12px;height:10px;background:rgba(255,107,74,.14);border:1px solid var(--alarm)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-weight:700;font-size:13px}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);border-radius:12px;padding:4px;gap:4px}
.seg button{height:38px;border:0;border-radius:9px;background:transparent;font-weight:700;font-size:13px;color:var(--muted2)}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat{background:var(--surface);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.stat span{font-size:12px;color:var(--muted);font-weight:600}
.stat b{font-family:var(--f-num);font-size:21px;font-weight:600}

/* tabelas */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-weight:600;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line2);white-space:nowrap;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
td.r,th.r{text-align:right}
.panel td:first-child{white-space:nowrap}
tr.link{cursor:pointer}
tr.link:hover td{background:var(--surface2)}

/* relatório (folha) */
.sheet{background:#fff;color:#1b2a33;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.sheet-h{background:var(--brand);color:#fff;padding:18px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:4px solid var(--gold)}
.sheet-h b{font-size:19px;display:block}
.sheet-h span{font-size:12px;color:#d5dee3}
.sheet-h .r{text-align:right;font-size:12px;color:#d5dee3}
.sheet-b{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.sheet-b h3{margin:0;font-size:17px}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 16px;font-size:13px;color:#55656f}
.meta b{color:#1b2a33}
.sheet table{font-size:13px;color:#1b2a33}
.sheet th{color:#55656f;border-bottom:2px solid var(--brand);text-transform:none;letter-spacing:0;font-size:12px}
.sheet td{border-bottom:1px solid #dfe5e8;padding:7px 8px}
.sheet td.n{font-family:var(--f-num);text-align:right;white-space:nowrap}
.sheet td.bad{color:#c2410c;font-weight:600}
.sign{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#55656f;border-top:1px solid #dfe5e8;padding-top:30px}
.sign div{border-top:1px solid #1b2a33;padding-top:4px;min-width:200px}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.login form{width:100%;max-width:380px;background:var(--surface);border-radius:18px;padding:28px 22px;display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--gold)}
.login h1{margin:0;font-size:26px}
.erro{color:#ffb3a1;font-size:14px;min-height:1em}

/* navegação inferior (celular) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#16242d;border-top:1px solid var(--line);padding:0 max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px))}
.tabs-in{max-width:620px;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.tab{height:64px;color:#8fa1ac;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:600;text-decoration:none}
.tab[aria-current]{color:var(--gold)}

/* modal e toast */
dialog{border:0;border-radius:16px;background:var(--surface);color:var(--fg);padding:0;width:min(520px,calc(100% - 32px));max-height:calc(100% - 48px)}
dialog::backdrop{background:rgba(5,10,14,.7)}
#modal-corpo{padding:20px;display:flex;flex-direction:column;gap:14px}
#modal-corpo h2{margin:0;font-size:19px}
.cred{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;background:var(--bg);border-radius:12px;padding:14px}
.cred span{color:var(--muted)}
.cred b{font-family:var(--f-num);font-weight:500;word-break:break-all}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;padding:12px 16px;border-radius:12px;transition:.25s;z-index:60;max-width:calc(100% - 32px);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.erro{background:var(--alarm);color:#fff}

@media (min-width:860px){
  .tabs{display:none}
  main{padding-bottom:40px}
  .toast{bottom:24px}
}
@media (max-width:859px){ .top-nav{display:none} }
@media (max-width:640px){
  .stats,.io{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols2{grid-template-columns:1fr}
  .hero-temp{font-size:50px}
  .summary .tile .num{font-size:21px}
}
@media (max-width:380px){ .fields{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* impressão do relatório (Salvar como PDF) */
@media print{
  body{background:#fff}
  body::before,.top,.tabs,.no-print,.toast{display:none!important}
  main{padding:0}
  .view{max-width:none}
  .sheet{box-shadow:none;border-radius:0}
  .sheet-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.logo-cli{height:36px;max-width:96px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;flex-shrink:0}
td.r,.tile .num{white-space:nowrap}
.tile .num.tile-brl{font-size:clamp(14px,4.2vw,19px)}

/* app instalável */
.faixa-pwa{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;background:var(--surface2,#1d2c36);border:1px solid var(--gold,#c3a274);border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.45);width:min(440px,calc(100% - 32px))}
.faixa-pwa span{flex:1;min-width:0;display:flex;flex-direction:column}
.faixa-pwa small{color:var(--muted);font-size:12px}
.fp-x{background:none;border:0;color:var(--muted);font-size:22px;width:36px;height:36px;border-radius:10px;cursor:pointer}
@media (min-width:860px){.faixa-pwa{bottom:24px}}
body.offline .top{box-shadow:inset 0 -3px 0 var(--warn,#e0a83a)}
@media (display-mode:standalone){html,body{overscroll-behavior-y:none}}
@media (display-mode:window-controls-overlay){.top{padding-top:max(12px,env(titlebar-area-height,0px));-webkit-app-region:drag;app-region:drag}.top a,.top button,.top nav{-webkit-app-region:no-drag;app-region:no-drag}}
.toast.acao{pointer-events:auto}