/*
  Estilo do app da barbearia (Fase B do redesenho).
  Um arquivo so, montado a partir de design/: tokens, componentes, agenda,
  paginas e posicoes. As cores da marca vem de /tema.css (configuracao da
  barbearia); o tema (claro, escuro, automatico) vem de data-tema na tag html.
  Sem fonte externa, sem imagem externa, sem estilo inline (CSP estrita).
  Contraste minimo AA (4,5 para 1), alvo de toque de 44px, foco visivel.
*/

/* ===================================================================
   TOKENS
   =================================================================== */
:root {
  /* Marca (padrao neutro; /tema.css sobrescreve com as cores da barbearia) */
  --marca-primaria: #1f2937;
  --marca-secundaria: #b45309;
  --marca-sobre-primaria: #ffffff;
  --marca-sobre-secundaria: #ffffff;

  /* Tipografia (fontes do sistema) */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --texto-pp: 0.8125rem;
  --texto-p: 0.9375rem;
  --texto-m: 1rem;
  --texto-g: 1.125rem;
  --titulo-3: 1.25rem;
  --titulo-2: 1.5rem;
  --titulo-1: 1.875rem;
  --numero-grande: 2.5rem;
  --peso-normal: 400;
  --peso-medio: 600;
  --peso-forte: 700;
  --altura-linha: 1.5;

  /* Espacamento */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* Raios */
  --raio-p: 0.375rem;
  --raio-m: 0.625rem;
  --raio-g: 1rem;
  --raio-total: 999px;

  /* Medidas */
  --alvo: 2.75rem;
  --largura-menu: 16rem;
  --largura-conteudo: 80rem;
  --altura-barra-inferior: 4.25rem;
  --linha-agenda: 1.45rem;
  --largura-foco: 3px;

  --transicao: 140ms ease;

  /* Cores padrao por profissional (quem nao escolheu cor) */
  --prof-1: #2563eb;
  --prof-2: #d97706;
  --prof-3: #059669;
  --prof-4: #db2777;
  --prof-5: #7c3aed;
  --prof-6: #0891b2;
}

