:root{
  --fundo:#f5f7fa; --painel:#ffffff; --linha:#e5eaf0; --linha-forte:#d6dde5; --texto:#0d1a2b; --texto-2:#2a3a4c; --suave:#5b6b7d;
  --pri:#0b6a8a; --pri-esc:#08546e; --pri-claro:#e5f2f7; --pri-claro-2:#cfe7f0;
  --laranja:#e97d14; --laranja-claro:#fff1e2; --vermelho:#dc2f36; --vermelho-claro:#fde7e8;
  --verde:#1f9a54; --verde-claro:#e3f5ea; --azul:#2f6fb1; --azul-claro:#e8f0fa; --roxo:#6d4fc2; --roxo-claro:#efeafb; --cinza-claro:#eef1f4;
  --raio:12px; --sombra:0 1px 2px rgba(13,26,43,.04),0 4px 14px rgba(13,26,43,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,"Segoe UI",system-ui,sans-serif;color:var(--texto);background:var(--fundo);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.ic{width:22px;height:22px;flex:none}
.ic-p{width:16px;height:16px}
.suave{color:var(--suave)}
.txt-vermelho{color:var(--vermelho)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace;font-size:13.5px}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:6px}

/* ---------- estrutura ---------- */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
.lateral{background:var(--painel);border-right:1px solid var(--linha);padding:22px 14px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.marca{display:flex;gap:12px;align-items:center;padding:0 14px 28px}
.ic-logo{width:38px;height:38px;color:var(--pri);stroke-width:1.9}
.marca strong{display:block;font-size:23px;font-weight:700;color:var(--pri-esc);letter-spacing:-.4px}
.marca small{display:block;font-size:12.5px;color:var(--suave);margin-top:2px;white-space:nowrap}
.menu{display:flex;flex-direction:column;gap:4px}
.menu a{display:flex;align-items:center;gap:18px;padding:13px 18px;border-radius:10px;color:var(--texto-2);font-size:16px;position:relative;transition:background .15s}
.menu a .ic{color:#41536a}
.menu a:hover{background:#f1f5f8}
.menu a.ativo{background:var(--pri-claro);color:var(--pri-esc);font-weight:600}
.menu a.ativo .ic{color:var(--pri)}
.menu a.ativo::before{content:"";position:absolute;left:-14px;top:6px;bottom:6px;width:4px;border-radius:0 4px 4px 0;background:var(--pri)}
.contador{margin-left:auto;background:var(--vermelho);color:#fff;font-size:12px;font-weight:700;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 6px}
.lateral-pe{margin-top:auto;padding:14px 14px 0;border-top:1px solid var(--linha)}
.vivo{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--suave)}
.vivo.girando .ic{animation:gira 1s linear infinite;color:var(--pri)}
@keyframes gira{to{transform:rotate(360deg)}}

.principal{min-width:0}
.topo{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 28px 0 36px;border-bottom:1px solid var(--linha);background:var(--painel);position:sticky;top:0;z-index:20}
.busca{display:flex;align-items:center;gap:10px;width:460px;max-width:38vw;height:44px;border:1px solid var(--linha-forte);border-radius:10px;padding:0 10px 0 14px;color:var(--suave);transition:border-color .15s,box-shadow .15s}
.busca:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-claro)}
.busca input{border:0;outline:0;font:inherit;font-size:15px;flex:1;background:none;color:var(--texto);min-width:0}
kbd{font:600 11px Inter,sans-serif;color:var(--suave);border:1px solid var(--linha-forte);border-radius:5px;padding:2px 7px;background:#f7f9fb}
.topo-dir{display:flex;align-items:center;gap:14px;font-size:14px}
.data{display:flex;align-items:center;gap:9px;color:var(--texto-2);padding-right:14px;border-right:1px solid var(--linha);white-space:nowrap}
.selo{display:flex;align-items:center;gap:8px;background:var(--pri-claro);color:var(--pri-esc);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap}
.selo-aviso{background:var(--laranja-claro);color:#9a4b05}
.conta{position:relative;padding-left:14px;border-left:1px solid var(--linha)}
.conta summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;white-space:nowrap}
.conta summary::-webkit-details-marker{display:none}
.ic-avatar{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--cinza-claro);color:#3b4a5c}
.menu-conta{position:absolute;right:0;top:46px;background:#fff;border:1px solid var(--linha);border-radius:10px;box-shadow:var(--sombra);padding:6px;min-width:180px}
.menu-conta a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px}
.menu-conta a:hover{background:var(--cinza-claro)}
.aviso-novo{background:var(--pri);color:#fff;padding:10px 36px;font-size:14px}
.aviso-novo button{background:#fff;color:var(--pri-esc);border:0;border-radius:6px;padding:4px 10px;margin-left:8px;font-weight:600}

.conteudo{padding:32px 28px 48px 36px;max-width:1300px}
h1{font-size:42px;line-height:1.1;margin:0;font-weight:800;letter-spacing:-1.2px}
.h1-menor{font-size:32px;letter-spacing:-.8px}
.sub{font-size:24px;color:var(--suave);margin:6px 0 28px;font-weight:400}
.sub-menor{font-size:16px;margin:6px 0 22px}
h2{font-size:21px;font-weight:700;margin:0 0 14px;letter-spacing:-.3px}
h2.mt{margin-top:28px}
h3{font-size:14px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);margin:24px 0 10px;font-weight:600}
.mt-p{margin-top:12px}
.titulo-linha{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.titulo-linha h2{margin-bottom:14px}

/* ---------- destaques ---------- */
.destaques{display:grid;grid-template-columns:auto auto 1fr;align-items:center;margin-bottom:28px}
.cta{display:flex;align-items:center;gap:16px;background:var(--pri);color:#fff;font-weight:600;font-size:17px;padding:19px 32px;border-radius:9px;margin-right:40px;box-shadow:0 4px 14px rgba(11,106,138,.28);transition:transform .15s,background .15s}
.cta:hover{background:var(--pri-esc);transform:translateY(-1px)}
.cta .ic:last-child{transition:transform .15s}.cta:hover .ic:last-child{transform:translateX(3px)}
.destaque{display:flex;align-items:center;gap:18px;padding:6px 32px;border-left:1px solid var(--linha);min-height:76px;border-radius:0 10px 10px 0;transition:background .15s}
.destaque:hover{background:#fff}
.destaque strong{display:block;font-size:44px;line-height:1;font-weight:800}
.destaque strong em{font-style:normal;font-size:18px;font-weight:600;margin-left:6px}
.destaque span{font-size:18px;color:var(--texto-2)}
.destaque span.fino{font-size:14.5px;color:var(--suave);display:block;margin-top:6px}
.bola{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none}
.bola .ic{width:27px;height:27px}
.bola.laranja{background:var(--laranja-claro);color:var(--laranja)}
.bola.vermelha{background:var(--vermelho-claro);color:var(--vermelho)}
.bola.vermelha .ic{stroke-width:2.6}
.bola.azul{background:var(--azul-claro);color:var(--azul)}
.bola.verde{background:var(--verde-claro);color:var(--verde)}
.bola.roxa{background:var(--roxo-claro);color:var(--roxo)}

.faixa{display:grid;grid-template-columns:repeat(4,1fr);background:#edf1f5;border-radius:var(--raio);padding:20px 0;margin-bottom:32px}
.faixa-3{grid-template-columns:repeat(3,1fr)}
.faixa .item{display:flex;align-items:center;gap:18px;padding:6px 26px;border-left:1px solid #d9e0e7;transition:background .15s}
a.item:hover{background:#e3e9ef}
.faixa .item:first-child{border-left:0}
.faixa .bola{width:52px;height:52px}
.faixa strong{display:block;font-size:36px;font-weight:800;line-height:1}
.faixa .item div span{display:block;line-height:1.3;font-size:15px;color:var(--texto-2);margin-top:4px}

/* ---------- tabelas ---------- */
.duas{display:grid;grid-template-columns:minmax(0,1fr) 350px}
.acoes{padding-right:26px;border-right:1px solid var(--linha)}
.coluna{padding-left:26px}
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela thead th{background:#edf1f5;color:var(--texto-2);font-weight:500;text-align:left;padding:13px 10px;white-space:nowrap;font-size:14px;user-select:none}
.tabela thead th:first-child{border-radius:8px 0 0 8px}
.tabela thead th:last-child{border-radius:0 8px 8px 0}
th.ordenavel{cursor:pointer}th.ordenavel:hover{color:var(--pri)}
th[data-dir] .ic-p{color:var(--pri)}
.tabela thead .ic-p{vertical-align:-3px;margin-left:3px;color:var(--suave)}
.tabela tbody td{padding:16px 10px;border-bottom:1px solid var(--linha);vertical-align:middle;white-space:nowrap}
.tabela td.quebra,.tabela td.produto-cel{white-space:normal}
.tabela td.num,.tabela th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.clicavel{cursor:pointer;transition:background .12s}
tr.clicavel:hover{background:#f2f7fa}
tr.clicavel:hover .link{text-decoration:underline}
td.forte{font-weight:600}
.sub-cel{display:block;font-weight:400;color:var(--suave);font-size:12.5px;margin-top:3px}
.prazo.urgente{color:var(--laranja);font-weight:500}
.prazo.atrasado{color:var(--vermelho);font-weight:600}
.prazo.normal{color:var(--texto-2)}
.prazo.suave{color:var(--suave)}
.produto-cel .pc{display:flex;align-items:center;gap:12px;min-width:240px;max-width:380px}
.produto-cel img{width:44px;height:44px;object-fit:contain;border-radius:8px;border:1px solid var(--linha);background:#fff;flex:none}
.produto-cel span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.35}
.mais{background:var(--cinza-claro);border-radius:6px;padding:1px 6px;font-size:12px;color:var(--texto-2)}
.bolinha{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.bolinha .ic{width:21px;height:21px}
.bolinha.laranja{background:var(--laranja-claro);color:var(--laranja)}
.bolinha.verde{background:var(--verde-claro);color:var(--verde)}
.bolinha.cinza{background:var(--cinza-claro);color:#3b4a5c}
.bolinha.vermelha{background:var(--vermelho-claro);color:var(--vermelho)}
.bolinha.vermelha .ic{stroke-width:2.8}
.link{color:var(--pri);display:inline-flex;align-items:center;gap:5px;font-weight:500;white-space:nowrap}
a.link:hover{text-decoration:underline}
.rodape-tab{display:flex;justify-content:space-between;align-items:center;padding:20px 0 0;color:var(--suave)}
.tag{display:inline-block;font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap}
.tag.verde{background:var(--verde-claro);color:#15703c}.tag.vermelha{background:var(--vermelho-claro);color:#a8232a}
.tag.laranja{background:var(--laranja-claro);color:#9a4b05}.tag.cinza{background:var(--cinza-claro);color:var(--texto-2)}

/* ---------- coluna lateral ---------- */
.integ{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 8px 16px;margin:0 -8px;border-bottom:1px solid var(--linha);border-radius:8px;transition:background .15s}
.integ:hover{background:#fff}
.integ>div{min-width:0}
.integ strong{display:block;font-weight:600}
.integ small{display:block;color:var(--suave);font-size:12.5px;margin-top:3px}
.logo-ml,.logo-c{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none}
.logo-ml{background:#ffe600;color:#2d3277;font-size:16px;letter-spacing:-.5px}
.logo-c{background:#0b4f63;color:#fff;font-size:24px}
.estado{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--suave);margin-top:3px;white-space:nowrap}
.estado.laranja{color:var(--laranja)}.estado.verde{color:var(--verde)}.estado.vermelho{color:var(--vermelho)}
.ponto{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.ponto.verde{background:var(--verde)}.ponto.laranja{background:var(--laranja)}.ponto.vermelho{background:var(--vermelho)}.ponto.cinza{background:#b5c0cb}
.integ .link{font-size:14px}
.lista{list-style:none;margin:0;padding:0}
.lista li{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linha);color:var(--texto-2)}
.lista li .ic{color:#3b4a5c;width:20px;height:20px}
.barra-vinc{height:8px;border-radius:4px;background:var(--vermelho-claro);overflow:hidden;margin-bottom:8px}
.barra-vinc .ok{display:block;height:100%;background:var(--verde);border-radius:4px}
.futuro{display:flex;gap:14px;align-items:flex-start;color:var(--texto-2)}
.futuro .ic{width:30px;height:30px;color:#3b4a5c}
.futuro p{margin:0;line-height:1.5}
.futuro span{color:var(--suave);font-size:14px}
.bloqueado-box{background:#f0f3f6;border-radius:10px;padding:14px}

/* ---------- cartões, chips, mensagens ---------- */
.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:22px;margin-bottom:20px;box-shadow:var(--sombra)}
.cartao.sem-pad{padding:6px 10px 10px}
.cartao-topo{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cartao-topo h2{margin:0}
.cartao-topo .botao{margin-left:auto}
.vazio{text-align:center;padding:48px 22px}
.vazio-peq{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--suave);padding:30px}
.carregador{width:40px;height:40px;border-radius:50%;border:4px solid var(--pri-claro);border-top-color:var(--pri);animation:gira 1s linear infinite;margin:0 auto 18px}
.botao{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linha-forte);border-radius:8px;padding:10px 16px;font-weight:500;color:var(--pri-esc);background:#fff;white-space:nowrap;transition:background .15s}
.botao:hover{background:var(--pri-claro)}
.botao:disabled{opacity:.6;cursor:wait}
.botao.primario{background:var(--pri);color:#fff;border-color:var(--pri)}
.botao.primario:hover{background:var(--pri-esc)}
.botao.pequeno{padding:6px 10px;font-size:13px}
.botao.grande{width:100%;justify-content:center;padding:13px;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.chip{border:1px solid var(--linha-forte);background:#fff;border-radius:999px;padding:8px 14px;color:var(--texto-2);font-size:14px;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.chip b{margin-left:4px;color:var(--suave);font-weight:600}
.chip:hover{border-color:var(--pri)}
.chip.ativo{background:var(--pri);border-color:var(--pri);color:#fff}
.chip.ativo b{color:#cfe7f0}
.busca-local{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--linha-forte);border-radius:999px;padding:7px 14px;background:#fff;color:var(--suave)}
.busca-local input{border:0;outline:0;font:inherit;font-size:14px;width:200px}
.faixa-msg{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:500}
.faixa-msg.ok{background:var(--verde-claro);color:#15703c}
.faixa-msg.erro{background:var(--vermelho-claro);color:#a8232a}
.nota{color:var(--suave);font-size:13.5px;margin:14px 0 0;line-height:1.55}
.plano{margin:0;padding-left:20px;line-height:1.7;color:var(--texto-2)}
.passos{background:#f7f9fb;border:1px dashed var(--linha-forte);border-radius:10px;padding:16px 18px;margin-top:16px;line-height:1.6}
.passos ol{margin:8px 0;padding-left:20px}
code{background:var(--cinza-claro);padding:1px 6px;border-radius:5px;font-size:13px}
p.erro{color:var(--vermelho)}

/* ---------- gaveta de detalhe ---------- */
.gaveta{position:fixed;inset:0;z-index:50}
.gaveta-fundo{position:absolute;inset:0;background:rgba(13,26,43,.32);opacity:0;transition:opacity .18s}
.gaveta-painel{position:absolute;right:0;top:0;bottom:0;width:min(520px,100vw);background:#fff;box-shadow:-10px 0 40px rgba(13,26,43,.15);padding:24px 26px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .2s ease}
.gaveta.aberta .gaveta-fundo{opacity:1}
.gaveta.aberta .gaveta-painel{transform:none}
.gav-topo{display:flex;justify-content:space-between;align-items:flex-start}
.gav-topo small{color:var(--suave);font-size:13px}
.gav-topo h2{font-size:26px;margin:2px 0 4px}
.gav-sub{margin:0;color:var(--suave)}
.fechar{border:0;background:var(--cinza-claro);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;color:var(--texto-2)}
.fechar:hover{background:var(--linha-forte)}
.gav-estado{display:flex;gap:14px;align-items:center;background:#f5f7fa;border-radius:12px;padding:14px;margin-top:18px}
.gav-estado strong{display:block}
.gav-estado .prazo{font-size:14px}
.etapas{list-style:none;margin:0;padding:0 0 0 6px}
.etapas li{position:relative;padding:0 0 14px 26px;color:var(--suave);font-size:14.5px}
.etapas li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--linha-forte);background:#fff}
.etapas li::after{content:"";position:absolute;left:6px;top:18px;bottom:0;width:2px;background:var(--linha)}
.etapas li:last-child::after{display:none}
.etapas li.feito{color:var(--texto-2)}
.etapas li.feito::before{background:var(--verde);border-color:var(--verde)}
.etapas li.atual{color:var(--texto);font-weight:600}
.etapas li.atual::before{border-color:var(--laranja);background:var(--laranja-claro)}
.etapas li.pendente::before{border-style:dashed}
.item-ped{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--linha)}
.item-ped img{width:64px;height:64px;object-fit:contain;border:1px solid var(--linha);border-radius:10px;flex:none}
.item-ped div{display:flex;flex-direction:column;gap:5px;align-items:flex-start;font-size:14.5px}
.cronos-box{background:var(--pri-claro);color:var(--pri-esc);border-radius:8px;padding:6px 10px;font-size:13px}
.tecnico{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:14px;margin:0}
.tecnico dt{color:var(--suave)}.tecnico dd{margin:0;font-family:ui-monospace,Consolas,monospace;font-size:13px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--texto);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.toast.visivel{opacity:1;transform:translate(-50%,0)}

/* ---------- entrar ---------- */
.tela-entrar{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,#e5f2f7,#f5f7fa 55%)}
.entrar{background:#fff;border:1px solid var(--linha);border-radius:16px;box-shadow:var(--sombra);padding:36px 34px;width:min(400px,92vw)}
.entrar .marca{padding:0 0 26px}
.entrar h1{font-size:26px;margin-bottom:18px;letter-spacing:-.5px}
.entrar form{display:flex;flex-direction:column;gap:16px}
.entrar label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--texto-2)}
.entrar input{font:inherit;padding:12px 14px;border:1px solid var(--linha-forte);border-radius:9px;outline:0}
.entrar input:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-claro)}

/* ---------- responsivo ---------- */
@media (max-width:1180px){
  .app{grid-template-columns:78px 1fr}
  .marca span:last-child,.menu a span,.lateral-pe{display:none}
  .marca{padding:0 8px 24px;justify-content:center}
  .menu a{justify-content:center;padding:14px}
  .contador{position:absolute;top:4px;right:4px;margin:0;min-width:18px;height:18px;font-size:11px}
  .duas{grid-template-columns:1fr}.acoes{padding-right:0;border-right:0}.coluna{padding-left:0;margin-top:30px}
  .data{display:none}
}
@media (max-width:860px){
  .faixa{grid-template-columns:repeat(2,1fr);row-gap:16px}.faixa .item:nth-child(3){border-left:0}
  .destaques{grid-template-columns:1fr;gap:16px}.destaque{border-left:0;padding:0}.cta{margin-right:0;justify-self:start}
  .selo{display:none}.busca{max-width:none;flex:1}
  .tabela{display:block;overflow-x:auto}
  h1{font-size:32px}.sub{font-size:18px}.conteudo{padding:22px 16px 40px}.topo{padding:0 16px}
}

.cartao.sem-pad{overflow-x:auto}
.principal{overflow-x:hidden}