/* =========================================================
   Mural Digital — tela da TV
   Tema FibraMAX (mesma paleta do /admin e do ISP Manager),
   ajustado para leitura a distancia: tipos grandes, pouco cromo,
   contraste alto o bastante para TV em corredor com sol.
   ========================================================= */
:root{
  --ink:#0a1310;          /* fundo (bg do FibraMAX) */
  --ink-2:#13231a;        /* superficie / cartao */
  --ink-3:#0f1c15;        /* faixa inferior */
  --green:#22c55e;        /* acento da marca */
  --green-2:#16a34a;
  --paper:#e9f1ec;        /* texto claro */
  --muted:#8ba396;
  --alert:#ef4444;
  --border:#26402f;
  --faixa-h:11vh;
  --rail-h:5px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  cursor:none;
}

/* ---------- trilha de progresso (assinatura) ---------- */
.rail{
  position:fixed;top:0;left:0;right:0;height:var(--rail-h);
  display:flex;gap:3px;padding:0 3px;z-index:40;
  background:rgba(0,0,0,.35);
}
.rail .seg{flex:1;background:rgba(233,241,236,.14);position:relative;overflow:hidden;border-radius:0 0 2px 2px}
.rail .seg.done::after{content:"";position:absolute;inset:0;background:var(--green-2)}
.rail .seg.now::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--green);
  animation:fill var(--dur,10s) linear forwards;
}
@keyframes fill{from{width:0}to{width:100%}}

/* ---------- palco ---------- */
.stage{position:fixed;inset:0 0 var(--faixa-h) 0;z-index:10;background:var(--ink)}
.slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity .7s ease;
  display:flex;align-items:center;justify-content:center;
}
.slide.on{opacity:1}
.slide img,.slide video{width:100%;height:100%;object-fit:contain;background:var(--ink)}
.slide.cover img,.slide.cover video{object-fit:cover}

/* legenda opcional sobre a midia */
.legenda{
  position:absolute;left:0;right:0;bottom:0;
  padding:8vh 5vw 4vh;
  background:linear-gradient(transparent,rgba(10,19,16,.92));
  font-size:2.6vw;font-weight:600;letter-spacing:-.01em;line-height:1.2;
}

