/* ============================================================
   WeHall Gestão — usa os tokens de marca do We Hall Beauty
   (cores/fontes copiadas de wehall-site-novo/css/design-system.css,
   adaptadas para um painel administrativo — sidebar escura + área
   de trabalho clara, ao invés do layout institucional do site).

   Design System formalizado em 01/10/2026 (ver artifact aprovado
   pelo usuário) — cores, fontes e espaçamento que já estavam em uso
   real ganharam nome e uma escala disciplinada. Daqui pra frente,
   toda tela nova usa só os tokens abaixo — nada de tamanho/cor solto
   inventado na hora.
   ============================================================ */
:root {
  /* ─── Marca ─── */
  --primario:        #8d301c;
  --primario-escuro: #6e2415;
  --primario-claro:  #a8432d;
  --primario-suave:  rgba(141,48,28,0.07);
  --primario-medio:  rgba(141,48,28,0.16);

  /* ─── Neutros ─── */
  --bege:       #f3ca94;
  --bege-claro: #fdf5e8;
  --creme:      #faf7f2;
  --preto:        #0d0a08;
  --preto-quente: #1a0e09;
  --texto:        #2a2a2a;
  --texto-suave:  #666666;
  --branco:       #ffffff;
  --verde:        #878b57;

  /* ─── Semânticas (estado — nunca usadas pra ação/marca) ─── */
  --sucesso:        #16a34a;
  --sucesso-fundo:  #dcfce7;
  --alerta:         #d97706;
  --alerta-fundo:   #ffedd5;
  --perigo:         #dc2626;
  --perigo-fundo:   #fee2e2;
  --info:           #2563eb;
  --info-fundo:     #dbeafe;
  --roxo:           #7c3aed;
  --roxo-fundo:     #ede9fe;

  /* ─── Tipografia ─── */
  --font-titulo: 'Playfair Display', Georgia, serif;
  --font-corpo:  'Inter', system-ui, -apple-system, sans-serif;

  /* Escala de 8 degraus (10px–26px) — qualquer texto novo usa um
     destes, nunca um tamanho inventado na hora. Reduzida de 11–28px
     (pedido do usuário, 01/10/2026 — comparando com o Trinks, que
     cabe bem mais informação na tela com fonte/respiro menores). */
  --fs-micro:        0.625rem;  /* 10px — menor tamanho permitido no sistema */
  --fs-legenda:      0.6875rem; /* 11px — ajuda, metadado, timestamp */
  --fs-corpo-sec:    0.75rem;   /* 12px — texto secundário, tabela densa */
  --fs-corpo:        0.8125rem; /* 13px — padrão do corpo, label, botão */
  --fs-card:         0.9375rem; /* 15px — título de card pequeno / valor médio */
  --fs-secao:        1rem;      /* 16px — título de seção/modal */
  --fs-pagina:       1.25rem;   /* 20px — título de página */
  --fs-valor-grande: 1.625rem;  /* 26px — número de destaque (dashboard) */

  /* ─── Espaçamento — grade de 4px, 7 degraus ─── (reduzida junto com
     a tipografia acima, mesmo pedido/motivo) */
  --espaco-1: 4px;  /* ícone+texto, padding de badge */
  --espaco-2: 6px;  /* entre elementos relacionados */
  --espaco-3: 9px;  /* padding de botão/input, label→campo */
  --espaco-4: 12px; /* padrão entre campos de formulário */
  --espaco-5: 14px; /* padding de card/modal padrão */
  --espaco-6: 18px; /* entre blocos/seções distintas */
  --espaco-8: 24px; /* entre grandes blocos de página */

  /* ─── Cantos ─── */
  --radius-sm: 6px;  /* inputs, chips, botões pequenos */
  --radius-md: 10px; /* cards, botões padrão, painéis flutuantes */
  --radius-lg: 14px; /* modais */

  --sidebar-w: 240px;
  --sidebar-w-recolhida: 68px;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-corpo);
  color: var(--texto);
  background: var(--creme);
  /* Trava de segurança: nada na página deve criar scroll horizontal no
     nível do body — só a grade da Agenda rola de lado, dentro de si
     mesma (.agenda-scroll). Sem isso, conteúdo largo empurrava a
     página inteira, sumindo com a barra de rolagem vertical pra fora
     da tela visível (reportado pelo usuário, 30/09/2026). */
  overflow-x: hidden;
}

/* ─── Layout raiz: sidebar + conteúdo ───
   Altura travada em 100vh (não min-height) + overflow escondido aqui —
   sidebar e topbar ficam sempre visíveis, só o miolo de cada página
   rola por dentro de si mesmo (.content). Pedido do usuário,
   30/09/2026: antes a página inteira rolava junto, sidebar e barra de
   filtros da Agenda saíam da tela. */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w-recolhida);
  flex-shrink: 0;
  background: var(--preto-quente);
  color: var(--bege-claro);
  display: flex;
  flex-direction: column;
  padding: var(--espaco-6) 0;
  overflow: hidden;
  transition: width 0.16s ease;
}
/* Recolhida por padrão (só ícones) — expande ao passar o mouse, pra
   sobrar mais espaço pra tela de trabalho (pedido do usuário,
   30/09/2026). O texto de cada item continua no DOM (accessibility
   tree ok), só fica invisível/​recortado enquanto recolhido. */
.sidebar:hover, .sidebar:focus-within, .menu-fixo .sidebar {
  width: var(--sidebar-w);
}
.sidebar__label { opacity: 0; transition: opacity 0.1s ease; white-space: nowrap; }
.sidebar:hover .sidebar__label, .sidebar:focus-within .sidebar__label, .menu-fixo .sidebar__label { opacity: 1; }

.sidebar__logo {
  padding: 0 var(--espaco-6) var(--espaco-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--espaco-4);
  opacity: 0;
  transition: opacity 0.1s ease;
}
.sidebar:hover .sidebar__logo, .sidebar:focus-within .sidebar__logo, .menu-fixo .sidebar__logo { opacity: 1; }
.sidebar__logo { text-align: center; }  /* logo centralizado (teste DA-01, 22/10/2026) */
.sidebar__logo img { max-width: 140px; height: auto; display: block; margin: 0 auto; }
/* Alfinete de fixar o menu aberto (22/10/2026): canto do logo, aceso quando fixado. */
.sidebar__logo { position: relative; }
.sidebar__alfinete {
  position: absolute; top: -12px; right: 8px; width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px; cursor: pointer;
  color: rgba(253,245,232,0.45);
}
.sidebar__alfinete:hover { background: rgba(255,255,255,0.08); color: var(--bege-claro); }
.menu-fixo .sidebar__alfinete { color: var(--bege-claro); background: rgba(255,255,255,0.12); }
.menu-fixo .sidebar__alfinete svg { transform: rotate(45deg); }

/* Nome do salão logo abaixo do logo, dentro do mesmo bloco (DA-01, 22/10/2026). */
.sidebar__estabelecimento {
  text-align: center;
  padding-top: var(--espaco-3);
  font-size: var(--fs-corpo-sec);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(253,245,232,0.7);
  white-space: nowrap;
}

/* Rola quando a tela é baixa (14/10/2026: em notebook/tablet, Configurações
   ficava escondido abaixo da borda, sem como chegar). Barra invisível,
   só o rolar. */
.nav-menu { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.nav-menu::-webkit-scrollbar { display: none; }

.nav-menu__item a {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: 11px var(--espaco-6);
  color: var(--bege-claro);
  text-decoration: none;
  font-size: var(--fs-corpo);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-menu__item a:hover {
  background: rgba(255,255,255,0.06);
}
.nav-menu__item.is-active a {
  background: var(--primario-medio);
  border-left-color: var(--primario-claro);
  color: var(--branco);
  font-weight: 600;
}
.nav-menu__item.is-disabled a {
  color: rgba(253,245,232,0.35);
  cursor: default;
  pointer-events: none;
}
.nav-menu__badge {
  margin-left: auto;
  font-size: var(--fs-micro);
  background: rgba(255,255,255,0.1);
  padding: 2px var(--espaco-2);
  border-radius: 999px;
}
.nav-menu__icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Submenu de Configurações (pedido do usuário, 09/10/2026) — lista
   indentada sempre visível embaixo do item pai; reaproveita
   `.sidebar__label` nos links de baixo também, então só aparece com o
   sidebar recolhido/expandido do mesmo jeito que o resto (ver
   `.sidebar:hover`). */
.nav-menu__submenu { list-style: none; margin: 0; padding: 2px 0 6px; }
.nav-menu__submenu a {
  display: block;
  padding: 7px var(--espaco-6) 7px calc(var(--espaco-6) + 18px + var(--espaco-3));
  color: rgba(253,245,232,0.75);
  text-decoration: none;
  font-size: var(--fs-corpo-sec);
  border-left: 3px solid transparent;
}
.nav-menu__submenu a:hover { background: rgba(255,255,255,0.06); color: var(--bege-claro); }
.nav-menu__submenu li.is-active a {
  color: var(--branco);
  font-weight: 600;
  border-left-color: var(--primario-claro);
}

/* Grupos do menu (pedido do usuário, 17/10/2026 — menu aninhado como o
   do Trinks; estrutura em core/menu.py). <details>/<summary> nativo, sem
   JS: o grupo da tela atual nasce aberto. Com o sidebar recolhido (só
   ícones) os sub-itens somem, pra não deixar buracos entre os ícones. */
.nav-menu__grupo summary {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: 11px var(--espaco-6);
  color: var(--bege-claro);
  font-size: var(--fs-corpo);
  border-left: 3px solid transparent;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.nav-menu__grupo summary::-webkit-details-marker { display: none; }
.nav-menu__grupo summary:hover { background: rgba(255,255,255,0.06); }
.nav-menu__grupo summary:focus-visible { outline: 2px solid var(--primario-claro); outline-offset: -2px; }
.nav-menu__grupo.is-active-grupo summary { border-left-color: var(--primario-claro); color: var(--branco); font-weight: 600; }
.nav-menu__seta { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; transition: transform 0.15s ease, opacity 0.1s ease; }
.nav-menu__grupo details[open] .nav-menu__seta { transform: rotate(90deg); }
:root:not(.menu-fixo) .sidebar:not(:hover):not(:focus-within) .nav-menu__grupo .nav-menu__submenu { display: none; }

.sidebar__footer {
  padding: var(--espaco-4) var(--espaco-6) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-corpo-sec);
}
.sidebar__footer form { margin: var(--espaco-2) 0 0; }
.sidebar__footer button {
  background: none;
  border: none;
  color: rgba(253,245,232,0.7);
  cursor: pointer;
  padding: 0;
  font-size: var(--fs-corpo-sec);
  text-decoration: underline;
}

/* ─── Área de conteúdo ─── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  background: var(--branco);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: var(--espaco-4) var(--espaco-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: var(--espaco-3);
  flex-shrink: 0;
}
/* Abas de área (pedido do dono, 02/11/2026 — "como abas do Chrome"):
   fileira escura acima da barra de título; a aba ativa é branca e emenda
   na `.topbar`. Muitas abas no celular = rolagem lateral, sem quebrar linha. */
.abas-area {
  display: flex;
  gap: var(--espaco-1);
  align-items: flex-end;
  flex-shrink: 0;
  padding: var(--espaco-2) var(--espaco-8) 0;
  background: var(--preto-quente);
  overflow-x: auto;
  scrollbar-width: none;
}
.abas-area__aba {
  padding: var(--espaco-2) var(--espaco-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  font-weight: 600;
  font-size: var(--fs-corpo);
  text-decoration: none;
  white-space: nowrap;
}
.abas-area__aba:hover { background: rgba(255,255,255,0.16); color: var(--branco); }
.abas-area__aba.is-ativa { background: var(--branco); color: var(--primario); }
@media (max-width: 768px) { .abas-area { padding: var(--espaco-2) var(--espaco-4) 0; } }
/* Vão entre o título e os filtros à direita — some sozinho (0 largura,
   sem gap) quando nenhuma tela preenche `topbar_meio` (pedido do
   usuário, 04/10/2026 — abas de visualização da Agenda). */
/* Alinhadas à esquerda, perto do título "Agenda" (pedido do usuário,
   04/10/2026) — antes `justify-content: center` jogava pro meio do
   vão, longe do título. */
.topbar__meio { flex: 1; display: flex; justify-content: flex-start; min-width: 0; margin-left: var(--espaco-5); }
.topbar__meio:empty { flex: 0; margin-left: 0; }
.agenda-abas { display: flex; gap: var(--espaco-1); align-items: flex-end; }
/* Contorno/sombra reforçados (pedido do usuário, 04/10/2026 — "não está
   dando pra perceber que são abas") — antes a aba ativa tinha fundo
   branco em cima de um `.topbar` também branco, quase sem contraste
   nenhum. Agora a inativa tem fundo bege sólido com borda visível, e a
   ativa vira um bloco de cor cheia (`--primario`) com sombra, impossível
   de confundir com o resto da barra. */
.agenda-abas__item {
  padding: var(--espaco-2) var(--espaco-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--bege-claro);
  color: var(--texto-suave);
  font-weight: 600;
  font-size: var(--fs-corpo-sec);
  text-decoration: none;
  border: 1px solid var(--bege);
  border-bottom: none;
}
.agenda-abas__item:hover { color: var(--texto); background: var(--bege); }
.agenda-abas__item--ativa {
  background: var(--primario);
  color: var(--branco);
  border: 1px solid var(--primario-escuro);
  border-bottom: none;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.18);
  position: relative;
  z-index: 1;
}
.agenda-abas__item--ativa:hover { background: var(--primario); color: var(--branco); }

/* Popup ao clicar na foto do profissional na grade (pedido do usuário,
   04/10/2026) — posicionado via JS (top/left), mesmo tratamento visual
   do cartão de detalhes do agendamento (position: fixed pra não ficar
   preso no scroll de uma coluna específica). */
.popup-avatar-profissional {
  position: fixed;
  z-index: 200;
  width: 200px;
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 32px rgba(0,0,0,0.22);
  padding: var(--espaco-4);
  text-align: center;
}
.popup-avatar-profissional__foto img,
.popup-avatar-profissional__foto-vazio {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primario-suave);
  color: var(--primario);
  font-weight: 700;
  font-size: 1.5rem;
}
.popup-avatar-profissional__nome {
  margin-top: var(--espaco-2);
  font-weight: 600;
}
.topbar__titulo {
  font-family: var(--font-titulo);
  font-size: var(--fs-pagina);
  color: var(--preto);
  margin: 0;
}
.topbar__usuario { font-size: var(--fs-corpo-sec); color: var(--texto-suave); }

.topbar__acoes { display: flex; align-items: center; gap: var(--espaco-3); flex-wrap: wrap; row-gap: var(--espaco-2); }
.topbar__icone {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--texto-suave);
  padding: 7px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar__icone:hover { background: var(--primario-suave); color: var(--primario); }
.topbar__icone:disabled { cursor: not-allowed; opacity: 0.35; }
.topbar__icone:disabled:hover { background: none; color: var(--texto-suave); }
.topbar__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.topbar__avatar {
  overflow: hidden;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primario);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-corpo-sec);
  font-weight: 600;
  font-family: var(--font-corpo);
  flex-shrink: 0;
}

/* ─── Painel flutuante de um ícone da topbar (ex.: olho de tamanho da
   agenda) — some sozinho quando o mouse sai da área, sem precisar de
   clique pra fechar. ─── */
.topbar__flutuante { position: relative; }
.topbar__flutuante-painel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--espaco-3);
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  padding: var(--espaco-4);
  min-width: 220px;
  z-index: 30;
}
/* Área de segurança invisível cobrindo o vão entre o ícone e o painel
   (e uma margem extra ao redor) — sem isso, o mouse "sai" do elemento
   em hover no meio do caminho e o painel some antes de dar tempo de
   alcançá-lo (reportado pelo usuário, 30/09/2026). */
.topbar__flutuante-painel::before {
  content: '';
  position: absolute;
  top: -18px;
  left: -20px;
  right: -20px;
  height: 18px;
}
.topbar__flutuante:hover .topbar__flutuante-painel,
.topbar__flutuante:focus-within .topbar__flutuante-painel { display: block; }

.content { padding: var(--espaco-8); flex: 1; overflow-y: auto; overflow-x: hidden; }
/* Tablet/celular: menos respiro lateral pra sobrar largura útil; a
   sidebar já é recolhida (só ícones) por padrão (revisão de UX, 14/10/2026). */
@media (max-width: 768px) {
  .content { padding: var(--espaco-4); }
  .topbar { padding: var(--espaco-3) var(--espaco-4); }
}

/* ─── Cards genéricos ───
   Separador de BLOCO (card de outro): fundo branco + sombra sutil
   sobre o fundo creme da página — nunca borda, nunca os dois juntos
   (ver Design System, seção "Separadores"). ─── */
.card {
  background: var(--branco);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  padding: var(--espaco-6);
}
.card + .card { margin-top: var(--espaco-5); }
.card h2 {
  font-family: var(--font-titulo);
  font-size: var(--fs-secao);
  color: var(--preto);
  margin: 0 0 var(--espaco-4);
}

