:root{
  --tinta:#16202b; --fraco:#67768a; --linha:#e3e8ef; --fundo:#f5f7fa; --papel:#fff;
  --azul:#2b5bd7; --azul-claro:#eaf0ff; --verde:#0f9d58; --laranja:#e07b00;
  --vermelho:#d33a2c; --roxo:#6b41c8; --cinza:#8b98a8;
  --escuro:#131c2b; --escuro2:#1d2739;
  --raio:10px; --sombra:0 1px 2px rgba(16,32,48,.05),0 4px 16px rgba(16,32,48,.05);
  --lateral:216px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
svg{width:18px;height:18px;fill:currentColor;flex:none}

/* ================================================================ lateral */
.lateral{position:fixed;inset:0 auto 0 0;width:var(--lateral);background:var(--escuro);
  color:#c7d2e0;display:flex;flex-direction:column;z-index:30}
.lateral .marca{display:flex;align-items:baseline;gap:6px;padding:17px 18px 15px;color:#fff;
  font-size:17px;letter-spacing:.4px}
.lateral .marca b{font-weight:700}
.lateral .marca span{color:#7da2ff;font-weight:600}
.lateral nav{flex:1;overflow-y:auto;padding:6px 10px}
.lateral nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;
  color:#aebacb;font-size:14px;margin-bottom:2px}
.lateral nav a:hover{background:#1e2a3d;color:#fff;text-decoration:none}
.lateral nav a.atual{background:var(--azul);color:#fff}
.lateral nav a.atual svg{fill:#fff}
.rodape-lateral{border-top:1px solid #26334a;padding:12px 14px;display:flex;
  align-items:center;gap:10px;font-size:13px}
.eu{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.avatar{width:32px;height:32px;border-radius:50%;background:#2f4166;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.rodape-lateral .quem{min-width:0;line-height:1.25}
.rodape-lateral .quem b{display:block;color:#fff;font-weight:500;font-size:13px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rodape-lateral .quem small{color:#7b8aa0;font-size:11px}
.rodape-lateral .sair{color:#7b8aa0;font-size:12px}

/* =============================================================== conteúdo */
.conteudo{margin-left:var(--lateral);min-height:100%;display:flex;flex-direction:column}
.topo{position:sticky;top:0;z-index:20;background:var(--papel);border-bottom:1px solid var(--linha);
  height:58px;display:flex;align-items:center;gap:16px;padding:0 20px}
.hamburguer{display:none;font-size:22px;cursor:pointer;line-height:1;padding:4px 8px}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:14px}

/* cronômetro no topo */
.crono{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.crono-txt{min-width:0;line-height:1.25}
.crono-txt a,.crono-txt b{display:block;font-size:14px;font-weight:500;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crono-txt small{color:var(--fraco);font-size:12px}
.crono.parado .crono-txt b{color:var(--fraco);font-weight:400}
.relogio{font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;letter-spacing:.5px}
.crono.rodando .relogio{color:var(--verde)}
.crono form{margin:0}
.pulso,.ponto{width:9px;height:9px;border-radius:50%;flex:none}
.ponto{background:#cfd6e0}
.ponto.aceso{background:var(--laranja)}
.pulso{background:var(--verde);box-shadow:0 0 0 0 rgba(15,157,88,.6);animation:bate 1.8s infinite}
@keyframes bate{70%{box-shadow:0 0 0 9px rgba(15,157,88,0)}100%{box-shadow:0 0 0 0 rgba(15,157,88,0)}}

.sino{position:relative;color:var(--fraco);display:flex}
.sino.tem{color:var(--azul)}
.sino i{position:absolute;top:-6px;right:-8px;background:var(--vermelho);color:#fff;
  font-style:normal;font-size:10px;font-weight:700;border-radius:9px;padding:1px 5px;line-height:1.4}

main{padding:22px 20px 60px;max-width:1420px;width:100%}

/* =============================================================== cabeçalho */
.cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:16px;flex-wrap:wrap}
.cabeca h1{font-size:22px;margin:0 0 3px}
.cabeca .sub{color:var(--fraco);font-size:13px}
h2{font-size:15px;margin:0 0 12px}
.migalha{font-size:13px;color:var(--fraco);margin-bottom:6px}

/* ================================================================ cartões */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:16px;margin-bottom:16px}
.cartao.sem-pad{padding:0}
.cartao>h2{padding-bottom:12px;border-bottom:1px solid var(--linha);margin:-2px 0 12px}
.cartao.sem-pad>h2{padding:14px 16px;margin:0;display:flex;justify-content:space-between;align-items:center}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

.placar{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 16px;box-shadow:var(--sombra);display:block}
.placar:hover{text-decoration:none;border-color:#c9d4e4}
.placar .n{font-size:27px;font-weight:600;line-height:1.1;color:var(--tinta)}
.placar .r{color:var(--fraco);font-size:13px;margin-top:2px}
.placar.alerta .n{color:var(--vermelho)}
.placar.aviso .n{color:var(--laranja)}
.placar.bom .n{color:var(--verde)}

/* ================================================================ tabelas */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--fraco);
  font-weight:600;padding:9px 14px;border-bottom:1px solid var(--linha);background:#fafbfd}
td{padding:11px 14px;border-bottom:1px solid #eef1f6;vertical-align:top}
tbody tr:hover{background:#f8fafd}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap}
.vazio{padding:30px 16px;text-align:center;color:var(--fraco);font-size:14px}
.fraco{color:var(--fraco)}
.cod{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--fraco)}
.linha-sec{font-size:12px;color:var(--fraco)}

/* ================================================================== selos */
.selo{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500;
  white-space:nowrap;border:1px solid transparent}
.st-aberta{background:#eef1f6;color:#4a5a6e;border-color:#e0e5ec}
.st-em_andamento{background:#e6f6ec;color:#0f7a45;border-color:#c3e8d2}
.st-aguardando_cliente{background:#fff3e0;color:#b96300;border-color:#ffdfb0}
.st-pausada{background:#f0f1f4;color:#67768a;border-color:#dfe3ea}
.st-concluida{background:#eef0f3;color:#5b6a7d;border-color:#e0e4ea}
.st-cancelada{background:#fdecea;color:#a3271b;border-color:#f7cfc9}
.pr-baixa{background:#f2f4f7;color:#67768a}
.pr-normal{background:#eaf0ff;color:#2b5bd7}
.pr-alta{background:#fff3e0;color:#b96300}
.pr-urgente{background:#fdecea;color:#b02a1c;font-weight:600}
.pz-vencido{background:#fdecea;color:#b02a1c;font-weight:600}
.pz-hoje{background:#fff3e0;color:#b96300;font-weight:600}
.pz-perto{background:#fffbe6;color:#8a6d00}
.et-azul{background:#eaf0ff;color:#2b5bd7}
.et-verde{background:#e6f6ec;color:#0f7a45}
.et-laranja{background:#fff3e0;color:#b96300}
.et-roxo{background:#f3edff;color:#5b31b5}
.et-cinza{background:#eef1f6;color:#54637a}
.et-vermelho{background:#fdecea;color:#b02a1c}
.ap-prevista{background:#eaf0ff;color:#2b5bd7}
.ap-base_enviada{background:#f3edff;color:#5b31b5}
.ap-realizada{background:#e6f6ec;color:#0f7a45}
.ap-homologada{background:#e6f6ec;color:#0a5c34;font-weight:600}
.ap-cancelada{background:#f0f1f4;color:#67768a}
.cp-planejamento{background:#f0f1f4;color:#5b6a7d}
.cp-aprovacao_spa{background:#f3edff;color:#5b31b5}
.cp-no_ar{background:#e6f6ec;color:#0f7a45}
.cp-apurando{background:#fff3e0;color:#b96300}
.cp-encerrada{background:#eef0f3;color:#67768a}
.cp-cancelada{background:#fdecea;color:#a3271b}

/* ================================================================ botões */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--azul);color:#fff;
  border:1px solid var(--azul);padding:8px 15px;border-radius:8px;font-size:14px;
  cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{background:#2450c2;color:#fff;text-decoration:none}
.btn.claro{background:#fff;color:var(--tinta);border-color:#d3dae4}
.btn.claro:hover{background:#f2f5f9;color:var(--tinta)}
.btn.verde{background:var(--verde);border-color:var(--verde)}
.btn.verde:hover{background:#0c8b4d}
.btn.perigo{background:#fff;color:var(--vermelho);border-color:#f3c8c3}
.btn.perigo:hover{background:#fdecea}
.btn.mini{padding:5px 11px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* =========================================================== formulários */
label{display:block;font-size:12px;color:var(--fraco);margin-bottom:4px;font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
input[type=url],input[type=time],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #cfd6e0;border-radius:8px;font:inherit;
  background:#fff;color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro)}
textarea{min-height:90px;resize:vertical}
.campo{margin-bottom:13px}
.linha{display:grid;gap:13px;grid-template-columns:repeat(2,1fr)}
.linha3{display:grid;gap:13px;grid-template-columns:repeat(3,1fr)}
.linha4{display:grid;gap:13px;grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.linha,.linha3,.linha4{grid-template-columns:1fr}}
.dica{font-size:12px;color:var(--fraco);margin-top:4px}
.marcar{display:flex;gap:8px;align-items:center;font-size:13px;text-transform:none;
  color:var(--tinta);font-weight:400;margin-bottom:10px}
.marcar input{width:auto;margin:0}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--raio);padding:12px 14px;margin-bottom:16px}
.filtros .campo{margin:0;min-width:150px}
.filtros .campo.largo{flex:1;min-width:200px}

/* ================================================================ avisos */
.aviso{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px;border:1px solid}
.aviso.ok{background:#e6f6ec;border-color:#bfe5cd;color:#0f7a45}
.aviso.erro{background:#fdecea;border-color:#f5cbc5;color:#a3271b}
.aviso.info{background:#eaf0ff;border-color:#cddaff;color:#2b5bd7}

/* ================================================================== fila */
.fila{display:flex;flex-direction:column;gap:10px}
.tarefa{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);
  box-shadow:var(--sombra);padding:13px 15px;display:flex;gap:14px;align-items:flex-start}
.tarefa.topo-fila{border-color:var(--azul);box-shadow:0 0 0 2px var(--azul-claro),var(--sombra)}
.tarefa.rodando{border-color:var(--verde);box-shadow:0 0 0 2px #dcf3e6,var(--sombra)}
.tarefa .ordem{width:26px;height:26px;border-radius:7px;background:#eef2f8;color:var(--fraco);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.tarefa.topo-fila .ordem{background:var(--azul);color:#fff}
.tarefa .corpo{flex:1;min-width:0}
.tarefa .tit{font-size:15px;font-weight:500;margin-bottom:3px}
.tarefa .meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12px;color:var(--fraco)}
.tarefa .lado{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.setas{display:flex;flex-direction:column;gap:2px}
.setas button{background:none;border:0;color:var(--cinza);cursor:pointer;font-size:11px;padding:0 3px;line-height:1.1}
.setas button:hover{color:var(--azul)}

/* barra estimado × trabalhado */
.est{min-width:120px}
.est-barra{height:5px;background:#e8edf4;border-radius:4px;overflow:hidden;margin-bottom:3px}
.est-barra i{display:block;height:100%;background:var(--verde);border-radius:4px}
.est span{font-size:11px;color:var(--fraco);font-variant-numeric:tabular-nums}
.est.perto .est-barra i{background:var(--laranja)}
.est.estourou .est-barra i{background:var(--vermelho)}
.est.estourou span{color:var(--vermelho);font-weight:600}

/* ================================================================ quadro */
.quadro{display:flex;gap:13px;align-items:flex-start;overflow-x:auto;padding-bottom:14px}
.coluna{background:#eef1f6;border-radius:var(--raio);width:280px;flex:none;display:flex;
  flex-direction:column;max-height:calc(100vh - 190px)}
.coluna>header{padding:11px 13px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.coluna>header .qtd{background:#fff;color:var(--fraco);border-radius:20px;padding:1px 8px;font-size:11px}
.coluna>header .wip{margin-left:auto;font-size:11px;font-weight:400;color:var(--fraco)}
.coluna>header .wip.estourou{color:var(--vermelho);font-weight:600}
.coluna .cartoes{padding:0 9px 9px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:60px}
.cartao-tarefa{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:10px 11px;
  box-shadow:0 1px 2px rgba(16,32,48,.06);cursor:grab}
.cartao-tarefa:hover{border-color:#c3cede}
.cartao-tarefa.arrastando{opacity:.45}
.cartao-tarefa .tit{font-size:13.5px;font-weight:500;margin-bottom:5px;line-height:1.35}
.cartao-tarefa .meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11px;color:var(--fraco)}
.cartao-tarefa .rodape{display:flex;justify-content:space-between;align-items:center;margin-top:7px;gap:8px}
.mini-avatar{width:22px;height:22px;border-radius:50%;background:#dce4f0;color:#3c4d66;font-size:10px;
  font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.coluna.alvo .cartoes{outline:2px dashed var(--azul);outline-offset:-4px;border-radius:8px}
.col-azul>header{color:#2b5bd7}.col-verde>header{color:#0f7a45}
.col-laranja>header{color:#b96300}.col-roxo>header{color:#5b31b5}
.col-cinza>header{color:#54637a}.col-vermelho>header{color:#b02a1c}

/* ============================================================== detalhes */
.colunas{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media(max-width:1080px){.colunas{grid-template-columns:1fr}}
.ficha{display:grid;grid-template-columns:132px 1fr;gap:9px 14px;font-size:14px}
.ficha dt{color:var(--fraco);font-size:12px;font-weight:600;padding-top:2px}
.ficha dd{margin:0}

.tl{list-style:none;margin:0;padding:0}
.tl li{padding:12px 0;border-bottom:1px solid #eef1f6;display:flex;gap:11px}
.tl li:last-child{border-bottom:0}
.tl .quem{font-size:12px;color:var(--fraco);margin-bottom:3px}
.tl .quem b{color:var(--tinta)}
.tl .txt{white-space:pre-wrap;word-break:break-word}
.tl li.sistema .txt{color:var(--fraco);font-size:13px;font-style:italic}
.tl .mencao{background:var(--azul-claro);color:var(--azul);border-radius:4px;padding:0 3px;font-weight:600}

.check{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #eef1f6}
.check:last-child{border-bottom:0}
.check input[type=checkbox]{width:17px;height:17px;margin:0;cursor:pointer;flex:none}
.check.feito .t{color:var(--fraco);text-decoration:line-through}
.check .t{flex:1}
.progresso{height:5px;background:#e8edf4;border-radius:4px;overflow:hidden;margin:6px 0 12px}
.progresso i{display:block;height:100%;background:var(--verde)}

.pessoas-mini{display:flex;gap:4px;flex-wrap:wrap}

/* ================================================================= login */
.login{max-width:380px;margin:9vh auto;background:#fff;border:1px solid var(--linha);
  border-radius:14px;box-shadow:var(--sombra);padding:30px}
.login h1{font-size:20px;margin:0 0 4px;text-align:center}
.login .sub{text-align:center;color:var(--fraco);font-size:13px;margin-bottom:22px}
.login .btn{width:100%;padding:10px;font-size:15px;justify-content:center}
body.tela-login{background:var(--escuro)}
body.tela-publica{background:var(--fundo)}
.publico{max-width:640px;margin:5vh auto;padding:0 16px}

/* ================================================================= abas */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--linha);margin-bottom:16px;overflow-x:auto}
.abas a{padding:9px 14px;font-size:14px;color:var(--fraco);border-bottom:2px solid transparent;white-space:nowrap}
.abas a:hover{color:var(--tinta);text-decoration:none}
.abas a.atual{color:var(--azul);border-bottom-color:var(--azul);font-weight:500}

@media(max-width:860px){
  .lateral{transform:translateX(-100%);transition:transform .2s}
  #abre-menu:checked ~ .lateral{transform:none}
  .conteudo{margin-left:0}
  .hamburguer{display:block}
  .topo-dir .btn{display:none}
}
@media print{.lateral,.topo,.acoes,.filtros{display:none}.conteudo{margin:0}body{background:#fff}}