/* ----- tema claro (padrao) ----- */
:root,
:root[data-tema="claro"] {
  color-scheme: light;
  --cor-fundo: color-mix(in srgb, var(--marca-primaria) 3%, #f5f6f7);
  --cor-superficie: #ffffff;
  --cor-superficie-2: color-mix(in srgb, var(--marca-primaria) 5%, #eef0f2);
  --cor-superficie-3: color-mix(in srgb, var(--marca-primaria) 8%, #e3e6e9);
  --cor-menu: #ffffff;
  --cor-texto: #15181d;
  --cor-texto-suave: #4a515c;
  --cor-borda: #d6dae0;
  --cor-borda-forte: #8a93a0;
  --cor-marca-texto: color-mix(in srgb, var(--marca-primaria) 55%, #000000);
  --cor-marca-suave: color-mix(in srgb, var(--marca-primaria) 11%, #ffffff);
  --cor-secundaria-texto: color-mix(in srgb, var(--marca-secundaria) 62%, #000000);
  --cor-foco: color-mix(in srgb, var(--marca-primaria) 75%, #000000);
  --cor-sucesso: #0b6b36;
  --cor-sucesso-fundo: #e2f4e9;
  --cor-alerta: #8a4b00;
  --cor-alerta-fundo: #fdefd0;
  --cor-erro: #b3261e;
  --cor-erro-fundo: #fce8e6;
  --cor-info: #1d4ed8;
  --cor-info-fundo: #e5edff;
  --sombra-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --sombra-2: 0 4px 12px rgb(16 24 40 / 0.08), 0 2px 4px rgb(16 24 40 / 0.05);
  --sombra-3: 0 16px 40px rgb(16 24 40 / 0.18);
  --cor-cobertura: rgb(15 18 24 / 0.55);
  --mistura-prof: 15%;
}

/* ----- tema escuro (escolhido) ----- */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --cor-fundo: color-mix(in srgb, var(--marca-primaria) 4%, #0d0e11);
  --cor-superficie: color-mix(in srgb, var(--marca-primaria) 4%, #16181c);
  --cor-superficie-2: color-mix(in srgb, var(--marca-primaria) 6%, #1f2227);
  --cor-superficie-3: color-mix(in srgb, var(--marca-primaria) 9%, #2a2e35);
  --cor-menu: color-mix(in srgb, var(--marca-primaria) 4%, #111317);
  --cor-texto: #f2f0ea;
  --cor-texto-suave: #b4b0a6;
  --cor-borda: #2f333b;
  --cor-borda-forte: #7b828e;
  --cor-marca-texto: color-mix(in srgb, var(--marca-primaria) 55%, #ffffff);
  --cor-marca-suave: color-mix(in srgb, var(--marca-primaria) 16%, #16181c);
  --cor-secundaria-texto: color-mix(in srgb, var(--marca-secundaria) 55%, #ffffff);
  --cor-foco: color-mix(in srgb, var(--marca-primaria) 45%, #ffffff);
  --cor-sucesso: #6fd69a;
  --cor-sucesso-fundo: #12301f;
  --cor-alerta: #f2bd5a;
  --cor-alerta-fundo: #38290a;
  --cor-erro: #ff9c93;
  --cor-erro-fundo: #3d1612;
  --cor-info: #a5c0ff;
  --cor-info-fundo: #162447;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.5);
  --sombra-2: 0 4px 14px rgb(0 0 0 / 0.5);
  --sombra-3: 0 20px 48px rgb(0 0 0 / 0.65);
  --cor-cobertura: rgb(0 0 0 / 0.7);
  --mistura-prof: 24%;
}

/* ----- automatico: segue o aparelho quando a barbearia nao escolheu ----- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="escuro"]) {
    color-scheme: dark;
    --cor-fundo: color-mix(in srgb, var(--marca-primaria) 4%, #0d0e11);
    --cor-superficie: color-mix(in srgb, var(--marca-primaria) 4%, #16181c);
    --cor-superficie-2: color-mix(in srgb, var(--marca-primaria) 6%, #1f2227);
    --cor-superficie-3: color-mix(in srgb, var(--marca-primaria) 9%, #2a2e35);
    --cor-menu: color-mix(in srgb, var(--marca-primaria) 4%, #111317);
    --cor-texto: #f2f0ea;
    --cor-texto-suave: #b4b0a6;
    --cor-borda: #2f333b;
    --cor-borda-forte: #7b828e;
    --cor-marca-texto: color-mix(in srgb, var(--marca-primaria) 55%, #ffffff);
    --cor-marca-suave: color-mix(in srgb, var(--marca-primaria) 16%, #16181c);
    --cor-secundaria-texto: color-mix(in srgb, var(--marca-secundaria) 55%, #ffffff);
    --cor-foco: color-mix(in srgb, var(--marca-primaria) 45%, #ffffff);
    --cor-sucesso: #6fd69a;
    --cor-sucesso-fundo: #12301f;
    --cor-alerta: #f2bd5a;
    --cor-alerta-fundo: #38290a;
    --cor-erro: #ff9c93;
    --cor-erro-fundo: #3d1612;
    --cor-info: #a5c0ff;
    --cor-info-fundo: #162447;
    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --sombra-2: 0 4px 14px rgb(0 0 0 / 0.5);
    --sombra-3: 0 20px 48px rgb(0 0 0 / 0.65);
    --cor-cobertura: rgb(0 0 0 / 0.7);
    --mistura-prof: 24%;
  }
}

/* Navegador sem color-mix: cores fixas, aparencia um pouco mais simples. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root,
  :root[data-tema="claro"] {
    --cor-fundo: #f5f6f7;
    --cor-superficie-2: #eef0f2;
    --cor-superficie-3: #e3e6e9;
    --cor-marca-texto: var(--marca-primaria);
    --cor-marca-suave: #eef2f2;
    --cor-secundaria-texto: var(--marca-secundaria);
    --cor-foco: var(--marca-primaria);
  }
  :root[data-tema="escuro"] {
    --cor-fundo: #0d0e11;
    --cor-superficie: #16181c;
    --cor-superficie-2: #1f2227;
    --cor-superficie-3: #2a2e35;
    --cor-menu: #111317;
    --cor-marca-texto: var(--marca-primaria);
    --cor-marca-suave: #1f2227;
    --cor-secundaria-texto: var(--marca-secundaria);
    --cor-foco: #ffffff;
  }
  .atendimento, .item-lista, .chip-atend { background: var(--cor-superficie-2); }
  .topo-app { background: var(--cor-superficie); }
}

/* ===================================================================
   BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  font-size: var(--texto-m);
  line-height: var(--altura-linha);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: var(--peso-forte); letter-spacing: -0.01em; }
h1 { font-size: var(--titulo-2); }
h2 { font-size: var(--titulo-3); margin: var(--esp-5) 0 var(--esp-3); }
h3 { font-size: var(--texto-g); margin: var(--esp-4) 0 var(--esp-2); }
.conteudo-cabeca h1, .cartao-cabeca h2, .cartao h2:first-child, .cartao h3:first-child { margin-top: 0; }
p { margin: 0 0 var(--esp-3); }
small { font-size: var(--texto-pp); color: var(--cor-texto-suave); }
a { color: var(--cor-marca-texto); text-underline-offset: 0.18em; }
img, svg { max-width: 100%; }
ol, ul { padding-left: 1.25rem; }
code { font-size: 0.875em; background: var(--cor-superficie-2); padding: 0.1rem 0.3rem; border-radius: var(--raio-p); word-break: break-all; }

:focus-visible { outline: var(--largura-foco) solid var(--cor-foco); outline-offset: 2px; border-radius: var(--raio-p); }

.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.numeros { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===================================================================
   BOTAO
   =================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo);
  min-width: var(--alvo);
  padding: 0 var(--esp-4);
  font: inherit;
  font-size: var(--texto-m);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  color: var(--marca-sobre-primaria);
  background: var(--marca-primaria);
  border: 2px solid var(--marca-primaria);
  border-radius: var(--raio-m);
  cursor: pointer;
  transition: filter var(--transicao), background var(--transicao), border-color var(--transicao);
}
.botao:hover { filter: brightness(1.08); }
.botao:active { filter: brightness(0.94); }
.botao svg { width: 1.25rem; height: 1.25rem; flex: none; }
.botao-secundario { color: var(--cor-marca-texto); background: transparent; border-color: var(--cor-marca-texto); }
.botao-secundario:hover { background: var(--cor-marca-suave); filter: none; }
.botao-neutro { color: var(--cor-texto); background: var(--cor-superficie-2); border-color: var(--cor-borda); }
.botao-neutro:hover { background: var(--cor-superficie-3); filter: none; }
.botao-fantasma { color: var(--cor-texto); background: transparent; border-color: transparent; }
.botao-fantasma:hover { background: var(--cor-superficie-2); filter: none; }
.botao-perigo { color: var(--cor-erro); background: transparent; border-color: var(--cor-erro); }
.botao-perigo:hover { background: var(--cor-erro-fundo); filter: none; }
.botao-acento { color: var(--marca-sobre-secundaria); background: var(--marca-secundaria); border-color: var(--marca-secundaria); }
.botao-grande { min-height: 3.25rem; padding: 0 var(--esp-5); font-size: var(--texto-g); }
.botao-bloco { display: flex; width: 100%; }
.botao-icone { padding: 0; width: var(--alvo); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: none; }
.texto-acento { color: var(--cor-secundaria-texto); }

/* grupos de botoes */
.botoes { display: grid; gap: var(--esp-3); }
.botoes-situacao { display: grid; gap: var(--esp-3); }
.botoes-situacao form { display: block; }
.botoes-situacao .botao { width: 100%; }
.acoes-linha, .linha-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
p > .botao + .botao { margin-left: var(--esp-2); }
@media (min-width: 48rem) {
  .botoes { grid-template-columns: repeat(auto-fit, minmax(12rem, max-content)); }
  .botoes-situacao { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/* ===================================================================
   FORMULARIOS
   =================================================================== */
form { display: grid; gap: var(--esp-4); }
form.inline, form.filtro, form.busca { gap: var(--esp-3); }
label { display: grid; gap: var(--esp-1); font-size: var(--texto-p); font-weight: var(--peso-medio); }
.rotulo { display: block; margin-bottom: var(--esp-1); font-size: var(--texto-p); font-weight: var(--peso-medio); }
input, select, textarea, .entrada {
  display: block;
  width: 100%;
  min-height: var(--alvo);
  padding: var(--esp-2) var(--esp-3);
  font: inherit;
  font-size: var(--texto-m);
  font-weight: var(--peso-normal);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--raio-m);
}
textarea { min-height: 6rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--cor-texto-suave); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--largura-foco) solid var(--cor-foco); outline-offset: 1px; border-color: var(--cor-foco); }
input[readonly], textarea[readonly] { background: var(--cor-superficie-2); }
input[type="color"] { max-width: 10rem; padding: 0.25rem; cursor: pointer; }
input[type="file"] { padding: var(--esp-2); }
input[type="checkbox"], input[type="radio"] { width: 1.375rem; height: 1.375rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--marca-primaria); }
.campo { display: block; margin-bottom: var(--esp-4); }
.campo .ajuda, .ajuda { margin: var(--esp-1) 0 0; font-size: var(--texto-pp); color: var(--cor-texto-suave); }
.campo.com-erro input, .campo.com-erro select { border-color: var(--cor-erro); }
.mensagem-erro { display: flex; align-items: center; gap: var(--esp-1); margin: var(--esp-2) 0; font-size: var(--texto-p); font-weight: var(--peso-medio); color: var(--cor-erro); }
.mensagem-erro svg { width: 1.125rem; height: 1.125rem; flex: none; }
.linha-campos { display: grid; gap: var(--esp-4); grid-template-columns: 1fr 1fr; }
.linha-campos.quatro { grid-template-columns: 1fr 1fr; }
@media (max-width: 30rem) { .linha-campos { grid-template-columns: 1fr; } .linha-campos.quatro { grid-template-columns: 1fr 1fr; } }
@media (min-width: 48rem) { .linha-campos.quatro { grid-template-columns: repeat(4, 1fr); } }

/* caixa de marcar e opcao de radio com area de toque grande */
label.caixa, .opcao-marcar { display: flex; flex-direction: row; align-items: center; gap: var(--esp-3); min-height: var(--alvo); cursor: pointer; }
label.caixa input, .opcao-marcar input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0; }
.caixas-servicos { display: grid; gap: var(--esp-1); padding-left: 2.25rem; }
.rotulo-inline { font-size: var(--texto-p); }

fieldset { min-width: 0; margin: 0; padding: var(--esp-3) var(--esp-4) var(--esp-4); display: grid; gap: var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); }
legend { padding: 0 var(--esp-2); font-weight: var(--peso-forte); }
fieldset.opcoes, fieldset.dias-campo, fieldset.sem-moldura { padding: 0; border: 0; }
fieldset.opcoes legend, fieldset.sem-moldura legend { padding: 0; }
.dia-expediente legend label.caixa { min-height: 2.25rem; }

/* filtro e busca (formularios GET) */
.filtro, .busca { grid-template-columns: 1fr auto; align-items: end; margin-bottom: var(--esp-4); }
.busca { grid-template-columns: 1fr; }
.busca .botao { width: 100%; }
@media (min-width: 48rem) {
  .busca { grid-template-columns: 1fr auto auto; }
  .busca .botao { width: auto; }
}

/* campos "copiar" (link, token, mensagens prontas) */
.copiar, .mensagem-copiar { display: grid; gap: var(--esp-1); margin-bottom: var(--esp-4); }
.copiar-linha { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-2); }
.rolagem { overflow-x: auto; }

/* ===================================================================
   CARTAO
   =================================================================== */
.cartao {
  padding: var(--esp-4);
  margin-bottom: var(--esp-4);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
}
.cartao > :last-child { margin-bottom: 0; }
.cartao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.cartao-cabeca h2, .cartao-cabeca h3 { font-size: var(--texto-g); margin: 0; }
.cartao-rotulo { display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-2); font-size: var(--texto-p); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }
.cartao-rotulo svg { width: 1.125rem; height: 1.125rem; }
.cartao-destaque { color: var(--marca-sobre-primaria); background: var(--marca-primaria); border-color: transparent; --cor-texto-suave: var(--marca-sobre-primaria); }
.cartao-destaque .cartao-rotulo { color: inherit; opacity: 0.9; }
.cartao-destaque small { color: inherit; opacity: 0.9; }
.cartao-alerta { border-color: var(--cor-alerta); background: var(--cor-alerta-fundo); }
.cartao-link { display: block; color: inherit; text-decoration: none; transition: box-shadow var(--transicao), border-color var(--transicao); }
.cartao-link:hover { box-shadow: var(--sombra-2); border-color: var(--cor-borda-forte); }
.metrica { display: block; font-size: var(--numero-grande); font-weight: var(--peso-forte); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.metrica-legenda { display: block; margin-top: var(--esp-1); font-size: var(--texto-p); color: var(--cor-texto-suave); }

/* grade de numeros (relatorios, resumo do dia) */
.grade-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
.grade-resumo .cartao { margin: 0; font-size: var(--texto-p); color: var(--cor-texto-suave); }
.grade-resumo .numero, .numero { display: block; font-size: var(--titulo-1); font-weight: var(--peso-forte); line-height: 1.1; color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.grade-resumo .cartao small { display: block; }
.grade-resumo a.cartao { color: var(--cor-texto-suave); text-decoration: none; }
.grade-resumo a.cartao:hover { box-shadow: var(--sombra-2); }

/* ficha (cliente, agendamento, produto) */
.ficha .ficha-linha { display: grid; grid-template-columns: 8rem 1fr; gap: var(--esp-2); margin: 0 0 var(--esp-2); align-items: baseline; }
.ficha .ficha-linha > span:first-child { color: var(--cor-texto-suave); font-size: var(--texto-pp); text-transform: uppercase; letter-spacing: 0.04em; }
.tel { white-space: nowrap; }
@media (max-width: 30rem) { .ficha .ficha-linha { grid-template-columns: 1fr; gap: 0; margin-bottom: var(--esp-3); } }

/* ===================================================================
   LISTAS E TABELAS
   =================================================================== */
.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples > li { padding: var(--esp-3) 0; border-bottom: 1px solid var(--cor-borda); }
.lista-simples > li:last-child { border-bottom: 0; }
.lista-simples > li:first-child { padding-top: 0; }
.lista-clientes li, .lista-produtos li, .lista-servicos li { padding: 0; }
.lista-clientes a, .lista-produtos a, .lista-produtos div, .lista-servicos a { display: grid; gap: 0.15rem; padding: var(--esp-3) var(--esp-2); min-height: 3.5rem; color: inherit; text-decoration: none; border-radius: var(--raio-m); }
.lista-clientes a span, .lista-produtos span, .lista-servicos a span { color: var(--cor-texto-suave); font-size: var(--texto-p); }
.lista-clientes a:hover, .lista-produtos a:hover, .lista-servicos a:hover { background: var(--cor-superficie-2); }
.inativo > a strong, .inativo > div strong, .inativo > span strong { color: var(--cor-texto-suave); }
.linha-bloqueio, .linha-profissional { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.linha-bloqueio form { display: flex; gap: var(--esp-2); }
.linha-servico-plano { display: grid; gap: var(--esp-2); padding: var(--esp-2) 0; border-bottom: 1px solid var(--cor-borda); }
@media (min-width: 48rem) { .linha-servico-plano { grid-template-columns: 1fr 1fr; align-items: end; } }

.tabela-envolta { overflow-x: auto; margin-bottom: var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.cartao .tabela-envolta { border: 0; box-shadow: none; border-radius: 0; margin: 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--texto-p); }
.tabela caption { text-align: left; padding: var(--esp-3) var(--esp-4); font-weight: var(--peso-forte); font-size: var(--texto-g); }
.tabela th, .tabela td { padding: var(--esp-3) var(--esp-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--cor-borda); }
.tabela thead th { font-size: var(--texto-pp); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-suave); background: var(--cor-superficie-2); white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--cor-superficie-2); }
.tabela .direita { text-align: right; font-variant-numeric: tabular-nums; }
.tabela a.linha-link { color: inherit; font-weight: var(--peso-medio); }
@media (max-width: 39.99rem) {
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: var(--esp-2) 0; border-bottom: 1px solid var(--cor-borda); }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela td { display: flex; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-1) var(--esp-4); border: 0; text-align: right; }
  .tabela td::before { content: attr(data-rotulo); font-weight: var(--peso-medio); color: var(--cor-texto-suave); text-align: left; }
  .tabela td.sem-rotulo { justify-content: flex-start; text-align: left; }
  .tabela td.sem-rotulo::before { content: none; }
  .tabela .direita { text-align: right; }
}

/* ===================================================================
   ETIQUETAS DE SITUACAO (sempre com texto, nunca so cor)
   =================================================================== */
.situacao {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.625rem 0.15rem 0.45rem;
  font-size: var(--texto-pp);
  font-weight: var(--peso-medio);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--cor-texto-suave);
  background: var(--cor-superficie-2);
  border-radius: var(--raio-total);
}
.situacao svg { width: 0.9rem; height: 0.9rem; flex: none; }
.situacao-agendado, .situacao-assinatura-pendente { color: var(--cor-info); background: var(--cor-info-fundo); }
.situacao-concluido, .situacao-assinatura-ativa, .situacao-cobranca-confirmada, .situacao-cobranca-recebida { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.situacao-faltou, .situacao-assinatura-em_atraso, .situacao-cobranca-pendente { color: var(--cor-alerta); background: var(--cor-alerta-fundo); }
.situacao-cancelado, .situacao-assinatura-suspensa, .situacao-cobranca-vencida, .situacao-cobranca-estornada, .situacao-cobranca-contestada { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.situacao-assinatura-cancelada, .situacao-neutra { color: var(--cor-texto-suave); background: var(--cor-superficie-2); }

.etiqueta { display: inline-block; font-size: 0.75rem; font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.5rem; border-radius: var(--raio-total); background: var(--cor-superficie-3); color: var(--cor-texto); vertical-align: middle; }
.etiqueta-online { background: var(--cor-info-fundo); color: var(--cor-info); margin-left: 0.35rem; }
.etiqueta-previsao { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
h2 .etiqueta { margin-left: 0.4rem; }

.etiqueta-prof { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--texto-pp); font-weight: var(--peso-medio); }
.etiqueta-prof::before, .cor-profissional { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--cor-prof, var(--cor-texto-suave)); }
.cor-profissional { margin-right: 0.45rem; vertical-align: middle; }

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  font-weight: var(--peso-forte);
  font-size: var(--texto-p);
  color: #ffffff;
  background: var(--cor-prof, var(--marca-primaria));
  background-image: linear-gradient(rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.3));
  border-radius: 50%;
}
.avatar svg { width: 1.25rem; height: 1.25rem; }

/* ===================================================================
   AVISO
   =================================================================== */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-4);
  color: var(--cor-info);
  background: var(--cor-info-fundo);
  border: 1px solid currentColor;
  border-radius: var(--raio-m);
}
.aviso > svg { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 0.1rem; }
.aviso > div { flex: 1; color: var(--cor-texto); }
.aviso > div > p:last-child { margin-bottom: 0; }
.aviso strong { font-weight: var(--peso-forte); }
.aviso a { color: inherit; font-weight: var(--peso-medio); }
.aviso .botao { margin-top: var(--esp-2); }
.aviso-sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.aviso-alerta { color: var(--cor-alerta); background: var(--cor-alerta-fundo); }
.aviso-erro { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.linha-alerta { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.lista-alertas { list-style: none; padding: 0; margin: 0 0 var(--esp-4); }

/* ===================================================================
   ESTADO VAZIO (sempre com chamada para acao)
   =================================================================== */
.vazio { color: var(--cor-texto-suave); }
p.vazio, li.vazio, td.vazio { font-style: italic; }
.vazio-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-4);
  text-align: center;
  font-style: normal;
  color: var(--cor-texto);
}
.vazio-icone { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--esp-4); color: var(--cor-marca-texto); background: var(--cor-marca-suave); border-radius: 50%; }
.vazio-icone svg { width: 2.25rem; height: 2.25rem; }
.vazio-bloco h2, .vazio-bloco h3 { margin: 0 0 var(--esp-2); font-size: var(--titulo-3); }
.vazio-bloco p { margin-bottom: var(--esp-4); color: var(--cor-texto-suave); }
.vazio-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: center; }
.vazio-borda { border: 2px dashed var(--cor-borda); border-radius: var(--raio-g); background: var(--cor-superficie); margin-bottom: var(--esp-4); }

/* ===================================================================
   CASCA: MENU LATERAL (computador) e BARRA INFERIOR (celular)
   =================================================================== */
.app { min-height: 100vh; }
.menu-lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  width: var(--largura-menu);
  padding: var(--esp-4) var(--esp-3);
  overflow-y: auto;
  background: var(--cor-menu);
  border-right: 1px solid var(--cor-borda);
}
.marca-nome { min-height: var(--alvo); display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-2) var(--esp-4); color: var(--cor-texto); text-decoration: none; }
.marca-simbolo { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; overflow: hidden; color: var(--marca-sobre-primaria); background: var(--marca-primaria); border-radius: var(--raio-m); }
.marca-simbolo svg { width: 1.5rem; height: 1.5rem; }
.marca-simbolo img { width: 100%; height: 100%; object-fit: cover; }
.marca-texto { display: block; min-width: 0; font-size: var(--texto-g); font-weight: var(--peso-forte); line-height: 1.15; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.marca-texto small { display: block; font-size: var(--texto-pp); font-weight: var(--peso-normal); color: var(--cor-texto-suave); letter-spacing: 0; }

.menu-grupo { margin-top: var(--esp-4); }
.menu-grupo-titulo { padding: 0 var(--esp-3); margin: 0 0 var(--esp-1); font-size: 0.75rem; font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cor-texto-suave); }
.menu-lista { margin: 0; padding: 0; list-style: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: var(--alvo);
  padding: 0 var(--esp-3);
  font: inherit;
  color: var(--cor-texto);
  font-weight: var(--peso-medio);
  font-size: var(--texto-p);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--raio-m);
  cursor: pointer;
  transition: background var(--transicao);
}
.menu-item svg { flex: none; width: 1.375rem; height: 1.375rem; color: var(--cor-texto-suave); }
.menu-item:hover { background: var(--cor-superficie-2); }
.menu-item[aria-current="page"] { color: var(--cor-marca-texto); background: var(--cor-marca-suave); box-shadow: inset 3px 0 0 var(--marca-primaria); }
.menu-item[aria-current="page"] svg { color: var(--cor-marca-texto); }
.menu-rodape { margin-top: auto; padding-top: var(--esp-4); }
.menu-rodape form { display: block; }
.menu-usuario { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); font-size: var(--texto-pp); color: var(--cor-texto-suave); }

