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

/* Material Symbols Outlined -- usada só pros ícones catalogados em
   DESIGN-BOTOES-ICONES.md / galeria-icones-botoes.html que não têm SVG
   equivalente já existente no sistema (ver Icon.js). */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: 14px;
}

/* ---------- Cards ---------- */

.card {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: 10px;
  box-shadow: var(--shadow-card);
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tamanho-controle);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  padding: 0 18px;
  border-radius: var(--radius-control);
  border: none;
  cursor: pointer;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary { background: var(--color-verde-vivo); color: var(--color-verde-escuro-texto); }
.btn-primary:hover:not(:disabled) { filter: brightness(0.95); }

.btn-ghost { background: var(--color-canvas); color: var(--color-ink); }
.btn-ghost:hover:not(:disabled) { background: var(--color-hairline); }

/* Botão "ghost" sobre o fundo da página (mesma cor de --color-canvas) precisa
   de contorno próprio, senão fica invisível -- usado em telas de detalhe
   como "Voltar" fora de um card. */
.btn-voltar {
  display: inline-flex;
  align-items: center;
  height: var(--tamanho-controle);
  background: color-mix(in srgb, var(--color-roxo) 10%, var(--color-paper));
  border: 1px solid var(--color-roxo);
  color: var(--color-ink);
}
.btn-voltar:hover:not(:disabled) { background: color-mix(in srgb, var(--color-roxo) 18%, var(--color-paper)); }

.btn-danger { background: var(--color-danger); color: var(--color-paper); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }

.btn-verde-escuro { background: var(--color-verde-escuro-acao); color: var(--color-paper); }
.btn-verde-escuro:hover:not(:disabled) { filter: brightness(0.92); }

/* Botão sólido com texto + ícone (ver DESIGN-BOTOES-ICONES.md) -- usado em
   ações que precisam de ícone ao lado do rótulo, como Devolver/Cancelar em
   Reservas.js. */
.btn-com-icone { display: inline-flex; align-items: center; gap: 6px; }

.btn-borda-ambar { border: 1px solid var(--color-ambar); }

/* Fonte menor pra caber em contextos compactos (linha de card, tabela) --
   a altura continua o padrão 37px, herdada de .btn. */
.btn-xs { padding: 0 12px; font-size: 12px; }
.btn-full { width: 100%; }

/* ---------- Botões de ação ícone-only (cor sólida fixa por ação) ----------
   O nome da ação some do rótulo visível -- title (tooltip nativo) é
   obrigatório em todo uso, é o único jeito de saber o que o botão faz.
   Modelo "tonal": borda 1px na cor da ação + fundo num tom bem mais claro
   dessa mesma cor + ícone na cor da ação (ver DESIGN-BOTOES-ICONES.md) --
   cada modificador só define --icone-cor, o resto vem daqui. */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tamanho-controle);
  height: var(--tamanho-controle);
  padding: 0;
  border: 1px solid var(--icone-cor);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--icone-cor) 16%, var(--color-paper));
  color: var(--icone-cor);
  cursor: pointer;
  flex-shrink: 0;
}

.btn-icone:hover:not(:disabled) { background: color-mix(in srgb, var(--icone-cor) 26%, var(--color-paper)); }
.btn-icone:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-icone-ambar        { --icone-cor: var(--color-ambar); }
.btn-icone-vermelho     { --icone-cor: var(--color-danger); }
.btn-icone-roxo         { --icone-cor: var(--color-roxo); }
.btn-icone-verde-escuro { --icone-cor: var(--color-verde-escuro-acao); }
.btn-icone-laranja      { --icone-cor: var(--color-laranja); }
.btn-icone-verde        { --icone-cor: var(--color-verde-vivo); }
.btn-icone-azul         { --icone-cor: var(--color-azul); }
.btn-icone-aqua         { --icone-cor: var(--color-aqua); }
.btn-icone-cinza        { --icone-cor: var(--color-mid-gray); }

/* Variante "sem contorno" -- só para ações com cor de acento preta (Sair,
   Alterar Senha em Header.js): mesmo fundo tonal, sem borda, pra não ler
   como "outline preto" genérico igual às demais ações coloridas. */
