:root {
  --fundo: #f6f4f1;
  --superficie: #ffffff;
  --lateral: #2b2330;
  --lateral-texto: #e9e3ec;
  --lateral-ativo: #4a3c52;
  --texto: #221c26;
  --suave: #6f6875;
  --borda: #e3dee6;
  --primaria: #8a4f7d;
  --primaria-escura: #6f3d64;
  --ok: #1f8a4c;
  --ok-fundo: #e5f5ec;
  --erro: #c0392b;
  --erro-fundo: #fdecea;
  --alerta: #c77c02;
  --raio: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 0.9375rem/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--texto);
}
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
code { background: var(--sutil); padding: 1px 5px; border-radius: 4px; }
.suave { color: var(--suave); }
.aviso-erro { color: var(--erro); background: var(--erro-fundo); padding: .6rem .8rem; border-radius: 8px; }

/* ---------- Layout ---------- */
.centro { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.lateral {
  background: var(--lateral); color: var(--lateral-texto);
  display: flex; flex-direction: column; padding: 1.25rem .75rem;
  position: sticky; top: 0; height: 100vh;
}
.marca { font-size: 1.3rem; font-weight: 700; padding: 0 .75rem 1.25rem; letter-spacing: .02em; }
#menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#menu a {
  color: inherit; text-decoration: none; padding: .55rem .75rem; border-radius: 8px;
  display: flex; align-items: center; gap: .6rem;
}
#menu a:hover { background: rgba(255,255,255,.07); }
#menu a.ativo { background: var(--lateral-ativo); font-weight: 600; }
#menu a.embreve { opacity: .55; }
.menu-icone { width: 1.3em; text-align: center; }
.etiqueta { margin-left: auto; font-size: .7rem; opacity: .8; }
.usuario {
  border-top: 1px solid rgba(255,255,255,.12); padding: .9rem .75rem 0;
  display: flex; justify-content: space-between; align-items: center;
}
.usuario .btn-link { color: var(--lateral-texto); }
.conteudo { padding: 1.75rem 2.25rem; max-width: 1680px; width: 100%; }

/* ---------- Cartões e formulários ---------- */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.25rem 1.5rem; margin-top: 1.25rem;
}
.cartao-estreito { width: 100%; max-width: 380px; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.cartao-topo h2 { margin: 0; }
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
input, select, textarea {
  font: inherit; padding: .55rem .7rem; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: -1px; }
.linha-form { display: flex; gap: .6rem; margin-bottom: 1rem; }
.linha-form input { flex: 1; }

.btn {
  font: inherit; font-weight: 600; border: 1px solid var(--borda); background: var(--superficie);
  padding: .55rem 1.1rem; border-radius: 8px; cursor: pointer; color: var(--texto);
}
.btn:disabled { opacity: .6; cursor: wait; }
.btn-primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--primaria-escura); }
.btn-link { background: none; border: none; padding: .2rem .4rem; color: var(--primaria); }
.btn-link.perigo { color: var(--erro); }

/* ---------- Tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borda); }
.tabela th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }

.tabela.clicavel tbody tr[data-id] { cursor: pointer; }
.tabela.clicavel tbody tr[data-id]:hover { background: var(--sutil); }
.tabela tr.inativo td { color: var(--suave); }
.direita { text-align: right !important; }

.form-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.col-2 { grid-column: 1 / -1; }
.acoes { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; }
.acoes .suave { margin-right: auto; font-size: .85rem; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; white-space: nowrap; }
textarea { resize: vertical; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; align-items: start; }
@media (max-width: 1000px) { .grade-2 { grid-template-columns: 1fr; } }

.selo {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 99px;
  background: var(--cinza-fundo); color: var(--suave); vertical-align: middle;
}
.selo-festa { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.voltar { display: inline-block; margin-bottom: .75rem; color: var(--primaria); text-decoration: none; font-weight: 600; }
.alerta-saude {
  margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--raio);
  background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto);
}

.btn-perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.btn.ativo { background: var(--lateral); border-color: var(--lateral); color: #fff; }
.grupo-botoes { display: inline-flex; }
.grupo-botoes .btn { border-radius: 0; margin-left: -1px; }
.grupo-botoes .btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.grupo-botoes .btn:last-child { border-radius: 0 8px 8px 0; }
.rotulo { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.centro-texto { text-align: center; }
.acoes-quebra { flex-wrap: wrap; margin-top: 1rem; }

/* ---------- Contas ---------- */
.grade-cartoes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.25rem;
}
.cartao-saldo {
  font: inherit; text-align: left; color: var(--texto); cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
button.cartao-saldo:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.cartao-saldo span { font-weight: 600; }
.cartao-saldo strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cartao-saldo small { color: var(--suave); }
.cartao-saldo.inativo { opacity: .55; }
.cartao-saldo-total { background: var(--lateral); color: #fff; border-color: var(--lateral); cursor: default; }
.cartao-saldo-total small { color: var(--lateral-texto); opacity: .8; }
.negativo { color: var(--erro); }
.cartao-saldo-total .negativo { color: #ff9d92; }

/* ---------- Estoque ---------- */
.badge {
  margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 99px;
  background: var(--erro); color: #fff; font-size: .75rem; font-weight: 700;
  display: inline-grid; place-items: center; animation: pulsar 2s ease-in-out 3;
}
@keyframes pulsar { 50% { transform: scale(1.18); } }
.cartao-alerta { border-color: var(--erro-borda); background: var(--erro-fundo); }
.cartao-alerta strong { color: var(--erro); }
.cartao-ok strong { color: var(--ok); }
.painel-repor { border-left: 5px solid var(--erro); }
.painel-ok { border-left: 5px solid var(--ok); }
.lista-repor { display: flex; flex-direction: column; }
.item-repor {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto; gap: 1.25rem; align-items: center;
  padding: .7rem .5rem; border-bottom: 1px solid var(--borda); cursor: pointer; border-radius: 6px;
}
.item-repor:last-child { border-bottom: 0; }
.item-repor:hover { background: var(--sutil); }
.item-repor-nome { display: flex; flex-direction: column; }
.item-repor-nivel { display: flex; flex-direction: column; gap: .3rem; }

.nivel { position: relative; height: 10px; border-radius: 99px; background: var(--trilho); overflow: visible; }
.nivel > div { height: 100%; border-radius: 99px; transition: width .4s ease; }
.nivel-ok > div { background: var(--ok); }
.nivel-atencao > div { background: var(--alerta); }
.nivel-baixo > div { background: var(--erro); }
.nivel-zerado > div { background: var(--erro); }
.nivel-zerado { background: var(--erro-fundo); }
.nivel-min { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto); opacity: .35; }

.situacao { font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.situacao-ok { background: var(--ok-fundo); color: var(--ok); }
.situacao-atencao { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.situacao-baixo, .situacao-zerado { background: var(--erro-fundo); color: var(--erro); }
.positivo { color: var(--ok); }
.busca-curta { flex: 1; max-width: 320px; }

.linha-resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.linha-resumo > div { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.linha-resumo strong { font-size: 1.2rem; }
.detalhe-produto h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; }
fieldset { border: 1px solid var(--borda); border-radius: 8px; padding: .8rem 1rem 1rem; margin: 0; }
fieldset:disabled { opacity: .55; }
legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }

/* ---------- Comandas ---------- */
.titulo-secao { margin: 1.5rem 0 .75rem; }
.grade-comandas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.cartao-comanda {
  display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-left: 5px solid var(--alerta);
  border-radius: var(--raio); padding: 1rem 1.1rem; transition: transform .12s ease, box-shadow .12s ease;
}
.cartao-comanda:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.cartao-comanda-topo { display: flex; justify-content: space-between; gap: .5rem; }
.cartao-comanda-total { font-size: 1.3rem; margin-top: .3rem; }
.tabela tfoot td { border-bottom: 0; border-top: 2px solid var(--borda); }

.status-comanda-aberta { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.status-comanda-fechada { background: var(--ok-fundo); color: var(--ok); }
.status-comanda-cancelada { background: var(--cinza-fundo); color: var(--suave); }
.aviso-sujo { color: var(--alerta); font-weight: 600; }

.layout-comanda { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }
@media (max-width: 1050px) { .layout-comanda { grid-template-columns: 1fr; } }
.layout-comanda .cartao .cartao-topo { align-items: flex-start; }
.layout-comanda .cartao-topo p { margin: .1rem 0 0; font-size: .85rem; }
.tabela-itens select, .tabela-itens input { padding: .35rem .5rem; }
.input-valor { width: 110px; text-align: right; }
.input-qtd { width: 80px; text-align: right; }
.btn-remover {
  border: 0; background: none; color: var(--suave); font-size: 1.3rem; cursor: pointer; line-height: 1;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
}
.btn-remover:hover { background: var(--erro-fundo); color: var(--erro); }
.vazio { margin: .25rem 0; }

.resumo-comanda { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.resumo-comanda h2 { margin: 0; }
.resumo-comanda h3 { margin: .5rem 0 0; font-size: .95rem; }
.linhas-resumo { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; align-items: center; }
.linhas-resumo dt { color: var(--suave); }
.linhas-resumo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.linhas-resumo .total { font-size: 1.35rem; font-weight: 700; color: var(--texto); border-top: 2px solid var(--borda); padding-top: .5rem; }
.comissao-resumo { margin: 0; padding: .5rem .75rem; background: var(--primaria-clara); border-radius: 8px; font-size: .9rem; }
.acoes-resumo { display: flex; flex-direction: column; gap: .5rem; }
.btn-grande { padding: .8rem 1rem; font-size: 1.05rem; }
.lista-lancamentos { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.lista-lancamentos li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--borda); }

.total-fechamento {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--lateral); color: #fff; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.total-fechamento strong { font-size: 1.6rem; }
.linha-pagamento {
  display: grid; grid-template-columns: 1fr 150px 120px 2rem; gap: .4rem .6rem; align-items: center;
  margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px dashed var(--borda);
}
.linha-pagamento input { text-align: right; }
.info-pagamento { grid-column: 1 / -1; font-size: .85rem; color: var(--suave); }
.info-pagamento strong { color: var(--texto); }
.info-pagamento strong.negativo { color: var(--erro); }
.tabela-taxas td, .tabela-taxas th { padding: .35rem .6rem; }
.tabela-taxas input { padding: .3rem .5rem; }
.conferencia { font-weight: 600; margin: .8rem 0 0; }
.conferencia.ok { color: var(--ok); }
.conferencia.erro { color: var(--erro); }
.painel-escolha { left: auto; right: 0; width: 360px; max-width: 80vw; }

/* ---------- Financeiro ---------- */
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cartao-entrada strong { color: var(--ok); }
.cartao-saida strong { color: var(--erro); }
.sit { font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.sit-ok { background: var(--ok-fundo); color: var(--ok); }
.sit-futuro { background: var(--azul-fundo); color: var(--azul-texto); }
.sit-pendente { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.sit-vencido { background: var(--erro-fundo); color: var(--erro); }
.tabela td small { display: block; }
.tabela tr.sem-clique { cursor: default; }
.btn-mini { padding: .3rem .7rem; font-size: .85rem; }

.grafico-colunas { display: flex; gap: .6rem; align-items: flex-end; height: 220px; padding-top: .5rem; }
.grafico-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; height: 100%; }
.grafico-mes span { font-size: .8rem; color: var(--suave); }
.grafico-mes small { font-size: .72rem; font-weight: 600; white-space: nowrap; }
.grafico-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--borda); }
.barra { width: 38%; max-width: 26px; border-radius: 4px 4px 0 0; min-height: 1px; transition: height .4s ease; }
.barra-entrada { background: var(--ok); }
.barra-saida { background: var(--grafico-saida); }
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; font-size: .82rem; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }

.barras-horizontais { display: flex; flex-direction: column; gap: .6rem; }
.barra-h { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: .75rem; align-items: center; font-size: .9rem; }
.barra-h-trilho { height: 10px; background: var(--trilho); border-radius: 99px; overflow: hidden; }
.barra-h-trilho > div { height: 100%; background: var(--grafico-saida); border-radius: 99px; }
.barra-h-valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Contas a pagar / parcelas ---------- */
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.opcoes-forma {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: .7rem .9rem;
  background: var(--sutil); border: 1px solid var(--borda); border-radius: 8px;
}
.editor-parcelas { display: flex; flex-direction: column; gap: .75rem; }
.tabela-parcelas td, .tabela-parcelas th { padding: .35rem .6rem; }
.tabela-parcelas input { padding: .3rem .5rem; }
.titulo-mes {
  display: flex; justify-content: space-between; margin: 1.25rem 0 .25rem; padding-bottom: .3rem;
  font-size: .95rem; text-transform: capitalize; border-bottom: 2px solid var(--borda);
}
.titulo-mes:first-of-type { margin-top: .5rem; }
button.cartao-saldo-total { cursor: pointer; }

/* ---------- Comissão / impressão ---------- */
.espaco { flex: 1; }
.titulo-impressao { font-size: 1.4rem; margin: .5rem 0 0; }
@media print {
  .lateral, .nao-imprimir, .toasts, .btn { display: none !important; }
  .layout { display: block; }
  .conteudo { padding: 0; max-width: none; }
  body { background: var(--superficie); }
  .cartao, .cartao-saldo { break-inside: avoid; box-shadow: none; }
  .cartao-saldo-total { background: var(--superficie); color: var(--texto); border-color: var(--borda); }
  .cartao-saldo-total small { color: var(--suave); }
}

/* ---------- Equipe / profissionais ---------- */
.bolinha {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--cor, var(--primaria)); vertical-align: middle; flex: none;
}
.paleta { display: flex; flex-wrap: wrap; gap: .5rem; }
.cor-opcao { cursor: pointer; }
.cor-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.cor-opcao span {
  display: block; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cor);
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borda); transition: transform .1s ease;
}
.cor-opcao input:checked + span { box-shadow: 0 0 0 3px var(--texto); transform: scale(1.1); }
.cor-opcao input:focus-visible + span { outline: 2px solid var(--primaria); outline-offset: 3px; }