/* ─── Mensagens (Django messages) ───
   Semântica: sucesso = verde, alerta/erro = cor de perigo — nunca a
   cor de marca (marca é ação, não estado). ─── */
.mensagens { margin-bottom: var(--espaco-5); }
.mensagem {
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-corpo);
  margin-bottom: var(--espaco-2);
}
.mensagem--success { background: var(--sucesso-fundo); color: #15803d; }
.mensagem--warning { background: var(--alerta-fundo); color: #9a5b0a; }
.mensagem--error   { background: var(--perigo-fundo); color: #b91c1c; }

.venda-rapida__formas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--espaco-2); margin-top: 6px; }
.venda-rapida__formas .btn { min-height: 48px; }
.autocomplete-resultados li.is-ativo { background: var(--primario-claro, #eef); }
.autocomplete-resultados li.autocomplete-resultados__novo { font-weight: 600; border-top: 1px solid #e5e5e5; }

/* Popup de mensagem do Django (sucesso/erro/aviso) que some sozinho
   (pedido do usuário, 09/10/2026) — fixo no canto, empilha se tiver
   mais de uma, nunca bloqueia clique no resto da tela: o CONTAINER tem
   `pointer-events: none`, só cada card de mensagem recupera `auto`.
   Timer de sumiço em app.js (`iniciarToastMensagens`). */
.toast-mensagens {
  /* Centralizado (pedido do usuário, 09/10/2026 — "está no canto da
     tela, deixe mais centralizado"), mesma posição do toast de
     "desfazer" já usado na Agenda (ver `.toast` abaixo), só que no
     topo em vez de embaixo — não disputa espaço com o toast de
     desfazer quando os dois aparecem juntos. */
  position: fixed;
  top: var(--espaco-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-2);
  max-width: 420px;
  width: calc(100% - 32px);
  pointer-events: none;
}
.toast-mensagem {
  margin-bottom: 0;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  animation: toast-mensagem-entrar 0.2s ease-out;
}
.toast-mensagem.is-saindo { animation: toast-mensagem-sair 0.3s ease-in forwards; }
@keyframes toast-mensagem-entrar {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-mensagem-sair {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* ─── Botões ─── */
.btn {
  display: inline-block;
  padding: var(--espaco-3) var(--espaco-5);
  border-radius: var(--radius-md);
  border: none;
  font-size: var(--fs-corpo);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-corpo);
}
.btn-primario { background: var(--primario); color: var(--branco); }
.btn-primario:hover { background: var(--primario-escuro); }
.btn-secundario { background: var(--bege-claro); color: var(--texto); }
.btn-secundario:hover { background: var(--bege); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* Frase embaixo do botão travado por campo obrigatório (js/acoes.js, 02/11/2026). */
.dica-obrigatorio { color: var(--texto-suave); font-size: 0.85rem; margin: 6px 0 0; }
.btn-sm { padding: var(--espaco-2) var(--espaco-4); font-size: var(--fs-corpo-sec); }
/* Botão extra-compacto (pedido do usuário, 04/10/2026 — linha de
   lançamento avulso da comanda, 8 botões precisando caber numa linha
   só). */
.btn-xs { padding: 4px 5px; font-size: var(--fs-legenda); }
/* Link de texto discreto (ex.: "Ver mais" no histórico da cliente,
   pedido do usuário, 01/10/2026) — ação secundária, não merece o peso
   visual de um `.btn-secundario`. */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--espaco-2);
  color: var(--primario);
  font-size: var(--fs-corpo-sec);
  font-weight: 600;
  font-family: var(--font-corpo);
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

/* Botão de alternância (ex.: "Agendamento recorrente" — pedido do
   usuário, 01/10/2026, era um checkbox simples) — um `<button>` de
   verdade com um "selo" quadrado que vira check quando ativo
   (`aria-pressed="true"`), em vez de disfarçar um `<input
   type=checkbox>` de botão. */
.btn-toggle { display: inline-flex; align-items: center; gap: var(--espaco-2); }
.btn-toggle__marca {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid currentColor;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-toggle[aria-pressed="true"] {
  background: var(--primario);
  color: var(--branco);
}
.btn-toggle[aria-pressed="true"] .btn-toggle__marca::after {
  content: '✓';
  font-size: 11px;
  line-height: 1;
}

/* ─── Card essencial (topo do formulário — sempre visível) ─── */
.card--essencial {
  border: 2px solid var(--primario-medio);
}
.card--essencial .form-actions {
  align-items: center;
}

/* ─── Seções secundárias colapsáveis (<details>/<summary> nativo — sem
   dependência de JS para abrir/fechar, funciona com teclado de graça).
   Herdam padding/fundo/sombra de .card; só ajustamos o <summary>. ─── */
details.card--secao summary {
  cursor: pointer;
  font-family: var(--font-titulo);
  font-size: var(--fs-card);
  color: var(--texto-suave);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-1) 0;
}
details.card--secao summary::-webkit-details-marker { display: none; }
details.card--secao summary::before {
  content: '▸';
  font-size: var(--fs-legenda);
  color: var(--primario);
  transition: transform 0.15s ease;
}
details.card--secao[open] summary::before { transform: rotate(90deg); }
details.card--secao[open] summary { color: var(--preto); }

/* ─── Formulários ─── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-4);
}
/* Campos curtos (data, hora, número, moeda) não precisam dos 220px
   mínimos acima — nessa largura, Data/Hora/Duração/Valor sempre
   quebravam pra 2 linhas (pedido do usuário, 01/10/2026). */
.form-grid--compacto { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.form-field { display: flex; flex-direction: column; }
/* Bug real encontrado 01/10/2026 (campo "Repetir até" aparecia mesmo
   escondido via atributo `hidden`): `display: flex` acima é uma regra
   de autor, que empata em especificidade com o `[hidden]{display:none}`
   padrão do navegador e GANHA (CSS de autor sempre vence o do user
   agent em empate de especificidade) — sem essa regra explícita, o
   atributo `hidden` não tinha efeito nenhum em qualquer `.form-field`.
   Mesmo padrão já usado em outros componentes deste arquivo (ver
   `.modal-overlay[hidden]`, `.menu-contexto[hidden]`, etc.). */
.form-field[hidden] { display: none; }
.form-field label {
  font-size: var(--fs-corpo-sec);
  color: var(--texto-suave);
  margin-bottom: var(--espaco-1);
}
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=date],
.form-field input[type=time],
.form-field input[type=number],
.form-field select,
.form-field textarea {
  padding: 6px var(--espaco-3);
  border: 1px solid #ddd;
  border-radius: var(--radius-md);
  font-family: var(--font-corpo);
  font-size: var(--fs-corpo);
}
.form-field .helptext { font-size: var(--fs-legenda); color: var(--texto-suave); margin-top: 2px; }

/* ─── Ícone de informação com tooltip (pedido do usuário, 04/10/2026)
   — diretriz geral do projeto: explicação de funcionalidade fica
   escondida atrás de um ⓘ ao lado do termo, não mais num parágrafo
   `.helptext` sempre visível. "Telas de trabalho limpas, mas sempre
   com as explicações" — aplicar em todo campo/rótulo NOVO que precise
   de explicação (ver REQUISITOS.md, Princípio nº 7). CSS puro
   (`:hover`/`:focus`, sem JS), mesmo espírito do balão de slot da
   grade "Por Serviço". ─── */
.info-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bege-claro);
  color: var(--texto-suave);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
}
.info-icone:hover, .info-icone:focus { background: var(--primario-suave); color: var(--primario); }
.info-icone__balao {
  display: none;
  /* `fixed` (22/10/2026): flutua por cima da tela — dentro de área com
     rolagem (tabela) o `absolute` aumentava a área, a barra de rolagem
     aparecia e a tela dava um salto. A posição exata é calculada em
     app.js (balões de explicação); o top/left abaixo é só o padrão. */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 230px;
  background: var(--texto);
  color: var(--branco);
  font-size: var(--fs-micro);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  text-align: left;
  line-height: 1.4;
  white-space: normal;
  cursor: default;
}
.info-icone:hover .info-icone__balao,
.info-icone:focus .info-icone__balao { display: block; }
/* Variante "abre pra baixo" (pedido do usuário, 04/10/2026) — pro ícone
   em cabeçalho de tabela (`<th>`), que fica na borda de CIMA de um
   wrapper com `overflow-x: auto` (vira `overflow-y: auto` sozinho,
   regra do CSS): o balão de cima (padrão) tentava nascer ACIMA do
   wrapper e ficava cortado pelo scroll — bug real, visto na tela
   depois de implementar. Cabeçalho de tabela sempre usa esta variante. */
.info-icone--baixo .info-icone__balao { bottom: auto; top: calc(100% + 8px); }
.form-field .errorlist { color: var(--perigo); font-size: var(--fs-legenda); margin: var(--espaco-1) 0 0; padding: 0; list-style: none; }

.checkbox-linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) 0;
  font-size: var(--fs-corpo);
}
.checkbox-linha input { width: auto; }

.radio-linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: 6px 0;
  font-size: var(--fs-corpo);
  cursor: pointer;
}
.radio-linha input { width: auto; }

/* Guiamento do preenchimento do formulário de agendamento (pedido do
   usuário, 01/10/2026): destaca sutilmente o Cliente (primeiro passo
   natural, nunca bloqueado) e esmaece visualmente os campos que ainda
   não fazem sentido preencher (ver `aplicarEstagio` em
   _form_corpo.html) — só feedback visual, a validação de verdade
   continua no required/no backend. */
.campo-cliente--destaque input[type=text] {
  border-color: var(--primario-claro);
  box-shadow: 0 0 0 3px var(--primario-suave);
}
.etapa-bloqueada { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; }

.profissionais-disponiveis {
  margin-top: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--primario-suave);
  border-radius: var(--radius-md);
}
/* "Estilo tabela" — 3/4 colunas, quebrando linha sozinha (pedido do
   usuário, 01/10/2026, era uma lista empilhada vertical demais).
   `auto-fill`+`minmax(200px,1fr)` dá 3 ou 4 colunas dependendo da
   largura real disponível (o modal de agendamento tem 960px, menos
   padding — ver `#modal-agendamento` em app.css), sem fixar um número
   exato que quebraria em telas mais estreitas. */
.profissionais-disponiveis__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px var(--espaco-3);
}

.form-actions { margin-top: var(--espaco-6); display: flex; gap: var(--espaco-3); }

/* ─── Telefones (formset) ─── */
.telefone-linha {
  display: grid;
  /* Número não precisa esticar até a borda do card (pedido do usuário,
     01/10/2026) — 200px já sobra pro maior formato (XX) XXXXX-XXXX. */
  grid-template-columns: 140px 200px 110px auto;
  gap: var(--espaco-3);
  align-items: center;
  margin-bottom: var(--espaco-2);
}

/* ─── Profissionais preferido/excluído no cadastro de clientes (pedido
   do usuário, 01/10/2026) — dois blocos lado a lado, pra não confundir
   "aviso" (preferido) com "bloqueio" (excluído); dentro de cada bloco,
   checkbox por profissional, agrupado por categoria/área principal. ─── */
.profissionais-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-5);
  align-items: start;
}
/* Padding igual nos dois blocos (não só no excluído) — senão o
   conteúdo de um lado começa mais embaixo/mais à direita que o outro,
   desalinhando os grupos lado a lado. */
.secao-profissionais__bloco { padding: var(--espaco-3); border-radius: var(--radius-md); }
.secao-profissionais__bloco--restricao { background: var(--alerta-fundo); }
.profissionais-grupo + .profissionais-grupo { margin-top: var(--espaco-3); }
.profissionais-grupo__titulo {
  font-size: var(--fs-legenda);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  border-top: 1px solid #ddd;
  padding-top: var(--espaco-2);
  margin: 0;
}

/* "Profissionais habilitados" no cadastro de Serviço (pedido do
   usuário, 02/10/2026 — "aproveitar melhor os espaços") — colunas lado
   a lado por categoria, em vez de lista vertical única; a categoria do
   próprio serviço vem primeiro (view já ordena, CSS só exibe em linha).
   Reaproveita `.profissionais-grupo__titulo` pro rótulo, mas sem o
   border-top (aqui cada coluna já começa com o título, não precisa de
   separador). */
.profissionais-colunas { display: flex; flex-wrap: wrap; gap: var(--espaco-6); align-items: start; }
.profissionais-coluna { min-width: 170px; }
.profissionais-coluna .profissionais-grupo__titulo { border-top: none; padding-top: 0; margin-bottom: var(--espaco-1); }
.profissionais-grupo:first-child .profissionais-grupo__titulo { border-top: none; padding-top: 0; }

/* "Serviços habilitados" no cadastro de Profissional (pedido do
   usuário, 01/10/2026) — checkbox + duração alternativa opcional lado
   a lado, por serviço. Colunas por categoria (02/10/2026, mesmo
   tratamento da tela inversa) — mais larga que `.profissionais-coluna`
   porque cada linha aqui carrega um campo de duração a mais.
   Rolagem horizontal com a 1ª coluna (área principal do profissional,
   já ordenada primeiro pela view) congelada à esquerda — pedido do
   usuário, 09/10/2026: com ~20 categorias lado a lado, sem isso a
   coluna de referência sai de vista ao rolar pra direita. */
.servicos-colunas-scroll-topo { overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: var(--espaco-3); }
.servicos-colunas-scroll-topo__espacador { height: 1px; }
.servicos-colunas-scroll { overflow-x: auto; padding-bottom: var(--espaco-2); }
.servicos-colunas { display: flex; flex-wrap: nowrap; gap: var(--espaco-6); align-items: start; }
.servicos-coluna { min-width: 240px; flex-shrink: 0; }
.servicos-coluna--fixa {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--branco);
  padding-right: var(--espaco-4);
  box-shadow: 4px 0 6px -4px rgba(0,0,0,0.15);
}
.servicos-coluna .profissionais-grupo__titulo { border-top: none; padding-top: 0; margin-bottom: 0; }
.servicos-coluna__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-2); margin-bottom: var(--espaco-1); }
.servicos-coluna__acoes { display: flex; gap: var(--espaco-2); white-space: nowrap; }
.servicos-habilitar-todos, .servicos-desabilitar-todos { font-size: var(--fs-legenda); white-space: nowrap; }
.servico-habilitado-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); }
.servico-habilitado-linha .checkbox-linha { flex: 1; padding: var(--espaco-1) 0; }
.servico-habilitado-duracao { width: 60px; padding: 4px var(--espaco-2) !important; }
.servico-habilitado-comissao { width: 60px; padding: 4px var(--espaco-2) !important; }

/* Grade de Horários do Profissional desligada (toggle "Personalizar
   horário" desmarcado, pedido do usuário, 09/10/2026) — modo leitura
   mostrando a grade geral, sem deixar clicar/abrir o seletor. */
.seletor-horario.is-desabilitado { pointer-events: none; opacity: 0.55; }

/* ─── Foto do Profissional — prévia + "Alterar"/"Excluir" lado a lado
   (pedido do usuário, 09/10/2026 — troca do widget padrão do Django,
   que mostrava o caminho cru do arquivo no servidor e um checkbox
   "Limpar" confuso) + recorte circular antes de salvar (a foto da
   Raquel entrou cortada sem isso, ver CHANGELOG). ─── */
.foto-profissional { display: flex; align-items: center; gap: var(--espaco-3); }
.foto-profissional__preview {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: var(--bege-claro); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 1px solid #ddd;
}
.foto-profissional__preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-profissional__placeholder { font-size: var(--fs-legenda); color: var(--texto-suave); }
.foto-profissional__acoes { display: flex; gap: var(--espaco-2); }

/* Sub-seções dentro de um ÚNICO card (pedido do usuário, 09/10/2026 —
   "junte num bloco só, mas de forma organizada" os blocos essencial,
   acesso, dados profissionais, mais dados pessoais e profissional
   parceiro do cadastro de Profissional, antes espalhados em vários
   `<details>` colapsáveis). Reaproveita a estética de
   `.profissionais-grupo__titulo`, span de toda a largura do grid. */
.form-subsecao-titulo {
  grid-column: 1 / -1;
  font-size: var(--fs-legenda);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  border-top: 1px solid #ddd;
  padding-top: var(--espaco-3);
  margin: var(--espaco-2) 0 0;
}
.form-subsecao-titulo:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* CNPJ do profissional parceiro — campo estreito (pedido do usuário,
   09/10/2026, "não faz sentido o campo CNPJ ser tão grande"): 18
   caracteres no máximo (XX.XXX.XXX/XXXX-XX), não precisa da largura
   cheia da coluna do grid. */
.campo-cnpj { max-width: 200px; }
.campo-cep { max-width: 140px; }

/* Número de destaque simples (pedido do usuário, 09/10/2026 — estoques
   do Salão/Almoxarifado no cadastro de Produto). */
