/* Painel Onboarding · estética Cardoso Mundo (azul-marinho + dourado) */
:root {
  --fundo: #06101f;
  --fundo-2: #0a1a33;
  --cartao: #0d1d38;
  --cartao-2: #112445;
  --borda: #1d3157;
  --texto: #eaf0fb;
  --suave: #95a5c6;
  --ouro: #f2b53a;
  --ouro-2: #ffd36b;
  --ouro-escuro: #c98d17;
  --verde: #2fd174;   --verde-fundo: rgba(47, 209, 116, .14);
  --vermelho: #ff5a5f; --vermelho-fundo: rgba(255, 90, 95, .15);
  --amarelo: #ffc547; --amarelo-fundo: rgba(255, 197, 71, .14);
  --azul: #5aa2ff;    --azul-fundo: rgba(90, 162, 255, .15);
  --raio: 14px;
}
* { box-sizing: border-box; }
html { background: var(--fundo); }
html, body { overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; color: var(--texto);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(42, 86, 170, .35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(242, 181, 58, .07), transparent 60%),
    linear-gradient(180deg, var(--fundo-2), var(--fundo) 60%);
  background-attachment: fixed;
}
a { color: var(--ouro); }
h1, h2, h3 { margin: 0; }
svg { width: 1.2em; height: 1.2em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- topo ---------- */
.topo {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem; max-width: 1480px; margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--texto);
  font-size: 1.05rem; letter-spacing: .06em; line-height: 1.1; font-weight: 500; }
.logo-globo { width: 46px; height: 46px; }
.topo-usuario { display: flex; gap: 1.1rem; align-items: center; color: var(--suave); font-size: .92rem;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: .55rem 1rem; }
.topo-usuario a { color: var(--suave); text-decoration: none; }
.topo-usuario a:hover, button.link:hover { color: var(--ouro); }
.topo-usuario strong { color: var(--texto); }
.topo-usuario form { margin: 0; }
button.link { background: none; border: 0; color: var(--suave); font: inherit; cursor: pointer; padding: 0; }

.conteudo { max-width: 1480px; margin: 0 auto; padding: .5rem 2rem 2.5rem; }

/* ---------- avisos ---------- */
.aviso { background: var(--amarelo-fundo); color: var(--amarelo); border: 1px solid rgba(255, 197, 71, .3);
  border-radius: 10px; padding: .7rem 1rem; margin: 0 0 1rem; }
