/* ==================================================================
   Tokens do sistema (identidade GAP: azul + azul-marinho, fonte Inter).
   Contraste medido contra WCAG AA: texto >= 4.5:1, elementos gráficos
   (bordas de campo, pontos de status, trilho do switch) >= 3:1.
   ================================================================== */
:root {
  /* ---- marca ---- */
  --gap-blue: #0C8ED0;
  /* o azul da marca fica em 3.6:1 sobre branco: serve para títulos grandes e
     anéis de foco, mas não para texto normal nem para fundo com texto branco.
     Superfícies preenchidas e texto azul em corpo usam o tom fundo abaixo. */
  --gap-blue-deep: #0A76AE;
  --gap-blue-ink: #085F8C;
  --gap-blue-50: #EAF4FB;
  --gap-blue-100: #D3E9F6;
  --gap-blue-ring: rgba(12, 142, 208, 0.22);
  /* azul-marinho: cabeçalho de tabela, avatar, perfil Master e barra de ações */
  --navy: #1B2F4B;
  --navy-2: #26405F;

  --gap-red: #D6262D;
  --gap-red-ink: #B4202A;
  --gap-red-50: #FDF1F1;
  --gap-red-200: #F5C6C8;
  --color-danger: var(--gap-red-ink);

  /* ---- status da FT: uma cor por status, igual nos totais, nas etiquetas,
     nos filtros e nos indicadores. Contraste do texto sobre o próprio fundo ---- */
  --status-lancado-ink: #085F8C;       /* a conferir: azul, 6.3:1 */
  --status-lancado-bg: #EAF4FB;
  --status-lancado-line: #B9DCF1;
  --status-lancado-dot: #0C8ED0;
  --status-conferencia-ink: #5925DC;   /* em conferência: violeta, 6.9:1 */
  --status-conferencia-bg: #F4F3FF;
  --status-conferencia-line: #D9D6FE;
  --status-conferencia-dot: #7A5AF8;
  --status-aprovado-ink: #8A4B00;      /* aprovada (a pagar): âmbar, 6.3:1 */
  --status-aprovado-bg: #FFF6E0;
  --status-aprovado-line: #F2CD7E;
  --status-aprovado-dot: #B97100;
  --status-devolvido-ink: #C11574;     /* devolvida: magenta, 5.6:1 */
  --status-devolvido-bg: #FDF2FA;
  --status-devolvido-line: #FCCEEE;
  --status-devolvido-dot: #DD2590;
  --status-pago-ink: #067647;       /* 5.4:1 no fundo verde */
  --status-pago-bg: #ECFDF3;
  --status-pago-line: #ABEFC6;
  --status-pago-dot: #12A150;
  --status-cancelado-ink: #475467;  /* 7.0:1 no fundo cinza */
  --status-cancelado-bg: #F2F4F7;
  --status-cancelado-line: #D0D5DD;
  --status-cancelado-dot: #7C8799;

  /* ---- mensagens ---- */
  /* alerta: possível FT repetida (risco de pagar duas vezes) */
  --alerta-ink: #B42318;            /* 6.0:1 no fundo */
  --alerta-bg: #FEF3F2;
  --alerta-line: #FECDCA;
  --alerta-forte: #D92D20;
  /* ponto laranja dos avisos de atenção (freelance sem PIX, pessoa nova) */
  --atencao-ponto: #E04F16;
  /* vermelho claro para "Cancelar FTs" sobre a barra marinho: 7.0:1 */
  --perigo-sobre-navy: #FDA29B;
  /* texto da etiqueta de perfil Supervisor, sobre o cinza: 9.5:1 */
  --etiqueta-ink: #344054;
  /* informação neutra (ex.: "já cadastrado") */
  --info-ink: var(--gap-blue-ink);
  --info-bg: var(--gap-blue-50);
  --info-line: var(--gap-blue-100);

  /* ---- superfícies e linhas ---- */
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #F2F4F7;
  --surface-4: #E9ECF1;

  --line: #E4E8EE;
  --line-strong: #D0D5DD;
  --line-hover: #B8C0CC;
  /* borda de campo separada da borda de botão: o campo precisa de 3:1
     (WCAG 1.4.11) e o botão terciário ficaria pesado com o mesmo tom */
  --line-field: #808C9C;
  --line-field-hover: #667085;
  --switch-off: #8A94A6;            /* trilho do switch desligado, 3.1:1 */

  /* ---- texto ---- */
  --ink: #101828;
  --ink-2: #475467;                 /* rótulos: 7.7:1 */
  --ink-3: #667085;                 /* secundário e placeholder: 5.0:1 */

  /* ---- tipografia: leitura >= 14px; metadados 13px; etiquetas em
     maiúsculas 12px (com espaçamento entre letras) ---- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-21: 21px;
  --fs-26: 26px;
  --fs-30: 30px;

  /* ---- espaçamento (ritmo de 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ---- raio ---- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---- sombra (elevação) ---- */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-3: 0 8px 24px rgba(16, 24, 40, 0.16);

  /* ---- camadas ---- */
  --z-sticky: 2;
  --z-sugestoes: 40;
  --z-rodape: 50;
  --z-menu: 60;
  --z-sobreposicao: 200;
  --z-login: 300;
  --z-toast: 400;

  /* ---- medidas ---- */
  --control-h: 48px;
  --control-h-sm: 40px;
  --touch: 44px;
  --content-max: 560px;
  --content-wide: 1180px;
  --admin-max: 1280px;
  --menu-w: 248px;
  --footer-h: 112px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 130ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "cv11", "calt";
}

body {
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
}

::selection {
  background: var(--gap-blue-100);
  color: var(--ink);
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

/* ---------- campos ---------- */

input[type="text"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="email"],
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  font-size: var(--fs-16);
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: var(--gap-blue);
  box-shadow: 0 0 0 3px var(--gap-blue-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-3);
  color: var(--ink-3);
  cursor: not-allowed;
}

select {
  padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230A76AE' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
}

select::-ms-expand {
  display: none;
}

input[type="date"] {
  position: relative;
  padding-right: var(--sp-10);
  font-variant-numeric: tabular-nums;
}

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.4em;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 50%;
  right: var(--sp-3);
  width: 20px;
  height: 20px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0.55;
  cursor: pointer;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  display: none;
}

textarea {
  min-height: 92px;
  padding: var(--sp-3) var(--sp-4);
  line-height: 1.45;
  resize: vertical;
}

.field {
  margin-bottom: var(--sp-4);
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-2);
}

.opcional {
  font-weight: 400;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: normal;
}

.field-row {
  display: flex;
  gap: var(--sp-3);
}

.field-row .field {
  flex: 1 1 0;
  min-width: 0;
}

.campo-funcao-outro-texto,
.campo-motivo-outro-texto {
  margin: -6px 0 var(--sp-4);
}

/* "Posto vago": switch de liga/desliga; ninguém faltou, o posto está sem
   funcionário. A caixa de marcar fica invisível por cima do trilho, então
   teclado, leitor de tela e toque funcionam como numa caixa comum. */
/* ".field .switch-posto-vago" vence a regra geral ".field label" (bloco,
   margem e letra de rótulo), que desmontava o switch */
/* os dois botões (posto vago e férias) lado a lado; no celular estreito, um embaixo do outro */
.switches-falta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-6);
}

.dica-ferias {
  margin-top: var(--sp-1);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-2);
}

.field .switch-posto-vago,
.field .switch-ferias {
  position: relative;
  display: inline-flex;
  font-size: var(--fs-15);
  font-weight: 400;
  color: var(--ink);
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--touch);
  margin: var(--sp-1) 0 0;
  padding-right: var(--sp-2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.chk-posto-vago,
.chk-ferias {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-trilho {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  background: var(--switch-off);
  border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease);
}

.switch-trilho::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.3);
  transition: transform var(--dur) var(--ease);
}

.chk-posto-vago:checked + .switch-trilho,
.chk-ferias:checked + .switch-trilho {
  background: var(--gap-blue-deep);
}

.chk-posto-vago:checked + .switch-trilho::after,
.chk-ferias:checked + .switch-trilho::after {
  transform: translateX(18px);
}

.chk-posto-vago:focus-visible + .switch-trilho,
.chk-ferias:focus-visible + .switch-trilho {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

.switch-texto {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink);
}

.switch-texto span {
  font-weight: 400;
  color: var(--ink-3);
}

.campo-quem-faltou[readonly] {
  color: var(--ink-2);
  background: var(--surface-3);
}

/* ---------- erro embaixo do campo (lançamento) ---------- */

.erro-campo {
  margin: 6px 0 0;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.35;
  color: var(--gap-red-ink);
}

.cobertura-valores + .erro-campo,
.cob-segmented + .erro-campo {
  margin-top: -4px;
  margin-bottom: var(--sp-2);
}

input.invalido,
select.invalido,
textarea.invalido,
.segmented.invalido,
.datas-barra.invalido,
.input-prefixed:has(.invalido) {
  border-color: var(--gap-red-ink);
  box-shadow: 0 0 0 3px rgba(180, 32, 42, 0.12);
}

/* o valor fica dentro da caixa com "R$": quem mostra o erro é a caixa */
.input-prefixed input.invalido {
  box-shadow: none;
}

.input-prefixed {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  background: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input-prefixed span {
  flex-shrink: 0;
  padding: 0 var(--sp-1) 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.input-prefixed input {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--control-h) - 2px);
  padding: 0 var(--sp-2) 0 var(--sp-1);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-variant-numeric: tabular-nums;
}

.input-prefixed input:focus {
  box-shadow: none;
}

.input-prefixed:focus-within {
  border-color: var(--gap-blue);
  box-shadow: 0 0 0 3px var(--gap-blue-ring);
}

.segmented {
  position: relative;
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.segmented input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.segmented label {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  margin: 0;
  padding: 0 var(--sp-2);
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--ink-2);
  text-align: center;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.segmented label:active {
  color: var(--ink);
}

/* opção escolhida preenchida em azul: dá para ver de relance (branco sobre
   azul-fundo fica em 5.0:1) */
.segmented input[type="radio"]:checked + label {
  background: var(--gap-blue-deep);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.16);
}

.segmented input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--gap-blue);
  outline-offset: 1px;
}

.mensagem-erro {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  color: var(--gap-red-ink);
  background: var(--gap-red-50);
  border: 1px solid var(--gap-red-200);
  border-radius: var(--r-md);
}

/* ---------- botões ---------- */

.btn-primario {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 50px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-16);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  background: var(--gap-blue-deep);
  border-radius: var(--r-md);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14), var(--shadow-1);
}

.btn-primario:active:not(:disabled) {
  background: var(--gap-blue-ink);
  transform: translateY(1px);
  box-shadow: none;
}

.btn-secundario {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.btn-secundario:active:not(:disabled) {
  background: var(--surface-3);
  transform: translateY(1px);
}

.btn-icone,
.btn-sair,
.btn-toggle-calendario {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
}

/* área de toque de 44px sem engordar o botão visualmente */
.btn-icone::after,
.btn-sair::after,
.btn-toggle-calendario::after,
.cal-nav::after,
.chip-data::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.btn-icone:active:not(:disabled),
.btn-sair:active:not(:disabled) {
  background: var(--surface-3);
}

/* mantém a área de toque compartilhada, mas com o visual de pílula
   preenchida que o dono viu na direção A */
.btn-toggle-calendario {
  color: var(--ink);
  background: var(--surface-3);
  border-color: transparent;
  box-shadow: none;
}

.btn-toggle-calendario:active:not(:disabled) {
  background: var(--surface-4);
}

.btn-duplicar {
  color: var(--gap-blue-deep);
}

.btn-duplicar:active:not(:disabled) {
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
  border-color: var(--gap-blue-100);
}

.btn-remover {
  color: var(--gap-red);
}

.btn-remover:active:not(:disabled) {
  background: var(--gap-red-50);
  border-color: var(--gap-red-200);
}

/* ---------- topo ---------- */

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar .logo {
  display: block;
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

.topbar-textos {
  flex: 1 1 0;
  min-width: 0;
}

.topbar-textos .topbar-titulo {
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-textos .subtitle {
  margin-top: 2px;
  font-size: var(--fs-14);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aviso-demo {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
  border-bottom: 1px solid var(--gap-blue-100);
}

/* ---------- conteúdo ---------- */

main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-1);
}

.card-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gap-blue);
}

.secao-titulo {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-21);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--gap-blue);
}