.valor-grande { font-size: var(--fs-valor-grande); font-weight: 700; margin: 0; color: var(--preto); }

/* Agência/Conta + dígito verificador lado a lado (pedido do usuário,
   09/10/2026 — dados bancários do Profissional Parceiro). */
.campo-com-dv { display: flex; gap: var(--espaco-2); }
.campo-com-dv .campo-dv { max-width: 56px; }

/* Campos/seções desabilitados pelo Vínculo escolhido (pedido do
   usuário, 09/10/2026 — "inabilite de forma clara e visível, deixando
   óbvio que não dá pra preencher"): opacidade reduzida + aviso de texto
   visível, nunca só o atributo `disabled` sozinho (fácil de passar
   despercebido). Ver `aplicarVinculo()` em profissionais/form.html. */
.form-field.is-desabilitado-vinculo { opacity: 0.5; }
.form-field.is-desabilitado-vinculo input,
.form-field.is-desabilitado-vinculo select { background: var(--bege-claro); cursor: not-allowed; }
.aviso-campo-desabilitado {
  margin: 4px 0 0; font-size: var(--fs-legenda); color: var(--perigo);
}
details.card--secao.is-desabilitado-vinculo { opacity: 0.55; }
details.card--secao.is-desabilitado-vinculo summary { cursor: not-allowed; }
.aviso-secao-desabilitada {
  margin: 4px 0 0; font-size: var(--fs-corpo-sec); font-weight: 600; color: var(--perigo);
}

.modal-caixa--cropper { width: 380px; }
.cropper__viewport {
  width: 280px; height: 280px; margin: 0 auto; border-radius: 50%;
  overflow: hidden; position: relative; background: var(--bege-claro);
  cursor: grab; touch-action: none;
}
.cropper__viewport.is-arrastando { cursor: grabbing; }
.cropper__viewport img {
  position: absolute; top: 50%; left: 50%; max-width: none; max-height: none;
  user-select: none; -webkit-user-drag: none;
}
.servico-habilitado-duracao:disabled { background: var(--bege-claro); opacity: 0.6; }

/* ─── Tabela de listagem ───
   Separador de ITEM (linha de outra): linha fina — nunca fundo
   alternado (ver Design System, seção "Separadores"). ─── */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left;
  font-size: var(--fs-legenda);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 2px solid var(--bege-claro);
}
.tabela td {
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 1px solid var(--bege-claro);
  font-size: var(--fs-corpo);
}
.tabela tr:hover td { background: var(--primario-suave); }
/* Tabela larga em tablet/celular rola de lado dentro do próprio card em
   vez de cortar colunas (.content tem overflow-x: hidden); min-width
   evita espremer colunas. Fora: .card--essencial (formulários com
   balões/autocomplete que o overflow cortaria) (revisão de UX, 14/10/2026). */
.content .card:not(.card--essencial):has(> table.tabela),
.content .card:not(.card--essencial):has(> div > table.tabela) { overflow-x: auto; }
.content .card:not(.card--essencial) > table.tabela,
.content .card:not(.card--essencial) > div > table.tabela { min-width: 560px; }
.tabela a { color: var(--primario); text-decoration: none; font-weight: 600; }
.tabela a:hover { text-decoration: underline; }
/* Botão-link dentro de tabela mantém a cor do botão (24/10/2026: texto sumia no fundo primário). */
.tabela a.btn { font-weight: 600; text-decoration: none; }
.tabela a.btn-primario, .tabela a.btn-primario:hover { color: var(--branco); }
.tabela a.btn-secundario { color: var(--texto); }

/* Tabela compacta (pedido do usuário, 08/10/2026 — roster do Planejador
   de Eventos: fonte grande + duração em bloco empilhado deixava cada
   linha alta e espaçosa demais). Reduz fonte/padding e põe os controles
   de duração lado a lado numa linha só, em vez de empilhados. */
.tabela--compacta th, .tabela--compacta td { padding: var(--espaco-2) var(--espaco-3); font-size: var(--fs-corpo-sec); }
.evento-roster-duracao-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  font-size: var(--fs-corpo-sec);
}
.evento-roster-duracao-form label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.evento-roster-duracao-form select { padding: 2px 4px; font-size: var(--fs-corpo-sec); width: 68px; }
/* Pedido do usuário, 08/10/2026: o botão Salvar ficava logo depois do
   último select — em linhas com menos campos (só Penteado) ele nascia
   mais à esquerda que nas linhas com mais campos (Penteado+Maquiagem),
   ziguezagueando. `margin-left: auto` empurra sempre pro fim da coluna
   (compartilhada entre as linhas da tabela), alinhando todos. */
.evento-roster-duracao-form button { margin-left: auto; }

/* Composição do evento em matriz — cada papel (Noiva/Madrinhas/Mãe da
   Noiva/Mãe do Noivo/Daminhas) numa coluna própria, mesma largura e
   alinhamento (pedido do usuário, 08/10/2026 — era uma fileira de
   caixas de tamanhos desiguais). */
.evento-composicao-matriz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--espaco-4);
}
.evento-composicao-coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-3);
  border: 1px solid #e8d9b8;
  border-radius: var(--radius-md);
  text-align: center;
}
.evento-composicao-coluna__titulo {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
}
.evento-composicao-coluna select { width: 100%; }
.evento-composicao-coluna label.evento-composicao-coluna__campo { font-size: var(--fs-corpo-sec); color: var(--texto-suave); }

/* Clientes do evento em formato de planilha (pedido do usuário,
   08/10/2026) — 1 linha de tabela por cliente em vez de 1 card grande
   cada, bem mais rápido de bater o olho/preencher em sequência. */
.evento-clientes-tabela select,
.evento-clientes-tabela input[type=number],
.evento-clientes-tabela input[type=text] {
  padding: 2px 4px;
  font-size: var(--fs-corpo-sec);
}
.evento-clientes-tabela select { width: 90px; }
.evento-clientes-tabela input[type=number] { width: 60px; }
.evento-profissional-inline input[type=text] { width: 100px; }

/* Edição em massa de Serviços (pedido do usuário, 02/10/2026) — coluna
   Nome congelada à esquerda enquanto o resto rola horizontalmente
   (tabela mais larga em modo edição: categoria, duração, preço, ativo,
   usa produtos, tudo editável de uma vez). */
.tabela--edicao { table-layout: fixed; min-width: 760px; }
.tabela__coluna-fixa {
  position: sticky;
  left: 0;
  background: var(--branco);
  box-shadow: 1px 0 0 var(--bege-claro);
  min-width: 220px;
}
.tabela--edicao input[type=text],
.tabela--edicao input[type=number],
.tabela--edicao select { width: 100%; }

.busca-form { margin-bottom: var(--espaco-5); display: flex; gap: var(--espaco-3); }
.busca-form input {
  flex: 1;
  max-width: 320px;
  padding: 6px var(--espaco-3);
  border: 1px solid #ddd;
  border-radius: var(--radius-md);
}

.topo-lista { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--espaco-5); }

/* ─── Paginação padrão (pedido do usuário, 11/10/2026) ─── */
.paginacao {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--espaco-3); margin-top: var(--espaco-4);
}
.paginacao__por-pagina { display: flex; align-items: center; gap: var(--espaco-2); }
.paginacao__por-pagina select { width: auto; }
.paginacao__paginas { display: flex; align-items: center; gap: var(--espaco-3); }
.paginacao__info { color: var(--cor-texto-secundario, #666); font-size: var(--fs-corpo-sec); white-space: nowrap; }

/* ─── Agenda: grade do dia ─── */
/* .content--agenda não tem padding-top (normalmente .content tem
   32px) — o respiro do topo vira padding-top do próprio
   .agenda-toolbar abaixo. Motivo: um elemento sticky "gruda" na borda
   do padding do ancestral com scroll, não na borda real do scroll, e
   margem negativa pra compensar isso é um combo (sticky + margem
   negativa) conhecido por ser inconsistente entre navegadores — deu
   errado na prática (bug reportado com print, 30/09/2026) mesmo tendo
   funcionado no teste automatizado. Zerar o padding do pai em vez de
   tentar invadi-lo é a solução robusta. */
/* `display:flex; flex-direction:column; overflow:hidden` (pedido do
   usuário, 01/10/2026 — ver comentário extenso em dia.html) — a PÁGINA
   não rola mais nesta tela; quem rola agora é só `.agenda-scroll`,
   dentro de `.agenda-grade-wrap` (`flex: 1`, abaixo), o que faz
   `position: sticky` dentro dela reagir à rolagem de verdade (antes
   reagia à rolagem de `.agenda-scroll`, que nunca rolava sozinha —
   bug real, cabeçalho sumia em vez de congelar). */
.content--agenda { padding-top: 0; display: flex; flex-direction: column; overflow: hidden; }

.agenda-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-4);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--creme);
  padding-top: var(--espaco-6);
  margin-bottom: var(--espaco-5);
}
.agenda-nav-data { display: flex; align-items: center; gap: var(--espaco-3); }
/* Destaque quando a data em tela NÃO é hoje (pedido do usuário,
   01/10/2026) — antes só o botão "Hoje" aparecendo sinalizava isso,
   fácil passar batido. Fundo âmbar sutil chama atenção sem precisar
   ler a data. */
.agenda-nav-data--outro-dia {
  background: var(--alerta-fundo);
  padding: 6px var(--espaco-3);
  border-radius: var(--radius-md);
}
.agenda-nav-data__label { font-family: var(--font-titulo); font-size: var(--fs-secao); min-width: 200px; text-align: center; }
.agenda-nav-data__calendario { display: flex; align-items: center; justify-content: center; padding: var(--espaco-2); }
.agenda-nav-data__input-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Legenda de status sempre visível (pedido do usuário, 01/10/2026) —
   antes só dava pra saber o que cada cor da grade significava abrindo
   o dropdown "Status", escondido; quem olha a tela o dia inteiro
   precisa disso de relance. Reaproveita `.status-bolinha--{status}`
   (já existe, mesmo elemento usado no dropdown) pra garantir que a cor
   bate exatamente com a da grade. NA MESMA linha da data (dentro de
   `.agenda-toolbar`, `flex: 1` preenche o vão entre a navegação e
   "+ Agendar") — uma primeira versão botou numa linha própria abaixo
   da toolbar, mas isso comia altura útil da grade à toa (pedido do
   usuário, 01/10/2026, com print apontando o problema). */
.agenda-legenda {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-1) var(--espaco-5);
  font-size: var(--fs-legenda);
  color: var(--texto-suave);
}
.agenda-legenda__item { display: inline-flex; align-items: center; gap: 5px; }
/* "Atrasado" não tem `status-bolinha` própria (não é status de
   verdade) — um quadradinho com a mesma borda tracejada usada no bloco
   de verdade (`.agenda-bloco--atrasado`), não uma bolinha sólida, pra
   a legenda já ensinar visualmente que é "contorno por cima", não uma
   cor nova. */
.agenda-legenda__atrasado {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 2px dashed var(--perigo);
  flex-shrink: 0;
}
/* "Fora do horário" também não é um status de verdade (é o campo
   `pendente_autorizacao`, à parte do `status`) — mas ao contrário de
   "Atrasado" ele REPINTA o bloco (ver `.agenda-bloco--pendente-
   autorizacao` em cima), então a legenda usa uma bolinha sólida igual
   às de status de verdade, não o quadradinho tracejado do Atrasado. */
.agenda-legenda__pendente-autorizacao {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--roxo);
  flex-shrink: 0;
}

.agenda-grade-wrap {
  display: flex;
  background: var(--branco);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  overflow: hidden;
  /* Preenche o espaço vertical que sobra em `.content--agenda` (flex
     column, acima) depois da toolbar — é essa altura travada que faz
     `.agenda-scroll`, logo abaixo, ter rolagem de verdade (pedido do
     usuário, 01/10/2026). */
  flex: 1;
  min-height: 0;
}
.agenda-horarios {
  flex-shrink: 0;
  width: 56px;
  border-right: 1px solid var(--bege-claro);
  background: var(--branco);
  /* Gruda à esquerda em vez de ficar fisicamente fora da área de
     rolagem (pedido do usuário, 01/10/2026 — ver comentário em
     dia.html: por que mudou de "irmão flex fora do scroll" pra "sticky
     dentro do scroll"). `z-index` acima dos cabeçalhos de coluna (10)
     pra vencer no canto onde os dois se sobrepõem. */
  position: sticky;
  left: 0;
  z-index: 12;
}
.agenda-horarios__spacer {
  height: 64px;
  border-bottom: 1px solid var(--bege-claro);
  /* Acompanha o congelamento de `.agenda-coluna__header` (mesmo `top:
     0` — `.agenda-scroll` já começa logo depois da toolbar, não precisa
     medir altura nenhuma, pedido do usuário, 01/10/2026) — senão a
     coluna de horas rola sozinha e desalinha da grade enquanto os
     cabeçalhos de profissional ficam parados. É o canto superior
     esquerdo: também herda o `sticky left` do pai `.agenda-horarios`,
     só precisa do próprio `top` pra congelar nos dois eixos. */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--creme);
}
.agenda-horarios__corpo { position: relative; }
.agenda-horario-label {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  font-size: var(--fs-micro);
  color: var(--texto-suave);
  text-align: right;
  padding-right: var(--espaco-2);
}
/* O primeiro horário da grade (hoje 6h) fica bem no topo de
   `.agenda-horarios__corpo` (offset 0) — centralizar com
   `translateY(-50%)`, igual aos outros, jogava a metade de cima do
   texto pra fora da área visível (bug reportado pelo usuário,
   07/10/2026, print mostrando "6h" cortado). Só este, alinhado pelo
   topo em vez de centralizado — os demais continuam centralizados na
   própria linha, sem mudar nada no desenho da grade em si. */
.agenda-horario-label--primeira { transform: translateY(0); }

/* Linha do "agora" (pedido do usuário, 01/10/2026) — só existe/aparece
   vendo o dia de hoje; posição (`top`) calculada e atualizada a cada
   minuto via JS (`atualizarLinhaAgora`, dia.html). Um `<div>` por
   coluna (`.agenda-linha-agora`, mesmo padrão já usado pro hover-slot)
   + um marcador com a hora na régua de horários
   (`#agenda-horario-agora`) — juntos formam uma linha contínua
   cruzando a grade inteira, como em qualquer agenda de calendário. */
.agenda-linha-agora {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px solid var(--perigo);
  z-index: 3;
  pointer-events: none;
}
.agenda-linha-agora[hidden] { display: none; }
.agenda-horario-agora {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--perigo);
  padding-right: 2px;
  pointer-events: none;
}
.agenda-horario-agora[hidden] { display: none; }
.agenda-horario-agora::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--perigo);
}

.agenda-scroll {
  /* Rola os DOIS eixos agora, não só o horizontal (pedido do usuário,
     01/10/2026) — `.agenda-horarios` e `.agenda-coluna__header` viraram
     filhos dela (antes só `.agenda-colunas` era) especificamente pra
     isso: um scroll container precisa ter rolagem de verdade no eixo
     em que algo dentro dele tenta `position: sticky`, senão o sticky
     não tem o que "seguir". `height: 100%` preenche o `flex: 1` que
     `.agenda-grade-wrap` recebeu de `.content--agenda` (altura travada
     em cascata até aqui). */
  display: flex;
  /* `align-items: flex-start` (bug real, 01/10/2026 — reportado pelo
     usuário: "congela só até 12h, depois some de novo") — sem isso, o
     padrão do flex (`stretch`) ESPREME `.agenda-horarios` e
     `.agenda-colunas` pra caber só na altura VISÍVEL de `.agenda-scroll`
     (os ~500px da tela), em vez de deixar os dois crescerem com o
     conteúdo de verdade (~1700px, o dia inteiro) — e isso em cascata
     espreme cada `.agenda-coluna` também (mesmo problema, um nível
     abaixo, resolvido em `.agenda-colunas` logo ali embaixo). Como
     `position: sticky` só consegue "andar" dentro da altura real da
     caixa do pai, uma `.agenda-coluna` artificialmente baixa fazia o
     cabeçalho descolar assim que a rolagem passava da altura visível —
     batia exatamente com "até 12h" relatado. */
  align-items: flex-start;
  overflow: auto;
  flex: 1;
  min-height: 0;
  height: 100%;
  /* Barra mais grossa que o padrão do navegador — mais fácil de clicar
     e arrastar (pedido do usuário, 30/09/2026). */
  scrollbar-width: auto; /* Firefox: "auto" já é a mais grossa disponível */
}
.agenda-scroll::-webkit-scrollbar { height: 16px; width: 16px; }
.agenda-scroll::-webkit-scrollbar-track { background: var(--bege-claro); }
.agenda-scroll::-webkit-scrollbar-thumb {
  background: var(--bege);
  border-radius: var(--radius-md);
  border: 3px solid var(--bege-claro);
}
.agenda-scroll::-webkit-scrollbar-thumb:hover { background: var(--primario-claro); }
/* `align-items: flex-start` — mesmo motivo do comentário em
   `.agenda-scroll` logo acima, um nível abaixo: sem isso, cada
   `.agenda-coluna` também era espremida pra altura visível. */