.btn-icone-sem-contorno {
  --icone-cor: var(--color-ink);
  background: color-mix(in srgb, var(--icone-cor) 12%, var(--color-paper));
  border: none;
}
.btn-icone-sem-contorno:hover:not(:disabled) { background: color-mix(in srgb, var(--icone-cor) 20%, var(--color-paper)); }

/* ---------- Coração de favoritar (pessoa como cliente frequente, mesma
   linguagem visual do coração de favoritar produto no card de venda) ---------- */
.btn-coracao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tamanho-controle);
  height: var(--tamanho-controle);
  padding: 0;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-mid-gray);
  cursor: pointer;
  flex-shrink: 0;
}
.btn-coracao:hover:not(:disabled) { color: #DC2626; background: #FCEBEB; }
.btn-coracao.ativo { color: #DC2626; }
.btn-coracao:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Troféu do produto do Ranking (aba Produtos) -- ícone puro,
   sem caixa de botão, mesma linguagem visual do coração de favorito:
   cinza quando não é o produto do Ranking, ouro quando é. Não usa
   .btn-icone-* de propósito -- não é uma ação sobre a linha (como
   Editar/Excluir), é a marcação de um estado exclusivo, e só um produto
   pode estar marcado por vez. ---------- */
.btn-trofeu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tamanho-controle);
  height: var(--tamanho-controle);
  padding: 0;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-mid-gray);
  cursor: pointer;
  flex-shrink: 0;
}
.btn-trofeu:hover:not(:disabled) {
  color: var(--color-ouro);
  background: color-mix(in srgb, var(--color-ouro) 22%, var(--color-paper));
}
.btn-trofeu.ativo { color: var(--color-ouro); }
.btn-trofeu:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Campos de formulário ---------- */

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-ink);
}

.field input,
.field select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
}

.field input::placeholder { color: var(--color-mid-gray); }

/* Mesmo visual de .field input/select, para quando o input/select fica
   numa linha inline (ex.: forma de pagamento + valor lado a lado) e não
   pode ficar dentro de um .field (que é display:block e tem margin própria). */
.campo-inline {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
}
.campo-inline::placeholder { color: var(--color-mid-gray); }

.field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.field-toggle label { margin-bottom: 0; }

.field-erro {
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 4px;
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal {
  background: var(--color-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-sm { max-width: 360px; }
.modal-lg { max-width: 720px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
}

.modal-title { font-size: 18px; font-weight: 600; margin: 0; }

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-mid-gray);
  padding: 4px 10px;
  border-radius: var(--radius-control);
}

.modal-close:hover { background: var(--color-canvas); color: var(--color-ink); }

.modal-body { padding: 20px; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 20px;
}

/* ---------- Foto ampliada: overlay em tela cheia (sem cabeçalho/rodapé de
   modal), acima do modal-overlay pois normalmente abre de dentro de um
   modal "Ver" ---------- */

.foto-ampliada-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.foto-ampliada-fechar {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.foto-ampliada-fechar:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- Banner de erro (telas de carregamento) ---------- */

.alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  font-size: 14px;
  margin-bottom: 16px;
}

.alert-error {
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-paper));
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-paper));
  color: var(--color-danger);
}

.alert-error span { flex: 1; }

/* ---------- Toast (feedback de ações) ---------- */

.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  max-width: 340px;
}

.toast {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-left: 4px solid var(--color-mid-gray);
  border-radius: var(--radius-control);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}

.toast-success { border-left-color: var(--color-verde-vivo); }
.toast-error { border-left-color: var(--color-danger); }
.toast-info { border-left-color: var(--color-mid-gray); }

/* ---------- Estado de página inteira (carregando / erro inicial) ---------- */

.full-page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.full-page-center .alert { max-width: 420px; width: 100%; margin-bottom: 0; }

.texto-carregando { color: var(--color-mid-gray); font-size: 14px; }