.linha-ft .secao-titulo:not(:first-of-type) {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.linha-ft {
  position: relative;
}

.linha-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-5);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.linha-titulo {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.linha-acoes {
  display: flex;
  gap: var(--sp-2);
}

/* ---------- calendário ---------- */

.datas-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 3px 3px 3px var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.datas-texto {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.datas-texto.tem-datas {
  color: var(--gap-blue-deep);
  font-weight: 600;
}

.datas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.datas-chips:empty {
  margin-top: 0;
}

.chip-data {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
  border: 1px solid var(--gap-blue-100);
  border-radius: var(--r-sm);
}

.chip-data::after {
  content: "×";
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1;
  color: var(--gap-blue-ink);
}

.chip-data:active {
  background: var(--gap-blue-100);
}

/* o calendário avança 10px sobre o padding do card para as 7 células
   chegarem a 41px de largura a 375px */
.calendario {
  margin: var(--sp-3) -10px 0;
  padding: var(--sp-2) 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.calendario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.cal-mes {
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cal-mes::first-letter {
  text-transform: uppercase;
}

.cal-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  font-size: 22px; /* glifo ‹ ›, não texto */
  font-weight: 500;
  line-height: 1;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  padding-bottom: 2px;
}

.cal-nav:active {
  background: var(--surface-3);
}

.calendario-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: var(--sp-1);
}

.calendario-semana span {
  text-align: center;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 2;
}

.calendario-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-dia {
  position: relative;
  height: var(--touch);
  padding: 0;
  font-size: var(--fs-15);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
}

.cal-dia:active {
  background: var(--surface-3);
}

.cal-dia.vazio {
  background: transparent;
  pointer-events: none;
  cursor: default;
}

.cal-dia.hoje {
  color: var(--gap-blue-deep);
  font-weight: 700;
}

.cal-dia.hoje::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}

.cal-dia.selecionado {
  color: #fff;
  font-weight: 600;
  background: var(--gap-blue-deep);
  border-color: var(--gap-blue-deep);
}

.cal-dia.selecionado:active {
  background: var(--gap-blue-ink);
}

/* ---------- coberturas ---------- */

.cobertura-vazia {
  margin: 0 0 var(--sp-1);
  padding: var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}

.btn-repetir-todos {
  display: block;
  width: 100%;
  min-height: var(--touch);
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
  border: 1px solid var(--gap-blue-100);
  border-radius: var(--r-md);
}

.btn-repetir-todos:active {
  background: var(--gap-blue-100);
}

.coberturas-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cobertura-item {
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.cobertura-data {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cobertura-data::first-letter {
  text-transform: uppercase;
}

.cobertura-item .cob-nome {
  margin-bottom: var(--sp-3);
}

.cobertura-item .cob-pix,
.cobertura-item .cob-pagamento-outro {
  margin-top: var(--sp-3);
}

.cob-segmented {
  margin-bottom: var(--sp-3);
}

.cob-segmented label {
  font-size: var(--fs-14);
}

.cobertura-valores {
  display: flex;
  gap: var(--sp-2);
}

/* bases desiguais de propósito: o select tem padding+borda de 42px que
   contam na base 0, e o campo R$ precisa exibir "1.200,00" inteiro */
.cobertura-valores .input-prefixed {
  flex: 1 1 45%;
  min-width: 0;
}

.cobertura-item .cob-pagamento {
  flex: 1 1 55%;
  min-width: 0;
  width: auto;
  padding-left: 10px;
  padding-right: 28px;
  background-position: right 6px center;
  font-size: var(--fs-16);
}

/* ---------- adicionar e rodapé ---------- */

.btn-add-linha {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-bottom: var(--sp-4);
  padding: 0 var(--sp-4);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--gap-blue-deep);
  background: transparent;
  border: 1px dashed var(--line-hover);
  border-radius: var(--r-lg);
}

.btn-add-linha:active {
  background: var(--surface);
  border-color: var(--gap-blue-deep);
  border-style: solid;
}

.footer-fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-rodape);
  padding: var(--sp-2) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.resumo-envio {
  max-width: var(--content-max);
  margin: 0 auto var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--footer-h) + var(--sp-2) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  transform: translateX(-50%);
  max-width: calc(100% - var(--sp-8));
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  background: var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  animation: toast-in 180ms var(--ease);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------- login ---------- */

.tela-login {
  position: fixed;
  inset: 0;
  z-index: var(--z-login);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--bg);
  overflow-y: auto;
}

.login-caixa {
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.login-logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 auto var(--sp-5);
}

.login-caixa h2 {
  font-size: var(--fs-21);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-align: center;
  color: var(--gap-blue);
}

.login-texto {
  margin: 6px 0 var(--sp-6);
  font-size: var(--fs-14);
  line-height: 1.45;
  text-align: center;
  color: var(--ink-2);
}

.login-caixa .field:last-of-type {
  margin-bottom: var(--sp-5);
}

.login-caixa .mensagem-erro {
  margin: 0 0 var(--sp-4);
}

.login-caixa .btn-primario {
  margin-top: var(--sp-1);
}

/* olho dentro do campo: o botão ocupa o canto direito e o texto não passa por baixo */
.campo-senha {
  position: relative;
}

.campo-senha input {
  padding-right: 52px;
}

.btn-ver-senha {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: calc(var(--control-h) - 8px);
  color: var(--ink-3);
  border-radius: var(--r-sm);
  transform: translateY(-50%);
}

.btn-ver-senha svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-ver-senha[aria-pressed="true"] {
  color: var(--gap-blue-deep);
}

.btn-ver-senha:active {
  background: var(--surface-3);
}

/* ---------- conferência ---------- */

.tela-revisao {
  position: fixed;
  inset: 0;
  z-index: var(--z-sobreposicao);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.revisao-topo {
  padding: var(--sp-5) max(var(--sp-4), calc(50% - var(--content-max) / 2 + var(--sp-4))) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.revisao-topo h2 {
  font-size: var(--fs-21);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--gap-blue);
}

.revisao-resumo {
  margin-top: var(--sp-1);
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.revisao-conteudo {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.revisao-conteudo > .secao-titulo {
  margin: var(--sp-6) 0 var(--sp-3);
}

.revisao-posto {
  margin: var(--sp-2) 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.revisao-posto:not(:first-child) {
  margin-top: var(--sp-6);
}

.revisao-grupo {
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.revisao-nome {
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.revisao-sub {
  margin: 2px 0 var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-2);
}

.revisao-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--sp-3);
}

.revisao-dia {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.revisao-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-14);
  line-height: 1.4;
  border-top: 1px solid var(--line);
}

.revisao-linha span:first-child {
  flex-shrink: 0;
  color: var(--ink-3);
}

.revisao-linha span:last-child {
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.revisao-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink-2);
  border-top: 1px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
}

.revisao-subtotal span:last-child {
  font-weight: 700;
  color: var(--gap-blue-deep);
}

.revisao-acoes {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) max(var(--sp-4), calc(50% - var(--content-max) / 2 + var(--sp-4))) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.btn-perigo {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-16);
  font-weight: 600;
  color: #fff;
  background: var(--gap-red-ink);
  border-radius: var(--r-md);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14), var(--shadow-1);
}

.btn-perigo:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

.revisao-acoes .btn-primario,
.revisao-acoes .btn-perigo,
.revisao-acoes .btn-secundario {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}

.revisao-enviado {
  padding: var(--sp-8) var(--sp-3);
  text-align: center;
}

.revisao-enviado .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 30px; /* glifo ✓, não texto */
  font-weight: 700;
  line-height: 1;
  color: var(--gap-blue-deep);
  background: var(--gap-blue-50);
  border: 1px solid var(--gap-blue-100);
  border-radius: 50%;
}

.revisao-enviado h3 {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-21);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.revisao-enviado p {
  font-size: var(--fs-15);
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- usuários ---------- */

.perfil-ajuda {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-3);
}

.etiqueta-perfil {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--etiqueta-ink);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

/* supervisor = cinza (a etiqueta base); mesa operacional = azul;
   financeiro = verde (o do "paga"); master = marinho */
.etiqueta-perfil.escritorio {
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
  border-color: var(--gap-blue-100);
}

.etiqueta-perfil.financeiro {
  color: var(--status-pago-ink);
  background: var(--status-pago-bg);
  border-color: var(--status-pago-line);
}

.etiqueta-perfil.master {
  color: #fff;
  background: var(--navy);
  border-color: var(--navy);
}

.segmented:has(> label:nth-of-type(3)) label {
  padding: 0 var(--sp-1);
  font-size: var(--fs-14);
}

/* ---------- navegação do master ---------- */

.abas {
  display: flex;
  gap: var(--sp-1);
  padding: 0 max(var(--sp-2), calc(50% - var(--content-max) / 2 + var(--sp-2)));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.pagina-painel .abas,
.pagina-usuarios .abas {
  padding: 0 max(var(--sp-2), calc(50% - var(--content-wide) / 2 + var(--sp-2)));
}

.aba {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}

.aba.ativa {
  font-weight: 600;
  color: var(--ink);
}

.aba.ativa::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: -1px;
  height: 2px;
  background: var(--gap-blue-deep);
}

.aba:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* ---------- painel do escritório ---------- */

body.pagina-painel {
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

/* a barra de ações no celular tem duas linhas de botões */
body.pagina-painel.com-barra-lote {
  padding-bottom: calc(200px + env(safe-area-inset-bottom));
}

main.painel,
main.usuarios,
main.postos,
main.relatorios {
  max-width: var(--content-wide);
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.painel-resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.resumo-bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "rotulo"
    "valor"
    "qtd";
  align-content: start;
  row-gap: 2px;
  min-height: 60px;
  padding: var(--sp-3);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.resumo-bloco:active {
  background: var(--surface-2);
}

.resumo-bloco.ativo {
  background: var(--cor-status-bg);
  border-color: var(--cor-status);
  box-shadow: 0 0 0 1px var(--cor-status), var(--shadow-1);
}

.resumo-rotulo {
  grid-area: rotulo;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
}

.resumo-rotulo::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-cancelado-dot);
}

/* cada total com a cor do seu status: rótulo, ponto e, quando vira filtro,
   a borda e o fundo do bloco */
/* a cor de cada status está no mapa "status da FT" (fim do arquivo) */

.resumo-bloco .resumo-rotulo {
  color: var(--cor-status-ink);
}

.resumo-bloco .resumo-rotulo::before {
  background: var(--cor-status);
}

.resumo-valor {
  grid-area: valor;
  font-size: var(--fs-17);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* o bloco empilha rótulo, número e quantidade em todas as larguras: sem a
   soma em R$ (escritório), a quantidade ocupa o lugar do número */

.resumo-bloco:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

.resumo-qtd {
  grid-area: qtd;
  font-size: var(--fs-13);
  text-align: left;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.painel-filtros {
  padding: var(--sp-4);
}

/* minmax(0, …): sem isso a coluna cresce até caber as duas datas lado a lado
   e os campos vazam do cartão no celular */
.filtros-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--sp-3);
}

.filtros-grade > * {
  min-width: 0;
}

.filtros-grade .field {
  margin-bottom: var(--sp-3);
}

.filtros-rodape {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.lista-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--touch);
  margin-bottom: var(--sp-2);
}

/* à direita da contagem: "Selecionar todas" (celular) e "Imprimir lista" (Pagar) */
.lista-topo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-4);
}

.caixa .lista-topo {
  flex-wrap: wrap;
}

.lista-contagem {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.ft-tabela {
  overflow: hidden;
  overflow: clip; /* recorta os cantos sem virar área de rolagem: o cabeçalho fixo continua funcionando */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.ft-cabecalho {
  display: none;
}

/* no celular cada lançamento é um bloco de três linhas */
.ft-linha {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "check cobertura valor"
    "check contexto  contexto"
    "check pagamento status";
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: 2px;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

#lista-fts > .ft-linha:first-child,
#lista-caixa > .cx-linha:first-child {
  border-top: 0;
}

.ft-linha:active {
  background: var(--surface-2);
}

.ft-linha:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: -2px;
}

.c-check {
  grid-area: check;
  grid-row: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: var(--touch);
  margin: 0;
  cursor: pointer;
}

.c-check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--gap-blue-deep);
  cursor: pointer;
}

.c-check input:disabled {
  opacity: 0.3;
  cursor: default;
}

