:root {
  --primary: #2c6bed;
  --primary-strong: #1e54c9;
  --primary-soft: #e8effc;
  --ink: #1c2333;
  --ink-soft: #5b6472;
  /* Antes #8a93a3 (~3.1:1 sobre branco) — abaixo do mínimo WCAG AA para
     texto normal (4.5:1). Escurecido para ~4.5-5:1 contra --card e --bg;
     ainda é o tom mais claro da escala, só deixou de falhar contraste em
     texto pequeno real (th, .muted, legendas). */
  --ink-faint: #647087;
  --bg: #f3f5f9;
  --card: #ffffff;
  --line: #e4e8ef;
  --line-strong: #d3d9e4;
  --green: #14672f;
  --green-soft: #ddf3e4;
  --red: #96261f;
  --red-soft: #fbe3e1;
  --amber: #8a5a08;
  --amber-soft: #fdf0d2;
  --radius: 10px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 2px rgba(18, 26, 43, 0.05), 0 4px 14px rgba(18, 26, 43, 0.05);
  --shadow-card-hover: 0 4px 10px rgba(18, 26, 43, 0.07), 0 14px 28px rgba(18, 26, 43, 0.10);
  --shadow-pop: 0 8px 28px rgba(18, 26, 43, 0.16);
  /* Escala de espaçamento pra novas telas — reaproveitando os valores já
     em uso no restante do CSS (padding de card, gaps de row, etc.), sem
     forçar migração do que já existe. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  padding-bottom: 80px;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ header --- */

header {
  background: linear-gradient(180deg, #232a3c 0%, #1d2434 100%);
  color: #fff;
  padding: 9px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(10, 13, 22, 0.22);
}
header .brand {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 2.5px;
  white-space: nowrap;
  background: linear-gradient(135deg, #fff 0%, #b9c6e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}
header a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
  transition: color 0.15s ease;
}
header a:hover { color: #fff; }
.header-right { display: flex; align-items: center; gap: 14px; }
.header-left { display: flex; align-items: center; gap: 10px; }

/* Ícone de lista que mostra/esconde a barra de seções + submenu (ver
   .menu-collapse abaixo) — ganha mais espaço de tela quando fechado. */
.menu-toggle {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  line-height: 1;
  padding: 5px 8px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.menu-toggle:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Escondido por padrão (deve ser a exceção, não a regra) — só aparece com
   a classe .menu-open na <html>, aplicada pelo toggle e lembrada entre
   navegações via localStorage (ver script no <head> e no fim do body). */
.menu-collapse { display: none; }
html.menu-open .menu-collapse { display: block; }

/* Clicar de novo na aba já ativa recolhe só a linha de baixo (submenu),
   deixando a barra de módulos (.section-tabs) visível — ver script no
   <head> e no fim do body. Independente do .menu-open acima (que
   esconde/mostra as duas linhas juntas). */
html.subnav-collapsed .menu-collapse > nav { display: none; }

/* Cabeçalho aperta em telas pequenas: seletor de loja + Cadastros + Sair
   não cabem lado a lado com o nome do usuário no meio. Encolhe espaços e
   esconde o nome (mantém só "Sair") até caber sem rolagem horizontal. */
@media (max-width: 400px) {
  header { padding: 8px 10px; }
  header .brand { letter-spacing: 1px; font-size: 0.95rem; }
  .header-right { gap: 6px; }
  .loja-toggle, .dropdown-toggle { padding-left: 8px; padding-right: 8px; }
  .sair-nome { display: none; }
}

.section-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  background: #161c2a;
  padding: 0 12px;
  scrollbar-width: none;
}
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab {
  color: #97a0b4;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 13px 16px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.section-tab.active { color: #fff; border-bottom-color: var(--primary); }
.section-tab:hover { color: #fff; }

nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  background: #2a3145;
  padding: 9px 12px;
  scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }
nav a {
  color: #ccd2df;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
nav a.active, nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
nav a.nav-cta {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 8px 15px;
  box-shadow: 0 2px 8px rgba(44, 107, 237, 0.35);
}
nav a.nav-cta:hover { background: var(--primary-strong); }

/* ---------------------------------------------------------- dropdown --- */

.dropdown { position: relative; }
.dropdown-toggle {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-family: inherit;
  padding: 6px 12px;
  margin-top: 0;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-toggle:hover, .dropdown.open .dropdown-toggle {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.cadastros-toggle {
  font-size: 1.1rem;
  line-height: 1;
  padding: 5px 10px;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  min-width: 180px;
  overflow: hidden;
  z-index: 20;
  padding: 6px;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a {
  display: block;
  color: var(--ink);
  padding: 9px 12px;
  font-size: 0.88rem;
  border-radius: 8px;
}
.dropdown-menu a:hover { background: var(--bg); }

/* Seletor de loja ativa: destacado com a cor da loja (var(--primary) já
   é sobrescrita por loja em base.html), ao lado do menu de Cadastros. */
.loja-toggle {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
}
.loja-toggle:hover, .dropdown.open .loja-toggle { background: var(--primary-strong); }
.dropdown-menu form { margin: 0; }
.loja-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 400;
  border-radius: 8px;
  margin: 0;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
}
.loja-opcao:hover { background: var(--bg); }
.loja-opcao.active { font-weight: 700; background: var(--primary-soft); }

/* ------------------------------------------------------- alvo de toque --- */
/* Vários ícones de chrome (fechar modal, remover item, trocar loja...) são
   pequenos de propósito pra não pesar visualmente — mas isso deixa a área
   clicável abaixo do mínimo recomendado (~44x44px, WCAG 2.5.5/2.5.8). Em
   vez de aumentar o elemento em si (o que engordaria a UI), um ::after
   invisível expande só a área de toque via inset negativo — mesmo tamanho
   visual, alvo mais fácil de acertar no celular. --hit-expand permite cada
   seletor ajustar o quanto falta pra chegar perto de 44px.
   Não aplicado em áreas de tabela/grade densa (.filtro-btn, conteúdo de
   .filtro-popover, .escala-time, .escala-status-opcao,
   .escala-status-toggle) — ali expandir a área colidiria com a célula
   vizinha; são contextos de desktop denso, não de toque. */
.modal-close, .item-remove-btn, .cor-opcao, .dropdown-toggle,
.status-pill, .escala-dia-falta-btn {
  position: relative;
}
.modal-close::after, .item-remove-btn::after, .cor-opcao::after,
.dropdown-toggle::after, .escala-dia-falta-btn::after {
  content: '';
  position: absolute;
  inset: var(--hit-expand, -8px);
}
.item-remove-btn::after { --hit-expand: -7px; }
.cor-opcao::after { --hit-expand: -3px; }
.escala-dia-falta-btn::after { --hit-expand: -6px; }
/* .status-pill já é bem largo (padding horizontal generoso) — expandir só
   verticalmente evita sobrepor a pill vizinha quando elas quebram linha. */
.status-pill::after {
  content: '';
  position: absolute;
  top: -9px;
  bottom: -9px;
  left: 0;
  right: 0;
}

/* ------------------------------------------------------------ layout --- */

main { max-width: 640px; margin: 0 auto; padding: 20px 16px; }
/* 1100px originalmente — algumas telas de tabela (itens, relatórios) já
   estouravam essa largura e caíam em .table-scroll mesmo em monitores
   grandes, onde a rolagem horizontal não é necessária. 1280px dá esse
   fôlego sem esvaziar visualmente as telas com tabelas mais estreitas. */
@media (min-width: 768px) {
  main.wide { max-width: 1280px; }
}
/* Estoque e Itens têm bastante coluna (ex.: código, item, categoria,
   unidade, saldo, preço médio, último preço, ações) — em telas grandes
   podem usar mais espaço que o .wide padrão pra não sobrar scroll
   horizontal à toa. */
@media (min-width: 1300px) {
  main.estoque-wide { max-width: 1500px; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}

h1 { font-size: 1.32rem; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--ink); }
h2 { font-size: 1.02rem; font-weight: 750; letter-spacing: -0.005em; margin: 0 0 12px; }

/* ------------------------------------------------------------- forms --- */

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink-soft);
  margin: 12px 0 5px;
}
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[readonly] {
  background: var(--bg);
  color: var(--ink-soft);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44, 107, 237, 0.14);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input[type="checkbox"] { accent-color: var(--primary); }

/* ----------------------------------------------------------- buttons --- */

button, .btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border: 1px solid transparent;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  margin-top: 14px;
  box-shadow: 0 1px 2px rgba(18, 26, 43, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .btn:hover {
  background: var(--primary-strong);
  box-shadow: 0 2px 6px rgba(18, 26, 43, 0.14);
}
button:active, .btn:active { box-shadow: none; }
button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 107, 237, 0.3);
}

button.secondary, .btn.secondary {
  background: #fff;
  color: var(--ink-soft);
  border-color: var(--line-strong);
  box-shadow: none;
}
button.secondary:hover, .btn.secondary:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--ink-faint);
  box-shadow: 0 2px 8px rgba(18, 26, 43, 0.08);
}

button.danger, .btn.danger {
  background: #d33a2f;
  color: #fff;
  box-shadow: 0 1px 2px rgba(18, 26, 43, 0.08), 0 2px 8px rgba(211, 58, 47, 0.18);
}
button.danger:hover, .btn.danger:hover {
  background: #b52c22;
  box-shadow: 0 4px 14px rgba(211, 58, 47, 0.3);
}

/* ------------------------------------------------------------- flash --- */

.flash {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-left-width: 4px;
}
.flash.success {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(20, 103, 47, 0.25);
  border-left-color: var(--green);
}
.flash.error {
  background: var(--red-soft);
  color: var(--red);
  border-color: rgba(150, 38, 31, 0.25);
  border-left-color: var(--red);
}

/* -------------------------------------------------------------- toast --- */
/* Confirmação leve de ações rápidas (ex: ativar/desativar) que não recarregam
   a página — .flash é pro fluxo normal com redirect de página inteira; isso
   aqui é pro caso sem reload, some sozinho. */
.toast-container {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--ink);
  max-width: 320px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-show { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: var(--green); }
.toast-error { border-left-color: var(--red); color: var(--red); }

/* ------------------------------------------------------------ tables --- */

/* Tabelas largas (estoque, extrato, relatórios) rolam na horizontal dentro
   do card. As sombras nas bordas aparecem só quando ainda há conteúdo pra
   aquele lado — no celular é o que avisa que a tabela continua. Truque só
   de CSS: os gradientes "local" rolam junto e escondem as sombras "scroll"
   quando se chega ao fim. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
  padding: 0 20px;
  background-image:
    linear-gradient(to right, var(--card), rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--card), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(18, 26, 43, 0.10), rgba(18, 26, 43, 0)),
    linear-gradient(to left, rgba(18, 26, 43, 0.10), rgba(18, 26, 43, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
}

/* Coluna com valor às vezes bem longo (ex: número de nota/documento) — sem
   isso, th/td{white-space:nowrap} (acima) deixa a tabela inteira mais larga
   que a tela só por causa de um valor comprido isolado. Quebra a linha e
   trava uma largura máxima razoável pra coluna. */
.td-wrap { white-space: normal; overflow-wrap: anywhere; max-width: 160px; }

tbody tr, table tr { transition: background 0.12s ease; }

.filtro-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  color: var(--ink-faint);
  vertical-align: middle;
}
.filtro-btn.ativo { color: var(--primary); font-weight: 700; }
.filtro-popover {
  position: absolute;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 10px;
  min-width: 200px;
  max-width: 260px;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}
.filtro-popover input[type="search"] {
  width: 100%;
  margin-bottom: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 0.85rem;
}
.filtro-popover .filtro-lista {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.filtro-popover .filtro-lista label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  padding: 3px 0;
  margin: 0;
  white-space: normal;
}
.filtro-popover .filtro-acoes-topo {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}
.filtro-popover .filtro-acoes-topo a { cursor: pointer; color: var(--primary); }

/* Ordenação da coluna, no topo do mesmo popover do filtro. */
.filtro-popover .filtro-ordenar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.filtro-popover .filtro-ordenar button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
}
.filtro-popover .filtro-ordenar button:hover { background: var(--bg); }
.filtro-popover .filtro-ordenar button.ativo {
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 650;
}

/* Seta ao lado do título indicando por qual coluna a tabela está ordenada. */
.ordem-indicador {
  font-size: 0.75rem;
  color: var(--primary);
  margin-left: 1px;
}
.filtro-popover .filtro-botoes {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.filtro-popover .filtro-botoes button {
  margin-top: 0;
  padding: 6px 10px;
  font-size: 0.8rem;
}
table tr:hover td { background: #f7f9fc; }
table tr:last-child td { border-bottom: none; }
td a { color: var(--primary); text-decoration: none; font-weight: 550; }
td a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ badges --- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.badge.pendente { background: var(--amber-soft); color: var(--amber); }
.badge.aprovada { background: var(--green-soft); color: var(--green); }
.badge.rejeitada { background: var(--red-soft); color: var(--red); }
.badge.agendado { background: #fde8cc; color: #8a4d0f; }
.badge.confirmado { background: var(--green-soft); color: var(--green); }
.badge.conciliado { background: #dce9fb; color: #1a4a8a; }
.badge.atrasado { background: var(--red-soft); color: var(--red); }
.badge.cancelada { background: #e7e9ee; color: #4b5563; }
.badge.aberto { background: var(--amber-soft); color: var(--amber); }
.badge.fechado { background: #dce9fb; color: #1e40af; }
.badge.conferido { background: var(--green-soft); color: var(--green); }

/* --------------------------------------------------------- kpi/dashboard --- */
/* Bloco de indicadores (ex: total de caixas abertos, saldo do dia, extras
   pendentes) para telas de dashboard. auto-fit já empilha em 1 coluna no
   celular sem precisar de media query própria. */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
}
/* Card também pode ser um link (tela inicial) — reseta o que <a> herdaria
   (cor, sublinhado, inline) e dá um retorno visual sutil de que é clicável. */
a.kpi-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.kpi-card:hover { border-color: var(--primary); box-shadow: var(--shadow-card); }
.kpi-card .kpi-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.kpi-card .kpi-value { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.kpi-card .kpi-trend { font-size: 0.8rem; font-weight: 650; margin-top: 4px; }
.kpi-card .kpi-trend.up { color: var(--green); }
.kpi-card .kpi-trend.down { color: var(--red); }

.dash-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.dash-list-card h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dash-list-card h2 a { font-size: 0.78rem; font-weight: 600; }
.dash-list-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem;
}
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row .rotulo { color: var(--ink-soft); font-size: 0.78rem; white-space: nowrap; flex-shrink: 0; }

/* --------------------------------------------------------- financeiro --- */
/* Extrato com painel lateral (conta, período, resumo de saldo) + conteúdo
   principal (filtro de status + tabela) — empilha em telas estreitas. */

.financeiro-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.financeiro-sidebar {
  flex: 0 0 260px;
  width: 260px;
}
.financeiro-sidebar .card { margin-bottom: 12px; padding: 14px 16px; }
.financeiro-sidebar label { margin: 8px 0 4px; font-size: 0.76rem; }
.financeiro-sidebar select,
.financeiro-sidebar input[type="date"] { padding: 7px 10px; font-size: 0.9rem; }
.financeiro-main { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .financeiro-layout { flex-direction: column; align-items: stretch; }
  .financeiro-sidebar { width: 100%; flex-basis: auto; }
}
/* Acima de 860px o painel lateral e a barra de filtro ficam fixos — só o
   conteúdo principal rola, por dentro de .dashboard-scroll-area. Abaixo
   disso o layout empilha (regra acima) e a rolagem volta a ser a da página
   inteira, mais simples de usar em telas pequenas.

   Esse padrão (.financeiro-layout/.financeiro-sidebar/.financeiro-main +
   .dashboard-scroll-card/.dashboard-scroll-area) não é exclusivo do
   Financeiro — Escala e Reservas reaproveitam a mesma estrutura pros seus
   próprios calendários mensais, daí as regras abaixo não travarem em
   main.financeiro-wide especificamente, e sim em qualquer página que use
   .financeiro-layout (via :has()).

   .financeiro-main NÃO usa position:sticky: como sua altura já é travada em
   calc(100vh - 50px), ele preenche exatamente o espaço do .financeiro-layout
   (mesma altura do pai) — sticky não tem "folga" nenhuma pra se mover nessas
   condições e simplesmente não gruda (testado; sidebar funciona porque o
   conteúdo dele é mais curto que essa altura, sobrando folga de verdade).
   Sem sticky, o resultado visual é o mesmo aqui: com o menu (barra de seções
   + submenu) recolhido, o layout já começa logo abaixo do header (só a
   margem de --space-4 de distância) — não sobra rolagem de página pra
   "escapar" e ele fica fixo por conta disso. */
@media (min-width: 861px) {
  /* body tem padding-bottom:80px de sobra (respiro padrão do resto do
     site) — nessa tela ele deixa a página rolar além do ponto em que o
     layout já preenche o restante da viewport, empurrando tudo pra cima
     de novo à toa. Sem esse respiro aqui, a rolagem da página pára
     exatamente quando .financeiro-main termina de encostar no header. */
  body:has(.financeiro-layout) { padding-bottom: 0; }
  /* main{padding:20px 16px} padrão soma 40px verticais que os cálculos de
     altura abaixo não previam — troca pelo respiro fixo (--space-4, 16px)
     que este layout usa de propósito (só encostar no header sem margem
     nenhuma ficava esteticamente ruim), mantendo o lateral padrão (16px). */
  /* Sem ">" (não só filho direto): no Financeiro, .financeiro-layout fica
     dentro de um <form> (filtro-form), então main teria um neto, não um
     filho direto, e a regra não bateria com o combinador ">" — quebrava
     silenciosamente só nessa página (Escala/Reservas não têm esse <form>
     no meio, por isso não pegava no teste rápido). */
  main:has(.financeiro-layout) { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  /* .financeiro-sidebar também NÃO usa position:sticky (mesmo raciocínio do
     .financeiro-main abaixo) — tinha sticky antes, mas sticky e "vizinho
     sem sticky, ambos travados na mesma altura calculada" são dois
     mecanismos de posicionamento diferentes rodando lado a lado; alternar
     scroll pra baixo/cima expunha uma folga em branco de vez em quando
     porque um dos dois demorava um frame a mais pra repintar que o outro.
     Sem sticky nos dois lados, sidebar e main sempre acompanham o mesmo
     ponto de partida e a mesma altura travada — não tem como um "atrasar"
     em relação ao outro. */
  .financeiro-sidebar {
    max-height: calc(100vh - 50px - (2 * var(--space-4)));
    overflow-y: auto;
  }
  .financeiro-main {
    height: calc(100vh - 50px - (2 * var(--space-4)));
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .financeiro-filtrar-card { flex: 0 0 auto; }
  .dashboard-scroll-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .dashboard-scroll-area { flex: 1; min-height: 0; overflow-y: auto; }
  .dashboard-scroll-area th {
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
  }
}
.financeiro-filtrar-card { padding: 12px 18px; }
/* Extrato tem uma coluna a menos que outras telas "wide" (categoria virou
   subtexto na descrição) — em telas grandes pode usar mais espaço que o
   .wide padrão (1100px) pra não sobrar scroll horizontal à toa. */
@media (min-width: 1300px) {
  main.financeiro-wide { max-width: 1600px; }
}
.financeiro-desc-sub {
  display: block;
  white-space: normal;
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: 2px;
}

.financeiro-periodo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.financeiro-periodo-nav a {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 0.9rem;
}
.financeiro-periodo-label {
  font-size: 0.85rem;
  font-weight: 650;
  text-align: center;
}

.financeiro-saldo-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.financeiro-saldo-linha:last-child { border-bottom: none; }
.financeiro-saldo-linha.total { padding-top: 9px; }
.financeiro-saldo-linha.total span { font-weight: 650; color: var(--ink); }
.financeiro-saldo-linha.total strong { font-size: 1.05rem; }

.financeiro-filtrar-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.financeiro-status-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  margin: 0;
  user-select: none;
}
.status-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-faint);
}
.status-pill.checked {
  border-color: transparent;
  color: var(--ink);
  background: var(--bg);
}
.status-pill-pendente .dot { background: var(--amber); }
.status-pill-agendado .dot { background: #b06a12; }
.status-pill-atrasado .dot { background: var(--red); }
.status-pill-confirmado .dot { background: var(--green); }
.status-pill-conciliado .dot { background: #1a4a8a; }

/* ------------------------------------------------- detalhe de registro --- */
/* Grade de campos "um de cada vez" (rótulo em cima, valor embaixo) usada em
   telas de detalhe (ex: lançamento) — evita amontoar vários campos numa
   linha só de flexbox apertada. */

.detalhe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 24px;
  margin-top: 16px;
}
.detalhe-grid .muted { display: block; margin-bottom: 3px; }
.detalhe-grid strong { font-size: 1.02rem; overflow-wrap: anywhere; }

.detalhe-categorias {
  margin-top: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 16px;
}
.detalhe-categorias h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 12px 0 4px;
}
.detalhe-categoria-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.detalhe-categoria-linha:last-child { border-bottom: none; }
.detalhe-categoria-linha strong { white-space: nowrap; }

/* ------------------------------------------------------------- misc ---- */

.muted { color: var(--ink-soft); font-size: 0.85rem; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* Em telas estreitas, campos e indicadores lado a lado ficam espremidos —
   empilha para manter tudo legível no celular. */
@media (max-width: 560px) {
  /* !important no flex-wrap: alguns formulários de filtro têm
     style="flex-wrap:wrap" inline (para desktop, onde os campos podem
     quebrar linha lado a lado). Combinado com flex-direction:column
     isso faz o navegador organizar os campos em "colunas" horizontais
     em vez de empilhar de verdade — aqui força uma única coluna. */
  /* align-items: stretch força os campos (divs com label+input) a
     ocuparem a largura toda; sem isso, um align-items:flex-end/center
     inline (comum nos filtros, pensado pro alinhamento no desktop)
     faz cada campo encolher para o tamanho do próprio conteúdo. */
  .row { flex-direction: column; flex-wrap: nowrap !important; align-items: stretch !important; gap: 6px; }

  /* Alguns formulários de filtro fixam o botão em flex:0 (largura de
     conteúdo) para não ocupar a linha toda ao lado dos campos no
     desktop. Empilhado no celular isso deixa um botão pequeno e
     desalinhado embaixo de campos que ocupam a largura inteira — aqui
     ele passa a acompanhar a mesma largura dos campos. */
  .row > button,
  .row > .btn,
  .row > input[type="submit"] {
    flex: 1 1 auto !important;
    width: 100%;
  }
}

/* ------------------------------------------------ itens da nota fiscal --- */

/* Lista de itens em formato de cartão (em vez de tabela): funciona bem
   tanto no desktop quanto no celular sem precisar de rolagem horizontal
   nem de breakpoints separados — cada item já nasce empilhado e só o
   espaçamento interno muda com o tamanho da tela. */
.itens-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.item-row {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 46px 14px 14px;
  background: #fafbfd;
}
.item-row .item-combo { margin-top: 0; }
.item-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.item-remove-btn:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}
.item-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.item-row-meta .unidade-display,
.item-row-meta .categoria-display {
  color: var(--ink-soft);
  font-weight: 600;
}
.item-row-hint {
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 6px;
}
.item-row-fields {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.item-row-fields > div { flex: 1; min-width: 0; }
.item-row-fields label { margin: 0 0 4px; }

/* ------------------------------------------------- saídas de caixa --- */

/* Mesmo padrão de cartão dos itens da nota: no layout de tabela antigo, o
   campo "Motivo" (texto livre) ficava espremido a ~85px de largura no
   celular — praticamente inutilizável para digitar. */
.saidas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.saida-row {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 46px 14px 14px;
  background: #fafbfd;
}
.saida-row label { margin-top: 0; }
.saida-valor-wrap { margin-top: 10px; max-width: 220px; }

/* Alinha à direita só quando há espaço ao lado do nome (desktop); ao
   empilhar no celular ficaria estranho um bloco alinhado à direita
   sozinho abaixo do outro alinhado à esquerda. */
.total-a-pagar { text-align: right; }
@media (max-width: 560px) {
  .total-a-pagar { text-align: left; margin-top: 4px; }
}

/* --------------------------------------------------------- lojas/cor --- */

.cor-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 4px;
}
.cor-opcao {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  font-weight: 0;
  margin: 0;
}
.cor-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.cor-opcao .cor-check { color: #fff; opacity: 0; font-size: 1rem; }
.cor-opcao:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.cor-opcao:has(input:checked) .cor-check { opacity: 1; }
.cor-amostra {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  vertical-align: middle;
}

/* --------------------------------------------- pagamento de nota fiscal --- */

.barcode-field { display: flex; gap: 8px; align-items: flex-start; }
.barcode-field input { flex: 1; min-width: 0; }
.barcode-field .btn-scan { margin-top: 0; white-space: nowrap; flex-shrink: 0; }

/* Em telas estreitas, botão de texto ao lado do campo fica apertado —
   empilha o botão de leitura abaixo do campo. */
@media (max-width: 480px) {
  .barcode-field { flex-direction: column; }
  .barcode-field .btn-scan { width: 100%; }
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 28, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  width: 100%;
  max-width: 720px;
  height: fit-content;
  position: relative;
  margin: auto;
}
.modal-box .card:first-child { margin-top: 0; }
.modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 0;
  margin: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-pop);
  z-index: 1;
}
.modal-close:hover { background: var(--bg); color: var(--ink); }

.scanner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.92);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.scanner-box { width: 100%; max-width: 480px; text-align: center; }
.scanner-video-wrap { position: relative; overflow: hidden; border-radius: var(--radius); }
.scanner-video {
  display: block;
  width: 100%;
  height: 60vh;
  max-height: 480px;
  border-radius: var(--radius);
  background: #000;
  object-fit: cover;
}
.scanner-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  height: 32%;
  border: 3px solid #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.scanner-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.scanner-box button { margin-top: 16px; }

/* ------------------------------------------------ foto da nota fiscal --- */

.foto-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.foto-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  font-size: 1rem;
  margin-top: 0;
}
.foto-action-icon { font-size: 1.3rem; }
.foto-preview {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

/* --------------------------------------------------- combobox de item --- */

.item-combo { position: relative; }
.item-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  max-height: 220px;
  overflow-y: auto;
  z-index: 30;
  white-space: normal;
  padding: 4px;
}
.item-suggestion {
  padding: 8px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 7px;
}
.item-suggestion:hover, .item-suggestion.active { background: var(--primary-soft); }

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

/* Fundo com leve gradiente radial só na tela de login — primeira impressão
   do sistema, sem mexer no --bg plano usado no resto do app. */
body:has(.login-brand) {
  background:
    radial-gradient(600px 400px at 50% -10%, rgba(44, 107, 237, 0.10), transparent),
    var(--bg);
}
.login-brand { text-align: center; margin-top: 64px; }
.login-logo {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--ink);
  padding: 14px 30px;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------- funcionário --- */
/* Lista de funcionários em cards em vez de tabela — muitos campos (nome,
   CPF, telefone, PIX, contrato, horário, função, ambiente, fixo, loja,
   admissão) não cabem numa linha de tabela sem scroll horizontal em
   nenhuma largura de tela razoável. Cada detalhe quebra linha
   independente, então nunca estoura a largura do card. */
.funcionario-card { padding: 14px 0; border-bottom: 1px solid var(--line); }
.funcionario-card:last-child { border-bottom: none; }
.funcionario-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.funcionario-card-detalhes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 10px 0;
  font-size: 0.85rem;
}
.funcionario-card-detalhes .muted { margin-right: 4px; }
.funcionario-card-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* -------------------------------------------------------------- escala --- */
/* Grade semanal da escala mensal (um bloco de tabela por semana, sempre
   segunda a domingo) e o calendário do dashboard de escala. Azul usado como
   4ª cor de status (folga/folga de banco) — não existe --blue nas variáveis
   de :root, então fica só aqui, no mesmo tom já usado em .badge.conciliado. */
:root {
  --blue: #1a4a8a;
  --blue-soft: #dce9fb;
}

.escala-card-topo { margin-bottom: 12px; }
.escala-card-grade { padding: 12px; }
/* .table-scroll bleed padrão é -20px/20px (padding do .card comum) — como
   esse card usa 12px, precisa de um bleed próprio pra não desencaixar. */
.escala-card-grade .table-scroll { margin: 0 -12px; padding: 0 12px; }

/* Em telas grandes, esse card específico pode usar mais espaço que o
   .wide padrão (1100px) — a grade tem muita informação horizontal. */
@media (min-width: 1300px) {
  main.escala-wide { max-width: 1500px; }
}

.escala-tabela { font-size: 0.76rem; border-collapse: separate; border-spacing: 0; }
.escala-tabela th, .escala-tabela td { padding: 3px; white-space: normal; }
.escala-col-nome {
  min-width: 96px;
  max-width: 96px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--card);
  /* .table-scroll tem padding-left de 12px (bleed do card) — como a coluna
     fixa começa depois desse padding, sobrava uma faixa de 12px entre a
     borda do container e a coluna onde o conteúdo rolado vazava por trás.
     Esse box-shadow estende o branco da coluna pra cobrir exatamente essa
     faixa, além da borda de 1px de sempre à direita. */
  box-shadow: -12px 0 0 var(--card), 1px 0 0 var(--line-strong);
}
.escala-subcol {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.escala-tabela th[colspan] { text-align: center; }
.escala-semana-inicio th { border-top: 2px solid var(--line-strong); padding-top: 10px; }

/* Tom alternado por dia (não por linha), pra separar visualmente um dia do
   próximo — aplicado em todas as células (cabeçalho e dados) daquele dia. */
.escala-dia-par { background: var(--card); }
.escala-dia-impar { background: #e9ebf0; }
.escala-dia-fora { background: #dfe1e6 !important; color: var(--ink-faint); }
.escala-dia-importante {
  background: var(--amber-soft) !important;
  color: var(--amber);
  cursor: help;
}

.escala-celula, .escala-celula-leitura, .escala-celula-status {
  min-width: 34px;
  text-align: center;
  vertical-align: middle;
}
.escala-time {
  width: 38px;
  padding: 1px 2px;
  font-size: 0.7rem;
  border-radius: 5px;
  text-align: center;
}
.escala-time:disabled { background: #f2f3f5; color: var(--ink-faint); }
.escala-time.escala-time-invalido { border-color: var(--red); }
.escala-status-label {
  font-size: 0.64rem;
  font-weight: 650;
  color: var(--ink-soft);
  word-break: break-word;
}
.escala-indicativo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
}
.escala-indicativo-ok { color: var(--green); }
.escala-indicativo-sem-base { color: var(--ink-faint); cursor: help; }
.escala-indicativo-mais { color: var(--red); }
.escala-indicativo-menos { color: var(--blue); }

.badge.escala-just-folga { background: var(--blue-soft); color: var(--blue); }
.badge.escala-just-folga_banco { background: var(--blue-soft); color: var(--blue); }
.badge.escala-just-atestado { background: var(--amber-soft); color: var(--amber); }
.badge.escala-just-ferias { background: var(--green-soft); color: var(--green); }

/* Botão de status: só uma seta (sem caixa) — o menu flutuante tem o mesmo
   espírito do .dropdown do header, escopado à grade e com abertura
   delegada via JS porque existe uma instância por dia/funcionário. Ao
   escolher, o nome do status é escrito nas 4 colunas de horário daquele
   dia (ver .escala-status-label) em vez de ficar só nesse botão. */
.escala-status-dropdown { position: relative; display: inline-block; }
.escala-status-toggle {
  background: none;
  border: none;
  padding: 2px;
  font-size: 0.7rem;
  color: var(--ink-faint);
  cursor: pointer;
  margin-top: 0;
  box-shadow: none;
  line-height: 1;
}
.escala-status-toggle:hover { color: var(--primary); }
.escala-status-menu {
  display: none;
  position: absolute;
  z-index: 25;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  min-width: 140px;
  overflow: hidden;
  padding: 4px;
}
.escala-status-dropdown.open .escala-status-menu { display: block; }
.escala-status-opcao {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--ink);
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  margin-top: 0;
  box-shadow: none;
}
.escala-status-opcao:hover { background: var(--bg); }

.escala-resumo-linha { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.escala-resumo-linha:last-child { border-bottom: none; }
.escala-resumo-saldo { font-weight: 650; }

/* Dashboard: calendário do mês. */
.escala-calendario { table-layout: fixed; }
.escala-calendario th { text-align: center; }
.escala-dia-cel {
  width: 14.28%;
  height: 240px;
  vertical-align: top;
  padding: 0 !important;
  border: 1px solid var(--line);
}
/* Dias fora do mês (padding do mês anterior/seguinte) — bem discretos, só
   uma referência visual, sem competir com os dias do mês atual. */
.escala-calendario .escala-dia-fora {
  background: var(--bg) !important;
  color: var(--ink-faint);
}
.escala-calendario .escala-dia-fora .escala-dia-numero { color: var(--ink-faint); opacity: 0.7; }
.escala-dia-link {
  display: block;
  height: 100%;
  padding: 6px;
  color: inherit;
  text-decoration: none;
}
.escala-dia-link:hover { background: var(--bg); }
.escala-dia-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 3px; }
.escala-dia-numero { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 0; }
/* Total de funcionários trabalhando no dia (verde + amarelo do dias_map) —
   não conta falta nem folga/atestado/férias, que são ausência. */
.escala-dia-total {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.4;
}
.escala-dia-hoje .escala-dia-numero {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.escala-dia-item {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 5px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.escala-dia-item-verde { background: var(--green-soft); color: var(--green); }
.escala-dia-item-amarelo { background: var(--amber-soft); color: var(--amber); }
.escala-dia-item-vermelho { background: var(--red-soft); color: var(--red); }
.escala-dia-item-azul { background: var(--blue-soft); color: var(--blue); }

/* Botão "Falta" (dia da escala) — vermelho só quando ativo. */
.escala-dia-falta-btn {
  background: #fff;
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
  padding: 5px 10px;
  font-size: 0.78rem;
  margin-top: 0;
  box-shadow: none;
}
.escala-dia-falta-btn:hover { border-color: var(--red); color: var(--red); }
.escala-dia-falta-btn.ativo { background: var(--red-soft); color: var(--red); border-color: transparent; }

/* ---------------------------------------------------- gastos semanais --- */
/* Cada período ocupa 2 colunas (Valor/%); a coluna de rótulo da linha fica
   fixa ao rolar horizontalmente — mesma técnica de .escala-col-nome, mas com
   o bleed do box-shadow ajustado pro -20px padrão do .table-scroll dentro de
   um .card comum (a escala usa -12px porque aquele card tem padding próprio). */
/* table-layout: fixed + <colgroup> travam a largura de cada coluna de
   propósito — com layout automático, o max-width da coluna de rótulo era
   ignorado (o cabeçalho de período com colspan="2" "puxava" a tabela toda
   pra mais largo). Com largura fixa por coluna, sempre cabem uns 5+
   períodos na tela antes de precisar rolar. */
.gs-tabela { font-size: 0.82rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.gs-tabela th, .gs-tabela td { padding: 6px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.gs-tabela th {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-faint); text-align: right; border-bottom: 1px solid var(--line-strong);
}
.gs-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.gs-col-valor { width: 84px; }
.gs-col-pct { width: 44px; }
.gs-col-label {
  position: sticky; left: 0; z-index: 4; background: var(--card);
  text-align: left; width: 130px;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: -20px 0 0 var(--card), 1px 0 0 var(--line-strong);
}
/* Cabeçalho de período: datas empilhadas (não lado a lado) — em destaque
   (maior, sem uppercase) e, ao ocupar menos largura que uma faixa única
   "AAAA-MM-DD – AAAA-MM-DD", deixa de forçar as colunas de Valor/% a
   ficarem largas à toa (o colspan="2" do cabeçalho define a largura mínima
   das duas colunas abaixo dele). */
.gs-tabela th.gs-periodo-th {
  text-align: center; vertical-align: top; padding: 10px 6px 8px;
}
.gs-periodo-datas { display: flex; flex-direction: column; align-items: center; gap: 1px; text-transform: none; letter-spacing: normal; }
.gs-periodo-data { font-size: 0.9rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.gs-periodo-ate { font-size: 0.6rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.gs-periodo-remover { margin: 4px 0 0; }
.gs-periodo-remover .filtro-btn { font-size: 0.68rem; }
.gs-linha-vendas td, .gs-linha-cmc td { background: var(--primary-soft); }
.gs-linha-vendas td.gs-col-label, .gs-linha-cmc td.gs-col-label { box-shadow: -20px 0 0 var(--primary-soft), 1px 0 0 var(--line-strong); }
.gs-linha-categoria td { background: var(--bg); font-weight: 700; }
.gs-linha-categoria td.gs-col-label { box-shadow: -20px 0 0 var(--bg), 1px 0 0 var(--line-strong); }