.agenda-filtros { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: -.25rem 0 1rem; }
.chip-prof {
  font: inherit; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .3rem .8rem; border-radius: 99px; background: var(--superficie); color: var(--suave);
  border: 1px solid var(--borda); transition: background .12s ease, color .12s ease;
}
.chip-prof .bolinha { opacity: .35; }
.chip-prof.marcado { color: var(--texto); font-weight: 600; border-color: var(--cor); background: color-mix(in srgb, var(--cor) 12%, var(--superficie)); }
.chip-prof.marcado .bolinha { opacity: 1; }
.agenda-cab-prof { cursor: default; border-top: 4px solid var(--cor); display: flex; align-items: center; justify-content: center; gap: .45rem; }
.agenda-cab-prof strong { font-size: 1rem; }

/* ---------- Acessos ---------- */
.usuario span small { display: block; font-size: .75rem; opacity: .7; }
.opcoes-perfil { flex-direction: column; gap: .6rem; }
.opcoes-perfil label.check { align-items: flex-start; white-space: normal; }
.opcoes-perfil label.check input { margin-top: .25rem; }
.opcoes-perfil small { display: block; color: var(--suave); }
.lista-permissoes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; padding: 0 .25rem; }
.lista-permissoes label.check { white-space: normal; }
.lista-permissoes.desativado { opacity: .55; }
details.ajuda { margin-top: 1rem; background: var(--sutil); border: 1px solid var(--borda); border-radius: 8px; padding: .6rem .9rem; }
details.ajuda summary { cursor: pointer; font-weight: 600; color: var(--primaria); }
details.ajuda ol { margin: .6rem 0 .2rem; padding-left: 1.2rem; line-height: 1.7; }

.linha-data { margin-bottom: 1rem; }
.linha-data input { max-width: 200px; }
.linha-data small { font-weight: 400; color: var(--alerta); }

