@import url('tokens.css');

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 16px/24px var(--font-body); color: var(--text); background: var(--surface);
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; color: var(--text); }
h1 { font-weight: 900; font-size: 40px; line-height: 44px; }
h2 { font-weight: 800; font-size: 32px; line-height: 38px; }
h3 { font-weight: 800; font-size: 24px; line-height: 30px; }
p { margin: 0; }
a { color: var(--action-primary); }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-secondary); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

:focus-visible { outline: 2px solid var(--impact); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s6); border-radius: var(--r-field); border: 1.5px solid transparent;
  font: 600 16px/24px var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn svg { flex: none; }
.btn-primary { background: var(--action-primary); color: #fff; }
.btn-primary:hover { background: var(--action-hover); }
.btn-primary:active { background: var(--action-pressed); }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--impact); }
.btn-secondary:hover { background: var(--surface); }
.btn-secondary:active { background: var(--divider); }
.btn-text { background: transparent; color: var(--action-primary); padding: 0 var(--s4); }
.btn-text:hover { background: var(--error-bg); }
.btn-danger { background: #fff; color: var(--error); border-color: var(--error); }
.btn-danger:hover { background: var(--error-bg); }
.btn-compact { min-height: 40px; padding: 0 var(--s4); font-size: 14px; position: relative; }
.btn-compact::after { content: ''; position: absolute; inset: -2px 0; } /* alvo de toque de 44px */
.btn-large { min-height: 56px; }
.btn[disabled], .btn[aria-disabled='true'] { background: var(--surface); color: var(--text-secondary); border-color: var(--divider); cursor: not-allowed; }
.btn.carregando { pointer-events: none; }
.btn-icon { min-width: 44px; min-height: 44px; padding: 0; background: transparent; border-color: transparent; color: var(--text); }
.btn-icon:hover { background: var(--surface); }

/* ---------- Formulários ---------- */
.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.field > label, .field > .label { font: 600 14px/20px var(--font-body); }
.field .opt { font-weight: 400; color: var(--text-secondary); }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 0 var(--s4); background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--r-field); transition: border-color var(--t-fast);
}
textarea.input { padding: var(--s3) var(--s4); min-height: 96px; resize: vertical; }
select.input { appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23373435' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
.input::placeholder { color: var(--text-secondary); opacity: .8; }
.input:hover { border-color: var(--text); }
.input:focus-visible { outline: 2px solid var(--impact); outline-offset: 2px; border-color: var(--impact); }
.input[readonly], .input:disabled { background: var(--surface); color: var(--text-secondary); cursor: default; }
.field.erro .input { border-color: var(--error); }
.field .ajuda { font: 400 12px/16px var(--font-body); color: var(--text-secondary); }
.field .msg-erro { font: 500 12px/16px var(--font-body); color: var(--error); }
.input-grande { min-height: 64px; font: 700 24px/32px var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.grid-form { display: grid; gap: var(--s4) var(--s6); grid-template-columns: repeat(12, 1fr); }
.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }
@media (max-width: 767px) { .grid-form > * { grid-column: span 12 !important; } }
@media (min-width: 768px) and (max-width: 1099px) { .col-4, .col-3 { grid-column: span 6; } }
.valor-final { background: var(--surface); border-radius: var(--r-field); padding: var(--s3) var(--s4); display: flex; justify-content: space-between; align-items: baseline; }
.valor-final strong { font: 900 28px/34px var(--font-display); }
.segmentado { display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--r-field); overflow: hidden; }
.segmentado button { min-height: 48px; padding: 0 var(--s4); border: 0; background: #fff; cursor: pointer; font-weight: 600; }
.segmentado button[aria-pressed='true'] { background: var(--impact); color: #fff; }
.input-grupo { display: flex; gap: var(--s2); }
.input-grupo .input { flex: 1; }

/* ---------- Cards, alertas, badges ---------- */
.card { background: #fff; border: 1px solid var(--divider); border-radius: var(--r-card); padding: var(--s6); }
.card + .card { margin-top: var(--s4); }
.card-titulo { font: 800 20px/26px var(--font-display); margin-bottom: var(--s4); }
.eyebrow { font: 600 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--action-primary); }
.alert { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-card); border-left: 4px solid; }
.alert strong { display: block; font: 800 16px/22px var(--font-display); }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.alert-error { background: var(--error-bg); color: var(--error); border-color: var(--error); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font: 600 12px/20px var(--font-body); white-space: nowrap; }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-error { background: var(--error-bg); color: var(--error); }
.badge-neutral { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--divider); }