/* ---------- Tela de login (ver LOGIN_DESIGN_SPEC.md) ----------
   Paleta e layout deliberadamente à parte do resto do sistema -- é a
   "capa institucional" do clube, não uma tela do dashboard. Tokens
   escopados em .login-page pra não vazar pro resto do app. */

.login-page {
  --login-bg: #F4F5F0;
  /* Mesmo verde do fundo do menu (sidebar) -- pedido do usuário, pra unificar
     o verde institucional em vez de ter um tom só do login. */
  --login-green: var(--color-verde-profundo);
  --login-eyebrow: #255C3D;
  --login-card: #FFFFFF;
  --login-ink: #181B16;
  --login-muted: #6E756C;
  --login-line: #DBDECF;
  --login-ring: rgba(47, 107, 68, .15);

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--login-bg);
  color: var(--login-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.login-panel {
  position: absolute;
  inset: 0;
  background: var(--login-green);
  clip-path: polygon(0 0, 56% 0, 44% 100%, 0% 100%);
}
@media (min-width: 641px) {
  .login-panel { clip-path: polygon(0 0, 55% 0, 45% 100%, 0% 100%); }
}

.login-crest {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: auto;
  display: none;
  transition: width .28s cubic-bezier(.22, .61, .36, 1);
  will-change: width;
}
.login-crest-left { left: 4%; }
.login-crest-right { right: 4%; }
@media (min-width: 641px) { .login-crest { display: block; } }
@media (prefers-reduced-motion: reduce) { .login-crest { transition: none; } }

.login-form-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--login-card);
  border: 1px solid var(--login-line);
  border-radius: 0;
  padding: 40px 36px;
  box-shadow: 0 30px 60px -28px rgba(20, 40, 28, .3);
}

.login-eyebrow {
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  color: var(--login-eyebrow);
}
.login-title { font-weight: 800; font-size: 1.8rem; letter-spacing: -0.01em; margin: 16px 0 8px; color: var(--login-ink); }
.login-subtitle { font-size: .87rem; line-height: 1.55; margin: 0 0 28px; max-width: 32ch; color: var(--login-muted); }

.login-field { margin-bottom: 16px; }
.login-field label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--login-muted);
}
.login-input-row { position: relative; }
.login-input-row input {
  width: 100%;
  font-size: .95rem;
  font-family: inherit;
  border-radius: 0;
  padding: 12px 40px 12px 38px;
  background: var(--login-card);
  border: 1px solid var(--login-line);
  color: var(--login-ink);
}
.login-input-row input:focus {
  outline: none;
  border-color: var(--login-green);
  box-shadow: 0 0 0 3px var(--login-ring);
}
.login-input-row .login-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: var(--login-muted);
  pointer-events: none;
}
.login-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--login-green);
  padding: 4px 6px;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .83rem;
  margin: 8px 0 26px;
  cursor: pointer;
  color: var(--login-muted);
}
.login-remember input { accent-color: var(--login-green); }

.login-btn {
  width: 100%;
  border: none;
  border-radius: 0;
  font-weight: 700;
  font-size: .9rem;
  padding: 14px;
  cursor: pointer;
  background: var(--login-green);
  color: #fff;
  transition: filter .15s ease;
}
.login-btn:hover:not(:disabled) { filter: brightness(1.06); }
.login-btn:focus-visible { outline: 2px solid var(--login-ink); outline-offset: 2px; }
.login-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* ---------- Layout autenticado ---------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--color-verde-profundo);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  transition: width 180ms ease;
}

/* Recolhida (só ícones) é o padrão de navegação -- ver Sidebar.js. */
.sidebar.recolhida { width: 68px; }

/* Rodapé do menu: usuário logado (só informativo) + Alterar senha/Sair,
   no mesmo molde visual dos itens de navegação (.sidebar-item) -- ver
   Sidebar.js. Substitui a logo da Vila Lobos que ficava aqui antes. */
.sidebar-rodape {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 9px;
}
.sidebar.recolhida .sidebar-usuario { justify-content: center; padding: 10px 0 10px 3px; }

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-verde-vivo) 30%, var(--color-verde-profundo));
  color: var(--color-paper);
}
.sidebar-avatar .material-symbols-outlined { font-size: 18px; }

