:root{
  color-scheme:light;
  --fundo:#f2f4f5; --superficie:#fff; --texto:#1b2428; --suave:#596870; --linha:#d9e0e3;
  --lateral:#2c3236; --lateral-texto:#e7ecee; --lateral-suave:#a8b4b9;
  --destaque:#0b7f85; --destaque-suave:#def2f2; --sobre-destaque:#fff; --marca:#25c3c8;
  --ruim:#b4232c; --ruim-suave:#fbe9ea; --alerta:#945d00; --alerta-suave:#fdf2dc; --bom:#1f7a3f; --bom-suave:#e3f3e8;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --fundo:#12181b; --superficie:#1a2226; --texto:#e6ecee; --suave:#98a7ad; --linha:#2b363b;
  --lateral:#0d1214; --destaque:#4cc9cb; --destaque-suave:#14373a; --sobre-destaque:#0d1214;
  --ruim:#ff8084; --ruim-suave:#3a1c1f; --alerta:#f0b54a; --alerta-suave:#352a14; --bom:#6ad08e; --bom-suave:#173222;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--fundo);color:var(--texto);font:15px/1.45 var(--ui)}
h1{margin:0;font-size:1.55rem;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--destaque);outline-offset:2px}

.marca{font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.marca-log{color:var(--marca)}
.marca-grande{font-size:1.6rem}

.entrada{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.cartao-login{width:min(380px,100%);background:var(--superficie);border:1px solid var(--linha);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:14px}
.cartao-login h1{font-size:1.05rem;color:var(--suave);font-weight:500;margin-top:-8px}

.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
input{font:inherit;color:var(--texto)}
.campo input,#busca{padding:9px 11px;border:1px solid var(--linha);border-radius:8px;background:var(--fundo);width:100%}
#im{font-family:var(--mono)}
.btn{font:inherit;font-weight:600;border:0;border-radius:8px;padding:10px 18px;background:var(--destaque);color:var(--sobre-destaque);cursor:pointer}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-largo{width:100%}
.link{font:inherit;background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;padding:0}
.msg{margin:0;font-size:.88rem;min-height:1.25em}
.msg.erro{color:var(--ruim)} .msg.certo{color:var(--bom)}

.portal{min-height:100%;display:grid;grid-template-columns:220px minmax(0,1fr)}
.lateral{background:var(--lateral);color:var(--lateral-texto);padding:22px 16px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.lateral nav{display:flex;flex-direction:column;gap:4px;flex:1}
.aba{display:block;color:var(--lateral-texto);text-decoration:none;padding:9px 12px;border-radius:8px;font-weight:500}
.aba:hover{background:rgba(255,255,255,.07)}
.aba[aria-current="page"]{background:rgba(37,195,200,.2);color:#fff;box-shadow:inset 3px 0 0 var(--marca)}
.conta{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--lateral-suave);overflow-wrap:anywhere}

.conteudo{padding:28px clamp(16px,3vw,36px) 48px;display:flex;flex-direction:column;gap:18px;max-width:1120px;width:100%}
.cabecalho p{margin:4px 0 0;color:var(--suave);max-width:65ch}

.envio{background:var(--superficie);border:1px solid var(--linha);border-radius:10px;padding:16px;display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:12px;align-items:stretch}
.campo-im{justify-content:flex-start}
.envio .btn{align-self:center}
.envio .msg{grid-column:1/-1}
.envio .msg:empty{display:none}
.soltar{border:1.5px dashed var(--linha);border-radius:8px;padding:12px 14px;color:var(--suave);cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0;position:relative}
.soltar.sobre{border-color:var(--destaque);background:var(--destaque-suave)}
.soltar:focus-within{outline:2px solid var(--destaque);outline-offset:2px}
.soltar strong{color:var(--texto);font-weight:600}
.soltar input{position:absolute;width:1px;height:1px;opacity:0}
.lista-arquivos{display:flex;flex-wrap:wrap;gap:6px}
.lista-arquivos:not(:empty){margin-top:4px}
.arquivo{font-family:var(--mono);font-size:.78rem;background:var(--fundo);border:1px solid var(--linha);border-radius:6px;padding:2px 8px;overflow-wrap:anywhere}

.resumo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.bloco{background:var(--superficie);border:1px solid var(--linha);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.bloco b{font-family:var(--mono);font-size:1.55rem;font-variant-numeric:tabular-nums}
.bloco span{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.bloco.ruim b{color:var(--ruim)} .bloco.alerta b{color:var(--alerta)} .bloco.bom b{color:var(--bom)} .bloco.espera b{color:var(--destaque)}

.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:.85rem;border:1px solid var(--linha);background:var(--superficie);color:var(--texto);border-radius:999px;padding:6px 12px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--destaque);border-color:var(--destaque);color:var(--sobre-destaque)}
#busca{flex:1 1 200px;width:auto;min-width:0;background:var(--superficie)}

.lista{display:flex;flex-direction:column;gap:10px}
.card{background:var(--superficie);border:1px solid var(--linha);border-left:4px solid var(--linha);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card.s-corrigir{border-left-color:var(--ruim)} .card.s-verificar{border-left-color:var(--alerta)} .card.s-ok{border-left-color:var(--bom)} .card.s-aguardando{border-left-color:var(--destaque)}
.card.feito{opacity:.65}
.topo{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.im{font-family:var(--mono);font-weight:600;font-size:1.05rem}
.cliente{font-weight:600;min-width:0}
.meta{color:var(--suave);font-size:.82rem;font-family:var(--mono);overflow-wrap:anywhere}
.selo{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:999px;margin-left:auto}
.selo.corrigir{background:var(--ruim-suave);color:var(--ruim)} .selo.verificar{background:var(--alerta-suave);color:var(--alerta)} .selo.ok{background:var(--bom-suave);color:var(--bom)} .selo.ajustado,.selo.aguardando{background:var(--destaque-suave);color:var(--destaque)}
.previsao{margin:0;padding:8px 12px;border-radius:6px;background:var(--destaque-suave);color:var(--texto);font-size:.9rem}
.grupo h2{margin:0 0 4px;font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.grupo ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.correcao{display:flex;flex-direction:column;gap:2px}
.correcao code{font-family:var(--mono);font-size:.85rem;overflow-wrap:anywhere}
.correcao .de{color:var(--ruim);text-decoration:line-through;text-decoration-thickness:1px}
.correcao .para{color:var(--bom);font-weight:600}
.docs{display:flex;flex-wrap:wrap;gap:6px}
.docs a{font-family:var(--mono);font-size:.78rem;color:var(--destaque);text-decoration:none;border:1px solid var(--linha);border-radius:6px;padding:2px 8px;overflow-wrap:anywhere}
.docs a:hover{background:var(--destaque-suave)}
.docs a.chave{border-color:var(--destaque);font-weight:600}
.rodape{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:.85rem;color:var(--suave)}
.rodape label{display:flex;gap:6px;align-items:center;color:var(--texto);cursor:pointer}
.rodape input{width:18px;height:18px;accent-color:var(--destaque)}
.vazio{background:var(--superficie);border:1px dashed var(--linha);border-radius:8px;padding:28px;text-align:center;color:var(--suave)}
.vazio strong{display:block;color:var(--texto);margin-bottom:4px}

@media (max-width:760px){
  .portal{grid-template-columns:minmax(0,1fr)}
  .lateral{position:static;height:auto;padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
  .lateral nav{grid-column:1/-1;grid-row:2;flex-direction:row;overflow-x:auto}
  .aba{padding:6px 10px}
  .envio{grid-template-columns:minmax(0,1fr)}
  .envio .btn{width:100%}
  .resumo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .selo{margin-left:0}
}