/* ---------- Tabelas ---------- */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--divider); border-radius: var(--r-card); background: #fff; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tabela th { background: var(--text); color: #fff; font-weight: 600; text-align: left; padding: var(--s3) var(--s4); white-space: nowrap; }
.tabela th.right, .tabela td.right { text-align: right; }
.tabela td { padding: var(--s3) var(--s4); border-top: 1px solid var(--divider); vertical-align: middle; }
.tabela tbody tr:nth-child(even) td { background: #FBFAFA; }
.tabela tbody tr:hover td { background: var(--surface); }
.tabela tfoot td { font-weight: 700; background: var(--surface); border-top: 2px solid var(--text); }
.tabela .acoes { display: flex; gap: 2px; justify-content: flex-end; }
.tabela a.linha-link { color: var(--text); font-weight: 600; text-decoration: none; }
.tabela a.linha-link:hover { color: var(--action-primary); text-decoration: underline; }
.vazio { padding: var(--s12) var(--s6); text-align: center; color: var(--text-secondary); }

/* ---------- Layout do portal ---------- */
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--impact); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: var(--s6) var(--s4) 0;
}
.sidebar .logo { display: block; padding: 0 var(--s2) var(--s6); }
.sidebar .logo img { width: 100%; max-width: 200px; display: block; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-grupo { font: 600 11px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: #B9B2B6; padding: var(--s4) var(--s3) var(--s1); }
.nav a {
  display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s3); border-radius: var(--r-field);
  color: #fff; text-decoration: none; font-weight: 500; transition: background var(--t-fast);
}
.nav a:hover { background: rgba(255,255,255,.1); }
.nav a[aria-current='page'] { background: var(--action-primary); font-weight: 600; }
.nav a:focus-visible, .usuario-box button:focus-visible { outline-color: #fff; }
.usuario-box { border-top: 1px solid rgba(255,255,255,.16); padding: var(--s4) var(--s2); margin-top: var(--s3); }
.usuario-box .nome { font-weight: 600; }
.usuario-box .perfil { font-size: 12px; color: #B9B2B6; }
.usuario-box .linha { display: flex; gap: var(--s2); margin-top: var(--s3); }
.usuario-box button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: var(--r-field); min-height: 40px; padding: 0 var(--s3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.usuario-box button:hover { background: rgba(255,255,255,.1); }
.mosaico { display: flex; height: 16px; margin: 0 calc(var(--s4) * -1); }
.mosaico i { flex: 1; display: block; }

.main { min-width: 0; }
.topbar { display: none; }
.conteudo { max-width: 1240px; margin: 0 auto; padding: var(--s8) var(--s8) var(--s16); }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.cabecalho p { color: var(--text-secondary); margin-top: var(--s1); }
.cabecalho .acoes { display: flex; gap: var(--s3); flex-wrap: wrap; }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3) var(--s4); align-items: end; margin-bottom: var(--s4); }
.filtros .busca { grid-column: span 2; }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-top: var(--s4); color: var(--text-secondary); font-size: 14px; flex-wrap: wrap; }

@media (max-width: 1099px) { .conteudo { padding: var(--s6) var(--s6) var(--s12); } h1 { font-size: 32px; line-height: 38px; } }
@media (max-width: 899px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 288px; max-width: 86vw; z-index: 40; transform: translateX(-100%); transition: transform var(--t-slow); height: 100dvh; }
  .nav-aberto .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(21,20,21,.55); }
  .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--impact); color: #fff; padding: var(--s2) var(--s4); position: sticky; top: 0; z-index: 30; }
  .topbar img { height: 36px; display: block; }
  .topbar .btn-icon { color: #fff; }
  .topbar .btn-icon:hover { background: rgba(255,255,255,.12); }
  .topbar .btn-icon:focus-visible { outline-color: #fff; }
}
@media (max-width: 767px) {
  .conteudo { padding: var(--s4) var(--s4) var(--s12); }
  h1 { font-size: 28px; line-height: 34px; }
  .filtros .busca { grid-column: auto; }
  .card { padding: var(--s4); }
}

/* ---------- Modal e toast ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(21,20,21,.6); display: grid; place-items: center; padding: var(--s4); z-index: 100; overflow-y: auto; }
.modal { background: #fff; border-radius: var(--r-panel); width: 100%; max-width: 560px; padding: var(--s6); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal h3 { margin-bottom: var(--s2); }
.modal .corpo { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s4); }
.modal .rodape { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s6); flex-wrap: wrap; }
.toasts { position: fixed; right: var(--s4); bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s2); z-index: 200; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: var(--s3) var(--s4); border-radius: var(--r-card); background: var(--impact); color: #fff; font-weight: 500; box-shadow: 0 6px 24px rgba(0,0,0,.25); animation: entra var(--t-slow) ease-out; }
.toast.erro { background: var(--error); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.kpi { background: #fff; border: 1px solid var(--divider); border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s4) var(--s6); }
.kpi .rotulo { font: 600 14px/20px var(--font-body); color: var(--text-secondary); }
.kpi .valor { font: 900 28px/36px var(--font-display); white-space: nowrap; margin-top: var(--s1); }
.kpi .detalhe { font-size: 12px; line-height: 16px; color: var(--text-secondary); margin-top: var(--s1); }
.kpi.destaque { background: var(--impact); border-color: var(--impact); }
.kpi.destaque .rotulo, .kpi.destaque .detalhe { color: #D9D3D6; }
.kpi.destaque .valor { color: #fff; }
.periodos { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); align-items: end; }
.periodos .chip { min-height: 44px; padding: 0 var(--s4); border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-weight: 600; cursor: pointer; transition: background var(--t-fast); }
.periodos .chip:hover { background: var(--surface); }
.periodos .chip[aria-pressed='true'] { background: var(--impact); border-color: var(--impact); color: #fff; }
.periodo-info { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.periodo-info strong { font: 800 20px/26px var(--font-display); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.duas-colunas > .card { margin-top: 0; }
@media (max-width: 1099px) { .duas-colunas { grid-template-columns: 1fr; } }
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico text { font-family: var(--font-body); fill: var(--text); }
.nota-fonte { font-size: 12px; line-height: 16px; color: var(--text-secondary); margin-top: var(--s4); }

/* ---------- Detalhe da requisição ---------- */
.detalhe-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 999px) { .detalhe-grid { grid-template-columns: 1fr; } }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); margin: 0; }
.dl > div { min-width: 0; }
.dl dt { font: 600 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.dl dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.dl .largo { grid-column: 1 / -1; }
@media (max-width: 599px) { .dl { grid-template-columns: 1fr; } }
.codigo-box { background: var(--surface); border-radius: var(--r-card); padding: var(--s4); text-align: center; }
.codigo-box .rotulo { font: 600 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.codigo-box .codigo { font: 900 28px/36px var(--font-display); letter-spacing: .08em; margin-top: var(--s1); overflow-wrap: anywhere; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.linha-tempo li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); font-size: 14px; }
.linha-tempo .ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--divider); margin-top: 5px; border: 2px solid var(--divider); }
.linha-tempo .feito .ponto { background: var(--ok); border-color: var(--ok); }
.linha-tempo .pendente { color: var(--text-secondary); }
.pilha { display: flex; flex-direction: column; gap: var(--s3); }
.pilha .btn { width: 100%; }
.sucesso-topo { display: flex; gap: var(--s4); align-items: center; }