.topo-app {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 3.5rem;
  padding: var(--esp-2) var(--esp-4);
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent);
  border-bottom: 1px solid var(--cor-borda);
  backdrop-filter: blur(8px);
}
.topo-app .marca-nome { padding: 0; min-width: 0; }
.topo-app .marca-simbolo { width: 2.25rem; height: 2.25rem; }
.topo-espaco { flex: 1; }
.topo-usuario { display: none; align-items: center; gap: var(--esp-2); font-size: var(--texto-p); font-weight: var(--peso-medio); }
.topo-app .botao-icone { flex: none; }

.conteudo { padding: var(--esp-4); padding-bottom: calc(var(--altura-barra-inferior) + var(--esp-6)); max-width: var(--largura-conteudo); margin: 0 auto; }
.conteudo-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.conteudo-cabeca p { margin: 0; color: var(--cor-texto-suave); }

.barra-inferior {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: var(--altura-barra-inferior);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--cor-menu);
  border-top: 1px solid var(--cor-borda);
}
.barra-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: var(--alvo);
  padding: var(--esp-2) 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.barra-item svg { width: 1.5rem; height: 1.5rem; }
.barra-item[aria-current="page"] { color: var(--cor-marca-texto); }
.barra-item[aria-current="page"] svg { padding: 0.15rem 0.9rem; box-sizing: content-box; width: 1.5rem; height: 1.5rem; background: var(--cor-marca-suave); border-radius: var(--raio-total); }

/* acao principal fixa acima da barra inferior, na zona do polegar */
.acoes-fixas { position: fixed; left: 0; right: 0; bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom)); padding: var(--esp-3) var(--esp-4); background: linear-gradient(to top, var(--cor-fundo) 70%, transparent); z-index: 9; }
.acoes-fixas .botao { max-width: 40rem; margin: 0 auto; display: flex; box-shadow: var(--sombra-2); }

.cabeca-pagina { display: none; }

@media (min-width: 62rem) {
  .menu-lateral { display: flex; }
  .barra-inferior { display: none; }
  .topo-app { display: none; }
  .app-corpo { margin-left: var(--largura-menu); }
  .conteudo { padding: var(--esp-4) var(--esp-6) var(--esp-7); }
  .cabeca-pagina { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-3); padding: var(--esp-3) var(--esp-6) 0; max-width: var(--largura-conteudo); margin: 0 auto; font-size: var(--texto-p); font-weight: var(--peso-medio); }
  .acoes-fixas { position: static; padding: 0; background: none; margin-bottom: var(--esp-4); }
  .acoes-fixas .botao { display: inline-flex; width: auto; margin: 0; box-shadow: none; }
}

/* so no computador / so no celular (mesmo corte do menu lateral) */
@media (max-width: 61.99rem) { .so-pc { display: none !important; } }
@media (min-width: 62rem) { .so-celular { display: none !important; } }

/* pagina /menu (celular: "Mais") */
.menu-pagina .menu-grupo { margin-top: var(--esp-2); }
.menu-pagina .menu-item { min-height: 3.25rem; font-size: var(--texto-m); }

/* link para pular direto ao conteudo */
.pular-link { position: absolute; left: -999px; top: var(--esp-2); z-index: 100; padding: var(--esp-3) var(--esp-4); font-weight: var(--peso-medio); color: var(--cor-texto); background: var(--cor-superficie); border: 2px solid var(--cor-foco); border-radius: var(--raio-m); }
.pular-link:focus { left: var(--esp-2); }

/* ===================================================================
   SELETOR DE VISAO, CHIPS, BARRA DE PROGRESSO
   =================================================================== */