.c-cobertura {
  grid-area: cobertura;
  min-width: 0;
  font-size: var(--fs-15);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.c-cobertura strong {
  font-weight: 600;
  color: var(--ink);
}

.c-vinculo {
  margin-left: 6px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-3);
}

.c-valor {
  grid-area: valor;
  font-size: var(--fs-15);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.c-contexto {
  grid-area: contexto;
  min-width: 0;
  font-size: var(--fs-14);
  line-height: 1.4;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.c-contexto > span + span::before {
  content: " · ";
  color: var(--ink-3);
}

.c-contexto > .c-quem::before {
  content: " · cobrindo ";
  color: var(--ink-3);
}

.c-pagamento {
  grid-area: pagamento;
  min-width: 0;
  font-size: var(--fs-14);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.c-pag-dia::before {
  content: " · ";
}

.ft-linha.selecionada {
  background: var(--gap-blue-50);
}

.c-status {
  grid-area: status;
  justify-self: end;
}

.ft-linha.status-cancelado .c-cobertura strong,
.ft-linha.status-cancelado .c-valor {
  color: var(--ink-3);
  text-decoration: line-through;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
}

.status-badge {
  color: var(--cor-status-ink, var(--status-cancelado-ink));
  background: var(--cor-status-bg, var(--status-cancelado-bg));
  border-color: var(--cor-status-line, var(--status-cancelado-line));
}

/* a cor nunca é o único sinal: cada etiqueta leva um ponto e o texto */
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lista-vazia,
.lista-aviso {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-14);
  text-align: center;
  color: var(--ink-3);
}

.barra-lote {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-rodape);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) max(var(--sp-4), calc(50% - var(--content-wide) / 2 + var(--sp-4))) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.06);
}

.lote-resumo {
  flex: 1 1 200px;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* celular: quatro ações em grade 2x2, a principal ocupando a linha de baixo inteira */
.lote-acoes {
  display: grid;
  flex: 1 1 320px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.lote-acoes .btn-secundario {
  width: 100%;
  padding: 0 var(--sp-2);
}

.lote-acoes .btn-primario {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

.btn-lote-cancelar {
  color: var(--gap-red-ink);
}

.detalhe-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.detalhe-valor {
  font-size: var(--fs-26);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.detalhe-nota {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--ink-2);
}

.pagina-painel .revisao-grupo > .revisao-linha:first-child {
  padding-top: 0;
  border-top: 0;
}

#detalhe-acoes .btn-primario,
#detalhe-acoes .btn-perigo {
  flex-grow: 1.5;
}

.detalhe-acoes-secundarias {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.detalhe-acoes-secundarias .btn-icone {
  flex: 1 1 0;
}

.detalhe-historico {
  margin-top: var(--sp-6);
}

.historico-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--line);
}

.historico-lista li {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.historico-lista li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border: 2px solid var(--line-field);
  border-radius: 50%;
}

.historico-quem {
  font-weight: 600;
  color: var(--ink);
}

.historico-quando {
  display: block;
  font-size: var(--fs-13);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 600px) {
  .painel-resumo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
  }

  .resumo-bloco {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rotulo"
      "valor"
      "qtd";
    row-gap: 2px;
    padding: var(--sp-4);
  }

  .resumo-valor {
    font-size: var(--fs-26);
    letter-spacing: -0.02em;
    text-align: left;
  }

  .resumo-qtd {
    text-align: left;
  }
}

/* no computador a lista vira tabela */
@media (min-width: 900px) {
  .filtros-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .ft-cabecalho,
  .ft-linha {
    grid-template-columns: 48px 64px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.8fr) 104px 96px;
    grid-template-areas: "check falta posto quem cobertura pagamento valor status";
    column-gap: var(--sp-4);
    row-gap: 0;
    padding: 0 var(--sp-5) 0 0;
  }

  .ft-cabecalho {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: grid;
    align-items: center;
    min-height: 44px;
    background: var(--navy);
  }

  .ft-cabecalho > span {
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
  }

  .ft-cabecalho .c-valor {
    text-align: right;
  }

  .ft-cabecalho .c-check input:disabled {
    opacity: 0.35;
  }

  .c-pagamento {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .c-pag-dia {
    order: -1;
    font-size: var(--fs-14);
    color: var(--ink-2);
  }

  .c-pag-dia::before {
    content: none;
  }

  .c-pag-forma {
    overflow: hidden;
    font-size: var(--fs-13);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ft-linha {
    min-height: 56px;
  }

  .ft-linha.selecionada {
    box-shadow: inset 3px 0 0 var(--gap-blue-deep);
  }

  .c-check {
    grid-row: auto;
  }

  .c-contexto {
    display: contents;
  }

  .c-contexto > span + span::before,
  .c-contexto > .c-quem::before {
    content: none;
  }

  .c-falta {
    grid-area: falta;
  }

  .c-posto {
    grid-area: posto;
  }

  .c-quem {
    grid-area: quem;
  }

  .c-falta,
  .c-posto,
  .c-quem {
    overflow: hidden;
    font-size: var(--fs-14);
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink-2);
  }

  .c-cobertura {
    overflow: hidden;
    font-size: var(--fs-14);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .c-vinculo {
    display: block;
    margin: 0;
    line-height: 1.3;
  }

  .c-valor {
    font-size: var(--fs-14);
  }
}

@media (min-width: 1140px) {
  .filtros-grade {
    grid-template-columns: 330px 340px minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (hover: hover) and (pointer: fine) {
  .ft-linha:hover:not(.selecionada) {
    background: var(--surface-2);
  }

  .resumo-bloco:hover:not(.ativo) {
    border-color: var(--line-hover);
  }

  .aba:hover:not(.ativa) {
    color: var(--ink);
  }
}

/* ---------- mouse ---------- */

@media (hover: hover) and (pointer: fine) {
  input[type="text"]:hover:not(:focus):not(:disabled),
  input[type="search"]:hover:not(:focus):not(:disabled),
  input[type="tel"]:hover:not(:focus):not(:disabled),
  input[type="email"]:hover:not(:focus):not(:disabled),
  input[type="password"]:hover:not(:focus):not(:disabled),
  input[type="date"]:hover:not(:focus):not(:disabled),
  select:hover:not(:focus):not(:disabled),
  textarea:hover:not(:focus):not(:disabled),
  .input-prefixed:hover:not(:focus-within),
  .datas-barra:hover {
    border-color: var(--line-field-hover);
  }

  .btn-primario:hover:not(:disabled) {
    background: var(--gap-blue-ink);
  }

  .btn-secundario:hover:not(:disabled),
  .btn-icone:hover:not(:disabled),
  .btn-sair:hover:not(:disabled),
  .btn-ver-senha:hover:not(:disabled),
  .cal-nav:hover {
    background: var(--surface-2);
    border-color: var(--line-hover);
  }

  .btn-toggle-calendario:hover:not(:disabled) {
    background: var(--surface-4);
    border-color: transparent;
  }

  .btn-duplicar:hover:not(:disabled) {
    color: var(--gap-blue-ink);
    background: var(--gap-blue-50);
    border-color: var(--gap-blue-100);
  }

  .btn-remover:hover:not(:disabled) {
    background: var(--gap-red-50);
    border-color: var(--gap-red-200);
  }

  .btn-repetir-todos:hover,
  .chip-data:hover {
    background: var(--gap-blue-100);
  }

  .btn-add-linha:hover {
    background: var(--surface);
    border-color: var(--gap-blue-deep);
  }

  .cal-dia:not(.vazio):not(.selecionado):hover {
    background: var(--surface-3);
  }

  .cal-dia.selecionado:hover {
    background: var(--gap-blue-ink);
  }

  .segmented input[type="radio"]:not(:checked) + label:hover {
    color: var(--ink);
  }
}

/* ---------- ajustes de largura ---------- */

@media (max-width: 430px) {
  .field-row {
    flex-direction: column;
    gap: 0;
  }

  .field-row:has(input[type="date"]) {
    flex-direction: row;
    gap: var(--sp-3);
  }

  /* "dd/mm/aaaa" + ícone precisam de ~130px; o campo "Quem autorizou" cede */
  .field-row:has(input[type="date"]) .field:has(input[type="date"]) {
    flex-grow: 1.25;
  }

  .field-row input[type="date"] {
    padding-left: 10px;
    padding-right: 36px;
  }

  .field-row input[type="date"]::-webkit-calendar-picker-indicator {
    right: 10px;
  }

  .topbar {
    gap: var(--sp-2);
  }

  .btn-sair {
    padding: 0 10px;
    font-size: var(--fs-14);
  }

  .datas-barra {
    padding-left: var(--sp-3);
  }

  .datas-texto {
    font-size: var(--fs-14);
  }
}

/* celular estreito (360px): "dd/mm/aaaa" + ícone cabem em meia largura */
@media (max-width: 380px) {
  .field-row input[type="date"] {
    padding-left: var(--sp-2);
    padding-right: 28px;
  }

  .field-row input[type="date"]::-webkit-calendar-picker-indicator {
    right: 6px;
    width: 16px;
    height: 16px;
  }
}

/* "Voltar e corrigir" + "Enviar mesmo assim" numa linha só no celular */
@media (max-width: 430px) {
  .revisao-acoes {
    gap: var(--sp-2);
  }

  .revisao-acoes .btn-primario,
  .revisao-acoes .btn-perigo,
  .revisao-acoes .btn-secundario {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    font-size: var(--fs-15);
  }

  #btn-confirmar-envio {
    flex-grow: 1.25;
  }
}

@media (max-width: 359px) {
  .card {
    padding: var(--sp-4);
  }

  .linha-header {
    margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
  }
}

@media (min-width: 600px) {
  main {
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
  }

  .card {
    padding: var(--sp-6);
  }

  .linha-header {
    margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5);
    padding-left: var(--sp-5);
  }
}

/* ---------- usuários ---------- */

body.pagina-usuarios {
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.usuarios-card .secao-titulo {
  margin-bottom: var(--sp-4);
}

.usuario-form .btn-primario {
  margin: var(--sp-1) 0 0;
}

.usuarios-card .perfil-ajuda {
  margin: var(--sp-3) 0 0;
}

.usuarios-card .perfil-ajuda strong {
  font-weight: 600;
  color: var(--ink-2);
}

.usuarios-card .mensagem-erro {
  margin: var(--sp-3) 0 0;
}

.tabela {
  width: 100%;
  margin-top: var(--sp-6);
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-14);
}

.tabela td {
  vertical-align: middle;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.u-nome strong {
  font-weight: 600;
  color: var(--ink);
}

.u-voce {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: var(--sp-2);
  padding: 0 6px;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--ink-3);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  vertical-align: 1px;
}

.u-login {
  font-variant-numeric: tabular-nums;
}

.situacao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: 600;
  white-space: nowrap;
}

.situacao::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.situacao.ativa {
  color: var(--status-pago-ink);
}

.situacao.inativa {
  color: var(--ink-3);
}

.tabela tr.inativo .u-nome strong,
.tabela tr.inativo .u-login {
  color: var(--ink-3);
}

.tabela tr.inativo .etiqueta-perfil {
  opacity: 0.55;
}

/* no celular cada usuário vira um bloco */
@media (max-width: 719px) {
  .tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabela,
  .tabela tbody {
    display: block;
  }

  .tabela tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nome  perfil"
      "login situacao"
      "acoes acoes";
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--line);
  }

  .tabela td {
    display: block;
    padding: 0;
  }

  .u-nome {
    grid-area: nome;
    font-size: var(--fs-16);
  }

  .u-login {
    grid-area: login;
    font-size: var(--fs-14);
    color: var(--ink-3);
  }

  .u-perfil {
    grid-area: perfil;
    justify-self: end;
  }

  .u-situacao {
    grid-area: situacao;
    justify-self: end;
  }

  /* .tabela td deixa a célula em bloco; aqui precisa vencer a especificidade */
  .tabela .u-acoes {
    grid-area: acoes;
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
  }

  .u-acoes .btn-icone {
    flex: 1 1 0;
  }
}

@media (min-width: 720px) {
  .tabela thead th {
    height: 44px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: var(--navy);
  }

  .tabela thead th:first-child {
    border-top-left-radius: var(--r-md);
  }

  .tabela thead th:last-child {
    border-top-right-radius: var(--r-md);
  }

  .tabela td {
    height: 60px;
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--line);
  }

  .u-acoes {
    width: 1%;
    text-align: right;
    white-space: nowrap;
  }

  .u-acoes .btn-icone + .btn-icone {
    margin-left: var(--sp-2);
  }
}

