:root{
  /* ---- IDENTIDADE INDÚSTRIA SANTA CLARA (hex extraídos do site oficial) ---- */
  --navy:#0D1461;        /* AZUL PADRÃO SANTA CLARA */
  --navy2:#1B2490;       /* tint do azul padrão, para ícones e realces */
  --navy3:#2E3AB8;       /* tint claro, para hover */
  --teal:#00AF8D;        /* verde Santa Clara */
  --teal-esc:#0B615C;    /* verde escuro Santa Clara */
  --turquesa:#3AD9BC;    /* tint do verde, legível sobre o azul padrão */
  --magenta:#EE2B79;     /* magenta Santa Clara (call-to-action) */
  /* ---- semânticas operacionais (NÃO seguem a marca, seguem segurança) ---- */
  --vermelho:#DC2626; --laranja:#B45309; --indigo:#7C3AED;
  /* ---- neutros ---- */
  --azul:var(--navy2); --azul-escuro:var(--navy); --azul-claro:#E4E6F4; --verde:var(--teal); --roxo:var(--indigo);
  --cinza:#64748B;
  --fundo:#F2F5F9; --painel:#FFFFFF; --borda:#E2E8F0; --texto:#0F172A; --texto2:#475569;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,'Inter',Arial,sans-serif;
  background:var(--fundo); color:var(--texto); overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:none}

/* ===== barra de modo (não aparece na TV em fullscreen) ===== */
#modebar{
  position:fixed; bottom:10px; right:12px; z-index:99; display:flex; gap:6px;
  background:var(--navy); border:1px solid rgba(255,255,255,.14); border-radius:10px;
  padding:5px; box-shadow:0 6px 20px rgba(11,20,55,.3);
}
#modebar button{
  background:transparent; color:rgba(255,255,255,.7); font-size:12px; font-weight:700;
  padding:7px 12px; border-radius:7px; letter-spacing:.03em;
}
#modebar:hover{opacity:1}

/* ===== faixa de teste da API (SO PARA VALIDACAO, remover depois) ===== */
#testebar{
  background:#1E293B; color:#fff; display:flex; align-items:center; gap:10px;
  padding:6px 14px; font-size:12px; font-weight:600;
}
#testebar .lbl{
  color:var(--turquesa); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:11px; margin-right:4px;
}
#testebar label{display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.7)}
#testebar input[type=date]{
  background:rgba(255,255,255,.1); color:#fff; font-size:12px; font-weight:600;
  border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:4px 7px;
  color-scheme:dark;
}
#testebar button{
  background:var(--teal); color:#fff; font-size:11.5px; font-weight:800;
  padding:5px 12px; border-radius:6px; letter-spacing:.04em;
}
body.fullscreen-tv #testebar{display:none}

.view{display:none; height:100vh}
.view.on{display:flex; flex-direction:column}

/* ================= DASHBOARD TV ================= */
#tv{padding:1.1vh 1.1vw; gap:1vh}