.aviso.erro { background: var(--vermelho-fundo); color: #ff9a9d; border-color: rgba(255, 90, 95, .35); }
.aviso.ok { background: var(--verde-fundo); color: var(--verde); border-color: rgba(47, 209, 116, .3); }
.nota { color: var(--suave); font-size: .85rem; margin: .4rem 0 1rem; }
.verde-txt { color: var(--verde); }
.vermelho-txt { color: var(--vermelho); }

/* ---------- campos e botões ---------- */
input, select {
  font: inherit; color: var(--texto); background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 10px; padding: .6rem .8rem; width: 100%;
}
input::placeholder { color: #6c7ea3; }
input:focus, select:focus { outline: none; border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(242, 181, 58, .18); }
input[type="date"] { color-scheme: dark; }
select { appearance: none; padding-right: 2rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 10px;
  padding: .62rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.botao.ouro { background: linear-gradient(180deg, var(--ouro-2), var(--ouro)); color: #1b1300; }
.botao.ouro:hover { filter: brightness(1.06); }
.botao.grande { width: 100%; padding: .85rem; font-size: 1rem; }
.botao-borda {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap;
  border: 1px solid var(--ouro); color: var(--ouro); background: transparent; border-radius: 999px;
  padding: .3rem .9rem; font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.botao-borda:hover { background: rgba(242, 181, 58, .12); }
.botao-borda.claro { border-color: var(--borda); color: var(--texto); }

/* ---------- tela de acesso ---------- */
.tela-acesso .conteudo { min-height: calc(100vh - 90px); display: grid; place-items: center; }
body.tela-acesso:not(:has(.topo)) .conteudo { min-height: 100vh; }
.cartao-acesso {
  width: min(420px, 100%); text-align: center; padding: 2.2rem 2rem 1.6rem;
  background: linear-gradient(180deg, rgba(17, 36, 69, .92), rgba(10, 26, 51, .92));
  border: 1px solid var(--borda); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.cadeado { color: var(--ouro); margin-bottom: .6rem; }
.cadeado svg { width: 48px; height: 48px; }
.cartao-acesso h1 { font-size: 1.6rem; }
.cartao-acesso .sub { color: var(--suave); margin: .3rem 0 1.4rem; }
.formulario { display: grid; gap: .9rem; text-align: left; }
.campo-icone { position: relative; display: block; }
.campo-icone > svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--suave); }
.campo-icone input { padding: .8rem 2.8rem .8rem 2.7rem; }
.olho { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: 0;
  color: var(--suave); cursor: pointer; padding: .3rem; }
.linha-opcoes { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; font-size: .88rem; }
.check { display: flex; align-items: center; gap: .45rem; color: var(--suave); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--ouro); }
.esqueci summary { color: var(--ouro); cursor: pointer; text-decoration: underline; list-style: none; }
.esqueci summary::-webkit-details-marker { display: none; }
.esqueci p { margin: .4rem 0 0; color: var(--suave); max-width: 200px; text-align: right; }
.rotulo { display: grid; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--suave); }
.rodape-acesso { color: #60739a; font-size: .78rem; margin: 1.3rem 0 0; }
.voltar { text-align: center; color: var(--suave); }

.alerta-recusados { background: var(--vermelho-fundo); border: 1px solid rgba(255, 90, 95, .45); color: #ffb3b5;
  border-radius: var(--raio); padding: .9rem 1.1rem; margin-bottom: 1rem; font-size: .92rem; }
.alerta-recusados strong { color: #ffd0d1; }
.alerta-recusados ul { margin: .5rem 0; padding-left: 1.2rem; }

/* ---------- indicadores ---------- */
.indicadores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.kpi {
  display: flex; gap: .9rem; align-items: center; padding: 1.15rem 1.2rem;
  background: linear-gradient(180deg, var(--cartao-2), var(--cartao)); border: 1px solid var(--borda); border-radius: var(--raio);
}
.kpi.destaque { border-color: rgba(47, 209, 116, .35); }
.kpi-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-weight: 800; font-size: 1.3rem; }
.kpi-icone svg { width: 26px; height: 26px; }
.kpi-icone.azul { color: var(--azul); background: var(--azul-fundo); }
.kpi-icone.verde { color: #06210f; background: var(--verde); }
.kpi-icone.vermelho { color: #fff; background: var(--vermelho); }
.kpi-rotulo { display: block; color: var(--suave); font-size: .9rem; }
.kpi-valor { display: block; font-size: 2rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.kpi-valor small { font-size: .95rem; font-weight: 600; margin-left: .3rem; }
.anel { --p: 0; width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--verde) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.anel span { width: 38px; height: 38px; border-radius: 50%; background: var(--cartao); }
.barra { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin-top: .4rem; width: 130px; }
.barra span { display: block; height: 100%; border-radius: 99px; background: var(--verde); }

.por-produto { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.produto-resumo { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .9rem; color: var(--suave);
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px; padding: .45rem 1rem; }
.produto-resumo strong { color: var(--texto); }
.produto-nome { color: var(--ouro); font-weight: 600; }

/* ---------- filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: .85rem 1rem; margin-bottom: 1rem; }
.grupo-periodo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filtro-rotulo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; margin-right: .3rem; }
.pilula { color: var(--texto); text-decoration: none; border: 1px solid var(--borda); background: var(--fundo-2);
  border-radius: 999px; padding: .42rem 1rem; font-size: .9rem; white-space: nowrap; }
.pilula:hover { border-color: var(--ouro); }
.pilula.ativa { background: linear-gradient(180deg, var(--ouro-2), var(--ouro)); color: #1b1300; border-color: transparent; font-weight: 700; }
.grupo-campos { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; flex: 1; justify-content: flex-end; }
.mini { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; }
.mini select, .mini input { width: auto; min-width: 120px; padding-top: .45rem; padding-bottom: .45rem; }
.busca { position: relative; flex: 1 1 200px; max-width: 340px; }
.busca svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--suave); }
.busca input { padding-left: 2.4rem; }
.limpar { color: var(--suave); font-size: .9rem; }

/* ---------- tabela ---------- */
.painel-lista { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.painel-lista h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--borda); }
.painel-lista h2 svg { color: var(--ouro); }
.lista { width: 100%; border-collapse: collapse; }
.lista th { text-align: left; color: var(--suave); font-size: .82rem; font-weight: 600; padding: .7rem 1rem; border-bottom: 1px solid var(--borda); }
.lista td { padding: .7rem 1rem; border-bottom: 1px solid rgba(29, 49, 87, .7); font-size: .92rem; vertical-align: middle; }
.lista tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.lista tbody tr:hover { background: rgba(242, 181, 58, .05); }
.lista td.acao { text-align: right; }
.nome { font-weight: 500; }
.quebra { word-break: break-word; }
.vazio { text-align: center; color: var(--suave); padding: 2.5rem !important; }
.motivo { color: #ff9a9d; font-size: .8rem; margin-top: .3rem; max-width: 240px; }
.rodape-lista { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.2rem; color: var(--suave); font-size: .85rem; }
.paginacao { display: flex; gap: .35rem; }
.paginacao a { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; text-decoration: none;
  color: var(--texto); border: 1px solid var(--borda); }
.paginacao a.atual { background: var(--ouro); color: #1b1300; border-color: var(--ouro); font-weight: 700; }

/* ---------- selos de status ---------- */
.selo { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .75rem .22rem .3rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; background: var(--cinza, rgba(255,255,255,.08)); color: var(--suave); white-space: nowrap; }
.selo:not(:has(i)) { padding-left: .75rem; }
.selo i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; }
.selo.enviado { background: var(--verde-fundo); color: var(--verde); border: 1px solid rgba(47, 209, 116, .35); }
.selo.enviado i { background: var(--verde); color: #06210f; }
.selo.falhou { background: var(--vermelho-fundo); color: #ff8589; border: 1px solid rgba(255, 90, 95, .35); }
.selo.falhou i { background: var(--vermelho); color: #fff; }
.selo.aguardando { background: var(--amarelo-fundo); color: var(--amarelo); }
.selo.recebido, .selo.processando { background: var(--azul-fundo); color: var(--azul); }
.selo.teste { background: rgba(160, 120, 255, .16); color: #c3a8ff; font-size: .72rem; padding: .1rem .55rem; }

/* ---------- janela de detalhes ---------- */
.fundo-modal { position: fixed; inset: 0; background: rgba(2, 8, 18, .72); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 1.2rem; overflow-y: auto; z-index: 10; }
.modal { width: min(1280px, 100%); background: linear-gradient(180deg, var(--cartao-2), var(--cartao));
  border: 1px solid #2a4373; border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.4rem; border-bottom: 1px solid var(--borda); }
.modal-topo h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; }
.fechar { color: var(--texto); text-decoration: none; font-size: 1.2rem; padding: .2rem .5rem; }
.modal > .aviso { margin: 1rem 1.4rem 0; }
.modal-corpo { display: grid; grid-template-columns: 1fr 1fr 1.6fr; }
.coluna { padding: 1.2rem 1.4rem; }
.coluna + .coluna { border-left: 1px solid var(--borda); }
.coluna h3 { font-size: 1rem; margin-bottom: .8rem; }
.dados { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem; margin: 0; font-size: .9rem; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; }
.abas-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.abas-topo h3 { margin: 0; }
.copiar { background: none; border: 0; color: var(--ouro); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.abas { display: flex; flex-wrap: wrap; }
.abas input { position: absolute; opacity: 0; }
.abas label { padding: .45rem .9rem; font-size: .85rem; font-weight: 600; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; }
.abas input:checked + label { color: var(--texto); border-color: var(--ouro); }
.painel-aba { display: none; width: 100%; margin: .6rem 0 0; }
#aba1:checked ~ .painel-aba[data-aba="1"], #aba2:checked ~ .painel-aba[data-aba="2"] { display: block; }
pre { background: #050d1c; border: 1px solid var(--borda); border-radius: 10px; padding: .9rem; max-height: 260px; overflow: auto;
  font: .78rem/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; color: #cfe0ff; white-space: pre-wrap; word-break: break-word; }
.ultima { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: .9rem 0 0; font-size: .88rem; }
.ultima dt { color: var(--suave); }
.ultima dd { margin: 0; font-weight: 600; }
.reenvio { margin: 0 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(242, 181, 58, .35); border-radius: 12px; background: rgba(242, 181, 58, .05); }
.reenvio p { color: var(--suave); margin: .3rem 0 .8rem; font-size: .9rem; }
.reenvio-campos { display: grid; grid-template-columns: 1fr 1fr auto; gap: .8rem; align-items: end; }
.modal-rodape { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--borda); margin-top: 1.1rem; }

/* ---------- telas menores ---------- */
@media (max-width: 1200px) {
  .indicadores { grid-template-columns: repeat(3, 1fr); }
  .modal-corpo { grid-template-columns: 1fr 1fr; }
  .coluna.tecnica { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--borda); }
}
@media (max-width: 900px) {
  .grupo-campos { justify-content: flex-start; }
  .busca { max-width: none; }
  .lista, .lista tbody, .lista tr, .lista td { display: block; width: 100%; }
  .lista thead { display: none; }
  .lista tr { border-bottom: 1px solid var(--borda); padding: .6rem 0; }
  .lista tbody tr:nth-child(even) { background: none; }
  .lista td { border: 0; padding: .25rem 1.1rem; }
  .lista td[data-rotulo]::before { content: attr(data-rotulo); display: block; color: var(--suave); font-size: .75rem; }
  .lista td.acao { text-align: left; padding-top: .5rem; }
  .lista td.acao .botao-borda { width: 100%; padding: .55rem; }
  .motivo { max-width: none; }
}
@media (max-width: 700px) {
  .topo { padding: 1rem; }
  .conteudo { padding: .3rem 1rem 2rem; }
  .indicadores { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .kpi { padding: .9rem; gap: .6rem; flex-direction: column; align-items: flex-start; }
  .kpi.destaque { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .kpi-valor { font-size: 1.6rem; }
  .kpi-icone { width: 36px; height: 36px; font-size: 1.05rem; }
  .mini { flex: 1 1 45%; flex-direction: column; align-items: stretch; gap: .2rem; font-size: .8rem; }
  .mini select, .mini input { min-width: 0; width: 100%; }
  .grupo-campos .botao { flex: 1; }
  .modal-corpo { grid-template-columns: 1fr; }
  .coluna + .coluna { border-left: 0; border-top: 1px solid var(--borda); }
  .dados { grid-template-columns: 1fr; gap: 0; }
  .dados dd { margin-bottom: .55rem; }
  .reenvio { margin: 0 1rem; }
  .reenvio-campos { grid-template-columns: 1fr; }
  .fundo-modal { padding: .5rem; place-items: start center; }
  .topo-usuario { width: 100%; justify-content: space-between; }
}