:root {
  --navy: #00306D; --azul: #0A5CA8; --ceu: #29ABE2; --laranja: #F79113; --laranja-esc: #D97700;
  --tinta: #1D2738; --suave: #5B6475; --linha: #E3E8F0; --fundo: #F3F5F9; --branco: #fff;
  --verde: #12805C; --verm: #C62828; --amarelo: #B7791F;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--tinta); font: 14px/1.5 Inter, system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: Poppins, Inter, sans-serif; margin: 0 0 .5em; line-height: 1.25; color: var(--navy); }
h2 { font-size: 20px; } h3 { font-size: 16px; } h4 { font-size: 14px; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* topo */
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 0 18px; min-height: 58px; background: var(--navy); color: #fff; flex-wrap: wrap; }
.topo .marca { display: flex; align-items: center; gap: 10px; font: 700 16px Poppins; white-space: nowrap; }
.topo .marca img { height: 34px; background: #fff; border-radius: 8px; padding: 3px 6px; }
.topo nav { display: flex; gap: 2px; flex-wrap: wrap; }
.topo nav a { color: rgba(255,255,255,.82); padding: 7px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13.5px; }
.topo nav a.on, .topo nav a:hover { background: rgba(255,255,255,.13); color: #fff; }
.topo .quem { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.topo .quem .papel { background: var(--laranja); border-radius: 20px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; }
.topo .quem button { background: rgba(255,255,255,.13); border: 0; color: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer; }

.pagina { max-width: 1440px; margin: 0 auto; padding: 22px 18px 120px; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 18px; margin-bottom: 16px; min-width: 0; }
.cartao > h3:first-child { margin-top: 0; }
.linha-tit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.linha-tit h2 { margin: 0; } .linha-tit .dir { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sub { color: var(--suave); font-size: 13px; }
.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-lado { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (max-width: 1000px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-lado { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .pagina { padding: 14px 12px 100px; } }

/* botões e campos */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 8px 15px; background: var(--laranja); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 13.5px; }
.btn:hover { background: var(--laranja-esc); }
.btn.sec { background: var(--navy); } .btn.sec:hover { background: #00224f; }
.btn.claro { background: #fff; color: var(--navy); border: 1.5px solid #C9D2E0; } .btn.claro:hover { border-color: var(--navy); }
.btn.verde { background: #1FAF5A; } .btn.verde:hover { background: #178a47; }
.btn.perigo { background: #fff; color: var(--verm); border: 1.5px solid #F0C4C0; }
.btn.mini { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--suave); }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1.5px solid #CBD3E0; border-radius: 9px; background: #fff; min-width: 0; }
input[type=checkbox], input[type=radio] { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ceu); box-shadow: 0 0 0 3px rgba(41,171,226,.18); }
textarea { min-height: 70px; resize: vertical; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.filtros .campo { min-width: 150px; flex: 1 1 150px; max-width: 260px; }
.chk { display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-sel { border: 1.5px solid #CBD3E0; background: #fff; border-radius: 20px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; }
.chip-sel.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.seg { display: inline-flex; border: 1.5px solid #CBD3E0; border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--suave); }
.seg button.on { background: var(--navy); color: #fff; }

/* etiquetas */
.tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; }
.tag.cinza { background: #E8ECF3; color: var(--suave); }
.alerta { display: inline-block; border-radius: 6px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; margin: 2px 4px 2px 0; }
.alerta.alto { background: #FDE8E8; color: #A61B1B; } .alerta.medio { background: #FFF3DC; color: #8A5A00; } .alerta.baixo { background: #EEF1F6; color: var(--suave); }

/* tabelas */
.tabela-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); padding: 8px; border-bottom: 2px solid var(--linha); white-space: nowrap; }
table.t td { padding: 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: #F6F9FD; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* KPIs */
.kpi { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; }
.kpi .rot { font-size: 12px; color: var(--suave); font-weight: 600; }
.kpi .val { font: 700 26px Poppins; color: var(--navy); margin: 2px 0; }
.kpi .dif { font-size: 12px; } .dif.sobe { color: var(--verde); } .dif.desce { color: var(--verm); } .dif.igual { color: var(--suave); }
.barras .item { display: grid; grid-template-columns: minmax(110px, 200px) 1fr 44px; gap: 8px; align-items: center; margin: 5px 0; font-size: 12.5px; }
.barras .trilho { background: #EEF1F6; border-radius: 6px; height: 14px; overflow: hidden; }
.barras .enche { height: 100%; border-radius: 6px; background: var(--ceu); }
.serie { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; border-bottom: 1px solid var(--linha); }
.serie .col { flex: 1; background: var(--ceu); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.serie .col.ok { background: #1FAF5A; }
.serie-rot { display: flex; gap: 3px; font-size: 10px; color: var(--suave); } .serie-rot span { flex: 1; text-align: center; overflow: hidden; }

/* funil / quadro */
.funil { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.funil .etapa { border-radius: 12px; padding: 10px 12px; color: #fff; cursor: pointer; }
.funil .etapa b { display: block; font: 700 24px Poppins; }
.quadro { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.quadro .col { flex: 0 0 250px; background: #EAEFF6; border-radius: 12px; padding: 8px; max-height: 70vh; overflow-y: auto; }
.quadro .col h4 { display: flex; justify-content: space-between; margin: 2px 4px 8px; font-size: 13px; }
.card-p { background: #fff; border-radius: 10px; padding: 9px 10px; margin-bottom: 7px; border-left: 4px solid var(--ceu); cursor: pointer; font-size: 12.5px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.card-p b { display: block; font-size: 13px; color: var(--navy); }

/* agenda */
.semana { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 6px; overflow-x: auto; }
.semana .dia { background: #fff; border: 1px solid var(--linha); border-radius: 10px; min-height: 160px; padding: 6px; }
.semana .dia.hoje { border-color: var(--laranja); box-shadow: 0 0 0 2px rgba(247,145,19,.2); }
.semana .dia h5 { margin: 0 0 6px; font-size: 12px; color: var(--suave); text-transform: capitalize; }
.ev { border-radius: 8px; padding: 5px 7px; margin-bottom: 5px; font-size: 11.5px; color: #fff; cursor: pointer; line-height: 1.35; }
.ev b { display: block; font-size: 12px; }
.ev.cancelado { opacity: .45; text-decoration: line-through; } .ev.concluido { filter: saturate(.55); }
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mes .dia { background: #fff; border: 1px solid var(--linha); border-radius: 8px; min-height: 92px; padding: 4px; font-size: 11px; }
.mes .dia.fora { opacity: .45; } .mes .dia.hoje { border-color: var(--laranja); }
.mes .ev { padding: 2px 5px; font-size: 10.5px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* linha do tempo */
.tempo { list-style: none; margin: 0; padding: 0; }
.tempo li { position: relative; padding: 0 0 12px 22px; border-left: 2px solid var(--linha); margin-left: 6px; font-size: 13px; }
.tempo li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ceu); border: 2px solid #fff; }
.tempo li.status::before { background: var(--laranja); } .tempo li.nota::before { background: var(--navy); }
.tempo .quando { font-size: 11.5px; color: var(--suave); }

/* etapas (marcos) */
.marcos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.marco { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; display: grid; grid-template-columns: 1fr 140px; gap: 6px; align-items: center; font-size: 12.5px; }
.marco.ok { background: #F0FAF4; border-color: #BFE6CC; }
.marco input { padding: 5px 7px; font-size: 12.5px; }
.marco .setor { font-size: 10.5px; color: var(--suave); text-transform: uppercase; }

/* trilha de status */
.trilha { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 4px; }
.trilha .pas { border-radius: 20px; padding: 4px 11px; font-size: 12px; font-weight: 600; background: #EEF1F6; color: var(--suave); border: 1.5px solid transparent; cursor: default; }
.trilha .pas.feito { background: #E3F4EA; color: var(--verde); } .trilha .pas.atual { color: #fff; }
.trilha .pas.pode { cursor: pointer; border-color: #C9D2E0; background: #fff; color: var(--navy); }
.trilha .pas.pode:hover { border-color: var(--navy); }

/* modal */
.fundo-modal { position: fixed; inset: 0; background: rgba(10,25,50,.45); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px 14px; overflow-y: auto; }
.modal { background: #fff; border-radius: 16px; width: min(760px, 100%); padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal .rodape { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.aviso { border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 13px; background: #EEF6FD; color: #0A4A85; }
.aviso.am { background: #FFF6E5; color: #7A5000; } .aviso.verm { background: #FDECEC; color: #8F1D1D; }
.vazio { color: var(--suave); text-align: center; padding: 26px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 11px 20px; border-radius: 10px; z-index: 80; box-shadow: 0 8px 26px rgba(0,0,0,.25); font-weight: 600; }
.toast.erro { background: var(--verm); }
.login { max-width: 380px; margin: 9vh auto; }
.login .logo { text-align: center; margin-bottom: 16px; } .login .logo img { height: 64px; }
dl.dados { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
dl.dados dt { color: var(--suave); } dl.dados dd { margin: 0; word-break: break-word; }
.copiar { display: flex; gap: 6px; } .copiar input { font-size: 12px; }
@media print { .topo, .filtros, .btn { display: none !important; } .pagina { padding: 0; } .cartao { break-inside: avoid; } }

/* ---------- tela ao vivo (TV) ---------- */
body.modo-tv { background: #031a3d; }
.tv { min-height: 100vh; color: #e8eef8; font-size: clamp(13px, 0.95vw, 22px); padding: 0 1.2vw 1.2vw; }
.tv h2 { color: #fff; font-size: 1.15em; margin: 0 0 .6em; display: flex; justify-content: space-between; align-items: baseline; }
.tv h2 small { background: #ef4444; border-radius: 20px; padding: 0 .6em; font-size: .8em; }
.tv-topo { display: flex; align-items: center; gap: 1em; padding: .8em 0; }
.tv-topo img { height: 2.6em; background: #fff; border-radius: 8px; padding: 3px 6px; }
.tv-topo b { display: block; font: 700 1.5em Poppins; color: #fff; }
.tv-topo span { color: #9fb3d1; }
.tv-dir { margin-left: auto; display: flex; gap: 1em; align-items: center; }
#tvRelogio { font: 700 2.2em Poppins; color: #fff; }
.tv-dir button { background: rgba(255,255,255,.1); border: 0; color: #fff; border-radius: 8px; padding: .3em .7em; cursor: pointer; font-size: 1.1em; }
.tv-pulso { font-size: .85em; color: #86efac !important; text-transform: none !important; }
.tv-pulso::before { content: '●'; margin-right: .4em; animation: pulso 1.6s infinite; }
.tv-pulso.off { color: #fca5a5 !important; }
@keyframes pulso { 50% { opacity: .2; } }
.tv-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8em; margin-bottom: .9em; }
.tv-kpi { background: #0a2a5c; border-radius: 14px; padding: .8em 1em; border-top: 5px solid var(--c); transition: background .6s; }
.tv-kpi span { color: #9fb3d1; font-size: .9em; } .tv-kpi b { display: block; font: 700 2.6em/1.1 Poppins; color: #fff; } .tv-kpi small { color: #c7d4e8; }
.tv-kpi.mudou { animation: brilho 2.5s; }
@keyframes brilho { 0% { background: #F79113; } 100% { background: #0a2a5c; } }
.tv-meio { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: .9em; }
.tv-bloco { background: #0a2a5c; border-radius: 14px; padding: .9em 1em; margin-bottom: .9em; }
.tv-cols { display: grid; gap: .7em; }
.tv-col h3 { color: #fff; font-size: 1em; border-bottom: 4px solid; padding-bottom: .3em; margin: 0 0 .5em; display: flex; justify-content: space-between; }
.tv-ag { display: grid; grid-template-columns: 3.6em 1fr; gap: .5em; background: #113a78; border-radius: 10px; padding: .55em .6em; margin-bottom: .5em; }
.tv-ag b { color: #fff; display: block; } .tv-ag span { display: block; color: #c7d4e8; font-size: .85em; } .tv-ag .tv-local { color: #9fb3d1; }
.tv-ag em { display: inline-block; font-style: normal; font-size: .75em; font-weight: 700; color: #fff; border-radius: 20px; padding: 0 .6em; margin-top: .3em; }
.tv-hora { font: 700 1.2em Poppins; color: #fff; } .tv-hora small { display: block; font-size: .65em; color: #9fb3d1; }
.tv-ag.agora { outline: 3px solid #F79113; box-shadow: 0 0 18px rgba(247,145,19,.5); }
.tv-ag.agora em { background: #F79113 !important; animation: pulso 1.6s infinite; }
.tv-ag.atrasado em { background: #ef4444 !important; }
.tv-ag.concluido { opacity: .62; } .tv-ag.cancelado { opacity: .35; text-decoration: line-through; }
.tv-livre { color: #7f95b8; padding: .6em 0; }
.tv-prox { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.tv-prox div { background: #113a78; border-radius: 10px; padding: .5em .6em; } .tv-prox b { color: #F79113; } .tv-prox span { display: block; color: #9fb3d1; font-size: .85em; }
.tv-barra { display: grid; grid-template-columns: 9.5em 1fr 2em; gap: .5em; align-items: center; margin: .35em 0; font-size: .9em; }
.tv-barra div { background: #113a78; border-radius: 6px; height: .9em; overflow: hidden; } .tv-barra i { display: block; height: 100%; border-radius: 6px; } .tv-barra b { color: #fff; text-align: right; }
.tv-al { border-bottom: 1px solid #173f7d; padding: .4em 0; } .tv-al b { color: #fff; display: block; } .tv-al span { font-size: .85em; font-weight: 600; }
.tv-al em { display: block; font-style: normal; font-size: .82em; } .tv-al em.alto { color: #fca5a5; } .tv-al em.medio { color: #fcd34d; }
.tv-feed div { border-bottom: 1px solid #173f7d; padding: .35em 0; font-size: .88em; color: #c7d4e8; } .tv-feed b { color: #fff; } .tv-feed small { color: #7f95b8; } .tv-feed i { color: #F79113; font-style: normal; }
.tv-vazio { text-align: center; padding: 3em; color: #9fb3d1; }
@media (max-width: 1100px) { .tv-kpis { grid-template-columns: repeat(3, 1fr); } .tv-meio { grid-template-columns: 1fr; } .tv-prox { grid-template-columns: repeat(2, 1fr); } .tv { font-size: 14px; } }