.seletor { display: inline-flex; padding: 0.25rem; gap: 0.25rem; background: var(--cor-superficie-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); }
.seletor a, .seletor button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo);
  min-width: var(--alvo);
  padding: 0 var(--esp-3);
  font: inherit;
  font-size: var(--texto-p);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--raio-p);
  cursor: pointer;
}
.seletor svg { width: 1.125rem; height: 1.125rem; }
.seletor [aria-pressed="true"], .seletor [aria-current="true"] { color: var(--cor-texto); background: var(--cor-superficie); box-shadow: var(--sombra-1); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alvo);
  padding: 0 var(--esp-3);
  font: inherit;
  font-size: var(--texto-p);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
  text-decoration: none;
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio-total);
  cursor: pointer;
}
.chip::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--cor-prof, var(--cor-texto-suave)); }
.chip-todos::before { background: transparent; border: 2px solid var(--cor-texto-suave); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { border-color: var(--cor-prof, var(--cor-marca-texto)); background: color-mix(in srgb, var(--cor-prof, var(--marca-primaria)) 12%, var(--cor-superficie)); }
.chip[aria-pressed="false"] { opacity: 0.65; }

/* horarios livres (botoes montados por app.js) e chips de radio */
.livres .rotulo-livres { margin: 0 0 var(--esp-2); font-weight: var(--peso-medio); font-size: var(--texto-p); }
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chips button, .chip-radio span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo);
  min-width: 4.5rem;
  padding: 0 var(--esp-3);
  font: inherit;
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--raio-m);
  cursor: pointer;
}
.chips button[aria-pressed="true"], .chip-radio input:checked + span { color: var(--marca-sobre-primaria); background: var(--marca-primaria); border-color: var(--marca-primaria); }
.chip-radio { position: relative; display: inline-flex; }
.chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip-radio input:focus-visible + span { outline: var(--largura-foco) solid var(--cor-foco); outline-offset: 2px; }

.barra { height: 0.625rem; overflow: hidden; background: var(--cor-superficie-3); border-radius: var(--raio-total); }
.barra > span { display: block; height: 100%; background: var(--cor-prof, var(--marca-primaria)); border-radius: var(--raio-total); }

/* ===================================================================
   AGENDA
   =================================================================== */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.agenda-data { display: flex; align-items: center; gap: var(--esp-2); }
.agenda-data h2 { min-width: 12rem; margin: 0; font-size: var(--titulo-3); text-transform: capitalize; }
.agenda-data h2 small { display: block; font-size: var(--texto-pp); font-weight: var(--peso-normal); color: var(--cor-texto-suave); text-transform: none; }
.agenda-barra .espaco { flex: 1; }
.agenda-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-3); }
.expediente { margin: 0 0 var(--esp-3); color: var(--cor-texto-suave); font-size: var(--texto-p); }

.agenda-rolagem { position: relative; overflow: auto; max-height: calc(100vh - 15rem); min-height: 20rem; margin-bottom: var(--esp-2); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.agenda-grade { --colunas: 4; min-width: calc(4rem + var(--colunas) * 10.5rem); }
.agenda-cabecalho, .agenda-corpo { display: grid; grid-template-columns: 4rem repeat(var(--colunas), minmax(10.5rem, 1fr)); }
.agenda-cabecalho { position: sticky; top: 0; z-index: 5; background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.agenda-canto { position: sticky; left: 0; z-index: 6; background: var(--cor-superficie); }
.agenda-prof { display: flex; align-items: center; gap: var(--esp-2); min-height: 3.5rem; padding: var(--esp-2) var(--esp-3); border-left: 1px solid var(--cor-borda); border-top: 4px solid var(--cor-prof, var(--cor-borda)); }
.agenda-prof .avatar { width: 2.125rem; height: 2.125rem; font-size: var(--texto-pp); }
.agenda-prof strong { display: block; font-size: var(--texto-p); line-height: 1.2; }
.agenda-prof small { display: block; font-size: var(--texto-pp); color: var(--cor-texto-suave); }

.agenda-horas { position: sticky; left: 0; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: var(--linha-agenda); background: var(--cor-superficie); }
.agenda-hora { grid-row-end: span 4; padding-right: var(--esp-2); font-size: var(--texto-pp); font-variant-numeric: tabular-nums; text-align: right; color: var(--cor-texto-suave); transform: translateY(-0.55em); }
.agenda-hora.primeira { transform: none; padding-top: 0.15rem; }

.agenda-coluna {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: var(--linha-agenda);
  border-left: 1px solid var(--cor-borda);
  background-image:
    linear-gradient(to bottom, var(--cor-borda) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--cor-borda) 45%, transparent) 1px, transparent 1px);
  background-size: 100% calc(var(--linha-agenda) * 4), 100% calc(var(--linha-agenda) * 2);
}

.atendimento {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-height: 0;
  width: calc(100% - 8px);
  margin: 1px 4px;
  padding: 0.25rem 1.5rem 0.25rem 0.625rem;
  overflow: hidden;
  font: inherit;
  font-size: var(--texto-pp);
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--cor-prof, var(--marca-primaria)) var(--mistura-prof), var(--cor-superficie));
  border: 0;
  border-left: 4px solid var(--cor-prof, var(--marca-primaria));
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.atendimento:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); z-index: 2; }
.atendimento strong { font-size: var(--texto-p); font-weight: var(--peso-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atendimento .servico { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-suave); }
.atendimento .intervalo { font-variant-numeric: tabular-nums; color: var(--cor-texto-suave); }
.atendimento .marca-situacao { position: absolute; top: 0.3rem; right: 0.35rem; width: 1rem; height: 1rem; }
.atendimento .marca-situacao svg { width: 1rem; height: 1rem; display: block; }
.sit-concluido .marca-situacao { color: var(--cor-sucesso); }
.sit-agendado .marca-situacao { color: var(--cor-info); }
.sit-faltou { outline: 2px dashed var(--cor-alerta); outline-offset: -2px; }
.sit-faltou .marca-situacao { color: var(--cor-alerta); }
.sit-cancelado { opacity: 0.7; background: var(--cor-superficie-2); border-left-style: dashed; }
.sit-cancelado strong { text-decoration: line-through; }
.sit-cancelado .marca-situacao { color: var(--cor-erro); }

.bloqueio-agenda { z-index: 0; display: flex; align-items: center; justify-content: center; margin: 1px 0; padding: 0 var(--esp-2); overflow: hidden; font-size: var(--texto-pp); font-weight: var(--peso-medio); text-align: center; color: var(--cor-texto-suave); background-image: repeating-linear-gradient(135deg, var(--cor-superficie-2) 0 7px, var(--cor-superficie-3) 7px 14px); }
.bloqueio-agenda.trancado { border-left: 4px solid var(--cor-borda-forte); }

.agora { position: relative; z-index: 3; align-self: start; height: 0; border-top: 2px solid var(--cor-erro); pointer-events: none; }
.agora-etiqueta { position: relative; z-index: 3; align-self: start; justify-self: end; margin-right: 0.25rem; padding: 0 0.35rem; font-size: 0.6875rem; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; line-height: 1.3; color: var(--cor-erro-fundo); background: var(--cor-erro); border-radius: var(--raio-p); transform: translateY(-50%); }
.desl-5 { margin-top: calc(var(--linha-agenda) / 3); }
.desl-10 { margin-top: calc(var(--linha-agenda) * 2 / 3); }
.agenda-dica { margin: 0 0 var(--esp-4); font-size: var(--texto-pp); color: var(--cor-texto-suave); }

/* visao em lista */
.agenda-lista { display: grid; gap: var(--esp-2); margin: 0 0 var(--esp-4); padding: 0; list-style: none; }
.lista-hora { margin: var(--esp-3) 0 0; font-size: var(--texto-pp); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); }
.item-lista {
  display: grid;
  grid-template-columns: 4.25rem 1fr auto;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: 4rem;
  padding: var(--esp-2) var(--esp-3);
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--cor-texto);
  background: color-mix(in srgb, var(--cor-prof, var(--marca-primaria)) var(--mistura-prof), var(--cor-superficie));
  border: 0;
  border-left: 4px solid var(--cor-prof, var(--marca-primaria));
  border-radius: var(--raio-m);
  cursor: pointer;
}
a.item-lista:hover { box-shadow: var(--sombra-2); }
.item-lista .horario { font-variant-numeric: tabular-nums; line-height: 1.2; }
.item-lista .horario strong { display: block; font-size: var(--texto-g); }
.item-lista .horario small { color: var(--cor-texto-suave); }
.item-lista .detalhes { min-width: 0; }
.item-lista .detalhes strong { display: block; font-size: var(--texto-m); overflow: hidden; text-overflow: ellipsis; }
.item-lista .detalhes span { font-size: var(--texto-p); color: var(--cor-texto-suave); }
.item-lista .detalhes .obs { display: block; font-style: italic; }
.item-lista.sit-cancelado .detalhes strong { text-decoration: line-through; }
.item-lista.sit-faltou { outline-offset: -2px; }
.item-lista.item-bloqueio, .item-lista.sem-link { cursor: default; color: var(--cor-texto-suave); background-image: repeating-linear-gradient(135deg, var(--cor-superficie-2) 0 7px, var(--cor-superficie-3) 7px 14px); background-color: var(--cor-superficie-2); border-left-color: var(--cor-borda-forte); }
.item-lista.sem-link { background-image: none; color: var(--cor-texto); }