.agenda-colunas { display: flex; min-width: max-content; align-items: flex-start; }
.agenda-coluna { flex-shrink: 0; border-right: 1px solid var(--bege-claro); }
/* "Por Profissional" (pedido do usuário, 04/10/2026) — sempre exatas
   15 colunas de DIA, todas visíveis ao mesmo tempo sem rolagem
   horizontal (ao contrário da Visão Geral, onde o número de
   profissionais é variável e PODE passar da tela de propósito — ver
   regras acima). Cada coluna divide o espaço disponível igualmente. */
.agenda-colunas--dias { min-width: 0; width: 100%; }
.agenda-coluna--dia { flex: 1 1 0; min-width: 0; }
.agenda-coluna__header {
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-weight: 600;
  font-size: var(--fs-corpo-sec);
  border-bottom: 1px solid var(--bege-claro);
  background: var(--creme);
  text-align: center;
  padding: var(--espaco-1) 6px;
  line-height: 1.2;
  /* Congelada ao rolar a agenda pra baixo (pedido do usuário,
     01/10/2026) — "o nome some, eu queria que ficasse". `top: 0` basta
     — `.agenda-scroll` (quem realmente rola agora, ver app.css mais
     acima) já começa logo depois da toolbar, sem gap nenhum pra
     compensar. z-index acima dos blocos de agendamento que passam por
     baixo ao rolar, abaixo do 12 de `.agenda-horarios` (perde pra ela
     no canto onde as duas se encontram). */
  position: sticky;
  top: 0;
  z-index: 10;
}
.agenda-coluna__info { display: flex; flex-direction: column; align-items: center; }
.agenda-coluna__area { font-weight: 400; font-size: var(--fs-micro); color: var(--texto-suave); }
/* Foto do profissional (pedido do usuário, 30/09/2026) — cadastrada
   pelo /admin/ por ora (tela de cadastro de Profissional com upload
   ainda não construída). Sem foto, mostra um círculo com a inicial do
   apelido. Em coluna "PP", some o nome/área e fica só a foto, pra
   economizar espaço (mesmo padrão visto no Trinks). */
.agenda-coluna__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bege);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Clicável (pedido do usuário, 04/10/2026 — abre o popup "Ir para a
     agenda diária de {nome}") — cursor de link avisa que dá pra clicar. */
  cursor: pointer;
}
.agenda-coluna__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agenda-coluna__avatar-vazio {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--primario-escuro);
  font-family: var(--font-corpo);
}
.agenda-coluna__header--compacto .agenda-coluna__info { display: none; }
/* Destaca a coluna de hoje na "Visão por Profissional" (pedido do
   usuário, 04/10/2026) — mesma cor do "Atrasado"/alerta já usada no
   resto da Agenda. */
.agenda-coluna__header--hoje { background: var(--primario-suave); }
.agenda-coluna__header--hoje .agenda-coluna__nome { color: var(--primario); }
/* Dia central escolhido na "Por Serviço" (pedido do usuário,
   04/10/2026) — borda pra destacar qual dia foi escolhido no
   calendário, já que a grade sempre mostra os 3 antes/depois dele. */
.agenda-coluna__header--central { box-shadow: inset 0 -3px 0 var(--primario); }
.agenda-coluna__corpo { position: relative; }

/* Faixa fora do horário de trabalho do profissional (pedido do usuário,
   09/10/2026) — só visual, `pointer-events: none` não atrapalha clique/
   arrastar. Listras diagonais em vez de cinza sólido pra não confundir
   com o fundo da grade nem com o bloco "Cliente faltou" (que também
   usa tom de cinza/vermelho em outras telas). */
.agenda-bloco-indisponivel {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.09) 8px, rgba(0,0,0,0.09) 16px
  );
}

/* ─── "Por Serviço" — grade de disponibilidade (pedido do usuário,
   04/10/2026): slots empilhados em fluxo normal (não blocos
   posicionados), branco = disponível, cinza escuro = sem ninguém
   habilitado livre. Hover no disponível mostra quem está livre. ─── */
.slots-disponibilidade { display: flex; flex-direction: column; }
.slot-disponibilidade {
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.slot-disponibilidade--livre { background: var(--branco); cursor: pointer; }
.slot-disponibilidade--livre:hover { background: var(--primario-suave); }
.slot-disponibilidade--ocupado { background: #3a3630; }
.slot-disponibilidade__tooltip {
  display: none;
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  z-index: 50;
  min-width: 160px;
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 32px rgba(0,0,0,0.22);
  padding: var(--espaco-3) var(--espaco-4);
  color: var(--texto);
}
.slot-disponibilidade--livre:hover .slot-disponibilidade__tooltip,
.slot-disponibilidade--livre:focus .slot-disponibilidade__tooltip { display: block; }
/* Agrupa cabeçalho (serviço + horário) e profissionais de cada linha
   num bloco só, com separador entre serviços (pedido do usuário,
   03/10/2026, print mostrando ambiguidade: "parece que o nome se
   refere ao serviço de baixo, mas é o de cima") — sem isso, o espaço
   do `margin-bottom` do cabeçalho ficava visualmente igual ao espaço
   entre um bloco e o próximo, sem nada marcando onde um serviço acaba
   e o outro começa. */
.slot-disponibilidade__tooltip-servico { padding: var(--espaco-2) 0; }
.slot-disponibilidade__tooltip-servico + .slot-disponibilidade__tooltip-servico {
  border-top: 1px solid var(--bege-claro);
}
.slot-disponibilidade__tooltip-horario {
  font-weight: 700;
  font-size: var(--fs-corpo-sec);
  margin-bottom: var(--espaco-2);
}
.slot-disponibilidade__tooltip-linha { font-size: var(--fs-corpo-sec); padding: 2px 0; }

.slot-legenda { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--bege); }
.slot-legenda--livre { background: var(--branco); }
.slot-legenda--ocupado { background: #3a3630; border-color: #3a3630; }

/* ─── Painel lateral de filtro de serviços, "Por Serviço" fase 2
   (pedido do usuário, 03/10/2026) — grade + painel lado a lado;
   `.agenda-grade-wrap` já tem `flex: 1` (CSS existente), então dentro
   deste wrapper flex-row ela sozinha espreme pra sobrar espaço pro
   painel de largura fixa, sem precisar mexer em mais nada. ─── */
.agenda-com-painel { display: flex; gap: var(--espaco-3); flex: 1; min-height: 0; align-items: stretch; }
.agenda-com-painel > .agenda-grade-wrap { flex: 1; min-width: 0; }
.painel-servicos {
  flex-shrink: 0;
  width: 300px;
  background: var(--branco);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  padding: var(--espaco-4);
  overflow-y: auto;
}
.painel-servicos__titulo { font-size: var(--fs-corpo-sec); font-weight: 700; margin-bottom: var(--espaco-3); }
/* Contorno mais forte (pedido do usuário, 04/10/2026: "cada bloco de
   serviço seja individualizado com algum contorno ou box pra ficarem
   mais separados") — borda mais escura que `--bege-claro` (quase
   invisível contra o fundo branco do painel) + sombra sutil + fundo
   creme, em vez de branco-sobre-branco. */
.painel-servicos__linha {
  border: 1px solid var(--bege);
  border-radius: var(--radius-md);
  padding: var(--espaco-2);
  margin-bottom: var(--espaco-3);
  background: var(--creme);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.painel-servicos__linha-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-1);
}
.painel-servicos__linha-cabecalho label { flex: 1; font-size: var(--fs-micro); color: var(--texto-suave); font-weight: 700; }
/* Reordenar linhas (pedido do usuário, 04/10/2026) — setinhas e alça
   de arrastar só aparecem quando a ordem importa de verdade pro
   cálculo (2+ linhas e "Respeitar ordem exata" marcado), ver
   `atualizarControlesOrdem` no template. */
.painel-servicos__arrastar {
  cursor: grab;
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  padding: 2px;
}
.painel-servicos__arrastar:active { cursor: grabbing; }
.painel-servicos__arrastar[hidden] { display: none; }
.painel-servicos__linha-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.painel-servicos__mover { font-size: 11px; padding: 3px 5px; }
.painel-servicos__mover[hidden] { display: none; }
.painel-servicos__mover:disabled { opacity: 0.3; cursor: default; }
.painel-servicos__mover:disabled:hover { background: none; color: var(--texto-suave); }
.painel-servicos__linha-acoes [data-acao="remover-servico"]:disabled { opacity: 0.35; cursor: default; }
.painel-servicos__linha-campos { display: flex; flex-direction: column; gap: var(--espaco-2); }
/* Dropdown de profissionais (pedido do usuário, 03/10/2026: trocou o
   `<select multiple>`, que ficava aberto na tela como uma "tabelinha",
   por um dropdown fechado por padrão — mesmo padrão `.dropdown` do
   filtro "Status" da Agenda). */
.painel-servicos__dropdown-prof { width: 100%; }
.painel-servicos__resumo-prof { display: block; width: 100%; text-align: left; }
.painel-servicos__dropdown-prof .dropdown__painel { left: 0; right: auto; }
.painel-servicos__lista-profissionais { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.painel-servicos__opcoes { margin-top: var(--espaco-3); display: flex; flex-direction: column; gap: var(--espaco-2); }
.painel-servicos__opcoes[hidden] { display: none; }

/* ─── Destaque do slot de 15min sob o mouse (pedido do usuário,
   01/10/2026 — "clique fica meio aleatório", ajuda a ver exatamente
   onde vai cair antes de clicar) ─── */
.agenda-coluna__hover-slot {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--primario-suave);
  pointer-events: none;
  z-index: 1;
}
.agenda-coluna__hover-slot[hidden] { display: none; }

/* ─── Agenda: filtros no topbar (fino/discreto, pedido do usuário,
   30/09/2026 — substituiu o painel lateral, devolvendo a largura da
   tela pra grade) ─── */
.agenda-filtros__grupo { margin-top: var(--espaco-3); }
.agenda-filtros__grupo:first-child { margin-top: 0; }
.agenda-filtros__rotulo { display: block; font-size: var(--fs-legenda); color: var(--texto-suave); margin-bottom: var(--espaco-2); }

.pill-group { display: flex; gap: 6px; }
.pill-group--wrap { flex-wrap: wrap; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px var(--espaco-3);
  border-radius: 999px;
  border: 1px solid #ddd;
  font-size: var(--fs-legenda);
  color: var(--texto-suave);
  background: var(--branco);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}
.pill:hover { border-color: var(--primario-claro); }
.pill--ativo { background: var(--primario); border-color: var(--primario); color: var(--branco); }

/* Pills do topbar (sigla de área + botão Status) — bem mais discretos
   que os da agenda antiga, já que agora ficam permanentemente visíveis
   numa linha fina em vez de escondidos num painel lateral. */
.topbar__acoes .pill-group { gap: var(--espaco-1); }
.topbar__acoes .pill { padding: 3px 9px; font-size: var(--fs-micro); }
.pill--sigla { font-weight: 600; letter-spacing: 0.02em; min-width: 30px; justify-content: center; }
.pill__contador {
  background: rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 0 5px;
  font-size: var(--fs-micro);
  margin-left: 2px;
}

/* Dropdown de Status — <details>/<summary> nativo, mesmo princípio dos
   outros colapsáveis do sistema, mas flutuante em vez de inline. */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown[open] > summary.pill { background: var(--primario); border-color: var(--primario); color: var(--branco); }
/* ─── Autocomplete de Cliente nos modais de agendamento (pedido do
   usuário, 01/10/2026) — busca por nome/telefone/CPF/e-mail, mesma fonte
   usada em "+ Agendar", clique em slot vazio e "+ Adicionar outro
   agendamento" (compartilham o mesmo `_form_corpo.html`). ─── */
.separador-form {
  border: none;
  border-top: 1px solid var(--bege-claro);
  margin: var(--espaco-4) 0;
}
.campo-autocomplete { position: relative; }
.autocomplete-linha {
  display: flex;
  gap: var(--espaco-2);
  align-items: center;
}
.autocomplete-linha #cliente-busca,
.autocomplete-linha .autocomplete-input { flex: 1; }
.autocomplete-linha .btn { white-space: nowrap; }
.autocomplete-resultados {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: var(--espaco-2);
  list-style: none;
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  max-height: 280px;
  overflow-y: auto;
  z-index: 60;
}
.autocomplete-resultados[hidden] { display: none; }
.autocomplete-resultados li {
  padding: var(--espaco-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-corpo);
}
.autocomplete-resultados li:hover,
.autocomplete-resultados__item--ativo {
  background: var(--primario-suave);
  color: var(--primario);
}
.autocomplete-resultados__tel { color: var(--texto-suave); font-size: var(--fs-legenda); }

/* Telefone clicável pra copiar + Editar cliente, no formulário de
   agendamento (pedido do usuário, 01/10/2026) — lado a lado, não
   empilhados (um por linha ocupava espaço demais). */
.cliente-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2);
  margin-top: var(--espaco-1);
}
/* Botão discreto, não parece um link de verdade (não abre nada), só
   copia. `.cliente-telefone--copiado` (alternado em JS por 1,5s) dá o
   feedback de que copiou. */
.cliente-telefone {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--espaco-2);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--texto-suave);
  font-size: var(--fs-corpo-sec);
  font-family: var(--font-corpo);
  cursor: pointer;
}
.cliente-telefone:hover { background: var(--primario-suave); color: var(--primario); }
.cliente-telefone[hidden] { display: none; }
.cliente-telefone--copiado { background: var(--sucesso-fundo); color: var(--sucesso); }

/* Cabeçalho de grupo (ex.: Profissional agrupado por categoria, pedido
   do usuário, 01/10/2026) — não clicável, não entra no hover/ativo.
   `pointer-events: none` (adicionado 01/10/2026, bug reportado com
   print: o cabeçalho ficava com fundo rosa no hover, parecendo
   clicável) resolve de vez — a regra genérica `.autocomplete-resultados
   li:hover` tem mais especificidade que `.autocomplete-resultados__grupo
   :hover` (o seletor "li" extra conta ponto), então só desligar o
   hover/ponteiro por completo garante que nunca mais acontece, em vez
   de tentar vencer essa guerra de especificidade. Fundo + borda
   (pedido do usuário, 01/10/2026) deixam visível onde troca de
   categoria, sem precisar abrir mão do `data-index` ausente (que já
   bastava pra não ser selecionável por clique/teclado). */
/* Seletor composto `.autocomplete-resultados li.autocomplete-resultados__grupo`
   (em vez de só `.autocomplete-resultados__grupo`) de propósito — com
   só a classe, a especificidade empata com `.autocomplete-resultados
   li { cursor: pointer; ... }` (mesma soma de 1 classe), e esse `li`
   vence por estar depois na folha (bug real: o cursor virava "mãozinha"
   mesmo com `pointer-events: none`). O seletor composto bate a
   especificidade de propósito, não deixa pra depender de ordem. */
.autocomplete-resultados li.autocomplete-resultados__grupo {
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--fs-legenda);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primario);
  /* `--bege-claro`, não `--primario-suave` (pedido do usuário,
     01/10/2026, com print) — `--primario-suave` é a MESMA cor do hover
     de item (`.autocomplete-resultados li:hover`), confundia "isto é
     uma categoria" com "o mouse está em cima deste profissional". */
  background: var(--bege-claro);
  border-radius: var(--radius-sm);
  cursor: default;
  pointer-events: none;
}
.autocomplete-resultados li.autocomplete-resultados__grupo:not(:first-child) { margin-top: var(--espaco-2); }

/* Destaque de horário no dropdown de Hora (pedido do usuário,
   01/10/2026) — nunca bloqueia, só sugere visualmente. "Ideal" (verde):
   não deixa buraco pequeno antes/depois. "Encavala" (vermelho — era
   "ocupado"/laranja; o usuário apontou que "ocupado" soava vago,
   dando a entender que a profissional tava ocupada num sentido geral,
   quando na verdade é que esse horário bate em cima de um atendimento
   que ela JÁ TEM marcado ali — mensagem reescrita pra deixar isso
   explícito, vermelho porque é o aviso mais sério dos dois): ainda
   clicável, o sistema permite atendimento simultâneo de propósito. */
.autocomplete-resultados__hora--ideal { background: var(--sucesso-fundo); color: var(--sucesso); }
.autocomplete-resultados__hora--encavala { background: var(--perigo-fundo); color: var(--perigo); }
/* Amarelo pro caso menos grave (pedido do usuário, 01/10/2026): o
   horário CLICADO em si está livre, só a duração do serviço avança por
   cima de um atendimento futuro ("vai encavalar com agendamento das
   HH:MM às HH:MM") — diferente do vermelho acima, onde o clique em si
   já cai em cima de um atendimento existente. */
