/* Visual na identidade do Sculptor Estética (Central de design, 22/10): o letreiro romano da parede (Cinzel),
   o preto do selo, o rosa da parede e o rosé do monograma. Fontes locais: a CSP é 'self'. */
@font-face { font-family: "Cinzel"; src: url("../site/fontes/cinzel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../site/fontes/cinzel-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../site/fontes/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --tinta: #171214;      /* o preto do selo */
  --tinta-2: #3a2f32;
  --parede: #F3E0DB;     /* a parede rosa do salão */
  --papel: #FFFAF8;
  --blush: #F0C8C2;      /* as capas dos destaques */
  --rose: #B9837A;       /* o monograma: só em fio e detalhe, nunca em texto */
  --rose-texto: #8A4F47;
  --suave: #5E4F4C;
  --borda: #86706B;
  --alerta: #A3261F;
  --romana: "Cinzel", Georgia, serif;
  --fio: #E8D4CF;
  --alerta-fundo: #FBEDEA;
  /* As tramas da régua: cada coisa do dia tem a sua forma, não só a sua cor. A legenda usa as mesmas. */
  --trama-limpeza: repeating-linear-gradient(135deg, #F7EEEC 0 5px, #E4CBC5 5px 10px);
  --trama-almoco: repeating-linear-gradient(45deg, #F3ECE9 0 7px, #E3D8D4 7px 14px);
  --trama-folga: radial-gradient(circle, #A8938E 1.3px, transparent 1.7px) 0 0 / 9px 9px, #F6F0EE;
  --trama-fora: #E6DEDB;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--parede);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; line-height: 1.45; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select { font: inherit; color: inherit; min-height: 44px; }
button { padding: 8px 14px; background: var(--papel); border: 1px solid var(--tinta); border-radius: 6px; cursor: pointer; transition: background-color .15s; }
button:hover { background: var(--blush); }
:focus-visible { outline: 3px solid var(--rose-texto); outline-offset: 2px; }

.faixa {
  position: sticky; top: 0; z-index: 10;
  padding: 8px 16px;
  background: var(--tinta); color: var(--papel);
  font-size: .8125rem;
}

/* ---- o letreiro ---- */
.marca {
  font-family: var(--romana); font-weight: 400; line-height: 1;
  text-transform: uppercase; letter-spacing: .2em; padding-left: .2em; /* o padding devolve o centro que o tracking tira */
}
.marca span {
  display: block; margin-top: .6em;
  font-size: max(.6875rem, .24em); font-weight: 700;
  letter-spacing: .9em; padding-left: .9em;
  color: var(--rose-texto);
}
.topo { display: grid; justify-items: center; gap: 16px; padding: 40px 16px 8px; text-align: center; }
.topo .marca { font-size: clamp(2.25rem, 7vw, 4rem); }
.lema { max-width: 34ch; color: var(--suave); text-wrap: balance; }
.lema::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 16px; background: var(--rose); }

main { display: grid; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; }
.lado { min-width: 0; display: grid; gap: 12px; align-content: start; }
.lado > h2 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--romana); font-weight: 700; font-size: .8125rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rose-texto);
}
.lado > h2::after { content: ""; flex: 1; height: 1px; background: var(--rose); }
.sub { margin-top: -4px; color: var(--suave); font-size: .9375rem; }

/* ---- o celular da cliente ---- */
.celular {
  position: relative; max-width: 380px; width: 100%; overflow: hidden;
  background: var(--papel);
  border: 10px solid var(--tinta); border-radius: 44px;
  box-shadow: 0 0 0 1px var(--rose), 0 28px 48px -28px rgba(23, 18, 20, .5);
}
.celular::before { content: ""; position: absolute; z-index: 1; top: 10px; left: 50%; width: 88px; height: 22px; translate: -50% 0; background: var(--tinta); border-radius: 99px; }
.tela { display: grid; gap: 20px; padding: 44px 18px 28px; }
.vitrine { display: grid; justify-items: center; gap: 10px; padding: 22px 12px; background: var(--parede); border-radius: 18px; text-align: center; }
.vitrine .marca { font-size: 1.75rem; margin-bottom: 4px; }
.vitrine .bio { font-size: .9375rem; text-wrap: balance; }
.vitrine .endereco { font-size: .8125rem; color: var(--suave); }
.tela > h3 { font-family: var(--romana); font-weight: 700; font-size: 1.125rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }

#cliente { display: grid; gap: 22px; counter-reset: passo; }
.passo { display: grid; gap: 10px; }
.passo h4 {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--romana); font-weight: 700; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.passo h4::before { counter-increment: passo; content: counter(passo, upper-roman); min-width: 2.2em; color: var(--rose-texto); }

.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
/* Tipo de serviço: duas colunas de botões largos, fáceis de tocar. */
[aria-label="Tipo de serviço"] .opcoes { grid-template-columns: repeat(2, 1fr); }
[aria-label="Tipo de serviço"] .opcao { min-height: 56px; padding: 8px 10px; font-weight: 600; text-wrap: balance; }
/* Tamanho do cabelo: um só controle de três posições, não três botões soltos. */
[aria-label="Tamanho do cabelo"] .opcoes { grid-template-columns: repeat(3, 1fr); gap: 0; }
[aria-label="Tamanho do cabelo"] .opcao { min-height: 52px; border-radius: 0; font-weight: 600; }
[aria-label="Tamanho do cabelo"] .opcao + .opcao { margin-left: -1px; }
[aria-label="Tamanho do cabelo"] .opcao:first-child { border-radius: 8px 0 0 8px; }
[aria-label="Tamanho do cabelo"] .opcao:last-child { border-radius: 0 8px 8px 0; }
[aria-label="Tamanho do cabelo"] .opcao.ativa { position: relative; box-shadow: none; }
[aria-label="Serviço"] .opcoes { grid-template-columns: 1fr; }
[aria-label="Serviço"] .opcao { text-align: left; padding-inline: 14px; }
[aria-label="Profissional"] .opcao:first-child { grid-column: 1 / -1; }
[aria-label="Horário"] .opcoes { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.opcao { padding: 8px 6px; border-color: var(--borda); font-variant-numeric: tabular-nums; }
.opcao.ativa, .primario { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.opcao.ativa { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3px var(--tinta); } /* o anel duplo das capas de destaque */
.opcao.ativa:hover, .primario:hover { background: var(--tinta-2); }
.primario { padding: 12px 16px; font-family: var(--romana); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.campo { display: grid; gap: 4px; font-size: .875rem; color: var(--suave); min-width: 0; }
.campo input, .campo select { width: 100%; min-width: 0; padding: 8px 10px; background: #fff; border: 1px solid var(--borda); border-radius: 6px; color: var(--tinta); }

.pausa, .aviso { display: grid; gap: 4px; padding: 12px 14px; background: var(--parede); border-left: 3px solid var(--rose-texto); border-radius: 4px 10px 10px 4px; font-size: .9375rem; overflow-wrap: anywhere; }
.aviso { background: var(--papel); border: 1px solid var(--rose); border-left: 3px solid var(--tinta); }
.fechado { border-left-color: var(--alerta); background: var(--alerta-fundo); }
.erro { color: var(--alerta); font-weight: 600; overflow-wrap: anywhere; }
.erro:not(:empty) { padding: 10px 12px; background: var(--alerta-fundo); border-left: 3px solid var(--alerta); border-radius: 4px 8px 8px 4px; }
.ok { padding: 12px 0; border-block: 1px solid var(--rose); font-family: var(--romana); font-weight: 700; font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
dt { color: var(--suave); font-size: .875rem; }
dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---- a agenda do salão: régua, uma coluna por profissional, uma faixa por recurso ---- */
.painel { display: grid; gap: 16px; padding: 16px; background: var(--papel); border-radius: 16px; box-shadow: 0 1px 0 var(--rose), 0 18px 40px -28px rgba(23, 18, 20, .45); min-width: 0; }
.campo.dia { max-width: 240px; }
.grade-rolagem { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--rose) transparent; border-radius: 10px; }
.grade { --px: 1.5px; --hora: calc(60 * var(--px)); display: grid; grid-auto-flow: column; grid-template-columns: 52px; grid-auto-columns: minmax(132px, 1fr); gap: 6px; min-width: max-content; }
.grade > .vazio { padding: 24px; }
.coluna { display: grid; grid-template-rows: 120px 1fr; gap: 6px; min-width: 0; }
.cabeca { display: grid; gap: 4px; align-content: start; padding: 8px; overflow: hidden; background: #fff; border: 1px solid var(--fio); border-radius: 10px; }
.cabeca h3 { font-family: var(--romana); font-weight: 700; font-size: 1rem; letter-spacing: .06em; line-height: 1.25; overflow-wrap: anywhere; }
.status { display: flex; align-items: flex-start; gap: 6px; font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--suave); }
.status::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .3em; border-radius: 50%; background: transparent; }
.prof .status::before { background: #3F8A55; }
.pausar { align-self: end; min-height: 36px; padding: 4px 8px; font-size: .75rem; }
.coluna.pausada .cabeca { border-color: var(--alerta); background: repeating-linear-gradient(135deg, #fff 0 10px, var(--alerta-fundo) 10px 20px); }
.pausada .status { color: var(--alerta); }
.pausada .status::before, .fora-do-site .status::before { background: var(--alerta); }
.pausada .pausar { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* A régua fica à vista quando a grade rola de lado. */
.regua { position: sticky; left: 0; z-index: 4; background: var(--papel); box-shadow: 6px 0 0 var(--papel), 8px 0 10px -6px rgba(23, 18, 20, .3); }
.regua .cabeca { visibility: hidden; }

.trilho {
  position: relative; height: calc(var(--minutos) * var(--px));
  background: repeating-linear-gradient(to bottom, #fff 0 calc(var(--hora) - 1px), #EFE2DE calc(var(--hora) - 1px) var(--hora));
  border-radius: 8px;
}
.regua .trilho { background: none; }

/* Faixas dos recursos: a mesma régua, mas de equipamento. Escuro é ocupado; claro é livre. */
.prof + .recurso { margin-left: 12px; }
.recurso .cabeca { background: var(--parede); border-color: var(--rose); border-top: 3px solid var(--tinta); }
.recurso .status::before { display: none; }
.recurso .cabeca h3 { font-size: .8125rem; letter-spacing: .08em; }
.recurso .trilho { background: repeating-linear-gradient(to bottom, #FBF3F0 0 calc(var(--hora) - 1px), #EBD9D4 calc(var(--hora) - 1px) var(--hora)); }
.recurso.sobra .cabeca { border-color: var(--alerta); border-style: dashed; border-top-style: solid; border-top-color: var(--alerta); background: var(--alerta-fundo); }
.recurso.sobra .status { color: var(--alerta); }
.recurso.sobra .trilho { background: repeating-linear-gradient(to bottom, rgba(163, 38, 31, .35) 0 1px, transparent 1px var(--hora)), repeating-linear-gradient(135deg, var(--alerta-fundo) 0 8px, #F6DCD7 8px 16px); }

.bloco {
  position: absolute; z-index: 1; left: 3px; right: 3px;
  top: calc(var(--ini) * var(--px)); height: calc(var(--dur) * var(--px));
  display: flex; flex-flow: row wrap; align-content: flex-start; gap: 1px 6px; overflow: hidden; container-type: size;
  padding: 2px 6px; border-radius: 6px; font-size: .75rem; line-height: 1.25;
}
.bloco > * { flex: 1 0 100%; min-width: 0; }
.bloco:focus-within { z-index: 3; }
.bloco strong { font-size: .8125rem; }
.bloco .hora { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bloco .motivo { overflow-wrap: anywhere; }
.marca-hora { left: 0; right: 0; padding: 0; color: var(--suave); font-size: .6875rem; font-variant-numeric: tabular-nums; }

/* Etapa em que a profissional trabalha: bloco cheio com barra na lateral. Do balcão, cinza. */
.etapa { background: var(--blush); border-left: 3px solid var(--rose-texto); }
.etapa.balcao { background: #EADFDC; border-left-color: var(--tinta-2); }
.etapa.bloqueio { background: repeating-linear-gradient(135deg, #EDE6E4 0 6px, #DDD2CF 6px 12px); border-left-color: var(--suave); }
/* Tempo de ação: um vão tracejado, sem preenchimento. Mostra a régua por baixo, porque ali cabe outra cliente. */
.tempo-de-acao { z-index: 0; padding-block: 3px; background: rgba(255, 255, 255, .5); border: 1.5px dashed var(--rose-texto); color: var(--rose-texto); font-weight: 600; }
/* Limpeza: listrado diagonal fino, com barra pontilhada. Prende a profissional e a sala. */
.limpeza { background: var(--trama-limpeza); border-left: 3px dotted var(--borda); color: var(--suave); }
/* Recurso ocupado: escuro e cheio, para a ocupação saltar à vista (os dois lavatórios às 16h). */
.uso { background: var(--tinta-2); border-left: 3px solid var(--rose); color: var(--papel); }
.uso.balcao { background: var(--tinta); }
.uso.limpeza { background: var(--trama-limpeza); border-left: 3px dotted var(--tinta-2); color: var(--tinta-2); }
/* O que não é atendimento: cada um com a sua trama e o seu texto. */
.almoco, .folga, .fora { z-index: 0; color: var(--suave); font-size: .75rem; }
.almoco { background: var(--trama-almoco); border: 1px solid #CDBDB8; font-weight: 700; color: var(--tinta-2); }
.folga { background: var(--trama-folga); font-weight: 600; }
.fora { background: var(--trama-fora); font-style: italic; }
/* Não cabe mais: contorno e barra grossa vermelhos, fundo claro e texto em negrito. Em preto e branco o contorno ainda o separa das etapas. */
.bloco.nao-cabe { outline: 2px solid var(--alerta); outline-offset: -2px; background: var(--alerta-fundo); color: var(--alerta); border-left: 6px solid var(--alerta); padding-right: 26px; }
.nao-cabe .motivo { font-weight: 700; }
.bloco.nao-cabe:has(> .motivo) { overflow: visible; z-index: 3; }
/* Marcação nova (a cliente acabou de marcar): um halo que pulsa três vezes. Sem movimento, o halo fica parado. */
.novo { animation: chegou 1.2s ease-in-out 3; }
@keyframes chegou {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 79, 71, 0); }
  50% { box-shadow: 0 0 0 5px rgba(138, 79, 71, .55), 0 0 14px 4px rgba(138, 79, 71, .35); }
}

/* O × de cancelar: pequeno à vista, mas com a área de toque maior que ele. */
.cancelar { position: absolute; top: 2px; right: 2px; min-height: 24px; width: 24px; padding: 0; line-height: 1; font-size: .9375rem; background: var(--papel); border-color: var(--borda); border-radius: 50%; }
.cancelar::after { content: ""; position: absolute; inset: -10px; }
.cancelar:focus-visible { outline-offset: -3px; }
.vazio { color: var(--suave); font-size: .875rem; }

/* Etapa curta: o texto aperta, depois a hora e o nome ficam na mesma linha e o × cabe dentro dela.
   (Num @container só se estilam os filhos, nunca o próprio bloco.) */
@container (max-height: 48px) { .bloco > * { line-height: 1.1; } .bloco > :first-child { margin-top: -1px; } }
@container (max-height: 40px) {
  .motivo { display: none; }
  /* O motivo do "não cabe mais" não pode sumir: numa etapa curta ele sai como um aviso logo abaixo. */
  .nao-cabe .motivo:last-of-type { display: block; position: absolute; z-index: 5; top: calc(100% + 3px); left: 0; right: 0; padding: 4px 6px; background: var(--alerta); border-radius: 6px; color: #fff; font-size: .6875rem; line-height: 1.25; box-shadow: 0 6px 14px -6px rgba(23, 18, 20, .6); }
}
@container (max-height: 23px) {
  .hora, .bloco strong { flex: 0 1 auto; }
  .bloco > :not(.cancelar) { margin-top: -2px; line-height: 1.2; }
  .cancelar { top: 0; width: 17px; height: 100%; min-height: 0; border-radius: 4px; font-size: .75rem; }
}

/* Legenda: o que cada forma quer dizer, na ordem em que aparecem na agenda. */
.legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--suave); }
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda li::before { content: ""; flex: none; width: 28px; height: 16px; border-radius: 4px; }
.legenda [data-amostra="etapa"]::before { background: var(--blush); border-left: 3px solid var(--rose-texto); }
.legenda [data-amostra="tempo"]::before { background: #fff; border: 1.5px dashed var(--rose-texto); }
.legenda [data-amostra="limpeza"]::before { background: var(--trama-limpeza); border-left: 3px dotted var(--borda); }
.legenda [data-amostra="almoco"]::before { background: var(--trama-almoco); border: 1px solid #CDBDB8; }
.legenda [data-amostra="folga"]::before { background: var(--trama-folga); }
.legenda [data-amostra="fora"]::before { background: var(--trama-fora); }
.legenda [data-amostra="uso"]::before { background: var(--tinta-2); border-left: 3px solid var(--rose); }
.legenda [data-amostra="nao-cabe"]::before { background: var(--alerta-fundo); border: 2px solid var(--alerta); border-left-width: 6px; }

.balcao-forms { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.lancar [hidden] { display: none; }

/* ---- ajustes ao vivo ---- */
/* Cada grupo é um cartão; onde há largura, ficam lado a lado. */
#ajustes { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
#ajustes > #desfazer { grid-column: 1 / -1; justify-self: start; }
.grupo-ajuste { display: grid; gap: 4px; margin: 0; padding: 14px; border: 1px solid var(--fio); border-radius: 10px; background: #fff; min-width: 0; }
.grupo-ajuste legend { padding: 0 6px; font-family: var(--romana); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-texto); }
.grupo-ajuste .sub { margin: 0 0 4px; font-size: .8125rem; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; }
.linha.campo { display: flex; color: var(--tinta); }
.linha > span:first-child { flex: 1 1 110px; }
/* Linha com dois horários ("Almoço das 13:00 às 14:00"): o nome sobe e os dois horários ficam juntos embaixo. */
.linha > span:first-child:not(:last-of-type) { flex-basis: 100%; }
.linha input[type="number"] { width: 84px; }
.linha input[type="time"], .linha select { width: auto; max-width: 100%; }
.linha input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--tinta); }
/* + e − num só controle, com o número no meio. */
.contador { flex-wrap: nowrap; gap: 0; }
.contador > span { flex: 1 1 0; min-width: 0; padding-right: 8px; }
.contador button { flex: none; width: 44px; padding: 0; font-size: 1.125rem; }
.contador button:first-of-type { border-radius: 6px 0 0 6px; }
.contador button:last-of-type { border-radius: 0 6px 6px 0; }
.contador button:disabled { opacity: .4; cursor: not-allowed; }
.valor { flex: none; display: grid; place-items: center; width: 44px; min-height: 44px; margin-inline: -1px; background: var(--papel); border-block: 1px solid var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Uma etapa por cartão. Sem "ocupa a profissional", é tempo de ação: tracejado, como na agenda. */
.etapa-ajuste { display: grid; gap: 0; padding: 8px 10px; background: var(--parede); border-left: 3px solid var(--rose-texto); border-radius: 4px 8px 8px 4px; }
.etapa-ajuste > span { font-weight: 600; }
.etapa-ajuste:has(input[type="checkbox"]:not(:checked)) { background: #fff; border: 1.5px dashed var(--rose-texto); border-radius: 8px; }
#desfazer:disabled { opacity: .5; cursor: not-allowed; }

.lancar { padding: 16px; background: var(--parede); border-radius: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.lancar > h3, .lancar > .erro { grid-column: 1 / -1; }
.lancar > h3 { font-family: var(--romana); font-weight: 700; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; }
.lancar button { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.lancar button:hover { background: var(--tinta-2); }
.discreto { justify-self: start; padding: 8px 0; background: none; border: 0; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }
.discreto:hover { background: none; color: var(--tinta); }

@media (min-width: 960px) {
  main { grid-template-columns: 400px minmax(0, 1fr); gap: 32px 48px; padding: 24px 24px 64px; }
  .cliente { grid-row: span 2; align-self: start; position: sticky; top: 48px; }
  /* No computador o celular tem altura de celular e rola por dentro: as duas telas cabem juntas. */
  .tela { height: min(780px, calc(100vh - 80px)); align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 519px) {
  .faixa { font-size: .75rem; }
  .celular { border-width: 6px; border-radius: 32px; }
  .celular::before { top: 8px; width: 72px; height: 18px; }
  .tela { padding: 38px 12px 20px; }
}
@media (min-width: 1500px) {
  main { max-width: 1680px; grid-template-columns: 380px minmax(0, 1fr) 340px; }
  .cliente { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .novo { animation: none; outline: 2px solid var(--rose-texto); outline-offset: 1px; }
  button { transition: none; }
}