/* ====== Página pública de agendamento (a cliente agenda pelo celular) ======
   Usa os mesmos tokens do app.css; a cor principal vem do studio (partials/cores_marca.html). */
body.publico { padding-bottom: 0; background: var(--fundo); }
.pub-topo { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha); }
.pub-topo .container { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
.pub-marca { display: flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; font-family: var(--fonte-titulo);
  font-weight: 600; font-size: 1.05rem; min-width: 0; }
.pub-marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-marca img { height: 38px; width: 38px; object-fit: contain; border-radius: 10px; flex: none; }
.pub-main { max-width: 600px; padding-top: 1.2rem; }
.pub-rodape { max-width: 600px; font-size: .85rem; color: var(--texto-suave); text-align: center; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.pub-passos { display: flex; gap: .4rem; margin-bottom: 1.1rem; font-size: .75rem; color: var(--texto-suave); }
.pub-passos span { flex: 1; text-align: center; border-bottom: 3px solid var(--linha); padding-bottom: .35rem; }
.pub-passos span.ativo { border-color: var(--cor-marca); color: var(--cor-marca-texto); font-weight: 600; }

.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-bottom: 1rem; }
.calendario .cab { text-align: center; font-size: .7rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; }
.calendario .mes { grid-column: 1 / -1; font-family: var(--fonte-titulo); font-weight: 600; margin-top: .5rem; }
.calendario a, .calendario span.dia { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  border-radius: 12px; font-weight: 600; text-decoration: none; font-size: 1rem; line-height: 1.1; }
.calendario a { background: var(--superficie); border: 1.5px solid var(--cor-marca); color: var(--cor-marca-texto);
  transition: background-color .15s var(--facil), transform .12s var(--facil); }
.calendario a:active, .horarios a:active { transform: scale(.96); }
.calendario a small { font-size: .6rem; font-weight: 500; }
.calendario a.escolhido { background: var(--cor-marca); color: var(--pico-primary-inverse); }
.calendario span.dia { color: var(--texto-suave); opacity: .55; background: transparent; border: 1px dashed var(--linha-forte); font-weight: 400; }
.calendario span.vazio { visibility: hidden; }

.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.horarios a { display: flex; align-items: center; justify-content: center; min-height: var(--toque); border-radius: 12px; background: var(--superficie);
  border: 1.5px solid var(--cor-marca); color: var(--cor-marca-texto); font-family: var(--fonte-titulo); font-weight: 600; text-decoration: none;
  font-size: 1.02rem; transition: background-color .15s var(--facil), transform .12s var(--facil); }
.horarios a:hover { background: var(--cor-marca); color: var(--pico-primary-inverse); }

.pub-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.1rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.pub-destaque { font-size: 1.3rem; font-weight: 600; color: var(--cor-marca-texto); margin: .2rem 0; }
.pub-ok { text-align: center; }
.pub-ok .icone { font-size: 3rem; line-height: 1; color: var(--cor-marca); }
.pub-botoes { display: grid; gap: .6rem; }
.pub-botoes a[role=button], .pub-botoes button { width: 100%; margin: 0; min-height: var(--toque); }
.link-pessoal { word-break: break-all; font-size: .85rem; background: var(--superficie-2); padding: .55rem .7rem; border-radius: var(--raio-pequeno); }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pub-consentimento { font-size: .85rem; }

/* Escolha do serviço e da profissional */
.pub-opcao { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; margin-bottom: .6rem; border-radius: var(--raio);
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); box-shadow: inset 4px 0 0 var(--cor-marca), var(--sombra);
  text-decoration: none; transition: background-color .15s var(--facil), transform .12s var(--facil); }
.pub-opcao:hover { background: var(--marca-suave); }
.pub-opcao:active { transform: scale(.98); }
.pub-opcao.destaque { box-shadow: inset 4px 0 0 var(--ouro), var(--sombra); }
.pub-opcao small { display: block; }

/* Escolha de serviços na página pública */
.pub-modulo { font-size: 1.05rem; margin: 1rem 0 .4rem; }
label.pub-servico { display: flex; width: 100%; box-sizing: border-box; gap: .7rem; align-items: center; padding: .8rem 1rem; margin-bottom: .5rem; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--linha); cursor: pointer; transition: border-color .12s var(--facil), background .12s var(--facil); }
.pub-servico:has(input:checked) { border-color: var(--cor-marca); background: var(--marca-suave); }
.pub-servico input { margin: 0; flex: none; }
.pub-servico span { display: flex; flex-direction: column; }
.pub-servico input:disabled + span { opacity: .45; }
.pub-total { margin: .75rem 0; }
/* Continuar fica sempre à vista, mesmo com a lista de serviços longa */
.pub-barra { position: sticky; bottom: 0; z-index: 5; padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); margin-top: .5rem;
  background: color-mix(in srgb, var(--fundo) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linha); }
.pub-barra .pub-total { margin: 0 0 .4rem; min-height: 1.3em; }
.pub-barra button { margin: 0; min-height: var(--toque); }

/* Avaliação pós-atendimento: cinco botões de nota */
.notas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; border: 0; padding: 0; margin: 1rem 0 .3rem; }
.notas label { margin: 0; width: 100%; }
.notas input { position: absolute; opacity: 0; pointer-events: none; }
.notas span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border: 1.5px solid var(--cor-marca); border-radius: 14px;
  background: var(--superficie); color: var(--cor-marca-texto); font-size: 1.3rem; cursor: pointer; transition: background-color .12s var(--facil), transform .12s var(--facil); }
.notas span b { font-family: var(--fonte-titulo); }
.notas input:checked + span { background: var(--cor-marca); color: var(--pico-primary-inverse); transform: scale(1.04); }
.notas input:focus-visible + span { outline: 3px solid var(--cor-marca); outline-offset: 2px; }
.notas-legenda { display: flex; justify-content: space-between; margin-bottom: 1rem; color: var(--texto-suave); }