/* visao da semana */
.semana { display: grid; grid-template-columns: 1fr; gap: var(--esp-3); margin-bottom: var(--esp-4); }
.dia-coluna { padding: var(--esp-3); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); }
.dia-coluna.dia-hoje { border: 2px solid var(--marca-primaria); }
.dia-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2); margin-bottom: var(--esp-2); }
.dia-cabeca a { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: var(--esp-2); min-height: var(--alvo); }
.dia-cabeca .dia-nome { font-size: var(--texto-pp); font-weight: var(--peso-forte); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-texto-suave); }
.dia-cabeca .dia-numero { font-size: var(--titulo-2); font-weight: var(--peso-forte); line-height: 1; }
.dia-cabeca .dia-total { flex-basis: 100%; font-size: var(--texto-pp); color: var(--cor-texto-suave); }
.dia-hoje .dia-cabeca .dia-numero { color: var(--cor-marca-texto); }
.dia-lista { display: grid; gap: var(--esp-1); margin: 0; padding: 0; list-style: none; }
.chip-atend { display: block; width: 100%; min-height: var(--alvo); padding: 0.25rem 0.5rem; font: inherit; font-size: var(--texto-pp); line-height: 1.3; text-align: left; text-decoration: none; color: var(--cor-texto); background: color-mix(in srgb, var(--cor-prof, var(--marca-primaria)) var(--mistura-prof), var(--cor-superficie)); border: 0; border-left: 4px solid var(--cor-prof, var(--marca-primaria)); border-radius: var(--raio-p); cursor: pointer; }
.chip-atend strong { font-variant-numeric: tabular-nums; }
.chip-atend small { display: block; color: var(--cor-texto-suave); }
.chip-atend.sit-cancelado span { text-decoration: line-through; }
.chip-atend.bloqueio { cursor: default; color: var(--cor-texto-suave); background-image: repeating-linear-gradient(135deg, var(--cor-superficie-2) 0 7px, var(--cor-superficie-3) 7px 14px); border-left-color: var(--cor-borda-forte); }
.dia-fechado { margin: 0; font-size: var(--texto-p); color: var(--cor-texto-suave); }
.dia-coluna.fechada { background: var(--cor-superficie-2); }
.dia-mais { margin: var(--esp-2) 0 0; font-size: var(--texto-pp); }
@media (min-width: 64rem) { .semana { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .semana { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* dia: grade no computador, lista no celular (as duas no HTML) */
@media (max-width: 39.99rem) {
  .visao-grade.automatica { display: none; }
  .agenda-data h2 { min-width: 0; }
  .agenda-rolagem { max-height: calc(100vh - 17rem); }
  .item-lista { grid-template-columns: 3.75rem 1fr; }
  .item-lista .situacao { grid-column: 2; justify-self: start; }
}
@media (min-width: 40rem) {
  .visao-lista.automatica { display: none; }
}

/* resumo do dia (inicio do profissional) */
.resumo-dia { margin-bottom: var(--esp-4); }

/* ===================================================================
   PAINEL INICIAL DO ADMINISTRADOR
   =================================================================== */
.saudacao { margin-bottom: var(--esp-4); }
.saudacao h1 { font-size: var(--titulo-1); }
.saudacao p { margin: var(--esp-1) 0 0; color: var(--cor-texto-suave); }
.grade-painel { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; margin-bottom: var(--esp-4); }
.grade-painel > .cartao { margin: 0; }
@media (min-width: 40rem) { .grade-painel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .grade-painel { grid-template-columns: repeat(4, 1fr); } .span-2 { grid-column: span 2; } }
.hoje-numeros { display: flex; align-items: baseline; gap: var(--esp-3); margin-bottom: var(--esp-2); }
.hoje-detalhe { display: flex; flex-wrap: wrap; gap: var(--esp-4); margin-top: var(--esp-3); font-size: var(--texto-p); }
.hoje-detalhe span { display: block; color: var(--cor-texto-suave); }
.hoje-detalhe strong { font-size: var(--texto-g); font-variant-numeric: tabular-nums; }
.proximo-hora { display: flex; align-items: baseline; gap: var(--esp-2); margin: 0; font-size: var(--titulo-1); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; line-height: 1.1; }
.proximo-hora small { font-size: var(--texto-p); font-weight: var(--peso-medio); color: inherit; opacity: 0.9; }
.proximo-nome { margin: var(--esp-2) 0 0; font-size: var(--texto-g); font-weight: var(--peso-medio); }
.proximo-servico { margin: 0 0 var(--esp-3); opacity: 0.92; }
.cartao-destaque .botao { color: var(--marca-primaria); background: var(--marca-sobre-primaria); border-color: var(--marca-sobre-primaria); }
.ocupacao-lista { display: grid; gap: var(--esp-3); margin: var(--esp-3) 0 0; padding: 0; list-style: none; }
.ocupacao-linha { display: grid; grid-template-columns: 6rem 1fr 3rem; align-items: center; gap: var(--esp-2); font-size: var(--texto-p); }
.ocupacao-linha > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocupacao-linha .pct { text-align: right; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.alertas { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.alertas li { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-2) var(--esp-3); background: var(--cor-superficie-2); border-radius: var(--raio-m); font-size: var(--texto-p); }
.alertas svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.alertas .nivel-alerta svg { color: var(--cor-alerta); }
.alertas .nivel-erro svg { color: var(--cor-erro); }
.alertas .nivel-info svg { color: var(--cor-info); }
.alertas a { font-weight: var(--peso-medio); }
.atalhos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); }
.atalho { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--esp-2); min-height: 5.5rem; padding: var(--esp-3); font-size: var(--texto-p); font-weight: var(--peso-medio); color: var(--cor-texto); text-decoration: none; background: var(--cor-superficie-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); transition: background var(--transicao), border-color var(--transicao); }
.atalho:hover { background: var(--cor-marca-suave); border-color: var(--cor-marca-texto); }
.atalho svg { width: 1.5rem; height: 1.5rem; color: var(--cor-marca-texto); }
.resumo-linha { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-3); text-align: center; }
.resumo-linha a { color: inherit; text-decoration: none; }
.resumo-linha .metrica { font-size: var(--titulo-1); }
.alinha-inicio { align-self: start; }

/* ===================================================================
   RELATORIOS E CONFIGURACOES
   =================================================================== */
.periodos { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-3); }
.periodos .botao { min-height: var(--alvo); padding: 0 var(--esp-3); font-size: var(--texto-p); }
.filtro-periodo { grid-template-columns: 1fr 1fr; }
.filtro-periodo .botao { grid-column: 1 / -1; }
@media (min-width: 48rem) { .filtro-periodo { grid-template-columns: auto auto auto; justify-content: start; } .filtro-periodo .botao { grid-column: auto; } }
.estoque-baixo { color: var(--cor-alerta); font-weight: var(--peso-forte); }
.estoque-baixo .ponto { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--cor-alerta); margin-right: 0.4rem; }
.mov-entrada { color: var(--cor-sucesso); font-weight: var(--peso-forte); }
.mov-saida { color: var(--cor-erro); font-weight: var(--peso-forte); }
.item-produto.alerta { background: var(--cor-alerta-fundo); }