/* ---------- Login / página pública ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; }
.login-lado { background: var(--brand-red); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s12); color: #fff; }
.login-lado img { width: min(420px, 80%); display: block; }
.login-lado .frase { font: 900 40px/44px var(--font-display); max-width: 14ch; position: relative; z-index: 1; }
.login-lado .circulo { position: absolute; right: -140px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255,255,255,.14); }
.login-lado .circulo::after { content: ''; position: absolute; inset: 120px; border-radius: 50%; background: var(--brand-red); }
.login-lado .mosaico { margin: 0 calc(var(--s12) * -1) calc(var(--s12) * -1); height: 40px; }
.login-form { display: flex; align-items: center; justify-content: center; padding: var(--s8) var(--s6); }
.login-form form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s4); }
.login-form .logo-mobile { display: none; }
@media (max-width: 899px) {
  .login { grid-template-columns: 1fr; }
  .login-lado { display: none; }
  .login-form { align-items: flex-start; padding-top: var(--s12); }
  .login-form .logo-mobile { display: block; width: 220px; margin-bottom: var(--s2); }
}
.publico { max-width: 560px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s12); }
.publico header { display: flex; align-items: center; margin-bottom: var(--s6); }
.publico header img { width: 200px; display: block; }
.publico .mosaico { margin: var(--s8) 0 0; border-radius: 4px; overflow: hidden; }

.so-impressao { display: none; }

/* ---------- Serviços da requisição ---------- */
.servico-linhas { display: flex; flex-direction: column; gap: var(--s2); }
.servico-linha { display: flex; gap: var(--s2); align-items: center; }
.servico-linha select { flex: 1 1 auto; min-width: 0; }
.servico-linha .servico-valor { flex: 0 0 132px; width: 132px; text-align: right; }
@media (max-width: 479px) { .servico-linha .servico-valor { flex-basis: 104px; width: 104px; } }