.autocomplete-resultados__hora--vai-encavalar { background: var(--alerta-fundo); color: var(--alerta); }
/* Horário fora do expediente cadastrado do salão (pedido do usuário,
   07/10/2026) — nunca bloqueia a seleção, só avisa que vai precisar de
   autorização da gerência pra confirmar (módulo de Autorização
   Gerencial, ver REQUISITOS.md, ainda não tem a aprovação em si
   construída). Azul/info pra não se confundir com os avisos de
   conflito acima (vermelho/amarelo) — e por isso essa checagem só entra
   se NÃO houver colisão (ver `horariosClassificados()`, JS): conflito
   de agendamento sempre fala mais alto que estar fora do expediente. */
.autocomplete-resultados__hora--fora-expediente { background: var(--info-fundo); color: var(--info); }
/* Mesmas classes reaproveitadas no CAMPO fechado (`#hora-busca`) e no
   texto de status abaixo dele (`#hora-status`), não só nos itens do
   dropdown aberto (pedido do usuário, 01/10/2026) — um horário
   pré-preenchido (ex.: clique num slot da grade) precisa mostrar a cor
   e a mensagem mesmo sem abrir a lista. No `<p>` de status, sem fundo
   (já tem no campo acima — repetir pesaria visualmente), só a cor do
   texto em negrito. */
#hora-status:empty { display: none; }
#hora-status.autocomplete-resultados__hora--ideal,
#hora-status.autocomplete-resultados__hora--encavala,
#hora-status.autocomplete-resultados__hora--vai-encavalar,
#hora-status.autocomplete-resultados__hora--fora-expediente {
  background: none;
  font-weight: 600;
  margin-top: var(--espaco-1);
}
/* Mensagem agora é dinâmica por item (ver `sufixoItem`/`item.mensagem`
   em _form_corpo.html, pedido do usuário, 01/10/2026) — precisa dizer
   se o horário escolhido em si já tem agendamento, ou se é a DURAÇÃO
   do serviço que vai encavalar com um agendamento futuro; um texto
   fixo de CSS não sabia fazer essa distinção. */
.autocomplete-resultados__sufixo { font-size: var(--fs-legenda); font-weight: 400; }
/* Mesma regra de `#hora-status` acima, por CLASSE — a linha nova de
   "+ Adicionar outro agendamento" (pedido do usuário, 05/10/2026) tem
   um campo de status de Hora por linha da tabela, não um único id fixo
   como no formulário completo. */
.campo-hora-status:empty { display: none; }
.campo-hora-status.autocomplete-resultados__hora--ideal,
.campo-hora-status.autocomplete-resultados__hora--encavala,
.campo-hora-status.autocomplete-resultados__hora--vai-encavalar,
.campo-hora-status.autocomplete-resultados__hora--fora-expediente {
  background: none;
  font-weight: 600;
  margin-top: var(--espaco-1);
}

.dropdown__painel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--espaco-2);
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  padding: var(--espaco-3) var(--espaco-4);
  min-width: 230px;
  z-index: 30;
}
/* Histórico de atendimentos da cliente no agendamento (pedido do
   usuário, 01/10/2026) — painel do dropdown mais largo que o padrão
   (230px) pra caber nome de vários profissionais/serviços numa linha. */
#cliente-historico-painel { width: 280px; max-height: 320px; overflow-y: auto; }
.historico-categoria + .historico-categoria { margin-top: var(--espaco-3); padding-top: var(--espaco-3); border-top: 1px solid var(--bege-claro); }
.historico-categoria__titulo { margin: 0 0 2px; font-weight: 600; font-size: var(--fs-corpo-sec); color: var(--texto); }

/* "+ Adicionar outro agendamento" (pedido do usuário, 01/10/2026) —
   cada linha extra fica visualmente separada (card leve), com título
   "Agendamento N" + botão de remover alinhado à direita. */
.linha-agendamento__titulo { margin: var(--espaco-4) 0 var(--espaco-2); font-weight: 600; font-size: var(--fs-corpo-sec); color: var(--primario); }
.linha-agendamento {
  margin-top: var(--espaco-2);
  padding: var(--espaco-3);
  background: var(--creme);
  border-radius: var(--radius-md);
}
.linha-agendamento__cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--espaco-2); }
.linha-agendamento__cabecalho .linha-agendamento__titulo { margin: 0; }
.dropdown__acoes {
  display: flex;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-2);
  padding-bottom: var(--espaco-2);
  border-bottom: 1px solid var(--bege-claro);
}
.dropdown__acoes button {
  background: none;
  border: none;
  color: var(--primario);
  font-size: var(--fs-micro);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-corpo);
}
.dropdown__acoes button:hover { text-decoration: underline; }

/* Selo de alerta pequeno (ex.: "sem profissional" na lista de Serviços,
   pedido do usuário, 01/10/2026) — sinaliza, nunca age sozinho. */
.selo { display: inline-block; padding: 2px var(--espaco-2); border-radius: var(--radius-sm); font-size: var(--fs-micro); font-weight: 600; }
.selo--alerta { background: var(--alerta-fundo); color: #9a5b0a; }
.texto-alerta { color: var(--alerta); font-weight: 600; }

/* Bolinha de status — cor SEMÂNTICA (estado), nunca a cor de marca. */
.status-bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-bolinha--aguardando_confirmacao { background: var(--alerta); }
.status-bolinha--confirmado             { background: var(--sucesso); }
.status-bolinha--em_atendimento         { background: #0f766e; }
.status-bolinha--finalizado             { background: var(--info); }
.status-bolinha--cliente_faltou         { background: var(--perigo); }
.status-bolinha--cancelado              { background: #9ca3af; }
.status-bolinha--aberta                 { background: var(--alerta); }
.status-bolinha--fechada                { background: var(--sucesso); }
.status-bolinha--cancelada              { background: #9ca3af; }
.status-bolinha--parcial                { background: #0d9488; }

.agenda-bloco {
  position: absolute;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  /* Halo branco ao redor de cada bloco — sem isso, dois agendamentos
     do mesmo status colados um no outro (comum: profissional lotado)
     viravam uma mancha só, sem separação visual (reportado pelo
     usuário, 30/09/2026, com print). box-shadow não ocupa espaço de
     layout, então não desalinha a posição/altura calculada pelo
     horário real do agendamento. */
  box-shadow: 0 0 0 2px var(--branco);
  /* overflow visível (não mais hidden) de propósito — o cartão de
     detalhes no hover precisa poder "vazar" pra fora do bloco. Quem
     precisa cortar o texto é só o resumo abaixo. */
  cursor: grab;
}
/* Planejador de Eventos (pedido do usuário, 07/10/2026) — 2 colunas:
   entrada de dados à esquerda, resultado calculado à direita; empilha
   em telas estreitas. Grade de rascunho reaproveita a linguagem visual
   do bloco da Agenda, mas neutro e tracejado: ainda não é um
   Agendamento de verdade até confirmar. */
/* Pedido do usuário, 08/10/2026: cadastro (composição/profissionais/
   clientes) ocupa a largura toda, empilhado — a grade da agenda
   montada vem abaixo, também largura toda (era lado a lado, ficava
   espremido). */
.evento-colunas { display: flex; flex-direction: column; gap: var(--espaco-6); }
.evento-coluna-entrada, .evento-coluna-resultado { width: 100%; min-width: 0; }
.evento-grade { display: flex; gap: var(--espaco-4); overflow-x: auto; }
.evento-grade__coluna { min-width: 220px; flex-shrink: 0; }
.agenda-bloco--rascunho {
  position: static; width: auto; height: auto; margin-bottom: var(--espaco-2);
  border: 1px dashed var(--texto-suave); background: var(--bege-claro);
  color: var(--texto); border-radius: var(--radius-md); padding: var(--espaco-2);
}
/* Mesmo visual tracejado acima, mas pra grade de VERDADE (posicionada
   por horário, "Agenda do dia" — pedido do usuário, 08/10/2026): NÃO
   pode herdar `position: static` do `--rascunho` acima, senão o bloco
   ignora `top`/`height`/`left` e todos se empilham em sequência no
   topo da coluna, sem relação nenhuma com o horário real (foi
   reportado como "o sistema forçou agendamento depois do prazo" —
   era só esse bug visual: os horários calculados estavam corretos,
   só o desenho na tela que não respeitava posição nenhuma). */
.agenda-bloco--rascunho-grade {
  border: 1px dashed var(--texto-suave); background: var(--bege-claro);
  color: var(--texto);
}
/* Arrastar pra mudar horário/profissional (pedido do usuário,
   30/09/2026). */
.agenda-bloco--arrastando { opacity: 0.4; cursor: grabbing; }
/* Fantasma da posição de destino ao arrastar — só o pedacinho exato que
   o agendamento vai ocupar, não a coluna inteira (pedido do usuário,
   30/09/2026, pra recepção continuar enxergando a agenda real do
   profissional enquanto arrasta). */
.agenda-drop-fantasma {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: var(--radius-sm);
  background: var(--primario-suave);
  border: 2px dashed var(--primario-claro);
  pointer-events: none;
  z-index: 40;
}

/* ─── Menu de opções ao clicar num agendamento (pedido do usuário,
   30/09/2026 — por ora só "Ver/editar agendamento", prepara terreno
   pra mais opções) ─── */
.menu-contexto {
  position: fixed;
  z-index: 150;
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  padding: var(--espaco-2);
  min-width: 200px;
}
.menu-contexto[hidden] { display: none; }
.menu-contexto__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--espaco-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-corpo);
  font-size: var(--fs-corpo);
  color: var(--texto);
}
.menu-contexto__item:hover { background: var(--primario-suave); color: var(--primario); }
.menu-contexto__item--perigo { color: var(--perigo); }

/* ─── Submenu "Mudar status" (padrão Trinks — flyout ao lado do item,
   sem modal, pedido do usuário, 01/10/2026) ─── */
.menu-contexto__item--submenu-pai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
}
.menu-contexto__seta { color: var(--texto-suave); }
.menu-contexto__item--atual { color: var(--primario); font-weight: 600; }

/* ─── Popup de confirmação ao arrastar + toast de "Desfazer" (pedido do
   usuário, 30/09/2026) ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,10,8,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-overlay[hidden] { display: none; }
.modal-caixa {
  background: var(--branco);
  border-radius: var(--radius-lg);
  padding: var(--espaco-6) 20px;
  width: 340px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.modal-caixa h3 { margin: 0 0 var(--espaco-4); font-family: var(--font-titulo); font-size: var(--fs-secao); color: var(--preto); }
/* Título + texto centralizados (pedido do usuário, 04/10/2026, a
   partir do popup "Cadastro incompleto" — "adote este padrão... para
   todos os popups") — só pros popups PEQUENOS de pergunta/aviso (sem
   botão X, só título + texto corrido + botões), nunca nas telas de
   trabalho grandes (que mantêm `.modal-detalhes__cabecalho` com botão
   fechar à direita, título à esquerda). */
.modal-titulo-centro { text-align: center; }
.modal-texto-centro { text-align: center; }
.modal-mover-linha { padding: var(--espaco-2) 0; font-size: var(--fs-corpo); border-bottom: 1px solid var(--bege-claro); }
.modal-mover-linha:last-child { border-bottom: none; }
.modal-acoes { display: flex; justify-content: flex-end; gap: var(--espaco-3); margin-top: var(--espaco-5); }
.modal-acoes[hidden] { display: none; }
/* Centralizados no popup de confirmação genérico (pedido do usuário,
   01/10/2026, print mostrando os botões colados à direita) — igual ao
   texto (ver `.modal-confirmar__mensagem` abaixo). Escopado só a
   `#modal-confirmar` — os outros modais que reaproveitam `.modal-acoes`
   (Cancelar agendamentos, escopo de recorrência, Detalhes) são listas/
   formulários maiores onde botão alinhado à direita é o padrão
   esperado, não um popup de pergunta simples. */
#modal-confirmar .modal-acoes { justify-content: center; }
/* Centralizado (pedido do usuário, 01/10/2026) — estava à esquerda,
   fora do padrão dos outros popups pequenos (`.modal-caixa` sem
   `--grande`, 340px). */
.modal-confirmar__mensagem { margin: 0; font-size: var(--fs-corpo); color: var(--texto); line-height: 1.5; white-space: pre-line; text-align: center; }

/* ─── Modal "Ver/editar agendamento" — lista editável linha a linha,
   sobre a própria Agenda, sem navegar pra outra página (pedido do
   usuário, 30/09/2026) ─── */
.modal-caixa--grande { width: 680px; }
/* Mais largo + colunas com largura fixa (pedido do usuário, 05/10/2026,
   com print — "abra espaço para o nome do serviço, temos serviços com
   o nome bem longo": o nome quebrava em 3 linhas dentro da coluna
   estreita, inclusive no dropdown de busca da linha nova/edição, que
   herda a largura da coluna). Escopado só a `#modal-detalhes` — não
   mexe nos outros modais que reaproveitam `.modal-caixa--grande`
   (cadastro rápido, histórico, cancelar, formulário completo etc.).
   `table-layout: fixed` fatia a largura pelas células do `<thead>`
   (sempre as mesmas, só o `<tbody>` é recriado) — Serviço fica com o
   que sobra depois das outras colunas, bem mais largo que antes. */
#modal-detalhes .modal-caixa--grande { width: 920px; }
#modal-detalhes .tabela { table-layout: fixed; }
/* Horário alargado de 90px pra 150px (05/10/2026) — a linha nova
   ("+ Adicionar outro agendamento") trocou o `<input type="time">` por
   um dropdown de busca com destaque de disponibilidade (igual ao
   formulário completo), que precisa de mais espaço pro placeholder
   "Escolher horário" e pro texto de status ("✓ horário ideal" etc.). */
#modal-detalhes .tabela th:nth-child(1), #modal-detalhes .tabela td:nth-child(1) { width: 150px; }
#modal-detalhes .tabela th:nth-child(3), #modal-detalhes .tabela td:nth-child(3) { width: 140px; }
#modal-detalhes .tabela th:nth-child(4), #modal-detalhes .tabela td:nth-child(4) { width: 100px; }
#modal-detalhes .tabela th:nth-child(5), #modal-detalhes .tabela td:nth-child(5) { width: 180px; }
#modal-detalhes .tabela th:nth-child(6), #modal-detalhes .tabela td:nth-child(6) { width: 56px; }

/* ─── Modal "Novo/editar agendamento" (`#modal-agendamento`) mais largo
   e com menos respiro (pedido do usuário, 01/10/2026) — na forma atual
   do formulário precisa caber inteiro na tela sem rolar; mais campos
   virão depois (aí sim pode voltar a precisar de rolagem). Escopado só
   a este modal via `#modal-agendamento` — não mexe nos outros que
   reaproveitam `.modal-caixa--grande`/`.card--essencial` (Editar
   cliente, Cancelar, Detalhes, e o form de Produtos). Mais largo deixa
   o `.form-grid` (que já é `auto-fit`) encaixar mais campos por linha
   sem precisar mudar a grade em si. */
#modal-agendamento .modal-caixa { width: 960px; }
#modal-agendamento .card--essencial { padding: var(--espaco-5); }
#modal-agendamento .form-grid { gap: var(--espaco-3); }
#modal-agendamento .separador-form { margin: var(--espaco-3) 0; }
#modal-agendamento .form-actions { margin-top: var(--espaco-4); }

/* ─── Modal "Editar cliente" na Agenda — carrega o cadastro completo via
   AJAX (pedido do usuário, 30/09/2026); corpo rolável porque o formulário
   inteiro (endereço, tags, notificações) não cabe na tela toda aberta ─── */
.modal-cliente__corpo { max-height: calc(100vh - 160px); overflow-y: auto; padding-right: var(--espaco-1); }
.modal-detalhes__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espaco-4);
}
.modal-detalhes__cabecalho h3 { margin: 0; }
.modal-detalhes__telefone,
#modal-detalhes-telefone {
  margin: 2px 0 0;
  font-size: var(--fs-legenda);
  color: var(--texto-suave);
}

/* ─── "+ Adicionar outro agendamento" dentro do modal "Ver/editar
   agendamento" (pedido do usuário, 01/10/2026) — expande pra baixo em
   vez de abrir outro modal por cima ─── */
.modal-detalhes__rodape {
  margin-top: var(--espaco-4);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--bege-claro);
}
.modal-detalhes__novo { margin-top: var(--espaco-4); }
.modal-detalhes__novo[hidden] { display: none; }
.modal-fechar {
  background: none;
  border: none;
  font-size: var(--fs-valor-grande);
  line-height: 1;
  cursor: pointer;
  color: var(--texto-suave);
  padding: 0 var(--espaco-1);
}
.modal-fechar:hover { color: var(--primario); }

.btn-icone {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: var(--radius-sm);
  color: var(--texto-suave);
  display: inline-flex;
}
.btn-icone:hover { background: var(--primario-suave); color: var(--primario); }

.campo-edicao {
  padding: 5px 7px;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  font-family: var(--font-corpo);
  font-size: var(--fs-corpo-sec);
  width: 100%;
}
input.campo-edicao[type=time] { width: 90px; }
input.campo-edicao[type=number] { width: 80px; }