.tv-head{
  background:var(--navy); border-radius:14px; padding:1.1vh 1.6vw;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 4px 18px rgba(11,20,55,.22); position:relative; overflow:hidden;
}
.tv-head::after{content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--magenta) 100%)}
.tv-head{background:linear-gradient(100deg,#0D1461 0%,#151C7A 55%,#0D1461 100%)}
.marca{display:flex; align-items:center; gap:1.1vw}
.marca .logo{flex:none; display:block}
.marca .logo svg{height:5.2vh; width:auto; display:block}
.marca .divisor{width:2px; height:5vh; background:rgba(255,255,255,.22)}
.tv-head h1{font-size:2.9vh; font-weight:800; color:#fff; letter-spacing:-.01em; line-height:1.1}
.tv-head p{font-size:1.6vh; color:rgba(255,255,255,.62); margin-top:.3vh; letter-spacing:.02em}
.tv-clock{text-align:right; display:flex; align-items:center; gap:1.6vw}
.tv-clock .hora{font-size:4.4vh; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; line-height:1}
.tv-clock .data{font-size:1.6vh; color:rgba(255,255,255,.68); font-weight:600; text-transform:capitalize}
.upd{display:flex; align-items:center; gap:.5vw; font-size:1.45vh; color:var(--turquesa); font-weight:700; margin-top:.5vh; justify-content:flex-end}
.dot{width:.9vh;height:.9vh;border-radius:50%;background:var(--turquesa);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:.9vw}
.kpi{
  background:var(--painel); border-radius:12px; padding:1.1vh 1.2vw;
  display:flex; align-items:center; justify-content:space-between;
  border-top:6px solid var(--c); box-shadow:0 2px 10px rgba(13,63,143,.06);
}
.kpi .lbl{font-size:1.55vh; font-weight:800; color:var(--texto2); letter-spacing:.06em; text-transform:uppercase}
.kpi .val{font-size:6.2vh; font-weight:800; color:var(--c); line-height:.95; font-variant-numeric:tabular-nums}

/* area = tabela de hoje + coluna estreita de amanha */
.area{display:grid; grid-template-columns:1fr clamp(230px,17vw,340px); gap:.9vw; flex:1; min-height:0}

.panel.amanha{min-height:0}
.panel.amanha .panel-head{padding:1.1vh 1vw}
.amanha-body{overflow:hidden; padding:.5vh .6vw}
.amanha-row{
  display:flex; align-items:center; gap:.6vw; padding:1.1vh .7vw;
  border-bottom:1px solid #EEF2F7; border-left:4px solid var(--c,#CBD5E1);
}
.amanha-row .pl{font-weight:800; font-size:1.85vh; letter-spacing:.02em; flex:none}
.amanha-row .cl{
  font-size:1.6vh; color:var(--texto2); font-weight:600; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.amanha-row .hr{font-size:1.7vh; font-weight:800; font-variant-numeric:tabular-nums; flex:none}
.amanha-vazio{padding:3vh 1vw; text-align:center; color:#94A3B8; font-size:1.7vh; font-weight:600}

/* painel principal */
.panel{
  background:var(--painel); border-radius:14px; flex:1; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 2px 14px rgba(13,63,143,.07);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1vh 1.4vw; border-bottom:2px solid var(--borda);
}
.panel-head h2{font-size:2.4vh; font-weight:800; color:var(--azul-escuro); letter-spacing:.02em}
.pager{display:flex; align-items:center; gap:.8vw; font-size:1.6vh; font-weight:700; color:var(--texto2)}
.pager .pill{background:var(--azul-claro); color:var(--azul-escuro); padding:.5vh 1vw; border-radius:99px}
.pgdots{display:flex; gap:.4vw}
.pgdots i{width:1vh;height:1vh;border-radius:50%;background:#CBD5E1;display:block}
.pgdots i.on{background:var(--azul); width:2.6vh; border-radius:99px}

#tv table{width:100%; border-collapse:collapse; table-layout:fixed}
#tv thead th{
  font-size:1.5vh; text-transform:uppercase; letter-spacing:.09em; color:var(--texto2);
  font-weight:800; text-align:left; padding:1vh 1.2vw; background:#F8FAFC; border-bottom:2px solid var(--borda);
}
#tv tbody{color:var(--texto)}
#tv tbody td{padding:0 1.2vw; border-bottom:1px solid #EEF2F7; font-size:2.1vh; vertical-align:middle}
/* 10 linhas (PAGE) precisam caber inteiras: uma linha cortada no rodape faz
   a pessoa achar que tem carga escondida que a paginacao nao mostra. */
#tv tbody tr{height:6.3vh}
#tv tbody tr.alerta{background:#FEF2F2}
#tv tbody tr.flash{animation:flash 1.6s ease-in-out 4}
@keyframes flash{0%,100%{box-shadow:inset 0 0 0 0 rgba(220,38,38,0)}50%{box-shadow:inset 0 0 0 4px rgba(220,38,38,.55)}}

/* estado vazio da tabela */
#tv tbody tr.vazio{height:auto}
#tv tbody tr.vazio td{padding:7vh 1.2vw; text-align:center; border-bottom:none}
.vz-t{font-size:3vh; font-weight:800; color:var(--azul-escuro)}
.vz-s{font-size:1.9vh; color:var(--texto2); font-weight:600; margin-top:.8vh}

.cel-cam{display:flex; align-items:center; gap:.6vw; min-width:0}
.cel-cam svg{width:3.6vh; height:auto; flex:none}
/* A placa e o dado que identifica o caminhao no patio: nao pode truncar. */
.placa{font-weight:800; font-size:2.1vh; letter-spacing:.02em; white-space:nowrap}
.carga{font-weight:800; color:var(--azul-escuro); font-size:1.9vh; white-space:nowrap}
/* Cliente pode ser razao social longa: limita a 2 linhas em vez de esticar
   a altura da linha e derrubar quantas cargas cabem na tela. */
.cliente{font-weight:600; line-height:1.2}
.cliente .nm{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.transp{font-size:1.6vh; color:var(--texto2); font-weight:600}
.hora-col{font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.hora-real{display:block; font-size:1.5vh; color:var(--texto2); font-weight:700}
.desvio{display:block; font-size:1.4vh; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.desvio.adiantado{color:var(--verde)}
.desvio.atrasado{color:var(--vermelho)}
.desvio.pontual{color:var(--texto2)}

#tv .badge{
  padding:.5vh .8vw; border-radius:8px; font-size:1.4vh;
  white-space:nowrap; text-align:center; line-height:1.3; max-width:100%;
}
.badge{
  display:inline-block; padding:4px 8px; border-radius:6px; font-size:11px;
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  background:var(--bg); color:var(--fg);
}
.badge.flat{background:transparent; padding:0}
#tv .badge.flat{background:transparent; padding:0}
/* Pendencia tambem limitada a 2 linhas, pelo mesmo motivo do cliente.
   O clamp vai num span interno: aplicado na propria celula ele troca o
   display da <td> e quebra o vertical-align:middle da linha. */
.pend{font-weight:800; color:var(--vermelho); font-size:1.7vh; line-height:1.25}
.pend span{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.pend.none{color:#94A3B8; font-weight:600}