@media (min-width: 900px) {
  .usuario-form {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 0.85fr) auto;
    align-items: end;
    gap: var(--sp-3);
  }

  .usuario-form .field {
    margin-bottom: 0;
  }

  .usuario-form .btn-primario {
    width: auto;
    min-height: var(--control-h);
    margin: 0;
    padding: 0 var(--sp-6);
  }
}

/* ---------- janela de edição ---------- */

.dialogo {
  width: min(460px, calc(100vw - var(--sp-8)));
  max-height: calc(100dvh - var(--sp-8));
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
}

.dialogo::backdrop {
  background: rgba(16, 24, 40, 0.45);
}

.dialogo-topo {
  padding: var(--sp-6) var(--sp-6) 0;
}

.dialogo-topo h2 {
  font-size: var(--fs-21);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--gap-blue);
}

.dialogo-sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-14);
  color: var(--ink-3);
}

.dialogo-corpo {
  padding: var(--sp-5) var(--sp-6) var(--sp-1);
}

.dialogo-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--line);
}

.dialogo-acoes .btn-primario,
.dialogo-acoes .btn-perigo,
.dialogo-acoes .btn-secundario {
  width: auto;
  min-width: 120px;
  min-height: 44px;
  margin: 0;
}

/* ---------- atalho de teclado: pular o menu ---------- */

.pular-conteudo {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-15);
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border-radius: var(--r-md);
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: none;
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* ---------- menu lateral e cabeçalho de página (só no computador) ---------- */

.menu-lateral,
.pagina-cabecalho,
.detalhe-fundo,
.btn-fechar {
  display: none;
}

.menu-item svg,
.menu-sair svg,
.btn-acao svg,
.btn-fechar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-marca {
  display: block;
  margin: 0 0 var(--sp-4);
  padding: 0 var(--sp-2) var(--sp-5);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.menu-marca img {
  display: block;
  width: 128px;
  height: auto;
}

.menu-produto {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.menu-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.menu-item svg {
  color: var(--ink-3);
}

.menu-item.ativo {
  font-weight: 600;
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
}

.menu-item.ativo svg {
  color: var(--gap-blue-deep);
}

.menu-item:focus-visible,
.menu-marca:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

.menu-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-4) var(--sp-1) 0 var(--sp-2);
  border-top: 1px solid var(--line);
}

.menu-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--navy);
  border-radius: 50%;
}

.menu-quem {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.menu-quem strong {
  display: block;
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

.menu-quem span {
  display: block;
  font-size: var(--fs-13);
  color: var(--ink-3);
}

.menu-sair {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ink-3);
  border-radius: var(--r-md);
}

.pagina-titulo {
  font-size: var(--fs-30);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.024em;
  color: var(--gap-blue);
}

.pagina-sub {
  margin-top: 6px;
  font-size: var(--fs-15);
  line-height: 1.4;
  color: var(--ink-2);
}

.pagina-acoes {
  display: flex;
  gap: var(--sp-2);
}

.btn-acao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-14);
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: var(--gap-blue-deep);
  border-radius: var(--r-md);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14), var(--shadow-1);
}

.btn-fechar {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ink-3);
  border-radius: var(--r-md);
}

@keyframes gaveta-entra {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fundo-entra {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- computador: master e escritório ---------- */

@media (min-width: 1024px) {
  .com-menu {
    --control-h: 40px;
    --touch: 34px;
  }

  body.com-menu {
    padding-left: var(--menu-w);
  }

  .com-menu .topbar,
  .com-menu .abas,
  .com-menu .so-celular {
    display: none !important;
  }

  .com-menu .menu-lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    width: var(--menu-w);
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
    background: var(--surface);
    border-right: 1px solid var(--line);
  }

  .com-menu main {
    padding: var(--sp-8) var(--sp-8) var(--sp-10);
  }

  .com-menu main.painel,
  .com-menu main.usuarios,
  .com-menu main.postos,
  .com-menu main.relatorios {
    max-width: var(--admin-max);
  }

  /* botão sem ação possível na barra escura: apagado, mas legível */
  .com-menu .lote-acoes button:disabled {
    opacity: 0.45;
  }

  .com-menu .pagina-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-bottom: var(--sp-6);
  }

  .com-menu input[type="text"],
  .com-menu input[type="search"],
  .com-menu input[type="tel"],
  .com-menu input[type="email"],
  .com-menu input[type="password"],
  .com-menu input[type="date"],
  .com-menu select,
  .com-menu textarea,
  .com-menu .segmented label {
    font-size: var(--fs-14);
  }

  .com-menu .btn-primario,
  .com-menu .btn-secundario,
  .com-menu .btn-perigo {
    min-height: 44px;
    font-size: var(--fs-15);
  }

  /* lançamento aberto pelo master no computador */
  .com-menu .footer-fixo,
  .com-menu .tela-revisao {
    left: var(--menu-w);
  }

  .com-menu .toast {
    left: calc(50vw + var(--menu-w) / 2);
  }

  /* painel: totais */
  .com-menu .painel-resumo {
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
  }

  .com-menu .resumo-bloco {
    padding: var(--sp-4);
  }

  .com-menu .resumo-rotulo {
    font-size: var(--fs-14);
  }

  .com-menu .painel-resumo {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .com-menu .resumo-valor {
    margin-top: var(--sp-2);
    font-size: clamp(18px, 1.55vw, 24px);
  }

  .com-menu .resumo-qtd {
    font-size: var(--fs-14);
  }

  /* painel: filtros numa faixa só */
  .com-menu .painel-filtros {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding: var(--sp-4) var(--sp-5) var(--sp-1);
  }

  .com-menu .filtros-grade {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sp-3);
  }

  /* larguras somadas cabem numa faixa só a partir de 1366px de tela */
  .com-menu .filtro-periodo {
    flex: 0 0 240px;
  }

  .com-menu .filtro-periodo .segmented label {
    padding: 0 10px;
    white-space: nowrap;
  }

  .com-menu .filtro-datas {
    flex: 0 0 304px;
    gap: var(--sp-3);
  }

  .com-menu input[type="date"] {
    padding: 0 30px 0 var(--sp-3);
  }

  .com-menu input[type="date"]::-webkit-calendar-picker-indicator {
    right: var(--sp-2);
    width: 18px;
    height: 18px;
  }

  .com-menu .filtro-texto {
    flex: 1 1 140px;
  }

  /* o supervisor desce para a segunda linha: sem esticar até o fim */
  .com-menu .filtro-supervisor {
    flex: 0 1 300px;
  }

  .com-menu .filtros-rodape {
    flex: 0 0 auto;
    margin-bottom: var(--sp-3);
    padding: 0;
    border: 0;
  }

  .com-menu .filtros-rodape .btn-icone {
    min-height: var(--control-h);
    padding: 0 var(--sp-4);
  }

  .com-menu .lista-topo {
    min-height: 0;
    margin-bottom: var(--sp-3);
  }

  /* painel: ações em lote flutuando sobre a tabela */
  body.pagina-painel.com-menu.com-barra-lote {
    padding-bottom: 120px;
  }

  .com-menu .barra-lote {
    left: calc(50vw + var(--menu-w) / 2);
    right: auto;
    bottom: var(--sp-6);
    flex-wrap: nowrap;
    gap: var(--sp-6);
    width: max-content;
    max-width: calc(100vw - var(--menu-w) - var(--sp-10));
    padding: 10px 10px 10px var(--sp-5);
    color: #fff;
    background: var(--navy);
    border: 0;
    border-radius: var(--r-lg);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.28);
    transform: translateX(-50%);
  }

  .com-menu .lote-resumo {
    flex: 0 0 auto;
    color: #fff;
    white-space: nowrap;
  }

  .com-menu .lote-acoes {
    display: flex;
    flex: 0 0 auto;
  }

  .com-menu .lote-acoes .btn-secundario {
    width: auto;
    min-height: 40px;
    padding: 0 var(--sp-4);
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: none;
  }

  /* vermelho claro: sobre o marinho fica em 7.0:1 */
  .com-menu .lote-acoes .btn-lote-cancelar {
    color: var(--perigo-sobre-navy);
  }

  .com-menu .lote-acoes .btn-primario {
    width: auto;
    min-height: 40px;
    padding: 0 var(--sp-5);
  }

  /* painel: detalhe vira gaveta à direita */
  .com-menu .detalhe-fundo:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sobreposicao) - 1);
    display: block;
    background: rgba(16, 24, 40, 0.32);
    animation: fundo-entra 160ms var(--ease);
  }

  .com-menu #tela-detalhe {
    left: auto;
    width: 540px;
    border-left: 1px solid var(--line);
    box-shadow: -16px 0 40px rgba(16, 24, 40, 0.16);
    animation: gaveta-entra 180ms var(--ease);
  }

  .com-menu #tela-detalhe .revisao-topo {
    position: relative;
    padding: var(--sp-6) 72px var(--sp-5) var(--sp-6);
  }

  .com-menu #tela-detalhe .revisao-conteudo {
    max-width: none;
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
  }

  .com-menu #tela-detalhe .revisao-acoes {
    padding: var(--sp-4) var(--sp-6);
  }

  .com-menu .btn-fechar {
    display: inline-flex;
  }

  /* usuários */
  .com-menu .usuarios-card {
    padding: var(--sp-6) var(--sp-6) var(--sp-2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .menu-item:not(.ativo):hover {
    color: var(--ink);
    background: var(--surface-3);
  }

  .menu-sair:hover {
    color: var(--gap-red-ink);
    background: var(--gap-red-50);
  }

  .btn-acao:hover {
    background: var(--gap-blue-ink);
  }

  .btn-fechar:hover {
    color: var(--ink);
    background: var(--surface-3);
  }

  .tabela tbody tr:hover td {
    background: var(--surface-2);
  }

  .com-menu .lote-acoes .btn-secundario:hover:not(:disabled) {
    background: var(--navy-2);
    border-color: rgba(255, 255, 255, 0.4);
  }
}

/* ---------- FT repetida: aviso e marca ---------- */

.alerta-repeticao {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-line);
  border-left: 4px solid var(--alerta-forte);
  border-radius: var(--r-md);
}

.alerta-titulo {
  display: block;
  font-size: var(--fs-15);
  font-weight: 700;
}

.alerta-lista {
  margin: var(--sp-2) 0 0;
  padding-left: 18px;
}

.alerta-lista li + li {
  margin-top: var(--sp-1);
}

.alerta-dica {
  margin-top: var(--sp-2);
  font-weight: 500;
}

/* faixa no topo do histórico: texto e botão lado a lado */
.alerta-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}

.alerta-faixa p {
  flex: 1 1 220px;
}

.alerta-faixa .btn-icone {
  color: var(--alerta-ink);
  border-color: var(--alerta-line);
}

.badge-repetida {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 700;
  white-space: nowrap;
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-line);
  border-radius: var(--r-sm);
}

.revisao-dia.repetida {
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border-color: var(--alerta-line);
}

.revisao-dia.repetida::after {
  content: " ?";
  font-weight: 700;
}

.c-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-1);
}

/* link com cara de botão (ex.: "Ver minhas FTs" depois do envio) */
.btn-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

/* ---------- minhas FTs (histórico do supervisor) ---------- */

