/* =========================================================
   tv.css — Modo TV / Painel de exibição (html[data-modo="tv"])
   Mesmos componentes, dados e identidade visual; só muda a apresentação.
   A base de fonte acompanha a LARGURA da tela (1,25vw): a composição é a mesma em
   Full HD, QHD e 4K (≈ 80rem de largura), e o texto cresce junto com a resolução.
   Só vale acima de 640px: celular nunca entra no modo TV.
   ========================================================= */
@media (min-width:641px){
html[data-modo="tv"]{font-size:clamp(17px,1.25vw,60px)}

/* menos elementos administrativos */
html[data-modo="tv"] .side,html[data-modo="tv"] .scrim,html[data-modo="tv"] .mb,
html[data-modo="tv"] .unit,html[data-modo="tv"] #historico,html[data-modo="tv"] #logout,
html[data-modo="tv"] #add,html[data-modo="tv"] .acts,html[data-modo="tv"] .fch .mini,
html[data-modo="tv"] .ph .btn,html[data-modo="tv"] .note,html[data-modo="tv"] .hero .eyebrow{display:none!important}
html[data-modo="tv"]:not(.tv-filtro) .flt{display:none}   /* se houver busca/filtro ativo, continua visível */
html[data-modo="tv"] .tvonly{display:inline-flex;align-items:center}

/* estrutura em largura total */
html[data-modo="tv"] .main{margin-left:0}
html[data-modo="tv"] .bar{height:4.25rem;padding:0 2rem}
html[data-modo="tv"] .tt b{font-size:1.25rem}
html[data-modo="tv"] .tt small{font-size:.85rem}
html[data-modo="tv"] .bar-r{gap:.75rem}
html[data-modo="tv"] .bar .btn,html[data-modo="tv"] .modo button,html[data-modo="tv"] .live{font-size:.8rem}
html[data-modo="tv"] #tvClock{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;padding:0 .25rem}
html[data-modo="tv"] .wrap{max-width:none;padding:1.5rem 2rem 2rem}

/* faixa de boas-vindas compacta */
html[data-modo="tv"] .hero{min-height:8rem}
html[data-modo="tv"] .hin{min-height:8rem;padding:1.25rem 2rem;justify-content:center;gap:.5rem}
html[data-modo="tv"] .hero h1{font-size:2.4rem}
html[data-modo="tv"] .htx{max-width:34rem;font-size:1.05rem}
html[data-modo="tv"] .meta{font-size:.9rem}

/* indicadores em destaque */
html[data-modo="tv"] .kpis{gap:1rem;margin-top:1.25rem}
html[data-modo="tv"] .kpi{min-height:8rem;padding:1.4rem 1.25rem 1.2rem 6.5rem;border-radius:1.1rem}
html[data-modo="tv"] .kpi p{font-size:1.1rem}
html[data-modo="tv"] .kpi b{font-size:3.4rem;margin-top:.1rem}
html[data-modo="tv"] .kpi small{font-size:.95rem;margin-top:.6rem}
html[data-modo="tv"] .kic{left:1.25rem;top:1.4rem;width:4rem;height:4rem;border-radius:1.1rem}
html[data-modo="tv"] .kic .i{width:1.9rem;height:1.9rem}
html[data-modo="tv"] .kbar{height:.5rem}

/* painéis */
html[data-modo="tv"] .duo,html[data-modo="tv"] .cols{gap:1.5rem;margin-top:1.5rem}
html[data-modo="tv"] .duo{grid-template-columns:minmax(0,1fr)}
@media (min-width:1101px){html[data-modo="tv"] .duo{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
/* cards de status em uma faixa de 4 colunas acima das frentes: aproveita a largura inteira */
html[data-modo="tv"] .cols{grid-template-columns:minmax(0,1fr)}
html[data-modo="tv"] .side2{order:-1;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
html[data-modo="tv"] .side2 .card{display:flex;flex-direction:column}
html[data-modo="tv"] .ph{padding:1.25rem 1.5rem}
html[data-modo="tv"] .ph h2{font-size:1.4rem}
html[data-modo="tv"] .ph p{font-size:.95rem}
html[data-modo="tv"] .minimap{min-height:22rem;grid-template-columns:minmax(0,1fr) 13rem}
html[data-modo="tv"] #miniMapEl{min-height:22rem}
html[data-modo="tv"] .minileg{font-size:1rem;padding:1.25rem;gap:.9rem}
html[data-modo="tv"] .prod{padding:1.25rem 1.5rem}
html[data-modo="tv"] .pchart{height:19rem;grid-template-columns:2.5rem minmax(0,1fr)}
html[data-modo="tv"] .pyax{font-size:.85rem;padding-bottom:3.2rem}
html[data-modo="tv"] .pgrid{bottom:3.2rem}
html[data-modo="tv"] .plb{height:3.2rem;line-height:1.1;font-size:.66rem;white-space:normal;overflow:hidden;overflow-wrap:anywhere;display:flex;align-items:flex-start;justify-content:center;padding-top:.3rem}
html[data-modo="tv"] .pgrp{width:100%;min-width:0;gap:.5rem}
html[data-modo="tv"] .pcol{flex:1 1 0;width:auto;min-width:3.2rem}
html[data-modo="tv"] .plb{max-width:100%}
html[data-modo="tv"] .pb{width:.8rem}
html[data-modo="tv"] .pleg{font-size:.95rem;gap:1.25rem}

/* frentes / fazendas / equipamentos */
html[data-modo="tv"] .tabs{padding:1rem 1.5rem}
html[data-modo="tv"] .tab{font-size:.95rem;padding:.4rem 1.1rem}
html[data-modo="tv"] #grid{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:1.25rem;padding:1.5rem}
html[data-modo="tv"] .fc{padding:1.25rem}
html[data-modo="tv"] .fct h3{font-size:1.45rem}
html[data-modo="tv"] .fct small{font-size:.9rem}
html[data-modo="tv"] .ring{width:3.6rem;height:3.6rem}
html[data-modo="tv"] .ring b{font-size:.9rem}
html[data-modo="tv"] .bar2{height:.5rem}
html[data-modo="tv"] .leg{font-size:.85rem}
html[data-modo="tv"] .leg .dot{width:.55rem;height:.55rem}
html[data-modo="tv"] .fz{padding:.85rem}
html[data-modo="tv"] .fzn{font-size:1.05rem}
html[data-modo="tv"] .fzn small{font-size:.85rem}
html[data-modo="tv"] .pinc .i{width:1rem;height:1rem}
html[data-modo="tv"] .sq{min-width:4.6rem;padding:.55rem .75rem;border-radius:.65rem}
html[data-modo="tv"] .sq b{font-size:1.15rem}
html[data-modo="tv"] .sq small{font-size:.75rem}

/* cards laterais */
html[data-modo="tv"] .side2{gap:1.5rem}
html[data-modo="tv"] .card{padding:1.5rem}
html[data-modo="tv"] .card h2{font-size:1.2rem}
html[data-modo="tv"] .card .sub{font-size:.9rem}
html[data-modo="tv"] .fl{gap:.85rem;margin:1.1rem 0}
html[data-modo="tv"] .dn{width:6rem;height:6rem}
html[data-modo="tv"] .dn div{inset:.65rem}
html[data-modo="tv"] .dn b{font-size:1.5rem}
html[data-modo="tv"] .dn span{font-size:.8rem}
html[data-modo="tv"] .lg div{font-size:.9rem;gap:.4rem}
html[data-modo="tv"] .lg{min-width:0}
html[data-modo="tv"] .tnq .lg{grid-template-columns:1fr;gap:.5rem}
html[data-modo="tv"] .bar3{height:.65rem}
html[data-modo="tv"] .dark .l{font-size:.9rem}
html[data-modo="tv"] .dark .v{font-size:1.65rem}
html[data-modo="tv"] .gar .v{font-size:1.45rem}
html[data-modo="tv"] .dark .ft{font-size:.95rem}
html[data-modo="tv"] .dark .tag{font-size:.8rem}
html[data-modo="tv"] .dark .ic{width:3rem;height:3rem}
html[data-modo="tv"] .gar .sqs,html[data-modo="tv"] .tnq .sqs{margin-top:1.1rem}
html[data-modo="tv"] .empty{font-size:1.1rem}

/* janelas estreitas no Modo TV (tablet/janela pequena): empilha os blocos e deixa o cabeçalho quebrar linha */
@media (max-width:1100px){
  html[data-modo="tv"] .side2{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-modo="tv"] .bar{flex-wrap:wrap;height:auto;min-height:4.25rem;padding:.6rem 1.25rem;row-gap:.5rem}
  html[data-modo="tv"] .tt{flex:1}
  html[data-modo="tv"] .bar-r{flex-wrap:wrap;justify-content:flex-end}
}
@media (max-width:760px){html[data-modo="tv"] .side2{grid-template-columns:minmax(0,1fr)}}
}