/* ---------- aviso em texto (cartao tipografico) ---------- */
.aviso-card{
  width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:6vh 7vw;background:var(--ink-2);
  border-left:1.2vw solid var(--green);
}
.aviso-card.urgente{border-left-color:var(--alert);background:#1c1416}
.aviso-eyebrow{
  font-size:1.3vw;letter-spacing:.42em;text-transform:uppercase;
  color:var(--green);margin-bottom:3vh;font-weight:700;
}
.aviso-card.urgente .aviso-eyebrow{color:var(--alert)}
.aviso-titulo{
  font-size:6vw;line-height:1.02;font-weight:800;letter-spacing:-.03em;
  margin:0 0 3vh;max-width:22ch;
}
.aviso-corpo{
  font-size:2.6vw;line-height:1.42;font-weight:400;color:#cddbd3;
  max-width:40ch;white-space:pre-wrap;
}

/* ---------- noticia ---------- */
/* Foto cobrindo a tela + degrade forte embaixo. A manchete PRECISA continuar
   legivel sobre qualquer foto — por isso o degrade e opaco na base, e nao
   um veu leve por cima da imagem inteira. */
.slide.noticia{
  display:block;background:var(--ink-2);
}
.noticia-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.noticia-caixa{
  position:absolute;left:0;right:0;bottom:0;
  /* nunca passa de ~3/4 da tela: garante que o texto caiba e nao seja
     cortado pela borda inferior nem invada a parte de cima da foto */
  max-height:76%;
  padding:6vh 6vw 4vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.slide.noticia.com-foto .noticia-caixa{
  background:linear-gradient(transparent,rgba(10,19,16,.72) 30%,rgba(10,19,16,.97));
}
/* sem foto: o texto ocupa a tela toda, como um aviso */
.slide.noticia:not(.com-foto) .noticia-caixa{
  inset:0;max-height:none;justify-content:center;padding:6vh 7vw;
  border-left:1.2vw solid var(--green);
}
.noticia-fonte{
  font-size:clamp(11px,1.15vw,20px);letter-spacing:.4em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:1.6vh;
}
/* Titulo: no maximo 3 linhas, com reticencias limpas no fim de uma palavra —
   nunca corta no meio do texto de forma feia. Tamanho proporcional (clamp). */
.noticia-titulo{
  font-size:clamp(26px,3.4vw,58px);line-height:1.08;font-weight:800;
  letter-spacing:-.02em;margin:0;max-width:26ch;
  text-shadow:0 .3vh 2vh rgba(0,0,0,.6);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.slide.noticia:not(.com-foto) .noticia-titulo{
  font-size:clamp(30px,4.6vw,72px);max-width:22ch;-webkit-line-clamp:4;
}
/* Resumo: no maximo 3 linhas, mesmo tratamento */
.noticia-resumo{
  font-size:clamp(15px,1.7vw,28px);line-height:1.38;color:#cddbd3;
  margin-top:1.6vh;max-width:56ch;
  text-shadow:0 .2vh 1.4vh rgba(0,0,0,.6);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}
.slide.noticia:not(.com-foto) .noticia-resumo{-webkit-line-clamp:4}

/* ---------- clima ---------- */
.slide.clima{
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%, #12362a 0, var(--ink) 62%);
}
.clima-caixa{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4vh}
.clima-emoji{font-size:clamp(60px,11vw,190px);line-height:1}
.clima-temp{font-size:clamp(70px,13vw,230px);font-weight:800;line-height:.95;
  letter-spacing:-.03em;color:var(--paper)}
.clima-desc{font-size:clamp(22px,3vw,52px);font-weight:600;color:var(--green)}
.clima-meta{font-size:clamp(15px,1.9vw,32px);color:var(--muted);margin-top:1.5vh}
.clima-cidade{font-size:clamp(14px,1.5vw,26px);letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);margin-top:2.5vh}

/* ---------- emergencia (fura a fila) ---------- */
.slide .emergencia-card{
  width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:6vh 7vw;background:#2a0e0e;
  border-left:1.6vw solid var(--alert);
  animation:emerg-pulsa 1.6s ease-in-out infinite;
}
@keyframes emerg-pulsa{
  0%,100%{background:#2a0e0e}
  50%{background:#3a1212}
}
.emergencia-tarja{
  font-size:clamp(14px,1.6vw,28px);letter-spacing:.3em;text-transform:uppercase;
  color:#fff;background:var(--alert);font-weight:800;
  align-self:flex-start;padding:.7vh 1.4vw;border-radius:4px;margin-bottom:3vh;
}
.emergencia-titulo{
  font-size:clamp(36px,6vw,110px);line-height:1.02;font-weight:800;
  letter-spacing:-.02em;margin:0 0 3vh;max-width:20ch;color:#fff;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.emergencia-corpo{
  font-size:clamp(20px,2.9vw,52px);line-height:1.35;color:#ffdede;max-width:38ch;
  white-space:pre-wrap;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}
@media (prefers-reduced-motion:reduce){
  .slide .emergencia-card{animation:none}
}

/* ---------- marca ---------- */
/* logo ja recolorido p/ fundo escuro (fibramax.png): o "Fibra" preto virou
   claro e o verde ficou. Sem caixa branca — a marca aparece direto,
   destacada, com sombra sutil p/ dar profundidade. */
.marca{
  display:inline-flex;align-items:center;line-height:0;flex:none;
  filter:drop-shadow(0 .3vh 1vh rgba(0,0,0,.55));
}
.marca img{height:6.5vh;width:auto;display:block}

/* ---------- boot / vazio ---------- */
.boot,.vazio{
  position:fixed;inset:0 0 var(--faixa-h) 0;z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--ink);text-align:center;gap:1.4vh;
}
.boot[hidden],.vazio[hidden]{display:none}
.boot .marca,.vazio .marca{margin-bottom:2.8vh}
.boot .marca img,.vazio .marca img{height:10vh}
.boot-mark,.vazio-mark{
  font-size:4.4vw;font-weight:800;letter-spacing:-.02em;
}
.boot-sub{color:var(--muted);font-size:1.5vw;letter-spacing:.16em;text-transform:uppercase}
.vazio p{font-size:2vw;margin:.6vh 0;color:var(--paper)}
.vazio span{color:var(--muted);font-size:1.4vw}

/* ---------- faixa inferior ---------- */
.faixa{
  position:fixed;left:0;right:0;bottom:0;height:var(--faixa-h);z-index:35;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.5vw;
  padding:0 2.5vw;background:var(--ink-3);
  border-top:2px solid var(--green);
}
.faixa-id{display:flex;align-items:center;gap:1.2vw;min-width:0}
.faixa-textos{display:flex;flex-direction:column;justify-content:center;line-height:1.1;white-space:nowrap}
/* nome do condominio: sozinho na faixa (sem subtitulo), tamanho limitado por
   clamp p/ ficar proporcional em qualquer tela */
.faixa-nome{font-size:clamp(20px,2.2vw,40px);font-weight:800;letter-spacing:-.01em}

.faixa-avisos{overflow:hidden;position:relative;height:100%;display:flex;align-items:center}
.avisos-trilho{display:flex;gap:5vw;white-space:nowrap;will-change:transform}
.avisos-trilho .av{font-size:1.7vw;font-weight:500;color:#d8e4dd}
.avisos-trilho .av.urgente{color:#fca5a5;font-weight:700}
.avisos-trilho .av b{color:var(--green);font-weight:800;margin-right:.6vw}

.faixa-hora{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
/* relogio e data um pouco menores, proporcionais via clamp */
.hora{font-size:clamp(16px,1.9vw,30px);font-weight:700;letter-spacing:.02em;
      font-variant-numeric:tabular-nums}
.data{font-size:clamp(9px,.8vw,15px);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- estado da conexao ---------- */
/* Discreto de proposito: quem passa na portaria nao precisa entender,
   mas quem esta procurando defeito ve na hora que a TV perdeu o servidor. */
.sinal{
  font-size:.9vw;letter-spacing:.18em;text-transform:uppercase;
  color:var(--alert);font-weight:700;margin-bottom:.3vh;
}
.sinal[hidden]{display:none}

/* ---------- modo previa (aberto dentro do painel) ---------- */
.modo-preview .faixa{border-top-color:var(--muted)}
.modo-preview .faixa-sub{color:var(--muted)}
.modo-preview::after{
  content:"PRÉVIA";
  position:fixed;top:1.4vh;right:1.4vw;z-index:60;
  background:var(--green);color:#08190f;
  font-size:1.1vw;font-weight:800;letter-spacing:.24em;
  padding:.5vh 1vw;border-radius:3px;
}

/* telas pequenas (previa em notebook/celular).
   Os tamanhos de fonte ja sao clamp(), entao aqui so ajusto o que e layout. */
@media (max-width:900px){
  .aviso-titulo{font-size:9vw}
  .aviso-corpo{font-size:4.2vw}
  .aviso-eyebrow{font-size:2.6vw}
  .faixa-nome{font-size:4vw}
  .avisos-trilho .av{font-size:3.2vw}
  .boot-mark,.vazio-mark{font-size:8vw}
  .boot-sub{font-size:3vw}
  .sinal{font-size:2vw}
  .modo-preview::after{font-size:2.4vw}
  .marca img{height:4vh}
  .faixa{gap:1.5vw}
}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
  .rail .seg.now::after{animation:none;width:100%}
}