:root {
  color-scheme: light dark;
  --cor-primaria: #1f6f43;
  --cor-primaria-escura: #17532f;
  --cor-fundo: #f4f6f5;
  --cor-superficie: #ffffff;
  --cor-borda: #d9e0dc;
  --cor-texto: #1e2622;
  --cor-texto-suave: #5b6b62;
  --cor-erro: #b3261e;
  --cor-erro-escura: #8f1f19;
  --cor-erro-fundo: #fbeceb;
  --cor-aviso: #8a5a00;
  --cor-aviso-fundo: #fff3d6;
  --cor-info: #1d5fa8;
  --cor-info-fundo: #e3eefb;
  --cor-sucesso: #1f6f43;
  --cor-sucesso-fundo: #e4f3ea;
  --cor-neutro-fundo: #f0f0f0;
  --cor-sombra: rgba(0, 0, 0, 0.08);
  --raio: 8px;
  --largura-menu: 240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cor-primaria: #3fa66b;
    --cor-primaria-escura: #6fc796;
    --cor-fundo: #121815;
    --cor-superficie: #1b2320;
    --cor-borda: #2e3934;
    --cor-texto: #e7ede9;
    --cor-texto-suave: #9fb0a7;
    --cor-erro: #ff6b60;
    --cor-erro-escura: #ff8a80;
    --cor-erro-fundo: #3a1f1d;
    --cor-aviso: #f2c46b;
    --cor-aviso-fundo: #3a2e14;
    --cor-info: #8cb8f0;
    --cor-info-fundo: #1b2a3d;
    --cor-sucesso: #6fc796;
    --cor-sucesso-fundo: #1c3327;
    --cor-neutro-fundo: #26302b;
    --cor-sombra: rgba(0, 0, 0, 0.4);
  }
}

/* Alternância manual (botão de tema), tem prioridade sobre a preferência do sistema */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cor-primaria: #3fa66b;
  --cor-primaria-escura: #6fc796;
  --cor-fundo: #121815;
  --cor-superficie: #1b2320;
  --cor-borda: #2e3934;
  --cor-texto: #e7ede9;
  --cor-texto-suave: #9fb0a7;
  --cor-erro: #ff6b60;
  --cor-erro-escura: #ff8a80;
  --cor-erro-fundo: #3a1f1d;
  --cor-aviso: #f2c46b;
  --cor-aviso-fundo: #3a2e14;
  --cor-info: #8cb8f0;
  --cor-info-fundo: #1b2a3d;
  --cor-sucesso: #6fc796;
  --cor-sucesso-fundo: #1c3327;
  --cor-neutro-fundo: #26302b;
  --cor-sombra: rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

a {
  color: inherit;
}

/* Menu lateral */

.botao-menu {
  position: fixed;
  top: 14px;
  left: calc(var(--largura-menu) + 14px);
  z-index: 110;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  box-shadow: 0 1px 4px var(--cor-sombra);
}

.botao-menu:hover {
  background: var(--cor-fundo);
}

.barra-topo-usuario {
  position: fixed;
  top: 14px;
  right: 24px;
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-novidades {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto);
  font-size: 0.85rem;
  text-decoration: none;
  padding: 8px 14px;
  white-space: nowrap;
  box-shadow: 0 1px 4px var(--cor-sombra);
}

.topbar-novidades:hover {
  background: var(--cor-fundo);
}

.novidades-contador {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cor-erro);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.novidades-contador[hidden] {
  display: none;
}

/* Página Novidades: itens por versão, com o tipo em etiqueta */
.novidades-versao h2 {
  margin: 0 0 10px;
}

.novidades-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.novidades-itens li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.novidades-itens p {
  margin: 2px 0 0;
}

.novidade-tipo {
  flex: 0 0 auto;
  min-width: 108px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.novidade-novo { background: #e3f2fd; color: #0d47a1; }
.novidade-melhoria { background: #e8f5e9; color: #1b5e20; }
.novidade-correcao { background: #fff3e0; color: #8a4b00; }
.novidade-atencao { background: #fdecea; color: #a12a1d; }

@media (max-width: 600px) {
  .novidades-itens li {
    flex-direction: column;
    gap: 4px;
  }
}

.usuario-wrapper {
  position: relative;
}

.topbar-user {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 14px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 4px var(--cor-sombra);
}

.topbar-user:hover {
  background: var(--cor-fundo);
}

.usuario-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 12px 32px var(--cor-sombra);
  z-index: 120;
  overflow: hidden;
}

.usuario-menu[hidden] {
  display: none;
}

.usuario-menu-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cor-borda);
}

.usuario-menu-nome {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cor-texto);
}

.usuario-menu-papel {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.usuario-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  background: var(--cor-superficie);
  border: none;
  color: var(--cor-texto);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.usuario-menu-item:hover {
  background: var(--cor-fundo);
}

@media (max-width: 768px) {
  .barra-topo-usuario {
    right: 14px;
  }

  .topbar-user {
    max-width: 120px;
  }

  .topbar-novidades {
    padding: 8px 10px;
  }
}

#nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--largura-menu);
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--cor-superficie);
  border-right: 1px solid var(--cor-borda);
  padding: 10px 16px 16px;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.2s ease;
  z-index: 100;
}

.nav-brand {
  font-weight: 700;
  color: var(--cor-primaria-escura);
  line-height: 1.3;
  overflow: hidden;
  border-radius: var(--raio);
}

/* Nenhum bloco do menu encolhe: se não couber na altura da tela, o menu rola.
   Sem isso, a área da logo (overflow: hidden) era espremida até sumir. */
#nav > * {
  flex-shrink: 0;
}

.nav-brand img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.nav-empresa {
  margin-top: -36px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-texto-suave);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-links a {
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--raio);
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.nav-icone {
  display: inline-block;
  width: 22px;
  margin-right: 6px;
  text-align: center;
}

.nav-links a:hover {
  background: var(--cor-fundo);
}

.nav-links a.active {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-primaria-escura);
  font-weight: 600;
}

.nav-grupo {
  display: flex;
  flex-direction: column;
}

.nav-grupo-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 12px;
  border-radius: var(--raio);
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}

.nav-grupo-toggle:hover {
  background: var(--cor-fundo);
}

.nav-grupo-toggle.active {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-primaria-escura);
  font-weight: 600;
}

.nav-grupo-seta {
  font-size: 0.8rem;
}

.nav-submenu {
  flex-direction: column;
  gap: 2px;
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid var(--cor-borda);
}

.nav-submenu a {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--raio);
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.nav-submenu a:hover {
  background: var(--cor-fundo);
}

.nav-grupo-aninhado > .nav-grupo-toggle {
  padding: 8px 12px;
  font-size: 0.9rem;
}

.nav-grupo-aninhado > .nav-submenu {
  margin-left: 12px;
}

.nav-submenu a.active {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-primaria-escura);
  font-weight: 600;
}

.nav-user {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.nav-user small {
  color: var(--cor-texto-suave);
}

.nav-user button {
  width: 100%;
}

.nav-user-nome {
  text-align: center;
}

.nav-versao {
  margin-top: auto;
  text-align: center;
  padding: 4px 0;
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  opacity: 0.7;
}

.sidebar-footer {
  padding: 12px 12px 0;
  border-top: 1px solid var(--cor-borda);
  margin-top: 12px;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--cor-erro);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--raio);
}

.logout-btn:hover {
  background: var(--cor-erro-fundo);
}

.nav-suporte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px 0;
  text-align: center;
  font-size: 0.68rem;
  color: var(--cor-texto-suave);
}

.rodape-suporte-empresa {
  font-weight: 600;
}

.rodape-suporte-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #25d366;
  text-decoration: none;
  font-weight: 600;
}

.rodape-suporte-whatsapp:hover {
  text-decoration: underline;
}

.rodape-suporte-copyright {
  opacity: 0.8;
}

.botao-tema {
  background: transparent;
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  padding: 6px 10px;
  font-size: 0.85rem;
}

.botao-tema:hover {
  background: var(--cor-fundo);
}

.rodape-versao {
  text-align: right;
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  opacity: 0.7;
  margin-top: 16px;
}

.botao-tema-flutuante {
  position: fixed;
  top: 16px;
  right: 16px;
}

