/* Mesma linha visual do Cartinhas HUB: Nunito, azul em gradiente, cartoes arredondados. */
:root {
  --fundo:#f9fafb; --cartao:#fff; --texto:#111827; --suave:#6b7280; --linha:#e5e7eb;
  --azul-escuro:#1e3a8a; --azul:#1e40af; --azul-vivo:#1d4ed8; --azul-claro:#eff6ff; --azul-borda:#bfdbfe;
  --verde:#15803d; --verde-f:#ecfdf3; --verde-b:#bbf7d0;
  --verm:#b91c1c; --verm-f:#fef2f2; --verm-b:#fecaca;
  --amar:#92400e; --amar-f:#fffbeb; --amar-b:#fde68a;
  --gradiente:linear-gradient(to right bottom,#1e3a8a,#1e40af,#1d4ed8);
  --sombra:0 1px 2px rgba(17,24,39,.05);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--fundo); color:var(--texto); font:400 15px/1.55 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--azul); font-weight:700; text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--azul-vivo); outline-offset:2px; }

/* Cabecalho */
.topo { position:sticky; top:0; z-index:10; background:var(--cartao); box-shadow:0 1px 3px rgba(17,24,39,.1); }
.topo-dentro { max-width:1120px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; }
.logo { display:inline-flex; align-items:center; gap:8px; color:var(--azul-escuro); font-weight:900; font-size:19px; letter-spacing:-.2px; }
.logo:hover { text-decoration:none; }
.logo-selo { background:var(--gradiente); color:#fff; font-size:12px; font-weight:800; border-radius:8px; padding:3px 8px; }
.menu { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.menu a { color:#374151; font-weight:600; padding:6px 10px; border-radius:10px; }
.menu a:hover { background:var(--fundo); text-decoration:none; }
.menu a.ativo { background:var(--azul-claro); color:var(--azul); font-weight:800; }
.conta { display:flex; align-items:center; gap:12px; color:#374151; font-weight:600; font-size:14px; }
.conta form { margin:0; }
.faixa { padding:5px 16px; font-size:13px; font-weight:800; text-align:center; }
.faixa.homolog { background:var(--amar-f); color:var(--amar); border-bottom:1px solid var(--amar-b); }
.faixa.producao { background:var(--verm); color:#fff; }

/* Faixa azul */
.hero { background:var(--gradiente); color:#fff; padding:40px 16px 44px; text-align:center; }
.hero h1 { color:#fff; font-size:38px; line-height:1.15; margin:0 0 8px; }
.hero p { margin:0 auto; max-width:560px; color:#dbeafe; font-size:16px; }
.etiqueta { display:inline-block; margin-bottom:14px; padding:4px 14px; border-radius:999px; font-size:13px; font-weight:800; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); }
.busca { display:flex; gap:8px; max-width:520px; margin:22px auto 0; }
.busca input { flex:1; min-width:0; border:0; box-shadow:0 4px 12px rgba(17,24,39,.2); padding:12px 16px; }
.busca button { background:#fff; color:var(--azul-escuro); border:0; font-weight:900; padding:0 20px; box-shadow:0 4px 12px rgba(17,24,39,.2); }
.busca button:hover { background:var(--azul-claro); }
.hero .msg { max-width:520px; margin:16px auto 0; text-align:left; }

/* Passos abaixo da faixa */
.passos-fundo { background:var(--cartao); border-bottom:1px solid var(--linha); }
.passos { max-width:1120px; margin:0 auto; padding:20px 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.passo { display:flex; gap:12px; }
.passo-num { flex:0 0 36px; height:36px; border-radius:10px; background:var(--azul-claro); color:var(--azul); font-weight:900; display:flex; align-items:center; justify-content:center; }
.passo strong { display:block; font-weight:800; }
.passo span { color:var(--suave); font-size:13px; line-height:1.4; display:block; }

/* Conteudo */
main { max-width:1120px; margin:24px auto 48px; padding:0 16px; }
h1 { font-size:26px; font-weight:900; margin:0 0 16px; line-height:1.2; }
h2 { font-size:18px; font-weight:900; margin:0 0 12px; }
.cartao { background:var(--cartao); border:1px solid var(--linha); border-radius:16px; padding:20px; margin-bottom:16px; box-shadow:var(--sombra); }
.rolagem { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:10px; border-bottom:1px solid var(--linha); vertical-align:top; }
tr:last-child > td { border-bottom:0; }
th { color:var(--suave); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
td.num,th.num { text-align:right; white-space:nowrap; }
.total-nota { margin:14px 0 0; padding-top:14px; border-top:1px solid var(--linha); }
.total-nota strong { font-size:18px; font-weight:900; }

/* Formularios */
label { display:block; font-weight:800; font-size:13px; margin-bottom:4px; color:#374151; }
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea { width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:12px; font:inherit; background:#fff; color:var(--texto); }
input:focus,select:focus,textarea:focus { outline:2px solid var(--azul-vivo); outline-offset:0; border-color:transparent; }
.grade { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:14px; }
.linha { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.linha > div { flex:1; min-width:160px; }
.marcar { display:flex; gap:8px; align-items:center; font-weight:600; font-size:15px; margin:8px 0; color:var(--texto); }
.marcar input { width:17px; height:17px; accent-color:var(--azul); flex:0 0 auto; }
button { font:inherit; font-weight:800; padding:9px 16px; border-radius:12px; border:1px solid #d1d5db; background:#fff; color:#374151; cursor:pointer; }
button:hover { background:var(--fundo); }
button.principal { background:var(--azul); border-color:var(--azul); color:#fff; font-weight:900; }
button.principal:hover { background:var(--azul-escuro); }
button.perigo { background:var(--verm); border-color:var(--verm); color:#fff; font-weight:900; }
button.perigo:hover { background:#991b1b; }
button.link { border:0; background:none; color:var(--azul); padding:0; font-weight:700; }
button.link:hover { background:none; text-decoration:underline; }

/* Mensagens e selos */
.msg { padding:10px 14px; border-radius:12px; margin-bottom:14px; border:1px solid; font-weight:600; }
.msg.erro { background:var(--verm-f); color:var(--verm); border-color:var(--verm-b); }
.msg.ok { background:var(--verde-f); color:var(--verde); border-color:var(--verde-b); }
.msg.alerta { background:var(--amar-f); color:var(--amar); border-color:var(--amar-b); }
.selo { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:800; background:#f3f4f6; color:#4b5563; border:1px solid var(--linha); white-space:nowrap; }
.selo.autorizada,.selo.lancada { background:var(--verde-f); color:var(--verde); border-color:var(--verde-b); }
.selo.rejeitada,.selo.erro,.selo.nao_enviada,.selo.cancelada,.selo.denegada { background:var(--verm-f); color:var(--verm); border-color:var(--verm-b); }
.selo.indefinida,.selo.emitindo,.selo.pendente { background:var(--amar-f); color:var(--amar); border-color:var(--amar-b); }
.suave { color:var(--suave); font-size:13px; }
.quebra { word-break:break-all; }
dl.dados { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0; }
dl.dados dt { color:var(--suave); font-weight:600; }
dl.dados dd { margin:0; min-width:0; }
.espaco-topo { margin-top:14px; }
.espaco-baixo { margin-bottom:14px; }

/* Login */
body.tela-login { background:var(--gradiente); min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
body.tela-login main { width:100%; margin:24px auto; }
.login { max-width:400px; margin:0 auto; padding:28px; box-shadow:0 12px 32px rgba(17,24,39,.3); border:0; }
.login .logo { font-size:22px; margin-bottom:6px; }
.login p.suave { margin:0 0 18px; }
.login button { width:100%; margin-top:4px; padding:11px; }
.campo { margin-bottom:14px; }

@media (max-width:640px) {
  .hero { padding:28px 16px 32px; }
  .hero h1 { font-size:30px; }
  dl.dados { grid-template-columns:1fr; gap:0; }
  dl.dados dd { margin-bottom:8px; }
  .conta { width:100%; justify-content:space-between; }
}
.num-nowrap { white-space:nowrap; }