:root {
  /* mesma paleta de marca do balcão (compartilha o tema por estabelecimento) */
  --cor-fundo: #faf7f5;
  --cor-texto: #2a2323;
  --cor-marca: #8a4b5c;
  --cor-marca-claro: #f4ece9;
  --cor-borda: #e6dbd7;
  --cor-sucesso: #2e7d4f;
  --cor-alerta: #b5482e;
  --cor-atencao: #c9944b;
  --cor-neutro: #8a7d7a;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.shell { display: flex; height: 100vh; }

.sidebar {
  flex: 0 0 220px;
  background: white;
  border-right: 1px solid var(--cor-borda);
  padding: 16px;
  overflow-y: auto;
}
.marca-sidebar {
  font-weight: 700; font-size: 16px; color: var(--cor-marca);
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
}
.link-voltar-balcao {
  text-decoration: none; color: var(--cor-marca); font-weight: 400;
  border: 1px solid var(--cor-borda); border-radius: 6px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.piloto { font-weight: 400; font-size: 12px; color: #a99d99; }

.nav-secoes { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  text-align: left; border: none; background: none; padding: 10px 12px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--cor-texto);
}
.nav-item:hover { background: var(--cor-marca-claro); }
.nav-item.ativa { background: var(--cor-marca); color: white; font-weight: 600; }

.area-principal { flex: 1; overflow-y: auto; padding: 24px 32px; }
.barra-topo { margin-bottom: 18px; }
.barra-topo h1 { margin: 0 0 10px; font-size: 22px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--cor-borda); flex-wrap: wrap; }
.aba {
  border: none; background: none; padding: 8px 14px; font-size: 13px; cursor: pointer;
  color: var(--cor-neutro); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aba.ativa { color: var(--cor-marca); border-bottom-color: var(--cor-marca); font-weight: 600; }

.conteudo { padding-top: 18px; }

/* ---------- cartões de resumo (KPIs) ---------- */
.kpis { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.kpi {
  background: white; border: 1px solid var(--cor-borda); border-radius: 10px;
  padding: 14px 18px; min-width: 160px;
}
.kpi-rotulo { font-size: 12px; color: var(--cor-neutro); margin-bottom: 4px; }
.kpi-valor { font-size: 20px; font-weight: 700; color: var(--cor-marca); }

/* ---------- filtros ---------- */
.barra-filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
.barra-filtros input, .barra-filtros select {
  padding: 7px 10px; border: 1px solid var(--cor-borda); border-radius: 7px; font-size: 13px;
}
.barra-filtros .espacador { flex: 1; }

button.primario, .botao-acao {
  background: var(--cor-marca); color: white; border: none; border-radius: 7px;
  padding: 8px 16px; font-size: 13px; cursor: pointer; font-weight: 600;
}
button.primario:hover, .botao-acao:hover { opacity: .92; }
button.secundario {
  background: white; color: var(--cor-marca); border: 1px solid var(--cor-marca);
  border-radius: 7px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}

/* ---------- tabela genérica ---------- */
table.tabela-gestao { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; }
table.tabela-gestao th {
  text-align: left; background: var(--cor-marca-claro); color: var(--cor-marca);
  font-size: 12px; padding: 10px 12px; font-weight: 700;
}
table.tabela-gestao td { padding: 10px 12px; border-top: 1px solid var(--cor-borda); font-size: 13px; }
table.tabela-gestao tr:hover td { background: #fdfbfa; }
table.tabela-gestao tr.clicavel { cursor: pointer; }
.vazio-tabela { padding: 30px; text-align: center; color: var(--cor-neutro); font-size: 13px; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.pill--ok { background: #e7f3ea; color: var(--cor-sucesso); }
.pill--alerta { background: #fbeae5; color: var(--cor-alerta); }
.pill--atencao { background: #fbf1e0; color: var(--cor-atencao); }
.pill--neutro { background: #ece7e5; color: var(--cor-neutro); }

/* ---------- modal genérico ---------- */
dialog { border: none; border-radius: 12px; padding: 0; max-width: 480px; width: 92vw; }
dialog::backdrop { background: rgba(30, 20, 20, .35); }
dialog form { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0 0 4px; font-size: 17px; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--cor-neutro); }
dialog input, dialog select, dialog textarea {
  padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 7px; font-size: 14px; color: var(--cor-texto);
  font-family: inherit;
}
dialog .campo-linha { display: flex; gap: 10px; }
dialog .campo-linha > label { flex: 1; }
.acoes-modal { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.acoes-modal button[type="button"] {
  background: none; border: 1px solid var(--cor-borda); border-radius: 7px; padding: 8px 16px; cursor: pointer;
}

/* ---------- ficha de cliente / detalhe expandido ---------- */
.ficha-painel {
  background: white; border: 1px solid var(--cor-borda); border-radius: 10px; padding: 18px; margin-top: 14px;
}
.ficha-painel h3 { margin-top: 0; font-size: 14px; color: var(--cor-marca); }
.ficha-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ficha-campo { font-size: 12px; }
.ficha-campo b { display: block; color: var(--cor-neutro); font-weight: 500; font-size: 11px; }

.checkbox-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-direction: row; }

.aviso-caixa {
  background: var(--cor-marca-claro); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}

.linha-config {
  background: white; border: 1px solid var(--cor-borda); border-radius: 10px; padding: 16px; margin-bottom: 14px;
}
.linha-config h3 { margin-top: 0; font-size: 14px; }
.horario-dia { display: grid; grid-template-columns: 90px 60px 1fr 1fr; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 6px; }

/* ---------- Financeiro → Caixa (relatório de movimentações) ---------- */
.filtros-caixa {
  background: white; border: 1px solid var(--cor-borda); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px;
}
.filtros-caixa-linha { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.filtros-caixa-linha + .filtros-caixa-linha { margin-top: 12px; }
.filtros-caixa-linha input, .filtros-caixa-linha select {
  padding: 7px 10px; border: 1px solid var(--cor-borda); border-radius: 7px; font-size: 13px;
}
.filtros-caixa-linha .espacador { flex: 1; }
.campo-filtro-caixa { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cor-neutro); }
.checkbox-linha--desabilitada { color: var(--cor-neutro); opacity: .75; cursor: help; }

.caixa-legenda { font-size: 13px; color: var(--cor-neutro); font-style: italic; margin: 0 0 10px; }

.tabela-caixa-wrapper {
  overflow-x: auto; background: white; border-radius: 10px; border: 1px solid var(--cor-borda);
}
table.tabela-caixa {
  width: max-content; min-width: 100%; border-collapse: collapse; background: white; font-size: 12.5px;
}
table.tabela-caixa th, table.tabela-caixa td { padding: 8px 10px; white-space: nowrap; }
table.tabela-caixa .cab-topo-caixa th {
  background: var(--cor-marca-claro); color: var(--cor-marca); font-size: 11.5px; font-weight: 700; text-align: left;
}
table.tabela-caixa .cab-sub-caixa th {
  background: var(--cor-marca); color: white; font-size: 11px; font-weight: 600; text-align: left;
}
.linha-mes-caixa {
  cursor: pointer; font-weight: 700; background: var(--cor-marca-claro);
}
.linha-mes-caixa td { border-top: 1px solid var(--cor-borda); }
.linha-dia-caixa {
  cursor: pointer; border-top: 1px solid #f2ecea;
}
.linha-dia-caixa:hover td { background: var(--cor-marca-claro); }
.linha-dia-caixa td:nth-child(2) { padding-left: 26px; color: var(--cor-neutro); font-weight: 400; }
.celula-expandir-caixa { color: var(--cor-marca); text-align: center; width: 20px; }
.celula-total-caixa { font-weight: 700; color: var(--cor-marca); }
.linha-detalhe-caixa td { padding: 14px 18px; background: #fdfbfa; white-space: normal; }
.carregando-detalhe-caixa { color: var(--cor-neutro); font-size: 12.5px; margin: 0; }

/* ---------- Profissionais → serviços que ela realiza (checklist no modal) ---------- */
.campo-servicos-prof { display: flex; flex-direction: column; gap: 4px; }
.campo-servicos-prof-ajuda { font-size: 12px; color: var(--cor-neutro); margin: 0 0 6px; }
.lista-servicos-prof {
  max-height: 220px; overflow-y: auto; border: 1px solid var(--cor-borda); border-radius: 8px; padding: 10px 12px;
}
.grupo-servicos-prof + .grupo-servicos-prof { margin-top: 10px; }
.grupo-servicos-prof-titulo {
  font-size: 11.5px; font-weight: 700; color: var(--cor-marca); text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: 4px;
}
.grupo-servicos-prof .checkbox-linha { padding: 2px 0; font-size: 13px; }

/* ---- acesso master + importar do Trinks ---- */
.nav-item[hidden] { display: none; }
.area-master { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--cor-borda); font-size: 12px; color: var(--cor-neutro); }
.master-info { color: var(--cor-texto); margin-bottom: 4px; }
.master-info span { color: var(--cor-neutro); }
.link-discreto { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--cor-neutro); cursor: pointer; text-decoration: underline; }
.link-discreto:hover { color: var(--cor-marca); }
.texto-apoio { font-size: 12px; color: var(--cor-neutro); margin: 6px 0; line-height: 1.45; }
.msg-erro { background: #fbeae5; color: var(--cor-alerta); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin: 8px 0; }
.cartao-import { background: white; border: 1px solid var(--cor-borda); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.cartao-import--erro { border-color: var(--cor-alerta); color: var(--cor-alerta); }
.cartao-import .kpis { margin: 10px 0 6px; }
code { background: var(--cor-marca-claro); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.form-vertical { display: flex; flex-direction: column; gap: 12px; }
.form-vertical h3 { margin-bottom: 0; }
.form-vertical label:not(.checkbox-linha) { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--cor-neutro); }
.form-vertical input { padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 7px; font-size: 14px; color: var(--cor-texto); }
.acoes-modal button.primario[type="button"] { background: var(--cor-marca); color: white; border: none; }
.acoes-modal button.primario[type="button"]:disabled { opacity: .5; cursor: default; }

/* ---- login e perfis de acesso ---- */
.tela-login { display: none; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; }
.sem-sessao .tela-login { display: flex; }
.sem-sessao .shell { display: none; }
.caixa-login {
  width: 100%; max-width: 400px; background: white; border: 1px solid var(--cor-borda); border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.caixa-login h2 { margin: 0 0 4px; color: var(--cor-marca); font-size: 20px; }
.caixa-login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.caixa-login input { padding: 9px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; }
.caixa-login .primario { margin-top: 6px; padding: 10px; }
/* quem só consulta (recepção) não vê botões de criar/alterar cadastro */
.somente-leitura .so-admin { display: none !important; }

/* ---- navegação por links (botão direito → abrir em nova aba) ---- */
a.nav-item { display: block; text-decoration: none; }
a.aba { display: inline-block; text-decoration: none; }
a.link-cliente { color: inherit; text-decoration: none; font-weight: 600; }
a.link-cliente:hover { color: var(--cor-marca); text-decoration: underline; }
/* ---- ficha do cliente: marcador discreto, notas, histórico ---- */
.marca-aviso { display: inline-block; font-size: 12px; color: var(--cor-neutro); opacity: .85; cursor: default; font-weight: 400; }
.form-nota { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.form-nota textarea { padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; resize: vertical; }
.nota-item { border-left: 3px solid var(--cor-borda); padding: 6px 10px; margin: 8px 0; background: var(--cor-fundo); border-radius: 0 6px 6px 0; }
.nota-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--cor-neutro); }
.nota-texto { font-size: 13px; margin-top: 3px; white-space: pre-wrap; }
.historico-rolagem { max-height: 340px; overflow: auto; border: 1px solid var(--cor-borda); border-radius: 8px; }

.bloco-acordo { border: 1px solid var(--cor-borda, #e4dcd9); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.bloco-acordo legend { font-weight: 600; padding: 0 6px; font-size: 13px; }

/* faixa da unidade (canto superior esquerdo), com a cor da unidade */
.faixa-unidade {
  margin: -16px -16px 14px; padding: 9px 16px; color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.faixa-unidade-rotulo { display: flex; flex-direction: column; gap: 2px; width: 100%; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.faixa-unidade select {
  font: inherit; font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0;
  border: 1px solid rgba(255,255,255,.55); border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; padding: 4px 6px; cursor: pointer;
}
.faixa-unidade select option { color: #222; }

.grupo-unidades { border: 1px solid var(--cor-borda, #e4dcd9); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.grupo-unidades[hidden] { display: none; }
.grupo-unidades legend { font-weight: 600; padding: 0 6px; font-size: 13px; }