/* ─── Modal "Cancelar agendamento" (pedido do usuário, 30/09/2026) ─── */
.lista-confirmacao { margin: var(--espaco-4) 0; padding-left: 20px; }
.lista-confirmacao li { padding: var(--espaco-1) 0; font-size: var(--fs-corpo); }

/* ─── Modal "Ver histórico" — log de auditoria do agendamento (pedido
   do usuário, 30/09/2026) ─── */
.lista-historico { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.lista-historico li { padding: var(--espaco-2) 0; font-size: var(--fs-corpo); border-bottom: 1px solid var(--bege-claro); }
.lista-historico li:last-child { border-bottom: none; }
.lista-historico__data { color: var(--texto-suave); font-size: var(--fs-corpo-sec); }

/* ─── Modal de Comanda (Financeiro, pedido do usuário, 01/10/2026) —
   layout em 2 colunas (estilo Trinks, pedido do usuário, 01/10/2026):
   pagamento na coluna direita fixa, itens rolando na esquerda. Modal
   mais largo e mais baixo (max-height) pra nunca estourar a tela. ─── */
.modal-caixa--comanda {
  width: 1180px;
  max-height: 88vh;
  padding: var(--espaco-4) var(--espaco-5);
  display: flex;
  flex-direction: column;
  /* Essencial, não só estético: sem isso, o conteúdo que passa de 88vh
     não rola — ele vaza visualmente pra fora da caixa branca (overflow
     "visible" é o padrão do CSS), ficando por cima do fundo escuro do
     modal sem nenhum contorno. Bug real reportado pelo usuário com
     print, 01/10/2026. */
  overflow: hidden;
}
.modal-caixa--comanda .modal-detalhes__cabecalho { margin-bottom: var(--espaco-2); flex-shrink: 0; align-items: flex-start; }
.modal-caixa--comanda .modal-acoes { flex-shrink: 0; margin-top: var(--espaco-3); }
/* Busca de cliente no CABEÇALHO do fluxo "+ Nova comanda" sem cliente
   (pedido do usuário, 05/10/2026 — revisão do que foi feito antes: "o
   modal da nova comanda deve já abrir exatamente no mesmo padrão de um
   fechamento de comanda... já com todos os botões e totalizadores
   zerados"). O modal fica na largura normal (1180px) desde o início —
   só esta busca, no lugar do telefone/"Editar cliente", é diferente
   (`comanda.js::abrirModalComandaSemCliente`/`renderizar`). */
.comanda-cliente-busca-cabecalho { width: 380px; margin-top: var(--espaco-2); }
.comanda-corpo { display: flex; gap: var(--espaco-5); flex: 1; min-height: 0; }
.comanda-corpo[hidden] { display: none; }

.comanda-coluna-pagamento {
  width: 230px;
  flex-shrink: 0;
  border-left: 1px solid var(--bege-claro);
  padding-left: var(--espaco-4);
  overflow-y: auto;
}
.comanda-coluna-pagamento__rotulo {
  display: block;
  margin-top: var(--espaco-2);
  margin-bottom: var(--espaco-1);
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.comanda-coluna-itens { flex: 1; min-width: 0; overflow-y: auto; padding-right: var(--espaco-1); }
/* Tabela de itens mais compacta (pedido do usuário, 04/10/2026 — modal
   precisava de barra de rolagem lateral pra caber Item/Profissional/
   Qtd/Valor/Desconto/Motivo/Total; a largura do modal já foi aumentada
   acima, isto aperta mais um pouco pra garantir que nunca mais precise
   de scroll horizontal). */
.comanda-tabela-itens th,
.comanda-tabela-itens td { padding: 6px 8px; font-size: var(--fs-corpo-sec); }
.comanda-tabela-itens .campo-edicao { font-size: var(--fs-corpo-sec); padding: 4px 6px; }

/* Bloco de totais com contorno próprio (pedido do usuário, 04/10/2026
   — "estão misturadas", print mostrando Total/Pago/Restante coladas
   direto na linha da cliente do fechamento conjunto logo abaixo) —
   box com fundo + borda, separador entre as 3 linhas internas.
   Congelado no topo da coluna de pagamento (pedido do usuário,
   04/10/2026 — "deixe este bloco congelado, logo abaixo [do
   cabeçalho]"): `position: sticky` relativo ao scroll da própria
   `.comanda-coluna-pagamento` (overflow-y: auto). Margem/padding
   reduzidos pra "abrir espaço abaixo". */
.comanda-totais {
  background: var(--creme);
  border: 1px solid var(--bege);
  border-radius: var(--radius-md);
  padding: var(--espaco-2) var(--espaco-3);
  margin-bottom: var(--espaco-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
.comanda-totais__linha { display: flex; justify-content: space-between; font-size: var(--fs-legenda); padding: 3px 0; }
.comanda-totais__linha + .comanda-totais__linha { border-top: 1px solid var(--bege-claro); }
.comanda-totais__linha strong { font-size: var(--fs-corpo-sec); }
/* Cor do Restante (pedido do usuário, 04/10/2026): falta pagar =
   vermelho, bateu certinho = verde, pagou a mais (sobra) = azul. */
.comanda-totais__restante--faltando strong { color: var(--perigo); }
.comanda-totais__restante--ok strong { color: var(--sucesso); }
.comanda-totais__restante--sobra strong { color: var(--info); }
/* Botão "Deixar sobra como crédito" (pedido do usuário, 04/10/2026) —
   só aparece quando há sobra; comanda não fecha até essa sobra ser
   resolvida (ver `operacoes.converter_sobra_em_credito`). */
#comanda-sobra-credito { width: 100%; margin-top: var(--espaco-2); }
#comanda-sobra-credito[hidden] { display: none; }

.comanda-formas-pagamento { display: flex; flex-direction: column; gap: var(--espaco-2); }
/* Campo de valor inline por forma de pagamento (pedido do usuário,
   03/10/2026 — substitui o `prompt()` nativo do navegador, inspirado
   na tela do Trinks). Botão = nome da forma; ao clicar, abre os campos
   logo abaixo dele (valor, parcelas se for Crédito, confirmar). */
.comanda-forma-pagamento { border: 1px solid var(--bege-claro); border-radius: var(--radius-md); overflow: hidden; }
.comanda-forma-pagamento__toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px var(--espaco-3);
  background: var(--bege-claro);
  border: none;
  font-family: var(--font-corpo);
  font-size: var(--fs-legenda);
  font-weight: 600;
  cursor: pointer;
}
.comanda-forma-pagamento__toggle:hover { background: var(--bege); }
.comanda-forma-pagamento__toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.comanda-forma-pagamento__campos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-3) var(--espaco-2);
}
/* Mesmo bug já documentado neste arquivo (grade da Agenda, 01/10/2026):
   `display: flex` de autor empata em especificidade com o `[hidden]
   {display:none}` padrão do navegador e GANHA — sem isto, as 4 formas
   de pagamento apareciam TODAS abertas ao carregar o modal (achado em
   teste, 03/10/2026). */
.comanda-forma-pagamento__campos[hidden] { display: none; }
/* Lista de lançamentos JÁ feitos naquela forma (pedido do usuário,
   04/10/2026 — "tem que ser possível colocar mais de um pagamento...
   pra conciliar depois com as transações da maquininha") — cada um
   com seu próprio editar/remover; o campo de baixo (`__novo`) é só
   pra ADICIONAR mais um, nunca edita um existente. */
.comanda-forma-pagamento__lancamentos { list-style: none; margin: 0; padding: 0; }
.comanda-forma-pagamento__lancamentos:empty { display: none; }
.comanda-forma-pagamento__lancamento {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-legenda); padding: 3px 0; border-bottom: 1px solid var(--bege-claro);
}
.comanda-forma-pagamento__lancamento:last-child { border-bottom: none; }
.comanda-forma-pagamento__lancamento-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.comanda-forma-pagamento__novo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espaco-1) var(--espaco-2);
}
.comanda-forma-pagamento__valor { width: 80px !important; }
.comanda-forma-parcelas { width: 56px !important; }

.lista-pagamentos { list-style: none; margin: 0; padding: 0; }
.lista-pagamentos li {
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-legenda); padding: 4px 0; border-bottom: 1px solid var(--bege-claro);
}
.lista-pagamentos li:last-child { border-bottom: none; }

/* Comandas extras do fechamento conjunto, no CABEÇALHO do modal
   (pedido do usuário, 04/10/2026 — antes ficava redundante no bloco
   de pagamento, repetindo o nome da cliente que já está no título). */
.comanda-conjunto-cabecalho { list-style: none; margin: var(--espaco-2) 0 0; padding: 0; }
.comanda-conjunto-cabecalho[hidden] { display: none; }
.comanda-conjunto-cabecalho li { padding: 2px 0; font-size: var(--fs-corpo-sec); display: flex; align-items: center; gap: var(--espaco-2); }

#comanda-picker-conjunto { margin-top: var(--espaco-2); }
#comanda-picker-conjunto select { width: 100%; margin-bottom: var(--espaco-2); }
.comanda-picker-acoes { display: flex; gap: var(--espaco-2); }

.comanda-coluna-itens .comanda-add-produto { margin-top: var(--espaco-3); }
/* "Salvar"/"Cancelar" dos formulários de lançamento avulso (Produto/
   Serviço/Crédito/Gorjeta) — pedido do usuário, 05/10/2026: "não use
   esse botão adicionar tímido, usa 'Salvar' com destaque e fundo
   marrom, igual o 'Fechar Conta'". `.btn-primario` já é esse estilo
   (ver `#modal-comanda-fechar-conta`); aqui só o agrupamento dos 2. */
.comanda-form-acoes { display: flex; gap: var(--espaco-2); margin-top: var(--espaco-2); }
/* Título em destaque dizendo o que está sendo adicionado (pedido do
   usuário, 05/10/2026 — "foi clicado em adicionar gorjeta, mas não tem
   nenhuma informação no modal que se trata de gorjeta... crie um
   bloco com destaque"), no topo de cada formulário de lançamento
   avulso (Produto/Serviço/Crédito/Gorjeta). */
.comanda-form-titulo {
  display: inline-block;
  background: var(--primario-suave);
  border-left: 3px solid var(--primario);
  color: var(--primario-escuro);
  font-weight: 700;
  font-size: var(--fs-corpo-sec);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--espaco-3);
}
/* Linha única, sem quebra (pedido do usuário, 04/10/2026 — "reduza o
   tamanho dos botões para caberem numa só linha"). SEM overflow-x:
   auto aqui de propósito — isso ligaria overflow-y:auto junto (regra
   do CSS) e cortaria os balões `.info-icone__balao` dos ícones de
   ajuda da própria linha (mesmo bug já documentado neste arquivo).
   Os 8 botões já cabem no modal (1180px) com `.btn-xs`; se um dia não
   couberem mais, resolver OUTRA forma (menos botões, menu "mais"),
   não isto. */
/* Botões de lançamento da comanda (pedido do dono, 23/10/2026): botões de
   verdade, todos do mesmo tamanho, numa grade de 4 colunas alinhada entre
   as linhas; a explicação aparece passando o mouse (atributo `title`),
   sem as interrogações. */
.comanda-botoes-lancamento { display: grid; grid-template-columns: repeat(4, 150px); gap: var(--espaco-2); margin-top: var(--espaco-2); }
.comanda-botao-grupo { display: flex; }
.comanda-botao-grupo[hidden] { display: none; }
/* Botões com cor e volume (3D: degradê + sombra embaixo; afunda ao clicar) — pedido do dono, 23/10/2026. */
.comanda-acao {
  width: 100%; min-height: 30px; padding: 4px var(--espaco-2);
  background: linear-gradient(180deg, #fbefe9 0%, #f1d6ca 100%);
  color: var(--primario-escuro); border: 1px solid #d9a998; border-radius: 7px;
  font-weight: 600; font-size: var(--fs-legenda, 0.8rem); white-space: nowrap;
  box-shadow: 0 3px 0 #c98d7a, 0 4px 6px rgba(0,0,0,0.12);
  transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.1s ease;
}
.comanda-acao:hover, .comanda-acao:focus-visible { filter: brightness(1.04); border-color: var(--primario); }
.comanda-acao:active { transform: translateY(2px); box-shadow: 0 1px 0 #c98d7a, 0 2px 3px rgba(0,0,0,0.12); }
/* Pacotes/Vale-presente (pedido do usuário, 07/10/2026 — revisão
   técnica): visualmente discretos, não competindo com os 4 botões de
   verdade acima — opacidade reduzida + borda tracejada nos próprios
   botões, rótulo "Em breve:" à esquerda explicando o porquê. */
.comanda-botoes-lancamento--futuro { opacity: 0.6; align-items: center; }
.comanda-botoes-lancamento__rotulo { font-size: var(--fs-micro); color: var(--texto-suave); margin-right: var(--espaco-1); flex-shrink: 0; }
.comanda-botoes-lancamento--futuro .btn-xs { border-style: dashed; }
.comanda-observacoes { margin-top: var(--espaco-3); }

/* Cliente dentro do modal de comanda (pedido do usuário, 03/10/2026). */
.comanda-tags { display: flex; gap: var(--espaco-1); flex-wrap: wrap; margin-top: var(--espaco-2); }
.comanda-tags .selo { background: var(--primario-suave); color: var(--primario); }
.mensagem--aniversario-hoje { background: var(--primario-suave); color: var(--primario); font-weight: 600; }

.toast {
  position: fixed;
  bottom: var(--espaco-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--preto-quente);
  color: var(--bege-claro);
  padding: var(--espaco-3) var(--espaco-5);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  font-size: var(--fs-corpo);
  z-index: 200;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.toast[hidden] { display: none; }
.toast button {
  background: var(--primario);
  color: var(--branco);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--espaco-2) var(--espaco-4);
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-corpo);
  font-size: var(--fs-corpo-sec);
}
.toast button:hover { background: var(--primario-escuro); }
.agenda-bloco__resumo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  padding: var(--espaco-1) var(--espaco-2);
  font-size: var(--fs-legenda);
  line-height: 1.25;
  overflow: hidden;
  text-decoration: none;
  color: var(--preto);
}
.agenda-bloco__resumo strong { display: block; }

/* ─── Cartão de detalhes no hover, estilo Trinks (pedido do usuário,
   30/09/2026, com print de referência) ─── */
.agenda-bloco__tooltip {
  display: none;
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  z-index: 50;
  width: 230px;
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 32px rgba(0,0,0,0.22);
  padding: var(--espaco-3) var(--espaco-4);
  color: var(--texto);
}
.agenda-bloco:hover .agenda-bloco__tooltip { display: block; }
/* Destaque vindo da busca de agendamentos (pedido do usuário,
   04/10/2026, inspirado no Trinks) — clicar num resultado "expande"
   (força o cartão de detalhes a aparecer, sem precisar hover de
   verdade) e destaca (anel colorido) o bloco certo na grade. Persiste
   até a próxima busca/clique, não é um flash temporizado. */
.agenda-bloco.agenda-bloco--destaque {
  box-shadow: 0 0 0 3px var(--primario), 0 4px 16px rgba(0,0,0,0.3);
  z-index: 55;
}
.agenda-bloco--destaque .agenda-bloco__tooltip { display: block; }
/* Durante o arrasto (nativo do navegador), o bloco de origem costuma
   ficar "preso" em :hover até o fim do gesto (comportamento conhecido
   do Chrome) — sem isso, o cartão de detalhes ficava aparecendo por
   cima do fantasma durante o arrasto todo (reportado com print pelo
   usuário, 30/09/2026). A classe é ligada/desligada em document.body
   no dragstart/dragend. */
body.agenda-arrastando-ativo .agenda-bloco__tooltip { display: none !important; }
/* Mesma história ao clicar pra abrir o menu de opções — o bloco clicado
   continua em :hover, então o cartão de detalhes ficava aparecendo por
   trás/sobre o menu (reportado com print, 30/09/2026). */
body.agenda-menu-aberto .agenda-bloco__tooltip { display: none !important; }
.agenda-bloco__tooltip-nome {
  font-family: var(--font-corpo);
  font-weight: 700;
  font-size: var(--fs-corpo-sec);
  letter-spacing: 0.01em;
}
.agenda-bloco__tooltip-horario {
  font-weight: 600;
  font-size: var(--fs-corpo-sec);
  color: var(--texto-suave);
  margin: 2px 0 var(--espaco-3);
}
.agenda-bloco__tooltip-linha {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-1) 0;
  font-size: var(--fs-corpo-sec);
}
.agenda-bloco__tooltip-linha svg { flex-shrink: 0; color: var(--texto-suave); }
.agenda-bloco__tooltip-whats { display: flex; color: #25d366; text-decoration: none; }
.agenda-bloco__tooltip-aviso {
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-2);
  border-top: 1px solid var(--bege-claro);
  font-size: var(--fs-legenda);
  color: var(--alerta);
}
/* Variante pro aviso de autorização gerencial pendente (pedido do
   usuário, 07/10/2026) — roxo, pra casar com o fundo roxo do bloco
   (`.agenda-bloco--pendente-autorizacao` abaixo): não é um alerta de
   problema (como "dados incompletos"), é só sinalização de que esse
   agendamento específico precisa de aprovação da gerência. */
