/* O atributo hidden SEMPRE esconde: uma classe de display (grid, flex...) não pode vencer o atributo. Regra central; não repetir [hidden] { display: none } por componente. */
[hidden] { display: none !important; }
/* Camada visual do CRM (carrega DEPOIS do <style> do cabeçalho e o refina).
   Só usa tokens de tokens.css. */
body { font-family: var(--font-ui); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--text); }
h1 { font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.005em; }
.num, .cards .num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* menu lateral: roxo da marca; ativo discreto (pink fica só na ação primária) */
aside nav a { color: var(--on-dark); border-radius: var(--r-sm); position: relative; }
aside nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
aside nav a.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
aside nav a.active::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--action); }
aside .grp-title { color: #8d7f91; letter-spacing: .08em; }
aside .userbox { border-top-color: rgba(255,255,255,.1); }
.search-trigger { background: rgba(255,255,255,.07); border-radius: var(--r-sm); }

/* cartões e tabelas */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
a.card:hover { box-shadow: var(--sh-1); border-color: var(--line-strong); transform: none; }
table { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: none; }
.lista-scroll { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: none; }
.lista-scroll table { border: none; }
th, .lista-scroll-cabecalho span { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: .05em; }
th, td { border-bottom-color: var(--line); }
tr:hover { background: var(--surface-2); }
.linha-clicavel:hover { background: var(--surface-2); }

/* botões, campos, selos */
.btn { background: var(--action); border-radius: var(--r-sm); box-shadow: none; font-weight: 600; }
.btn:hover { background: var(--action-hover); }
.icon-btn { border-color: var(--line); border-radius: var(--r-sm); background: var(--surface); }
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
input[type=text], input[type=tel], input[type=email], input[type=url], input[type=password], input[type=number], input[type=time], input[type=date], select, textarea {
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--action-soft); border-color: var(--action); outline-offset: 0; }
.badge-green { background: var(--ok-bg); color: var(--ok); }
.badge-amber { background: var(--warn-bg); color: var(--warn); }
.badge-red, .vencido { background: var(--bad-bg); color: var(--bad); }
.vencido { background: none; }
.badge-gray { background: #F0ECF2; color: var(--muted); }
.warn { color: var(--warn); }
.erro { background: var(--bad-bg); color: var(--bad); border-left-color: var(--bad); }
.sucesso { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
.tag { background: #F0ECF2; color: var(--brand-600); }
a.link:hover, a.th-sort:hover { color: var(--brand-600); }
.busca-box, .preview-box { border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.busca-item:hover, .busca-item.ativo, .busca-item-linha:hover { background: var(--surface-2); }

/* ===== Componentes (documentados em /estilo) ===== */
/* botões: .btn = primário (pink). Use UM primário por tela. */
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn[disabled], .btn-secondary[disabled] { opacity: .5; cursor: not-allowed; }
.btn .ico, .icon-btn .ico { margin-right: 6px; }
.icon-btn .ico { margin: 0; }

/* ícones de linha (sprite em partials/icons.ejs) */
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }

/* chips de filtro */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip.ativo { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }

/* carregamento e vazio */
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.vazio { text-align: center; padding: 36px 16px; color: var(--muted); }
.vazio .ico { width: 28px; height: 28px; margin-bottom: 8px; color: var(--line-strong); }
.vazio strong { display: block; color: var(--text); margin-bottom: 4px; }

/* painel lateral (drawer): abre sem trocar de tela */
.drawer-fundo { position: fixed; inset: 0; background: rgba(42,11,45,.35); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 1110; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--surface); box-shadow: var(--sh-2); transform: translateX(100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; z-index: 1111; display: flex; flex-direction: column; }
.drawer-aberto .drawer-fundo { opacity: 1; pointer-events: auto; }
.drawer.aberto { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; } /* fechado fica invisível (e fora do teclado), mesmo se a tela for mais larga que a página */
.drawer-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-corpo { padding: 20px; overflow-y: auto; flex: 1; }
.drawer-rodape { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }

/* ===== Fila do dia (dashboard) ===== */
.fila { padding: 4px 16px; }
.fila-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fila-item:last-of-type { border-bottom: none; }
.fila-nome { font-weight: 600; }
.fila-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.fila-motivo { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: #F0ECF2; color: var(--muted); }
.fila-lembrete { background: var(--bad-bg); color: var(--bad); }
.fila-cashback { background: var(--warn-bg); color: var(--warn); }
.fila-sumido { background: #F0ECF2; color: var(--brand-600); }
.fila-acoes { display: flex; align-items: center; gap: 6px; flex: none; }
.fila-aviso { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 12px 16px; background: var(--warn-bg); border-color: transparent; }
.fila-aviso .muted { display: block; font-size: 13px; }
details.lista-completa { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 0 16px; }
details.lista-completa > summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; }
details.lista-completa > summary::-webkit-details-marker { display: none; }
details.lista-completa > summary .muted { font-weight: 400; margin-left: 8px; font-size: 13px; }
details.lista-completa[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }

/* ===== Painéis do dashboard (aniversários, estoque, funil, tarefas) ===== */
.painel-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
.painel { padding: 16px 18px; }
.painel-titulo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; font-size: 13px; }
.painel-titulo h2 { margin: 0; }
.painel-sub { margin: 14px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.painel-sub .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.aniv-item, .repor-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.aniv-item:first-of-type, .repor-item:first-of-type { border-top: none; }
.aniv-dia { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--brand-600); display: grid; place-items: center; font-weight: 650; font-size: 13px; flex: none; }
.aniv-dia.hoje { background: var(--highlight); color: var(--brand-900); }
.aniv-corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.aniv-corpo .muted { font-size: 12.5px; }
.aniv-mes { margin-top: 10px; font-size: 13px; }
.aniv-mes summary { cursor: pointer; }
.estoque-resumo { display: flex; gap: 28px; }
.estoque-resumo > div { display: flex; flex-direction: column; }
.estoque-resumo .num { font-size: 26px; font-weight: 650; line-height: 1.1; }
.repor-item { justify-content: space-between; }
.repor-info { display: flex; align-items: center; gap: 8px; flex: none; font-size: 12.5px; }
.barra-etapas { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 12px; background: var(--surface-2); }
.barra-etapas i { display: block; min-width: 4px; }
.etapa-linha { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text); text-decoration: none; font-size: 14px; }
.etapa-linha span:nth-child(2) { flex: 1; }
.etapa-linha:hover { color: var(--brand-600); }
.etapa-ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ===== Padrões de lista (usados em Conferir cashback e onde mais tiver lista com decisão) ===== */
/* barra de status de uma linha: título, selos e um link à direita */
.barra-status { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 4px; }
.barra-status strong { white-space: nowrap; }
.barra-status .fim { margin-left: auto; white-space: nowrap; }
/* barra acima de uma lista: título/filtro à esquerda, contador e ação à direita */
.barra-lista { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0 10px; }
/* estado "tudo certo" em uma linha, no lugar de um cartão vazio gigante */
.estado-ok { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 14px; margin: 4px 0 0; }
/* botões de decisão dentro de uma linha da tabela */
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-linha .btn { white-space: nowrap; }

/* aviso rápido (toast) depois de uma ação que não troca de tela */
.toast-area { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--brand-900); color: #fff; padding: 10px 14px; border-radius: var(--r-md); box-shadow: var(--sh-2); font-size: 14px; line-height: 1.4; transition: opacity .3s, transform .3s; }
.toast-erro { background: var(--bad); }
.toast.saindo { opacity: 0; transform: translateY(6px); }
/* selos nunca quebram em várias linhas */
.badge { white-space: nowrap; }

/* ===== Meta do mês e gráfico interativo (dashboard) ===== */
.meta-progresso { width: 100%; height: 8px; margin: 10px 0 8px; appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.18); }
.meta-progresso::-webkit-progress-bar { background: rgba(255,255,255,.18); }
.meta-progresso::-webkit-progress-value { background: var(--highlight); border-radius: 99px; }
.meta-progresso::-moz-progress-bar { background: var(--highlight); }
.meta-linha { font-size: 13px; line-height: 1.45; margin-top: 2px; }
.meta-fraca { opacity: .8; font-size: 12.5px; }
.meta-editar, .meta-definir { margin-top: 10px; background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: var(--r-sm); font-size: 12.5px; padding: 5px 10px; cursor: pointer; }
.meta-editar { border-color: transparent; padding-left: 0; text-decoration: underline; opacity: .8; }
.kpi-hero { color: var(--on-dark); }
.kpi-hero a.val { color: var(--highlight); text-decoration: none; display: block; }
.kpi-hero .meta-linha strong { color: #fff; }
.grafico-card { padding: 16px 18px; margin-bottom: 12px; }
.grafico { position: relative; width: 100%; touch-action: pan-y; }
.grafico svg { display: block; width: 100%; height: 230px; cursor: crosshair; }
.g-grade { stroke: var(--line); stroke-width: 1; }
.g-eixo { fill: var(--muted); font-size: 11px; }
.g-folga { fill: var(--surface-2); }
.g-real { stroke: var(--brand-600); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.g-meta { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 7 5; }
.g-ant { stroke: var(--line-strong); stroke-width: 2; }
.g-proj { stroke: var(--info); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.g-hoje { stroke: var(--line-strong); stroke-width: 1; }
.g-guia { stroke: var(--text); stroke-opacity: .35; stroke-width: 1; }
.g-ponto { fill: var(--brand-600); stroke: #fff; stroke-width: 2; }
.grafico-tip { position: absolute; z-index: 5; background: var(--brand-900); color: #fff; font-size: 12.5px; line-height: 1.5; padding: 8px 10px; border-radius: var(--r-md); box-shadow: var(--sh-2); pointer-events: none; white-space: nowrap; }
.g-ok { color: #8be0b0; } .g-atraso { color: #ffc27a; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); flex: 1 1 100%; min-width: 0; }
.grafico-legenda i { display: inline-block; width: 18px; height: 0; border-top: 3px solid; margin-right: 6px; vertical-align: middle; }
.grafico-legenda .lg-real { border-color: var(--brand-600); }
.grafico-legenda .lg-meta { border-color: var(--warn); border-top-style: dashed; }
.grafico-legenda .lg-proj { border-color: var(--info); border-top-style: dotted; }
.grafico-legenda .lg-ant { border-color: var(--line-strong); }

/* cartão da meta: números em destaque e situação em selo */
.meta-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.meta-stats > div { background: rgba(255,255,255,.08); border-radius: var(--r-md); padding: 8px 10px; min-width: 0; }
.meta-stats .rot { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.meta-stats .num { display: block; font-size: 16px; font-weight: 650; line-height: 1.25; color: #fff; white-space: nowrap; }
.meta-stats small { display: block; }
.meta-stats small { font-size: 12px; opacity: .8; font-weight: 400; }
.meta-situacao { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
.meta-adiantado { background: rgba(120,220,160,.2); color: #9be3b8; }
.meta-atrasado { background: rgba(250,224,110,.18); color: var(--highlight); }
.fone-rapido { display: flex; gap: 6px; align-items: center; }
.fone-rapido input { width: 150px; padding: 5px 8px; font-size: 13px; }

/* botão "+ Novo" do menu lateral */
.novo-menu { position: relative; margin: 0 0 10px; }
.novo-menu > summary { list-style: none; width: 100%; justify-content: center; cursor: pointer; display: flex; }
.novo-menu > summary::-webkit-details-marker { display: none; }
.novo-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: 6px; display: flex; flex-direction: column; }
.novo-lista a { color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; }
.novo-lista a:hover { background: var(--surface-2); }

/* Barra de ações em massa: só aparece com clientes marcados */
.barra-massa { position: sticky; bottom: 12px; z-index: 5; margin: 8px 0; box-shadow: var(--sombra-2, 0 4px 16px rgba(0,0,0,.18)); border: 1px solid var(--borda, #e5e5e5); }
.barra-massa[hidden] { display: none; }

/* Busca com ícone, filtros em grade, menu de colunas */
.busca-campo { position: relative; min-width: 220px; }
.busca-campo .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.busca-campo input { padding-left: 36px; }
.chip { text-decoration: none; }
.filtros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 8px; }
.filtros-grade section { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.filtros-grade h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.filtros-grade label { font-size: 13px; margin: 0; }
.filtros-grade input[type=text], .filtros-grade input[type=number], .filtros-grade select { width: 100%; }
.marca { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.marca input { width: auto; margin: 0; }
.menu-pop { position: relative; }
.menu-pop > summary { list-style: none; cursor: pointer; }
.menu-pop > summary::-webkit-details-marker { display: none; }
.menu-pop-corpo { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* Cartões de número que levam a algum lugar; títulos de seção */
.secao-titulo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.kpi-link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.kpi-link:hover { border-color: var(--muted); box-shadow: var(--sh-2, 0 4px 14px rgba(0,0,0,.08)); }

/* Cartões de número com comparativos */
.kpi-comp { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.kpi-comp li { display: flex; justify-content: space-between; gap: 12px; }
.kpi-comp span { color: var(--muted); }
.var-sobe { color: var(--ok); }
.var-desce { color: var(--bad); }
.nowrap { white-space: nowrap; }
.btn { white-space: nowrap; }

/* Lista de clientes que combinam (menu suspenso) */
.combinam > summary { cursor: pointer; }
.combinam { position: relative; }
.combinam-corpo { position: absolute; z-index: 30; left: 0; top: 100%; min-width: 260px; max-height: 280px; overflow-y: auto; margin-top: 6px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 6px; }
.combinam-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }

@media (max-width: 640px) { .fila-item { flex-wrap: wrap; } .fila-acoes { flex-wrap: wrap; } }

/* Seletor de período (partials/periodo_picker) e opção de menu */
.periodo { position: relative; display: flex; flex-direction: column; gap: 6px; }
.periodo-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.periodo-btn:hover { border-color: var(--muted); }
.periodo-painel { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 320px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.periodo-opcoes { display: flex; flex-direction: column; }
.opcao-menu { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: 8px 10px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.opcao-menu:hover { background: var(--surface-2); }
.periodo-personal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; border-top: 1px solid var(--line); margin-top: 6px; padding: 10px 2px 2px; }
.periodo-personal label { font-size: 12px; margin: 0 0 2px; }
.periodo-personal input { width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; }
.periodo-personal .btn { grid-column: 1 / -1; }
.seletor-inline { display: inline-flex; min-width: 160px; }
.periodo-painel-lista { width: auto; min-width: 100%; white-space: nowrap; }
.num-col { text-align: right; }
.text-bad { color: var(--bad); }
.col-acao { width: 1%; white-space: nowrap; text-align: right; }
.nome-sec { font-size: 11px; padding: 1px 8px; }

/* contador no item do menu */
.menu-contagem { margin-left: auto; background: var(--action); color: #fff; border-radius: 100px; font-size: 11px; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center; }

/* interruptor: ligado = verde (rosa fica só para ação primária) */
.toggle-switch input:checked + .toggle-trilho { background: var(--ok); }
.toggle-switch input:focus-visible + .toggle-trilho { outline: 2px solid var(--action); outline-offset: 2px; }
.marca-troca { font-weight: 400; font-size: 14px; align-items: flex-start; }
.chip-sm { padding: 2px 10px; font-size: 12px; }

/* dica flutuante (tooltip) */
.dica-flutuante { display: none; position: fixed; z-index: 200; max-width: 260px; padding: 8px 10px; background: var(--brand-900); color: #fff; border-radius: 8px; font-size: 12.5px; line-height: 1.4; font-weight: 400; text-transform: none; letter-spacing: 0; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
[data-dica] { cursor: help; }

.normal-case { text-transform: none; letter-spacing: 0; }
.fila-acoes .menu-pop-corpo { min-width: 240px; }
.fila-acoes .menu-pop-corpo .fone-rapido { display: flex; gap: 6px; }

/* "+ Novo" do menu: discreto (o rosa fica só para a ação principal de cada tela) */
.novo-menu > summary.btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 500; }
.novo-menu > summary.btn:hover, .novo-menu[open] > summary.btn { background: rgba(255,255,255,.16); }

/* Planejar meta */
.aviso-plano { padding: 12px 16px; background: var(--warn-bg); color: var(--warn); border-color: transparent; font-size: 14px; }
.lbl-cenario { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.barras-card { overflow: hidden; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 170px; }
.barra-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.barra { width: 100%; background: var(--brand-600); border-radius: 4px 4px 0 0; display: block; }
.barra-valor { font-size: 11px; color: var(--muted); }
.barra-mes { font-size: 11px; color: var(--muted); white-space: nowrap; }
.acao-plano { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.acao-plano:last-child { border-bottom: 0; }
.acao-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--brand-600); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.acao-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) { .acao-plano { flex-wrap: wrap; } .barra-valor { display: none; } }
@media print {
  aside, .nao-imprimir, .drawer, .drawer-fundo, .toast, .search-trigger { display: none !important; }
  body, main { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  main { width: 100% !important; max-width: none !important; }
  .card, .acao-plano, tr { break-inside: avoid; }
  .lista-scroll { max-height: none !important; overflow: visible !important; }
  @page { size: A4; margin: 14mm; }
}

/* Gráfico do Dashboard: recolhível, leitura fixa no topo (sem balão que atrapalha) */
.grafico-card { padding: 0; margin-bottom: 4px; }
.grafico-topo { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding: 12px 18px; cursor: pointer; list-style: none; }
.grafico-topo::-webkit-details-marker { display: none; }
.grafico-topo h2 { font-size: 15px; }
.grafico-topo .grafico-legenda { flex: 1; justify-content: flex-end; }
.grafico-seta { transition: transform .15s; color: var(--muted); }
.grafico-card:not([open]) .grafico-seta { transform: rotate(-90deg); }
.grafico-card[open] > .grafico-leitura, .grafico-card[open] > .grafico { margin-left: 18px; margin-right: 18px; width: auto; }
.grafico-leitura { margin: 0 18px; min-height: 2.9em; font-size: 13px; color: var(--text); }
.grafico-card[open] > .grafico { padding-bottom: 14px; }
.grafico-card .grafico svg { height: 160px; }
@media (max-width: 640px) { .grafico-topo .grafico-legenda { justify-content: flex-start; flex-basis: 100%; order: 3; } }
.resumo-plano { padding: 14px 18px; font-size: 15px; line-height: 1.55; background: var(--surface-2); }
.custos-detalhe > summary { list-style: none; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.custos-detalhe > summary::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.custos-detalhe[open] > summary::before { transform: rotate(45deg); }
.custos-detalhe > summary::-webkit-details-marker { display: none; }
@media print { .custos-detalhe { display: block; } .custos-detalhe > :not(summary) { display: block !important; } }

/* Configurações */
.config-layout { display: flex; gap: 28px; align-items: flex-start; }
.config-nav { flex: 0 0 210px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.config-nav a { padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--text); text-decoration: none; }
.config-nav a:hover { background: var(--surface-2); }
.config-conteudo { flex: 1; min-width: 0; }
.config-secao { padding: 20px 24px; margin-bottom: 16px; scroll-margin-top: 16px; }
.config-secao h2 { font-size: 17px; margin: 0 0 4px; }
.cfg-linha { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cfg-linha:last-child { border-bottom: 0; }
.cfg-rotulo { display: flex; flex-direction: column; gap: 2px; margin: 0; font-weight: 400; cursor: pointer; }
.cfg-rotulo strong { font-weight: 500; font-size: 14px; }
.cfg-ajuda { font-size: 12.5px; color: var(--muted); }
.cfg-controle { display: flex; justify-content: flex-end; }
.cfg-controle input[type=text], .cfg-controle input[type=number], .cfg-controle input[type=time], .cfg-controle textarea { width: 100%; }
.cfg-com-un { display: flex; align-items: center; gap: 8px; width: 100%; }
.cfg-un { color: var(--muted); font-size: 13px; min-width: 34px; }
.cfg-dias { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip-dia input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-dia { position: relative; margin: 0; }
.chip-dia span { display: inline-block; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--text); background: var(--surface); }
.chip-dia input:checked + span { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.chip-dia input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.cfg-barra { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--brand-900); color: #fff; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.cfg-barra[hidden] { display: none; }
.token-gerado { font-family: monospace; font-size: 13px; word-break: break-all; margin-top: 6px; user-select: all; }
@media (max-width: 900px) {
  .config-layout { flex-direction: column; }
  .config-nav { position: static; flex-direction: row; flex-wrap: wrap; flex: none; width: 100%; }
  .cfg-linha { grid-template-columns: 1fr; gap: 8px; }
  .cfg-controle, .cfg-dias { justify-content: flex-start; }
}
.cfg-linha[hidden], .config-secao[hidden], .linha-vinho[hidden], .pdv-produto-btn[hidden] { display: none; }
/* fechar a conta da comanda: um bloco por pessoa (forma de pagamento, itens da mesa que ela divide, fechar só ela) */
.fecha-pessoa { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fecha-itens summary { list-style: none; }
.fecha-itens[open] { flex: 1 1 100%; }
.cfg-larga { grid-template-columns: 1fr; gap: 8px; }
.cfg-larga .cfg-controle { justify-content: stretch; }

/* Configurações: campos compactos, sem setinhas */
.cfg-controle input[type=number], .cfg-com-un input[type=number] { width: 130px; text-align: right; }
.cfg-controle input[type=time] { width: 130px; }
.cfg-controle input[type=text] { max-width: 260px; }
.cfg-larga .cfg-controle input[type=text], .cfg-larga .cfg-controle textarea { max-width: none; }
.cfg-com-un { width: auto; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
.cfg-rotulo strong .badge { font-size: 10.5px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.config-secao h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }

/* Busca global: item marcado pelas setas e atalho de WhatsApp */
.busca-item-linha .busca-item-link.ativo, .busca-item.ativo { background: var(--action-soft); border-radius: var(--r-sm); }
.busca-item-acoes a { font-size: 12px; color: var(--muted); text-decoration: none; }
.busca-item-acoes a:hover { color: var(--action); text-decoration: underline; }

/* Próxima ação sugerida no perfil do cliente */
.proxima-acao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; }
.proxima-ativa { background: var(--action-soft); border-color: transparent; }

/* horário por dia */
.cfg-semana { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.cfg-semana-linha { display: grid; grid-template-columns: 44px 90px 110px 24px 110px 1fr; align-items: center; gap: 8px; }
.cfg-semana-linha input[type=time] { width: 110px; max-width: none; }
.cfg-semana-dia { font-size: 14px; }
@media (max-width: 640px) { .cfg-semana-linha { grid-template-columns: 44px 1fr 1fr; } .cfg-semana-linha .cfg-un, .cfg-semana-linha .marca { grid-column: auto; } }

/* Linha do tempo do cliente */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linha-tempo li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 8px 0 8px 14px; border-bottom: 1px solid var(--line); border-left: 3px solid var(--line-strong); font-size: 14px; }
.linha-tempo li:last-child { border-bottom: 0; }
.lt-pedido { border-left-color: var(--brand-600) !important; }
.lt-cashback { border-left-color: var(--ok) !important; }
.lt-whatsapp, .lt-vitrine { border-left-color: var(--info) !important; }
.lt-data { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Gráfico de barras interativo (public/js/barras.js) */
.barras-js { position: relative; width: 100%; }
.barras-js svg { display: block; width: 100%; height: 190px; }
.barra-g { outline: none; cursor: pointer; }
.barra-r { fill: var(--line-strong); transition: fill .12s; }
.barra-destaque .barra-r { fill: var(--brand-600); }
.barra-ativa .barra-r, .barra-g:focus .barra-r { fill: var(--muted); }
.barra-val { font-size: 11px; fill: var(--muted); }
.barra-ativa .barra-val { fill: var(--text); font-weight: 600; }
.barras-leitura { min-height: 2.6em; margin: 0 0 8px; font-size: 13px; }

/* cartão da meta: o rodapé desce até o fim e a conta de pedidos ocupa o espaço que sobrava */
.kpi-hero { display: flex; flex-direction: column; }
.kpi-hero .meta-rodape { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 12px; }
.meta-pedidos { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--on-dark); }
.meta-pedidos strong { color: #fff; }
/* filtros: cartões não esticam até a altura do vizinho (sem miolo vazio) e linha única para poucos campos */
.filtros-grade { align-items: start; }
.filtros-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin-top: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.filtros-linha > div { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.filtros-linha label { font-size: 13px; margin: 0; }
.filtros-linha .marca { padding-bottom: 8px; }

/* Novo pedido */
.np-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.np-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.np-bloco { padding: 16px 18px; }
.np-bloco h2 { font-size: 15px; margin: 0 0 10px; }
.np-sugestoes { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); max-height: 280px; overflow-y: auto; }
.np-op { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; font-size: 14px; cursor: pointer; font-weight: 400; color: var(--text); }
.np-op:hover:not(:disabled) { background: var(--action-soft); }
.np-op:disabled { opacity: .5; cursor: not-allowed; }
.np-vazio { padding: 10px 12px; }
.np-escolhido { margin: 10px 0 0; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm); font-weight: 600; font-size: 14px; }
.np-num { width: 74px; text-align: right; }
.np-preco { width: 100px; }
.np-resumo label { font-size: 13px; margin-top: 10px; }
.np-totais { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.np-totais div { display: flex; justify-content: space-between; font-size: 14px; }
.np-totais dt, .np-totais dd { margin: 0; }
.np-total { font-size: 17px !important; font-weight: 700; }
@media (max-width: 900px) { .np-layout { grid-template-columns: 1fr; } }

/* barras: marcado (clique), valor com contorno para não sumir atrás da linha de média */
.barra-marcada .barra-r { fill: var(--action); }
.barra-marcada .barra-val { fill: var(--text); font-weight: 600; }
.barra-val, .barra-media { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.barra-g:focus-visible .barra-r { stroke: var(--text); stroke-width: 1.5px; }

/* painel largo (Novo pedido): dois blocos empilhados, resumo no fim */
.drawer-largo { width: min(720px, 100vw); }
.drawer-largo .np-layout { grid-template-columns: 1fr; }
.drawer-largo .np-bloco { box-shadow: none; }
/* tela de entrada: dividida no desktop (marca à esquerda, formulário à direita), uma coluna no celular */
main:has(> .login-pagina) { max-width: none; padding: 0; }
.login-pagina { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh; background: var(--surface); font-family: var(--font-ui); }
.login-marca { background: var(--brand-800); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 24px; position: relative; overflow: hidden; }
.login-marca::before { content: ''; position: absolute; inset: -25%; background: radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.08), transparent 60%); pointer-events: none; }
.login-logo-caixa { position: relative; width: 68px; aspect-ratio: 902 / 542; overflow: hidden; flex: none; } /* recorta a folga transparente do arquivo (1920x1080) para a marca ocupar o espaço certo */
.login-logo { position: absolute; max-width: none; width: 212.86%; left: -56.43%; top: -49.63%; display: block; }
.login-frase { position: relative; text-wrap: balance; margin: 0; font-size: 15px; line-height: 1.4; font-weight: 400; color: var(--on-dark); max-width: 26ch; }
.login-frase strong { display: block; color: #fff; font-weight: 600; font-size: 14px; }
.login-frase-apoio { display: none; }
/* celular: a marca vira uma faixa baixa só com o logo, para o formulário aparecer sem rolagem (375x667). A partir de 640px volta a frase. */
.login-marca { height: 120px; padding: 0 20px; }
.login-frase { display: none; }
@media (min-width: 640px) {
  .login-marca { height: auto; padding: 24px; }
  .login-logo-caixa { width: 76px; }
  .login-frase { display: block; }
}
.login-lado { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 32px 20px 28px; }
.login-form-area { width: 100%; max-width: 380px; }
.login-titulo { font-size: 20px; line-height: 1.2; font-weight: 600; margin: 0; color: var(--text); letter-spacing: -.01em; }
.login-sub { margin: 4px 0 20px; color: var(--muted); font-size: 14px; }
.login-rodape { margin: 28px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
@media (max-width: 639px) { /* folga menor também no estado com erro, para tudo caber em 375x667 sem rolagem */
  .login-lado { padding: 20px 20px 12px; }
  .login-rodape { margin-top: 16px; }
}
@media (min-width: 900px) {
  .login-pagina { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; }
  .login-marca { height: auto; }
  .login-marca { gap: 20px; padding: 48px; }
  .login-logo-caixa { width: min(104px, 40%); }
  .login-frase { font-size: 14px; max-width: 30ch; }
  .login-frase strong { font-size: 18px; line-height: 1.3; margin-bottom: 6px; }
  .login-frase-apoio { display: block; }
  .login-lado { padding: 48px; justify-content: center; }
  .login-titulo { font-size: 22px; }
}

/* ação principal da entrada: Google. O "G" fica num quadrado branco (a marca do Google exige fundo claro) */
.login-principal { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 6px 16px 6px 6px; background: var(--action-hover); color: #fff; border: 0; border-radius: var(--r-md); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .2s, transform .2s; }
.login-principal:hover { background: var(--action-strong); }
.login-principal .login-g { display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border-radius: var(--r-sm); flex: none; }
.login-principal .login-g svg { width: 20px; height: 20px; }
.login-principal:focus-visible, .login-entrar:focus-visible, .login-abrir:focus-visible, .campo-senha-btn:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.login-form-area input[type=text]:focus-visible, .login-form-area input[type=password]:focus-visible { outline: 3px solid var(--action); outline-offset: 0; border-color: var(--action); }
.login-form-area input { min-height: 46px; font-size: 16px; }
.login-form-area input[aria-invalid="true"] { border-color: var(--bad); }

/* usuário e senha: recolhido por padrão */
.login-usuario { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 4px; }
.login-abrir { list-style: none; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; cursor: pointer; color: var(--text); font-size: 15px; font-weight: 500; border-radius: var(--r-sm); }
.login-abrir::-webkit-details-marker { display: none; }
.login-abrir .ico { width: 16px; height: 16px; transition: transform .2s; }
.login-usuario[open] .login-abrir .ico { transform: rotate(180deg); }
.login-abrir:hover { color: var(--action-hover); }
.login-form { padding-top: 8px; }
.login-entrar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 20px; background: var(--brand-900); color: #fff; border: 0; border-radius: var(--r-md); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.login-entrar:hover { background: var(--brand-800); }

/* aviso de erro: ícone, texto e foco; lido na hora por leitor de tela (role="alert") */
.login-erro { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 14px; background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); border-radius: var(--r-md); font-size: 14px; line-height: 1.4; }
.login-erro .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* movimento discreto da entrada: tudo sobe e aparece em sequência; o brilho do painel da marca respira devagar. Só CSS (sem biblioteca) e desligado em "reduzir movimento". */
@keyframes login-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes login-respira { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
@keyframes login-treme { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.login-marca::before { animation: login-respira 14s ease-in-out infinite alternate; will-change: transform; }
.login-logo-caixa { animation: login-entra .8s cubic-bezier(.2, .7, .2, 1) both; }
.login-frase { animation: login-entra .8s .18s cubic-bezier(.2, .7, .2, 1) both; }
.login-form-area > * { animation: login-entra .6s cubic-bezier(.2, .7, .2, 1) both; }
.login-form-area > :nth-child(1) { animation-delay: .10s; }
.login-form-area > :nth-child(2) { animation-delay: .16s; }
.login-form-area > :nth-child(3) { animation-delay: .22s; }
.login-form-area > :nth-child(4) { animation-delay: .30s; }
.login-form-area > :nth-child(5) { animation-delay: .38s; }
.login-form-area > .login-erro { animation: login-entra .35s ease both, login-treme .4s .3s ease; animation-delay: 0s, .3s; }
.login-principal:hover { box-shadow: 0 6px 18px rgba(42, 11, 45, .22); transform: translateY(-1px); }
.login-principal:active { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .login-marca::before, .login-logo-caixa, .login-frase, .login-form-area > *, .login-form-area > .login-erro { animation: none; }
  .login-principal:hover { transform: none; }
}

/* carregando: o botão fica travado, mostra o giro e troca o texto (ver data-carregando em ui.js) */
[data-carregando].carregando { pointer-events: none; opacity: .85; }
[data-carregando].carregando::after { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giro .7s linear infinite; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-carregando].carregando::after { animation-duration: 2s; } .login-abrir .ico, .login-principal, .login-entrar { transition: none; } }

.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-weight: 600; font-size: 14px; text-decoration: none; }
.btn-google:hover { background: var(--surface-2); border-color: var(--muted); }
.ico-google { width: 18px; height: 18px; flex: none; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 76px; box-sizing: border-box; width: 100%; }
.campo-senha-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: var(--r-sm); }
.campo-senha-btn:hover { color: var(--text); }

/* comandas dos eventos: lista de clientes encontrados na busca */
.comanda-sugestoes { border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 4px; overflow: hidden; background: var(--surface); }
.comanda-sugestao { display: block; width: 100%; text-align: left; min-height: 48px; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font-size: 14px; cursor: pointer; }
.comanda-sugestao:last-child { border-bottom: 0; }
.comanda-sugestao-novo { color: var(--action); font-weight: 600; }
.comanda-sugestao-aviso { margin: 0; padding: 12px; font-size: 14px; color: var(--muted); }
.comanda-sugestao:hover { background: var(--surface-2); }

/* ===== estilos que moraram dentro das telas (agora aqui, em um lugar só) ===== */

/* Conversas (inbox): lista com abas à esquerda, conversa no meio; no celular uma coluna por vez */
.wa-shell { container-type: inline-size; display: flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; height: calc(100vh - 220px); min-height: 420px; background: var(--surface); position: relative; }
.wa-lista { width: 360px; flex-shrink: 0; min-height: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--surface); }
.wa-lista-topo { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wa-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-conta { font-weight: 700; margin-left: 2px; }
.wa-lista-itens { flex: 1; overflow-y: auto; }
.wa-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); cursor: pointer; }
.wa-item:hover { background: var(--surface-2); }
.wa-item:focus-visible { outline: 3px solid var(--action); outline-offset: -3px; }
.wa-item.ativa { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--brand-900); }
.wa-item[hidden], .wa-destaque-card[hidden] { display: none; }
/* destaque: quem tocou em "Quero usar meu cashback" fica no topo de "Precisa de resposta" */
.wa-destaque { background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 10px 14px 4px; }
.wa-destaque-titulo { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ok); }
.wa-destaque-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; font-size: 14px; }
.wa-destaque-card.ativa { box-shadow: 0 0 0 2px var(--ok); }
.wa-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; font-size: 15px; color: #fff; background: var(--brand-800); }
.wa-item-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-item-nome { font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; } /* nome do cliente sempre inteiro */
.wa-item-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-item.nao-lida .wa-item-nome { font-weight: 700; }
.wa-item.nao-lida .wa-item-preview { color: var(--text); font-weight: 500; }
.wa-item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.wa-item-hora { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wa-item.nao-lida .wa-item-hora { color: var(--ok); font-weight: 700; }
.wa-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.wa-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-2); }
.wa-chat-vazio { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.wa-chat-topo { padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 20px 32px; display: flex; flex-direction: column; gap: 6px; }
.wa-msgs:focus-visible { outline: 3px solid var(--action); outline-offset: -3px; }
.wa-bolha { max-width: 68%; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; box-shadow: var(--sh-1); overflow-wrap: anywhere; }
.wa-bolha.enviada { background: var(--info-bg); align-self: flex-end; border-top-right-radius: 2px; }
.wa-bolha.recebida { background: var(--surface); align-self: flex-start; border-top-left-radius: 2px; border: 1px solid var(--line); }
.wa-input-area { padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.wa-rapidas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.wa-rapidas .chip { flex: none; }
.wa-form { display: flex; gap: 10px; align-items: flex-end; margin: 0; }
.wa-form textarea { flex: 1; resize: none; border-radius: var(--r-md); padding: 10px 14px; border: 1px solid var(--line-strong); font-size: 14px; font-family: inherit; max-height: 140px; margin: 0; }
.wa-form textarea:focus-visible { outline: 3px solid var(--action); outline-offset: 0; border-color: var(--action); }
.wa-btn-enviar { width: 42px; height: 42px; border-radius: 50%; background: var(--action-hover); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.wa-btn-enviar:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }
.wa-voltar-lista { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; flex-shrink: 0; border-radius: var(--r-sm); }
.wa-voltar-lista .ico { transform: rotate(90deg); }
.wa-novas { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 20; background: var(--brand-900); color: #fff; border: 0; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; box-shadow: var(--sh-2); cursor: pointer; }

/* dados do cliente ao lado da conversa: coluna fixa quando a tela comporta, senão abre por cima ao tocar em "Cliente" */
.wa-cliente { display: none; width: 300px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--surface); overflow-y: auto; padding: 16px; }
.wa-cliente.aberto { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 100%); z-index: 5; box-shadow: var(--sh-2); }
.wa-cliente-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wa-cliente-dados { margin: 0; }
.wa-cliente-dados div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wa-cliente-dados dt { color: var(--muted); }
.wa-cliente-dados dd { margin: 0; font-weight: 600; text-align: right; }
.wa-cliente-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 18px 0 8px; }
.wa-cliente-lista { list-style: none; margin: 0; padding: 0; }
.wa-cliente-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
@container (min-width: 1040px) {
  .wa-cliente { display: block; }
  .wa-cliente-abrir, .wa-cliente-fechar { display: none; }
}

@media (max-width: 768px) {
  .wa-shell { height: calc(100dvh - 190px); border-radius: 0; margin: 0 -16px; border-left: none; border-right: none; }
  .wa-lista { width: 100%; display: flex; border-right: 0; }
  .wa-chat { display: none; }
  .wa-shell.com-conversa .wa-lista { display: none; }
  .wa-shell.com-conversa .wa-chat { display: flex; }
  .wa-msgs { padding: 14px; }
  .wa-bolha { max-width: 86%; }
  .wa-voltar-lista { display: flex; align-items: center; justify-content: center; }
  .wa-cliente.aberto { width: 100%; }
}

/* Tarefas (quadro) */
  #quadro {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .coluna {
    flex: 0 0 260px; scroll-snap-align: start; background: #F7F7F8; border-radius: 10px;
    display: flex; flex-direction: column; max-height: calc(100vh - 220px);
  }
  .coluna-cabecalho {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 6px;
    gap: 4px;
  }
  .coluna-titulo {
    font-weight: 700; font-size: 14px; cursor: text; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .coluna-acoes { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .coluna-acoes button {
    background: none; border: none; cursor: pointer; color: var(--muted); padding: 3px;
    font-size: 13px; line-height: 1; border-radius: 4px;
  }
  .coluna-acoes button:hover { background: rgba(0,0,0,0.06); color: var(--pink); }
  .coluna-corpo { flex: 1; overflow-y: auto; padding: 4px 10px 10px; min-height: 40px; }
  .coluna-corpo.arraste-sobre { background: #FCE4EE; border-radius: 8px; }
  .cartao {
    background: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08); cursor: grab; font-size: 13px;
  }
  .cartao.arrastando { opacity: 0.4; }
  .cartao-titulo { font-weight: 600; margin-bottom: 4px; word-break: break-word; }
  .cartao-cliente { font-size: 12px; margin-bottom: 4px; }
  .cartao-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
  .cartao-data {
    font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; text-decoration: none;
  }
  .cartao-data:hover { color: var(--pink); }
  .cartao-acoes { display: flex; gap: 4px; }
  .cartao-acoes button {
    background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12px; padding: 2px;
  }
  .cartao-acoes button:hover { color: var(--pink); }
  .btn-add-cartao {
    width: 100%; text-align: left; background: none; border: none; color: var(--muted);
    padding: 6px 4px; font-size: 13px; cursor: pointer; border-radius: 6px;
  }
  .btn-add-cartao:hover { background: rgba(0,0,0,0.06); color: var(--pink); }
  .form-cartao { background: #fff; border-radius: 8px; padding: 8px; margin-bottom: 8px; }
  .form-cartao input, .form-cartao select, .form-cartao textarea {
    width: 100%; box-sizing: border-box; font-size: 12px; padding: 5px 7px; margin-bottom: 5px;
    border: 1px solid #ddd; border-radius: 5px; font-family: inherit; resize: vertical;
  }
  .form-cartao .form-cartao-botoes { display: flex; gap: 6px; }
  .form-cartao .form-cartao-botoes button { font-size: 12px; padding: 4px 10px; }
  .coluna-nova {
    flex: 0 0 220px; scroll-snap-align: start; display: flex; align-items: flex-start; padding-top: 10px;
  }
  @media (max-width: 640px) {
    .coluna { flex-basis: 82vw; max-height: calc(100vh - 260px); }
  }
  #modal-cartao {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000;
    align-items: center; justify-content: center; padding: 20px;
  }
  #modal-cartao-conteudo {
    background: #fff; border-radius: 12px; padding: 20px; width: 100%; max-width: 420px;
    max-height: 90vh; overflow-y: auto;
  }

/* Perfil do cliente */
  .order-row-destacado { background: var(--pink-soft, #FCE4EE); }

/* Dashboard */
  .valor-financeiro { transition: filter 0.15s ease; }
  body.ocultar-financeiro .valor-financeiro { filter: blur(7px); user-select: none; }

  .dash-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
  .dash-kpis { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 12px; }
  .kpi-pilha { display: flex; flex-direction: column; gap: 14px; }
  .kpi-pilha .kpi { flex: 1; }
  .kpi .val small { font-size: 13px; font-weight: 600; margin-left: 6px; }
  .kpi { padding: 16px 20px; }
  .kpi .lbl { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .kpi .val { font-size: 28px; font-weight: 650; margin: 6px 0 4px; }
  .kpi .sub { font-size: 12.5px; color: var(--muted); }
  .kpi-hero { background: var(--brand-800); border-color: var(--brand-800); }
  .kpi-hero .lbl, .kpi-hero .sub { color: var(--on-dark); }
  .kpi-hero .val { font-size: 34px; color: var(--highlight); }
  a.kpi-hero:hover { border-color: var(--brand-600); }
  .kpi .delta { font-weight: 700; margin-right: 4px; }
  .kpi .delta.up { color: #7BE0AE; }
  .kpi .delta.dn { color: #FF8FA0; }
  .kpi-linha { display: block; width: 100%; height: 44px; margin-top: 10px; }
  .dash-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; font-size: 13.5px; color: var(--muted); }
  .dash-resumo-titulo { font-weight: 650; color: var(--text); margin-right: 4px; }
  .dash-resumo a { color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
  .dash-resumo a:hover { border-color: var(--line-strong); }
  .dash-resumo a strong { font-weight: 700; }
  .sec-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 32px 0 4px; }
  .dash-faixa { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
  .dash-faixa a { color: inherit; text-decoration: none; }
  .dash-faixa a:hover { color: var(--text); }
  .dash-faixa strong { color: var(--text); font-weight: 650; }
  @media (max-width: 900px) {
    .dash-kpis { grid-template-columns: 1fr; }
    .kpi-hero { grid-column: 1 / -1; }
    .kpi .val { font-size: 22px; }
    .kpi-hero .val { font-size: 28px; }
  }

  /* Faixa lateral por categoria: sinal discreto de "pede ação" x "acompanhamento" */
  .widget-acao { border-left: 3px solid var(--brand-600); padding-left: 16px; margin-left: -16px; }
  .widget-acompanhamento { border-left: 3px solid var(--line); padding-left: 16px; margin-left: -16px; }

  .widget-ocultar-btn {
    background: none; border: none; padding: 2px; cursor: pointer; color: var(--muted);
    display: inline-flex; align-items: center; vertical-align: middle; margin-left: 8px;
  }
  .widget-ocultar-btn:hover { color: var(--action); }
  #dash-widgets-ocultos-aviso {
    display: none; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--r-md);
    padding: 10px 14px; margin-top: 16px; font-size: 13px; color: var(--muted);
  }

/* Catálogo /estilo */
  .est-sec { margin: 28px 0 8px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .est-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .est-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .est-cor { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: 12px; }
  .est-cor i { display: block; height: 44px; }
  .est-cor span { display: block; padding: 6px 8px; color: var(--muted); }

/* PDV de eventos */
  /* Foto do rótulo no PDV: miniatura quadrada à esquerda, nome e preço ao lado.
     Celular (uso principal) fica em 1 coluna, linha larga e fácil de tocar. */
  .pdv-foto { flex: none; width: 56px; height: 56px; border-radius: 8px; background: #F4F4F6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .pdv-foto img { width: 100%; height: 100%; object-fit: contain; }
  .pdv-foto svg { width: 22px; height: 22px; color: #CFCFD6; }
  #pdv-modal-foto { width: 64px; height: 64px; object-fit: contain; background: #F4F4F6; border-radius: 8px; flex: none; }

/* ===== acessibilidade: foco visível por teclado em tudo que é clicável ===== */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible,
.chip:focus-visible, .opcao-menu:focus-visible, .comanda-sugestao:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
label.chip:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }
.busca-box input:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pular-conteudo { position: absolute; left: 8px; top: -48px; z-index: 2000; background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: var(--r-sm); box-shadow: var(--sh-2); font-weight: 600; text-decoration: none; }
.pular-conteudo:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
.vinho-acao { display: flex; align-items: stretch; gap: 4px; }
.vinho-add:active { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.vinho-add:active small { color: #fff; }
.vinho-menos[hidden], .vinho-qtd[hidden] { display: none; }
.vinho-qtd.pulso { animation: pulso-qtd .35s ease; }
@keyframes pulso-qtd { 0% { transform: scale(1.5); color: var(--action); } 100% { transform: scale(1); } }
.barra-fixa-celular { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(42,11,45,.08); }
@media (min-width: 769px) { .barra-fixa-celular { position: static; box-shadow: none; border: 0; padding: 0; background: transparent; } }

/* Barra de proporção (ex.: distribuição das notas): <progress class="barra-nota" max=".." value=".."> */
progress.barra-nota { flex: 1; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); accent-color: var(--brand-900); appearance: none; -webkit-appearance: none; }
progress.barra-nota::-webkit-progress-bar { background: var(--surface-2); }
progress.barra-nota::-webkit-progress-value { background: var(--brand-900); border-radius: 999px; }
progress.barra-nota::-moz-progress-bar { background: var(--brand-900); border-radius: 999px; }

/* Campanhas: a linha da fila mostra só o que vale para o estado dela (data-status), sem recarregar a tela */
.camp-linha [data-so] { display: none; }
.camp-linha[data-status="pendente"] [data-so~="pendente"], .camp-linha[data-status="enviada"] [data-so~="enviada"],
.camp-linha[data-status="respondeu"] [data-so~="respondeu"], .camp-linha[data-status="pulada"] [data-so~="pulada"] { display: inline-flex; }
.camp-linha[data-status="pulada"] td { opacity: .55; }
.camp-msg { white-space: pre-line; }
.camp-balao { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }

/* seletor em pílulas do formulário de produtos do evento (Editar produtos/estoque) */
.chip-destino { flex: none; margin: 0; font-weight: 600; }
.chip-destino input { position: absolute; opacity: 0; pointer-events: none; }
.chip-destino span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; white-space: nowrap; }
.chip-destino input:checked + span { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.chip-destino input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.chip-destino span { gap: 6px; }
/* ===== Comanda do evento no celular (iPhone 402x874): três abas (Lançar, Mesa, Pagar), barra de baixo fixa e toque de 48px ===== */
#drawer-comanda { width: 100vw; height: 100dvh; max-height: 100dvh; }
@media (min-width: 769px) { #drawer-comanda { width: min(640px, 96vw); } }
#drawer-comanda .drawer-corpo { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.comanda-app { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
/* folha para nomear uma pessoa e vincular a cliente: cobre a comanda inteira, com rolagem própria */
.comanda-folha { position: absolute; inset: 0; z-index: 20; overflow-y: auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--surface); -webkit-overflow-scrolling: touch; }
.comanda-folha[hidden] { display: none; }
.comanda-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.comanda-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 16px 6px; }
.comanda-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 16px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.comanda-aba { min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.comanda-aba[aria-selected="true"] { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.comanda-conteudo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.comanda-conteudo [hidden] { display: none; }
.comanda-rodape { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.comanda-app[data-aba="pagar"] .comanda-rodape [data-cmd="aba"] { display: none; } /* na aba Pagar o botão rosa é o de receber: um primário só por tela */
.comanda-teclado .comanda-rodape { display: none; } /* teclado aberto: a barra de baixo sai da frente do campo */
.comanda-app .icon-btn { min-width: 48px; min-height: 48px; }
.comanda-app .btn, .comanda-app .btn-sm { min-height: 48px; }
.comanda-app input[type="text"], .comanda-app input[type="tel"], .comanda-app select { min-height: 48px; }
.comanda-app .badge { font-size: 12px; }
.comanda-destino-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; }
.comanda-destino-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.comanda-destino-aviso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--warn); border-radius: var(--r-md); background: var(--warn-bg); }
.comanda-destino-aviso[hidden], .comanda-destino-grade[hidden] { display: none; }
.comanda-destino-btn[data-fixo="1"] { cursor: default; }
.comanda-destino-btn[data-fixo="1"] .ico { display: none; }
.comanda-destino-grade { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); max-height: 50vh; overflow-y: auto; }
.comanda-opcao { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-align: left; font-size: 15px; cursor: pointer; touch-action: manipulation; min-width: 0; }
.comanda-opcao small { color: var(--muted); font-size: 13px; }
.comanda-opcao[hidden] { display: none; }
.comanda-opcao:active, .comanda-opcao[aria-pressed="true"] { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.comanda-opcao:active small, .comanda-opcao[aria-pressed="true"] small { color: #fff; }
.vinho-acao { display: flex; align-items: stretch; gap: 4px; }
.vinho-add { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 112px; min-height: 56px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.vinho-add small { color: var(--muted); font-weight: 400; font-size: 14px; }
.vinho-menos { min-width: 48px; min-height: 56px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 22px; cursor: pointer; touch-action: manipulation; }
.vinho-qtd { align-self: center; min-width: 28px; text-align: center; font-weight: 700; font-size: 18px; }
.comanda-contador { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comanda-passo-grande { display: inline-flex; align-items: center; gap: 10px; }
.comanda-passo-btn { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 26px; cursor: pointer; touch-action: manipulation; }
.comanda-passo-num { min-width: 40px; text-align: center; font-size: 28px; }
.comanda-pessoa { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; }
.comanda-pessoa strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.comanda-pessoa small { color: var(--muted); font-size: 13px; }
.comanda-pessoa-paga { background: var(--surface-2); border-style: dashed; cursor: default; }
.comanda-falta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.comanda-linha-pessoa { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 60px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; }
.comanda-linha-paga { background: var(--surface-2); border-style: dashed; cursor: default; }
.comanda-voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 4px; border: 0; background: transparent; color: var(--brand-600); font-size: 15px; font-weight: 600; cursor: pointer; }
.comanda-linha-toggle { display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 400; cursor: pointer; }
.comanda-forma { min-height: 52px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.comanda-forma[aria-pressed="true"] { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.ico-esq { transform: rotate(90deg); }
.ico-dir { transform: rotate(-90deg); }
/* lista de comandas do evento: grade de mesas sempre visível (livre apagada, ocupada com total e quanto falta) */
.comanda-topo-lista { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mesas-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
@media (min-width: 640px) { .mesas-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mesas-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mesas-grade [hidden] { display: none; }
.mesa-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 104px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; }
.mesa-card strong { max-width: 100%; font-size: 17px; }
.mesa-info, .mesa-falta { color: var(--muted); font-size: 14px; }
.mesa-valor { font-size: 18px; font-weight: 600; }
.mesa-falta-parcial { color: var(--warn); font-weight: 600; }
.mesa-card:active { background: var(--surface-2); }

/* ===== Venda rápida do evento: modo Lançar na comanda | Vender agora (reaproveita .comanda-destino-btn, .comanda-opcao e .vinho-*) ===== */
.chips-rolagem { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 2px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips-rolagem::-webkit-scrollbar { display: none; }
.chips-rolagem > * { flex: none; }
.chips-rolagem .chip { min-height: 44px; display: inline-flex; align-items: center; }
.pdv-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.pdv-modo-btn { min-height: 48px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.pdv-modo-btn[aria-pressed="true"] { background: var(--brand-900); color: #fff; }
.pdv-lancar-topo { position: sticky; top: 0; z-index: 30; margin: 0 -2px 8px; padding: 2px; background: var(--bg); }
@media (max-width: 768px) { .pdv-lancar-topo { top: 60px; } }
.pdv-lancar-grade { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .pdv-lancar-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pdv-lancar-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pdv-lancar-grade [hidden] { display: none; }
.pdv-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pdv-card-topo { display: flex; align-items: center; gap: 12px; }
.pdv-folha { position: fixed; inset: 0; z-index: 1120; }
.pdv-folha[hidden] { display: none; }
.pdv-folha-fundo { position: absolute; inset: 0; background: var(--brand-900); opacity: .45; }
.pdv-folha-painel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85dvh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); }
@media (min-width: 769px) { .pdv-folha-painel { left: 50%; right: auto; width: min(560px, 96vw); transform: translateX(-50%); bottom: 24px; border-radius: var(--r-lg); } }
.pdv-card .icon-btn, .pdv-folha .icon-btn { min-width: 48px; min-height: 48px; }
.pdv-folha input[type="text"] { min-height: 48px; }
#pdv-vender[hidden], #pdv-lancar[hidden] { display: none; }

/* Barra inferior do celular (até 768px, o mesmo ponto da barra do topo): Início, Pedidos, Clientes, Conversas (com contador) e Menu.
   Fica abaixo dos painéis laterais e da gaveta (que a cobrem) e respeita a área segura do iPhone. */
.barra-inferior { display: none; background: var(--surface); box-shadow: 0 -1px 0 var(--line); padding-bottom: env(safe-area-inset-bottom); } /* linha em sombra, não em borda: a altura fica exatamente --barra-inferior-h */
.barra-inferior-item { position: relative; flex: 1 1 0; min-width: 0; min-height: var(--barra-inferior-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; line-height: 1.1; text-decoration: none; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.barra-inferior-item .ico { width: 22px; height: 22px; }
.barra-inferior-item > span:not(.barra-inferior-contagem) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-inferior-item:active { background: var(--surface-2); }
.barra-inferior-item.ativo { color: var(--text); font-weight: 600; }
.barra-inferior-item.ativo::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-800); }
.barra-inferior-item:focus-visible { outline: 3px solid var(--action); outline-offset: -3px; border-radius: var(--r-sm); }
.barra-inferior-contagem { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--action); color: var(--surface); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 768px) {
  .barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090; display: flex; }
  /* o que já era fixo embaixo sobe para ficar acima da barra */
  .barra-fixa-celular { bottom: calc(var(--barra-inferior-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  .toast-area { bottom: calc(var(--barra-inferior-h) + env(safe-area-inset-bottom) + 12px); }
  .wa-novas { bottom: calc(var(--barra-inferior-h) + env(safe-area-inset-bottom) + 90px); }
  .cfg-barra { bottom: calc(var(--barra-inferior-h) + env(safe-area-inset-bottom) + 12px); }
}
.est-barra-inferior .barra-inferior { display: flex; max-width: 375px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } /* demonstração no /estilo: visível no desktop e sem ficar fixa */
/* barra de meta (Completar cadastro): cor do tema em vez do azul do navegador */
progress.meta-barra { accent-color: var(--ok); height: 8px; }

/* Celular: o iPhone dá zoom na tela inteira ao tocar num campo com menos de 16px. Campos de texto ficam em 16px (checkbox e radio não contam). */
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,
  textarea { font-size: 16px; }
}

/* Comanda: pagamento dividido em mais de uma forma (a primeira fica com o resto, nas outras digita o valor) */
.pag-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pag-linha input { width: 130px; margin: 0; text-align: right; }
.pag-resumo { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pag-resumo.erro { color: var(--bad); }

/* ===== Tabela em cartões (.tabela-cartoes): até 639px cada linha vira um cartão (nome inteiro em cima, "rótulo valor" embaixo; rótulos vêm do data-rotulo de cada td); a partir de 640px é a tabela normal dentro de .lista-scroll ===== */
@media (max-width: 639px) {
  .lista-scroll:has(.tabela-cartoes) { overflow-x: hidden; }
  .lista-scroll:has(.tabela-cartoes) .lista-scroll-cabecalho { display: none !important; }
  .lista-scroll table.tabela-cartoes, .lista-scroll table.tabela-cartoes tbody { display: block; width: 100%; table-layout: auto; }
  .lista-scroll table.tabela-cartoes thead { display: none; }
  .lista-scroll table.tabela-cartoes tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 12px; border-bottom: 1px solid var(--line); }
  .lista-scroll table.tabela-cartoes tbody td { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 0; border: 0; white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px; text-align: left; }
  .lista-scroll table.tabela-cartoes tbody td:first-child { flex: 1 0 100%; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  .lista-scroll table.tabela-cartoes tbody td[data-rotulo]:not([data-rotulo=""]):not(:first-child)::before { content: attr(data-rotulo) " "; color: var(--muted); font-weight: 400; }
  .lista-scroll table.tabela-cartoes tbody td .badge { white-space: nowrap; }
  .lista-scroll table.tabela-cartoes tbody td[data-rotulo=""]:last-child:not(:first-child) { margin-left: auto; }
  .lista-scroll table.tabela-cartoes tbody td[colspan] { flex: 1 0 100%; }
}

/* ===== Ordenar ao clicar no nome da coluna (ui.js): seta indica a ordem atual ===== */
.lista-scroll th.ordenavel, .lista-scroll-cabecalho span.ordenavel { cursor: pointer; user-select: none; }
.lista-scroll th.ordenavel:hover, .lista-scroll-cabecalho span.ordenavel:hover { color: var(--text); }
th[aria-sort="ascending"]::after, .lista-scroll-cabecalho span[aria-sort="ascending"]::after { content: " \2191"; }
th[aria-sort="descending"]::after, .lista-scroll-cabecalho span[aria-sort="descending"]::after { content: " \2193"; }
/* campo de data nunca passa da caixa onde está (o padrão do navegador tem largura mínima própria) */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { min-width: 0; max-width: 100%; }