.campo-cor { display: flex; align-items: center; gap: var(--esp-3); font-weight: var(--peso-normal); }
.campo-cor input[type="color"] { width: 5rem; min-height: var(--alvo); padding: 0.2rem; }
.logo-previa { border-radius: var(--raio-g); background: var(--cor-superficie); border: 1px solid var(--cor-borda); vertical-align: middle; margin-right: var(--esp-3); object-fit: contain; }
.opcoes-tema { display: grid; gap: var(--esp-1); padding: 0; border: 0; }
.opcoes-tema label { flex-direction: row; }
.paletas { display: grid; gap: var(--esp-2); grid-template-columns: 1fr; padding: 0; border: 0; }
@media (min-width: 40rem) { .paletas { grid-template-columns: repeat(3, 1fr); } }
.paleta { position: relative; display: block; cursor: pointer; }
.paleta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.paleta-corpo { display: flex; align-items: center; gap: var(--esp-3); min-height: 3.5rem; padding: var(--esp-2) var(--esp-3); font-weight: var(--peso-medio); background: var(--cor-superficie); border: 2px solid var(--cor-borda); border-radius: var(--raio-m); }
.paleta input:checked + .paleta-corpo { border-color: var(--marca-primaria); background: var(--cor-marca-suave); }
.paleta input:focus-visible + .paleta-corpo { outline: var(--largura-foco) solid var(--cor-foco); outline-offset: 2px; }
.paleta-corpo small { display: block; font-weight: var(--peso-normal); }
.amostra { display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--cor-borda-forte); }
.amostra-classica { background: linear-gradient(90deg, #c9a24a 50%, #a6283a 50%); }
.amostra-moderna { background: linear-gradient(90deg, #0f766e 50%, #c2410c 50%); }
.amostra-livre { background: linear-gradient(90deg, var(--marca-primaria) 50%, var(--marca-secundaria) 50%); }
.previa-marca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }

/* ===================================================================
   LOGIN, OFFLINE E ERROS
   =================================================================== */
.tela-login { display: grid; place-items: center; min-height: 100vh; padding: var(--esp-4); }
.tela-login main { width: 100%; max-width: 26rem; }
.tela-login .cartao { padding: var(--esp-5); }
.tela-login .marca { display: grid; justify-items: center; gap: var(--esp-2); margin-bottom: var(--esp-5); text-align: center; }
.tela-login .marca img { width: 6rem; height: 6rem; border-radius: var(--raio-g); object-fit: contain; background: var(--cor-superficie); }
.tela-login .marca strong { font-size: var(--titulo-3); }
.tela-login .botao { width: 100%; }
.cartao-erro { text-align: center; max-width: 32rem; margin: var(--esp-6) auto; }
.codigo-erro { font-size: 3rem; font-weight: var(--peso-forte); color: var(--cor-texto-suave); margin: 0; line-height: 1; }

/* ===================================================================
   PAGINA PUBLICA DE AGENDAMENTO (/agendar)
   =================================================================== */
.publico { min-height: 100vh; background: var(--cor-fundo); }
.publico-topo { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.publico-topo .marca-nome { padding: 0; min-width: 0; }
.publico-topo .contato { margin-left: auto; font-size: var(--texto-pp); text-align: right; color: var(--cor-texto-suave); }
.publico-faixa { padding: var(--esp-5) var(--esp-4); color: var(--marca-sobre-primaria); background: var(--marca-primaria); }
.publico-faixa h1 { font-size: var(--titulo-1); }
.publico-faixa p { max-width: 40rem; margin: var(--esp-1) 0 0; font-size: var(--texto-g); }
.publico-faixa > div, .publico-corpo { max-width: 60rem; margin: 0 auto; }
.publico-corpo { padding: var(--esp-4); padding-bottom: var(--esp-7); }
.rodape { font-size: var(--texto-pp); color: var(--cor-texto-suave); text-align: center; padding: var(--esp-4) var(--esp-4) var(--esp-6); }

.passos { display: flex; gap: var(--esp-1); margin: 0 0 var(--esp-4); padding: 0; list-style: none; overflow-x: auto; }
.passos li { display: flex; flex: 1 0 auto; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-3); font-size: var(--texto-p); font-weight: var(--peso-medio); color: var(--cor-texto-suave); white-space: nowrap; border-bottom: 3px solid var(--cor-borda); }
.passos .numero { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; font-size: var(--texto-pp); font-weight: var(--peso-forte); line-height: 1; color: var(--cor-texto-suave); border: 2px solid var(--cor-borda-forte); border-radius: 50%; }
.passos .numero svg { width: 1rem; height: 1rem; }
.passos li[aria-current="step"] { color: var(--cor-texto); border-bottom-color: var(--marca-secundaria); }
.passos li[aria-current="step"] .numero { color: var(--marca-sobre-secundaria); background: var(--marca-secundaria); border-color: var(--marca-secundaria); }
.passos li.feito { color: var(--cor-texto); border-bottom-color: var(--marca-primaria); }
.passos li.feito .numero { color: var(--marca-sobre-primaria); background: var(--marca-primaria); border-color: var(--marca-primaria); }
@media (max-width: 39.99rem) {
  .passos li { padding: 0 var(--esp-2); }
  .passos li:not([aria-current="step"]) .texto-passo { display: none; }
}

.reserva { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; align-items: start; }
.reserva > form { min-width: 0; }
.reserva h2 { margin: 0 0 var(--esp-3); font-size: var(--titulo-2); }
.reserva h3 { margin: var(--esp-4) 0 var(--esp-2); font-size: var(--texto-g); }
.reserva-resumo { position: sticky; top: var(--esp-4); }
@media (min-width: 60rem) { .reserva { grid-template-columns: 1fr 19rem; } }

.opcoes { display: grid; gap: var(--esp-3); margin: 0 0 var(--esp-4); padding: 0; border: 0; }
.opcao { position: relative; display: block; font-weight: var(--peso-normal); }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao-corpo { display: flex; align-items: center; gap: var(--esp-3); min-height: 4.25rem; padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie); border: 2px solid var(--cor-borda); border-radius: var(--raio-g); transition: border-color var(--transicao), background var(--transicao); }
.opcao:hover .opcao-corpo { border-color: var(--cor-borda-forte); }
.opcao input:checked + .opcao-corpo { border-color: var(--marca-primaria); background: var(--cor-marca-suave); box-shadow: 0 0 0 1px var(--marca-primaria); }
.opcao input:focus-visible + .opcao-corpo { outline: var(--largura-foco) solid var(--cor-foco); outline-offset: 2px; }
.opcao-corpo .info { flex: 1; min-width: 0; }
.opcao-corpo .info strong { display: block; font-size: var(--texto-m); }
.opcao-corpo .info span { font-size: var(--texto-p); color: var(--cor-texto-suave); }
.opcao-corpo .preco { font-size: var(--texto-g); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.opcao-marca { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; color: transparent; border: 2px solid var(--cor-borda-forte); border-radius: 50%; }
.opcao-marca svg { width: 0.9rem; height: 0.9rem; }
.opcao input:checked + .opcao-corpo .opcao-marca { color: var(--marca-sobre-primaria); background: var(--marca-primaria); border-color: var(--marca-primaria); }

.dias-campo { margin-bottom: var(--esp-3); }
.dias { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-2); padding-bottom: var(--esp-2); overflow-x: auto; }
.dia-opcao { position: relative; flex: none; font-weight: var(--peso-normal); }
.dia-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dia-opcao input:disabled { cursor: not-allowed; }
.dia-corpo { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4.5rem; min-height: 4.75rem; background: var(--cor-superficie); border: 2px solid var(--cor-borda); border-radius: var(--raio-g); }
.dia-corpo small { font-size: var(--texto-pp); font-weight: var(--peso-medio); text-transform: uppercase; color: var(--cor-texto-suave); }
.dia-corpo strong { font-size: var(--titulo-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dia-corpo .mes { font-size: 0.6875rem; text-transform: none; }
.dia-opcao input:checked + .dia-corpo { color: var(--marca-sobre-secundaria); background: var(--marca-secundaria); border-color: var(--marca-secundaria); }
.dia-opcao input:checked + .dia-corpo small { color: inherit; }
.dia-opcao input:disabled + .dia-corpo { opacity: 0.55; background: var(--cor-superficie-2); }
.dia-opcao input:focus-visible + .dia-corpo { outline: var(--largura-foco) solid var(--cor-foco); outline-offset: 2px; }

.periodo { margin: var(--esp-4) 0 var(--esp-2); font-size: var(--texto-p); font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-2); }
.horario-opcao { position: relative; display: block; font-weight: var(--peso-normal); }
.horario-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.horario-corpo { display: flex; align-items: center; justify-content: center; min-height: var(--alvo); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; background: var(--cor-superficie); border: 2px solid var(--cor-borda-forte); border-radius: var(--raio-m); }
.horario-opcao input:checked + .horario-corpo { color: var(--marca-sobre-primaria); background: var(--marca-primaria); border-color: var(--marca-primaria); }
.horario-opcao input:focus-visible + .horario-corpo { outline: var(--largura-foco) solid var(--cor-foco); outline-offset: 2px; }

.reserva-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; padding-top: var(--esp-2); }
.reserva-acoes .botao { flex: 1; min-width: 12rem; }
.resumo-lista { margin: 0 0 var(--esp-3); padding: 0; list-style: none; }
.resumo-lista li { display: flex; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-2) 0; border-bottom: 1px solid var(--cor-borda); font-size: var(--texto-p); }
.resumo-lista li span { color: var(--cor-texto-suave); }
.resumo-lista li strong { text-align: right; }
.resumo-total { display: flex; justify-content: space-between; font-size: var(--texto-g); font-weight: var(--peso-forte); }
.confirmacao { text-align: center; }
.confirmacao-icone { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--esp-3); color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-radius: 50%; }
.confirmacao-icone svg { width: 2.5rem; height: 2.5rem; }
.confirmacao .resumo-lista { max-width: 24rem; margin: var(--esp-4) auto; text-align: left; }
.confirmacao .vazio-acoes { margin-top: var(--esp-4); }
.aviso-privacidade { border: 1px solid var(--cor-borda); border-radius: var(--raio-m); padding: var(--esp-2) var(--esp-4); background: var(--cor-superficie); }
.aviso-privacidade summary { cursor: pointer; font-weight: var(--peso-medio); min-height: 2.5rem; display: flex; align-items: center; }
.aviso-privacidade p { margin: var(--esp-2) 0 var(--esp-2); font-size: var(--texto-p); }
.campo-isca { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.situacao-online { font-weight: var(--peso-forte); }
.situacao-online.ok { color: var(--cor-sucesso); }
.form-cancelar { margin-bottom: var(--esp-4); }

/* ===================================================================
   FASE C: estoque no atendimento, comissoes, fidelidade, mensagens,
   fiscal, unidades, segundo fator e aplicativo
   =================================================================== */
.botao-pequeno { min-height: 2.25rem; min-width: 2.25rem; padding: 0 var(--esp-3); font-size: var(--texto-p); }
form.inline { display: inline-grid; margin-left: var(--esp-2); vertical-align: middle; }
.lista-simples > li.ficha-linha { display: flex; justify-content: space-between; gap: var(--esp-3); align-items: center; flex-wrap: wrap; }
.lista-simples > li.ficha-linha > span:first-child { flex: 1 1 12rem; }
.lista-quantidades { display: grid; gap: var(--esp-2); }
.linha-quantidade { display: grid; grid-template-columns: 1fr 6rem; gap: var(--esp-3); align-items: center; padding: var(--esp-2) 0; border-bottom: 1px solid var(--cor-borda); font-weight: var(--peso-normal); }
.linha-quantidade:last-child { border-bottom: 0; }
.linha-quantidade input { text-align: right; }
.form-venda { margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda); }
.form-venda .linha-campos { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 40rem) { .form-venda .linha-campos { grid-template-columns: 1fr; } }
.negativo { color: var(--cor-erro); font-weight: var(--peso-forte); }
.codigo-grande { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--texto-g); letter-spacing: 0.12em; word-break: break-all; padding: var(--esp-3); background: var(--cor-superficie-2); border-radius: var(--raio-m); }
.lista-codigos { columns: 2; list-style: none; padding: 0; margin: 0 0 var(--esp-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lista-codigos li { padding: var(--esp-1) 0; break-inside: avoid; }
.qr-codigo { display: block; width: min(16rem, 100%); height: auto; margin: 0 auto var(--esp-3); background: #fff; padding: var(--esp-2); border-radius: var(--raio-m); }
.qr-codigo svg { display: block; width: 100%; height: auto; }
.seletor-unidade { display: flex; gap: var(--esp-2); align-items: center; padding: var(--esp-2) var(--esp-3); }
.seletor-unidade label { display: flex; align-items: center; gap: var(--esp-2); flex: 1; min-width: 0; font-weight: var(--peso-medio); }
.seletor-unidade label svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--cor-marca-texto); }
.seletor-unidade select { min-height: 2.5rem; padding: 0 var(--esp-2); font-size: var(--texto-p); }
.menu-lateral .seletor-unidade { border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--esp-2); }
.cabeca-pagina .seletor-unidade { padding: 0; margin-left: auto; }
.unidade-atual { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: var(--esp-2); color: var(--cor-texto-suave); }
.unidade-atual svg { width: 0.9rem; height: 0.9rem; }
.etiqueta-unidade { background: var(--cor-marca-suave); color: var(--cor-marca-texto); }
/* Cartao "Use como aplicativo" (tela inicial), discreto e dispensavel */
.cartao-instalar { border-style: dashed; margin-top: var(--esp-4); }
.cartao-instalar details { margin: var(--esp-2) 0; }
.cartao-instalar summary { cursor: pointer; font-weight: var(--peso-forte); }
.cartao-instalar ol { margin: var(--esp-2) 0 0 var(--esp-4); }
.cartao-instalar .linha-botoes { margin-top: var(--esp-3); }
.alertas .nivel-ok { color: var(--cor-sucesso); }
/* Notas fiscais */
.situacao-nota-pendente { color: var(--cor-alerta); background: var(--cor-alerta-fundo); }
.situacao-nota-emitida { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.situacao-nota-erro { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.situacao-nota-cancelada { color: var(--cor-texto-suave); background: var(--cor-superficie-2); }

/* ===================================================================
   FASE D: AREA DO CLIENTE (aplicativo do cliente final)
   Casca propria: topo com a marca, menu no topo no computador e barra
   inferior no celular. Reaproveita cartoes, botoes, avisos e listas.
   =================================================================== */
.cliente { min-height: 100vh; background: var(--cor-fundo); }
.cliente-topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 3.5rem;
  padding: var(--esp-2) var(--esp-4);
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent);
  border-bottom: 1px solid var(--cor-borda);
  backdrop-filter: blur(8px);
}
.cliente-topo .marca-nome { padding: 0; min-width: 0; flex: 1; }
.cliente-nav { display: none; gap: var(--esp-1); }
.cliente-nav a { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); padding: 0 var(--esp-3); font-size: var(--texto-p); font-weight: var(--peso-medio); color: var(--cor-texto); text-decoration: none; border-radius: var(--raio-m); }
.cliente-nav a svg { width: 1.25rem; height: 1.25rem; color: var(--cor-texto-suave); }
.cliente-nav a:hover { background: var(--cor-superficie-2); }
.cliente-nav a[aria-current="page"] { color: var(--cor-marca-texto); background: var(--cor-marca-suave); }
.cliente-nav a[aria-current="page"] svg { color: inherit; }
.cliente-corpo { padding: var(--esp-4); padding-bottom: calc(var(--altura-barra-inferior) + var(--esp-6)); max-width: 60rem; margin: 0 auto; }
.cliente-corpo > h1 { margin: 0 0 var(--esp-4); font-size: var(--titulo-2); }
.cliente-corpo > h2 { margin: var(--esp-5) 0 var(--esp-3); font-size: var(--titulo-3); }
.cliente-rodape { padding: var(--esp-4) var(--esp-4) calc(var(--altura-barra-inferior) + var(--esp-4)); font-size: var(--texto-pp); color: var(--cor-texto-suave); text-align: center; }
.barra-2 { grid-template-columns: repeat(2, 1fr); }
.barra-3 { grid-template-columns: repeat(3, 1fr); }
.barra-5 { grid-template-columns: repeat(5, 1fr); }
@media (min-width: 62rem) {
  .cliente-nav { display: flex; }
  .cliente-corpo { padding: var(--esp-5) var(--esp-6) var(--esp-7); }
  .cliente-rodape { padding-bottom: var(--esp-6); }
}
.boas-vindas p { margin: 0 0 var(--esp-2); font-size: var(--texto-g); }
.boas-vindas .cliente-unidade-info { font-size: var(--texto-p); opacity: 0.92; }
.boas-vindas .cliente-unidade-info a { color: inherit; }
.boas-vindas .linha-botoes { margin-top: var(--esp-3); }
.boas-vindas .botao-secundario { color: var(--marca-sobre-primaria); border-color: var(--marca-sobre-primaria); background: transparent; }
.cliente-unidade-info { margin: 0 0 var(--esp-3); color: var(--cor-texto-suave); font-size: var(--texto-p); }
.cliente-unidades { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0 0 var(--esp-4); }
.cliente-unidades a[aria-current="true"] { color: var(--marca-sobre-primaria); background: var(--marca-primaria); border-color: var(--marca-primaria); }
.servicos-lista { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.servico-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.servico-info { flex: 1 1 14rem; min-width: 0; }
.servico-info strong { display: block; font-size: var(--texto-m); }
.servico-info p { margin: var(--esp-1) 0; font-size: var(--texto-p); color: var(--cor-texto-suave); }
.servico-meta { font-size: var(--texto-pp); color: var(--cor-texto-suave); }
.servico-lado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-left: auto; }
.servico-lado .preco { font-size: var(--texto-g); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.etiqueta-balcao { text-transform: none; letter-spacing: 0; font-weight: var(--peso-medio); white-space: nowrap; }
.planos-grade { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .planos-grade { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.plano-cartao { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-5); background: var(--cor-superficie); border: 2px solid var(--cor-borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.plano-cartao h3 { margin: 0; font-size: var(--titulo-3); }
.plano-cartao p { margin: 0; }
.plano-cartao.plano-destaque { border-color: var(--marca-secundaria); box-shadow: 0 0 0 1px var(--marca-secundaria), var(--sombra-2); }
.plano-cartao .etiqueta-destaque { background: var(--marca-secundaria); color: var(--marca-sobre-secundaria); margin-left: 0.4rem; }
.plano-valor { color: var(--cor-texto-suave); font-size: var(--texto-p); }
.plano-valor strong { font-size: var(--titulo-2); color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.plano-cartao .lista-simples > li { padding: var(--esp-2) 0; font-size: var(--texto-p); }
.plano-cartao .botao { margin-top: auto; }
.cliente-instalar-dica { margin-top: var(--esp-6); text-align: center; }
.cliente .cartao-instalar { border-style: solid; margin-top: 0; }
.boas-vindas .boas-vindas-nome { font-size: var(--titulo-3); font-weight: var(--peso-forte); margin-bottom: var(--esp-1); }
/* Telas de entrada da conta do cliente (entrar, criar conta, senha) */
.cliente.tela-login .marca a { display: block; line-height: 0; }
.cliente.tela-login h1 { font-size: var(--titulo-3); margin: 0 0 var(--esp-4); text-align: center; }
.cliente.tela-login .caixa { margin-bottom: var(--esp-4); }
.cliente.tela-login .aviso-privacidade { margin-bottom: var(--esp-3); }
.entrada-links { margin: var(--esp-4) 0 0; text-align: center; font-size: var(--texto-p); }
.entrada-links span { color: var(--cor-texto-suave); margin: 0 var(--esp-1); }
.entrada-biometria { margin-top: var(--esp-3); }
.tela-login .entrada-biometria .botao { width: 100%; }
.entrada-biometria .aviso { margin-top: var(--esp-3); }
.biometria-registro { margin-top: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--cor-borda); }
.biometria-registro .aviso { margin-top: var(--esp-3); }
/* Lado da barbearia: ficha do cliente (convite, mesclar) */
.mesclar-fichas { margin-top: var(--esp-3); }
.mesclar-fichas summary { cursor: pointer; font-weight: var(--peso-medio); min-height: 2.5rem; display: flex; align-items: center; }
.mesclar-fichas form { margin-top: var(--esp-2); }
/* Aplicativo do cliente logado: inicio, agendamentos, plano, fidelidade */
.grade-inicio { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; margin-top: var(--esp-4); }
@media (min-width: 48rem) { .grade-inicio { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.grade-inicio > .cartao { margin: 0; }
.proximo-quando { font-size: var(--texto-g); }
.proximo-quando strong { font-size: var(--titulo-3); }
.cliente .cartao-destaque .botao-secundario { color: var(--marca-sobre-primaria); border-color: var(--marca-sobre-primaria); background: transparent; }
.fidelidade-saldo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2); margin: 0 0 var(--esp-2); font-size: var(--texto-g); }
.fidelidade-saldo strong { font-size: var(--numero-grande); line-height: 1; font-variant-numeric: tabular-nums; }
.fidelidade-saldo .selos { color: var(--cor-texto-suave); font-size: var(--texto-p); }
.cliente .agenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.cliente .item-lista { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); color: inherit; text-decoration: none; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.cliente .item-lista:hover { border-color: var(--cor-borda-forte); }
.cliente .item-lista .horario { display: flex; flex-direction: column; min-width: 5.5rem; font-variant-numeric: tabular-nums; }
.cliente .item-lista .horario strong { font-size: var(--texto-m); }
.cliente .item-lista .horario small { color: var(--cor-texto-suave); }
.cliente .item-lista .detalhes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cliente .item-lista .detalhes span { font-size: var(--texto-p); color: var(--cor-texto-suave); }
.cliente .item-lista .situacao { flex: none; }
.cliente .situacao { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--texto-pp); font-weight: var(--peso-medio); padding: 0.15rem 0.6rem; border-radius: var(--raio-total); background: var(--cor-superficie-2); }
.cliente .situacao svg { width: 0.9rem; height: 0.9rem; }
.cliente .situacao-concluido { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
.cliente .situacao-cancelado { color: var(--cor-erro); background: var(--cor-erro-fundo); }
.cliente .situacao-faltou { color: var(--cor-alerta); background: var(--cor-alerta-fundo); }
.cliente .situacao-agendado { color: var(--cor-info); background: var(--cor-info-fundo); }
.cliente .confirmacao .linha-botoes { justify-content: center; margin-top: var(--esp-3); }
.cliente .confirmacao .linha-botoes form { display: inline-block; }

/* ===================================================================
   POSICOES (geradas): largura de barra, colunas e linhas da agenda
   =================================================================== */
/* largura de barra de 0 a 100 por cento */
.pct-0{width:0%}
.pct-1{width:1%}
.pct-2{width:2%}
.pct-3{width:3%}
.pct-4{width:4%}
.pct-5{width:5%}
.pct-6{width:6%}
.pct-7{width:7%}
.pct-8{width:8%}
.pct-9{width:9%}
.pct-10{width:10%}
.pct-11{width:11%}
.pct-12{width:12%}
.pct-13{width:13%}
.pct-14{width:14%}
.pct-15{width:15%}
.pct-16{width:16%}
.pct-17{width:17%}
.pct-18{width:18%}
.pct-19{width:19%}
.pct-20{width:20%}
.pct-21{width:21%}
.pct-22{width:22%}
.pct-23{width:23%}
.pct-24{width:24%}
.pct-25{width:25%}
.pct-26{width:26%}
.pct-27{width:27%}
.pct-28{width:28%}
.pct-29{width:29%}
.pct-30{width:30%}
.pct-31{width:31%}
.pct-32{width:32%}
.pct-33{width:33%}
.pct-34{width:34%}
.pct-35{width:35%}
.pct-36{width:36%}
.pct-37{width:37%}
.pct-38{width:38%}
.pct-39{width:39%}
.pct-40{width:40%}
.pct-41{width:41%}
.pct-42{width:42%}
.pct-43{width:43%}
.pct-44{width:44%}
.pct-45{width:45%}
.pct-46{width:46%}
.pct-47{width:47%}
.pct-48{width:48%}
.pct-49{width:49%}
.pct-50{width:50%}
.pct-51{width:51%}
.pct-52{width:52%}
.pct-53{width:53%}
.pct-54{width:54%}
.pct-55{width:55%}
.pct-56{width:56%}
.pct-57{width:57%}
.pct-58{width:58%}
.pct-59{width:59%}
.pct-60{width:60%}
.pct-61{width:61%}
.pct-62{width:62%}
.pct-63{width:63%}
.pct-64{width:64%}
.pct-65{width:65%}
.pct-66{width:66%}
.pct-67{width:67%}
.pct-68{width:68%}
.pct-69{width:69%}
.pct-70{width:70%}
.pct-71{width:71%}
.pct-72{width:72%}
.pct-73{width:73%}
.pct-74{width:74%}
.pct-75{width:75%}
.pct-76{width:76%}
.pct-77{width:77%}
.pct-78{width:78%}
.pct-79{width:79%}
.pct-80{width:80%}
.pct-81{width:81%}
.pct-82{width:82%}
.pct-83{width:83%}
.pct-84{width:84%}
.pct-85{width:85%}
.pct-86{width:86%}
.pct-87{width:87%}
.pct-88{width:88%}
.pct-89{width:89%}
.pct-90{width:90%}
.pct-91{width:91%}
.pct-92{width:92%}
.pct-93{width:93%}
.pct-94{width:94%}
.pct-95{width:95%}
.pct-96{width:96%}
.pct-97{width:97%}
.pct-98{width:98%}
.pct-99{width:99%}
.pct-100{width:100%}
/* colunas da grade da agenda */
.cols-1{--colunas:1}
.cols-2{--colunas:2}
.cols-3{--colunas:3}
.cols-4{--colunas:4}
.cols-5{--colunas:5}
.cols-6{--colunas:6}
.cols-7{--colunas:7}
.cols-8{--colunas:8}
.cols-9{--colunas:9}
.cols-10{--colunas:10}
.cols-11{--colunas:11}
.cols-12{--colunas:12}
/* linha inicial na grade (passo de 15 minutos; 96 = dia inteiro) */
.ini-1{grid-row-start:1}
.ini-2{grid-row-start:2}
.ini-3{grid-row-start:3}
.ini-4{grid-row-start:4}
.ini-5{grid-row-start:5}
.ini-6{grid-row-start:6}
.ini-7{grid-row-start:7}
.ini-8{grid-row-start:8}
.ini-9{grid-row-start:9}
.ini-10{grid-row-start:10}
.ini-11{grid-row-start:11}
.ini-12{grid-row-start:12}
.ini-13{grid-row-start:13}
.ini-14{grid-row-start:14}
.ini-15{grid-row-start:15}
.ini-16{grid-row-start:16}
.ini-17{grid-row-start:17}
.ini-18{grid-row-start:18}
.ini-19{grid-row-start:19}
.ini-20{grid-row-start:20}
.ini-21{grid-row-start:21}
.ini-22{grid-row-start:22}
.ini-23{grid-row-start:23}
.ini-24{grid-row-start:24}
.ini-25{grid-row-start:25}
.ini-26{grid-row-start:26}
.ini-27{grid-row-start:27}
.ini-28{grid-row-start:28}
.ini-29{grid-row-start:29}
.ini-30{grid-row-start:30}
.ini-31{grid-row-start:31}
.ini-32{grid-row-start:32}
.ini-33{grid-row-start:33}
.ini-34{grid-row-start:34}
.ini-35{grid-row-start:35}
.ini-36{grid-row-start:36}
.ini-37{grid-row-start:37}
.ini-38{grid-row-start:38}
.ini-39{grid-row-start:39}
.ini-40{grid-row-start:40}
.ini-41{grid-row-start:41}
.ini-42{grid-row-start:42}
.ini-43{grid-row-start:43}
.ini-44{grid-row-start:44}
.ini-45{grid-row-start:45}
.ini-46{grid-row-start:46}
.ini-47{grid-row-start:47}
.ini-48{grid-row-start:48}
.ini-49{grid-row-start:49}
.ini-50{grid-row-start:50}
.ini-51{grid-row-start:51}
.ini-52{grid-row-start:52}
.ini-53{grid-row-start:53}
.ini-54{grid-row-start:54}
.ini-55{grid-row-start:55}
.ini-56{grid-row-start:56}
.ini-57{grid-row-start:57}
.ini-58{grid-row-start:58}
.ini-59{grid-row-start:59}
.ini-60{grid-row-start:60}
.ini-61{grid-row-start:61}
.ini-62{grid-row-start:62}
.ini-63{grid-row-start:63}
.ini-64{grid-row-start:64}
.ini-65{grid-row-start:65}
.ini-66{grid-row-start:66}
.ini-67{grid-row-start:67}
.ini-68{grid-row-start:68}
.ini-69{grid-row-start:69}
.ini-70{grid-row-start:70}
.ini-71{grid-row-start:71}
.ini-72{grid-row-start:72}
.ini-73{grid-row-start:73}
.ini-74{grid-row-start:74}
.ini-75{grid-row-start:75}
.ini-76{grid-row-start:76}
.ini-77{grid-row-start:77}
.ini-78{grid-row-start:78}
.ini-79{grid-row-start:79}
.ini-80{grid-row-start:80}
.ini-81{grid-row-start:81}
.ini-82{grid-row-start:82}
.ini-83{grid-row-start:83}
.ini-84{grid-row-start:84}
.ini-85{grid-row-start:85}
.ini-86{grid-row-start:86}
.ini-87{grid-row-start:87}
.ini-88{grid-row-start:88}
.ini-89{grid-row-start:89}
.ini-90{grid-row-start:90}
.ini-91{grid-row-start:91}
.ini-92{grid-row-start:92}
.ini-93{grid-row-start:93}
.ini-94{grid-row-start:94}
.ini-95{grid-row-start:95}
.ini-96{grid-row-start:96}
.ini-97{grid-row-start:97}
/* duracao em passos de 15 minutos */
.dur-1{grid-row-end:span 1}
.dur-2{grid-row-end:span 2}
.dur-3{grid-row-end:span 3}
.dur-4{grid-row-end:span 4}
.dur-5{grid-row-end:span 5}
.dur-6{grid-row-end:span 6}
.dur-7{grid-row-end:span 7}
.dur-8{grid-row-end:span 8}
.dur-9{grid-row-end:span 9}
.dur-10{grid-row-end:span 10}
.dur-11{grid-row-end:span 11}
.dur-12{grid-row-end:span 12}
.dur-13{grid-row-end:span 13}
.dur-14{grid-row-end:span 14}
.dur-15{grid-row-end:span 15}
.dur-16{grid-row-end:span 16}
.dur-17{grid-row-end:span 17}
.dur-18{grid-row-end:span 18}
.dur-19{grid-row-end:span 19}
.dur-20{grid-row-end:span 20}
.dur-21{grid-row-end:span 21}
.dur-22{grid-row-end:span 22}
.dur-23{grid-row-end:span 23}
.dur-24{grid-row-end:span 24}
.dur-25{grid-row-end:span 25}
.dur-26{grid-row-end:span 26}
.dur-27{grid-row-end:span 27}
.dur-28{grid-row-end:span 28}
.dur-29{grid-row-end:span 29}
.dur-30{grid-row-end:span 30}
.dur-31{grid-row-end:span 31}
.dur-32{grid-row-end:span 32}
.dur-33{grid-row-end:span 33}
.dur-34{grid-row-end:span 34}
.dur-35{grid-row-end:span 35}
.dur-36{grid-row-end:span 36}
.dur-37{grid-row-end:span 37}
.dur-38{grid-row-end:span 38}
.dur-39{grid-row-end:span 39}
.dur-40{grid-row-end:span 40}
.dur-41{grid-row-end:span 41}
.dur-42{grid-row-end:span 42}
.dur-43{grid-row-end:span 43}
.dur-44{grid-row-end:span 44}
.dur-45{grid-row-end:span 45}
.dur-46{grid-row-end:span 46}
.dur-47{grid-row-end:span 47}
.dur-48{grid-row-end:span 48}
.dur-49{grid-row-end:span 49}
.dur-50{grid-row-end:span 50}
.dur-51{grid-row-end:span 51}
.dur-52{grid-row-end:span 52}
.dur-53{grid-row-end:span 53}
.dur-54{grid-row-end:span 54}
.dur-55{grid-row-end:span 55}
.dur-56{grid-row-end:span 56}
.dur-57{grid-row-end:span 57}
.dur-58{grid-row-end:span 58}
.dur-59{grid-row-end:span 59}
.dur-60{grid-row-end:span 60}
.dur-61{grid-row-end:span 61}
.dur-62{grid-row-end:span 62}
.dur-63{grid-row-end:span 63}
.dur-64{grid-row-end:span 64}
.dur-65{grid-row-end:span 65}
.dur-66{grid-row-end:span 66}
.dur-67{grid-row-end:span 67}
.dur-68{grid-row-end:span 68}
.dur-69{grid-row-end:span 69}
.dur-70{grid-row-end:span 70}
.dur-71{grid-row-end:span 71}
.dur-72{grid-row-end:span 72}
.dur-73{grid-row-end:span 73}
.dur-74{grid-row-end:span 74}
.dur-75{grid-row-end:span 75}
.dur-76{grid-row-end:span 76}
.dur-77{grid-row-end:span 77}
.dur-78{grid-row-end:span 78}
.dur-79{grid-row-end:span 79}
.dur-80{grid-row-end:span 80}
.dur-81{grid-row-end:span 81}
.dur-82{grid-row-end:span 82}
.dur-83{grid-row-end:span 83}
.dur-84{grid-row-end:span 84}
.dur-85{grid-row-end:span 85}
.dur-86{grid-row-end:span 86}
.dur-87{grid-row-end:span 87}
.dur-88{grid-row-end:span 88}
.dur-89{grid-row-end:span 89}
.dur-90{grid-row-end:span 90}
.dur-91{grid-row-end:span 91}
.dur-92{grid-row-end:span 92}
.dur-93{grid-row-end:span 93}
.dur-94{grid-row-end:span 94}
.dur-95{grid-row-end:span 95}
.dur-96{grid-row-end:span 96}

/* Fase E: regras do cliente no painel. Horario dentro da antecedencia
   minima do cliente (so a barbearia marca nele) e o aviso discreto. */
.chips button.chip-proximo { border-style: dashed; }
.aviso-discreto { margin: var(--esp-1) 0 var(--esp-3); }
.nota-antecedencia { margin-top: var(--esp-2); }