:root{--bg:#02080d;--panel:#04131c;--panel2:#071b26;--line:#17475c;--line2:#257da2;--cyan:#22bfff;--blue:#159cff;--white:#edf7ff;--muted:#a6c5d6;--green:#00ef7b;--red:#ff3b36;--amber:#ffb21c}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#02070b;color:var(--white);font-family:Arial,Helvetica,sans-serif}body{background:radial-gradient(ellipse at 50% 0,#09202c 0,#02080d 58%);padding:0 5px 8px}.topbar{height:104px;border:2px solid #7d9eae;border-radius:12px;background:linear-gradient(180deg,#02070b,#030d14);box-shadow:inset 0 0 0 1px #152d3a,0 0 8px #0d5d80;display:flex;align-items:center;gap:18px;padding:8px 20px;margin-bottom:7px;overflow:hidden}.brand{width:360px;flex:0 0 360px;border-right:1px solid #2b9cbe;padding-right:22px;display:flex;align-items:center}.brand img{width:100%;height:auto;max-height:78px;object-fit:contain}.heading{min-width:270px;display:flex;flex-direction:column;line-height:1.05;flex:1}.heading span{font-size:clamp(20px,1.7vw,31px);font-weight:800;letter-spacing:.5px}.heading strong{font-size:clamp(20px,1.7vw,31px);color:var(--cyan);margin-top:4px}.main-nav{display:flex;gap:10px;align-items:center}.nav{width:100px;height:72px;background:linear-gradient(#091b26,#031019);border:1px solid #25516a;border-radius:8px;color:#d8edfb;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;cursor:pointer}.nav-icon{font-size:28px;line-height:30px;color:#c6dbe9}.nav small{font-size:12px;font-weight:bold}.nav.active{border:2px solid #149fff;box-shadow:0 0 9px #078dff,inset 0 0 12px #0755a0;color:#fff}.nav.active .nav-icon{color:#29aaff}.clock{height:82px;border-left:1px solid #234c60;border-right:1px solid #234c60;min-width:120px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:15px}.clock strong{font-size:21px}.online{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:76px;font-size:12px;font-weight:bold;text-align:center}.online i{width:25px;height:25px;background:#00ed64;border-radius:50%;box-shadow:0 0 14px #00ec64}.userbox{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:13px}.logout{background:#061824;color:#dff4ff;border:1px solid #2a6985;border-radius:6px;padding:9px 15px;cursor:pointer}
.rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 4px 12px}.room{min-width:0;border:1px solid #24617c;border-radius:11px;overflow:hidden;background:linear-gradient(180deg,#061822,#020b11);box-shadow:inset 0 0 12px #031c2a;cursor:pointer;transition:border-color .15s,box-shadow .15s}.room:hover,.room:focus-visible{outline:none;border-color:#25baff;box-shadow:0 0 8px #007dc0}.room.selected{border:2px solid #16aaff;box-shadow:0 0 10px #078eff,inset 0 0 12px #063d5b}.room-head{height:34px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 13px}.room-head h3{margin:0;font-size:clamp(13px,1vw,19px);font-weight:800;white-space:nowrap}.state{font-size:clamp(10px,.8vw,14px);font-weight:800;white-space:nowrap}.state i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;background:currentColor;vertical-align:-1px;box-shadow:0 0 7px currentColor}.state.ok{color:var(--green)}.state.alarm{color:var(--red)}.state.defrost{color:var(--amber)}.room-visual{height:143px;position:relative;overflow:hidden;background:#03121a;border-bottom:1px solid #164157}.room-visual img{width:67%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.94) contrast(1.03);mask-image:linear-gradient(90deg,#000 80%,transparent 100%)}.room:nth-child(7) .room-visual img{filter:grayscale(.9) brightness(.72)}.room-number{display:none}.temp{position:absolute;right:12px;top:18px;font-size:clamp(20px,1.8vw,32px);font-weight:800;color:var(--cyan);text-shadow:0 0 9px #0085d2;white-space:nowrap}.temp.critical{color:var(--red)}.defrost-pill{position:absolute;right:10px;bottom:10px;min-width:105px;text-align:center;border:1px solid #1d85ae;border-radius:6px;background:#020b10d9;padding:7px 8px;font-size:12px;line-height:1.35;color:#8de5ff}.defrost-pill b{display:block}.defrost-pill.active{border-color:var(--amber);color:var(--amber)}.defrost-pill.with-alert{bottom:66px;right:9px;min-width:105px}.alert-pill svg{width:18px;height:18px;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:2}.alert-pill{position:absolute;right:9px;bottom:8px;max-width:120px;text-align:center;border:1px solid var(--red);border-radius:6px;background:#160707e8;padding:7px;color:#ff514a;font-size:12px;font-weight:bold}.room-alert{height:27px;padding:6px 10px;border-bottom:1px solid #16394a;background:#030c12;font-size:11px;color:#c7e5f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-alert strong{color:#fff}.room-alert .red{color:var(--red)}.mini-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}.mini{min-width:0;min-height:49px;border-right:1px solid #174052;padding:5px 2px 4px;text-align:center;font-size:clamp(9px,.66vw,12px);color:#c5e5f6;display:flex;flex-direction:column;justify-content:center;gap:3px}.mini:nth-child(6n){border-right:0}.mini b{font-size:clamp(10px,.75vw,14px);color:#dff5ff;white-space:nowrap}.green{color:var(--green)!important}.red{color:var(--red)!important}
.detail{border:2px solid #6e91a4;border-radius:12px;background:linear-gradient(180deg,#06131c,#02090e);box-shadow:inset 0 0 0 1px #15384a,0 0 9px #113b51;padding:9px 10px 10px}.detail-head{display:flex;align-items:center;gap:22px;height:35px;padding:0 10px 8px}.detail-head h2{font-size:clamp(20px,1.6vw,29px);margin:0;font-weight:800}.detail-grid{display:grid;grid-template-columns:21% 21% 13% minmax(0,1fr);gap:10px;align-items:stretch}.detail-photo{position:relative;min-height:220px;overflow:hidden;border-radius:5px;background:#02121b}.detail-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}.detail-photo span{display:none}.metrics{border:1px solid #23536a;border-radius:7px;overflow:hidden;display:flex;flex-direction:column}.metric{flex:1;min-height:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;padding:5px 9px;border-bottom:1px solid #17394a}.metric:last-child{border-bottom:0}.metric span{font-size:clamp(10px,.75vw,14px);color:#d9efff}.metric b{font-size:clamp(14px,1.1vw,21px);color:var(--cyan);white-space:nowrap}.status-stack{display:flex;flex-direction:column;gap:5px}.status-item{flex:1;border:1px solid #23546b;border-radius:6px;padding:7px 10px;display:flex;flex-direction:column;justify-content:center;gap:5px;background:#03111a}.status-item small{font-size:clamp(10px,.72vw,13px);color:#d2e8f6}.status-item b{font-size:clamp(12px,.9vw,16px);color:var(--cyan)}.chart-panel{min-width:0;border:1px solid #25546a;border-radius:7px;padding:0 8px 5px;display:flex;flex-direction:column}.chart-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin:0 -1px 6px}.chart-tabs button{min-width:0;height:30px;padding:3px 4px;border:1px solid #23485c;border-radius:5px 5px 0 0;background:#061823;color:#d5eaf7;font-size:clamp(8px,.64vw,12px);font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.chart-tabs button.active{background:linear-gradient(#16b7ff,#0588d9);border-color:#29bfff;color:#001522}.chart-tools{display:flex;justify-content:space-between;align-items:center;padding:0 3px 3px;font-size:11px;color:#b9d8e8}.chart-tools select{background:#020b11;color:#e1f3ff;border:1px solid #31566a;border-radius:4px;padding:4px 7px;font-size:11px}#trend{width:100%;height:190px;display:block}.demo-note{font-size:10px;color:#668da2;text-align:right;margin:5px 5px 0}
@media(max-width:1350px){.topbar{gap:10px;padding:7px 12px}.brand{width:280px;flex-basis:280px}.main-nav{gap:5px}.nav{width:78px}.clock{min-width:95px}.detail-grid{grid-template-columns:20% 22% 14% minmax(0,1fr)}.room-visual{height:125px}.mini{min-height:43px}}
@media(max-width:1000px){.topbar{height:auto;min-height:90px;flex-wrap:wrap}.brand{width:230px;flex-basis:230px}.heading{min-width:180px}.main-nav{order:4;width:100%;justify-content:center}.nav{height:52px;flex:1}.nav-icon{font-size:21px;line-height:21px}.clock,.online{display:none}.rooms{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr 1fr}.detail-photo{min-height:180px}.chart-panel{grid-column:1/-1}.status-stack{min-height:200px}.room-visual{height:140px}.temp{font-size:26px}}
@media(max-width:600px){body{padding:0 3px}.topbar{padding:7px;gap:8px}.brand{width:150px;flex-basis:150px;padding-right:8px}.heading span,.heading strong{font-size:17px}.rooms{gap:6px;margin:0 0 8px}.room-head{padding:5px;height:30px}.room-head h3{font-size:12px}.state{font-size:9px}.room-visual{height:100px}.room-visual img{width:70%}.temp{font-size:18px;right:5px;top:13px}.defrost-pill,.alert-pill{right:4px;bottom:4px;font-size:9px;min-width:auto;padding:4px}.room-alert{font-size:9px;padding:6px 5px}.mini{font-size:8px;min-height:40px}.mini b{font-size:9px}.detail-grid{grid-template-columns:1fr}.detail-photo{height:180px;min-height:180px}.metrics,.status-stack{min-height:170px}.chart-panel{grid-column:auto}#trend{height:160px}.chart-tabs button{font-size:7px}.detail-head{padding-left:3px}}
.glyph{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;color:#d7efff;flex:0 0 auto}.glyph svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.glyph.green{color:var(--green)!important}.glyph.red{color:var(--red)!important}.glyph.hot{color:#ff3838}.glyph.cold{color:#16caff}.glyph.white{color:#dff5ff}.glyph.cyan{color:var(--cyan)}.glyph.amber{color:var(--amber)}.mini .glyph{width:23px;height:25px;margin:0 auto 1px}.metric .glyph{width:25px;height:27px}.status-item{position:relative;padding-left:43px}.status-item>.glyph{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:29px;height:29px}.event-row{display:grid;grid-template-columns:1fr 1fr;border:1px solid #23546b;border-radius:5px;font-size:10px;color:#d7edf8}.event-row span{padding:5px;border-right:1px solid #23546b}.event-row span:last-child{border-right:0}.event-row b{display:inline-block;margin-top:3px;color:#eaf7ff;font-size:10px}.room-visual .glyph{width:21px;height:21px;vertical-align:middle}.alert-pill svg{width:18px;height:18px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2}


/* Ajuste de fidelidade ao modelo aprovado (referência 1169 x 656) */
html, body { width:100%; min-height:100%; }
body { padding: 7px 8px 8px; overflow-x:hidden; background:#02070b; }
.topbar {
  height:73px; min-height:73px; margin:0 0 5px; padding:5px 14px;
  gap:12px; border-radius:10px; flex-wrap:nowrap;
}
.brand { width:260px; flex:0 0 260px; padding-right:16px; }
.brand img { width:100%; max-height:56px; }
.heading { min-width:190px; flex:1 1 auto; line-height:1.02; }
.heading span,.heading strong { font-size:clamp(18px,1.85vw,24px); }
.heading strong { margin-top:2px; }
.main-nav { gap:8px; flex:0 0 auto; }
.nav { width:72px; height:51px; border-radius:6px; }
.nav-icon { font-size:22px; line-height:23px; }
.nav small { font-size:9px; }
.clock { height:60px; min-width:86px; font-size:11px; gap:2px; }
.clock strong { font-size:15px; }
.online { min-width:55px; gap:4px; font-size:9px; }
.online i { width:19px; height:19px; }
.userbox { display:none !important; }
main { display:flex; flex-direction:column; gap:0; }
.rooms {
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,169px);
  gap:7px; margin:0 4px 8px;
}
.room { height:169px; border-radius:9px; }
.room-head { height:26px; padding:3px 10px; }
.room-head h3 { font-size:clamp(11px,1.03vw,14px); }
.state { font-size:clamp(8px,.72vw,10px); }
.state i { width:9px; height:9px; margin-right:3px; }
.room-visual { height:79px; }
.room-visual img { width:68%; object-position:center 54%; }
.temp { top:13px; right:8px; font-size:clamp(17px,1.55vw,23px); }
.defrost-pill { right:7px; bottom:7px; min-width:79px; padding:4px 5px; font-size:9px; line-height:1.2; }
.defrost-pill .glyph, .defrost-pill svg { width:18px; height:18px; }
.defrost-pill.with-alert { bottom:45px; right:7px; min-width:79px; }
.alert-pill { right:7px; bottom:5px; max-width:83px; padding:4px; font-size:9px; line-height:1.15; }
.alert-pill svg { width:14px; height:14px; }
.room-alert { height:23px; padding:5px 7px; font-size:9px; }
.mini-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.mini { min-height:38px; padding:2px 1px; font-size:clamp(7px,.63vw,9px); gap:1px; }
.mini b { font-size:clamp(8px,.68vw,10px); }
.mini .glyph { width:17px; height:18px; margin-bottom:0; }
.glyph { width:18px; height:18px; }
.detail {
  height:204px; min-height:204px; padding:6px 7px;
  border-radius:9px; margin:0 0 0;
}
.detail-head { height:24px; padding:0 6px 4px; gap:14px; }
.detail-head h2 { font-size:clamp(16px,1.45vw,21px); }
.detail-head .state { font-size:10px; }
.detail-grid {
  height:164px; grid-template-columns:21% 21% 13% minmax(0,1fr); gap:7px;
}
.detail-photo { min-height:0; height:164px; }
.detail-photo img { object-position:center; }
.metrics { min-height:0; }
.metric { min-height:0; padding:3px 5px; gap:3px; }
.metric span { font-size:clamp(8px,.65vw,10px); }
.metric b { font-size:clamp(10px,.82vw,13px); }
.metric .glyph { width:19px; height:20px; }
.status-stack { gap:3px; min-height:0; }
.status-item { padding:4px 4px 4px 32px; gap:2px; border-radius:5px; }
.status-item>.glyph { left:5px; width:22px; height:22px; }
.status-item small { font-size:9px; }
.status-item b { font-size:10px; }
.event-row { font-size:8px; }
.event-row span { padding:3px; }
.event-row b { font-size:8px; margin-top:1px; }
.chart-panel { padding:0 5px 3px; min-height:0; }
.chart-tabs { gap:2px; margin-bottom:4px; }
.chart-tabs button { height:22px; font-size:clamp(7px,.58vw,9px); padding:2px; }
.chart-tools { padding:0 2px 2px; font-size:8px; }
.chart-tools select { padding:2px 4px; font-size:8px; }
#trend { height:119px; min-height:119px; }
.demo-note { display:none; }
@media (max-width:900px) {
  .topbar { height:auto; min-height:73px; flex-wrap:wrap; }
  .brand { width:200px; flex-basis:200px; }
  .main-nav { gap:4px; }
  .nav { width:58px; }
  .rooms { grid-template-rows:repeat(2,minmax(150px,auto)); }
  .room { height:auto; min-height:150px; }
  .detail { height:auto; min-height:204px; }
  .detail-grid { height:auto; grid-template-columns:21% 21% 13% minmax(0,1fr); }
  .detail-photo { height:164px; }
}
@media (max-width:650px) {
  .rooms { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
  .room { min-height:169px; }
  .detail-grid { grid-template-columns:1fr 1fr; }
  .chart-panel { grid-column:1/-1; }
  .detail-photo { height:150px; }
}


/* Correcoes pontuais: indicadores sem corte, leituras alinhadas e degelo visivel */
.room.selected { border:1px solid #16aaff; }
.room-head { height:25px; }
.room-visual { height:82px; }
.room-alert { height:22px; padding:4px 7px; line-height:13px; }
.mini-grid { height:38px; min-height:38px; }
.mini {
  height:38px; min-height:0; padding:1px 1px 0; gap:0;
  font-size:8px; line-height:1; overflow:hidden;
}
.mini .glyph { width:14px; height:14px; min-height:14px; margin:0 auto; flex:0 0 14px; }
.mini b { font-size:9px; line-height:1.05; margin:0; white-space:nowrap; }

/* Temperatura em cima e estado do degelo compacto, lado a lado com o floco */
.room-visual .temp { top:8px; right:8px; z-index:3; line-height:1.05; }
.defrost-pill {
  position:absolute; right:7px; bottom:6px; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:4px;
  width:79px; min-width:79px; height:31px; padding:3px 4px;
  text-align:left; font-size:8px; line-height:1.1;
}
.defrost-pill .snow-icon { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; flex:0 0 17px; }
.defrost-pill .snow-icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.defrost-pill .defrost-copy { display:flex; flex-direction:column; align-items:flex-start; white-space:nowrap; font-size:8px; line-height:1.1; }
.defrost-pill .defrost-copy b { display:block; font-size:8px; line-height:1.1; margin:0 0 1px; }
.defrost-pill.with-alert { right:7px; bottom:6px; min-width:79px; }
/* O alarme nao pode cobrir o cartão de degelo: fica no canto inferior esquerdo. */
.alert-pill {
  left:7px; right:auto; bottom:5px; z-index:4;
  max-width:88px; padding:3px 4px; font-size:8px; line-height:1.1;
}
.alert-pill svg { width:13px; height:13px; }

/* A linha de cada variável tem três colunas: ícone, nome e leitura. */
.metric {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center; gap:5px; padding:3px 5px;
}
.metric .glyph { grid-column:1; grid-row:1; width:18px; height:19px; }
.metric span { grid-column:2; grid-row:1; min-width:0; line-height:1.1; }
.metric b { grid-column:3; grid-row:1; font-size:clamp(10px,.82vw,13px); line-height:1.1; }

@media (max-width:900px) {
  .mini-grid { height:38px; min-height:38px; }
  .mini { height:38px; min-height:0; }
}
@media (max-width:650px) {
  .mini-grid { height:38px; min-height:38px; }
  .mini { height:38px; }
  .defrost-pill { width:70px; min-width:70px; gap:3px; padding:3px; }
  .defrost-pill .snow-icon { width:15px; height:15px; flex-basis:15px; }
  .alert-pill { max-width:76px; }
  .metric { grid-template-columns:18px minmax(0,1fr) auto; gap:3px; }
}