.overlay-menu {
  display: none;
}

/* Layout */

main {
  margin-left: var(--largura-menu);
  max-width: 1000px;
  padding: 70px 24px 44px;
  transition: margin-left 0.2s ease;
}

main.main-largo {
  max-width: 1400px;
}

/* Recolher o menu no desktop (botão de ocultar) */
body.menu-oculto #nav {
  transform: translateX(-100%);
}

body.menu-oculto main {
  margin-left: 0;
}

body.menu-oculto .botao-menu {
  left: 14px;
}

/* Em telas pequenas o menu some por padrão e vira um painel sobreposto */
@media (max-width: 768px) {
  #nav {
    transform: translateX(-100%);
  }

  .botao-menu {
    left: 14px;
  }

  main {
    margin-left: 0;
    padding-top: 76px;
  }

  body.menu-aberto #nav {
    transform: translateX(0);
  }

  body.menu-aberto .overlay-menu {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 90;
  }
}

.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 20px;
}

h1 {
  font-size: 1.4rem;
  margin-top: 0;
}

h2 {
  font-size: 1.1rem;
  margin-top: 0;
}

/* Forms */

form.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

form.form-linhas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
}

.campo.campo-curto {
  flex: 0 1 110px;
}

.campo.campo-minimo {
  flex: 0 1 80px;
}

.campo.campo-data-compacta {
  flex: 0 0 180px;
}

.resumo-total-registros {
  align-self: flex-start;
  margin-left: auto;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.resumo-total-registros span {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.resumo-total-registros strong {
  font-size: 1.05rem;
}

.campo label {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

input, select {
  padding: 8px 10px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 0.95rem;
  min-width: 0;
  width: 100%;
}

input:focus, select:focus {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
}

input:disabled, select:disabled {
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--raio);
  padding: 9px 16px;
  font-size: 0.95rem;
  background: var(--cor-primaria);
  color: white;
}

button:hover {
  background: var(--cor-primaria-escura);
}

button.secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
}

button.secundario:hover {
  background: var(--cor-fundo);
}

button.perigo {
  background: var(--cor-erro);
  color: #ffffff;
}

button.perigo:hover {
  background: var(--cor-erro-escura);
}

button:disabled,
button.secundario:disabled,
button.perigo:disabled {
  background: var(--cor-borda);
  color: var(--cor-texto-suave);
  cursor: not-allowed;
}

button:disabled:hover,
button.secundario:disabled:hover,
button.perigo:disabled:hover {
  background: var(--cor-borda);
}

.modal-local {
  width: min(440px, calc(100% - 32px));
  padding: 22px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.modal-local::backdrop { background: rgba(0, 0, 0, 0.6); }
.modal-local form { display: flex; flex-direction: column; gap: 16px; }

.lista-empresas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lista-empresas button {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  cursor: pointer;
  font-size: 0.95rem;
}
.lista-empresas button:hover { border-color: var(--cor-primaria); }

/* Table */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--cor-borda);
}

th {
  color: var(--cor-texto-suave);
  font-weight: 600;
}

tr.inativo td {
  color: var(--cor-texto-suave);
  font-style: italic;
}

tr.linha-protegida td {
  opacity: 0.55;
}

.acao-bloqueada {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  cursor: not-allowed;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.badge.ativo {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

.badge.inativo {
  background: var(--cor-neutro-fundo);
  color: var(--cor-texto-suave);
}

.badge.inativo-erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.badge.unificado {
  background: var(--cor-info-fundo);
  color: var(--cor-info);
}

.badge.aviso {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.acoes {
  display: flex;
  gap: 6px;
}

.acoes button {
  white-space: nowrap;
}

.tabela-scroll {
  overflow-x: auto;
}

.tabela-grade th,
.tabela-grade td {
  white-space: nowrap;
  text-align: center;
}

.tabela-grade input,
.tabela-grade select {
  text-align: center;
  text-align-last: center;
}

.tabela-grade select {
  min-width: 150px;
}

.tabela-grade input {
  width: 90px;
  min-width: 0;
}

/* Toolbar (telas de lista) */

.toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

#tabela-lotes tr {
  cursor: pointer;
}

#tabela-lotes tr:hover {
  background: var(--cor-fundo);
}

#tabela-lotes tr.selecionada {
  background: var(--cor-sucesso-fundo);
}

.campo .valor-somente-leitura {
  padding: 8px 0;
  font-weight: 600;
}

/* Feedback */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.paginacao-info {
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
}

#notificacoes {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.notificacao {
  min-width: 220px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: var(--raio);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.notificacao-saindo {
  opacity: 0;
  transform: translateX(24px);
}