body.pagina-minhas {
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.minhas-filtros {
  padding: var(--sp-4);
}

.minhas-filtros .field {
  margin-bottom: var(--sp-3);
}

.minhas-filtros .filtro-status {
  margin-bottom: 0;
}

/* quatro opções: letra um pouco menor para "Canceladas" caber a 360px */
.segmented:has(> label:nth-of-type(4)) label {
  padding: 0 2px;
  font-size: var(--fs-13);
}

.pagina-minhas .lista-contagem {
  margin: 0 0 var(--sp-2);
}

.lista-minhas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.minha-ft {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.minha-ft.repetida {
  border-left: 4px solid var(--alerta-forte);
}

.mf-resumo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  user-select: text;
  -webkit-user-select: text;
}

.mf-resumo:focus-visible {
  outline-offset: -2px;
}

.mf-topo,
.mf-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

/* data e etiquetas dividem a linha; se não couberem (360px com "Repetida?"
   e "Aguardando conferência"), as etiquetas descem inteiras em vez de serem
   cortadas pela borda do cartão */
.mf-topo {
  flex-wrap: wrap;
  row-gap: var(--sp-1);
}

.mf-data {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mf-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  max-width: 100%;
}

.mf-linha {
  margin-top: var(--sp-1);
}

.mf-nome {
  min-width: 0;
  font-size: var(--fs-16);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.mf-nome strong {
  font-weight: 600;
  color: var(--ink);
}

.mf-vinculo {
  margin-left: 6px;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-3);
}

.mf-valor {
  flex-shrink: 0;
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mf-sub {
  font-size: var(--fs-14);
  line-height: 1.4;
  color: var(--ink-2);
}

.minha-ft.status-cancelado .mf-nome strong,
.minha-ft.status-cancelado .mf-valor {
  color: var(--ink-3);
  text-decoration: line-through;
}

/* seta que indica que o cartão abre */
.mf-resumo::after {
  content: "";
  align-self: center;
  width: 8px;
  height: 8px;
  margin-top: var(--sp-1);
  border-right: 1.75px solid var(--ink-3);
  border-bottom: 1.75px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.mf-resumo[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.mf-detalhe {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

.mf-detalhe .alerta-repeticao {
  margin-bottom: var(--sp-3);
}

.mf-dados > .revisao-linha:first-child {
  border-top: 0;
}

@media (hover: hover) and (pointer: fine) {
  .mf-resumo:hover {
    background: var(--surface-2);
  }
}

@media (min-width: 720px) {
  .minhas-filtros {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-items: end;
  }

  .minhas-filtros .field-row,
  .minhas-filtros .field {
    margin-bottom: 0;
  }

  .minhas-filtros .filtro-status {
    grid-column: 1 / -1;
    max-width: 440px;
    margin-top: var(--sp-3);
  }
}

@media (min-width: 1024px) {
  .com-menu main.minhas {
    max-width: 880px;
  }

  .com-menu .minhas-filtros {
    padding: var(--sp-4) var(--sp-5);
  }
}

/* ---------- caixa de sugestões (posto) ---------- */

.autocompletar {
  position: relative;
}

.sugestoes {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-sugestoes);
  max-height: 364px; /* as 8 sugestões inteiras, sem cortar a última */
  margin: 0;
  padding: var(--sp-1);
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
}

.sugestoes li {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-15);
  line-height: 1.3;
  color: var(--ink);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.sugestoes li.ativa {
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
}

.sugestoes mark {
  font-weight: 700;
  color: inherit;
  background: none;
}

.sugestoes li.vazio {
  font-size: var(--fs-14);
  color: var(--ink-3);
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .sugestoes li:not(.vazio):not(.ativa):hover {
    background: var(--surface-3);
  }
}

/* ---------- postos (cadastro do master) ---------- */

body.pagina-postos {
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}

.posto-form .btn-primario {
  margin: var(--sp-1) 0 0;
}

.postos-parecidos {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.postos-parecidos.existe {
  font-weight: 600;
  color: var(--info-ink);
  background: var(--info-bg);
  border-color: var(--info-line);
}

.postos-card .mensagem-erro {
  margin: var(--sp-3) 0 0;
}

.postos-lote {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.postos-lote summary {
  width: fit-content;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--gap-blue-deep);
  cursor: pointer;
}

.postos-lote summary:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.postos-lote[open] summary {
  margin-bottom: var(--sp-3);
}

.postos-lote .field {
  margin-bottom: var(--sp-3);
}

.lote-resultado {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink-2);
}

.postos-lote .btn-secundario {
  width: auto;
  padding: 0 var(--sp-5);
}

/* possíveis duplicados */
.duplicados {
  margin-bottom: var(--sp-4);
}

.duplicados-lista {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.duplicado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--alerta-line);
}

.duplicado-texto {
  flex: 1 1 260px;
  color: var(--ink);
}

.duplicado .btn-icone {
  color: var(--alerta-ink);
  border-color: var(--alerta-line);
}

/* lista: título, busca e filtro */
.postos-barra {
  margin-bottom: var(--sp-2);
}

.postos-filtros .field {
  margin-bottom: var(--sp-3);
}

.postos-contagem {
  margin: var(--sp-2) 0 0;
}

.tabela-postos {
  margin-top: var(--sp-3);
}

.p-nome strong {
  font-weight: 600;
  color: var(--ink);
}

.p-fts {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.p-fts-numero {
  font-weight: 600;
  color: var(--ink);
}

.tabela tr.inativo .p-nome strong,
.tabela tr.inativo .p-fts-numero {
  color: var(--ink-3);
}

/* cabeçalho que ordena: o botão ocupa a célula inteira */
.btn-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.btn-ordenar::after {
  content: "↕";
  font-size: 13px;
  opacity: 0.55;
}

th[aria-sort="ascending"] .btn-ordenar::after {
  content: "↑";
  opacity: 1;
}

th[aria-sort="descending"] .btn-ordenar::after {
  content: "↓";
  opacity: 1;
}

.btn-ordenar:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* menu "⋯" da linha */
.menu-linha {
  position: relative;
  display: inline-block;
}

.btn-mais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  color: var(--ink-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
}

.btn-mais svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.btn-mais[aria-expanded="true"] {
  color: var(--ink);
  background: var(--surface-3);
  border-color: var(--line-strong);
}

.menu-acoes {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: var(--z-sugestoes);
  min-width: 230px;
  padding: var(--sp-1);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
}

.menu-acoes button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  border-radius: var(--r-sm);
}

.menu-acoes button.perigo {
  color: var(--gap-red-ink);
}

.menu-acoes button:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: -2px;
}

/* páginas */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.pagina-atual {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.paginacao .btn-icone {
  min-height: var(--touch);
  padding: 0 var(--sp-4);
}

.dialogo-texto {
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--ink-2);
}

/* celular: cada posto vira um bloco (nome + ⋯ em cima; FTs e situação embaixo) */
@media (max-width: 719px) {
  .tabela-postos tr {
    grid-template-areas:
      "nome acoes"
      "fts  situacao";
    row-gap: 2px;
    padding: var(--sp-3) 0;
  }

  .p-nome {
    grid-area: nome;
    font-size: var(--fs-16);
  }

  .p-fts {
    grid-area: fts;
    font-size: var(--fs-14);
    color: var(--ink-3);
  }

  .p-situacao {
    grid-area: situacao;
    justify-self: end;
  }

  .tabela .p-acoes {
    grid-area: acoes;
    justify-self: end;
  }
}

@media (min-width: 720px) {
  .p-fts-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tabela-postos .col-numero {
    text-align: right;
  }

  .tabela-postos th.col-numero .btn-ordenar {
    flex-direction: row-reverse;
  }

  .tabela-postos thead th {
    padding: 0 var(--sp-4);
  }

  .tabela-postos td {
    height: 56px;
  }

  .p-acoes {
    width: 1%;
    text-align: right;
    white-space: nowrap;
  }

  .postos-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 var(--sp-4);
  }

  .postos-filtros .segmented label {
    padding: 0 var(--sp-4);
  }
}

@media (min-width: 900px) {
  .posto-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-3);
  }

  .posto-form .field {
    margin-bottom: 0;
  }

  .posto-form .btn-primario {
    width: auto;
    min-height: var(--control-h);
    margin: 0;
    padding: 0 var(--sp-6);
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn-mais:hover {
    color: var(--ink);
    background: var(--surface-3);
  }

  .menu-acoes button:hover {
    background: var(--surface-3);
  }

  .menu-acoes button.perigo:hover {
    background: var(--gap-red-50);
  }

  .btn-ordenar:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

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

.hidden {
  display: none !important;
}

/* ================= fluxo Supervisor → Escritório ================= */
/* ---------- status da FT: o mapa de cores ----------
   Cada status define as mesmas quatro variáveis; totais, etiquetas,
   filtros e indicadores só leem --cor-status-*. */

.status-badge.lancado,
.resumo-bloco[data-status="lancado"],
.ind-status-item.status-lancado {
  --cor-status: var(--status-lancado-dot);
  --cor-status-ink: var(--status-lancado-ink);
  --cor-status-bg: var(--status-lancado-bg);
  --cor-status-line: var(--status-lancado-line);
}

.status-badge.em_conferencia,
.resumo-bloco[data-status="em_conferencia"],
.ind-status-item.status-em_conferencia {
  --cor-status: var(--status-conferencia-dot);
  --cor-status-ink: var(--status-conferencia-ink);
  --cor-status-bg: var(--status-conferencia-bg);
  --cor-status-line: var(--status-conferencia-line);
}

.status-badge.aprovado,
.resumo-bloco[data-status="aprovado"],
.ind-status-item.status-aprovado {
  --cor-status: var(--status-aprovado-dot);
  --cor-status-ink: var(--status-aprovado-ink);
  --cor-status-bg: var(--status-aprovado-bg);
  --cor-status-line: var(--status-aprovado-line);
}

.status-badge.pago,
.resumo-bloco[data-status="pago"],
.ind-status-item.status-pago {
  --cor-status: var(--status-pago-dot);
  --cor-status-ink: var(--status-pago-ink);
  --cor-status-bg: var(--status-pago-bg);
  --cor-status-line: var(--status-pago-line);
}

.status-badge.devolvido,
.resumo-bloco[data-status="devolvido"],
.ind-status-item.status-devolvido {
  --cor-status: var(--status-devolvido-dot);
  --cor-status-ink: var(--status-devolvido-ink);
  --cor-status-bg: var(--status-devolvido-bg);
  --cor-status-line: var(--status-devolvido-line);
}

.status-badge.cancelado,
.resumo-bloco[data-status="cancelado"],
.ind-status-item.status-cancelado {
  --cor-status: var(--status-cancelado-dot);
  --cor-status-ink: var(--status-cancelado-ink);
  --cor-status-bg: var(--status-cancelado-bg);
  --cor-status-line: var(--status-cancelado-line);
}

/* ---------- alertas de inconsistência ----------
   Contornados (fundo branco), para não se confundir com as etiquetas de
   status, que são preenchidas. Vermelho só no que pode ser erro. */

.chip-alerta {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

.chip-alerta::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}

.chip-alerta.alerta {
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border-color: var(--alerta-line);
}

.chip-alerta.alerta::before {
  background: var(--alerta-forte);
}

.chip-alerta.atencao::before {
  background: var(--atencao-ponto);
}

.chips-alerta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

/* ---------- menu: número do que está esperando ---------- */

.menu-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  font-size: var(--fs-12);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--gap-blue-deep);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.menu-contador[data-pendencia="devolvidas"] {
  background: var(--status-devolvido-ink);
}

.aba .menu-contador {
  margin-left: 6px;
}

/* ---------- painel: abas Lançamentos / Indicadores ---------- */

.abas-painel {
  display: flex;
  gap: var(--sp-1);
  margin: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.abas-painel [role="tab"] {
  position: relative;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink-3);
}

.abas-painel [role="tab"][aria-selected="true"] {
  color: var(--gap-blue-ink);
}

.abas-painel [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: -1px;
  height: 2px;
  background: var(--gap-blue-deep);
}

.abas-painel [role="tab"]:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* barra de ações: 6 ou 5 botões em duas linhas no celular */
.lote-acoes-6 .btn-primario,
.lote-acoes-5 .btn-primario {
  grid-column: auto;
}

.lote-acoes-5 .btn-primario {
  grid-column: span 2;
}

.lote-acoes .btn-primario {
  min-height: var(--touch);
  padding: 0 var(--sp-2);
}

.lote-acoes .btn-secundario {
  min-height: var(--touch);
}

/* ---------- caixa de entrada do escritório (Conferir) ---------- */

/* uma coluna por aba que o perfil vê (o financeiro não tem "Conferir") */
.caixa-abas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.caixa-abas [role="tab"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.caixa-aba-rotulo {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--ink-2);
}

.caixa-aba-qtd {
  font-size: var(--fs-26);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.caixa-abas [role="tab"][aria-selected="true"] {
  background: var(--gap-blue-50);
  border-color: var(--gap-blue-deep);
  box-shadow: 0 0 0 1px var(--gap-blue-deep), var(--shadow-1);
}

.caixa-abas [role="tab"][aria-selected="true"] .caixa-aba-rotulo {
  color: var(--gap-blue-ink);
}

.caixa-abas [role="tab"]:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

/* FTs paradas além do limite de horas */
.aviso-paradas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-line);
  border-left: 4px solid var(--alerta-forte);
  border-radius: var(--r-md);
}

.aviso-paradas p {
  flex: 1 1 220px;
}