.agenda-bloco__tooltip-aviso--roxo { color: var(--roxo); }
/* Esquema de cores por status (pedido do usuário, 01/10/2026 — mesmo
   padrão de cores visto na tela real do Trinks): laranja = aguardando,
   verde escuro = confirmado, verde piscina = em atendimento, azul médio
   = finalizado. "Atrasado" não é um status de verdade — é só a cor
   mudando quando o horário do agendamento já passou e ele continua
   "aguardando"/"confirmado" (não virou em atendimento nem foi
   cancelado) — por isso é uma classe à parte, declarada DEPOIS das
   outras pra sempre vencer o empate de especificidade e sobrescrever a
   cor do status quando as duas classes estão no mesmo bloco.
   Cores em hex fixo de propósito aqui (não os tokens semânticos) — são
   tons claros específicos pensados pra fundo de bloco pequeno, mais
   claros que --sucesso-fundo/--alerta-fundo/--info-fundo pra não brigar
   com o texto escrito em cima.
   "Confirmado" e "Em Atendimento" revisados (pedido do usuário,
   07/10/2026, print mostrando os dois quase idênticos lado a lado na
   grade) — ambos continuam verdes de propósito (igual ao Trinks), mas
   agora bem mais distantes um do outro: "Confirmado" é um verde CLARO e
   suave (reaproveita `--sucesso-fundo`/`--sucesso`, os mesmos tokens já
   usados no resto do sistema pra "sucesso"); "Em Atendimento" virou um
   verde-azulado bem mais ESCURO e SATURADO (quase petróleo), pra nunca
   mais se confundir o "já confirmou, ainda não chegou" com "está sendo
   atendida agora". */
.agenda-bloco--aguardando_confirmacao { background: var(--alerta-fundo); border-left-color: var(--alerta); }
.agenda-bloco--confirmado             { background: var(--sucesso-fundo); border-left-color: var(--sucesso); }
.agenda-bloco--em_atendimento         { background: #5eead4; border-left-color: #0f766e; }
.agenda-bloco--finalizado             { background: var(--info-fundo); border-left-color: var(--info); }
.agenda-bloco--cliente_faltou         { background: var(--perigo-fundo); border-left-color: var(--perigo); }
.agenda-bloco--cancelado              { background: #e5e7eb; border-left-color: #9ca3af; text-decoration: line-through; opacity: 0.7; }
/* "Atrasado" não repinta mais o bloco de vermelho sólido — igual à
   cor fixa de "Cliente Faltou" (bug de UX real, pedido do usuário,
   01/10/2026: confundia "ainda pode chegar, só passou da hora" com
   "já confirmado que não veio"). Em vez de trocar o fundo, soma uma
   borda tracejada vermelha por CIMA da cor do status de verdade
   (`outline`, não conflita com o `box-shadow` do halo branco acima) —
   mantém visível QUAL status está atrasado (laranja = aguardando,
   verde = confirmado), só avisa que já passou da hora por cima. */
.agenda-bloco--atrasado {
  outline: 2px dashed var(--perigo);
  outline-offset: -2px;
}
/* Agendamento pendente de autorização gerencial (horário fora do
   expediente cadastrado — pedido do usuário, 07/10/2026). Primeira
   versão usava só um contorno tracejado azul por cima da cor do
   status, mas ficava pouco visível — revisado no mesmo dia pra
   repintar o bloco inteiro de roxo/lilás (igual aos outros status),
   já que aqui o que importa é saltar aos olhos que esse agendamento
   específico precisa de aprovação, não preservar a cor do status por
   baixo (ao contrário do "atrasado" acima, que é só um aviso de prazo
   sobre um status que continua válido). Declarado depois das cores de
   status pra vencer o empate de especificidade. Se também estiver
   atrasado, o outline tracejado vermelho do `.agenda-bloco--atrasado`
   continua aparecendo por cima do fundo roxo normalmente. */
.agenda-bloco--pendente-autorizacao {
  background: var(--roxo-fundo);
  border-left-color: var(--roxo);
}

.agenda-vazio { padding: var(--espaco-8); text-align: center; color: var(--texto-suave); }

/* Tela "Produtos usados nos atendimentos" (pedido do usuário,
   09/10/2026) — blocos clicáveis (não arrastáveis) e um sinal visual
   simples de "já lançado", pra não precisar abrir o modal só pra saber. */
.agenda-bloco--produtos-lancado { border-left-color: var(--sucesso); }
.btn-abrir-consumo { cursor: pointer; }

/* ─── Seletor de horário customizado (Horário de Funcionamento, pedido
   do usuário, 07/10/2026) — substitui o <input type="time"> nativo:
   o relógio do navegador não deixa inserir um botão de confirmação
   dentro dele, e fechar só ao clicar fora não era intuitivo. Gatilho
   com destaque de hover/foco pra ficar claro que é clicável. ─── */
.seletor-horario { position: relative; display: inline-block; }
.seletor-horario__gatilho {
  font: inherit;
  font-size: var(--fs-corpo);
  padding: var(--espaco-2) var(--espaco-3);
  min-width: 84px;
  text-align: center;
  border: 1px solid var(--bege);
  border-radius: var(--radius-sm);
  background: var(--branco);
  color: var(--texto);
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.seletor-horario__gatilho:hover,
.seletor-horario__gatilho:focus {
  border-color: var(--primario);
  background: var(--bege-claro);
  box-shadow: 0 0 0 3px var(--primario-suave);
  outline: none;
}
.seletor-horario__gatilho--vazio { color: var(--texto-suave); }

.seletor-horario__painel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 180px;
  background: var(--branco);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 32px rgba(0,0,0,0.22);
  padding: var(--espaco-3);
}
.seletor-horario__painel.is-aberto { display: block; }
.seletor-horario__painel--direita { left: auto; right: 0; }
.seletor-horario__colunas { display: flex; gap: var(--espaco-2); }
.seletor-horario__coluna {
  flex: 1;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--bege-claro);
  border-radius: var(--radius-sm);
}
.seletor-horario__opcao {
  display: block;
  width: 100%;
  padding: var(--espaco-2);
  border: none;
  background: none;
  text-align: center;
  font-size: var(--fs-corpo);
  color: var(--texto);
  cursor: pointer;
}
.seletor-horario__opcao:hover { background: var(--primario-suave); }
.seletor-horario__opcao.is-selecionada { background: var(--primario); color: var(--branco); font-weight: 600; }
.seletor-horario__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}
.seletor-horario__limpar {
  background: none;
  border: none;
  padding: 0;
  color: var(--texto-suave);
  font-size: var(--fs-legenda);
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Planejador de eventos — roster/tarefa de Penteado×estilo e
   Maquiagem (pedido do usuário, 08/10/2026). Linha compacta (flex, não
   `.form-grid`) pra Profissional/Duração não ficarem espremidos ao lado
   de um `.card` largo demais pros 2 grupos de checkbox — achado do
   próprio usuário vendo a tela ("zona de bagunça") ─── */
.evento-form-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--espaco-4);
}
.evento-checkbox-grupo {
  border: 1px solid #ddd;
  border-radius: var(--radius-md);
  margin: 0;
  padding: var(--espaco-1) var(--espaco-3) var(--espaco-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.evento-checkbox-grupo legend {
  padding: 0 var(--espaco-1);
  font-size: var(--fs-corpo-sec);
  color: var(--texto-suave);
}
.evento-checkbox-grupo label {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  font-size: var(--fs-corpo-sec);
  white-space: nowrap;
}
/* Pedido do usuário, 08/10/2026: checkboxes do roster numa linha só em
   vez de empilhados — bloco bem mais baixo. */
.evento-checkbox-grupo--linha {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1) var(--espaco-3);
}
.evento-checkbox-grupo--linha legend { padding: 0 var(--espaco-1) 0 0; }
/* Separador de verdade entre a lista de cadastrados e o bloco de
   "adicionar novo" (pedido do usuário, 08/10/2026 — a 1ª tentativa foi
   uma linha fininha, praticamente invisível; isto aqui é uma caixa com
   fundo e contorno próprios, impossível de não notar). */
.evento-bloco-adicionar {
  background: var(--bege-claro);
  border: 1px solid #e8d9b8;
  border-radius: var(--radius-md);
  padding: var(--espaco-4);
  margin-top: var(--espaco-4);
}
.evento-bloco-adicionar > strong {
  display: block;
  margin-bottom: var(--espaco-3);
  color: var(--texto-suave);
  font-size: var(--fs-corpo-sec);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============================================================
   DASHBOARD — padrão de página inicial por perfil de acesso
   (pedido do usuário, 12/10/2026: a tela do Bar vira o modelo oficial
   pra toda dashboard de perfil daqui pra frente — Administrador,
   Gerente, Recepcionista, e futuramente o PAT do Profissional. Nascido
   aqui, mas os nomes de classe são genéricos de propósito —
   `.dashboard-*`, não `.bar-*` — pra qualquer tela nova reaproveitar
   sem reinventar.)

   Composição: um `.dashboard-secao` por bloco de conteúdo (fila de
   pedidos, grid de ações rápidas, etc.), sempre dentro de um `.card`
   já existente. Dentro de cada seção, `.dashboard-acoes` é uma grade
   de cartões clicáveis — a ideia central do padrão: cada ação do
   perfil vira um cartão com ícone + título + 1 linha de descrição,
   nunca um botão de texto solto competindo com os outros (era assim
   que a v1 da tela do Bar tinha ficado — "sopa de botão", sem
   hierarquia visual entre 3 ações bem diferentes).
   ============================================================ */

.dashboard-secao__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espaco-5);
}
.dashboard-secao__cabecalho h2 { margin: 0; }
.dashboard-secao__subtitulo {
  color: var(--texto-suave);
  font-size: var(--fs-corpo-sec);
  margin: -10px 0 var(--espaco-5);
}

/* ─── Grade de ações rápidas ───
   `minmax(220px, 1fr)` = empilha sozinha em tela estreita (tablet do
   Bar em pé, por exemplo), sem precisar de media query. */
.dashboard-acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espaco-4);
}
.acao-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-2);
  text-align: left;
  background: var(--creme);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--espaco-5);
  cursor: pointer;
  font-family: var(--font-corpo);
  /* Funciona tanto em <div onclick> quanto em <a href> (pedido do
     usuário, 13/10/2026 — tela "Clientes em atendimento") — reset do
     sublinhado/cor azul padrão de link. */
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.acao-card:hover {
  background: var(--primario-suave);
  border-color: var(--primario-medio);
}
.acao-card:active { transform: scale(0.99); }
.acao-card__icone {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--primario-suave);
  color: var(--primario);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acao-card__icone svg { width: 20px; height: 20px; }
.acao-card__titulo {
  font-family: var(--font-titulo);
  font-size: var(--fs-card);
  color: var(--preto);
  font-weight: 600;
}
.acao-card__desc {
  font-size: var(--fs-corpo-sec);
  color: var(--texto-suave);
  line-height: 1.4;
}
/* Variante em destaque — a ação principal da seção (ex.: "Lançar na
   comanda", a mais usada no dia a dia do Bar). Mesma lógica de
   hierarquia que `.btn-primario` já usa pra UMA ação por tela. */
.acao-card--destaque {
  background: var(--primario-suave);
  border-color: var(--primario-medio);
}
.acao-card--destaque:hover { background: var(--primario-medio); }
/* Caixinhas da tela Autorizações (22/10/2026): número de pendências no
   canto; cinza quando 0, em destaque quando há algo para decidir. */
.aprovacao-grade { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.aprovacao-card { position: relative; padding-right: 64px; }
.aprovacao-card__numero {
  position: absolute; top: var(--espaco-4); right: var(--espaco-4);
  min-width: 32px; height: 32px; padding: 0 var(--espaco-2); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; background: #e6e1da; color: var(--texto-suave);
}
.aprovacao-card__numero--ativo { background: var(--primario); color: var(--branco); }

/* Busca de cliente embutida dentro de um `.acao-card` (pedido do
   usuário, 12/10/2026 — ação "Lançar na comanda" precisa identificar
   a cliente antes de abrir, as outras duas abrem direto e perguntam
   dentro do próprio modal). `onclick` do card pai é desarmado aqui
   dentro via `stopPropagation` no JS — campo de busca não é clicável
   como se fosse o cartão inteiro. */
.acao-card__busca {
  width: 100%;
  margin-top: var(--espaco-1);
}
.acao-card__busca .campo-edicao { font-size: var(--fs-corpo); padding: var(--espaco-2) var(--espaco-3); }

/* ─── Fila de pedidos (cards de status) ─── */
.dashboard-fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--espaco-4);
}
.pedido-card {
  background: var(--creme);
  border-radius: var(--radius-md);
  padding: var(--espaco-4);
  border-left: 3px solid var(--alerta);
}
.pedido-card__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
}
.pedido-card__icone {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--alerta-fundo);
  color: var(--alerta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pedido-card__icone svg { width: 16px; height: 16px; }
/* Fila do Bar (03/11/2026): ícone grande da bebida + quem pediu em destaque. */
#bar-pedidos-lista .pedido-card__icone { width: 52px; height: 52px; border-radius: 14px; }
#bar-pedidos-lista .pedido-card__icone svg { width: 32px; height: 32px; }
.pedido-card__quem { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pedido-card__pediu, .pedido-card__outra { font-size: 0.85rem; padding: 2px 10px; border-radius: 999px; }
.pedido-card__pediu { background: #8d301c; color: #fff; }
.pedido-card__pediu strong { font-weight: 700; }
.pedido-card__outra { background: #fde68a; color: #78350f; font-weight: 700; border: 1px solid #f59e0b; }
.pedido-card__cliente { font-weight: 600; color: var(--preto); font-size: var(--fs-corpo); }
.pedido-card__item { font-size: var(--fs-corpo-sec); color: var(--texto-suave); }
.pedido-card__obs {
  font-size: var(--fs-legenda);
  color: var(--texto-suave);
  font-style: italic;
  margin-top: var(--espaco-1);
}
.pedido-card__hora {
  font-size: var(--fs-micro);
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: var(--espaco-1);
}
.pedido-card__acoes {
  display: flex;
  gap: var(--espaco-2);
  margin-top: var(--espaco-3);
}
.pedido-card__acoes .btn { flex: 1; text-align: center; }

/* ─── Estado vazio (fila sem pedidos, lista sem resultado, etc.) ───
   Genérico o bastante pra qualquer `.dashboard-*` reaproveitar — ícone
   apagado + 1 linha de texto, nunca só um parágrafo cru perdido no
   meio de um card grande. */
.dashboard-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-3);
  padding: var(--espaco-8) var(--espaco-5);
  color: var(--texto-suave);
  text-align: center;
}
.dashboard-vazio svg { width: 32px; height: 32px; opacity: 0.35; }
.dashboard-vazio span { font-size: var(--fs-corpo-sec); }

/* ─── Venda rápida (modal de venda avulsa do Bar com favoritos) ───
   Pedido do usuário, 13/10/2026: modal maior, com botões dos produtos
   mais pedidos por aquele cliente/profissional — 1 clique adiciona à
   venda. Esquerda = quem compra + favoritos + "outro produto";
   direita = itens da venda, total e pagamento. Empilha em tela
   estreita (tablet do Bar em pé). Genérico (`.venda-rapida`,
   `.produto-rapido`, `.carrinho-item`) pra reaproveitar em outro
   ponto de venda rápida no futuro. */
.modal-caixa--venda { width: 880px; }
.venda-rapida {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--espaco-6);
}
@media (max-width: 760px) {
  .venda-rapida { grid-template-columns: 1fr; }
}
.venda-rapida__rotulo {
  font-size: var(--fs-legenda);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  margin: var(--espaco-5) 0 var(--espaco-2);
}
.venda-rapida__rotulo:first-child { margin-top: 0; }
.venda-rapida__favoritos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--espaco-2);
  min-height: 64px;
}
.venda-rapida__dica {
  grid-column: 1 / -1;
  font-size: var(--fs-corpo-sec);
  color: var(--texto-suave);
  padding: var(--espaco-4) 0;
}
.venda-rapida__outro { display: flex; gap: var(--espaco-2); align-items: center; }
.venda-rapida__outro select { flex: 1; min-width: 0; }

.produto-rapido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--espaco-3);
  background: var(--creme);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-corpo);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.produto-rapido:hover { background: var(--primario-suave); border-color: var(--primario-medio); }
.produto-rapido:active { transform: scale(0.97); }
.produto-rapido__nome { font-size: var(--fs-corpo); font-weight: 600; color: var(--preto); line-height: 1.25; }
.produto-rapido__preco { font-size: var(--fs-corpo-sec); font-weight: 600; color: var(--primario); }

.venda-rapida__direita {
  background: var(--creme);
  border-radius: var(--radius-md);
  padding: var(--espaco-5);
  display: flex;
  flex-direction: column;
}
.venda-rapida__carrinho {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 120px;
  max-height: 280px;
  overflow-y: auto;
}
.venda-rapida__carrinho-vazio { font-size: var(--fs-corpo-sec); color: var(--texto-suave); padding: var(--espaco-4) 0; }
.carrinho-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) 0;
  border-bottom: 1px solid var(--bege-claro);
}
.carrinho-item__nome { flex: 1; min-width: 0; font-size: var(--fs-corpo); color: var(--preto); }
.carrinho-item__qtd { display: flex; align-items: center; gap: var(--espaco-1); font-size: var(--fs-corpo); font-weight: 600; }
.carrinho-item__qtd button {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--branco);
  color: var(--primario);
  font-weight: 700;
  cursor: pointer;
}
.carrinho-item__qtd button:hover { background: var(--primario-suave); }
.carrinho-item__qtd span { min-width: 18px; text-align: center; }
.carrinho-item__subtotal { min-width: 68px; text-align: right; font-size: var(--fs-corpo-sec); font-weight: 600; }
.venda-rapida__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--espaco-3);
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--bege);
  font-size: var(--fs-corpo);
  color: var(--texto-suave);
}
.venda-rapida__total strong { font-size: var(--fs-valor-grande); color: var(--preto); }
.venda-rapida__direita .form-field { margin-top: var(--espaco-4); }
.venda-rapida__direita .modal-acoes { margin-top: var(--espaco-4); }

/* ─── Acompanhamento de pedidos do Bar (13/10/2026) ─── */
.pedido-card--atrasado { border-left-color: var(--perigo); }
.pedido-card--atrasado .pedido-card__icone { background: var(--perigo-fundo); color: var(--perigo); }
.pedido-card--atrasado .pedido-card__hora strong { color: var(--perigo); }
.pedido-card__hora strong { color: var(--alerta); font-weight: 700; }

/* Histórico recolhível embaixo de uma fila/lista de dashboard
   (`<details>` nativo) — genérico, reaproveitável noutras dashboards. */
.dashboard-historico { margin-top: var(--espaco-5); border-top: 1px solid var(--bege-claro); padding-top: var(--espaco-4); }
.dashboard-historico summary {
  cursor: pointer;
  font-size: var(--fs-corpo-sec);
  font-weight: 600;
  color: var(--texto-suave);
  list-style: none;
}
.dashboard-historico summary::-webkit-details-marker { display: none; }
.dashboard-historico summary::before { content: '▸ '; color: var(--primario); }
.dashboard-historico[open] summary::before { content: '▾ '; }
.dashboard-historico__lista { list-style: none; margin: var(--espaco-3) 0 0; padding: 0; }
.pedido-resolvido {
  display: flex;
  gap: var(--espaco-3);
  align-items: baseline;
  padding: var(--espaco-2) 0;
  border-bottom: 1px solid var(--bege-claro);
  font-size: var(--fs-corpo-sec);
}
.pedido-resolvido__hora { color: var(--texto-suave); min-width: 40px; }
.pedido-resolvido__desc { flex: 1; min-width: 0; }
.pedido-resolvido__status { color: var(--sucesso); white-space: nowrap; }
.pedido-resolvido--cancelado .pedido-resolvido__desc { color: var(--texto-suave); text-decoration: line-through; }
.pedido-resolvido--cancelado .pedido-resolvido__status { color: var(--texto-suave); }

/* ─── Checklist de atividades (dashboards — nasceu no Bar, 13/10/2026) ─── */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-3) var(--espaco-2);
  border-bottom: 1px solid var(--bege-claro);
}
.checklist__item:last-child { border-bottom: none; }
.checklist__check {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--primario-medio);
  background: var(--branco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.checklist__check:hover { border-color: var(--primario); }
.checklist__item--feita .checklist__check { background: var(--sucesso); border-color: var(--sucesso); }
.checklist__item--feita .checklist__check::after { content: '✓'; color: var(--branco); font-size: 13px; font-weight: 700; }
.checklist__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist__titulo { font-size: var(--fs-corpo); font-weight: 600; color: var(--preto); }
.checklist__desc { font-size: var(--fs-corpo-sec); color: var(--texto-suave); }
.checklist__status { font-size: var(--fs-legenda); color: var(--texto-suave); white-space: nowrap; }
.checklist__item--feita .checklist__titulo { color: var(--texto-suave); text-decoration: line-through; }
.checklist__item--feita .checklist__status { color: var(--sucesso); }
.checklist__item--atrasada .checklist__check { border-color: var(--perigo); }
.checklist__item--atrasada .checklist__status { color: var(--perigo); font-weight: 600; }
.checklist__item--atrasada.checklist__item--feita .checklist__status { color: var(--sucesso); font-weight: 400; }

/* Formulário de atividade: dias da semana em linha; campos de
   repetição que não valem pro tipo escolhido somem de verdade. */
[data-repeticao][hidden] { display: none !important; }
.dias-semana-opcoes > div { display: flex; flex-wrap: wrap; gap: var(--espaco-2); }
.dias-semana-opcoes label {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-2) var(--espaco-3);
  background: var(--creme);
  border-radius: var(--radius-sm);
  font-size: var(--fs-corpo-sec);
  cursor: pointer;
}

/* ─── Calculadora de precificação de drinks (pedido do usuário, 13/10/2026) ─── */
#calc-tabela .calc-insumo { min-width: 220px; }
#calc-tabela .calc-qtd { width: 90px; }
.calc-unidade { color: var(--texto-suave); font-size: var(--fs-corpo-sec); }
.calc-resumo {
  max-width: 380px;
  margin: var(--espaco-6) 0 0 auto;
  padding: var(--espaco-5);
  background: var(--creme);
  border-radius: var(--radius-md);
}
.calc-resumo__linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-4);
  padding: var(--espaco-2) 0;
  font-size: var(--fs-corpo);
}
.calc-resumo__linha input { width: 100px; text-align: right; }
.calc-resumo__linha--destaque {
  border-top: 1px solid var(--primario-medio);
  margin-top: var(--espaco-2);
  padding-top: var(--espaco-4);
}
.calc-resumo__linha--destaque strong { font-size: var(--fs-valor-grande); color: var(--primario); }

/* ─── Notas fiscais (pedido do usuário, 13/10/2026) ─── */
.selo--perigo { background: var(--perigo-fundo); color: #b91c1c; }
.filtros-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espaco-4); }
.filtros-linha label { display: flex; flex-direction: column; gap: var(--espaco-1); font-size: var(--fs-corpo-sec); color: var(--texto-suave); }
.filtros-linha .campo-edicao { width: auto; }

/* ─── Modo balcão — tablet do Bar (pedido do usuário, 14/10/2026) ───
   Sem menu lateral (ver base.html); alvos de toque maiores na tela do
   Bar. Só muda tamanho, nada de layout "esperto". */
.modo-balcao .app-shell, .modo-balcao .main { height: calc(100vh - 16px - env(safe-area-inset-bottom)); }
.rodape-balcao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(16px + env(safe-area-inset-bottom)); background: #4a160b; }
.modo-balcao .topbar { padding: var(--espaco-3) var(--espaco-5); }
.modo-balcao .topbar__acoes form { margin: 0; }
.modo-balcao .content { padding: var(--espaco-5); }
.modo-balcao .btn { min-height: 48px; padding: var(--espaco-3) var(--espaco-5); font-size: 1rem; }
.modo-balcao .btn-sm { min-height: 44px; font-size: 0.95rem; }
.modo-balcao .acao-card { padding: var(--espaco-5); min-height: 96px; }
.modo-balcao .acao-card__titulo { font-size: 1.1rem; }
.modo-balcao .pedido-card__cliente { font-size: 1.15rem; }
.modo-balcao .pedido-card__item { font-size: 1.05rem; }
/* App do Bar aberto pelo ícone no aparelho do superusuário (03/11/2026): como o tablet, sem menu nem abas. */
.app-bar-balcao .sidebar, .app-bar-balcao .abas-area { display: none !important; }
.modo-balcao .checklist__check { width: 34px; height: 34px; }
.modo-balcao .campo-edicao, .modo-balcao input[type="text"], .modo-balcao input[type="number"], .modo-balcao select { min-height: 46px; font-size: 1rem; }

/* Bloqueio de agenda (app ou gerência, 16/10/2026): listrado e com o motivo. */
.agenda-bloco-indisponivel--bloqueio { background: repeating-linear-gradient(45deg, rgba(180, 83, 9, .10), rgba(180, 83, 9, .10) 6px, rgba(180, 83, 9, .04) 6px, rgba(180, 83, 9, .04) 12px); border-left: 3px solid rgba(180, 83, 9, .55); }
.agenda-bloqueio__motivo { display:block; font-size: .72rem; color: #9a5b0a; padding: 2px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


/* Grafias padrão (17/10/2026): lista em colunas, não 1 coluna comprida. */
.grafias-lista { list-style: none; margin: var(--espaco-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--espaco-2) var(--espaco-4); }
.grafias-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-2); padding: 6px var(--espaco-3); border: 1px solid var(--borda, #e8e0d6); border-radius: 8px; }
.grafias-lista form { margin: 0; }

/* Página "sem acesso" (DA-03, 22/10/2026): recado grande no meio da área de conteúdo. */
.sem-acesso { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-4); text-align: center; color: var(--texto-suave); }
.sem-acesso svg { color: var(--primario); }
.sem-acesso h2 { font-family: var(--font-titulo); font-size: 2rem; color: var(--preto); margin: 0; }
.sem-acesso p { margin: 0; font-size: 1.05rem; }

/* Desconto do item da comanda em R$ e % lado a lado (22/10/2026). */
table th.col-desconto, table td.col-desconto { text-align: center; }
/* Bloquinho com moldura e divisória: deixa claro que R$ e % são o mesmo desconto (pedido do dono, 22/10/2026). */
.desconto-duplo {
  display: inline-flex; align-items: stretch; white-space: nowrap;
  border: 1px solid var(--primario-medio); border-radius: var(--radius-sm, 8px);
  background: var(--primario-suave); overflow: hidden;
}
.desconto-duplo label {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 6px;
  font-size: var(--fs-corpo-sec); font-weight: 600; color: var(--primario-escuro);
}
.desconto-duplo label + label { border-left: 1px solid var(--primario-medio); }
.desconto-duplo input { width: 64px; padding: 4px 6px; }
.form-field .desconto-duplo { align-self: flex-start; }
.desconto-duplo--limite { border-color: #c62828; box-shadow: 0 0 0 2px rgba(198,40,40,0.35); }
.campo-pendente { border-color: #c62828 !important; box-shadow: 0 0 0 2px rgba(198,40,40,0.35); }

/* Comandas adicionadas ao fechamento: itens de cada uma abaixo dos da principal (22/10/2026). */
.comanda-extra { margin-top: var(--espaco-5); border: 2px solid var(--borda, #e5ded3); border-radius: var(--radius-md); padding: var(--espaco-3) var(--espaco-4); background: var(--branco); }
.comanda-extra__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-3); margin-bottom: var(--espaco-2); }
.comanda-extra__acoes { display: flex; gap: var(--espaco-2); flex-shrink: 0; }
.comanda-extra__papel, .comanda-foco-cabecalho__papel { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--texto-suave); }
.comanda-extra__titulo { font-family: var(--font-titulo); font-weight: 600; }
/* Comanda em foco no conjunto: cabeçalho forte e moldura na área de edição. */
.comanda-foco-cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espaco-3); padding: var(--espaco-2) var(--espaco-3); margin-bottom: var(--espaco-2); background: var(--primario-suave); border: 2px solid var(--primario); border-radius: var(--radius-md); }
.comanda-foco-cabecalho[hidden] { display: none; }
.comanda-foco-cabecalho strong { font-family: var(--font-titulo); }
.comanda-foco-cabecalho__papel { color: var(--primario-escuro); }
.comanda-foco-cabecalho__totais { margin-left: auto; font-size: var(--fs-corpo-sec); }
.comanda-extra__totais { text-align: right; margin-top: var(--espaco-2); font-size: var(--fs-corpo-sec); }

/* ─── Rolagem sem "pulo" (pedido do dono, 22/10/2026) ───
   Em toda área com rolagem própria, quando o conteúdo crescia (abrir um
   formulário, adicionar comanda ao fechamento, mais itens na lista) a
   barra de rolagem aparecia, roubava ~15px de largura e a tela dava um
   salto pro lado. `scrollbar-gutter: stable` reserva esse espaço SEMPRE:
   a barra aparece/some sem mexer em nada. Vale pra todas as áreas com
   altura limitada e rolagem vertical do sistema. */
.content,
.agenda-scroll,
.painel-servicos,
.painel-servicos__lista-profissionais,
.modal-cliente__corpo,
.comanda-coluna-itens,
.comanda-coluna-pagamento,
.lista-historico,
#cliente-historico-painel,
.venda-rapida__carrinho {
  scrollbar-gutter: stable;
}

/* Janela "Adicionar comanda ao fechamento" (22/10/2026). */
.janela-comandas { width: 820px; max-width: calc(100vw - 32px); }
.janela-comandas__busca { width: 100%; margin-bottom: var(--espaco-3); }
.janela-comandas__lista { max-height: 55vh; overflow-y: auto; scrollbar-gutter: stable; }
.janela-comandas__linha { cursor: pointer; }
.janela-comandas__linha:hover { background: var(--primario-suave); }

/* Fechamento em conjunto como resumo + janela de edição por comanda (23/10/2026). */
.comanda-coluna-itens[hidden] { display: none; }
.comanda-extras__intro { margin: 0 0 var(--espaco-2); }
.comanda-extra--principal { border-color: var(--primario-medio); }
.comanda-edicao { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.comanda-edicao__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
.comanda-edicao__titulo { margin: 0; }
.comanda-edicao__corpo { display: flex; min-height: 0; flex: 1; }
.comanda-edicao__corpo .comanda-coluna-itens { max-height: calc(100vh - 140px); }

/* Edição da comanda em rascunho (23/10/2026). */
.comanda-pendentes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); padding: var(--espaco-2) var(--espaco-3); margin-bottom: var(--espaco-3); background: #fff7e0; border: 1.5px solid #e0a800; border-radius: var(--radius-sm); }
.comanda-pendentes[hidden] { display: none; }
.comanda-pendentes__texto { flex: 1 1 260px; font-size: var(--fs-corpo-sec); font-weight: 600; color: #7a5200; }
tr.item-pendente td { background: #fffbea; }
tr.item-pendente td:first-child { box-shadow: inset 3px 0 0 #e0a800; }
.comanda-edicao__acoes { display: flex; gap: var(--espaco-2); }

/* Janela "Produtos usados" em blocos e em rascunho (23/10/2026). */
.consumo-bloco { border: 1px solid var(--borda, #e5ded3); border-radius: var(--radius-md); padding: var(--espaco-3) var(--espaco-4); margin-bottom: var(--espaco-3); background: var(--branco); }
.consumo-bloco__titulo { margin: 0 0 var(--espaco-2); font-family: var(--font-titulo); font-size: var(--fs-card); }
.consumo-marca:not(:empty) { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: #fff0c2; color: #7a5200; margin-left: 4px; }
tr.consumo-novo td { background: #fffbea; }
tr.consumo-removido td { text-decoration: line-through; color: var(--texto-suave); }
tr.consumo-removido .consumo-marca { text-decoration: none; display: inline-block; background: #fde2e2; color: #9b1c1c; }
.consumo-acoes { align-items: center; }
.consumo-pendentes { margin-right: auto; font-weight: 600; color: #7a5200; }
/* Ícone de "Produtos usados" à esquerda do serviço na comanda (23/10/2026). */
.item-nome-cel { display: flex; align-items: center; gap: 6px; }
.item-nome-cel > :last-child { flex: 1; min-width: 0; }
.btn-produtos-usados { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--texto-suave); cursor: pointer; }
.btn-produtos-usados:hover, .btn-produtos-usados:focus-visible { color: var(--primario); border-color: var(--borda, #e5ded3); background: var(--branco); }
.btn-produtos-usados.tem-produtos { color: var(--primario); }
.btn-produtos-usados__n { position: absolute; top: -4px; right: -5px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 999px; background: var(--primario); color: #fff; font-size: 9px; font-weight: 700; line-height: 13px; text-align: center; }

/* Pacote com limitação de dias (24/10/2026): popup em destaque. */
.aviso-pacote { border-top: 6px solid #d97706; max-width: 640px; width: calc(100% - 32px); }
.aviso-pacote .modal-confirmar__mensagem { font-size: 1.05rem; font-weight: 600; text-align: left; line-height: 1.45; }
.aviso-pacote .helptext { font-size: 0.85rem; color: var(--texto-suave); text-align: left; }
.aviso-pacote__titulo { margin: 0 0 var(--espaco-2); font-size: 1.15rem; font-weight: 700; color: #b45309; }
.aviso-pacote__acoes { flex-wrap: wrap; }
.aviso-venda-pacote__dias { display: inline-block; margin: 6px 0; padding: 4px 12px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 700; }