.notificacao-sucesso {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

.notificacao-erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.mensagem-erro {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
  border-radius: var(--raio);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.mensagem-aviso {
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
  border-radius: var(--raio);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mensagem-aviso:empty {
  display: none;
  padding: 0;
}

.mensagem-aviso .fechar-aviso {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.mensagem-erro:empty {
  display: none;
}

.mensagem-erro.mensagem-info {
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
  border: 1px solid var(--cor-borda);
}

.dica {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

/* Login page */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 32px;
  width: 100%;
  max-width: 440px;
}

.login-logo-wrap {
  margin-bottom: 20px;
}

.login-logo {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  margin: 0 auto;
}

.login-card h1 {
  text-align: center;
  color: var(--cor-primaria-escura);
}

.campo-senha { position: relative; }
.campo-senha input { padding-right: 52px; }
.campo-senha button {
  position: absolute; right: 2px; top: 0; width: 44px; height: 44px;
  margin: 0; padding: 0; display: grid; place-items: center;
  background: transparent; color: var(--cor-texto-suave); border: 0;
}
.campo-senha button:hover { color: var(--cor-texto); }

.login-opcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  margin-top: -4px;
}

.checkboxes-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px;
}

.checkboxes-linha label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
  cursor: pointer;
}

.checkboxes-linha input {
  width: auto;
}

.login-lembrar {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.login-lembrar input {
  width: auto;
}

.login-opcoes a {
  color: var(--cor-primaria);
  text-decoration: none;
}

.login-opcoes a:hover {
  text-decoration: underline;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.login-card form .campo {
  flex: initial;
}

.login-card button {
  width: 100%;
}

.login-card .campo-senha button {
  width: 44px;
}

/* Dashboard cards */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.grid-cards a.card {
  text-decoration: none;
  color: var(--cor-texto);
  transition: box-shadow 0.15s ease;
}

.grid-cards a.card:hover {
  box-shadow: 0 2px 10px var(--cor-sombra);
}

/* Stat tiles */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-tile {
  margin-bottom: 0;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  margin-bottom: 6px;
}

.stat-valor {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--cor-texto);
}

/* Gráficos (dashboard): HTML/CSS puro, sem lib */

.grid-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.grafico-vazio {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

/* Coluna (série temporal) */

.grafico-colunas {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding-top: 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.barra-coluna {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
  cursor: pointer;
}

.barra-coluna .barra {
  width: 100%;
  max-width: 26px;
  background: var(--cor-primaria);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: opacity 0.15s ease;
}

.barra-coluna:hover .barra {
  opacity: 0.75;
}

.barra-coluna-rotulo {
  font-size: 0.65rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

/* Barra horizontal (ranking) */

.grafico-barras-h {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.barra-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.barra-linha-rotulo {
  width: 120px;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-linha-area {
  flex: 1;
}

.barra-h {
  height: 18px;
  background: var(--cor-primaria);
  border-radius: 0 4px 4px 0;
  min-width: 3px;
  transition: opacity 0.15s ease;
}

.barra-linha:hover .barra-h {
  opacity: 0.75;
}

.barra-linha-valor {
  width: 96px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-texto);
}

/* Tooltip compartilhado */

.grafico-tooltip {
  position: fixed;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 0.78rem;
  pointer-events: none;
  z-index: 200;
  display: none;
  white-space: nowrap;
}

/* Permissões */

.lista-permissoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.permissao-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  cursor: pointer;
}

.permissao-item input {
  width: auto;
}

/* Compras: modo "por produto" (celular no CEASA) */

.compra-produto {
  margin-bottom: 16px;
}

/* Busca e filtros grudados no topo: o comprador nunca perde onde digitar. */
.compra-produto-busca {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  background: var(--cor-fundo);
}

.compra-produto-busca-linha {
  display: flex;
  gap: 8px;
}

.compra-produto-busca-linha input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  padding: 12px 14px;
}

.compra-produto-busca-linha button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.compra-produto-filtros {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.compra-produto-filtros .chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 0.85rem;
}

.compra-produto-filtros .chip span {
  margin-left: 4px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.compra-produto-filtros .chip.ativo {
  border-color: var(--cor-primaria);
  background: var(--cor-sucesso-fundo);
  color: var(--cor-primaria);
  font-weight: 600;
}

.compra-produto-progresso {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.compra-produto-progresso .barra {
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--cor-borda);
  overflow: hidden;
}

.compra-produto-progresso .barra div {
  height: 100%;
  background: var(--cor-primaria);
  transition: width 0.2s;
}

/* Comprado na hora, sem estar no pedido; compra lançada dias depois */
.selo-extra,
.selo-atraso {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
  font-weight: 700;
  font-size: 0.75rem;
}

.selo-editada {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave, #666);
  font-weight: 700;
  font-size: 0.7rem;
  text-align: center;
  cursor: help;
}

.selo-atraso {
  cursor: help;
}

.grade-compras .c-lanc,
.grade-compras .c-datac {
  white-space: nowrap;
}

/* Fechamento (Resumo de Compras) */
.cartao-resumo.cartao-fixo {
  cursor: default;
}

.cartao-resumo.cartao-fixo:hover {
  border-color: var(--cor-borda);
}

.cartao-resumo small {
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.resumo-auditoria.resumo-fechamento {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .resumo-auditoria.resumo-fechamento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.resumo-fechamento .cartao-resumo {
  min-width: 0;
  container-type: inline-size;
}

/* O valor encolhe com a largura do cartão: R$ 188.540,24 não passa da borda. */
.resumo-fechamento .cartao-resumo strong {
  max-width: 100%;
  font-size: min(1.5rem, 12.5cqi);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .resumo-auditoria.resumo-fechamento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resumo-fechamento .cartao-resumo {
    padding: 10px;
  }

  .resumo-fechamento .cartao-resumo strong {
    font-size: min(1.3rem, 12.5cqi);
  }
}

.aviso-duas-linhas {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--cor-aviso);
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
  color: var(--cor-texto);
  font-size: 0.85rem;
}

.grade-fechamento {
  width: 100%;
}

.grade-fechamento .c-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grade-fechamento .linha-fornecedor {
  cursor: pointer;
}

.grade-fechamento .linha-fornecedor:hover,
.grade-fechamento .linha-fornecedor.aberta {
  background: var(--cor-fundo);
}

.grade-fechamento .seta {
  display: inline-block;
  transition: transform 0.15s;
  color: var(--cor-texto-suave);
}

.grade-fechamento .aberta .seta {
  transform: rotate(90deg);
}

.grade-fechamento .valor-vencido {
  color: var(--cor-erro);
  font-weight: 700;
}

.grade-fechamento tfoot td {
  font-weight: 700;
}

.detalhe-fechamento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
  padding: 6px 0 10px;
}

.modo-cards .grade-fechamento > thead,
.modo-cards .grade-fechamento .c-acao {
  display: none;
}

.modo-cards .grade-fechamento,
.modo-cards .grade-fechamento > tbody,
.modo-cards .grade-fechamento > tfoot {
  display: block;
}

.modo-cards .grade-fechamento > tbody > tr.linha-fornecedor,
.modo-cards .grade-fechamento > tfoot > tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
}

.modo-cards .grade-fechamento > tbody > tr > td,
.modo-cards .grade-fechamento > tfoot > tr > td {
  padding: 0;
  border: none;
}

.modo-cards .grade-fechamento .c-forn {
  grid-column: 1 / -1;
}

.modo-cards .grade-fechamento .c-num {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.modo-cards .grade-fechamento .c-num::before {
  content: attr(data-rotulo);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.modo-cards .grade-fechamento tr.linha-detalhe {
  display: block;
  margin: -6px 0 12px;
}

.modo-cards .grade-fechamento tr.linha-detalhe[hidden],
.grade-fechamento tr[hidden] {
  display: none;
}

.modo-cards .grade-fechamento > tbody > tr.linha-detalhe > td {
  display: block;
}

.modo-cards .grade-fechamento > tfoot > tr {
  background: var(--cor-sucesso-fundo);
}

/* Relatórios: filtros recolhidos no celular, mês com setas e ações no pé. */
.resumo-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.navegador-mes {
  display: flex;
  align-items: center;
  gap: 6px;
}

.navegador-mes[hidden] {
  display: none;
}

.navegador-mes strong {
  min-width: 9.5em;
  text-align: center;
  font-size: 1.05rem;
}

.navegador-mes button {
  padding: 6px 12px;
  font-size: 1.1rem;
  line-height: 1;
}

.texto-filtros {
  flex: 1 1 200px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.filtros-relatorio {
  margin-top: 12px;
}

.filtros-relatorio .campo[hidden] {
  display: none;
}

/* No computador os filtros ficam sempre abertos. */
.botao-filtros {
  display: none;
}

.barra-acoes-relatorio {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  box-shadow: 0 -4px 12px var(--cor-sombra);
}

.barra-acoes-relatorio button {
  flex: 1 1 0;
}

.pagina-relatorio .titulo-grupo {
  margin: 0;
}

.bloco-relatorio {
  margin-bottom: 14px;
}

.tabela-relatorio {
  width: 100%;
}

.tabela-relatorio .titulo-tabela th {
  background: var(--cor-borda);
  text-align: center;
  font-weight: 700;
  color: var(--cor-texto);
}

.tabela-relatorio .c-meio,
.tabela-relatorio .c-total {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabela-relatorio td.c-total {
  text-align: right;
  font-weight: 700;
}

.tabela-relatorio th.c-total {
  text-align: right;
}

.tabela-relatorio tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cor-primaria);
}

.grade-fechamento .linha-fornecedor.sem-detalhe {
  cursor: default;
}

/* Modo Cards: cada item em duas linhas, nome em cima e números embaixo. */
.modo-cards .tabela-relatorio,
.modo-cards .tabela-relatorio thead,
.modo-cards .tabela-relatorio tbody,
.modo-cards .tabela-relatorio tfoot {
  display: block;
}

.modo-cards .tabela-relatorio thead tr:not(.titulo-tabela) {
  display: none;
}

.modo-cards .tabela-relatorio .titulo-tabela,
.modo-cards .tabela-relatorio .titulo-tabela th {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
}

.modo-cards .tabela-relatorio tbody tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--cor-borda);
}

.modo-cards .tabela-relatorio td {
  padding: 0;
  border: none;
}

.modo-cards .tabela-relatorio td.c-nome {
  flex-basis: 100%;
  font-weight: 600;
}

.modo-cards .tabela-relatorio td.c-meio {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.modo-cards .tabela-relatorio td.c-meio::before {
  content: attr(data-rotulo) " ";
}

.modo-cards .tabela-relatorio td.c-total {
  margin-left: auto;
}

.modo-cards .tabela-relatorio tfoot tr {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px;
}

.modo-cards .tabela-relatorio tfoot td {
  padding: 0;
  border: none;
}

@media (max-width: 640px) {
  .botao-filtros {
    display: inline-block;
    margin-left: auto;
  }

  form.form-inline.filtros-relatorio:not(.aberto) {
    display: none;
  }

  .resumo-filtros .navegador-mes {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .texto-filtros {
    flex: 1 1 0;
  }

  .pagina-relatorio .card {
    padding: 12px;
  }
}

.legenda-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--cor-texto-suave, #666);
}

.botao-cadastro-rapido {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-size: 1rem;
}

.compra-produto-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  overflow: hidden;
}

.compra-produto-lista li + li {
  border-top: 1px solid var(--cor-borda);
}

.compra-produto-lista button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--cor-texto);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.compra-produto-lista button:hover,
.compra-produto-lista button:active {
  background: var(--cor-fundo);
}

.compra-produto-lista .marca {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1.5px solid var(--cor-borda);
  color: transparent;
}

.compra-produto-lista button.do-pedido .marca {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.compra-produto-lista button.comprado .marca {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: white;
}

.compra-produto-lista .texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.compra-produto-lista .texto strong small {
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.compra-produto-lista .texto > small {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compra-produto-lista button.comprado .texto > small {
  color: var(--cor-primaria);
}

.compra-produto-lista .seta {
  flex: 0 0 auto;
  color: var(--cor-texto-suave);
  font-size: 1.3rem;
}

/* Total e Salvar sempre à mão, grudados no rodapé da tela. */
.compra-produto-rodape {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  box-shadow: 0 -4px 12px var(--cor-sombra);
}

.compra-produto-rodape span {
  display: block;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.compra-produto-rodape strong {
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

/* No modo por produto o Salvar fica só no rodapé, que filtra o que não foi comprado. */
body.compra-modo-produto #btn-salvar {
  display: none !important;
}

.modal-local.modal-ficha form {
  gap: 12px;
}

/* .campo tem flex-basis de 200px (pensado para formulários em linha): numa
   coluna isso vira 200px de altura vazia. */
.modal-local form > .campo {
  flex: 0 0 auto;
}

.modal-ficha-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.modal-ficha-topo h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-ficha-topo button {
  padding: 6px 10px;
}

.modal-ficha-linha {
  display: flex;
  gap: 10px;
}

.modal-ficha-linha .campo {
  flex: 1 1 0;
  min-width: 0;
}

.modal-ficha-lojas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--raio);
  background: var(--cor-fundo);
}

.modal-ficha-loja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}

.modal-ficha-loja small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.modal-ficha-loja input {
  flex: 0 0 110px;
  width: 110px;
  text-align: right;
  font-size: 1.1rem;
  padding: 10px 12px;
}

.modal-ficha-total {
  font-size: 0.95rem;
}

.modal-ficha-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-ficha-acoes button {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
}

/* Telas pequenas: ☰ e o botão do usuário ficam fixos no topo (até ~54px);
   a busca gruda logo abaixo deles, senão fica escondida atrás. */
@media (max-width: 768px) {
  .compra-produto-busca {
    top: 58px;
  }

  /* Com a busca grudada, cobre a faixa atrás de ☰/usuário, para a lista não
     aparecer passando por ali. */
  .compra-produto-busca.grudada::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    bottom: 100%;
    height: 58px;
    background: var(--cor-fundo);
  }
}

/* Celular: a ficha vira uma folha que sobe do rodapé, perto do polegar. */
@media (max-width: 640px) {
  .modal-local.modal-ficha {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* Pedidos: pré-visualização de impressão em modal */

.modal-local.modal-impressao {
  width: min(1040px, calc(100% - 32px));
  max-width: none;
  height: calc(100vh - 48px);
  max-height: none;
  padding: 0;
  flex-direction: column;
  overflow: hidden;
}

.modal-local.modal-impressao[open] {
  display: flex;
}

.modal-impressao-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cor-borda);
}

.modal-impressao-topo h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-impressao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-impressao-corpo {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
  background: var(--cor-fundo);
}

.modal-impressao-corpo .folha-relatorio {
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .modal-local.modal-impressao {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .modal-impressao-topo,
  .modal-impressao-corpo {
    padding: 12px;
  }
}

/* Relatório de Pedido: folha pronta para imprimir e receber anotação à caneta */

.folha-relatorio {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 1px 3px var(--cor-sombra);
  padding: 24px;
  margin-bottom: 16px;
}

.folha-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--cor-primaria);
}

.folha-empresa {
  font-size: 1.15rem;
}

.folha-empresa-dados {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  margin-top: 4px;
}

.folha-titulo {
  text-align: right;
}

.folha-titulo span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.folha-titulo strong {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.folha-dados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 24px;
  margin: 6px 0 10px;
  font-size: 0.875rem;
}

.folha-dados div {
  display: flex;
  gap: 6px;
}

.folha-dados dt {
  font-weight: 600;
  white-space: nowrap;
}

.folha-dados dt::after {
  content: ":";
}

.folha-dados dd {
  margin: 0;
}

.folha-tabela {
  width: 100%;
  font-size: 0.875rem;
}

.folha-tabela td {
  height: 34px;
}

.folha-tabela .col-num,
.folha-tabela .col-un {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.folha-tabela .col-qtd {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.folha-tabela .col-total {
  font-weight: 700;
}

.folha-tabela .col-valor {
  width: 120px;
}

.folha-tabela .col-fornecedor {
  width: 220px;
}

.folha-tabela tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--cor-borda);
}

.folha-tabela input.campo-anotacao {
  width: 100%;
  min-width: 80px;
  border: none;
  border-bottom: 1px solid var(--cor-borda);
  border-radius: 0;
  background: transparent;
  padding: 4px 2px;
  font: inherit;
  color: inherit;
}

.folha-tabela input.campo-anotacao:focus {
  outline: none;
  border-bottom-color: var(--cor-primaria);
}

.folha-tabela td.col-valor input.campo-anotacao {
  text-align: right;
}

.folha-observacoes {
  margin-top: 20px;
  font-size: 0.875rem;
}

.folha-observacoes span {
  display: block;
  height: 28px;
  border-bottom: 1px solid var(--cor-borda);
}

.folha-assinaturas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 56px;
  font-size: 0.85rem;
  text-align: center;
}

.folha-assinaturas span {
  display: block;
  border-top: 1px solid var(--cor-texto);
  margin-bottom: 4px;
}

.folha-rodape {
  margin-top: 24px;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

@media (max-width: 640px) {
  .folha-relatorio {
    padding: 14px;
  }

  .folha-cabecalho {
    flex-direction: column;
  }

  .folha-titulo {
    text-align: left;
  }
}

/* Botão verde do WhatsApp (enviar a lista em PDF) */

button.botao-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1fa855;
  border-color: #1fa855;
  color: #fff;
}

button.botao-whatsapp:disabled {
  background: var(--cor-borda);
  border-color: var(--cor-borda);
  color: var(--cor-texto-suave);
}

button.botao-whatsapp:hover:not(:disabled) {
  background: #178a45;
}

button.botao-whatsapp svg {
  flex: 0 0 auto;
}

/* Lista de usuários: ações compactas para caber Editar, WhatsApp, Inativar e Excluir. */
.tabela-usuarios .acoes button {
  padding: 6px 10px;
  font-size: 0.85rem;
}

/* Só o ícone, quando o espaço é curto (ações da lista de usuários). */
button.botao-icone {
  padding: 8px 10px;
  font-size: 1rem;
  line-height: 1;
}

button.botao-whatsapp.botao-icone svg {
  width: 18px;
  height: 18px;
}

button.botao-whatsapp.destaque {
  box-shadow: 0 0 0 3px rgba(31, 168, 85, 0.35);
  animation: pulso-whatsapp 1.2s ease-in-out 3;
}

@keyframes pulso-whatsapp {
  50% {
    box-shadow: 0 0 0 7px rgba(31, 168, 85, 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  button.botao-whatsapp.destaque {
    animation: none;
  }
}

/* Janela "Mensagem para o WhatsApp" (copiar e colar) */

.modal-local.modal-mensagem-whatsapp {
  width: min(560px, calc(100% - 32px));
}

.modal-mensagem-whatsapp form {
  gap: 10px;
}

#modal-whatsapp-texto {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
}

.modal-whatsapp-extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-whatsapp-extras[hidden] {
  display: none;
}

.modal-whatsapp-extras button {
  width: 100%;
  padding: 12px;
}

/* Usuários: envio do acesso pelo WhatsApp logo após o cadastro */

.aviso-envio-acesso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

.aviso-envio-acesso[hidden] {
  display: none;
}

/* Usuários: WhatsApp */

.rotulo-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rotulo-whatsapp svg,
.link-whatsapp svg {
  color: #25d366;
  flex: 0 0 auto;
}

.link-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.link-whatsapp:hover {
  color: var(--cor-primaria);
  text-decoration: underline;
}

/* Empresa: logo */

.logo-empresa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.logo-empresa-previa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  max-width: 100%;
  height: 110px;
  padding: 10px;
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  /* xadrez claro: mostra se o PNG tem fundo transparente */
  background: repeating-conic-gradient(#f2f2f2 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
  color: var(--cor-texto-suave);
}

.logo-empresa-previa img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-empresa-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.logo-empresa-acoes .mensagem-erro {
  flex-basis: 100%;
  margin: 0;
}

/* Logo no cabeçalho da folha de compra: na mesma linha do nome da empresa,
   para não empurrar o resto da folha pra baixo e economizar papel. */
.folha-empresa-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

.folha-logo {
  max-height: 22px;
  max-width: 70px;
  object-fit: contain;
  display: block;
}

/* Resumo de Compras (relatorio-proprietario) */

.relatorio-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.relatorio-abas {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  overflow-x: auto;
}

.relatorio-abas button {
  flex: 1 0 auto;
  background: transparent;
  color: var(--cor-texto-suave);
  border: none;
  font-weight: 600;
  white-space: nowrap;
}

.relatorio-abas button.ativa {
  background: var(--cor-primaria);
  color: #fff;
}

.titulo-grupo {
  margin: 18px 0 8px;
}

.titulo-grupo:first-child {
  margin-top: 0;
}

.titulo-grupo small {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.linha-clicavel {
  cursor: pointer;
}

.linha-clicavel:hover {
  background: var(--cor-fundo);
}

.tabela-cartoes tr.inicio-grupo td {
  border-top: 2px solid var(--cor-borda);
}

.tabela-cartoes tfoot tr.linha-total td {
  border-top: 2px solid var(--cor-primaria);
  font-weight: 600;
}

.tabela-cartoes thead tr.titulo-tabela th {
  background: var(--cor-borda);
  text-align: center;
  font-weight: 700;
  color: var(--cor-texto);
}

.grid-tabelas-lado-a-lado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px 24px;
  align-items: start;
}

.bloco-tabela-largura-cheia {
  margin-bottom: 24px;
}

.bloco-tabela-largura-cheia:last-child {
  margin-bottom: 0;
}

.barra-percentual {
  height: 6px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--cor-borda);
  overflow: hidden;
  min-width: 80px;
}

.barra-percentual span {
  display: block;
  height: 100%;
  background: var(--cor-primaria);
}

/* Custo: gastar mais é vermelho, gastar menos é verde. */
.variacao.sobe {
  color: var(--cor-erro);
  font-weight: 600;
}

.variacao.desce {
  color: var(--cor-sucesso);
  font-weight: 600;
}

@media (max-width: 640px) {
  /* Tabelas do relatório viram cartões no celular. A linha de título (nome
     da loja/fornecedor) fica visível; só a linha de nomes de coluna some,
     já que o rótulo de cada campo já aparece dentro do cartão. */
  .tabela-cartoes thead tr:not(.titulo-tabela) {
    display: none;
  }

  .tabela-cartoes thead tr.titulo-tabela,
  .tabela-cartoes thead tr.titulo-tabela th {
    display: block;
    width: 100%;
  }

  .tabela-cartoes tfoot,
  .tabela-cartoes tfoot tr,
  .tabela-cartoes tfoot td {
    display: block;
  }

  .tabela-cartoes tfoot tr.linha-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
  }

  .tabela-cartoes tfoot tr.linha-total td {
    border: none;
    padding: 0;
  }

  .tabela-cartoes,
  .tabela-cartoes tbody,
  .tabela-cartoes tr,
  .tabela-cartoes td {
    display: block;
  }

  .tabela-cartoes tr {
    padding: 10px 4px;
    border-bottom: 1px solid var(--cor-borda);
  }

  .tabela-cartoes td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    border: none;
    white-space: normal;
    text-align: right;
  }

  .tabela-cartoes td::before {
    content: attr(data-rotulo);
    color: var(--cor-texto-suave);
    font-size: 0.8rem;
    text-align: left;
    flex: 0 0 auto;
  }

  .tabela-cartoes td:empty,
  .tabela-cartoes td[data-rotulo="Comparação"]:empty {
    display: none;
  }

  .tabela-cartoes tr.inicio-grupo td {
    border-top: none;
  }

  .tabela-cartoes tr.inicio-grupo {
    border-top: 2px solid var(--cor-borda);
  }

  .tabela-cartoes .barra-percentual {
    min-width: 60px;
    flex: 1;
    margin: 6px 0 0;
  }
}

