/* Shox Agenda: as quatro cores do produto e o pouco de CSS que a base não traz. Mesmos raios, sombras e letras do app.css. */
:root { --marca: #0E7490; --marca-escuro: #155E75; --marca-forte: #155E75; --marca-claro: #ECFEFF; }

/* Selos de situação */
.selo { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--fundo); color: var(--fraco); white-space: nowrap; }
.selo.verde { background: var(--marca-claro); color: var(--marca-forte); }
.selo.azul { background: var(--azul); color: #1D4E9E; }
.selo.vermelho { background: var(--vermelho); color: #B42318; }
.selo.amarelo { background: var(--amarelo); color: #7A4F00; }
.bloco { display: block; }
.com-js .so-sem-js { display: none; }

/* Títulos de seção e grades */
.titulo-secao { font-size: 20px; margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.titulo-secao small { font-size: 14px; font-weight: 500; color: var(--fraco); letter-spacing: 0; }
.duas-iguais { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.duas-iguais > * { min-width: 0; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grade-2 > label, .form label { display: grid; gap: 6px; font-weight: 700; color: var(--tinta); }
.form label small, .grade-2 label small { font-weight: 500; color: var(--fraco); font-size: 13px; }
.form label.marcar { display: flex; font-weight: 500; }
.marcar.curto { padding: 0; align-items: center; gap: 8px; font-weight: 600; color: var(--tinta); }
.resumo-amanha { color: var(--fraco); margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.resumo-amanha b { color: var(--tinta); }
.volta { margin-bottom: 8px; }

/* Miniatura viva do Início: a página que o cliente vê */
.mini-agenda .tela-cel { background: #F7FBFC; min-height: 340px; }
.mini-agenda .cab-cel { background: var(--marca-escuro); }
.mini-agenda .av { background: rgba(255,255,255,.18); padding: 0; display: grid; place-items: center; font-size: 17px; }
.mini-corpo { padding: 12px; display: grid; gap: 7px; }
.mini-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); margin-top: 4px; }
.mini-serv { background: #fff; border: 1.5px solid var(--linha); border-radius: 12px; padding: 8px 11px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; color: var(--tinta); }
.mini-serv small { color: var(--fraco); font-size: 11px; white-space: nowrap; }
.mini-serv.on { border-color: var(--marca); background: var(--marca-claro); }
.mini-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mini-chips span { font-size: 11px; font-weight: 700; padding: 5px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--linha); color: var(--texto); }
.mini-chips span.on { background: var(--marca-escuro); border-color: var(--marca-escuro); color: #fff; }
.mini-botao { margin-top: 6px; text-align: center; background: var(--marca-escuro); color: #fff; font-weight: 700; font-size: 13px; padding: 10px; border-radius: 12px; }

/* Agendamento: cartão que abre ao clicar, e a linha do tempo do dia */
.linha-tempo { display: grid; gap: 10px; margin-bottom: 18px; }
.item-ag { background: var(--cartao); border: 1px solid var(--linha); border-left: 5px solid var(--marca); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.item-ag summary, .resumo-bloq { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.item-ag summary::-webkit-details-marker { display: none; }
.item-ag summary:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.hr { font-size: 17px; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; min-width: 52px; }
.quem-ag { display: grid; gap: 1px; min-width: 0; flex: 1; }
.quem-ag b { color: var(--tinta); overflow-wrap: anywhere; }
.quem-ag small { color: var(--fraco); font-size: 13px; overflow-wrap: anywhere; }
.item-ag.agora { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 14%, transparent), var(--sombra); }
.item-ag.st-compareceu { border-left-color: #2E9E6A; }
.item-ag.st-faltou { border-left-color: #D9534F; }
.item-ag.st-sem_registro { border-left-color: #E0A100; }
.item-ag.st-cancelado { border-left-color: #C4CEC9; }
.item-ag.st-cancelado .quem-ag b, .item-ag.st-cancelado .hr { text-decoration: line-through; color: var(--fraco); }
.item-ag.bloqueio { border-left-color: #8A95A0; background: repeating-linear-gradient(135deg, #fff, #fff 10px, #F4F7F5 10px, #F4F7F5 20px); }
.resumo-bloq { cursor: default; }
.item-corpo { padding: 4px 16px 16px; border-top: 1px dashed var(--linha); display: grid; gap: 12px; }
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 12px 0 0; }
.dados dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); }
.dados dd { margin: 2px 0 0; color: var(--tinta); font-weight: 600; }
.linha-contato { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Listas: próximos, amanhã, clientes */
.lista-prox, .lista-amanha, .lista-clientes { list-style: none; padding: 6px 20px; margin: 0 0 18px; }
.lista-prox li, .linha-amanha, .linha-cliente { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.lista-prox li + li, .linha-amanha + .linha-amanha, .lista-clientes li + li { border-top: 1px solid var(--linha); }
.linha-cliente { color: var(--texto); font-weight: 400; }
.linha-cliente:hover b { color: var(--marca-escuro); }
.linha-amanha.feito .hr { color: var(--fraco); }
.estado-lembrete { font-weight: 600; }
.linha-amanha.feito .estado-lembrete { color: var(--marca-forte); }
.sem-aut { display: grid; gap: 4px; justify-items: end; text-align: right; font-size: 14px; }
.mensagem-exemplo { background: #E7FCE3; color: #111; padding: 12px 14px; border-radius: 4px 14px 14px 14px; margin: 12px 0; max-width: 520px; overflow-wrap: anywhere; }
.tecnico-cartao summary { cursor: pointer; font-weight: 700; color: var(--tinta); }
.inicial { width: 42px; height: 42px; border-radius: 50%; background: var(--marca-claro); color: var(--marca-forte); font-weight: 800; display: grid; place-items: center; flex: none; }
.inicial.grande { width: 64px; height: 64px; font-size: 26px; }
.ficha-topo { display: flex; gap: 18px; align-items: center; }
.busca { display: flex; gap: 10px; margin-bottom: 16px; }
.busca input { flex: 1; }

/* Barra da Agenda e a visão de semana */
.barra-agenda { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.navega, .filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtros input, .filtros select { width: auto !important; padding: 9px 12px !important; }
.alterna { display: inline-flex; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 3px; }
.alterna a { padding: 7px 16px; border-radius: 9px; color: var(--texto); font-size: 14px; }
.alterna a.on { background: var(--marca-escuro); color: #fff; }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.dia-semana { background: var(--cartao); border: 1px solid var(--linha); border-radius: 16px; padding: 8px; display: grid; gap: 6px; align-content: start; min-height: 150px; }
.dia-semana.hoje { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 14%, transparent); }
.cab-dia { display: grid; justify-items: center; padding: 6px 2px 8px; border-bottom: 1px solid var(--linha); color: var(--tinta); }
.cab-dia span { font-size: 13px; color: var(--fraco); font-weight: 500; }
.cab-dia small { font-size: 11px; font-weight: 700; color: var(--marca-forte); background: var(--marca-claro); padding: 1px 8px; border-radius: 99px; margin-top: 4px; }
.mini-ag { display: block; font-size: 12px; font-weight: 500; color: var(--tinta); background: var(--marca-claro); border-left: 3px solid var(--marca); border-radius: 8px; padding: 5px 7px; overflow: hidden; }
.mini-ag small { display: block; color: var(--fraco); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-ag.st-compareceu { background: #EAF7F0; border-left-color: #2E9E6A; }
.mini-ag.st-faltou { background: var(--vermelho); border-left-color: #D9534F; }
.mini-ag.st-sem_registro { background: var(--amarelo); border-left-color: #E0A100; }
.mini-bloq, .mini-livre { font-size: 12px; text-align: center; }

/* Cartão que abre e fecha (formulários da Agenda, serviços, horários) */
.dobra { padding: 0; }
.dobra > summary { display: flex; align-items: center; gap: 14px; padding: 20px 24px; cursor: pointer; list-style: none; }
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dobra > summary b { color: var(--tinta); font-size: 17px; }
.dobra > summary small { color: var(--fraco); font-size: 14px; overflow-wrap: anywhere; }
.dobra > summary::after { content: "+"; font-size: 22px; font-weight: 600; color: var(--fraco); }
.dobra[open] > summary::after { content: "–"; }
.dobra > summary:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: var(--raio); }
.dobra > form { padding: 4px 24px 24px; border-top: 1px dashed var(--linha); padding-top: 20px; }
.dobra.apagado, .linha-prof.apagado { opacity: .62; }
.livres { display: flex; flex-wrap: wrap; gap: 6px; }
.livres:empty { display: none; }
.livres p { width: 100%; font-size: 13px; color: var(--fraco); }
.livres button { font: inherit; font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--linha); background: #fff; color: var(--tinta); cursor: pointer; }
.livres button.on, .livres button:hover { background: var(--marca-escuro); border-color: var(--marca-escuro); color: #fff; }

/* Quem atende e a grade de horários */
.linha-prof { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.linha-prof input[name=nome] { flex: 1; min-width: 0; }
.grade-horarios { display: grid; gap: 8px; }
.linha-dia { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.periodos { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.periodo { display: inline-flex; align-items: center; gap: 8px; }
.periodo i { font-style: normal; color: var(--fraco); font-size: 14px; }
.periodo input { width: 118px !important; padding: 9px 10px !important; }
.fechado { display: none; color: var(--fraco); font-size: 14px; }
.linha-dia:has(input[type=checkbox]:not(:checked)) { background: var(--fundo); }
.linha-dia:has(input[type=checkbox]:not(:checked)) .periodos { display: none; }
.linha-dia:has(input[type=checkbox]:not(:checked)) .fechado { display: block; }

/* Passos: prévia, link, QR code e rodapé */
.rodape-passo, .concluir { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.concluir .acoes { margin: 0; }
.linha-cor { display: flex; align-items: center; gap: 12px; }
.linha-cor input[type=color] { width: 64px !important; height: 46px; padding: 4px !important; cursor: pointer; }
.previa { position: sticky; top: 20px; }
.previa-cartao { text-align: center; display: grid; gap: 10px; justify-items: center; margin-top: 10px; }
.previa-ok { width: 54px; height: 54px; border-radius: 50%; background: var(--cor-cliente, var(--marca)); color: #fff; font-size: 26px; font-weight: 800; display: grid; place-items: center; }
.previa-data { font-weight: 700; color: var(--tinta); }
.previa-botao { background: var(--cor-cliente, var(--marca)); color: #fff; font-weight: 700; padding: 11px 18px; border-radius: 14px; }
.publicar { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.link-grande code { display: block; font-size: 17px; padding: 14px 16px; border-radius: 14px; overflow-wrap: anywhere; margin: 6px 0 14px; }
.qr { display: grid; gap: 6px; justify-items: center; text-align: center; }
.qr-quadro { width: 190px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 10px; }
.qr-quadro svg { width: 100%; height: auto; display: block; }

@media (max-width: 1000px) {
  .duas-iguais, .publicar { grid-template-columns: 1fr; }
  .previa { position: static; }
  .semana { grid-template-columns: 1fr; }
  .dia-semana { min-height: 0; grid-template-columns: 1fr; }
  .cab-dia { display: flex; gap: 8px; align-items: baseline; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .selo { white-space: normal; }
  .dobra > summary { flex-wrap: wrap; }
  .periodo { flex: 1 1 100%; }
  .periodo input { width: auto !important; flex: 1; min-width: 0; }
  .linha-dia { grid-template-columns: 1fr; }
  .item-ag summary, .resumo-bloq { flex-wrap: wrap; gap: 8px 12px; }
  .linha-amanha { flex-wrap: wrap; }
  .linha-amanha .btn, .sem-aut { width: 100%; justify-items: start; text-align: left; }
  .linha-cliente .selo { display: none; }
  .dobra > summary { padding: 16px; }
  .dobra > form { padding: 16px; }
  .lista-prox, .lista-amanha, .lista-clientes { padding: 4px 16px; }
  .busca { flex-direction: column; }
  .barra-agenda { justify-content: flex-start; }
}

/* ---------- páginas que o cliente da empresa vê (/agendar e /a/...) ---------- */
body.vitrine { background: linear-gradient(180deg, var(--marca-claro), var(--fundo) 340px); min-height: 100vh; }
.faixa-demo-pub { margin: 0; padding: 9px 16px; text-align: center; font-size: 14px; font-weight: 600; background: var(--azul); color: #1D4E9E; }
.pub { max-width: 560px; padding: 26px 16px 48px; }
.pub-topo { display: flex; align-items: center; gap: 14px; margin: 0 4px 18px; }
.pub-marca { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--marca-escuro), var(--marca-forte)); box-shadow: 0 8px 20px color-mix(in srgb, var(--marca-escuro) 28%, transparent); }
.pub-empresa { margin: 0; font-size: 19px; font-weight: 800; color: var(--tinta); line-height: 1.25; overflow-wrap: anywhere; }
.pub-endereco { margin: 2px 0 0; font-size: 14px; color: var(--fraco); overflow-wrap: anywhere; }
.pub-cartao { padding: 26px 24px 28px; border-radius: 24px; }
.pub-cartao h1 { font-size: 25px; line-height: 1.2; margin: 0 0 6px; color: var(--tinta); letter-spacing: -.01em; }
.pub-sub { margin: 0 0 18px; color: var(--texto); }
.pub-etapas { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 13px; font-weight: 600; color: var(--fraco); }
.pub-etapas i { width: 22px; height: 6px; border-radius: 99px; background: var(--linha); }
.pub-etapas i.feito { background: var(--marca-escuro); } .pub-etapas i.on { background: var(--marca); width: 34px; }
.pub-etapas span { margin-left: 6px; }
.pub-fitas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pub-fitas a { padding: 6px 12px; border-radius: 99px; background: var(--marca-claro); color: var(--marca-forte); font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pub-fitas a:hover { text-decoration: underline; }
.pub-opcoes { display: grid; gap: 10px; }
.pub-opcao { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--linha); border-radius: 16px; background: #fff; color: var(--tinta); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pub-opcao:hover, .pub-opcao:focus-visible { border-color: var(--marca); box-shadow: 0 6px 18px color-mix(in srgb, var(--marca) 16%, transparent); transform: translateY(-1px); }
.pub-opcao > span:not(.pub-rosto) { flex: 1; min-width: 0; display: grid; }
.pub-opcao b { font-size: 17px; overflow-wrap: anywhere; } .pub-opcao small { color: var(--fraco); font-size: 14px; }
.pub-opcao em { font-style: normal; font-weight: 700; color: var(--marca-forte); white-space: nowrap; }
.pub-opcao i { font-style: normal; font-size: 24px; color: var(--fraco); line-height: 1; }
.pub-rosto { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--marca-claro); color: var(--marca-forte); }
.pub-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pub-dia { display: grid; justify-items: center; padding: 10px 4px; border-radius: 16px; border: 1.5px solid var(--linha); background: #fff; color: var(--tinta); text-decoration: none; line-height: 1.2; }
.pub-dia b { font-size: 22px; } .pub-dia small { font-size: 12px; font-weight: 600; color: var(--fraco); text-transform: lowercase; }
a.pub-dia:hover, a.pub-dia:focus-visible, .pub-hora:hover, .pub-hora:focus-visible { background: var(--marca-escuro); border-color: var(--marca-escuro); color: #fff; }
a.pub-dia:hover small, a.pub-dia:focus-visible small { color: #fff; }
.pub-dia.cheio { background: transparent; border-style: dashed; color: #6B7773; } .pub-dia.cheio b { font-weight: 500; text-decoration: line-through; }
.pub-nav { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0; font-weight: 600; }
.pub-periodo { font-size: 14px; font-weight: 700; color: var(--fraco); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.pub-periodo:first-of-type { margin-top: 4px; }
.pub-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.pub-hora { padding: 13px 4px; text-align: center; border-radius: 14px; border: 1.5px solid var(--linha); background: #fff; color: var(--tinta); font-weight: 700; font-size: 16px; text-decoration: none; }
.pub-vazio { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: var(--fundo); color: var(--texto); }
.pub-nota { font-size: 14px; color: var(--fraco); margin: 14px 0 0; }
.pub-form { gap: 18px; } .pub-botao { width: 100%; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pub-form > label.pub-aceite { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--linha); border-radius: 16px; background: #FBFCFB; cursor: pointer; }
.pub-aceite input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--marca-escuro); }
.pub-aceite span { display: grid; gap: 2px; } .pub-aceite b { color: var(--tinta); font-size: 15px; } .pub-aceite small { margin: 0; color: var(--fraco); font-size: 13px; font-weight: 500; }
.pub-sucesso, .pub-recado { text-align: center; }
.pub-check, .pub-emo { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; }
.pub-check { color: #fff; font-weight: 800; background: linear-gradient(145deg, var(--marca-escuro), var(--marca-forte)); box-shadow: 0 0 0 8px var(--marca-claro); animation: pub-pulo .5s ease-out; }
.pub-emo { background: var(--marca-claro); }
@keyframes pub-pulo { from { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.08); } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pub-check { animation: none; } .pub-opcao { transition: none; } }
.pub-recado p { margin: 0 0 20px; }
.pub-bilhete { text-align: left; border: 1.5px dashed color-mix(in srgb, var(--marca) 45%, var(--linha)); border-radius: 18px; background: var(--marca-claro); margin: 6px 0 20px; overflow: hidden; }
.pub-quando { margin: 0; padding: 18px 20px 14px; display: grid; gap: 2px; }
.pub-quando span { font-weight: 700; color: var(--marca-forte); } .pub-quando strong { font-size: 40px; line-height: 1.05; color: var(--tinta); letter-spacing: -.02em; } .pub-quando small { color: var(--texto); font-size: 13px; }
.pub-bilhete dl { margin: 0; padding: 14px 20px 16px; background: #fff; display: grid; gap: 8px; border-top: 1.5px dashed color-mix(in srgb, var(--marca) 45%, var(--linha)); }
.pub-bilhete dl div { display: flex; gap: 12px; } .pub-bilhete dt { flex: none; width: 52px; color: var(--fraco); font-size: 14px; } .pub-bilhete dd { margin: 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.pub-acoes { display: grid; gap: 10px; } .pub-acoes .btn { width: 100%; text-decoration: none; }
.pub-perigo { background: #B42318; }
.pub-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 10px 0 0; font-weight: 600; font-size: 15px; }
.pub-rodape { text-align: center; font-size: 13px; margin-top: 6px; } .pub-rodape a { color: var(--fraco); }
.vitrine a:focus-visible, .vitrine .btn:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
@media (max-width: 420px) { .pub-cartao { padding: 22px 18px 24px; } .pub-cartao h1 { font-size: 22px; } .pub-quando strong { font-size: 34px; } }
/* Fechamento: aviso amarelo, linha do "Conferir agora", trocar o horário e o link do cliente no cartão. */
.aviso.amarelo { background: #FEF3C7; color: #7A4B00; } .aviso.amarelo a { color: inherit; font-weight: 700; }
.conferir-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 16px 0; } .conferir-linha .conferir, .conferir-linha .dica { margin: 0; }
.trocar-ag { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linha); }
.trocar-ag > b { flex-basis: 100%; font-size: 14px; } .trocar-ag label { flex: 1 1 130px; margin: 0; font-size: 13px; }
.link-cli { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; font-size: 13px; color: var(--fraco); }
.link-cli code { overflow-wrap: anywhere; color: var(--texto, #1F2937); }