/* ---------- Agenda ---------- */
.agenda-barra { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.agenda-titulo { font-size: 1.25rem; margin: 0; flex: 1; min-width: 200px; text-transform: capitalize; }
.agenda {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
}
.agenda-cab, .agenda-corpo { display: grid; grid-template-columns: 56px repeat(var(--dias), 1fr); }
.agenda-cab { border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); z-index: 3; }
.agenda-cab-dia { padding: .5rem; text-align: center; border-left: 1px solid var(--borda); cursor: pointer; }
.agenda-cab-dia strong { font-size: 1.15rem; }
.agenda-cab-dia.hoje strong {
  background: var(--primaria); color: #fff; border-radius: 99px; padding: 0 .45rem;
}
.agenda-horas { position: relative; }
.agenda-horas span {
  position: absolute; right: 6px; transform: translateY(-50%); font-size: .75rem; color: var(--suave);
}
.agenda-horas span:first-child { transform: none; }
.agenda-dia {
  position: relative; border-left: 1px solid var(--borda); cursor: copy;
  background-image:
    linear-gradient(to bottom, var(--borda) 1px, transparent 1px),
    linear-gradient(to bottom, var(--linha-fraca) 1px, transparent 1px);
  background-size: 100% var(--hora), 100% calc(var(--hora) / 2);
}
.agenda-dia.hoje { background-color: var(--hoje-fundo); }
.agora { position: absolute; left: 0; right: 0; border-top: 2px solid var(--erro); z-index: 2; pointer-events: none; }
.agora::before {
  content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--erro);
}
.ag {
  position: absolute; z-index: 1; overflow: hidden; text-align: left; cursor: pointer;
  font: inherit; font-size: .8rem; line-height: 1.25; padding: 3px 6px;
  border: 0; border-left: 4px solid var(--primaria); border-radius: 6px;
  background: var(--primaria-clara); color: var(--texto);
  display: flex; flex-direction: column;
}
.ag:hover { filter: brightness(.96); z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.ag strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-hora { font-size: .72rem; color: var(--suave); }
.ag-servicos { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-confirmado { background: var(--ok-fundo); border-left-color: var(--ok); }
.ag-atendido { background: var(--cinza-azul-fundo); border-left-color: #5a6b80; }
.ag-falta { background: var(--erro-fundo); border-left-color: var(--erro); }
.ag-cancelado {
  background: repeating-linear-gradient(45deg, var(--sutil), var(--sutil) 6px, var(--cinza-fundo) 6px, var(--cinza-fundo) 12px);
  border-left-color: var(--borda-forte); opacity: .75;
}
.ag-cancelado strong { text-decoration: line-through; }

.status { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.status-agendado { background: var(--primaria-clara); color: var(--primaria-escura); }
.status-confirmado { background: var(--ok-fundo); color: var(--ok); }
.status-atendido { background: var(--cinza-azul-fundo); color: var(--cinza-texto); }
.status-cancelado { background: var(--cinza-fundo); color: var(--suave); }
.status-falta { background: var(--erro-fundo); color: var(--erro); }
.detalhe-ag dl { display: grid; grid-template-columns: 130px 1fr; gap: .4rem 1rem; margin: 1rem 0; }
.detalhe-ag dt { color: var(--suave); }
.detalhe-ag dd { margin: 0; }

.busca-cliente { position: relative; }
.busca-cliente input { width: 100%; }
.resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex; flex-direction: column; max-height: 280px; overflow: auto;
}
.resultados button {
  font: inherit; text-align: left; background: none; border: 0; padding: .55rem .8rem; cursor: pointer;
  border-bottom: 1px solid var(--borda);
}
.resultados button:hover { background: var(--sutil); }
.resultados .novo { color: var(--primaria); font-weight: 600; border-bottom: 0; }
.cliente-escolhido {
  display: flex; justify-content: space-between; align-items: center;
  padding: .55rem .8rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--sutil);
}
.cliente-escolhido .suave { margin-left: .5rem; }
.seletor-servicos { position: relative; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .75rem;
  background: var(--primaria-clara); border-radius: 99px; font-weight: 600; font-size: .9rem;
}
.chip small { font-weight: 400; color: var(--suave); }
.chip button {
  border: 0; background: rgba(0,0,0,.08); border-radius: 50%; width: 1.4rem; height: 1.4rem;
  cursor: pointer; line-height: 1; font-size: 1rem; color: var(--texto);
}
.chip button:hover { background: var(--erro); color: #fff; }
.btn-adicionar {
  font: inherit; font-weight: 600; color: var(--primaria); background: var(--superficie); cursor: pointer;
  border: 1px dashed var(--primaria); border-radius: 99px; padding: .35rem .9rem;
}
.btn-adicionar:hover { background: var(--sutil); }
.painel-servicos {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: .6rem;
}
.painel-servicos input { width: 100%; margin-bottom: .4rem; }
.painel-servicos .opcoes { max-height: 260px; overflow: auto; display: flex; flex-direction: column; }
.painel-servicos .opcoes button {
  font: inherit; display: flex; justify-content: space-between; gap: 1rem; text-align: left;
  background: none; border: 0; border-radius: 6px; padding: .5rem .6rem; cursor: pointer;
}
.painel-servicos .opcoes button:hover { background: var(--primaria-clara); }
.painel-servicos .opcoes p { margin: .4rem .6rem; }

/* ---------- Modal ---------- */
.modal {
  border: 0; border-radius: 14px; padding: 1.25rem 1.5rem 1.5rem; width: min(560px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--texto);
}
.modal-largo { width: min(820px, 94vw); }
.modal::backdrop { background: rgba(30, 20, 35, .45); }
.modal-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.modal-topo h2 { margin: 0; }

/* ---------- Diagnóstico ---------- */
.testes { list-style: none; margin: 0; padding: 0; }
.teste { display: flex; gap: .8rem; align-items: flex-start; padding: .65rem 0; border-bottom: 1px solid var(--borda); }
.teste:last-child { border-bottom: 0; }
.teste small { display: block; color: var(--suave); }
.teste-status {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; background: var(--cinza-fundo); color: var(--suave);
}
.teste-status.ok { background: var(--ok-fundo); color: var(--ok); }
.teste-status.falha { background: var(--erro-fundo); color: var(--erro); }

/* ---------- Avisos (toasts) ---------- */
.toasts {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100;
  display: flex; flex-direction: column; gap: .6rem; max-width: 420px;
}
.toast {
  display: flex; gap: .7rem; align-items: flex-start; background: var(--superficie);
  border: 1px solid var(--borda); border-left: 5px solid var(--suave);
  border-radius: 8px; padding: .75rem .9rem; box-shadow: 0 6px 20px rgba(0,0,0,.12);
  animation: entrar .18s ease-out;
}
.toast-sucesso { border-left-color: var(--ok); }
.toast-erro { border-left-color: var(--erro); background: var(--erro-fundo); }
.toast-icone { font-weight: 700; }
.toast-sucesso .toast-icone { color: var(--ok); }
.toast-erro .toast-icone { color: var(--erro); }
.toast-texto { flex: 1; }
.toast-texto small { display: block; color: var(--suave); }
.toast-fechar { background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: var(--suave); line-height: 1; }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }

/* =====================================================================
   ACABAMENTO VISUAL — tipografia, cores, sombras e animações
   (este bloco vem por último e refina o que está acima)
   ===================================================================== */
:root {
  --fundo: #f6f3f7;
  --superficie: #ffffff;
  --lateral: #2a1d30;
  --lateral-2: #3b2843;
  --lateral-texto: #eee6f1;
  --lateral-ativo: rgba(255, 255, 255, .10);
  --texto: #231a28;
  --suave: #75697c;
  --borda: #ebe4ee;
  --primaria: #8a4f7d;
  --primaria-escura: #6d3a62;
  --primaria-clara: #f4e9f1;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(42, 20, 50, .04), 0 4px 18px rgba(42, 20, 50, .05);
  --sombra-alta: 0 10px 30px rgba(42, 20, 50, .12);
  --anim: .18s cubic-bezier(.2, .7, .3, 1);
}

body { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: -.005em; }
h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-weight: 700; letter-spacing: -.01em; }
::selection { background: var(--primaria-clara); }

/* ---- menu lateral ---- */
.lateral { background: linear-gradient(180deg, var(--lateral) 0%, var(--lateral-2) 100%); box-shadow: 2px 0 20px rgba(42, 20, 50, .12); }
.marca { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: .5rem; }
.marca::before { content: '✦'; color: #e7b4d8; }
#menu a { position: relative; transition: background var(--anim), transform var(--anim), color var(--anim); font-weight: 500; }
#menu a:hover { background: rgba(255, 255, 255, .06); transform: translateX(3px); }
#menu a.ativo { background: var(--lateral-ativo); font-weight: 700; }
#menu a.ativo::before {
  content: ''; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 4px;
  border-radius: 0 4px 4px 0; background: #e7b4d8; animation: crescer .25s ease;
}
@keyframes crescer { from { transform: scaleY(0); } }

/* ---- cartões ---- */
.cartao { border-color: var(--borda); box-shadow: var(--sombra); border-radius: var(--raio); }
.cartao-saldo {
  border-color: var(--borda); box-shadow: var(--sombra); border-radius: var(--raio);
  text-decoration: none; transition: transform var(--anim), box-shadow var(--anim);
}
a.cartao-saldo:hover, button.cartao-saldo:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.cartao-saldo strong { font-weight: 800; letter-spacing: -.02em; }
.cartao-saldo-total { background: linear-gradient(135deg, var(--lateral) 0%, #5a3a63 100%); }
.cartao-comanda { box-shadow: var(--sombra); border-radius: var(--raio); }

/* ---- botões: realce ao passar e "afundar" ao clicar ---- */
.btn {
  border-radius: 10px; position: relative; overflow: hidden;
  transition: transform .08s ease, box-shadow var(--anim), background var(--anim), border-color var(--anim), color var(--anim);
}
.btn:hover:not(:disabled) { border-color: var(--borda-forte); box-shadow: 0 2px 8px rgba(42, 20, 50, .08); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn-primario { background: linear-gradient(135deg, #9a5a8c 0%, var(--primaria-escura) 100%); border-color: transparent; }
.btn-primario:hover:not(:disabled) { background: linear-gradient(135deg, #a4639a 0%, #5f3055 100%); box-shadow: 0 4px 14px rgba(138, 79, 125, .35); }
.btn-link { transition: color var(--anim), background var(--anim); border-radius: 6px; }
.btn-link:hover { background: var(--primaria-clara); }
.btn.ativo { background: var(--lateral); border-color: var(--lateral); }
.btn-adicionar, .chip-prof, .btn-remover, .cor-opcao span { transition: transform .08s ease, background var(--anim), box-shadow var(--anim); }
.btn-adicionar:active, .chip-prof:active, .btn-remover:active { transform: scale(.94); }

/* onda que se espalha a partir do clique (criada em ui.js) */
.onda {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: currentColor; opacity: .18; animation: onda .5s ease-out forwards;
}
@keyframes onda { to { transform: scale(2.6); opacity: 0; } }

/* ---- campos ---- */
input, select, textarea { border-radius: 10px; transition: border-color var(--anim), box-shadow var(--anim); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(138, 79, 125, .16); }

/* ---- tabelas ---- */
.tabela th { font-weight: 700; font-size: .72rem; }
.tabela tbody tr { transition: background var(--anim); }
.tabela.clicavel tbody tr[data-id]:hover, .tabela.clicavel tbody tr[data-user]:hover, .tabela.clicavel tbody tr[data-comanda]:hover { background: var(--sutil); }

/* ---- janelas (modais) abrem com leve zoom ---- */
.modal { border-radius: 18px; box-shadow: 0 30px 80px rgba(42, 20, 50, .3); }
.modal[open] { animation: abrirModal .22s cubic-bezier(.2, .8, .3, 1.1); }
.modal[open]::backdrop { animation: escurecer .22s ease; backdrop-filter: blur(2px); }
@keyframes abrirModal { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes escurecer { from { opacity: 0; } }

/* ---- avisos deslizam da direita ---- */
.toast { border-radius: 12px; animation: toastEntrar .28s cubic-bezier(.2, .8, .3, 1.1); }
@keyframes toastEntrar { from { opacity: 0; transform: translateX(40px); } }

/* ---- troca de tela ---- */
.conteudo.entrando > * { animation: entrarPagina .28s ease both; }
.conteudo.entrando > *:nth-child(2) { animation-delay: .03s; }
.conteudo.entrando > *:nth-child(3) { animation-delay: .06s; }
.conteudo.entrando > *:nth-child(4) { animation-delay: .09s; }
@keyframes entrarPagina { from { opacity: 0; transform: translateY(8px); } }

/* ---- carregando (esqueleto) ---- */
.esqueleto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
.esqueleto div {
  height: 96px; border-radius: var(--raio);
  background: linear-gradient(90deg, var(--trilho) 0%, var(--sutil) 40%, var(--trilho) 80%);
  background-size: 300% 100%; animation: brilho 1.2s linear infinite;
}
.esqueleto div:nth-child(n+5) { grid-column: span 2; height: 180px; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* ---- status e selos mais suaves ---- */
.status, .sit, .situacao, .selo { letter-spacing: .01em; }

/* =====================================================================
   PAINEL
   ===================================================================== */
.painel-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.painel-topo h1 { font-size: 1.9rem; }
.painel-topo p { margin: .2rem 0 0; text-transform: capitalize; }
.acoes-rapidas { display: flex; gap: .5rem; flex-wrap: wrap; }
.acoes-rapidas .btn { text-decoration: none; }
.kpi { min-height: 118px; justify-content: center; }
.kpi strong { font-size: 1.7rem; }

.painel-grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; }
.painel-grade.sem-agenda { grid-template-columns: 1fr; }
.painel-lateral { display: flex; flex-direction: column; }
@media (max-width: 1050px) { .painel-grade { grid-template-columns: 1fr; } }

.linha-do-tempo { list-style: none; margin: .5rem 0 0; padding: 0; }
.linha-do-tempo li {
  display: grid; grid-template-columns: 58px 18px 1fr auto; gap: .6rem; align-items: start;
  padding: .7rem .5rem; border-radius: 10px; transition: background var(--anim);
}
.linha-do-tempo li:hover { background: var(--sutil); }
.ldt-hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.ldt-hora small { display: block; font-weight: 400; color: var(--suave); font-size: .78rem; }
.ldt-marca { position: relative; align-self: stretch; }
.ldt-marca::before {
  content: ''; position: absolute; left: 50%; top: .35rem; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--cor); box-shadow: 0 0 0 3px var(--superficie), 0 0 0 4px var(--borda);
}
.ldt-marca::after { content: ''; position: absolute; left: 50%; top: 1.3rem; bottom: -1.2rem; width: 2px; margin-left: -1px; background: var(--borda); }
.linha-do-tempo li:last-child .ldt-marca::after { display: none; }
.ldt-corpo { display: flex; flex-direction: column; gap: .1rem; }
.ldt-corpo small { color: var(--suave); }
.ldt-corpo .bolinha { width: .55rem; height: .55rem; background: var(--cor); }
.ldt-status { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.linha-do-tempo li.passou { opacity: .5; }
.linha-do-tempo li.proximo { background: var(--amarelo-fundo); }
.linha-do-tempo li.em-andamento { background: var(--azul-fundo); }
.linha-do-tempo li.em-andamento .ldt-marca::before { animation: pulsarMarca 1.6s ease-in-out infinite; }
.linha-do-tempo li.minha .ldt-corpo strong::after { content: ' · você'; font-weight: 500; color: var(--primaria); font-size: .85rem; }
@keyframes pulsarMarca { 50% { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 8px color-mix(in srgb, var(--cor) 30%, transparent); } }
.vazio-grande { text-align: center; color: var(--suave); padding: 2rem 0; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { border-bottom: 1px solid var(--borda); }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples a {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .55rem .35rem; color: inherit; text-decoration: none; border-radius: 8px; transition: background var(--anim);
}
.lista-simples a:hover { background: var(--sutil); }
.lista-simples small { display: block; color: var(--suave); }
.lista-simples li.suave { padding: .5rem .35rem; }

.grafico-semana { height: 190px; }
.barra-semana { width: 60%; max-width: 44px; background: linear-gradient(180deg, #b77aa9 0%, var(--primaria) 100%); border-radius: 6px 6px 0 0; }
.barra-semana.hoje { background: linear-gradient(180deg, #e7b4d8 0%, #b0689f 100%); }

/* ---- quem prefere menos movimento na tela ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   PACOTES
   ===================================================================== */
.economia { margin: 0; padding: .6rem .8rem; border-radius: 10px; background: var(--ok-fundo); color: var(--ok-texto); }
.economia:empty { display: none; }
.subtitulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin: .75rem 0 .4rem; }
.lista-pacotes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.pacote-vendido {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 12px;
  background: linear-gradient(135deg, var(--sutil) 0%, var(--superficie) 100%); border: 1px dashed var(--borda-forte);
}
.pacote-vendido > div { flex: 1; display: flex; flex-direction: column; }
.pacote-saldo { padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); }
.pacote-saldo.vencido { border-color: var(--erro-borda); background: var(--sutil); }
.pacote-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.pacote-cab small { flex-basis: 100%; }
.pacote-item {
  display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(110px, auto) 110px; gap: .75rem;
  align-items: center; padding: .35rem 0; border-top: 1px solid var(--borda);
}
.pacote-item:first-of-type { border-top: 0; }
.sessoes { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sessoes i {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primaria); background: var(--superficie);
  transition: background var(--anim), transform var(--anim);
}
.sessoes i.usada { background: var(--primaria); }
.sessoes i.agora { background: #e7b4d8; border-color: #b0689f; transform: scale(1.15); }
.selo-pacote { background: var(--primaria-clara); color: var(--primaria-escura); }
.linha-pacote td { background: var(--sutil); }

/* ---- abas Serviços / Pacote no agendamento ---- */
.abas-servico { display: flex; gap: .25rem; border-bottom: 2px solid var(--borda); margin-bottom: .75rem; }
.aba {
  font: inherit; font-weight: 600; color: var(--suave); background: none; border: 0; cursor: pointer;
  padding: .5rem .9rem; border-radius: 8px 8px 0 0; margin-bottom: -2px; border-bottom: 2px solid transparent;
  transition: color var(--anim), background var(--anim), border-color var(--anim);
}
.aba:hover { color: var(--texto); background: var(--sutil); }
.aba.ativa { color: var(--primaria-escura); border-bottom-color: var(--primaria); }
.aba .selo { background: var(--primaria); color: #fff; }
.lista-checks { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
label.item-check {
  align-items: flex-start; white-space: normal; padding: .5rem .7rem; border: 1px solid var(--borda);
  border-radius: 10px; cursor: pointer; transition: background var(--anim), border-color var(--anim);
}
label.item-check:hover { background: var(--sutil); }
label.item-check:has(input:checked) { border-color: var(--primaria); background: var(--primaria-clara); }
label.item-check input { margin-top: .2rem; }
label.item-check small { display: block; }
.resumo-pacote { margin: .5rem 0 0; color: var(--primaria-escura); font-weight: 600; }
.resumo-pacote:empty { display: none; }
[data-painel="pacote"] select { width: 100%; margin-bottom: .5rem; }

/* ---- abas de página (ex.: Estoque: Painel / Histórico) ---- */
.abas-pagina { margin: 1rem 0 0; }
a.aba { text-decoration: none; display: inline-block; }

/* ---- histórico do estoque ---- */
.filtros-historico { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.filtros-historico input { flex: 1; min-width: 200px; max-width: 320px; }
.nowrap { white-space: nowrap; }
.tabela-historico td { vertical-align: top; }
.ev { font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.ev-entrada { background: var(--ok-fundo); color: var(--ok); }
.ev-venda { background: var(--azul-fundo); color: var(--azul-texto); }
.ev-uso { background: var(--primaria-clara); color: var(--primaria-escura); }
.ev-saida { background: var(--erro-fundo); color: var(--erro); }
.ev-ajuste { background: var(--amarelo-fundo); color: var(--amarelo-texto); }
.ev-alteracao { background: var(--cinza-fundo); color: var(--cinza-texto); }

/* =====================================================================
   CONFIGURAÇÕES (lista de opções, estilo aplicativo)
   ===================================================================== */
.config-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 1.5rem; align-items: start; }
.grupo-opcoes { margin-top: 1.25rem; }
.grupo-opcoes h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin: 0 0 .5rem .25rem; }
.lista-opcoes { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.opcao {
  display: flex; align-items: center; gap: .85rem; width: 100%; padding: .85rem 1rem; text-align: left;
  font: inherit; color: var(--texto); text-decoration: none; background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid var(--borda); transition: background var(--anim);
}
.lista-opcoes .opcao:last-child { border-bottom: 0; }
.opcao:hover { background: var(--sutil); }
.opcao:active { background: var(--primaria-clara); }
.opcao-icone {
  width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; font-size: 1.05rem;
  background: var(--primaria-clara); border-radius: 10px;
}
.opcao-texto { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.opcao-texto strong { font-weight: 600; }
.opcao-texto small { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opcao-valor { color: var(--suave); font-size: .9rem; text-align: right; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opcao-seta { color: var(--suave); font-size: 1.4rem; line-height: 1; transition: transform var(--anim); }
.opcao:hover .opcao-seta { transform: translateX(3px); color: var(--primaria); }

.variaveis { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .85rem; color: var(--suave); }
.chip-var {
  font: inherit; font-size: .8rem; padding: .15rem .55rem; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--primaria-escura);
}
.chip-var:hover { background: var(--primaria-clara); }
.balao-whats {
  position: relative; max-width: 420px; padding: .7rem .9rem; border-radius: 12px 12px 12px 2px;
  background: var(--whats-fundo); color: var(--whats-texto); white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,.12); line-height: 1.45;
}
.gerenciador { display: flex; flex-direction: column; gap: .75rem; }
.gerenciador .tabela input, .gerenciador .tabela select { padding: .3rem .5rem; }
.nova-linha { margin: 0; padding-top: .75rem; border-top: 1px dashed var(--borda); flex-wrap: wrap; }
.links-detalhe { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.btn-whats { background: #25d366; border-color: #25d366; color: #fff; text-decoration: none; }
.btn-whats:hover:not(:disabled) { background: #1ebe5b; border-color: #1ebe5b; box-shadow: 0 4px 14px rgba(37, 211, 102, .35); }

/* ---- WhatsApp: janela de envio e editor de modelos ---- */
.chips-modelo { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-modelo {
  font: inherit; font-size: .88rem; padding: .4rem .8rem; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  transition: background var(--anim), border-color var(--anim), transform .08s ease;
}
.chip-modelo:hover { border-color: #25d366; }
.chip-modelo:active { transform: scale(.95); }
.chip-modelo.ativo { background: var(--whats-fundo); border-color: #25d366; font-weight: 700; }
.janela-whats textarea { background: var(--sutil); }
.editor-modelos { display: grid; grid-template-columns: 230px 1fr; gap: 1rem; align-items: start; }
.lista-modelos { display: flex; flex-direction: column; gap: .3rem; }
.item-modelo {
  font: inherit; text-align: left; padding: .55rem .7rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--superficie); transition: background var(--anim), border-color var(--anim);
}
.item-modelo:hover { background: var(--sutil); }
.item-modelo.ativo { border-color: var(--primaria); background: var(--primaria-clara); font-weight: 600; }
.edicao-modelo { display: flex; flex-direction: column; gap: .7rem; }
@media (max-width: 760px) { .editor-modelos { grid-template-columns: 1fr; } }
.lista-com-acao li { display: flex; align-items: center; gap: .25rem; }
.lista-com-acao li a { flex: 1; }
.btn-icone-whats {
  border: 0; background: var(--whats-claro); border-radius: 50%; width: 2rem; height: 2rem; cursor: pointer; flex: none;
  transition: transform .08s ease, background var(--anim);
}
.btn-icone-whats:hover { background: var(--whats-claro-forte); }
.btn-icone-whats:active { transform: scale(.9); }

/* ---- valor combinado no agendamento ---- */
.tabela-precos { margin-top: .6rem; }
.tabela-precos td, .tabela-precos th { padding: .35rem .6rem; }
.tabela-precos input { padding: .3rem .5rem; }
.tabela-precos tr.preco-alterado td { background: var(--amarelo-fundo); }
.tabela-precos tr.preco-alterado input { border-color: var(--alerta); font-weight: 700; }

/* ---- comissão por profissional (Equipe) ---- */
.bloco-comissao { display: flex; flex-direction: column; gap: .7rem; }
.bloco-comissao[hidden] { display: none; }
.linha-regra { display: flex; gap: .6rem; align-items: center; padding-left: 1.6rem; transition: opacity var(--anim); }
.linha-regra.desativado { opacity: .45; }
.bloco-comissao .rotulo small { font-weight: 400; }

/* =====================================================================
   CELULAR E TELAS PEQUENAS
   (no computador nada disto se aplica, exceto esconder a barra do celular)
   ===================================================================== */
.barra-movel, .fundo-menu { display: none; }

@media (max-width: 820px) {
  /* ---- menu: barra no topo + menu lateral por cima ---- */
  .layout { display: block; }
  .barra-movel {
    display: flex; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 30;
    padding: .55rem .75rem; background: linear-gradient(90deg, var(--lateral) 0%, var(--lateral-2) 100%);
    color: #fff; box-shadow: 0 2px 12px rgba(42, 20, 50, .2);
  }
  .btn-menu {
    font-size: 1.4rem; line-height: 1; width: 2.6rem; height: 2.6rem; border-radius: 10px; flex: none;
    background: rgba(255, 255, 255, .1); color: #fff; border: 0; cursor: pointer;
  }
  .btn-menu:active { transform: scale(.94); }
  .barra-titulo { font-weight: 800; font-size: 1.05rem; flex: 1; }
  .barra-salao { font-size: .78rem; opacity: .75; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 85vw; height: 100%; z-index: 50;
    transform: translateX(-105%); transition: transform .25s cubic-bezier(.2, .8, .3, 1); overflow-y: auto;
  }
  .layout.menu-aberto .lateral { transform: none; }
  .layout.menu-aberto .fundo-menu {
    display: block; position: fixed; inset: 0; z-index: 40; background: rgba(30, 20, 35, .45);
    animation: escurecer .2s ease;
  }
  #menu a { padding: .75rem .8rem; font-size: 1rem; }
  #menu a:hover { transform: none; }

  /* ---- conteúdo ---- */
  .conteudo { padding: 1rem .8rem 4rem; }
  h1 { font-size: 1.35rem; }
  .painel-topo h1 { font-size: 1.45rem; }
  .cartao { padding: 1rem; margin-top: 1rem; border-radius: 12px; }
  .cartao-topo { flex-wrap: wrap; gap: .6rem; }
  .acoes { flex-wrap: wrap; }

  /* tudo em uma coluna */
  .form-grade, .grade-2, .grade-3, .layout-comanda, .painel-grade, .editor-modelos,
  .lista-permissoes, .linha-resumo, .config-colunas { grid-template-columns: 1fr; }
  .col-2 { grid-column: 1; }

  /* cartões de números: 2 por linha */
  .grade-cartoes, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .cartao-saldo { padding: .75rem .85rem; }
  .cartao-saldo strong, .kpi strong { font-size: 1.2rem; }
  .cartao-saldo small { font-size: .75rem; }
  .kpi { min-height: 0; }
  .esqueleto { grid-template-columns: repeat(2, 1fr); }
  .esqueleto div:nth-child(n+5) { grid-column: span 2; }

  /* tabelas largas deslizam para o lado */
  .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabela th, .tabela td { padding: .5rem .5rem; }

  /* campos: letra 16px evita o zoom automático do iPhone; alvos maiores para o dedo */
  input, select, textarea { font-size: 16px; }
  .btn { padding: .65rem 1rem; }
  .btn-mini { padding: .45rem .75rem; }
  .linha-form { flex-wrap: wrap; }
  .linha-form input { min-width: 0; }

  /* barras de filtros e períodos */
  .agenda-barra { gap: .5rem; }
  .agenda-titulo { order: -1; flex-basis: 100%; font-size: 1.1rem; }
  .grupo-botoes { flex-wrap: wrap; }
  .espaco { display: none; }

  /* ---- agenda: colunas com largura boa e deslizar para o lado ---- */
  .agenda { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .agenda-cab, .agenda-corpo { grid-template-columns: 44px repeat(var(--dias), minmax(135px, 1fr)); min-width: max-content; }
  .agenda-horas span { font-size: .7rem; right: 4px; }
  .ag { font-size: .78rem; }
  .agenda-filtros { margin-top: 0; }

  /* ---- janelas ocupam quase a tela toda ---- */
  .modal, .modal-largo { width: calc(100vw - 12px); max-width: none; max-height: 92vh; padding: 1rem; border-radius: 16px; }
  .modal-topo h2 { font-size: 1.05rem; }
  .painel-escolha {
    position: fixed; top: auto !important; left: .6rem; right: .6rem; bottom: .6rem; width: auto; max-width: none;
    max-height: 60vh; z-index: 60;
  }
  .painel-escolha .opcoes { max-height: 45vh; }

  /* ---- telas específicas ---- */
  .resumo-comanda { position: static; }
  .linha-pagamento { grid-template-columns: 1fr 1fr; }
  .linha-pagamento input { grid-column: 1 / -1; }
  .pacote-item { grid-template-columns: 1fr auto; }
  .pacote-item .sessoes { grid-column: 1 / -1; order: 3; }
  .item-repor { grid-template-columns: 1fr auto; }
  .item-repor-nivel { grid-column: 1 / -1; order: 3; }
  .barra-h { grid-template-columns: 1fr auto; }
  .barra-h-trilho { grid-column: 1 / -1; order: 3; }
  .linha-do-tempo li { grid-template-columns: 46px 14px 1fr; }
  .ldt-status { grid-column: 3; justify-content: flex-start; }
  .detalhe-ag dl { grid-template-columns: 105px 1fr; }
  .filtros-historico input { max-width: none; }
  .opcao-valor { max-width: 38%; }
  .toasts { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; }
  .total-fechamento strong { font-size: 1.35rem; }
  .painel-topo { align-items: flex-start; }
  .acoes-rapidas .btn { flex: 1; text-align: center; }
}

/* telas bem estreitas (celulares menores) */
@media (max-width: 400px) {
  .grade-cartoes, .grade-4 { gap: .45rem; }
  .cartao-saldo strong, .kpi strong { font-size: 1.05rem; }
  .conteudo { padding-left: .6rem; padding-right: .6rem; }
}

/* Elementos marcados como ocultos ficam ocultos mesmo que alguma classe defina "display" */
[hidden] { display: none !important; }

/* ---- backup ---- */
.aviso-backup {
  display: flex; align-items: center; gap: .8rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px;
  background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto); text-decoration: none;
  transition: transform var(--anim), box-shadow var(--anim);
}
.aviso-backup:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.aviso-backup > span:first-child { font-size: 1.6rem; }
.aviso-backup small { display: block; opacity: .85; }
.backup-progresso { display: flex; flex-direction: column; gap: .75rem; min-width: min(420px, 80vw); }
.backup-progresso .nivel > div { background: var(--primaria); }
.lista-backup { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; font-size: .85rem; }
.lista-backup li { display: flex; justify-content: space-between; padding: .2rem 0; border-bottom: 1px dashed var(--borda); }

/* ---- restaurar backup ---- */
.info-backup { display: flex; flex-direction: column; gap: .35rem; padding: .8rem 1rem; border-radius: 12px; background: var(--azul-fundo); border: 1px solid var(--azul-borda); }
.info-backup small { color: var(--suave); }
.chips-totais { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips-totais span { font-size: .8rem; padding: .15rem .6rem; border-radius: 99px; background: var(--superficie); border: 1px solid var(--azul-borda); }
.aviso-substituir { padding: .8rem 1rem; border-radius: 12px; background: var(--erro-fundo); border: 1px solid var(--erro-borda); color: var(--erro-texto); }
.aviso-substituir p { margin: 0 0 .5rem; }
.aviso-substituir input { width: 100%; max-width: 260px; font-weight: 700; letter-spacing: .08em; }
.restaurar input[type=file] { padding: .5rem; background: var(--sutil); }

/* ---- venda de produto ---- */
.btn-destaque { background: var(--amarelo-fundo); border-color: var(--amarelo-borda); color: var(--amarelo-texto); }
.btn-destaque:hover:not(:disabled) { background: var(--amarelo-fundo-forte); border-color: var(--amarelo-borda); }
.venda-produto .abas-servico { margin-bottom: 0; }
#cliente-venda.desativado { opacity: .4; pointer-events: none; }

/* =====================================================================
   TEMAS — duas aparências (Ameixa e Kamila Xavier), cada uma clara e escura.
   Escolha em Configurações → Aparência (fica salva em cada aparelho).
   <html data-tema="ameixa|kx" data-modo="claro|escuro">
   ===================================================================== */

/* ---- Ameixa · claro (valores originais) ---- */
:root {
  color-scheme: light;
  --sutil: #faf6fb;
  --trilho: #f1ecf3;
  --borda-forte: #d9cddd;
  --cinza-fundo: #eeeeee;
  --cinza-texto: #555555;
  --cinza-azul-fundo: #e8edf3;
  --amarelo-fundo: #fff3d6;
  --amarelo-fundo-forte: #ffefcc;
  --amarelo-texto: #8a5a00;
  --amarelo-borda: #f0d49a;
  --azul-fundo: #e6eefb;
  --azul-texto: #2f5da8;
  --azul-borda: #cfe0f5;
  --erro-texto: #7a1f16;
  --erro-borda: #f3b8b1;
  --ok-texto: #185c35;
  --hoje-fundo: #fdfaf5;
  --linha-fraca: #f3f0f4;
  --grafico-saida: #d9776c;
  --whats-fundo: #dcf8c6;
  --whats-claro: #e9fbe8;
  --whats-claro-forte: #c9f3cd;
  --whats-texto: #1f2c1a;
  --lateral-destaque: #e7b4d8;
  --barra-grafico: linear-gradient(180deg, #b77aa9 0%, var(--primaria) 100%);
}

/* ---- Ameixa · escuro ---- */
[data-modo="escuro"] {
  color-scheme: dark;
  --fundo: #141017;
  --superficie: #1e1822;
  --sutil: #272030;
  --trilho: #30283a;
  --texto: #efe7f2;
  --suave: #a99cb0;
  --borda: #362c3d;
  --borda-forte: #4a3e52;
  --primaria: #c47ab6;
  --primaria-escura: #a35f96;
  --primaria-clara: #3a2838;
  --lateral: #0f0c12;
  --lateral-2: #1d1622;
  --ok: #4cc07a;
  --ok-fundo: rgba(76, 192, 122, .16);
  --ok-texto: #9be0b3;
  --erro: #ff7b6e;
  --erro-fundo: rgba(255, 123, 110, .14);
  --erro-texto: #ffb3aa;
  --erro-borda: #6e2b25;
  --alerta: #f0a830;
  --cinza-fundo: #2e2833;
  --cinza-texto: #bdb3c4;
  --cinza-azul-fundo: #262d36;
  --amarelo-fundo: rgba(240, 168, 48, .14);
  --amarelo-fundo-forte: rgba(240, 168, 48, .24);
  --amarelo-texto: #f2c46b;
  --amarelo-borda: #6b5320;
  --azul-fundo: rgba(110, 160, 240, .14);
  --azul-texto: #9dbcf2;
  --azul-borda: #2d4466;
  --hoje-fundo: #1b1520;
  --linha-fraca: #241d29;
  --grafico-saida: #e0847a;
  --whats-fundo: #005c4b;
  --whats-claro: #123326;
  --whats-claro-forte: #1b4a37;
  --whats-texto: #e9edef;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 18px rgba(0, 0, 0, .25);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ---- Kamila Xavier · claro ---- */
[data-tema="kx"] {
  --fundo: #f4f4f5;
  --superficie: #ffffff;
  --sutil: #fafafa;
  --trilho: #f1f1f2;
  --texto: #202124;
  --suave: #71717a;
  --borda: #e4e4e7;
  --borda-forte: #d4d4d8;
  --primaria: #d92535;
  --primaria-escura: #b51d2b;
  --primaria-clara: #fdecee;
  --lateral: #ffffff;
  --lateral-2: #ffffff;
  --lateral-texto: #202124;
  --lateral-ativo: #fdf1f2;
  --lateral-destaque: #d92535;
  --hoje-fundo: #fffafa;
  --linha-fraca: #f4f4f5;
  --grafico-saida: #a1a1aa;
  --barra-grafico: #202124;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .03);
  --sombra-alta: 0 8px 24px rgba(0, 0, 0, .08);
}

/* ---- Kamila Xavier · escuro ---- */
[data-tema="kx"][data-modo="escuro"] {
  --fundo: #0e0e10;
  --superficie: #18181b;
  --sutil: #1f1f23;
  --trilho: #27272a;
  --texto: #f4f4f5;
  --suave: #a1a1aa;
  --borda: #27272a;
  --borda-forte: #3f3f46;
  --primaria: #ef4450;
  --primaria-escura: #d92535;
  --primaria-clara: rgba(239, 68, 80, .14);
  --lateral: #18181b;
  --lateral-2: #18181b;
  --lateral-texto: #f4f4f5;
  --lateral-ativo: rgba(239, 68, 80, .12);
  --lateral-destaque: #ef4450;
  --hoje-fundo: #1a1618;
  --linha-fraca: #1f1f23;
  --grafico-saida: #71717a;
  --barra-grafico: #d4d4d8;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ---- ajustes que valem para os dois temas ---- */
body { background: var(--fundo); color: var(--texto); transition: background-color .2s ease, color .2s ease; }
.modal { background: var(--superficie); color: var(--texto); }
.barra-semana { background: var(--barra-grafico); }
.barra-semana.hoje { background: var(--primaria); }
#menu a.ativo::before { background: var(--lateral-destaque); }
.marca::before { color: var(--lateral-destaque); }
.marca { display: flex; align-items: center; gap: .6rem; }
.marca-k { display: none; }
.marca-textos { display: flex; flex-direction: column; line-height: 1.15; }
.marca-sub { display: block; font-size: .78rem; font-weight: 600; opacity: .75; margin-top: .15rem; }
[data-modo="escuro"] .esqueleto div {
  background: linear-gradient(90deg, var(--trilho) 0%, var(--sutil) 40%, var(--trilho) 80%);
  background-size: 300% 100%;
}
[data-modo="escuro"] .cartao-saldo-total { background: linear-gradient(135deg, #2a1f30 0%, #3d2b44 100%); }
[data-modo="escuro"] .aviso-erro { color: var(--erro-texto); }
[data-modo="escuro"] ::selection { background: var(--primaria-clara); color: var(--texto); }

/* =====================================================================
   APARÊNCIA "KAMILA XAVIER" — clean, branco, grafite, vermelho pontual
   ===================================================================== */
[data-tema="kx"] body { font-family: "Inter", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: -.01em; }
[data-tema="kx"] h1 { font-weight: 700; letter-spacing: -.025em; }
[data-tema="kx"] h2 { font-weight: 650; }

/* menu lateral branco, com detalhe vermelho no item ativo */
[data-tema="kx"] .lateral { background: var(--superficie); color: var(--lateral-texto); border-right: 1px solid var(--borda); box-shadow: none; }
[data-tema="kx"] .marca { font-size: 1rem; padding-bottom: 1.5rem; }
[data-tema="kx"] .marca::before { display: none; }
[data-tema="kx"] .marca-k {
  display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px;
  border: 1.5px solid var(--primaria); color: var(--primaria); font-weight: 300; font-size: 1.35rem;
  font-family: "Georgia", "Times New Roman", serif; letter-spacing: 0;
}
[data-tema="kx"] .marca-nome { font-weight: 700; font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; }
[data-tema="kx"] .marca-sub { display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--suave); margin-top: .2rem; font-weight: 500; }
[data-tema="kx"] #menu a { color: var(--suave); font-weight: 500; }
[data-tema="kx"] #menu a:hover { background: var(--sutil); color: var(--texto); transform: none; }
[data-tema="kx"] #menu a.ativo { background: var(--lateral-ativo); color: var(--primaria); font-weight: 600; }
[data-tema="kx"] .menu-icone { filter: grayscale(1); opacity: .65; }
[data-tema="kx"] #menu a.ativo .menu-icone { filter: none; opacity: 1; }
[data-tema="kx"] .usuario { border-top-color: var(--borda); color: var(--texto); }
[data-tema="kx"] .usuario .btn-link { color: var(--suave); }

/* botões e cartões sem degradê */
[data-tema="kx"] .btn { border-radius: 8px; }
[data-tema="kx"] .btn-primario { background: var(--primaria); border-color: var(--primaria); }
[data-tema="kx"] .btn-primario:hover:not(:disabled) { background: var(--primaria-escura); box-shadow: 0 4px 12px rgba(217, 37, 53, .22); }
[data-tema="kx"] .btn.ativo { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
[data-tema="kx"] .cartao, [data-tema="kx"] .cartao-saldo, [data-tema="kx"] .lista-opcoes { border-color: var(--borda); }
[data-tema="kx"] .cartao-saldo-total { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
[data-tema="kx"] .cartao-saldo-total small { color: var(--superficie); opacity: .7; }
[data-tema="kx"] .total-fechamento { background: var(--texto); color: var(--superficie); }
[data-tema="kx"] .opcao-icone, [data-tema="kx"] .chip { background: var(--sutil); }
[data-tema="kx"] .comissao-resumo { background: var(--sutil); border: 1px solid var(--borda); }
[data-tema="kx"] .ag { background: var(--sutil); }
[data-tema="kx"] .ag-agendado { background: var(--primaria-clara); }
[data-tema="kx"] .status-agendado { background: var(--primaria-clara); color: var(--primaria); }
[data-tema="kx"] .agenda-cab-dia.hoje strong { background: var(--primaria); }
[data-tema="kx"] .selo-pacote { background: var(--sutil); color: var(--texto); border: 1px solid var(--borda); }
[data-tema="kx"] input:focus, [data-tema="kx"] select:focus, [data-tema="kx"] textarea:focus { box-shadow: 0 0 0 3px rgba(217, 37, 53, .12); }

/* modo escuro da aparência Kamila Xavier: cartão de destaque fica claro sobre fundo escuro */
[data-tema="kx"][data-modo="escuro"] .cartao-saldo-total,
[data-tema="kx"][data-modo="escuro"] .total-fechamento { background: #f4f4f5; color: #18181b; border-color: #f4f4f5; }
[data-tema="kx"][data-modo="escuro"] .cartao-saldo-total small { color: #18181b; }
[data-tema="kx"][data-modo="escuro"] .btn.ativo { background: #f4f4f5; border-color: #f4f4f5; color: #18181b; }

/* ---- barra inferior no celular (só na aparência Kamila Xavier) ---- */
.nav-inferior { display: none; }
@media (max-width: 820px) {
  [data-tema="kx"] .barra-movel { background: var(--superficie); color: var(--texto); box-shadow: none; border-bottom: 1px solid var(--borda); }
  [data-tema="kx"] .btn-menu { display: none; }
  [data-tema="kx"] .barra-salao { color: var(--suave); opacity: 1; }
  [data-tema="kx"] .nav-inferior {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    background: var(--superficie); border-top: 1px solid var(--borda);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
  }
  [data-tema="kx"] .nav-inferior a, [data-tema="kx"] .nav-inferior button {
    display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem 0;
    font: inherit; font-size: .68rem; font-weight: 500; color: var(--suave); text-decoration: none;
    background: none; border: 0; cursor: pointer; position: relative;
  }
  [data-tema="kx"] .nav-inferior svg { width: 22px; height: 22px; }
  [data-tema="kx"] .nav-inferior .ativo { color: var(--primaria); }
  [data-tema="kx"] .nav-inferior .ativo::before {
    content: ''; position: absolute; top: -.36rem; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--primaria);
  }
  [data-tema="kx"] .nav-inferior .nav-novo span.circulo {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-top: -1.1rem; border-radius: 50%;
    background: var(--primaria); color: #fff; box-shadow: 0 6px 16px rgba(217, 37, 53, .35);
  }
  [data-tema="kx"] .nav-inferior .nav-novo:active span.circulo { transform: scale(.94); }
  [data-tema="kx"] .conteudo { padding-bottom: 6rem; }
  [data-tema="kx"] .toasts { bottom: 5rem; }
}

/* impressão sempre clara */
@media print {
  [data-modo="escuro"] { --fundo: #fff; --superficie: #fff; --sutil: #fff; --texto: #222; --suave: #666; --borda: #ddd; color-scheme: light; }
}

/* ---- escolha de aparência (prévias fixas de cada tema) ---- */
.grade-temas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 600px) { .grade-temas { grid-template-columns: 1fr; } }
.cartao-tema {
  display: flex; flex-direction: column; gap: .6rem; padding: .7rem; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--borda); background: var(--superficie); transition: border-color var(--anim), box-shadow var(--anim), transform .08s ease;
}
.cartao-tema:hover { box-shadow: var(--sombra-alta); }
.cartao-tema:active { transform: scale(.98); }
.cartao-tema:has(input:checked) { border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-clara); }
.cartao-tema input { position: absolute; opacity: 0; pointer-events: none; }
.cartao-tema-texto { display: flex; flex-direction: column; }
.cartao-tema-texto small { color: var(--suave); }
.previa-tema { display: flex; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.previa-lateral { width: 28%; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; }
.previa-lateral i { display: block; height: 6px; border-radius: 3px; opacity: .5; }
.previa-lateral i:first-child { opacity: 1; width: 70%; }
.previa-corpo { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.previa-corpo b { display: block; height: 8px; width: 45%; border-radius: 4px; }
.previa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.previa-cards i { display: block; height: 28px; border-radius: 6px; }
.previa-corpo u { display: block; height: 10px; width: 35%; border-radius: 5px; margin-top: auto; align-self: flex-end; text-decoration: none; }
/* Ameixa */
.tema-ameixa .previa-lateral { background: linear-gradient(180deg, #2a1d30, #3b2843); }
.tema-ameixa .previa-lateral i { background: #e7b4d8; }
.tema-ameixa .previa-corpo { background: #f6f3f7; }
.tema-ameixa .previa-corpo b { background: #231a28; }
.tema-ameixa .previa-cards i { background: #fff; box-shadow: 0 1px 3px rgba(42, 20, 50, .12); }
.tema-ameixa .previa-cards i:last-child { background: #5a3a63; }
.tema-ameixa .previa-corpo u { background: #8a4f7d; }
/* Kamila Xavier */
.tema-kx .previa-lateral { background: #fff; border-right: 1px solid #e4e4e7; }
.tema-kx .previa-lateral i { background: #d4d4d8; }
.tema-kx .previa-lateral i:first-child { background: #d92535; }
.tema-kx .previa-corpo { background: #f4f4f5; }
.tema-kx .previa-corpo b { background: #202124; }
.tema-kx .previa-cards i { background: #fff; border: 1px solid #e4e4e7; }
.tema-kx .previa-cards i:last-child { background: #202124; border-color: #202124; }
.tema-kx .previa-corpo u { background: #d92535; }
.grupo-modo .btn { cursor: pointer; }

/* contraste dos selos de status no modo escuro */
[data-modo="escuro"] .status-agendado { color: var(--primaria); }
[data-modo="escuro"] .status-atendido { color: var(--cinza-texto); }
[data-modo="escuro"] .status-comanda-cancelada, [data-modo="escuro"] .status-cancelado { color: var(--suave); }
[data-modo="escuro"] .ag-hora, [data-modo="escuro"] .ag-servicos { color: var(--suave); }

/* =====================================================================
   LISTA DE ESPERA
   ===================================================================== */
:root { --laranja: #d9620b; --laranja-fundo: #fff1e5; --laranja-borda: #f7c9a3; }
[data-modo="escuro"] { --laranja: #ff9a4a; --laranja-fundo: rgba(255, 154, 74, .14); --laranja-borda: #6b3e17; }

.secao-espera { border-top: 3px solid var(--laranja); }
.secao-espera h2 { display: flex; align-items: center; gap: .45rem; }
.contador-espera {
  min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--laranja); color: #fff; font-size: .78rem; font-weight: 700;
}
.lista-espera { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.espera { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .2rem; border-bottom: 1px solid var(--borda); transition: opacity var(--anim); }
.espera:last-child { border-bottom: 0; }
.espera-topo { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.espera-nome { font-weight: 700; }
.selo-espera {
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  background: var(--laranja-fundo); color: var(--laranja); border: 1px solid var(--laranja-borda);
  animation: pulsarEspera 2.4s ease-in-out 2;
}
@keyframes pulsarEspera { 50% { box-shadow: 0 0 0 4px var(--laranja-fundo); } }
.selo-passou { background: var(--erro-fundo); color: var(--erro); }
.espera-quando { color: var(--suave); font-size: .8rem; }
.espera-obs { color: var(--suave); font-size: .75rem; font-style: italic; line-height: 1.35; }
.espera-acoes { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.espera-cancelada { opacity: .5; }
.espera-cancelada .espera-nome, .espera-cancelada .espera-quando, .espera-cancelada .espera-obs { text-decoration: line-through; }
.chip-espera {
  font-size: .82rem; font-weight: 600; padding: .3rem .75rem; border-radius: 99px; text-decoration: none;
  background: var(--laranja-fundo); color: var(--laranja); border: 1px solid var(--laranja-borda);
}
.chip-espera:hover { filter: brightness(.97); }
label.alinhar-base { align-self: end; padding-bottom: .55rem; }

/* ---- tamanho da interface (Configurações → Aparência → Tamanho) ----
   Tudo que usa "rem" acompanha: é como um zoom próprio do sistema. */
html[data-tamanho="compacto"] { font-size: 14px; }
html[data-tamanho="normal"] { font-size: 16px; }
html[data-tamanho="grande"] { font-size: 17.5px; }
/* no celular o tamanho "compacto" fica normal, para não ficar miúdo */
@media (max-width: 820px) { html[data-tamanho="compacto"] { font-size: 15px; } }
/* telas largas: agenda e painel aproveitam o espaço */
@media (min-width: 1500px) {
  .painel-grade { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
  .grade-cartoes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
/* confirmação do próprio sistema */
.texto-confirmacao { white-space: pre-line; margin: 0 0 1.25rem; line-height: 1.55; }
.confirmacao { min-width: min(420px, 80vw); }

/* ---- avisos de horários escondidos por filtro (Agenda) ---- */
.avisos-ocultos { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: -.4rem 0 .8rem; }
.aviso-oculto {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; padding: .3rem .75rem; border-radius: 99px;
  background: var(--azul-fundo); color: var(--azul-texto); border: 1px solid var(--azul-borda);
}
.aviso-oculto .btn-link { padding: 0 .2rem; font-weight: 700; color: inherit; text-decoration: underline; }

/* ---- dica da data ("quinta-feira · daqui a 30 dias") ---- */
.dica-data { display: block; font-weight: 500; font-size: .78rem; color: var(--suave); margin-top: .25rem; text-transform: none; }
.dica-data.longe { color: var(--laranja); font-weight: 700; }
.dica-data.longe::before { content: '⚠️ '; }

/* ---------- Saldo em aberto e anotações da cliente ---------- */
.conferencia.aviso { color: var(--amarelo-texto); }
.bloco-saldo { margin-top: .8rem; padding: .7rem .9rem; border-radius: 10px; background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto); }
.bloco-saldo label { color: inherit; }
.aviso-saldo {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 12px;
  background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto);
}
.aviso-saldo small { display: block; font-weight: 400; opacity: .9; }
.selo-saldo {
  display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 99px;
  background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto); white-space: nowrap;
}
.bloco-notas { margin-bottom: 1rem; }
.bloco-notas .notas-topo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bloco-notas h3 { margin: 0 0 .6rem; font-size: 1rem; }
.nova-nota { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .7rem; }
.nova-nota textarea { flex: 1; min-height: 2.6rem; resize: vertical; }
.lista-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-notas li { padding: .55rem .75rem; border-radius: 10px; background: var(--fundo); border: 1px solid var(--borda); }
.lista-notas li.fixada { border-color: var(--amarelo-borda); background: var(--amarelo-fundo); }
.lista-notas li p { margin: 0 0 .25rem; white-space: pre-wrap; word-break: break-word; }
.nota-rodape { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
.nota-acoes { display: inline-flex; gap: .2rem; }
.nota-agenda { margin: .5rem 0; padding: .5rem .7rem; border-radius: 8px; background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto); font-size: .9rem; white-space: pre-wrap; }
@media (max-width: 600px) {
  .nova-nota { flex-direction: column; align-items: stretch; }
  .aviso-saldo .btn { width: 100%; }
}

/* ---------- Bloqueio de horário na agenda ---------- */
.acoes-agenda { display: flex; gap: .5rem; flex-wrap: wrap; }
.bloqueio {
  position: absolute; left: 0; right: 0; z-index: 0; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; font-size: .78rem; line-height: 1.25; padding: 3px 8px; border: 0;
  border-top: 2px solid var(--borda-forte); border-radius: 0; color: var(--texto);
  background: repeating-linear-gradient(135deg, var(--sutil), var(--sutil) 7px, var(--cinza-fundo) 7px, var(--cinza-fundo) 14px);
  display: flex; flex-direction: column; opacity: .95;
}
.bloqueio:hover { filter: brightness(.97); }
.bloqueio strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
label.check-baixo { align-self: end; padding-bottom: .55rem; }
@media (max-width: 700px) {
  .acoes-agenda { width: 100%; }
  .acoes-agenda .btn { flex: 1; }
}

/* ---------- Lembretes de agendamento ---------- */
.secao-lembretes.destaque { border: 1px solid var(--amarelo-borda); box-shadow: 0 0 0 3px var(--amarelo-fundo); }
.btn-bloco { width: 100%; justify-content: center; display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.btn-bloco small { opacity: .85; font-weight: 400; }
.lembretes-ok { color: var(--ok); font-weight: 600; margin: 0 0 .6rem; }
.lista-lembretes { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.lista-lembretes li {
  display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
  padding: .45rem .55rem; border-radius: 10px; border: 1px solid var(--borda);
}
.lista-lembretes li.enviado { background: var(--sutil); }
.lista-lembretes li.enviado .lem-nome strong { color: var(--suave); }
.lem-hora { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }
.lem-nome { display: flex; flex-direction: column; min-width: 0; }
.lem-nome strong, .lem-nome small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lem-nome small { color: var(--suave); font-size: .78rem; }
.lem-acoes { display: inline-flex; align-items: center; gap: .15rem; flex-wrap: wrap; justify-content: flex-end; }
.lem-acoes .btn-link { font-size: .8rem; padding: .15rem .3rem; }
@media (max-width: 600px) {
  .lista-lembretes li { grid-template-columns: auto 1fr; }
  .lem-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Cancelamento com taxa e cobranças em aberto ---------- */
.chips-motivo { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: -.3rem; }
label.check-destaque { padding: .6rem .8rem; border-radius: 10px; background: var(--sutil); border: 1px solid var(--borda); font-weight: 600; }
.bloco-taxa { padding: .8rem .9rem; border-radius: 12px; background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); display: grid; gap: .5rem; }
.bloco-taxa p { margin: 0; }
.linha-taxa { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.linha-taxa .input-valor { width: 120px; }
.grupo-tipo label.btn { cursor: pointer; }
.aviso-link { text-decoration: none; }
.aviso-link:hover { filter: brightness(.98); }
.selo-contador { background: var(--erro); color: #fff; border-radius: 99px; padding: 0 .45rem; font-size: .75rem; margin-left: .25rem; }
.tabela-cobrancas td { vertical-align: middle; }
.acoes-linha { white-space: nowrap; }
.acoes-linha > * { margin-left: .25rem; vertical-align: middle; }
.secao-cobrancas { border: 1px solid var(--amarelo-borda); }
.lista-cobrancas { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lista-cobrancas li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--borda); }
.lista-cobrancas li.incluida { background: var(--amarelo-fundo); border-color: var(--amarelo-borda); }
.lista-cobrancas label.check { white-space: normal; align-items: flex-start; }
.lista-cobrancas small { display: block; }
@media (max-width: 700px) {
  .tabela-cobrancas thead { display: none; }
  .tabela-cobrancas tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .6rem 0; border-bottom: 1px solid var(--borda); }
  .tabela-cobrancas td { border: 0; padding: 0; }
  .tabela-cobrancas td.acoes-linha { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Crédito da cliente ---------- */
.bloco-credito .cartao-topo { align-items: flex-start; }
.saldo-credito { text-align: right; padding: .5rem .9rem; border-radius: 12px; background: var(--sutil); border: 1px solid var(--borda); min-width: 130px; }
.saldo-credito small { display: block; color: var(--suave); font-size: .75rem; }
.saldo-credito strong { font-size: 1.35rem; }
.saldo-credito.tem { background: var(--ok-fundo); border-color: var(--ok); }
.saldo-credito.tem strong { color: var(--ok); }
.acoes-credito { display: flex; gap: .5rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.aviso-validade { padding: .5rem .7rem; border-radius: 8px; background: var(--amarelo-fundo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto); font-size: .88rem; }
.extrato-credito { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.extrato-credito li { display: grid; grid-template-columns: auto 1fr auto auto; gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--borda); }
.ext-icone { font-size: 1.05rem; }
.ext-texto { display: flex; flex-direction: column; min-width: 0; }
.ext-texto small { font-size: .78rem; }
.selo-credito {
  display: inline-block; padding: .25rem .7rem; border-radius: 99px; font-size: .85rem; font-weight: 600; text-decoration: none;
  background: var(--ok-fundo); color: var(--ok); border: 1px solid var(--ok);
}
.topo-comanda-selos { display: inline-flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.botoes-pagamento { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.btn-credito { background: var(--ok-fundo); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.credito-usado { color: var(--ok); font-weight: 600; font-size: .9rem; }

/* ---------- Cores das etapas do atendimento (agenda) ----------
   agendado: branco · aguardando confirmação: rosa claro · confirmado: azul claro · finalizado: verde claro */
:root {
  --etapa-agendado: #ffffff; --etapa-agendado-borda: #d9d4de; --etapa-agendado-texto: #3b3541;
  --etapa-aguardando: #fde3ee; --etapa-aguardando-borda: #f4b6d0; --etapa-aguardando-texto: #a8326a;
  --etapa-confirmado: #dcebff; --etapa-confirmado-borda: #a9cbf5; --etapa-confirmado-texto: #1f5ea8;
  --etapa-atendido: #dbf4e2; --etapa-atendido-borda: #a6dcb6; --etapa-atendido-texto: #1e7a3c;
  --etapa-falta: #fde2e2; --etapa-falta-borda: #f3b1b1; --etapa-falta-texto: #b42318;
}
[data-modo="escuro"] {
  --etapa-agendado: #2a2730; --etapa-agendado-borda: #4a4552; --etapa-agendado-texto: #e9e6ee;
  --etapa-aguardando: rgba(240, 120, 170, .20); --etapa-aguardando-borda: rgba(240, 120, 170, .45); --etapa-aguardando-texto: #f7a8ca;
  --etapa-confirmado: rgba(90, 160, 255, .20); --etapa-confirmado-borda: rgba(90, 160, 255, .45); --etapa-confirmado-texto: #a3c9ff;
  --etapa-atendido: rgba(80, 200, 120, .18); --etapa-atendido-borda: rgba(80, 200, 120, .42); --etapa-atendido-texto: #93e0aa;
  --etapa-falta: rgba(240, 90, 90, .18); --etapa-falta-borda: rgba(240, 90, 90, .42); --etapa-falta-texto: #ffa3a3;
}
.agenda .ag.ag-agendado { background: var(--etapa-agendado); box-shadow: inset 0 0 0 1px var(--etapa-agendado-borda); }
.agenda .ag.ag-aguardando { background: var(--etapa-aguardando); box-shadow: inset 0 0 0 1px var(--etapa-aguardando-borda); }
.agenda .ag.ag-confirmado { background: var(--etapa-confirmado); box-shadow: inset 0 0 0 1px var(--etapa-confirmado-borda); }
.agenda .ag.ag-atendido { background: var(--etapa-atendido); box-shadow: inset 0 0 0 1px var(--etapa-atendido-borda); }
.agenda .ag.ag-falta { background: var(--etapa-falta); box-shadow: inset 0 0 0 1px var(--etapa-falta-borda); }
.agenda .ag.ag-agendado:hover, .agenda .ag.ag-aguardando:hover, .agenda .ag.ag-confirmado:hover,
.agenda .ag.ag-atendido:hover, .agenda .ag.ag-falta:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

.status.status-agendado { background: var(--etapa-agendado); color: var(--etapa-agendado-texto); box-shadow: inset 0 0 0 1px var(--etapa-agendado-borda); }
.status.status-aguardando { background: var(--etapa-aguardando); color: var(--etapa-aguardando-texto); }
.status.status-confirmado { background: var(--etapa-confirmado); color: var(--etapa-confirmado-texto); }
.status.status-atendido { background: var(--etapa-atendido); color: var(--etapa-atendido-texto); }
.status.status-falta { background: var(--etapa-falta); color: var(--etapa-falta-texto); }

.btn.btn-etapa-aguardando { background: var(--etapa-aguardando); border-color: var(--etapa-aguardando-borda); color: var(--etapa-aguardando-texto); }
.btn.btn-etapa-confirmado { background: var(--etapa-confirmado); border-color: var(--etapa-confirmado-borda); color: var(--etapa-confirmado-texto); }

.legenda-etapas { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: -.25rem 0 .6rem; font-size: .8rem; color: var(--suave); }
.legenda-item { display: inline-flex; align-items: center; gap: .35rem; }
.cor-etapa { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.cor-etapa.etapa-agendado { background: var(--etapa-agendado); box-shadow: inset 0 0 0 1px var(--etapa-agendado-borda); }
.cor-etapa.etapa-aguardando { background: var(--etapa-aguardando); box-shadow: inset 0 0 0 1px var(--etapa-aguardando-borda); }
.cor-etapa.etapa-confirmado { background: var(--etapa-confirmado); box-shadow: inset 0 0 0 1px var(--etapa-confirmado-borda); }
.cor-etapa.etapa-atendido { background: var(--etapa-atendido); box-shadow: inset 0 0 0 1px var(--etapa-atendido-borda); }
.cor-etapa.etapa-falta { background: var(--etapa-falta); box-shadow: inset 0 0 0 1px var(--etapa-falta-borda); }
.cor-etapa.etapa-cancelado { background: repeating-linear-gradient(45deg, var(--sutil), var(--sutil) 3px, var(--cinza-fundo) 3px, var(--cinza-fundo) 6px); box-shadow: inset 0 0 0 1px var(--borda-forte); }

/* ---------- Busca de serviços e tempo real do atendimento ---------- */
.barra-busca { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.barra-busca input[type=search] { flex: 1; min-width: 220px; max-width: 420px; }
.tempo-diferente { color: var(--laranja); font-weight: 600; }
.campo-minutos { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; color: var(--suave); font-size: .85rem; }
.input-tempo, .campo-minutos input { width: 72px; }
.col-tempo { white-space: nowrap; }
.linha-tempo { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .5rem .7rem; border: 1px solid var(--borda); border-radius: 10px; font-weight: 400; }
.linha-tempo > span:first-child { display: flex; flex-direction: column; }

/* ---------- Aguardando pagamento (comanda com valor em aberto) ---------- */
.cartao-comanda.cartao-aguardando { border: 1px dashed var(--laranja-borda); background: var(--laranja-fundo); }
.cartao-comanda.venc-hoje { border: 2px solid var(--laranja); }
.cartao-comanda.venc-atrasado { border: 2px solid var(--erro); background: var(--erro-fundo); }
.cartao-aguardando .cartao-comanda-total { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.status.status-comanda-aguardando { background: var(--laranja-fundo); color: var(--laranja); border: 1px solid var(--laranja-borda); }
.btn.btn-pagar-depois { background: var(--laranja-fundo); border-color: var(--laranja-borda); color: var(--laranja); font-weight: 600; }
.acoes-saldo { display: inline-flex; gap: .5rem; align-items: center; }
.aviso-saldo small .sit { font-size: .78rem; }
.secao-cobrar { border-color: var(--laranja-borda); }

/* ---------- Pagar depois: sem data ou com data ---------- */
.bloco-saldo { display: grid; gap: .45rem; }
.bloco-saldo .rotulo { font-weight: 600; }
.bloco-saldo label.check, .opcoes-forma label.check.linha-com-data { white-space: normal; flex-wrap: wrap; }
.linha-com-data input[type=date] { width: auto; margin-left: .3rem; }
.cartao-comanda.venc-sem-data { border-style: dashed; }

/* ---------- Janela do agendamento (estilo lista, inspirada no Minha Agenda) ---------- */
.modal.modal-detalhe-ag { width: min(520px, calc(100vw - 16px)); }
.det2 { display: grid; gap: .2rem; }
.det-topo { display: flex; justify-content: space-around; gap: .3rem; padding: .2rem 0 .7rem; border-bottom: 1px solid var(--borda); }
.det-acao {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 74px;
  background: none; border: 0; padding: .35rem .5rem; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--primaria);
}
.det-acao span { font-size: 1.25rem; line-height: 1; }
.det-acao:hover { background: var(--primaria-clara); }
.det-acao.det-whats, .det-acao.det-lembrete { color: var(--ok); }
.det-acao.det-excluir { color: var(--erro); }
.det-linhas { list-style: none; margin: 0; padding: 0; }
.det-linhas > li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .6rem; padding: .6rem .3rem; border-bottom: 1px solid var(--linha-fraca, var(--borda)); }
.det-linhas > li.clicavel { cursor: pointer; border-radius: 8px; }
.det-linhas > li.clicavel:hover { background: var(--sutil); }
.det-linhas > li.det-painel { display: block; padding: .5rem .3rem .7rem 2.9rem; background: var(--sutil); border-radius: 0 0 10px 10px; }
.det-icone { font-size: 1.15rem; text-align: center; color: var(--primaria); }
.det-icone .bolinha { width: 14px; height: 14px; display: inline-block; }
.det-texto { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.det-texto > small { color: var(--suave); font-size: .78rem; }
.det-texto strong { font-weight: 600; }
.det-texto a { color: var(--primaria); text-decoration: none; }
.det-seta { font-size: 1.5rem; color: var(--primaria); line-height: 1; padding: 0 .2rem; }
.det-botoes { display: inline-flex; gap: .4rem; }
.det-bolinha {
  position: relative; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--primaria-clara); border: 0; cursor: pointer; text-decoration: none; font-size: 1rem;
}
.det-bolinha:hover { filter: brightness(.95); }
.det-contador {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
  background: var(--ok); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center;
}
.det-nota-fixa { color: var(--amarelo-texto) !important; background: var(--amarelo-fundo); border-radius: 6px; padding: .15rem .4rem; margin-top: .15rem; white-space: pre-wrap; }
.det-servicos { gap: .2rem; }
.det-servico { display: flex; justify-content: space-between; gap: .8rem; }
.det-situacao { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.det-situacao small { color: var(--suave); font-size: .78rem; }
.det-opcoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.btn.btn-perigo-suave { color: var(--erro); border-color: var(--erro-borda, var(--erro)); background: var(--erro-fundo); }
.det-form-obs { display: grid; gap: .4rem; }
.det-form-obs textarea { width: 100%; }
.det-form-obs .acoes { justify-content: flex-end; }
.det-rodape { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding-top: .7rem; }
.det-painel .bloco-notas { margin: 0; }

/* anotações: campo pequeno de uma linha que cresce */
.nova-nota textarea { min-height: 2.2rem; height: 2.2rem; resize: none; overflow: hidden; line-height: 1.35; }
.nova-nota { align-items: center; }
.bloco-notas.sem-cartao .lista-notas li { background: var(--superficie); }
@media (max-width: 600px) {
  .det-acao { min-width: 0; font-size: .68rem; }
  .det-linhas > li.det-painel { padding-left: .5rem; }
  .nova-nota { flex-direction: row; }
}
.modal.modal-detalhe-ag { overflow-x: hidden; }
.det-linhas > li > * { min-width: 0; }
.det-texto strong, .det-texto small { overflow-wrap: anywhere; }