.sidebar-usuario-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.recolhida .sidebar-usuario-nome { display: none; }

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: color-mix(in srgb, var(--color-paper) 70%, transparent);
  cursor: pointer;
}

.sidebar-toggle:hover {
  background: color-mix(in srgb, var(--color-paper) 8%, transparent);
  color: var(--color-paper);
}

.sidebar-toggle svg { transition: transform 180ms ease; }
.sidebar.recolhida .sidebar-toggle { align-self: center; }
.sidebar.recolhida .sidebar-toggle svg { transform: rotate(180deg); }

.sidebar-loading {
  padding: 0 8px;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-paper) 60%, transparent);
}

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 9px;
  border-radius: var(--radius-control);
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-paper) 70%, transparent);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.sidebar-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar.recolhida .sidebar-item { justify-content: center; padding: 10px 0 10px 3px; }
.sidebar.recolhida .sidebar-item span:not(.material-symbols-outlined) { display: none; }

/* Itens inativos ficam neutros -- sem verde, texto acinzentado -- para o
   contraste com o item ativo ficar óbvio à primeira vista. */
.sidebar-item:hover {
  background: color-mix(in srgb, var(--color-paper) 8%, transparent);
  color: var(--color-paper);
}

.sidebar-item.active {
  border-left-color: var(--color-verde-vivo);
  background: color-mix(in srgb, var(--color-verde-vivo) 14%, transparent);
  color: var(--color-verde-claro-texto);
}

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.header-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 12px 0;
  /* Mesmo tom do .content-area logo abaixo -- dá a impressão de tela
     única, sem "quebra" branca entre header e conteúdo. */
  background: var(--color-canvas);
}

.header-titulo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
}

.header-titulo .material-symbols-outlined,
.header-titulo svg {
  color: var(--color-verde-profundo);
  flex-shrink: 0;
}

.header-titulo-texto {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 48px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-verde-profundo);
  text-transform: uppercase;
}

/* Listra que não vai até o fim -- separa o header do conteúdo abaixo sem
   ser uma borda de largura total (ver pedido do usuário). */
.header-linha {
  width: 88%;
  max-width: 900px;
  height: 3px;
  background: var(--color-verde-vivo);
}

.content-area { flex: 1; padding: 12px; }

.placeholder-modulo {
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-mid-gray);
  text-align: center;
}

/* ---------- Listagens com busca + ação (Pessoas, Associados, ...) ---------- */

.list-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

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

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

.tabela th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-hairline);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-mid-gray);
}

.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--color-hairline); }
.tabela tbody tr:last-child td { border-bottom: none; }

.alert-aviso {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
}

.texto-mid { color: var(--color-mid-gray); font-size: 12px; margin: -8px 0 12px; }

/* ---------- Boas-vindas (Página Inicial) ---------- */

.boas-vindas {
  background: var(--color-verde-profundo);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin-bottom: 14px;
}

.boas-vindas p { margin: 0; font-size: 20px; font-weight: 600; color: #EFF6EF; line-height: 1.35; }
.boas-vindas .nome-destaque, .boas-vindas .bem-vindo-destaque { color: var(--color-verde-claro-texto); font-weight: 800; }

/* ---------- Abas dentro de tela (Tabs) ----------
   Navegação entre visões dentro de um mesmo módulo/tela (sub-navegação de
   módulo, filtros de listagem, modo de um formulário). Não é a sidebar --
   essa tem seu próprio indicador (ver .sidebar-item.active). */

.tabs-bar {
  display: flex;
  height: 44px;
  border-bottom: 0.5px solid var(--color-hairline);
  margin-bottom: 10px;
}

.tab-item {
  background: transparent;
  border: none;
  border-radius: 0; /* sem cantos arredondados -- não é botão */
  padding: 0 18px;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mid-gray);
  cursor: pointer;
  transition: background 220ms, color 220ms, box-shadow 220ms;
}

.tab-item.ativa {
  background: var(--color-verde-profundo);
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 0 #86EFAC; /* linha verde clara na base */
}

