:root {
  --verde: #1a8f4c;
  --verde-bg: #e7f7ee;
  --vermelho: #c0392b;
  --vermelho-bg: #fdecea;
  --azul: #1f4e79;
  --azul-bg: #eaf1f8;
  --texto: #222;
  --texto-suave: #666;
  --linha: #e2e2e2;
  --fundo: #f7f7f8;
}

* { box-sizing: border-box; }

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

/* ===== Sidebar ===== */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: #16324a;
  color: #fff;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.sidebar.aberta {
  transform: translateX(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.sidebar-header, .sidebar-rodape { flex-shrink: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  background: none;
  color: rgba(255,255,255,0.8);
  font-size: 15px;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
}

.nav-item.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-weight: 700;
}

.overlay-sidebar {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
}

.overlay-sidebar.aberta {
  display: block;
}

.topbar {
  background: var(--azul);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-title {
  flex: 1;
}

.topbar-title strong {
  display: block;
  font-size: 15px;
}

.topbar-title span {
  display: block;
  font-size: 12px;
  opacity: 0.85;
}

.topbar-acoes {
  display: flex;
  gap: 8px;
}

.icon-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 18px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

.pdv-atual {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 12px;
}

.pdv-atual select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
  background: #fff;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
}

.tab-btn.active {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}