/* Logs de atividade (auditoria) */

.resumo-auditoria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.cartao-resumo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-align: left;
  cursor: pointer;
}

.cartao-resumo:hover {
  border-color: var(--cor-primaria);
}

.cartao-resumo span {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.cartao-resumo strong {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.cartao-resumo.alerta {
  background: var(--cor-aviso-fundo);
  border-color: var(--cor-aviso);
}

.cartao-resumo.alerta strong {
  color: var(--cor-aviso);
}

.cartao-resumo.erro {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro);
}

.cartao-resumo.erro strong {
  color: var(--cor-erro);
}

.tabela-auditoria .nowrap {
  white-space: nowrap;
}

.tabela-auditoria .col-mensagem {
  min-width: 220px;
  max-width: 420px;
}

.linha-auditoria {
  cursor: pointer;
}

.linha-auditoria:hover,
.linha-auditoria.aberta {
  background: var(--cor-fundo);
}

.linha-detalhes td {
  background: var(--cor-fundo);
  padding: 12px 16px;
}

.auditoria-detalhes {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.auditoria-detalhes div {
  display: flex;
  gap: 8px;
}

.auditoria-detalhes dt {
  font-weight: 600;
  min-width: 80px;
}

.auditoria-detalhes dd {
  margin: 0;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.auditoria-json {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border-radius: var(--raio);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 640px) {
  .resumo-auditoria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* No celular cada atividade vira um cartão: ação, resultado e mensagem
     ficam à vista sem rolar a tabela para o lado. */
  .tabela-auditoria thead {
    display: none;
  }

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

  .tabela-auditoria tr.linha-auditoria {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "acao resultado"
      "quem quem"
      "momento registro"
      "mensagem mensagem"
      "ip ip";
    gap: 3px 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--cor-borda);
  }

  .tabela-auditoria tr.linha-auditoria td {
    display: block;
    padding: 0;
    border: none;
    white-space: normal;
  }

  .tabela-auditoria .col-acao {
    grid-area: acao;
    font-weight: 700;
  }

  .tabela-auditoria .col-resultado {
    grid-area: resultado;
    text-align: right;
  }

  .tabela-auditoria .col-quem {
    grid-area: quem;
  }

  .tabela-auditoria .col-momento {
    grid-area: momento;
  }

  .tabela-auditoria td[data-rotulo="Registro"] {
    grid-area: registro;
    text-align: right;
  }

  .tabela-auditoria .col-ip {
    grid-area: ip;
  }

  .tabela-auditoria .col-momento,
  .tabela-auditoria .col-ip,
  .tabela-auditoria td[data-rotulo="Registro"] {
    font-size: 0.78rem;
    color: var(--cor-texto-suave);
  }

  .tabela-auditoria td[data-rotulo="Registro"]::before {
    content: "Registro ";
  }

  .tabela-auditoria .col-mensagem {
    grid-area: mensagem;
    min-width: 0;
    max-width: none;
    color: var(--cor-erro);
  }

  .tabela-auditoria .col-mensagem:empty,
  .tabela-auditoria .col-ip:empty,
  .tabela-auditoria td.sem-registro {
    display: none;
  }

  .tabela-auditoria tr.linha-detalhes {
    display: block;
  }

  .tabela-auditoria tr.linha-detalhes td {
    display: block;
  }
}

/* Contas a Pagar: boleto pendente */

.aviso-boletos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.aviso-boletos.urgente {
  background: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

tr.linha-alerta td {
  background: var(--cor-erro-fundo);
}

tr.linha-alerta td:first-child {
  box-shadow: inset 3px 0 0 var(--cor-erro);
}

/* Compras: boletos recebidos por fornecedor */

.lista-boletos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-boletos label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  cursor: pointer;
}

.lista-boletos input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.lista-boletos span {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lista-boletos small {
  color: var(--cor-texto-suave);
}

.lista-boletos em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
}

.lista-boletos input:checked ~ em {
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
}

/* Folha de compra (prancheta): colunas em branco para anotar à caneta */

.folha-compra td {
  height: 38px;
}

.folha-compra td small {
  color: var(--cor-texto-suave);
}

.folha-compra .col-escrever {
  min-width: 150px;
}

.folha-compra .col-escrever-curto {
  min-width: 80px;
}

.folha-compra .col-boleto {
  white-space: nowrap;
  font-size: 0.8rem;
}

.folha-compra tbody td:not(.col-qtd):not(:first-child):not(.col-boleto) {
  border-left: 1px solid var(--cor-borda);
}

.folha-compra tfoot td {
  font-weight: 700;
}

/* O total fecha a lista e as linhas extras vêm depois dele (tfoot no meio do
   corpo, na ordem do HTML, também na tela). */
#imp-folha .folha-compra tfoot {
  display: table-row-group;
}

.folha-compra .linha-extras-titulo td {
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--cor-sucesso-fundo);
}

.folha-compra thead th {
  text-align: center;
  vertical-align: middle;
}

/* Quantidades, total e boleto centralizados; o nome do produto fica à esquerda. */
.folha-compra .col-qtd,
.folha-compra .col-boleto {
  text-align: center;
}

.caixa-marcar {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -2px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

@media print {
  .folha-compra td,
  .folha-compra th {
    border: 1px solid #888 !important;
    padding: 0 4px !important;
  }

  /* Folha compacta para caber em 2 páginas (altura da linha vem do JS). */
  #imp-folha {
    font-size: 8pt;
  }

  #imp-folha .folha-cabecalho {
    padding-bottom: 4px;
  }

  #imp-folha .folha-empresa {
    font-size: 11pt;
  }

  #imp-folha .folha-titulo strong {
    font-size: 12pt;
  }

  #imp-folha .folha-dados {
    margin: 4px 0 6px;
    gap: 0 16px;
    font-size: 7.5pt;
  }

  #imp-folha .folha-compra {
    font-size: 8pt;
  }

  #imp-folha .folha-compra th {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  #imp-folha .folha-compra td:first-child {
    white-space: nowrap;
  }

  /* O total sai só no fim da lista, não repetido no pé de cada página. */
  #imp-folha .folha-compra tfoot {
    display: table-row-group;
  }

  #imp-folha .folha-compra .col-boleto {
    font-size: 7.5pt;
  }

  #imp-folha .caixa-marcar {
    width: 9px;
    height: 9px;
  }

  #imp-folha .folha-dados {
    display: flex;
    flex-wrap: wrap;
  }

  #imp-folha .folha-compra .col-escrever {
    min-width: 30mm;
  }

  #imp-folha .folha-compra .col-escrever-curto {
    min-width: 15mm;
  }

  #imp-folha .folha-observacoes {
    margin-top: 6px;
  }

  #imp-folha .folha-observacoes span {
    height: 14px;
  }

  #imp-folha .folha-observacoes span:nth-of-type(n + 2) {
    display: none;
  }

  #imp-folha .folha-assinaturas {
    margin-top: 26px;
  }

  #imp-folha .folha-rodape {
    margin-top: 6px;
  }
}