/* ---------- Badge ---------- */

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-sucesso { background: #DCFCE7; color: #166534; }
.badge-neutro  { background: #F0F0F0; color: #525252; }
.badge-alerta  { background: #FEF3C7; color: #92400E; }
.badge-perigo  { background: #FEE2E2; color: #991B1B; }

/* ---------- Status do Sistema (Administração) ---------- */

.status-sistema-topo {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

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

.status-sistema-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.status-sistema-rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.status-sistema-valor { font-size: 18px; font-weight: 700; }
.status-sistema-detalhe { font-size: 12px; color: var(--color-mid-gray); }

.status-sistema-lista-erros {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.status-sistema-lista-erros li {
  display: flex;
  flex-direction: column;
  padding: 6px 8px;
  background: var(--color-canvas);
  border-radius: var(--radius-control);
  font-size: 12px;
}

.status-sistema-erro-tag { font-weight: 600; }
.status-sistema-erro-msg { color: var(--color-mid-gray); overflow-wrap: anywhere; }

/* ---------- Lista de seleção (ex.: escolher pessoa existente) ---------- */

.lista-selecao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.lista-selecao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
}

.lista-selecao-item.selecionavel { cursor: pointer; transition: border-color 120ms, background 120ms; }
.lista-selecao-item.selecionavel:hover { border-color: var(--color-verde-vivo); }
.lista-selecao-item.selecionada {
  border-color: var(--color-verde-vivo);
  background: color-mix(in srgb, var(--color-verde-vivo) 10%, var(--color-paper));
}

/* ---------- Botão de usar saldo de crédito (Comandas) ---------- */

.btn-credito {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--color-verde-vivo);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-verde-vivo) 16%, var(--color-paper));
  color: var(--color-verde-escuro-acao);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}

.btn-credito:hover { background: color-mix(in srgb, var(--color-verde-vivo) 26%, var(--color-paper)); }

.btn-credito.selecionado {
  border-color: var(--color-verde-escuro-acao);
  background: color-mix(in srgb, var(--color-verde-vivo) 34%, var(--color-paper));
}

/* ---------- Campo de busca com ícone ---------- */

.campo-busca { position: relative; }

.campo-busca svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-mid-gray);
  pointer-events: none;
}

.campo-busca input { padding-left: 38px; }

/* ---------- Toggle ---------- */

.toggle {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: none;
  padding: 2px;
  background: var(--color-hairline);
  cursor: pointer;
  flex-shrink: 0;
}

.toggle.on { background: var(--color-verde-vivo); }
.toggle:disabled { opacity: 0.6; cursor: not-allowed; }

.toggle-thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-paper);
  transition: transform 0.15s ease;
  transform: translateX(0);
}

.toggle.on .toggle-thumb { transform: translateX(16px); }

/* ---------- Cards de comanda (grade, um card por cliente) ---------- */

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

.comanda-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color 150ms, transform 150ms;
}

.comanda-card:hover { border-color: var(--color-verde-vivo); transform: translateY(-1px); }

.comanda-card-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.comanda-card-topo > div { min-width: 0; }

.comanda-card-nome {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.comanda-card-meta { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.comanda-card-meta span { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-mid-gray); }

.comanda-card-divisor { border: none; border-top: 1px solid var(--color-hairline); margin: 0; width: 100%; }

.comanda-card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comanda-card-rodape-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.comanda-card-total { font-size: 17px; font-weight: 700; margin: 0; color: var(--color-verde-escuro-acao); }

/* ---------- Cards de reserva (Reservas futuras) ---------- */

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

/* Card vertical (retangular "de pe"): foto do patrimonio em circulo
   centralizado no topo, badge de situacao no canto superior direito, e o
   resto do conteudo empilhado abaixo, tudo centralizado. */
.reserva-card {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: 36px 16px 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.reserva-card-badge { position: absolute; top: 12px; right: 12px; }
.reserva-card-nome { margin: 8px 0 0; font-weight: 700; font-size: 15px; }
.reserva-card-periodo { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-mid-gray); margin-top: 4px; }
.reserva-card-acoes { display: flex; gap: 8px; justify-content: flex-end; width: 100%; margin-top: 6px; }

/* ---------- Cards de video (Replay) ---------- */

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

.video-card {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
}

.video-card-thumb img,
.video-card-thumb > div:not(.video-card-play) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-paper);
  pointer-events: none;
}

