/* =========================================================
   telas.css — escala fluida (telas grandes), cabeçalho no celular,
   estado de carregamento e seletor de modo. Carregado por último.
   Tudo em rem: o modo operacional em 16px é idêntico ao layout original.
   ========================================================= */

/* ---- Escala fluida: até Full HD nada muda; acima disso o painel cresce de forma proporcional,
        em vez de ficar pequeno no centro da tela (2560 ≈ 20px, 3840 ≈ 28px de base). */
@media (min-width:1920px){
  html{font-size:clamp(16px,calc(16px + (100vw - 1920px) * .00625),36px)}
}
.wrap{max-width:120rem}

/* ---- Cabeçalho: bloco de botões não pode passar da largura da tela */
.tt{min-width:0}
.tt b,.tt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1279px){.unit{display:none}}
@media (max-width:1100px){.live em{display:none}.live{padding:.6rem}.btn.pri span{display:none}}
@media (max-width:640px){
  .bar{height:auto;min-height:4rem;flex-wrap:wrap;padding:.5rem 1rem;row-gap:.5rem}
  .tt{flex:1}
  .bar-r{width:100%;margin-left:0;justify-content:flex-end}
  html{scroll-padding-top:7rem}
}

/* ---- Estado de carregamento (reserva o espaço e evita saltos de layout) */
@keyframes brilho{0%{background-position:100% 0}100%{background-position:-100% 0}}
.sk-l,.sk-blk{display:block;height:.8rem;margin:.7rem 0;border-radius:99px;
  background:linear-gradient(90deg,var(--trk) 30%,color-mix(in srgb,var(--trk) 40%,var(--surf)) 50%,var(--trk) 70%) 0 0/300% 100%;animation:brilho 1.4s linear infinite}
.sk-blk{height:15.6rem;margin:0;border-radius:.75rem}
.kpi.sk{min-height:7rem;padding:1.25rem}
.fc.sk{min-height:12rem}
.dark .sk-l{background:linear-gradient(90deg,#ffffff1f 30%,#ffffff3d 50%,#ffffff1f 70%) 0 0/300% 100%}
.card .sk-l:first-child{margin-top:0}
body.sem-dados .sk-l,body.sem-dados .sk-blk{animation:none}

/* ---- Seletor de modo: Operacional | Modo TV */
.modo{display:inline-flex;padding:.2rem;border:1px solid var(--bd);border-radius:.75rem;background:var(--in)}
.modo button{border:0;background:transparent;border-radius:.55rem;padding:.4rem .8rem;font-size:.75rem;font-weight:700;color:var(--mut);transition:.2s;white-space:nowrap}
.modo button:hover{color:var(--tx)}
.modo button[aria-pressed="true"]{background:var(--pri);color:#fff;box-shadow:0 .25rem .75rem color-mix(in srgb,var(--pri) 30%,transparent)}
.tvonly{display:none}
@media (max-width:640px){.modo{display:none}}   /* celular fica sempre no modo operacional */

/* ---- Ajustes pontuais */
.hero h1{overflow-wrap:anywhere}                 /* nomes longos (ex.: cia.monitoramento) não estouram o banner no celular */
@media (min-width:1024px){.mb{display:none}}     /* o botão de menu só existe quando o menu lateral some (celular/tablet) */