.tabs-mini .tab-btn {
  padding: 8px;
  font-size: 13px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.card {
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.card-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.card-valor {
  display: block;
  font-size: 15px;
  font-weight: 700;
}

.card-receita { background: var(--verde-bg); color: var(--verde); }
.card-despesa { background: var(--vermelho-bg); color: var(--vermelho); }
.card-lucro { background: var(--azul-bg); color: var(--azul); }

.acoes-rapidas {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.btn-receita { background: var(--verde); color: #fff; }
.btn-despesa { background: var(--vermelho); color: #fff; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-secundario { background: #eee; color: var(--texto); }

.secao-titulo {
  font-size: 14px;
  color: var(--texto-suave);
  margin: 0 0 10px;
}

.lista-lancamentos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lancamento-item {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lancamento-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lancamento-categoria {
  font-weight: 600;
  font-size: 14px;
}

.lancamento-meta {
  font-size: 12px;
  color: var(--texto-suave);
}

.lancamento-valor {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.valor-receita { color: var(--verde); }
.valor-despesa { color: var(--vermelho); }

.lancamento-acoes {
  display: flex;
  gap: 4px;
}

.lancamento-acoes button {
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
}

.vazio {
  text-align: center;
  color: var(--texto-suave);
  font-size: 13px;
  padding: 24px 0;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  align-items: flex-end;
  justify-content: center;
  z-index: 250;
}

.modal-overlay.aberto {
  display: flex;
}

.modal {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  margin-top: 0;
}

.modal label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 4px;
}

.modal input,
.modal select,
.modal textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

.modal-acoes {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.form-inline {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.form-inline input {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 14px;
}

.lista-categorias {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.categoria-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fundo);
  padding: 8px 10px;
  border-radius: 8px;
}

.categoria-item span {
  font-size: 14px;
}

.categoria-item .acoes button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  margin-left: 6px;
}

/* ===== Dashboard ===== */

.dash-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-card {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px;
}

.dash-card h3 {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--texto-suave);
  font-weight: 700;
}

.chart-wrap {
  position: relative;
  height: 220px;
}

/* ===== Login ===== */

.tela-login,
.tela-carregando {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(160deg, #16324a, var(--azul));
  z-index: 300;
}

.tela-carregando {
  display: flex;
  color: #fff;
  font-size: 15px;
}

.tela-login.aberta { display: flex; }

.login-box {
  background: #fff;
  width: 100%;
  max-width: 360px;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.login-marca {
  text-align: center;
  margin-bottom: 12px;
}

.login-marca strong {
  display: block;
  font-size: 22px;
  color: var(--azul);
}

.login-marca span {
  font-size: 13px;
  color: var(--texto-suave);
}

.login-box label {
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 4px;
}

.login-box input {
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
}

.login-box .btn { margin-top: 16px; }

.login-erro {
  color: var(--vermelho);
  font-size: 13px;
  min-height: 18px;
  margin-top: 8px;
}

.login-erro.ok { color: var(--verde); }

.link-btn {
  background: none;
  border: none;
  color: var(--azul);
  font-size: 13px;
  margin-top: 12px;
  cursor: pointer;
  text-decoration: underline;
}

/* ===== Usuário logado / sair ===== */

.sidebar-rodape {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.usuario-logado {
  padding: 8px 14px;
}

.usuario-logado strong {
  display: block;
  font-size: 14px;
}

.usuario-logado span {
  font-size: 12px;
  opacity: 0.7;
}

#btnSair { width: 100%; }

/* Esconde controles de administrador para operadores */
body:not(.eh-admin) .so-admin { display: none !important; }

/* ===== Usuários ===== */

.usuario-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 6px;
  background: var(--azul-bg);
  color: var(--azul);
}

.usuario-tag.diarista {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

.usuario-tag.inativo {
  background: var(--vermelho-bg);
  color: var(--vermelho);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--fundo);
  border-radius: 8px;
  padding: 10px;
}

.modal .check-linha,
.checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.modal .check-linha { margin-top: 14px; }

.modal input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
}

.dica {
  font-size: 12px;
  color: var(--texto-suave);
  margin: 6px 0 0;
}

/* ===== Layout largo (computador) ===== */

@media (min-width: 800px) {
  .container { max-width: 1000px; }
  .dash-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .modal-overlay { align-items: center; }
  .modal { border-radius: 16px; }
  .sidebar { transform: translateX(0); }
  .main-shell { margin-left: 240px; }
  #btnAbrirSidebar, #btnFecharSidebar { display: none; }
  .overlay-sidebar.aberta { display: none; }
}

/* ===== Formulários ===== */

.linha-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.linha-2 > div { min-width: 0; }

.check-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--texto-suave);
  white-space: nowrap;
}

.espaco-topo { margin-top: 24px; }

/* ===== Cards extras ===== */

.cards-4 { grid-template-columns: repeat(2, 1fr); }
.cards-1 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .cards-4 { grid-template-columns: repeat(4, 1fr); }
}
.card-neutro { background: #eef0f3; color: #3b4452; }

.btn-receber { background: var(--verde); color: #fff; }
.btn-pagar { background: var(--vermelho); color: #fff; }

/* ===== Navegação de mês ===== */

.mes-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}

.mes-nav strong {
  min-width: 170px;
  text-align: center;
  font-size: 15px;
}

.mes-nav button {
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 20px;
  cursor: pointer;
  color: var(--azul);
}

.tabs-rolagem { overflow-x: auto; }
.tabs-rolagem .tab-btn { white-space: nowrap; }

/* ===== Filtros ===== */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}

.filtros select,
.filtros input[type="search"] {
  flex: 1 1 160px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}

/* ===== Situação (status) ===== */

.status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 6px;
  vertical-align: middle;
}

.status-pago { background: var(--verde-bg); color: var(--verde); }
.status-aberto { background: #fff4d6; color: #8a6100; }
.status-vencido { background: var(--vermelho-bg); color: var(--vermelho); }

.titulo-item .lancamento-info { flex: 1; }

.btn-baixar {
  border: 1px solid var(--verde) !important;
  color: var(--verde);
  border-radius: 8px;
  font-size: 12px !important;
  font-weight: 700;
  padding: 4px 8px !important;
  white-space: nowrap;
}

.conta-saldo-neg { color: var(--vermelho); }
.conta-saldo-pos { color: var(--azul); }

/* ===== DRE ===== */

.btn-pequeno {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 13px;
  border-radius: 8px;
}

.espaco-flex { flex: 1; }

.tabela-dre td:first-child { min-width: 220px; }
.tabela-dre .zero { color: #bbb; }
.tabela-dre td.pct { color: var(--texto-suave); font-size: 12px; }
.tabela-dre tr.dre-grupo td { font-weight: 700; background: #fafbfc; }
.tabela-dre tr.dre-categoria td { color: var(--texto-suave); }
.tabela-dre tr.dre-categoria td:first-child { padding-left: 28px; }
.tabela-dre tr.dre-subtotal td { font-weight: 700; background: var(--azul-bg); color: var(--azul); }
.tabela-dre tr.dre-final td { font-weight: 800; background: var(--azul); color: #fff; font-size: 14px; }
.tabela-dre tr.dre-final td.valor-despesa { color: #ffd2cc; }
.tabela-dre tr.dre-margem td { font-style: italic; color: var(--texto-suave); }

/* Categoria com grupo do DRE */
.categoria-item .grupo-dre {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: #fff;
  max-width: 190px;
}
.categoria-item .cat-nome { flex: 1; }

/* ===== Impressão ===== */

@media print {
  .sidebar, .topbar, .nao-imprimir, .faixa-teste, .overlay-sidebar { display: none !important; }
  .main-shell { margin: 0 !important; }
  .container { max-width: none; padding: 0; }
  body { background: #fff; }
  .tabela-wrap { border: none; overflow: visible; }
  .tabela { font-size: 11px; }
  .tabela-dre tr.dre-final td { color: #000; background: #dde6f0; }
}

/* ===== Cadastros ===== */

.resumo-contato { color: var(--azul); font-weight: 600; }
.modal input[type="file"] { border: none; padding: 8px 0; }

/* ===== Compras ===== */

.status-enviado { background: var(--azul-bg); color: var(--azul); }
.sub-valor { display: block; font-size: 11px; font-weight: 400; color: var(--texto-suave); }
.modal-largo { max-width: 760px; }
.tabela-compacta { margin-top: 4px; }
.tabela-compacta input,
.tabela-cotacao input,
.tabela-cotacao select,
.tabela-compacta select {
  width: 100%;
  min-width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.input-qtd { max-width: 90px; text-align: right; }
.melhor-preco { background: var(--verde-bg); color: var(--verde); font-weight: 700; }
.btn-icone { border: none; background: none; cursor: pointer; font-size: 14px; color: var(--texto-suave); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { background: #fff; border: 1px solid var(--linha); border-radius: 99px; padding: 6px 12px; font-size: 13px; }
.chip-total { background: var(--azul); color: #fff; border-color: var(--azul); }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sugestao {
  border: 1px solid var(--azul);
  background: var(--azul-bg);
  color: var(--azul);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.sugestao small { opacity: 0.7; }
.rotulo-modal { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.campo-modal { width: 100%; }
.tabela-cotacao td:first-child { min-width: 160px; white-space: normal; }

/* ===== Conciliação e relatórios ===== */

.conc-item { flex-wrap: wrap; }
.conc-item .lancamento-info { flex: 1 1 260px; }
.conc-sugestao {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--verde);
  border-radius: 6px;
  font-size: 12px;
  max-width: 100%;
  background: var(--verde-bg);
}
.conc-acoes { gap: 6px; }
.btn-criar { border-color: var(--azul) !important; color: var(--azul); }
.filtros input[type="month"],
.filtros input[type="file"] {
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}
.filtros .sem-margem { margin: 0; }

/* ===== Vendas: mesas e comandas ===== */

body.eh-garcom .nao-garcom { display: none !important; }
body.sem-rolagem { overflow: hidden; }
.sem-margem-topo { margin-top: 0; margin-bottom: 12px; }
.espaco-topo-p { margin-top: 10px; }
.vendas-topo select { flex: 0 1 240px; }

.grade-mesas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.mesa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 88px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--linha);
  border-left: 5px solid var(--verde);
  background: #f3fbf6;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--texto);
}
.mesa strong { font-size: 17px; }
.mesa-status { font-size: 11px; font-weight: 700; color: var(--verde); }
.mesa-ocupada { border-left-color: #e0a319; background: #fff8e6; }
.mesa-ocupada .mesa-status { color: #8a6100; }
.mesa-total { font-weight: 700; color: var(--azul); }
.mesa-cliente { font-size: 12px; color: var(--texto-suave); }

/* Tela da conta (tela cheia) */
.tela-conta {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: var(--fundo);
  display: none;
  flex-direction: column;
}
.tela-conta.aberta { display: flex; }

.conta-topo {
  background: var(--azul);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.conta-topo strong { font-size: 16px; white-space: nowrap; }
.conta-topo input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
}

.conta-alternar { display: none; }

.conta-corpo {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  min-height: 0;
}

.conta-cardapio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}
.conta-cardapio input[type="search"] {
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  font-size: 15px;
}
.conta-categorias {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  flex: none;
}
.chip-cat {
  flex: none;
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: 99px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.chip-cat.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }

.conta-grade {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  align-content: start;
}
.item-cardapio {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.item-cardapio:active { background: var(--azul-bg); }
.item-nome { font-size: 13px; font-weight: 600; color: var(--texto); }
.item-preco { font-size: 14px; font-weight: 700; color: var(--verde); }

.conta-lado {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--linha);
  min-height: 0;
}
.conta-itens { flex: 1; overflow-y: auto; padding: 8px 12px; }
.conta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
}
.conta-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.conta-item-info small { color: var(--texto-suave); font-size: 11px; }
.conta-item-valor { font-weight: 700; font-size: 14px; white-space: nowrap; }
.conta-item-acoes { display: flex; gap: 4px; }
.conta-item-acoes button {
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: 6px;
  min-width: 28px;
  height: 28px;
  cursor: pointer;
}
.conta-item.pendente { background: #fffbea; }
.conta-item.cancelado { opacity: 0.45; text-decoration: line-through; }

.conta-totais { padding: 8px 12px; border-top: 1px solid var(--linha); font-size: 14px; }
.conta-totais > div { display: flex; justify-content: space-between; padding: 2px 0; }
.conta-total { font-size: 18px; font-weight: 800; color: var(--azul); }
.conta-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 14px;
}
.conta-acoes .btn { padding: 12px 8px; font-size: 14px; }
.pag-falta { font-size: 16px; margin: 10px 0; }

@media (max-width: 800px) {
  .conta-alternar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-bottom: 1px solid var(--linha);
  }
  .conta-alternar button {
    border: none;
    background: none;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--texto-suave);
    font-family: inherit;
  }
  .tela-conta[data-lado="cardapio"] #btnLadoCardapio,
  .tela-conta[data-lado="conta"] #btnLadoConta { color: var(--azul); border-bottom: 3px solid var(--azul); }
  .conta-corpo { grid-template-columns: 1fr; }
  .tela-conta[data-lado="cardapio"] .conta-lado { display: none; }
  .tela-conta[data-lado="conta"] .conta-cardapio { display: none; }
  .conta-lado { border-left: none; }
  .conta-grade { grid-template-columns: repeat(2, 1fr); }
  .conta-topo strong { font-size: 14px; }
}

/* ===== Cupom / ticket (impressora térmica 80 mm) ===== */

#areaImpressao { display: none; }

.cupom { font-family: 'Courier New', monospace; font-size: 12px; color: #000; width: 72mm; }
.cupom hr { border: none; border-top: 1px dashed #000; margin: 6px 0; }
.cupom-centro { text-align: center; }
.cupom-linha { display: flex; justify-content: space-between; gap: 8px; }
.cupom-total { font-weight: 700; font-size: 14px; }
.ticket-titulo { font-size: 20px; font-weight: 800; margin: 4px 0; }
.ticket-item { font-size: 16px; margin: 4px 0; }
.ticket-obs { font-size: 14px; font-weight: 700; margin-left: 12px; }

@media print {
  body.modo-cupom > *:not(#areaImpressao) { display: none !important; }
  body.modo-cupom #areaImpressao { display: block !important; }
  body.modo-cupom { background: #fff; margin: 0; }
  @page { margin: 3mm; }
}

/* ===== Compras: ciclo semanal ===== */

.grade-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card-area { display: flex; flex-direction: column; gap: 8px; }
.card-area-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-area-topo strong { flex: 1; min-width: 0; }
.card-area-topo .status, .card-area-topo .chip { white-space: nowrap; flex-shrink: 0; }
.acoes-area { margin-top: auto; }
.aviso-sem-fornecedor { border: 1px solid var(--vermelho); background: var(--vermelho-bg); margin-bottom: 12px; }
.card-area input[type="text"], .card-area input[type="tel"] {
  width: 100%; padding: 7px 9px; border: 1px solid var(--linha); border-radius: 6px; font-size: 13px; font-family: inherit;
}
.itens-area { font-size: 13px; max-height: 180px; overflow-y: auto; border-top: 1px dashed var(--linha); padding-top: 6px; }
.acoes-area { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-area .btn { flex: 1 1 auto; }
.checklist-colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lista-rolagem { max-height: 50vh; overflow-y: auto; }
.preco-antigo { color: var(--texto-suave); font-style: italic; }
.linha-sem-fornecedor td { background: var(--vermelho-bg); }
.campo-novo { border-color: var(--vermelho) !important; }
#supRapidaResultado input[type="text"] { width: 100%; min-width: 160px; padding: 5px 7px; border: 1px solid var(--linha); border-radius: 6px; font-family: inherit; }

/* ===== Aviso de ambiente de teste ===== */

.faixa-teste {
  background: #e0a319;
  color: #222;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 4px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  opacity: 0.92;
  pointer-events: none;
}

/* ===== Tabela (fluxo de caixa) ===== */

.tabela-wrap {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow-x: auto;
  margin-top: 16px;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela th,
.tabela td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela th:first-child,
.tabela td:first-child { text-align: left; }

.tabela thead th {
  background: var(--fundo);
  color: var(--texto-suave);
  font-weight: 700;
  font-size: 12px;
}

.tabela tr.previsto td { color: var(--texto-suave); font-style: italic; }
.tabela tfoot td { font-weight: 700; background: var(--fundo); }

@media (max-width: 640px) {
  .titulo-item { flex-wrap: wrap; }
  .titulo-item .lancamento-info { flex-basis: 100%; }
  .titulo-item .lancamento-valor { flex: 1; }
}

.mes-nav .link-btn { white-space: nowrap; margin-top: 0; }

/* ===== Escalas ===== */
.esc-card { padding: 18px 20px; }
.esc-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.esc-card-topo h3 { margin: 0; font-size: 16px; }
.esc-link { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.esc-link .link-btn { font-size: 13px; }
.esc-form { display: grid; grid-template-columns: 150px minmax(180px, 1.4fr) minmax(130px, 1fr) minmax(180px, 1.4fr) 110px 120px; gap: 12px; }
.esc-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.esc-campo label { font-size: 12px; font-weight: 600; color: var(--texto-suave); margin: 0; line-height: 1.2; }
.esc-campo input, .esc-campo select {
  width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: inherit; box-sizing: border-box;
  text-overflow: ellipsis;
}
.esc-campo input:focus, .esc-campo select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12); }
.esc-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.esc-rodape .dica { margin: 0; flex: 1; min-width: 220px; }
.esc-botoes { display: flex; gap: 8px; }
.esc-botoes .btn { min-width: 160px; }
.esc-importar { text-align: right; margin-top: 18px; }
.esc-importar .link-btn { font-size: 13px; color: var(--texto-suave); }
.esc-dia { font-size: 15px; margin: 20px 0 8px; color: var(--azul); display: flex; align-items: baseline; gap: 8px; }
.esc-dia small { font-weight: 400; color: var(--texto-suave); font-size: 13px; }
#escLista .tabela td, #escLista .tabela th { white-space: nowrap; }
#escLista .tabela td:first-child { white-space: normal; }
.linha-duplicada td { background: var(--vermelho-bg); }
.acoes-linha { white-space: nowrap; text-align: right; }
.esc-turno { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.esc-turno span { flex: 1; min-width: 0; }
.esc-turno.pago { opacity: 0.6; }
.esc-turno.pago strong { text-decoration: line-through; }
.aviso-resposta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--azul); background: var(--azul-bg); margin-bottom: 12px; }
#escPainel-custos input[type="month"] { height: 38px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; font-family: inherit; font-size: 14px; }
@media (max-width: 1100px) {
  .esc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .esc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esc-largo { grid-column: 1 / -1; }
  .esc-botoes, .esc-botoes .btn { width: 100%; }
}
.mes-nav .link-btn { font-size: 14px; text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.mes-nav .link-btn:hover { background: var(--azul-bg); }
.mes-nav .link-btn { width: auto; height: auto; border: none; background: none; }
@media (max-width: 640px) {
  .mes-nav { gap: 8px; flex-wrap: wrap; }
  .mes-nav strong { min-width: 0; flex: 1; font-size: 14px; }
  .mes-nav .link-btn { flex-basis: 100%; text-align: center; padding: 2px; }
  .esc-link { width: 100%; justify-content: space-between; }
}
.sidebar-marca { display: flex; flex-direction: column; min-width: 0; }
.sidebar-marca span { font-size: 12px; font-weight: 400; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== Dashboard: período ===== */
.dash-periodo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.dash-periodo-tipos { margin: 0; flex: 0 0 auto; }
.dash-periodo-tipos .tab-btn { min-width: 90px; }
.dash-periodo-nav { margin: 0; }
.dash-periodo-nav strong { min-width: 230px; }
@media (max-width: 640px) {
  .dash-periodo { flex-direction: column; align-items: stretch; }
  .dash-periodo-tipos .tab-btn { flex: 1; min-width: 0; }
  .dash-periodo-nav strong { min-width: 0; }
}

/* ===== PDV (venda rápida, estilo BeeFood) ===== */
body.modo-pdv main.container { max-width: none; }
.secao-pdv { display: flex; flex-direction: column; gap: 12px; }
.pdv-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdv-topo select { height: 38px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 10px; font-size: 14px; font-weight: 600; background: #fff; }
.pdv-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.pdv-esq { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.pdv-cats { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.pdv-cat { flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 12px; color: var(--texto-suave); padding: 4px 2px; border-bottom: 3px solid transparent; }
.pdv-cat span:last-child { max-width: 82px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdv-cat-ic { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--linha); display: grid; place-items: center; font-size: 20px; font-weight: 800; overflow: hidden; }
.pdv-cat-ic img { width: 100%; height: 100%; object-fit: cover; }
.pdv-cat.ativo { color: #c0392b; font-weight: 700; border-bottom-color: #c0392b; }
.pdv-cat.ativo .pdv-cat-ic { border: 2px solid #c0392b; background: #fdecea; }

.pdv-filtros { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr)); gap: 10px; }
.pdv-busca { display: flex; align-items: center; gap: 8px; border: 2px solid #e8b4ad; border-radius: 12px; padding: 0 12px; background: #fff; height: 48px; }
.pdv-busca:focus-within { border-color: #c0392b; }
.pdv-busca input { border: none; outline: none; flex: 1; font-size: 16px; background: transparent; min-width: 0; }
.pdv-filtros select { height: 48px; border: 1px solid var(--linha); border-radius: 12px; padding: 0 12px; font-size: 15px; background: #fff; min-width: 0; }

.pdv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: calc(100vh - 330px); overflow-y: auto; padding: 2px 4px 12px 2px; }
.pdv-prod { position: relative; display: flex; flex-direction: column; text-align: left; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 10px; cursor: pointer; gap: 6px; transition: box-shadow .15s, border-color .15s; font-family: inherit; }
.pdv-prod:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: #e8b4ad; }
.pdv-prod.no-carrinho { border: 2px solid #c0392b; }
.pdv-prod-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background: #f3f4f6; display: grid; place-items: center; font-size: 42px; font-weight: 300; color: #9aa3ad; overflow: hidden; }
.pdv-prod-img img { width: 100%; height: 100%; object-fit: contain; }
.pdv-prod-nome { font-size: 14px; color: var(--texto); line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdv-prod-preco { font-size: 17px; font-weight: 800; color: var(--texto); }
.pdv-prod-qtd { position: absolute; top: 8px; left: 8px; z-index: 1; min-width: 24px; height: 24px; border-radius: 12px; background: #c0392b; color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }

.pdv-dir { position: sticky; top: 12px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 520px; overflow: hidden; }
.pdv-dir-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; font-size: 17px; }
.pdv-qtd { border: 1px solid var(--linha); border-radius: 99px; padding: 2px 12px; font-size: 13px; }
.pdv-alvo { padding: 0 18px; font-size: 14px; color: var(--texto); min-height: 20px; }
.pdv-aviso { display: inline-block; background: #e7f7ee; color: #1a8f4c; border-radius: 8px; padding: 4px 10px; font-weight: 600; }
.pdv-dica { padding: 4px 18px 8px; margin: 0; font-size: 12px; color: var(--texto-suave); border-bottom: 1px solid var(--linha); }
.pdv-itens { flex: 1; overflow-y: auto; padding: 6px 12px; }
.pdv-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 6px; border-bottom: 1px solid #f1f1f1; }
.pdv-item-info { min-width: 0; display: flex; flex-direction: column; }
.pdv-item-nome { font-size: 14px; font-weight: 600; text-align: left; color: var(--texto); padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pdv-item-nome { text-decoration: none; }
.pdv-item small { font-size: 12px; color: var(--texto-suave); }
.pdv-item-valor { font-weight: 700; font-size: 14px; white-space: nowrap; }
.pdv-item.enviado { opacity: 0.7; }
.pdv-item.cancelado .pdv-item-nome { text-decoration: line-through; }
.pdv-qtd-ctl { display: inline-flex; align-items: center; gap: 6px; }
.pdv-qtd-ctl button, .pdv-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--linha); background: #fff; cursor: pointer; font-size: 15px; }
.pdv-vazio { height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--texto-suave); }
.pdv-vazio span { font-size: 40px; opacity: 0.5; }
.pdv-rodape { border-top: 1px solid var(--linha); padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pdv-acoes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pdv-acoes button { height: 44px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.pdv-acoes button:nth-child(2) { color: #d97706; background: #fff8eb; }
.pdv-acoes button:nth-child(3) { color: #1a8f4c; background: #eefaf2; }
.pdv-acoes button:nth-child(4) { background: #eef4fb; }
.pdv-acoes button:nth-child(5) { background: #fdecea; }
.pdv-linha { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-suave); }
.pdv-final { display: flex; justify-content: space-between; align-items: baseline; }
.pdv-final span { font-size: 15px; color: var(--texto-suave); }
.pdv-final small { margin-left: 6px; border: 1px solid var(--linha); border-radius: 99px; padding: 1px 8px; font-size: 11px; }
.pdv-final strong { font-size: 28px; }
.pdv-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdv-botoes .btn { height: 52px; font-size: 16px; border-radius: 14px; }

@media (max-width: 1100px) {
  .pdv-corpo { grid-template-columns: 1fr; }
  .pdv-dir { position: static; height: auto; min-height: 0; }
  .pdv-itens { max-height: 320px; }
  .pdv-grade { max-height: none; }
  .pdv-filtros { grid-template-columns: 1fr 1fr; }
  .pdv-busca { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .pdv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Abrir comanda: escolher cliente */
.ac-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; margin: 10px 0 14px; }
.ac-cliente { text-align: left; border: 1px solid var(--linha); background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; }
.ac-cliente:hover { border-color: var(--azul); background: var(--azul-bg); }
.ac-cliente small { color: var(--texto-suave); font-size: 12px; }
.ac-rapido { border-top: 1px dashed var(--linha); padding-top: 10px; }
#acBusca { width: 100%; padding: 10px; border: 1px solid var(--linha); border-radius: 8px; font-size: 15px; }
.erro-texto { color: var(--vermelho); font-size: 13px; min-height: 16px; margin: 6px 0 0; }
.mesa-cliente { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }