/* ZENA: complementos do visual-base (style.css, o mesmo padrão do CLUBEpass) */
.logo { letter-spacing: .02em; }
.selo.solicitado, .selo.pendente { background: var(--amarelo-claro); color: var(--amarelo); }
.selo.confirmado, .selo.assinado, .selo.atendido, .selo.concluido { background: var(--ok-claro); color: var(--ok); }
.selo.faltou, .selo.vencido { background: var(--erro-claro); color: var(--erro); }
.selo.agendado { background: var(--marca-claro); color: var(--marca-texto); }
.selo.cancelado, .selo.estornado { opacity: .7; text-decoration: line-through; }
.cor-prof { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* agenda do dia: linhas = horários, colunas = profissionais */
.agenda-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.agenda-topo form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.agenda-topo input, .agenda-topo select { width: auto; margin: 0; }
.grade-agenda { overflow: auto; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; max-height: 75vh; }
.grade-agenda table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.grade-agenda th { position: sticky; top: 0; z-index: 2; background: var(--cartao); text-transform: none; font-size: .85rem; color: var(--texto);
  border-bottom: 2px solid var(--borda); min-width: 150px; }
.grade-agenda th.hora, .grade-agenda td.hora { position: sticky; left: 0; z-index: 1; background: var(--cartao); width: 58px; min-width: 58px;
  color: var(--suave); font-size: .8rem; font-variant-numeric: tabular-nums; padding: 2px 8px; }
.grade-agenda th.hora { z-index: 3; }
.grade-agenda td { padding: 0; height: 26px; border-bottom: 1px dashed var(--borda); border-left: 1px solid var(--borda); vertical-align: top; }
.grade-agenda tr.cheia td { border-bottom-style: solid; }
.grade-agenda td.fora { background: repeating-linear-gradient(45deg, transparent, transparent 6px,
  color-mix(in srgb, var(--borda) 45%, transparent) 6px, color-mix(in srgb, var(--borda) 45%, transparent) 7px); }
.grade-agenda a.livre { display: block; height: 100%; min-height: 26px; text-decoration: none; }
.grade-agenda a.livre:hover { background: var(--marca-claro); }
.grade-agenda a.livre:hover::after { content: "+"; display: block; text-align: center; color: var(--marca-texto); font-weight: 700; line-height: 26px; }
.ag { display: block; height: calc(100% - 4px); margin: 2px 4px; padding: 4px 8px; border-radius: 8px; text-decoration: none; color: var(--texto);
  background: color-mix(in srgb, var(--cor, var(--marca)) 14%, var(--cartao)); border-left: 4px solid var(--cor, var(--marca));
  font-size: .82rem; line-height: 1.25; overflow: hidden; }
.ag b { display: block; }
.ag small { color: var(--suave); display: block; }
.ag.solicitado { border-left-style: dashed; }
.ag.confirmado b::before { content: "✓ "; color: var(--ok); }
.ag.atendido { opacity: .6; }

/* horários livres (recepção e agendamento online) */
.horarios { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.horarios label { margin: 0; position: relative; }
.horarios input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.horarios .chip { display: inline-block; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--borda); background: var(--cartao);
  color: var(--texto); font-variant-numeric: tabular-nums; cursor: pointer; min-width: 64px; text-align: center; }
.horarios input:checked + .chip { background: var(--marca); color: #fff; border-color: var(--marca); }
.horarios input:focus-visible + .chip { outline: 2px solid var(--marca); outline-offset: 2px; }
.passos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; color: var(--suave); font-size: .9em; }
.passos .atual { color: var(--marca-texto); font-weight: 700; }
.servicos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 16px; }
.servicos-lista a { display: block; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
  text-decoration: none; color: var(--texto); }
.servicos-lista a:hover, .servicos-lista a.ativo { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.servicos-lista b { display: block; } .servicos-lista small { color: var(--suave); }

/* termos e assinatura */
.termo-texto { white-space: pre-wrap; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 16px;
  max-height: 55vh; overflow-y: auto; line-height: 1.55; margin-bottom: 14px; }
.quadro-assinatura { width: 100%; height: 200px; background: #fff; border: 2px dashed var(--borda); border-radius: 12px; touch-action: none; display: block; }
.assinatura-img { max-width: 320px; width: 100%; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 6px; }
.hash { font-family: ui-monospace, Consolas, monospace; font-size: .78em; word-break: break-all; color: var(--suave); }
.copiar { display: flex; gap: 8px; } .copiar input { margin: 0; }

/* prontuário */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo > li { border-left: 3px solid var(--marca); padding: 4px 0 16px 14px; position: relative; }
.linha-tempo > li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--marca); }
.linha-tempo dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: .92em; }
.linha-tempo dt { color: var(--suave); } .linha-tempo dd { margin: 0; white-space: pre-wrap; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.galeria figure { margin: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.galeria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--fundo); }
.galeria figcaption { padding: 6px 8px; font-size: .8em; color: var(--suave); }
.galeria .momento { font-weight: 700; text-transform: uppercase; font-size: .75em; color: var(--marca-texto); }
.respostas { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 0; margin: 0; }
.respostas dt, .respostas dd { padding: 8px 10px; border-bottom: 1px solid var(--borda); margin: 0; }
.respostas dt { color: var(--suave); } .respostas dd { white-space: pre-wrap; }
@media (max-width: 640px) { .respostas { grid-template-columns: 1fr; } .respostas dt { border-bottom: 0; padding-bottom: 0; } }
.aviso-lgpd { font-size: .85em; color: var(--suave); border-left: 3px solid var(--marca); padding-left: 10px; }

/* relatório: barras simples (entradas x saídas) */
.barras-mes { display: grid; gap: 8px; }
.barras-mes .mes { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; font-size: .85em; }
.barras-mes .par { display: grid; gap: 2px; }
.barras-mes .b { height: 10px; border-radius: 4px; min-width: 2px; }
.barras-mes .b.e { background: var(--serie-1); } .barras-mes .b.s { background: var(--serie-2); }
.legenda { display: flex; gap: 14px; font-size: .85em; color: var(--suave); margin-bottom: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

/* páginas públicas (agendamento online, confirmação, termo) */
.publico-topo { background: var(--marca); border-bottom: 4px solid var(--destaque); color: #fff; padding: 14px 16px; text-align: center;
  padding-top: max(14px, env(safe-area-inset-top)); }
.publico-topo b { font-size: 1.2rem; display: block; } .publico-topo small { opacity: .85; }
body.publico main { max-width: 720px; }

/* escolha de cliente com busca */
.cliente-busca { position: relative; }
.cliente-busca ul { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: -8px 0 0; padding: 4px; list-style: none; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; }
.cliente-busca ul[hidden] { display: none; }
.cliente-busca li button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; color: var(--texto);
  font: inherit; cursor: pointer; border-radius: 6px; }
.cliente-busca li button:hover, .cliente-busca li button:focus { background: var(--marca-claro); }
.escolhido { padding: 10px 12px; border-radius: 10px; background: var(--marca-claro); margin-bottom: 12px; display: flex;
  justify-content: space-between; gap: 8px; align-items: center; }
.contrato-modulos { display: grid; gap: 6px; margin: 8px 0 12px; }
.expediente td input { min-height: 36px; padding: 6px; width: 100%; max-width: 110px; }

/* logotipo do estabelecimento (marca.py): no lugar da sigla, no topo, no menu e nas páginas do cliente */
.logo.com-imagem { background: #fff; padding: 2px; border-radius: 8px; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; }
.logo.com-imagem img { max-width: 100%; max-height: 100%; display: block; }
.logo.com-imagem.grande { width: 110px; height: 110px; padding: 8px; border-radius: 16px; border: 1px solid var(--borda); }
.publico-logo { display: block; margin: 0 auto 6px; max-height: 64px; max-width: 180px; background: #fff; border-radius: 12px; padding: 4px; }
.previa-identidade { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }

/* marca d'água: logotipo em relevo, fixo no meio da área de conteúdo, por cima e sem pegar cliques (como no CLUBEpass) */
.marca-dagua { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; pointer-events: none;
  background-repeat: no-repeat; background-position: center 55%; opacity: var(--opacidade, .12);
  padding: max(6vh, calc((100vh - 720px) / 2)) max(6vw, calc((100% - 720px) / 2)); box-sizing: border-box;
  background-origin: content-box; background-clip: content-box; background-size: contain; }
body.com-lateral .marca-dagua { left: 240px; }
@media (max-width: 900px) { body.com-lateral .marca-dagua { left: 0; padding: 10vh 4vw; } }
@media (prefers-color-scheme: dark) { .marca-dagua { opacity: calc(var(--opacidade, .12) * .75); } }
@media print { .marca-dagua { display: none !important; } }
.marca-previa { background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.marca-previa img { display: block; max-width: 200px; margin: 0 auto; }

/* baixar o app (tela de entrada e /instalar) */
.instalar-app { margin-top: 16px; }
.instalar-app h3 { font-size: 1rem; margin: 14px 0 4px; }
.instalar-app ol { margin: 0; padding-left: 1.2em; } .instalar-app li { margin-bottom: 4px; }
.instalar-app .instalar-botao { width: 100%; margin: 6px 0 4px; }
.instalar-app [hidden] { display: none !important; }
.qr-instalar { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.qr-instalar .qr { width: 140px; flex: none; margin: 0; padding: 6px; }
.rodape .link-instalar[hidden] { display: none; }

/* paletas prontas de identidade visual (Configurações) */
.paletas { border: 1px solid var(--borda); border-radius: 12px; padding: 8px 12px 12px; margin: 6px 0 12px; }
.paletas legend { padding: 0 6px; color: var(--suave); font-size: .9em; }
.paletas-grupo { margin: 10px 0 6px; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.paletas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.paleta { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px;
  cursor: pointer; color: var(--texto); font-size: .9em; background: var(--cartao); position: relative; }
.paleta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paleta:has(input:checked) { border-color: var(--marca-texto); box-shadow: inset 0 0 0 1px var(--marca-texto); font-weight: 600; }
.paleta:has(input:focus-visible) { outline: 2px solid var(--marca-texto); outline-offset: 2px; }
.paleta-amostra { display: inline-flex; flex: none; border-radius: 99px; overflow: hidden; border: 1px solid var(--borda); }
.paleta-amostra i { display: block; width: 18px; height: 22px; }
.previa-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px;
  background: var(--marca); border-bottom: 4px solid var(--destaque); color: #fff; }
.previa-topo .logo { background: #fff; color: var(--marca); }
.previa-topo .previa-botao { margin-left: auto; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); border-radius: 8px; padding: 3px 10px; font-size: .85em; }
.previa-topo .contador { margin-left: 0; }
.previa-topo.clara-demais::after { content: "clara demais"; font-size: .75em; background: var(--erro-claro); color: var(--erro); border-radius: 6px; padding: 2px 6px; }

/* letras mescladas (Configurações → Dados e aparência): fontes de licença livre (SIL OFL) servidas pelo próprio ZENA */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/playfair-display-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(fonts/playfair-display-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/playfair-display-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(fonts/lora-latin-400-italic.woff2) format("woff2"); }

/* títulos e itens (menu, grupos, seções, cabeçalhos de tabela) usam as fontes escolhidas; sem escolha (padrão), tudo
   segue a fonte do sistema */
h1, h2, h3, h4, legend, th, .marca, .menu a, .menu summary, details > summary, .titulo-cartao, .publico-topo b,
.servicos-lista b, .previa-letras .t { font-family: var(--fonte-titulo, inherit); }
h1, h2, h3 { font-weight: 600; }
h1 small, .publico-topo small, .servicos-lista small, .home-intro, .subtitulo, .previa-letras .s {
  font-family: var(--fonte-subtitulo, inherit); font-style: var(--estilo-subtitulo, normal); }

/* escolha das letras: cada opção mostra um título e um subtítulo de exemplo na própria fonte */
.letras-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.letras { display: block; margin: 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer;
  color: var(--texto); background: var(--cartao); position: relative; }
.letras input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.letras:has(input:checked) { border-color: var(--marca-texto); box-shadow: inset 0 0 0 1px var(--marca-texto); }
.letras:has(input:focus-visible) { outline: 2px solid var(--marca-texto); outline-offset: 2px; }
.letras .nome { display: block; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin-bottom: 4px; }
.previa-letras .t { display: block; font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.previa-letras .s { display: block; font-size: .9rem; color: var(--suave); margin-top: 3px; }