.aviso-paradas .btn-icone {
  color: var(--alerta-ink);
  border-color: var(--alerta-line);
}

.selecionar-tudo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
}

.selecionar-tudo input {
  width: 20px;
  height: 20px;
  accent-color: var(--gap-blue-deep);
}

.cx-cabecalho {
  display: none;
}

/* celular: um bloco de quatro linhas por FT */
.cx-linha {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "check cobertura  valor"
    "check contexto   contexto"
    "check espera     supervisor"
    "check status     status";
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: 2px;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.cx-linha:active {
  background: var(--surface-2);
}

.cx-linha:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: -2px;
}

.cx-linha.selecionada {
  background: var(--gap-blue-50);
}

.cx-espera {
  grid-area: espera;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  font-size: var(--fs-14);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.cx-espera strong {
  font-weight: 600;
  color: var(--ink);
}

.cx-com {
  font-size: var(--fs-13);
  color: var(--status-conferencia-ink);
}

.cx-forma {
  font-size: var(--fs-13);
  color: var(--ink-3);
}

.cx-supervisor {
  grid-area: supervisor;
  justify-self: end;
  font-size: var(--fs-13);
  color: var(--ink-3);
  white-space: nowrap;
}

.cx-linha .cx-supervisor::before {
  content: "por ";
}

.cx-linha .c-status {
  justify-self: start;
  justify-content: flex-start;
}

.cx-linha .c-status:empty {
  display: none;
}

/* parada além do limite: faixa vermelha à esquerda e o tempo em vermelho */
.cx-linha.parada {
  box-shadow: inset 3px 0 0 var(--alerta-forte);
}

.cx-linha.parada .cx-espera strong {
  color: var(--alerta-ink);
}

.caixa-vazia {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}

.caixa-vazia strong {
  display: block;
  font-size: var(--fs-17);
  color: var(--ink);
}

.caixa-vazia p {
  margin-top: var(--sp-1);
  font-size: var(--fs-14);
  color: var(--ink-3);
}

@media (min-width: 900px) {
  .cx-cabecalho,
  .cx-linha {
    grid-template-columns: 48px 104px 60px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr) 100px minmax(140px, 1.1fr);
    grid-template-areas: "check espera falta posto quem cobertura supervisor valor status";
    column-gap: var(--sp-3);
    row-gap: 0;
    padding: 0 var(--sp-4) 0 0;
  }

  .cx-cabecalho {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: grid;
    align-items: center;
    min-height: 44px;
    background: var(--navy);
  }

  .cx-cabecalho > span {
    font-size: var(--fs-12);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
  }

  .cx-cabecalho .c-valor {
    text-align: right;
  }

  .cx-linha {
    min-height: 60px;
  }

  .cx-linha.selecionada {
    box-shadow: inset 3px 0 0 var(--gap-blue-deep);
  }

  .cx-espera {
    flex-direction: column;
    gap: 0;
    line-height: 1.3;
  }

  .cx-supervisor {
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-14);
    color: var(--ink-2);
  }

  .cx-linha .cx-supervisor::before {
    content: none;
  }

  .cx-linha .c-status {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-2) 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .cx-linha:hover:not(.selecionada) {
    background: var(--surface-2);
  }
}

@media (min-width: 1024px) {
  .com-menu .caixa-abas {
    max-width: 760px;
  }
}

/* celular: três abas lado a lado, com o número embaixo do nome */
@media (max-width: 479px) {
  .caixa-abas [role="tab"] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: var(--sp-2) var(--sp-3);
  }

  .caixa-aba-qtd {
    font-size: var(--fs-21);
  }
}

/* ---------- detalhe da FT: devolução e pontos de atenção ---------- */

.aviso-devolvida {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--status-devolvido-ink);
  background: var(--status-devolvido-bg);
  border: 1px solid var(--status-devolvido-line);
  border-left: 4px solid var(--status-devolvido-dot);
  border-radius: var(--r-md);
}

.aviso-devolvida p {
  margin-top: var(--sp-1);
  font-size: var(--fs-15);
  color: var(--ink);
}

.aviso-devolvida .aviso-devolvida-dica {
  font-size: var(--fs-14);
  color: var(--ink-2);
}

.detalhe-atencao {
  margin-bottom: var(--sp-4);
}

.detalhe-atencao .secao-titulo {
  margin-bottom: var(--sp-2);
}

.detalhe-atencao .alerta-repeticao {
  margin: var(--sp-3) 0 0;
}

.detalhe-acoes-secundarias {
  flex-wrap: wrap;
}

.btn-devolver {
  color: var(--status-devolvido-ink);
}

/* a trilha pinta o ponto de cada passo com a cor do status que ele gerou */
.historico-lista li.acao-lancado::before { border-color: var(--status-lancado-dot); }
.historico-lista li.acao-conferencia::before { border-color: var(--status-conferencia-dot); }
.historico-lista li.acao-aprovado::before { border-color: var(--status-aprovado-dot); }
.historico-lista li.acao-pago::before { border-color: var(--status-pago-dot); }
.historico-lista li.acao-devolvido::before { border-color: var(--status-devolvido-dot); }
.historico-lista li.acao-reenviado::before { border-color: var(--status-lancado-dot); }
.historico-lista li.acao-cancelado::before { border-color: var(--status-cancelado-dot); }

/* janela de dados da ação (motivo; data e forma do pagamento) */
#dialogo-acao .field {
  margin-bottom: var(--sp-3);
}

#dialogo-acao .perfil-ajuda {
  margin-top: 0;
}

#dialogo-acao .mensagem-erro {
  margin: var(--sp-3) 0 0;
}

/* correção de FT devolvida (supervisor): janela larga que rola por dentro */
.dialogo-largo {
  width: min(640px, calc(100vw - var(--sp-4)));
}

.dialogo-largo .dialogo-corpo {
  max-height: calc(100dvh - 240px);
  overflow-y: auto;
}

.dialogo .detalhe-form {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.dialogo .detalhe-form .secao-titulo {
  margin-bottom: var(--sp-3);
}

/* ---------- colaboradores ---------- */

.colaborador-form .btn-primario {
  margin: var(--sp-1) 0 0;
}

.p-origem {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  color: var(--ink-3);
}

.p-funcao {
  color: var(--ink-2);
}

.situacao.nova {
  color: var(--gap-blue-ink);
}

@media (max-width: 719px) {
  .tabela-colaboradores tr {
    grid-template-areas:
      "nome   acoes"
      "funcao situacao"
      "faltas coberturas";
  }

  .tabela-colaboradores .p-funcao {
    grid-area: funcao;
    font-size: var(--fs-14);
  }

  .tabela-colaboradores .p-faltas {
    grid-area: faltas;
  }

  .tabela-colaboradores .p-coberturas {
    grid-area: coberturas;
    justify-self: end;
  }

  /* pessoa nova: o aviso e os botões de aprovar usam a largura toda;
     o ⋯ fica no canto, ao lado do nome */
  .tabela-colaboradores tr.nova .p-nome {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .tabela-colaboradores tr.nova .p-nome > strong,
  .tabela-colaboradores tr.nova .p-origem {
    display: block;
    padding-right: 48px;
  }

  .tabela-colaboradores tr.nova .p-acoes {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 900px) {
  .colaborador-form {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-3);
  }

  /* freelance: nome, forma, chave PIX (ou "qual forma") e o botão */
  .freelance-form {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
  }

  .colaborador-form .field {
    margin-bottom: 0;
  }

  .colaborador-form .btn-primario {
    width: auto;
    min-height: var(--control-h);
    margin: 0;
    padding: 0 var(--sp-6);
  }
}

/* ---------- colaboradores: férias à parte ---------- */

.p-ferias-vendidas {
  display: block;
  font-size: var(--fs-13);
  color: var(--ink-3);
}

@media (max-width: 719px) {
  .tabela-colaboradores:not(.tabela-freelance) tr {
    grid-template-areas:
      "nome   acoes"
      "funcao situacao"
      "faltas coberturas"
      "ferias ferias";
  }

  .tabela-colaboradores .p-ferias {
    grid-area: ferias;
  }

  .p-ferias-vendidas {
    display: inline;
    margin-left: var(--sp-1);
  }

  .p-ferias-vendidas::before {
    content: "· ";
  }
}

/* ---------- comprovante do pagamento ---------- */

.detalhe-comprovante {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.detalhe-comprovante .secao-titulo,
.detalhe-comprovante .detalhe-nota,
.detalhe-comprovante .perfil-ajuda {
  flex-basis: 100%;
  margin: 0;
}

/* os links de baixar têm cara de botão: sem sublinhado, texto no meio */
.detalhe-comprovante a.btn-icone,
a.mf-comprovante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

a.mf-comprovante {
  width: 100%;
  min-height: 48px;
  margin: var(--sp-2) 0 var(--sp-3);
  padding: 0 var(--sp-4);
}

/* ---------- freelance (a mesma tela de colaboradores) ---------- */

.p-pagamento .p-forma,
.p-pagamento .p-pix {
  display: block;
}

.p-pagamento .p-pix {
  font-size: var(--fs-14);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.p-sem-pagamento {
  color: var(--ink-3);
}

@media (max-width: 719px) {
  /* a chave PIX usa a linha inteira; embaixo, coberturas e situação */
  .tabela-freelance tr {
    grid-template-areas:
      "nome       acoes"
      "funcao     funcao"
      "coberturas situacao";
  }

  .tabela-freelance .p-coberturas {
    justify-self: start;
  }
}

/* ---------- usuários: contato para os avisos ---------- */

.u-contato {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  color: var(--ink-3);
}

.grupo-contato {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.grupo-contato legend {
  margin-bottom: var(--sp-2);
  padding: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------- lançamento: faixas de aviso ---------- */

.aviso-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14);
  line-height: 1.45;
  border: 1px solid;
  border-radius: var(--r-md);
}

.aviso-faixa p {
  flex: 1 1 220px;
}

.aviso-conexao {
  color: var(--ink);
  background: var(--surface-3);
  border-color: var(--line-strong);
  border-left: 4px solid var(--ink-2);
}

.aviso-fila,
.aviso-rascunho {
  color: var(--info-ink);
  background: var(--info-bg);
  border-color: var(--info-line);
}

.aviso-fila.atencao {
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border-color: var(--alerta-line);
  border-left: 4px solid var(--alerta-forte);
}

.aviso-devolvidas {
  color: var(--status-devolvido-ink);
  background: var(--status-devolvido-bg);
  border-color: var(--status-devolvido-line);
  border-left: 4px solid var(--status-devolvido-dot);
}

.aviso-faixa .btn-icone {
  min-height: var(--touch);
  color: inherit;
  border-color: currentColor;
}

.aviso-sem-internet {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface-3);
  border-radius: var(--r-md);
}

/* ---------- lançamento: postos recentes e pessoa nova ---------- */

.postos-recentes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.postos-recentes-rotulo {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-3);
}

.chip-posto {
  position: relative;
  max-width: 100%;
  min-height: 36px;
  padding: 0 var(--sp-3);
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gap-blue-ink);
  background: var(--gap-blue-50);
  border: 1px solid var(--gap-blue-100);
  border-radius: var(--r-pill);
}

.chip-posto:active {
  background: var(--gap-blue-100);
}

.chip-posto:focus-visible {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

.cal-dia.futuro,
.cal-dia:disabled {
  color: var(--ink-3);
  background: transparent;
  border-color: transparent;
  opacity: 0.45;
  cursor: default;
}

/* número ao lado do rótulo dentro de fichas e segmentados (o flex some com o espaço) */
#qtd-devolvidas:not(:empty),
#qtd-novos:not(:empty) {
  margin-left: 4px;
}

/* ---------- lançamento: tela de resultado ---------- */

.revisao-enviado .enviado-numero {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.revisao-enviado .status-badge {
  margin-bottom: var(--sp-3);
}

.revisao-enviado .check svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.revisao-enviado.guardado .check {
  color: var(--ink-2);
  background: var(--surface-3);
  border-color: var(--line-strong);
}

/* ---------- minhas FTs: filtros em fichas, devolvidas ---------- */

.chips-filtro {
  display: flex;
  gap: var(--sp-2);
  margin: 0 calc(-1 * var(--sp-4));
  padding: 2px var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.chips-filtro input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ".field .chips-filtro label" vence a regra geral de rótulo dos campos */
.field .chips-filtro label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin: 0;
  padding: 0 var(--sp-3);
  font-size: var(--fs-14);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.field .chips-filtro input:checked + label {
  color: #fff;
  background: var(--gap-blue-deep);
  border-color: var(--gap-blue-deep);
}

.field .chips-filtro input:focus-visible + label {
  outline: 2px solid var(--gap-blue);
  outline-offset: 2px;
}

.field .chips-filtro label.chip-devolvido {
  color: var(--status-devolvido-ink);
  border-color: var(--status-devolvido-line);
}

.minha-ft.status-devolvido {
  border-left: 4px solid var(--status-devolvido-dot);
}

.mf-motivo {
  margin-top: var(--sp-1);
  padding: 6px 10px;
  font-size: var(--fs-14);
  line-height: 1.4;
  color: var(--status-devolvido-ink);
  background: var(--status-devolvido-bg);
  border-radius: var(--r-sm);
}

.mf-acoes {
  padding: 0 var(--sp-4) var(--sp-3);
}

.mf-acoes .btn-primario {
  min-height: var(--touch);
}

/* devolvida: "Corrigir e reenviar" e, embaixo, "Cancelar esta FT" (o que mais se usa fica em cima) */
.mf-acoes .btn-desistir {
  width: 100%;
  min-height: var(--touch);
  margin-top: var(--sp-2);
  color: var(--gap-red-ink);
}

.mf-extra .detalhe-historico {
  margin-top: var(--sp-4);
}

@media (min-width: 720px) {
  .minhas-filtros .filtro-status {
    max-width: none;
  }

  .chips-filtro {
    flex-wrap: wrap;
    margin: 0;
    padding: 2px 0;
  }
}

/* ---------- indicadores ---------- */

/* minmax(0, 1fr): sem isso a coluna cresce até caber o nome mais longo
   (barras, tabela) e os cartões passam da borda no celular */
.indicadores {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.ind-cartao {
  padding: var(--sp-4);
}

.ind-cartao .secao-titulo {
  margin-bottom: var(--sp-3);
}

.ind-cartao .detalhe-nota {
  margin: var(--sp-3) 0 0;
}

.ind-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.ind-status-item {
  display: flex;
  flex-direction: column;
  padding: var(--sp-2) var(--sp-3);
  background: var(--cor-status-bg);
  border: 1px solid var(--cor-status-line);
  border-radius: var(--r-md);
}

.ind-status-rotulo {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--cor-status-ink);
}

.ind-status-qtd {
  font-size: var(--fs-21);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ind-status-valor {
  font-size: var(--fs-13);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.ind-tempos {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

.ind-tempo dt {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-2);
}

.ind-tempo dd {
  margin: 0;
}

.ind-tempo-valor {
  font-size: var(--fs-26);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ind-tempo-base {
  font-size: var(--fs-13);
  color: var(--ink-3);
}

.ind-divisao-barra {
  display: flex;
  height: 14px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--r-pill);
}

.ind-divisao-func {
  background: var(--navy);
}

.ind-divisao-free {
  background: var(--gap-blue);
}

.ind-divisao-legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-14);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.ind-divisao-legenda span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}

.leg-func::before {
  background: var(--navy);
}

.leg-free::before {
  background: var(--gap-blue);
}

/* terceira parte das barras de divisão (férias, no relatório da diretoria) */
.ind-divisao-ferias,
.leg-ferias::before {
  background: var(--status-aprovado-dot);
}

.ind-barras {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-barra-topo {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-14);
}

.ind-barra-nome {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
}

.ind-barra-qtd {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ind-barra-trilho {
  height: 8px;
  margin-top: var(--sp-1);
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--r-pill);
}

.ind-barra {
  height: 100%;
  background: var(--gap-blue-deep);
  border-radius: var(--r-pill);
}

.tabela.ind-tabela {
  margin-top: 0;
}

.ind-tabela .col-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ind-tabela .taxa-alta {
  font-weight: 700;
  color: var(--alerta-ink);
}

/* a tabela de devolução é pequena: continua tabela também no celular */
@media (max-width: 719px) {
  .tabela.ind-tabela {
    display: table;
  }

  .ind-tabela thead {
    position: static;
    display: table-header-group;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }

  .ind-tabela tbody {
    display: table-row-group;
  }

  .tabela.ind-tabela tr {
    display: table-row;
    padding: 0;
    border: 0;
  }

  .tabela.ind-tabela th,
  .tabela.ind-tabela td {
    display: table-cell;
    padding: var(--sp-2);
    font-size: var(--fs-14);
    border-bottom: 1px solid var(--line);
  }

  .ind-tabela th {
    font-size: var(--fs-12);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
  }
}

@media (min-width: 600px) {
  .ind-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ind-tempos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    align-items: start;
  }

  .ind-cartao {
    padding: var(--sp-5);
  }
}

@media (hover: hover) and (pointer: fine) {
  .chip-posto:hover {
    border-color: var(--gap-blue-deep);
  }

  .field .chips-filtro label:hover {
    border-color: var(--line-hover);
  }

  .abas-painel [role="tab"]:hover:not([aria-selected="true"]) {
    color: var(--ink);
  }

  .caixa-abas [role="tab"]:hover:not([aria-selected="true"]) {
    border-color: var(--line-hover);
  }
}

/* ================= conta, cópia do banco e registro de alterações ================= */

/* ---------- trocar minha senha (conta.js) ---------- */

.menu-rodape {
  flex-wrap: wrap;
}

.menu-senha {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-md);
}

.menu-senha svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .menu-senha:hover {
    color: var(--ink);
    background: var(--surface-3);
  }
}