.video-card-play svg { margin-left: 2px; }

.video-card-tamanho {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--color-paper);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 0px;
}

.video-card-corpo {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.video-card-titulo {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

/* ---------- Visualizador de video (Replay) ----------
   Tela cheia de proposito, sem o cromo do Modal generico (cabecalho,
   rodape, padding) -- num celular aquele cromo comia boa parte da tela
   pequena, sobrando pouco espaco pro video. Aqui o video ocupa a janela
   inteira e tenta entrar em fullscreen nativo assim que abre (ver
   VideosReplay.js); o botao "fechar" fica sobreposto no canto. */
.video-visualizador {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-visualizador video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-visualizador-fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 0px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Cards de venda (modal Vender: janta/emprestimo/favoritos/produtos) ---------- */

.cards-venda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.card-venda {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-sans);
}

.card-venda:hover:not(.card-venda-desabilitado) { border-color: var(--color-verde-vivo); }
.card-venda-desabilitado { opacity: 0.6; cursor: not-allowed; }

.card-venda-icone {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas);
  border-radius: var(--radius-control);
}

.card-venda-nome { font-size: 13px; font-weight: 600; margin: 0; }
.card-venda-valor { font-size: 12px; color: var(--color-mid-gray); margin: 0; }

.card-venda-coracao {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 0px;
  background: var(--color-paper);
  color: var(--color-mid-gray);
  cursor: pointer;
}

.card-venda-coracao:hover { color: #DC2626; background: #FCEBEB; }
.card-venda-coracao.ativo { color: #DC2626; }

/* ---------- Permissões (por perfil: perfil primeiro, módulos em
   acordeão dentro dele, cada aba com 3 toggles) ---------- */

.permissoes-perfis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.permissoes-perfil-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 128px;
  padding: 10px 16px;
  border: 1px solid var(--color-hairline);
  border-radius: 0px;
  background: var(--color-paper);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}

.permissoes-perfil-chip .nome { font-size: 13.5px; font-weight: 700; }
.permissoes-perfil-chip .resumo { font-size: 11.5px; color: var(--color-mid-gray); }

.permissoes-perfil-chip.ativa {
  border-color: var(--color-verde-vivo);
  background: color-mix(in srgb, var(--color-verde-vivo) 12%, var(--color-paper));
}
.permissoes-perfil-chip.ativa .resumo { color: var(--color-ink); }

.permissoes-modulo { border-bottom: 1px solid var(--color-hairline); }
.permissoes-modulo:last-child { border-bottom: none; }

.permissoes-modulo-cabecalho {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--color-ink);
}

.permissoes-modulo-cabecalho .titulo { display: flex; align-items: center; gap: 10px; }
.permissoes-modulo-cabecalho .titulo strong { font-size: 14px; }

.permissoes-modulo-seta {
  color: var(--color-mid-gray);
  transform: rotate(-90deg);
  transition: transform .15s;
  display: inline-flex;
}
.permissoes-modulo.aberto .permissoes-modulo-seta { transform: rotate(0deg); }

.permissoes-contagem {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 0px;
  background: var(--color-canvas);
  color: var(--color-mid-gray);
  font-variant-numeric: tabular-nums;
}
.permissoes-contagem.tem-acesso {
  background: color-mix(in srgb, var(--color-verde-vivo) 16%, transparent);
  color: color-mix(in srgb, var(--color-verde-vivo) 55%, var(--color-ink));
}

.permissoes-abas { padding: 0 20px 16px; }

.permissoes-aba-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--color-hairline);
}
.permissoes-aba-linha:first-child { border-top: none; }

.permissoes-aba-linha .nome-aba { font-size: 13px; }

.permissoes-toggles { display: flex; gap: 18px; flex-wrap: wrap; }

.permissoes-toggle-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--color-mid-gray);
  cursor: pointer;
}