/* Campo com botão ao lado (ex.: Fornecedor + "+" na ficha do produto) */

.campo-com-botao {
  display: flex;
  gap: 8px;
}

.campo-com-botao select,
.campo-com-botao input {
  flex: 1 1 auto;
  min-width: 0;
}

.campo-com-botao button {
  flex: 0 0 44px;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

/* Grades produto × loja: o nome do produto fica parado ao rolar para o lado,
   para não lançar quantidade na linha errada. */
.tabela-grade th:first-child,
.tabela-grade td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--cor-superficie);
  text-align: left;
  box-shadow: 1px 0 0 var(--cor-borda);
}

/* Celular */

@media (max-width: 640px) {
  /* Barra de ações das listas: grade de 3 colunas em vez de 4 ou 5 linhas
     de botões ocupando metade da tela. */
  .card.toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  /* Texto quebra em duas linhas em vez de cortar ("Enviar no WhatsApp"). */
  .card.toolbar > button {
    min-width: 0;
    min-height: 44px;
    padding: 6px 4px;
    font-size: 0.8rem;
    line-height: 1.15;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }

  /* Tabelas: uma linha por registro (rolando para o lado dentro do cartão)
     em vez de células quebradas em 3 ou 4 linhas. */
  .tabela-scroll th,
  .tabela-scroll td {
    white-space: nowrap;
  }

  .tabela-scroll td {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Compras no modo por produto: o topo só com o essencial, sobra tela para a lista. */
  body.compra-modo-produto main > p.dica,
  body.compra-modo-produto .resumo-total-registros {
    display: none;
  }
}

/* Impressão: relatório limpo, sem telas do sistema (menu, botões, controles de formulário) */

.cabecalho-impressao {
  display: none;
}

@media print {
  #nav,
  .botao-menu,
  .overlay-menu,
  .card-oculta-impressao,
  #titulo-pagina,
  main > p.dica,
  button {
    display: none !important;
  }

  body {
    background: white;
  }

  main {
    margin-left: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .cabecalho-impressao {
    display: block;
    margin-bottom: 16px;
  }

  .cabecalho-impressao h1 {
    font-size: 1.2rem;
    margin: 0 0 8px;
  }

  .cabecalho-impressao-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-size: 0.85rem;
  }

  .card {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
  }

  table {
    border-collapse: collapse;
  }

  th, td {
    color: black !important;
    border: 1px solid #ccc;
  }

  .tabela-scroll {
    overflow: visible;
  }

  input, select {
    border: none !important;
    background: transparent !important;
    color: black !important;
    padding: 2px 0 !important;
    -webkit-appearance: none;
    appearance: none;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }

  body.imprimindo-pedido > :not(#modal-impressao),
  .modal-impressao-topo,
  #modal-impressao::backdrop {
    display: none !important;
  }

  body.imprimindo-pedido {
    background: white;
  }

  .modal-local.modal-impressao[open] {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    border: none;
    box-shadow: none;
    overflow: visible;
    background: white;
    color: black;
  }

  .modal-impressao-corpo {
    overflow: visible;
    padding: 0;
    background: white;
  }

  /* No tema escuro a folha usa fundo escuro e texto claro: no papel tudo
     precisa sair preto no branco, seja qual for o tema da tela. */
  .folha-relatorio,
  .folha-relatorio * {
    background: white !important;
    color: black !important;
  }

  .folha-relatorio {
    border: none;
    box-shadow: none;
    padding: 0;
    color: black;
  }

  .folha-cabecalho {
    border-bottom-color: black;
  }

  .folha-empresa-dados,
  .folha-titulo span,
  .folha-rodape {
    color: #444 !important;
  }

  .folha-tabela th {
    background: #e8e8e8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .folha-tabela tr {
    break-inside: avoid;
  }

  /* Valor/Fornecedor: o que foi digitado sai impresso; o resto fica como
     espaço em branco dentro da célula, para anotar à caneta. */
  .folha-tabela input.campo-anotacao {
    border-bottom: none !important;
  }

  .folha-observacoes span {
    border-bottom-color: #999;
  }

  .folha-assinaturas span {
    border-top-color: black;
  }

  .folha-observacoes,
  .folha-assinaturas {
    break-inside: avoid;
  }
}

/* Conferência: lista de entregas e contagem às cegas (pensada para o celular) */
.conferencia-entregas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conferencia-entrega {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  cursor: pointer;
}

.conferencia-entrega:hover {
  background: var(--cor-fundo);
}

.conferencia-itens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.conferencia-item {
  display: grid;
  grid-template-columns: 1fr 130px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.conferencia-item.divergente {
  border-color: var(--cor-erro);
  box-shadow: 0 0 0 1px var(--cor-erro) inset;
}

.conferencia-qtd {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.1rem;
  text-align: right;
}

.conferencia-divergencia {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.conferencia-divergencia[hidden] {
  display: none;
}

.conferencia-divergencia select,
.conferencia-divergencia input {
  flex: 1 1 200px;
}

.conferencia-confirmar {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .conferencia-item {
    grid-template-columns: 1fr 110px;
  }
}

/* Conferência e Conciliação em grade: uma linha por entrega */
.conferencia-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.conferencia-topo .titulo-grupo {
  margin: 0;
}

.grade-conferencia button,
.grade-conciliacao .badge {
  white-space: nowrap;
}

.grade-conciliacao .linha-entrega {
  cursor: pointer;
}

.grade-conciliacao .linha-entrega:hover,
.grade-conciliacao .linha-entrega.aberta {
  background: var(--cor-fundo);
}

.grade-conciliacao .seta {
  width: 18px;
  color: var(--cor-texto-suave, #777);
}

.grade-conciliacao .linha-detalhe > td {
  padding: 4px 8px 14px 28px;
  background: var(--cor-fundo);
}

.tabela-detalhe {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabela-detalhe th,
.tabela-detalhe td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
}

.tabela-detalhe tr.com-diferenca td {
  font-weight: 600;
}

.grade-conferencia,
.grade-conciliacao {
  width: 100%;
  border-collapse: collapse;
}

.grade-conferencia th,
.grade-conferencia td,
.grade-conciliacao th,
.grade-conciliacao td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
  vertical-align: middle;
}

.grade-conferencia th,
.grade-conciliacao th {
  font-size: 0.82rem;
  color: var(--cor-texto-suave, #666);
  font-weight: 600;
}

.grade-conferencia .c-acao {
  text-align: right;
}

.so-cards {
  display: none;
}

/* Alternador Grade / Cards (padrão do sistema, ver alternadorVisualizacao em api.js) */
.alternador-visualizacao {
  display: inline-flex;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.alternador-visualizacao button {
  margin: 0;
  padding: 6px 12px;
  border: none;
  border-radius: 0;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 0.85rem;
  cursor: pointer;
}

.alternador-visualizacao button + button {
  border-left: 1px solid var(--cor-borda);
}

.alternador-visualizacao button[aria-pressed="true"] {
  background: var(--cor-primaria);
  color: #fff;
}

.barra-visualizacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

/* Modo Cards: cada linha vira um cartão compacto, em colunas que se ajustam
   à largura (1 no celular, várias no computador). */
.modo-cards .grade-conferencia thead,
.modo-cards .grade-conciliacao thead,
.modo-cards .grade-conciliacao .seta {
  display: none;
}

.modo-cards .grade-conferencia,
.modo-cards .grade-conciliacao {
  display: block;
}

.modo-cards .grade-conferencia tbody,
.modo-cards .grade-conciliacao tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.modo-cards .grade-conferencia td,
.modo-cards .grade-conciliacao td {
  padding: 0;
  border: none;
}

.modo-cards .so-cards {
  display: inline;
}

/* Compras: cada compra ou pedido vira um cartão. */
.modo-cards .grade-compras thead {
  display: none;
}

.modo-cards .grade-compras {
  display: block;
}

.modo-cards .grade-compras tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 10px;
}

.modo-cards .grade-compras tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  grid-template-areas:
    "sel codigo status"
    "sel datac lanc"
    "sel resp valor";
  gap: 6px 10px;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-size: 0.85rem;
}

.modo-cards .grade-compras td {
  padding: 0;
  border: none;
}

.modo-cards .grade-compras td.sem-valor {
  display: none;
}

.modo-cards .grade-compras .badge {
  white-space: normal;
  text-align: center;
}

.modo-cards.tabela-scroll {
  overflow-x: visible;
}

.modo-cards .grade-compras .c-sel { grid-area: sel; }
.modo-cards .grade-compras .c-codigo { grid-area: codigo; font-weight: 700; }
.modo-cards .grade-compras .c-status { grid-area: status; justify-self: end; }
.modo-cards .grade-compras .c-datac { grid-area: datac; }
.modo-cards .grade-compras .c-lanc { grid-area: lanc; text-align: right; }
.modo-cards .grade-compras .c-valor { grid-area: valor; justify-self: end; font-weight: 700; }
.modo-cards .grade-compras .c-resp { grid-area: resp; color: var(--cor-texto-suave, #666); }

.modo-cards .grade-compras .c-datac::before,
.modo-cards .grade-compras .c-lanc::before {
  content: attr(data-rotulo);
  display: block;
  font-size: 0.7rem;
  color: var(--cor-texto-suave, #666);
}

.modo-cards .grade-conferencia tr,
.modo-cards .grade-conciliacao tr.linha-entrega {
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  font-size: 0.85rem;
}

.modo-cards .grade-conferencia tr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "loja compra acao"
    "data produtos acao"
    "situacao situacao acao";
  column-gap: 10px;
  row-gap: 3px;
}

.modo-cards .grade-conferencia .c-loja { grid-area: loja; }
.modo-cards .grade-conferencia .c-compra { grid-area: compra; color: var(--cor-texto-suave, #666); }
.modo-cards .grade-conferencia .c-data { grid-area: data; color: var(--cor-texto-suave, #666); }
.modo-cards .grade-conferencia .c-produtos { grid-area: produtos; color: var(--cor-texto-suave, #666); }
.modo-cards .grade-conferencia .c-situacao { grid-area: situacao; }
.modo-cards .grade-conferencia .c-acao { grid-area: acao; align-self: center; }

.modo-cards .grade-conciliacao tr.linha-entrega {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "loja loja situacao situacao"
    "data data produtos produtos"
    "m1 m2 m3 m4"
    "detalhe detalhe detalhe detalhe";
  gap: 4px 6px;
}

.modo-cards .grade-conciliacao tr.linha-entrega.aberta {
  grid-column: 1 / -1;
}

.modo-cards .grade-conciliacao .c-loja { grid-area: loja; }
.modo-cards .grade-conciliacao .c-compra { grid-area: loja; justify-self: end; margin-right: 4px; color: var(--cor-texto-suave, #666); }
.modo-cards .grade-conciliacao .c-situacao { grid-area: situacao; justify-self: end; }
.modo-cards .grade-conciliacao .c-data { grid-area: data; color: var(--cor-texto-suave, #666); }
.modo-cards .grade-conciliacao .c-produtos { grid-area: produtos; justify-self: end; color: var(--cor-texto-suave, #666); }
.modo-cards .grade-conciliacao .c-detalhe { grid-area: detalhe; }

.modo-cards .grade-conciliacao .c-metrica {
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  background: var(--cor-fundo);
  border-radius: 6px;
}

.modo-cards .grade-conciliacao .c-metrica::before {
  content: attr(data-rotulo);
  font-size: 0.7rem;
  color: var(--cor-texto-suave, #666);
}

/* Detalhe dentro do cartão: um produto por bloco, números em linha. */
.modo-cards .tabela-detalhe thead {
  display: none;
}

.modo-cards .tabela-detalhe,
.modo-cards .tabela-detalhe tbody {
  display: block;
}

.modo-cards .tabela-detalhe tr {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--cor-borda);
}

.modo-cards .grade-conciliacao .tabela-detalhe td {
  padding: 0;
  border: none;
  font-size: 0.8rem;
}

.modo-cards .tabela-detalhe td.d-produto {
  flex-basis: 100%;
  font-weight: 600;
}

.modo-cards .tabela-detalhe td.d-vazio {
  display: none;
}

.modo-cards .tabela-detalhe td[data-rotulo]::before {
  content: attr(data-rotulo) ": ";
  color: var(--cor-texto-suave, #666);
  font-weight: 400;
}

.modo-cards .conciliacao-detalhe {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--cor-borda);
}

/* Conciliação: o quadro que está filtrando a grade fica marcado. */
.cartao-resumo.selecionado {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
}

/* Permissões por usuário: uma linha por pessoa, com a origem do acesso. */
.lista-acesso-usuarios {
  display: flex;
  flex-direction: column;
}

.acesso-usuario {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--cor-borda);
  cursor: pointer;
}

.acesso-usuario input {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .acesso-usuario {
    grid-template-columns: auto 1fr;
  }

  .acesso-usuario-origem {
    grid-column: 2;
  }
}

/* Painel do Gestor: pensado primeiro para o celular. */
.painel-gestor h1 {
  margin-bottom: 2px;
}

.painel-filtros {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
  padding: 8px 0;
  background: var(--cor-fundo);
}

.painel-filtros select,
.painel-filtros input {
  flex: 1 1 160px;
  min-width: 0;
}

.painel-datas {
  display: flex;
  gap: 8px;
  flex: 1 1 100%;
}

.painel-datas[hidden] {
  display: none;
}

.painel-alertas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.painel-alertas h2 {
  margin: 0 0 2px;
  font-size: 1rem;
}

.alerta-painel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--raio);
  border-left: 5px solid var(--cor-aviso);
  background: var(--cor-aviso-fundo);
  color: var(--cor-texto);
  text-decoration: none;
}

.alerta-painel span {
  font-size: 0.85rem;
  color: var(--cor-texto-suave, #555);
}

.alerta-painel.alto {
  border-left-color: var(--cor-erro);
  background: var(--cor-erro-fundo);
}

.alerta-painel.ok {
  border-left-color: var(--cor-sucesso, #1f6f43);
  background: var(--cor-superficie);
}

.painel-quadros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.quadro-painel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-decoration: none;
  box-shadow: 0 1px 4px var(--cor-sombra);
}

.quadro-painel.alerta {
  background: var(--cor-aviso-fundo);
}

.quadro-painel.erro {
  background: var(--cor-erro-fundo);
}

.quadro-painel.erro .quadro-valor {
  color: var(--cor-erro);
}

.quadro-rotulo,
.quadro-extra {
  font-size: 0.8rem;
  color: var(--cor-texto-suave, #666);
}

.quadro-valor {
  font-size: 1.45rem;
  line-height: 1.2;
}

.painel-graficos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.painel-graficos .card {
  margin: 0;
}

.painel-grafico-largo {
  grid-column: 1 / -1;
}

.painel-graficos .barra-linha-valor {
  width: auto;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.painel-graficos .barra-linha-valor small {
  font-weight: 400;
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  /* Quadros deslizam para o lado: os números ficam grandes e legíveis. */
  .painel-quadros {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  .quadro-painel {
    flex: 0 0 64%;
    scroll-snap-align: start;
  }

  .painel-graficos {
    grid-template-columns: 1fr;
  }

  .painel-graficos .barra-linha-rotulo {
    width: 96px;
  }
}

/* Sino de alertas no topo (para quem tem o Painel do Gestor). */
.sino-wrapper {
  position: relative;
}

.topbar-sino {
  position: relative;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 1rem;
  line-height: 1.2;
  box-shadow: 0 1px 4px var(--cor-sombra);
  cursor: pointer;
}

.topbar-sino:hover {
  background: var(--cor-fundo);
}

.sino-contador {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #d97706;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.sino-contador.urgente {
  background: var(--cor-erro);
}

.sino-contador[hidden] {
  display: none;
}

.sino-lista {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 200;
  width: min(380px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  box-shadow: 0 8px 24px var(--cor-sombra);
}

.sino-lista[hidden] {
  display: none;
}

.sino-cabecalho {
  font-weight: 700;
}

@media (max-width: 640px) {
  .topbar-sino {
    padding: 8px 10px;
  }

  .sino-lista {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 64px;
    width: auto;
  }
}

/* Painel do Gestor em dois blocos: Financeiro (R$) e Volume de compras. */
.painel-secao {
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: calc(var(--raio) + 4px);
  background: var(--cor-fundo);
}

.painel-secao-titulo {
  margin: 0 0 12px;
  font-size: 1.2rem;
}

.painel-secao-titulo small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--cor-texto-suave, #666);
}

.painel-secao .card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.painel-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 24px;
}

.produto-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cor-borda);
}

.produto-posicao {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.produto-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .painel-secao {
    padding: 12px 10px;
    margin-left: -6px;
    margin-right: -6px;
  }
}

/* Publicação com o sistema em uso: "Reconectando..." e aviso de versão nova. */
.aviso-reconexao {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--cor-sombra);
}

.aviso-reconexao[hidden] {
  display: none;
}

.aviso-versao {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(560px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-left: 5px solid var(--cor-primaria);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 0.9rem;
  box-shadow: 0 8px 24px var(--cor-sombra);
}

.aviso-versao span {
  flex: 1;
}

.aviso-versao button {
  flex-shrink: 0;
  margin: 0;
}

/* Celular: tudo cabe na largura da tela, sem rolar para o lado. */
@media (max-width: 640px) {
  /* Painel do Gestor: quadros em 2 colunas, todos visíveis. */
  .painel-quadros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 8px;
    padding-bottom: 0;
  }

  .quadro-painel {
    flex: none;
    padding: 10px 10px 12px;
    gap: 2px;
    min-width: 0;
  }

  .quadro-painel:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .quadro-valor {
    font-size: 1.12rem;
    overflow-wrap: anywhere;
  }

  .quadro-rotulo {
    font-size: 0.74rem;
  }

  .quadro-extra {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  /* Abas do Resumo de Compras: grade 2 x 2 em vez de passar da tela. */
  .relatorio-abas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .relatorio-abas button {
    white-space: normal;
    padding: 8px 6px;
    font-size: 0.85rem;
    line-height: 1.2;
  }

  /* Filtros: dois campos por linha, ocupando metade da altura. */
  form.form-inline.filtros-celular {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
  }

  form.form-inline.filtros-celular .campo {
    margin: 0;
    min-width: 0;
  }

  form.form-inline.filtros-celular .campo-largo {
    grid-column: 1 / -1;
  }

  .filtros-celular input,
  .filtros-celular select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .filtros-celular input[type="date"] {
    font-size: 0.9rem;
    padding-left: 8px;
    padding-right: 6px;
  }
}

/* Contas a Pagar em Cards: uma conta por cartão, tudo visível sem rolar. */
.modo-cards .grade-contas thead {
  display: none;
}

.modo-cards .grade-contas,
.modo-cards .grade-contas tbody {
  display: block;
}

.modo-cards .grade-contas tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 10px;
}

.modo-cards .grade-contas tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "fornecedor valor"
    "vencimento status"
    "forma boleto"
    "compra compra"
    "acoes acoes";
  gap: 6px 10px;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
}

.modo-cards .grade-contas tr.linha-alerta {
  border-color: var(--cor-erro);
  background: var(--cor-erro-fundo);
  box-shadow: inset 5px 0 0 var(--cor-erro);
  padding-left: 16px;
}

/* No cartão o destaque é do cartão inteiro, não de cada pedaço. */
.modo-cards .grade-contas tr.linha-alerta td {
  background: transparent;
  box-shadow: none;
}

.modo-cards .grade-contas td {
  display: block;
  padding: 0;
  border: none;
  white-space: normal;
  min-width: 0;
  font-size: 0.88rem;
}

.modo-cards .grade-contas td[data-rotulo]::before {
  content: attr(data-rotulo) ": ";
  color: var(--cor-texto-suave, #666);
}

.modo-cards .grade-contas .c-fornecedor { grid-area: fornecedor; overflow-wrap: anywhere; }
.modo-cards .grade-contas .c-valor { grid-area: valor; justify-self: end; font-weight: 700; font-size: 1rem; }
.modo-cards .grade-contas .c-vencimento { grid-area: vencimento; font-weight: 600; }
.modo-cards .grade-contas .c-status { grid-area: status; justify-self: end; }
.modo-cards .grade-contas .c-forma { grid-area: forma; }
.modo-cards .grade-contas .c-boleto { grid-area: boleto; justify-self: end; }
.modo-cards .grade-contas .c-compra { grid-area: compra; color: var(--cor-texto-suave, #666); }

.modo-cards .grade-contas .c-acoes {
  grid-area: acoes;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cor-borda);
}

.modo-cards .grade-contas .c-acoes button {
  margin: 0;
}

.modo-cards .grade-contas .c-acoes button:not(.botao-icone) {
  flex: 1 1 auto;
}

/* Teste grátis: faixa no topo de todas as telas (nav.js, avisoTeste). */
.aviso-teste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-left: 5px solid var(--cor-info);
  border-radius: var(--raio);
  background: var(--cor-info-fundo);
  color: var(--cor-texto);
}

.aviso-teste div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aviso-teste span {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.aviso-teste a {
  padding: 8px 14px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.aviso-teste-fim {
  border-left-color: var(--cor-aviso);
  background: var(--cor-aviso-fundo);
}