.dialogo-senha .dialogo-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dialogo-senha .perfil-ajuda {
  margin-top: calc(var(--sp-2) * -1);
}

.senha-mostrar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  font-size: var(--fs-15);
  color: var(--ink-2);
  cursor: pointer;
}

.senha-mostrar input {
  width: 20px;
  height: 20px;
  accent-color: var(--gap-blue-deep);
}

/* ---------- login: "Esqueci minha senha" ---------- */

.login-esqueci {
  margin-top: var(--sp-4);
  font-size: var(--fs-15);
  color: var(--ink-2);
}

.login-esqueci summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  font-weight: 600;
  color: var(--gap-blue-ink);
  cursor: pointer;
}

.login-esqueci summary::-webkit-details-marker {
  display: none;
}

/* setinha que gira ao abrir: mostra que dá para tocar */
.login-esqueci summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.login-esqueci[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}

.login-esqueci p {
  margin-top: var(--sp-1);
  line-height: 1.5;
}

/* ---------- faixa: cópia do banco atrasada (master) ---------- */

.aviso-copia {
  color: var(--status-aprovado-ink);
  background: var(--status-aprovado-bg);
  border-color: var(--status-aprovado-line);
  border-left: 4px solid var(--status-aprovado-dot);
}

.aviso-copia a {
  text-decoration: none;
}

/* ---------- usuários: cópia do banco ---------- */

.usuarios-card + .usuarios-card {
  margin-top: var(--sp-4);
}

.copia-texto {
  max-width: 68ch;
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--ink-2);
}

.copia-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
}

.copia-situacao {
  flex: 1 1 260px;
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--status-pago-ink);
}

.copia-situacao.atrasada {
  color: var(--status-aprovado-ink);
}

.copia-subtitulo {
  margin: var(--sp-6) 0 var(--sp-2);
  padding-top: var(--sp-5);
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.copia-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

a.btn-copia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 0 var(--sp-5);
  text-decoration: none;
}

/* ---------- usuários: registro de alterações ---------- */

.registro-lista {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.registro-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}

.registro-quando {
  font-size: var(--fs-13);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.registro-o-que {
  font-size: var(--fs-15);
  line-height: 1.4;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.registro-o-que strong {
  font-weight: 600;
  color: var(--ink);
}

.registro-detalhe {
  font-size: var(--fs-14);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .registro-item {
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: var(--sp-4);
  }

  .registro-quando {
    grid-row: span 2;
    padding-top: 2px;
  }

  .registro-detalhe {
    grid-column: 2;
  }
}

/* ================= rotina do escritório ================= */

/* ---------- lista carregando ou que não carregou (comum.js) ---------- */

.carregando {
  opacity: 0.5;
  transition: opacity var(--dur) var(--ease);
}

.falha-carga {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  padding: var(--sp-4);
  font-size: var(--fs-15);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--alerta-forte);
  border-radius: var(--r-md);
}

.falha-carga strong {
  font-size: var(--fs-16);
  color: var(--ink);
}

.falha-carga .btn-secundario {
  width: auto;
  margin-top: var(--sp-1);
  padding: 0 var(--sp-5);
}

/* ---------- caixa: busca e "até quinta" ---------- */

.caixa-filtros .field {
  margin-bottom: var(--sp-3);
}

.caixa-busca input {
  width: 100%;
}

@media (min-width: 720px) {
  /* busca, supervisor e forma de pagamento à esquerda; "até quinta" (aba Pagar) à direita */
  .caixa-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 var(--sp-4);
  }

  .caixa-busca {
    flex: 1 1 260px;
    max-width: 380px;
  }

  .caixa-supervisor,
  .caixa-forma {
    flex: 0 1 220px;
  }

  .caixa-prazo {
    margin-left: auto;
  }



  .caixa-prazo .segmented label {
    padding: 0 var(--sp-4);
  }
}

/* "Até quinta, 01/10 (12)" numa linha só */
.caixa-prazo .segmented label {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* ---------- caixa: lote pago ---------- */

.aviso-lote {
  color: var(--status-pago-ink);
  background: var(--status-pago-bg);
  border-color: var(--status-pago-line);
  border-left: 4px solid var(--status-pago-dot);
}

.aviso-lote p {
  font-weight: 600;
}

.aviso-lote-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.aviso-lote a {
  text-decoration: none;
}

/* ---------- painel: mostrar mais ---------- */

.btn-mais {
  display: flex;
  width: auto;
  margin: var(--sp-4) auto 0;
  padding: 0 var(--sp-6);
}

/* ================= supervisor em campo ================= */

/* ---------- título grande e azul também no celular ---------- */

@media (max-width: 1023px) {
  .pagina-cabecalho {
    display: block;
    margin-bottom: var(--sp-4);
  }

  .pagina-cabecalho .pagina-titulo {
    font-size: var(--fs-26);
  }

  .pagina-cabecalho .pagina-sub {
    margin-top: var(--sp-1);
    font-size: var(--fs-14);
  }

  /* no celular os botões de exportar ficam junto dos filtros */
  .pagina-cabecalho .pagina-acoes {
    display: none;
  }
}

/* ---------- "Seus postos": 44px de toque sem engordar a ficha ---------- */

.chip-posto::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

/* ---------- Minhas FTs: corrigir ou desistir antes da conferência ---------- */

.mf-acoes-espera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) 0 var(--sp-4);
}

.mf-acoes-dica {
  flex-basis: 100%;
  font-size: var(--fs-14);
  color: var(--ink-2);
}

.mf-acoes-espera .btn-secundario {
  width: auto;
  padding: 0 var(--sp-5);
}

.mf-acoes-espera .btn-desistir {
  color: var(--gap-red-ink);
}

#dialogo-desistir .dialogo-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ================= relatórios e arrumação ================= */

/* ---------- erro que fica até fechar (avisarErro, comum.js) ---------- */

.toast.toast-erro {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--gap-red-ink);
}

.toast-fechar {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-13);
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-sm);
}

/* ---------- correção: lista com "Outro (escrever)" ---------- */

.campo-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ---------- painel: faturamento por posto ---------- */

.fat-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.fat-explica {
  max-width: 62ch;
  margin-top: var(--sp-1);
  font-size: var(--fs-15);
  color: var(--ink-2);
}

a.fat-baixar {
  text-decoration: none;
}

.fat-tabela tfoot td {
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--line-strong);
}

/* no celular: posto, quantidade e valor (aprovadas/pagas ficam na planilha) */
@media (max-width: 719px) {
  .tabela.fat-tabela .col-detalhe {
    display: none;
  }
}

/* ================= pessoa nova para aprovar ================= */

.p-aprovar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.p-parecido {
  max-width: 60ch;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-line);
  border-left: 4px solid var(--alerta-forte);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}

.p-parecido strong {
  font-weight: 700;
}

.p-aprovar-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.p-aprovar-acoes .btn-icone {
  white-space: normal;
  text-align: left;
}

.p-aprovar-acoes .btn-aprovar {
  color: var(--status-pago-ink);
  border-color: var(--status-pago-line);
}

/* ================= instalar o app (celular) ================= */

.aviso-app {
  color: var(--info-ink);
  background: var(--info-bg);
  border-color: var(--info-line);
  border-left: 4px solid var(--gap-blue-deep);
}

.aviso-app-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.btn-instalar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.btn-instalar svg,
.instalar-icone svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-instalar-faixa {
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  font-size: var(--fs-15);
  font-weight: 600;
  color: #fff;
  background: var(--gap-blue-deep);
  border-radius: var(--r-md);
}

.btn-instalar-faixa:active {
  background: var(--gap-blue-ink);
  transform: translateY(1px);
}

.btn-adiar {
  min-height: var(--touch);
  padding: 0 var(--sp-3);
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--info-ink);
  background: none;
  border: 0;
}

.login-instalar {
  margin-top: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.login-instalar p {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.45;
  text-align: center;
  color: var(--ink-2);
}

.login-instalar .btn-instalar {
  display: flex;
  color: var(--gap-blue-ink);
}

.instalar-passos {
  display: grid;
  gap: var(--sp-4);
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.instalar-passos li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--ink);
  counter-increment: passo;
}

.instalar-passos li::before {
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--gap-blue-ink);
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-radius: 50%;
}

.instalar-passos strong {
  font-weight: 700;
}

/* inline-block (não flex): o leitor de tela lê a frase inteira, sem quebra no ícone */
.instalar-icone {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 4px;
  line-height: 0;
  color: var(--gap-blue-ink);
}

.instalar-icone svg circle {
  fill: currentColor;
}

.instalar-ajuda {
  margin-top: var(--sp-4);
}

/* ================= relatórios (folha para imprimir / PDF) ================= */

.rel-explica {
  margin: calc(var(--sp-1) * -1) 0 var(--sp-4);
  font-size: var(--fs-15);
  line-height: 1.5;
  color: var(--ink-2);
}

.rel-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
}

.rel-form .field {
  margin-bottom: 0;
}

.rel-form .btn-primario {
  width: auto;
  margin: 0;
  padding: 0 var(--sp-6);
}

.rel-escolha .perfil-ajuda {
  margin-top: var(--sp-2);
}

.relatorio {
  margin-top: var(--sp-6);
}

.rel-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.rel-acoes .btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: var(--touch);
  padding: 0 var(--sp-5);
  font-size: var(--fs-15);
  text-decoration: none;
}

/* a folha: branca, com margem de papel, igual ao que sai na impressão */
.rel-folha {
  padding: var(--sp-8);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.rel-topo {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--navy);
}

.rel-logo {
  width: 120px;
  height: auto;
  flex: none;
}

.rel-titulo {
  font-size: var(--fs-26);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gap-blue);
}

.rel-sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--ink);
}

.rel-gerado {
  margin-top: 2px;
  font-size: var(--fs-13);
  color: var(--ink-3);
}

.rel-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.rel-numero {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.rel-numero-rotulo {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--ink-2);
}

.rel-numero-valor {
  font-size: var(--fs-17);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.rel-numero-principal {
  border-color: var(--navy);
  border-width: 2px;
}

.rel-numero-principal .rel-numero-valor {
  font-size: var(--fs-26);
  color: var(--navy);
}

.rel-numero-forma .rel-numero-valor {
  font-size: var(--fs-15);
}

.rel-grupo {
  margin-bottom: var(--sp-6);
}

.rel-grupo-titulo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--navy);
}

.rel-grupo-total {
  font-size: var(--fs-15);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* tabela de documento: sem fundo escuro, para sair bem em qualquer impressora */
.rel-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.rel-tabela th,
.rel-tabela td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.rel-tabela thead th {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
}

.rel-tabela .col-numero {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rel-tabela .rel-nome,
.rel-tabela .rel-valor {
  font-weight: 600;
}

/* break-word (não anywhere): a coluna fica larga o bastante para a chave inteira */
.rel-tabela .rel-pix {
  overflow-wrap: break-word;
}

.rel-tabela .rel-dias {
  color: var(--ink-2);
}

/* o vínculo (Freelance ou Funcionário) embaixo do nome */
.rel-tabela .rel-nome-texto,
.rel-tabela .rel-vinculo {
  display: block;
}

.rel-tabela .rel-vinculo {
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--ink-2);
}

/* quem lançou e quem aprovou: duas linhas curtas */
.rel-tabela .rel-quem {
  font-size: var(--fs-13);
  color: var(--ink-2);
}

.rel-quem-linha {
  display: block;
}

.rel-quem-rotulo {
  font-weight: 600;
  color: var(--ink);
}

.rel-tabela .rel-paga-em {
  white-space: nowrap;
}

/* relatório de pagamento em duas partes: a pagar e já pagas no período */
.rel-parte-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  font-size: var(--fs-21);
  font-weight: 700;
  color: var(--gap-blue);
  border-bottom: 1px solid var(--line);
}

.rel-parte-pagas {
  margin-bottom: var(--sp-6);
}

.rel-numero-pagas .rel-numero-valor {
  font-size: var(--fs-15);
}

.rel-tabela tfoot th,
.rel-tabela tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--line-strong);
  border-bottom: 0;
}

.rel-vazio {
  padding: var(--sp-6) 0;
  font-size: var(--fs-16);
  color: var(--ink-2);
}

.rel-atencao {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  color: var(--alerta-ink);
  background: var(--alerta-bg);
  border: 1px solid var(--alerta-line);
  border-left: 4px solid var(--alerta-forte);
  border-radius: var(--r-md);
}

.rel-atencao .rel-grupo-titulo {
  color: var(--alerta-ink);
}

.rel-atencao-vazia {
  color: var(--ink-2);
  background: var(--surface-2);
  border-color: var(--line);
  border-left-color: var(--line-strong);
}

.rel-atencao-vazia .rel-grupo-titulo {
  color: var(--ink);
}

.rel-atencao-explica {
  font-size: var(--fs-14);
}

.rel-atencao-lista {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-14);
  line-height: 1.5;
}

.rel-assinaturas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}

.rel-assinatura {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-13);
  color: var(--ink-2);
}

.rel-linha {
  height: 40px;
  border-bottom: 1px solid var(--ink);
}

.rel-data {
  color: var(--ink-3);
}

/* celular: cada pessoa vira um bloco (a tabela continua sendo tabela para o leitor de tela) */
@media screen and (max-width: 719px) {
  .rel-folha {
    padding: var(--sp-4);
  }

  .rel-topo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .rel-titulo {
    font-size: var(--fs-21);
  }

  .rel-numero {
    flex: 1 1 40%;
  }

  .rel-numero-principal {
    flex-basis: 100%;
  }

  .rel-tabela-pessoas thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* como na .tabela: blocos, senão o cabeçalho escondido ainda mede a largura da tabela */
  .rel-tabela-pessoas,
  .rel-tabela-pessoas tbody,
  .rel-tabela-pessoas tfoot,
  .rel-tabela-pessoas thead tr,
  .rel-tabela-pessoas thead th {
    display: block;
  }

  .rel-tabela-pessoas tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
  }

  .rel-tabela-pessoas tbody td {
    padding: 0;
    border: 0;
  }

  .rel-tabela-pessoas tbody .rel-nome {
    grid-column: 1;
    grid-row: 1;
  }

  .rel-tabela-pessoas tbody .rel-valor {
    grid-column: 2;
    grid-row: 1;
  }

  .rel-tabela-pessoas tbody .rel-pix,
  .rel-tabela-pessoas tbody .rel-dias,
  .rel-tabela-pessoas tbody .rel-paga-em,
  .rel-tabela-pessoas tbody .rel-quem,
  .rel-tabela-pessoas tbody .rel-qtd {
    grid-column: 1 / -1;
    font-size: var(--fs-13);
    text-align: left;
    color: var(--ink-2);
  }

  .rel-tabela-pessoas tbody td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-weight: 600;
  }

  .rel-tabela-pessoas tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-top: var(--sp-2);
  }

  .rel-tabela-pessoas tfoot th,
  .rel-tabela-pessoas tfoot td {
    padding: 0;
    border: 0;
  }

  .rel-tabela-pessoas tfoot td:nth-last-child(2) {
    display: none;
  }

  .rel-assinaturas {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

/* ---------- relatório para a diretoria ---------- */

.rel-escolhas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .rel-escolhas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rel-escolhas .rel-escolha {
  margin: 0;
}

.rel-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.rel-atalhos .btn-icone {
  min-height: var(--touch);
}

.rel-escolha .mensagem-erro {
  margin-top: var(--sp-2);
}

.rel-nota {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-5);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--ink-2);
}

.rel-bloco {
  margin-bottom: var(--sp-6);
}

.rel-bloco .rel-nota {
  margin: var(--sp-3) 0 var(--sp-3);
}

.rel-duas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--sp-8);
}

@media screen and (min-width: 900px) {
  .rel-duas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rel-divisao {
  margin: var(--sp-2) 0 var(--sp-3);
}

.rel-divisao-legenda p {
  margin-top: var(--sp-1);
  line-height: 1.45;
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.rel-divisao-legenda p::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}

.rel-divisao-legenda strong {
  font-weight: 600;
  color: var(--ink);
}

.rel-pct {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.rel-pct-trilho {
  flex: 1 1 auto;
  max-width: 80px;
  height: 6px;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--r-pill);
}

.rel-pct-barra {
  display: block;
  height: 100%;
  background: var(--gap-blue);
}

.rel-quadro th.col-pct {
  text-align: right;
}

.rel-quadro td.col-pct {
  min-width: 110px;
  text-align: right;
}

.rel-numero-base {
  font-size: var(--fs-12);
  color: var(--ink-3);
}

/* computador largo: os 7 números da diretoria numa linha só */
@media screen and (min-width: 1200px) {
  .rel-resumo-longo {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr));
  }

  .rel-resumo-longo .rel-numero {
    min-width: 0;
  }
}

.rel-prazos {
  margin: var(--sp-3) 0 0;
}

@media screen and (max-width: 719px) {
  /* no celular a coluna de % sai: número e custo já dizem o principal */
  .rel-quadro .col-pct {
    display: none;
  }

  .rel-quadro th,
  .rel-quadro td {
    padding: var(--sp-2) 6px;
  }
}

/* impressão / PDF: só a folha, sem menu, botões nem avisos */
@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html,
  body.pagina-relatorios {
    padding: 0;
    background: #fff;
  }

  /* o resumo numa linha só da folha A4 */
  .rel-resumo {
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }

  .rel-numero {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
  }

  .rel-numero-principal {
    flex-grow: 1.4;
  }

  .rel-numero-principal .rel-numero-valor {
    font-size: var(--fs-21);
  }

  /* mais espaço para a chave PIX não quebrar no meio */
  .rel-tabela {
    font-size: var(--fs-13);
  }

  .rel-tabela th,
  .rel-tabela td {
    padding: 6px var(--sp-2);
  }

  .rel-atencao-lista li,
  .rel-assinaturas {
    break-inside: avoid;
  }

  .pagina-relatorios .menu-lateral,
  .pagina-relatorios .abas,
  .pagina-relatorios .topbar,
  .pagina-relatorios .pular-conteudo,
  .pagina-relatorios .aviso-faixa,
  .pagina-relatorios .toast,
  .pagina-relatorios .pagina-cabecalho,
  .pagina-relatorios .rel-escolha,
  .pagina-relatorios .rel-acoes,
  .pagina-relatorios dialog {
    display: none !important;
  }

  .pagina-relatorios main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .pagina-relatorios .relatorio {
    margin: 0;
  }

  .rel-folha {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .rel-tabela tr,
  .rel-numero,
  .rel-assinatura {
    break-inside: avoid;
  }

  .rel-grupo-titulo,
  .rel-parte-titulo {
    break-after: avoid;
  }

  .rel-atencao,
  .rel-numero-principal,
  .rel-divisao,
  .rel-divisao-legenda p::before,
  .rel-pct-trilho,
  .rel-pct-barra {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .rel-duas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--sp-6);
  }

  .rel-duas.rel-duas-tabelas {
    grid-template-columns: minmax(0, 1fr);
  }

  .rel-bloco {
    break-inside: avoid;
  }

  /* diretoria: 7 números, em duas linhas de 4 */
  .rel-resumo-longo {
    flex-wrap: wrap;
  }

  .rel-resumo-longo .rel-numero {
    flex: 1 1 22%;
  }
}