/* =============================================================================
Mary Alves · Nail designer — design system final
Direção "Ateliê" (Cormorant Garamond + Manrope, filete da assinatura do logo)
com os enxertos dos juízes: página de links no roxo #8D54B4, CTA lavanda,
retrato em arco com as mãos, monograma real (img/monograma.png), faixa lilás
com o logo impresso, estados escritos dentro das células.
Regras deste arquivo
- Servido com CSP style-src 'self': NENHUM estado depende de style="".
Estados = classe ou atributo: :checked, [aria-current], [aria-invalid],
[aria-busy], [data-status], [data-estado], [data-etapa], [hidden], .is-loading.
- Pares texto/fundo: todos >= 4,5:1 (ver design/final/contraste.mjs).
- Alvos de toque >= 44px. Mobile-first em 390px; nada quebra em 320px.
Sumário
1 @font-face 13 Barra de resumo fixa
2 Tokens 14 Folha (sheet) / modal
3 Reset e base 15 Alertas
4 Tipografia 16 Selos de estado e etiquetas
5 Contêineres 17 Esqueletos e estados vazios
6 Utilitários e ícones 18 Etapas
7 Marca 19 Página de links (/ do domínio principal)
8 Botões 20 Site (/ do agendamento)
9 Campos de formulário 21 Agendar: topo, escolhido, revisão, resultado
10 Procedimento (item) 22 Reserva
11 Tira de dias 23 Painel (admin)
12 Horários (chips) 24 Login e erro
25 Movimento reduzido
============================================================================= */
/* 1 ── @font-face ─────────────────────────────────────────────────────────────
Arquivos variáveis do Google Fonts (subconjuntos latin + latin-ext), auto-
hospedados em /fonts (licença: /fonts/OFL.txt). Declaramos só os pesos usados. */
@font-face {
font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap;
src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 600; font-display: swap;
src: url("../fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("../fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap;
src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* 2 ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
/* Cor — papéis (pesquisa §4.2; contraste conferido em contraste.mjs) */
--c-papel: #FCF9FD; /* fundo do site, agendamento, reserva e painel */
--c-superficie: #FFFFFF; /* cards, campos, barras fixas */
--c-lavanda-50: #F5E6FF; /* seleção leve, poços de ícone, aviso info */
--c-lavanda: #EDD9FB; /* CTA da página de links, botão "Hoje" ativo */
--c-lilas: #CFBDE7; /* lilás do logo: selo, faixa final, rodapé da bio */
--c-marca: #8D54B4; /* fundo da página de links (o roxo do Linktree) */
--c-acao: #6B46A0; /* CTA, seleção, links, foco sobre fundo claro */
--c-acao-forte: #583586; /* pressionado; links sobre o lilás */
--c-ornamento: #9B7CB8; /* filetes da assinatura; nunca texto */
--c-tinta: #362630; /* texto principal */
--c-tinta-2: #6F5C70; /* texto secundário sobre papel/branco */
--c-tinta-3: #4F3E50; /* texto secundário sobre lavanda/lilás; selo neutro */
--c-filete: #E7DDEB; /* divisores decorativos */
--c-controle: #8B758D; /* borda funcional de campos e chips (>= 3:1) */
--c-neutro: #EFE8F0; /* fundo neutro: desabilitado, concluído, bloqueio */
--c-filete-roxo: #A97FC9; /* divisores sobre o roxo da bio (decorativo) */
--c-roxo-escuro: #7A47A0; /* hover/toque das linhas da bio (branco 6,49:1) */
--c-ok: #246247; --c-ok-fundo: #EAF4ED;
--c-atencao: #8A5117; --c-atencao-fundo: #FFF3DE; --c-atencao-borda: #E7C48A;
--c-erro: #A12F45; --c-erro-forte: #8A2639; --c-erro-fundo: #FDEDF0;
--c-foco: var(--c-acao); /* cor do anel de foco; contextos escuros trocam para branco */
/* Tipo */
--f-marca: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--f-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--t-nome: clamp(2.25rem, 11vw, 2.75rem); /* MARY ALVES em caixa alta espaçada */
--t-titulo: 2.25rem; /* título de página — Cormorant 600 */
--t-secao: 1.875rem; /* seção */
--t-subsecao: 1.625rem; /* categoria, bloco */
--t-nome-servico: 1.125rem; /* Manrope 600 */
--t-corpo: 1rem;
--t-meta: .875rem; /* rótulos, metadados, notas: mínimo para informação essencial */
--t-rotulo: .75rem; /* 12px caixa alta: SÓ assinatura da marca e contagens não essenciais */
/* Espaço (escala de 4) */
--e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
--e-6: 24px; --e-8: 32px; --e-12: 48px; --e-16: 64px; --e-24: 96px;
--margem: 20px;
/* Raio */
--r-foto: 6px; --r-horario: 10px; --r-campo: 12px; --r-card: 16px; --r-folha: 24px; --r-pilula: 999px;
/* Sombra: um nível dominante por tela */
--s-baixa: 0 2px 8px rgb(54 38 48 / .06);
--s-sobre: 0 -12px 32px rgb(54 38 48 / .12);
--s-folha: 0 12px 32px rgb(54 38 48 / .12);
/* Movimento */
--m-toque: 120ms; --m-etapa: 180ms; --m-folha: 240ms;
--ease: cubic-bezier(.2, 0, 0, 1);
--ease-folha: cubic-bezier(.2, .8, .2, 1);
/* Alturas reservadas pelas barras fixas */
--barra-h: 140px; /* barra de resumo do agendamento */
--abas-h: 64px; /* navegação inferior do painel */
}
@media (max-width: 359px) {
:root { --margem: 16px; --t-titulo: 2rem; --t-secao: 1.625rem; --t-subsecao: 1.5rem; }
}
/* 3 ── Reset e base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: clip;
background: var(--c-papel); color: var(--c-tinta);
font: 400 var(--t-corpo)/1.5 var(--f-ui);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-acao); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 3px; }
::selection { background: var(--c-lavanda); color: var(--c-tinta); }
/* Barras fixas nunca escondem o foco (WCAG 2.4.11) */
:root:has(.barra-resumo:not([hidden])) { scroll-padding-bottom: calc(var(--barra-h) + 16px); }
:root:has(.abas) { scroll-padding-bottom: calc(var(--abas-h) + 16px); }
/* 4 ── Tipografia ────────────────────────────────────────────────────────────── */
.titulo-pagina { font: 600 var(--t-titulo)/1.1 var(--f-marca); color: var(--c-tinta); text-wrap: balance; }
.lead { margin-top: var(--e-2); font-size: 1.0625rem; line-height: 1.6rem; color: var(--c-tinta-2); }
.texto-2 { color: var(--c-tinta-2); }
.meta { font-size: var(--t-meta); line-height: 1.25rem; color: var(--c-tinta-2); }
/* Cabeçalho de seção: Título ——— (rótulo opcional) */
.cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); }
.cab__titulo { font: 600 var(--t-secao)/1.15 var(--f-marca); color: var(--c-tinta); text-wrap: balance; }
.cab__titulo--sub { font-size: var(--t-subsecao); }
.cab__filete { flex: 1; min-width: var(--e-6); height: 1px; background: var(--c-ornamento); }
.cab__meta { flex: 1 0 auto; display: flex; align-items: center; gap: var(--e-3); }
/* Rótulo em caixa alta espaçada: assinatura "NAIL DESIGNER" e contagens não essenciais */
.rotulo { font: 600 var(--t-rotulo)/1rem var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--c-tinta-2); white-space: nowrap; }
/* Nota: ícone + frase curta em 14px (fuso, duração, políticas). Nunca caixa alta. */
.nota { display: flex; align-items: flex-start; gap: var(--e-2); font-size: var(--t-meta); line-height: 1.25rem; color: var(--c-tinta-2); }
.nota > .icon { margin-top: 2px; color: var(--c-acao); }
.nota strong { font-weight: 600; color: var(--c-tinta); }
.link { color: var(--c-acao); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { text-decoration-thickness: 2px; }
.link-seta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 .9375rem/1.25 var(--f-ui); color: var(--c-acao); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.link-seta:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Números: preço, duração, horário, código */
.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.preco { font: 600 1rem/1.5rem var(--f-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--c-tinta); white-space: nowrap; }
.duracao { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--t-meta); line-height: 1.25rem; color: var(--c-tinta-2); font-variant-numeric: tabular-nums; }
.codigo { font: 600 1rem/1.5rem var(--f-ui); letter-spacing: .08em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
/* 5 ── Contêineres ───────────────────────────────────────────────────────────────
.miolo = links 480 · .miolo--fluxo = agendar/reserva/painel 560 · .miolo--site = 1120.
--sangria = distância da borda da tela até o texto (o filete da assinatura "sangra"). */
.miolo {
--max: 480px;
width: 100%; max-width: calc(var(--max) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem);
--sangria: calc(max(0px, (100vw - var(--max) - 2 * var(--margem)) / 2) + var(--margem));
}
.miolo--fluxo { --max: 560px; }
.miolo--site { --max: 1120px; }
.bloco { margin-top: var(--e-8); } /* respiro entre blocos de uma página */
.bloco-p { margin-top: var(--e-3); } /* respiro curto: nota logo abaixo de botões */
.pilha { display: grid; gap: var(--e-3); }
.pilha--larga { gap: var(--e-4); }
.linha-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.cartao { padding: var(--e-4); border: 1px solid var(--c-filete); border-radius: var(--r-card); background: var(--c-superficie); }
@media (min-width: 400px) { .cartao { padding: var(--e-5); } }
/* 6 ── Utilitários e ícones ──────────────────────────────────────────────────── */
.nw { white-space: nowrap; } /* trecho que não pode quebrar: "Presidente Dutra - BA", "R$ 90,00" */
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Rádios escondidos dos cards (procedimento, dia, horário): cobrem a caixa visível, então o foco rola a caixa
inteira para a vista, nunca embaixo da barra fixa (WCAG 2.4.11). Continuam invisíveis e sem receber toques. */
.servico-opcao__input, .dia__input, .horario__input { inset: 0; width: auto; height: auto; margin: 0; }
/* "Pular para o conteúdo": invisível até receber foco pelo teclado */
.pular-link { position: absolute; left: var(--e-3); top: -100px; z-index: 50; padding: var(--e-3) var(--e-4); border-radius: var(--r-campo); background: var(--c-tinta); color: #fff; font-weight: 600; text-decoration: none; }
.pular-link:focus { top: var(--e-3); }
/* Ícones do sprite /img/icones.svg — */
.icon { width: 1.25rem; height: 1.25rem; flex: none; stroke-width: 1.75; }
.icon--sm { width: 1rem; height: 1rem; stroke-width: 2; }
.icon--lg { width: 1.5rem; height: 1.5rem; }
/* Miniatura real 1:1 (/img/mini/.jpg, 240px, já recortada nas unhas) */
.miniatura { width: 72px; height: 72px; flex: none; border-radius: var(--r-campo); object-fit: cover; background: var(--c-lavanda-50); }
.miniatura--p { width: 56px; height: 56px; }
.miniatura--g { width: 88px; height: 88px; }
/* 7 ── Marca ─────────────────────────────────────────────────────────────────────
Selo = monograma real (MA + flor do logo, /img/monograma.png, traço branco com
transparência) impresso sobre o lilás #CFBDE7 do próprio logo: sem caixa. */
.selo { --selo: 56px; display: inline-grid; place-items: center; width: var(--selo); height: var(--selo); flex: none; border-radius: 50%; background: var(--c-lilas); }
.selo img { width: 80%; height: auto; }
.selo--p { --selo: 40px; }
.selo--g { --selo: 72px; }
.selo--gg { --selo: 96px; }
/* Lockup = o logo recomposto em texto vivo: MARY ALVES / ——— NAIL DESIGNER */
.lockup { display: inline-grid; }
.lockup__nome { font: 500 var(--t-nome)/1 var(--f-marca); letter-spacing: .08em; margin-right: -.08em; text-transform: uppercase; color: var(--c-tinta); }
.lockup .assinatura { margin-top: var(--e-3); }
.assinatura { display: flex; align-items: center; gap: var(--e-3); }
.assinatura::before { content: ""; flex: 1; height: 1px; background: var(--c-ornamento); }
.assinatura--sangra { margin-left: calc(-1 * var(--sangria)); }
.lockup--claro .lockup__nome, .lockup--claro .rotulo { color: #fff; }
.lockup--claro .assinatura::before { background: #fff; }
/* Marca no topo: selo + MARY ALVES */
.marca { display: inline-flex; align-items: center; gap: var(--e-3); min-height: 44px; min-width: 44px; color: var(--c-tinta); text-decoration: none; }
.marca__nome { font: 600 1.1875rem/1 var(--f-marca); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 359px) { .marca__nome--some { display: none; } }
/* Logo completo (logo.jpg) impresso sobre o lilás: a borda some porque o fundo é o mesmo */
.logo-impresso { width: 260px; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-inline: auto; } /* recorta a margem lilás do quadrado */
/* 8 ── Botões ──────────────────────────────────────────────────────────────────── */
.botao {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 12px var(--e-6);
border: 1px solid transparent; border-radius: var(--r-pilula);
font: 600 1rem/1.25 var(--f-ui); text-align: center; text-decoration: none; cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--m-toque) var(--ease), border-color var(--m-toque) var(--ease), color var(--m-toque) var(--ease);
}
.botao--primario { background: var(--c-acao); color: #fff; }
.botao--primario:hover, .botao--primario:active { background: var(--c-acao-forte); }
.botao--secundario { background: var(--c-superficie); color: var(--c-acao); border-color: var(--c-controle); }
.botao--secundario:hover, .botao--secundario:active { background: var(--c-lavanda-50); }
.botao--fantasma { background: transparent; color: var(--c-acao); padding-inline: var(--e-3); }
.botao--fantasma:hover, .botao--fantasma:active { background: var(--c-lavanda-50); }
.botao--perigo { background: var(--c-superficie); color: var(--c-erro); border-color: var(--c-erro); }
.botao--perigo:hover, .botao--perigo:active { background: var(--c-erro-fundo); }
.botao--perigo-cheio { background: var(--c-erro); color: #fff; }
.botao--perigo-cheio:hover, .botao--perigo-cheio:active { background: var(--c-erro-forte); }
.botao--p { min-height: 44px; gap: 6px; padding: 8px var(--e-4); font-size: .9375rem; }
.botao--p .icon { width: 1.125rem; height: 1.125rem; }
.botao--bloco { display: flex; width: 100%; }
/* Indisponível: troca de cor E de texto ("Escolha um horário para continuar" ao lado) */
.botao:disabled, .botao[aria-disabled="true"] { background: var(--c-neutro); color: var(--c-tinta-3); border-color: transparent; cursor: not-allowed; }
/* Salvando: o JS troca o texto ("Salvando sua reserva…"), põe .is-loading e aria-disabled */
.botao.is-loading { pointer-events: none; }
.botao.is-loading::before { content: ""; width: 18px; height: 18px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }
/* Botão só de ícone (precisa de aria-label) */
.botao-icone { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--c-controle); border-radius: 50%; background: var(--c-superficie); color: var(--c-tinta); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--m-toque) var(--ease); }
.botao-icone:hover, .botao-icone:active { background: var(--c-lavanda-50); }
.botao-icone:disabled { color: var(--c-tinta-2); border-color: var(--c-filete); background: transparent; cursor: not-allowed; }
.botao-icone--nu { border-color: transparent; background: transparent; }
/* 9 ── Campos de formulário ──────────────────────────────────────────────────────
Rótulo SEMPRE acima; dica abaixo do rótulo; erro abaixo do campo (sem apagar o valor). */
.campo { display: grid; gap: 6px; }
/* .campos = pilha de um formulário: espaço uniforme entre campo, opção, linha de campos e alertas */
.campos > * + * { margin-top: var(--e-4); }
.campos > .opcao + .opcao { margin-top: 0; }
.campos > .bloco { margin-top: var(--e-8); }
.campo__rotulo { font: 600 var(--t-meta)/1.25rem var(--f-ui); color: var(--c-tinta); }
.campo__opcional { font-weight: 400; color: var(--c-tinta-2); }
.campo__dica { font-size: var(--t-meta); line-height: 1.25rem; color: var(--c-tinta-2); }
.campo__erro { display: flex; align-items: flex-start; gap: 6px; font: 600 var(--t-meta)/1.25rem var(--f-ui); color: var(--c-erro); }
.campo__erro .icon { margin-top: 2px; }
.campo__contador { justify-self: end; font-size: var(--t-meta); line-height: 1.25rem; color: var(--c-tinta-2); font-variant-numeric: tabular-nums; }
.entrada {
display: block; width: 100%; min-height: 52px; padding: 13px 14px;
border: 1px solid var(--c-controle); border-radius: var(--r-campo); background: var(--c-superficie);
font: 400 1rem/1.5rem var(--f-ui); color: var(--c-tinta);
transition: border-color var(--m-toque) var(--ease), box-shadow var(--m-toque) var(--ease);
}
.entrada::placeholder { color: var(--c-tinta-2); opacity: 1; }
.entrada:hover { border-color: var(--c-tinta-2); }
.entrada:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 1px; border-color: var(--c-acao); }
.entrada[aria-invalid="true"] { border: 2px solid var(--c-erro); padding: 12px 13px; }
.entrada:disabled { background: var(--c-neutro); color: var(--c-tinta-3); cursor: not-allowed; }
textarea.entrada { min-height: 104px; resize: vertical; }
select.entrada {
appearance: none; padding-right: 44px; cursor: pointer;
background: var(--c-superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23362630' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px 20px;
}
input[type="date"].entrada, input[type="time"].entrada { min-width: 0; }
/* Telefone: prefixo +55 fixo; a cliente digita "(74) 98863-7353" */
.entrada-grupo { display: flex; align-items: stretch; border: 1px solid var(--c-controle); border-radius: var(--r-campo); background: var(--c-superficie); }
.entrada-grupo:focus-within { outline: 2px solid var(--c-foco); outline-offset: 1px; border-color: var(--c-acao); }
.entrada-grupo__prefixo { display: flex; align-items: center; padding: 0 12px 0 14px; border-right: 1px solid var(--c-filete); font-weight: 600; color: var(--c-tinta-2); font-variant-numeric: tabular-nums; }
.entrada-grupo .entrada { border: 0; border-radius: 0 var(--r-campo) var(--r-campo) 0; min-width: 0; }
.entrada-grupo .entrada:focus-visible { outline: 0; }
.entrada-grupo:has(.entrada[aria-invalid="true"]) { border: 2px solid var(--c-erro); }
/* Duas colunas (data + horário) que viram uma abaixo de 360px. align-items: start: o erro embaixo de um campo não
estica o vizinho. */
.campos-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); align-items: start; }
@media (max-width: 359px) { .campos-linha { grid-template-columns: 1fr; } }
/* Caixa de seleção com texto (adicional, "outra profissional"): o input nativo é estilizado */
.opcao { display: grid; grid-template-columns: 24px 1fr; gap: var(--e-3); align-items: start; padding: var(--e-3) 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opcao__input {
appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--c-controle); border-radius: 7px; background: var(--c-superficie);
cursor: pointer; transition: background-color var(--m-toque) var(--ease), border-color var(--m-toque) var(--ease);
}
.opcao__input:checked {
border-color: var(--c-acao);
background: var(--c-acao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.opcao__input:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.opcao__titulo { display: block; font-weight: 600; line-height: 1.5rem; }
.opcao__desc { display: block; margin-top: 2px; font-size: var(--t-meta); line-height: 1.25rem; color: var(--c-tinta-2); }
.opcao__valor { display: block; margin-top: var(--e-1); font: 600 var(--t-meta)/1.25rem var(--f-ui); color: var(--c-tinta); font-variant-numeric: tabular-nums; }
/* Interruptor (switch): */
.interruptor {
appearance: none; flex: none; width: 48px; height: 28px; margin: 0; border-radius: var(--r-pilula); cursor: pointer;
background: var(--c-controle) radial-gradient(circle, #fff 0 10px, transparent 10.5px) no-repeat left 1px center / 26px 26px;
transition: background-color var(--m-toque) var(--ease), background-position var(--m-toque) var(--ease);
}
.interruptor:checked { background-color: var(--c-acao); background-position: right 1px center; }
.interruptor:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.opcao--interruptor { grid-template-columns: 1fr auto; align-items: center; }
/* 10 ── Procedimento (item selecionável) ──────────────────────────────────────────
— escolhido = :checked (sem JS de estilo). */
.servicos-lista { display: grid; gap: var(--e-3); }
.servico-opcao { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.servico-opcao__caixa {
display: flex; align-items: flex-start; gap: var(--e-3); padding: 15px;
border: 1px solid var(--c-filete); border-radius: var(--r-card); background: var(--c-superficie); box-shadow: var(--s-baixa);
transition: background-color var(--m-toque) var(--ease), border-color var(--m-toque) var(--ease);
}
@media (hover: hover) { .servico-opcao:hover .servico-opcao__caixa { border-color: var(--c-controle); } }
/* borda vira 2px sem pular layout: padding compensa 1px */
.servico-opcao__input:checked + .servico-opcao__caixa { padding: 14px; border: 2px solid var(--c-acao); background: var(--c-lavanda-50); box-shadow: none; }
.servico-opcao__input:focus-visible + .servico-opcao__caixa { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.servico-opcao__texto { flex: 1; min-width: 0; }
.servico-opcao__nome { display: block; font: 600 var(--t-nome-servico)/1.5rem var(--f-ui); color: var(--c-tinta); }
.servico-opcao__desc { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.375rem; color: var(--c-tinta-2); }
.servico-opcao__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-4); margin-top: var(--e-2); }
/* marca de rádio: círculo vazio → círculo roxo com check */
.servico-opcao__marca { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 1.5px solid var(--c-controle); border-radius: 50%; color: #fff; }
.servico-opcao__marca .icon { visibility: hidden; }
.servico-opcao__input:checked + .servico-opcao__caixa .servico-opcao__marca { border-color: var(--c-acao); background: var(--c-acao); }
.servico-opcao__input:checked + .servico-opcao__caixa .servico-opcao__marca .icon { visibility: visible; }
/* Adicional do procedimento escolhido (fica logo abaixo dele) */
.servico-extra { margin-top: var(--e-2); padding: var(--e-1) var(--e-4); border-left: 2px solid var(--c-acao); border-radius: 0 var(--r-campo) var(--r-campo) 0; background: var(--c-lavanda-50); }
.servico-extra .opcao__desc { color: var(--c-tinta-3); }
/* Grupo por categoria (fieldset + legend com o filete) */
.grupo + .grupo { margin-top: var(--e-8); }
.grupo__titulo { float: left; width: 100%; margin-bottom: var(--e-3); }
.grupo__titulo + * { clear: both; }
/* 11 ── Tira de dias ───────────────────────────────────────────────────────────────
Rolagem própria com snap; setas paginam (JS: dias.scrollBy({left: dias.clientWidth})).
5 dias visíveis no celular (células de ~70px: cabem "Sem vagas" e "Fechado" escritos
DENTRO da célula), 7 a partir de 440px. */
.dias-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-3); }
.dias-topo__mes { font: 600 1rem/1.5rem var(--f-ui); color: var(--c-tinta); }
.setas { display: flex; gap: var(--e-2); }
.dias {
--visiveis: 5;
display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / var(--visiveis));
margin-top: var(--e-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
border: 1px solid var(--c-controle); border-radius: var(--r-campo); background: var(--c-superficie);
}
.dias::-webkit-scrollbar { display: none; }
@media (min-width: 440px) { .dias { --visiveis: 7; } }
.dia { position: relative; display: block; min-width: 0; scroll-snap-align: start; border-left: 1px solid var(--c-filete); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dia:first-child { border-left: 0; }
.dia__caixa { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; min-height: 84px; padding: 9px 2px 8px; text-align: center; transition: background-color var(--m-toque) var(--ease); }
@media (hover: hover) { .dia:hover .dia__caixa { background: var(--c-lavanda-50); } }
.dia__semana { font: 500 .8125rem/1rem var(--f-ui); color: var(--c-tinta-2); }
.dia__num { font: 600 1.25rem/1.5rem var(--f-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--c-tinta); }
/* disponível: ponto; escolhido: check */
.dia__marca { display: grid; place-items: center; height: 18px; margin-top: 2px; }
.dia__marca::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-acao); }
.dia__marca .icon { display: none; }
.dia__input:checked + .dia__caixa { background: var(--c-acao); }
.dia__input:checked + .dia__caixa .dia__semana, .dia__input:checked + .dia__caixa .dia__num { color: #fff; }
.dia__input:checked + .dia__caixa .dia__marca { color: #fff; }
.dia__input:checked + .dia__caixa .dia__marca::before { display: none; }
.dia__input:checked + .dia__caixa .dia__marca .icon { display: block; }
.dia__input:focus-visible + .dia__caixa { outline: 2px solid var(--c-foco); outline-offset: -4px; }
.dia__input:checked:focus-visible + .dia__caixa { outline-color: #fff; }
/* indisponível: texto na célula + estilo próprio de cada motivo */
.dia__estado { margin-top: 2px; font: 600 .75rem/.875rem var(--f-ui); color: var(--c-tinta-2); }
.dia:has(.dia__input:disabled) { cursor: default; }
.dia__input:disabled + .dia__caixa { background: transparent; }
.dia[data-estado="lotado"] .dia__caixa { margin: 4px; min-height: 76px; padding-top: 5px; border: 1px dashed var(--c-controle); border-radius: 8px; }
.dia[data-estado="lotado"] .dia__num { color: var(--c-tinta-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dia[data-estado="fechado"] .dia__caixa { background: var(--c-papel); }
.dia[data-estado="fechado"] .dia__num { color: var(--c-tinta-2); }
/* 12 ── Horários (chips) ─────────────────────────────────────────────────────────── */
.periodo { margin-top: var(--e-5); }
.periodo__cab { float: left; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); margin-bottom: 10px; }
.periodo__nome { font: 600 .9375rem/1.25rem var(--f-ui); color: var(--c-tinta); }
.periodo__qtd { font-size: var(--t-meta); line-height: 1.25rem; color: var(--c-tinta-2); }
.horarios { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
@media (max-width: 359px) { .horarios { grid-template-columns: repeat(2, 1fr); } }
.horario { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.horario__caixa {
display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px;
border: 1px solid var(--c-controle); border-radius: var(--r-horario); background: var(--c-superficie);
font: 600 1rem/1 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--c-tinta);
transition: background-color var(--m-toque) var(--ease), border-color var(--m-toque) var(--ease);
}
@media (hover: hover) { .horario:hover .horario__caixa { background: var(--c-lavanda-50); } }
.horario__caixa .icon { display: none; }
.horario__input:checked + .horario__caixa { background: var(--c-acao); border-color: var(--c-acao); color: #fff; }
.horario__input:checked + .horario__caixa .icon { display: block; }
.horario__input:focus-visible + .horario__caixa { outline: 2px solid var(--c-foco); outline-offset: 2px; }
/* 13 ── Barra de resumo fixa ─────────────────────────────────────────────────────────
Linha 1: o que/quando ("qui, 5 de nov. · 14:30 às 17:00") ou a instrução. Linha 2: Total + ação.
O recebe .com-barra para reservar o espaço (nada fica escondido atrás dela). */
.com-barra { padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom)); }
.barra-resumo {
position: fixed; inset: auto 0 0; z-index: 20;
padding: var(--e-3) var(--margem) calc(var(--e-3) + env(safe-area-inset-bottom));
border-top: 1px solid var(--c-filete); background: var(--c-superficie); box-shadow: var(--s-sobre);
}
.barra-resumo__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px var(--e-4); max-width: 560px; margin: 0 auto; }
.barra-resumo__linha { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-2); padding-bottom: 10px; border-bottom: 1px solid var(--c-filete); font: 500 var(--t-meta)/1.25rem var(--f-ui); color: var(--c-tinta); font-variant-numeric: tabular-nums; }
.barra-resumo__linha .icon { color: var(--c-acao); }
.barra-resumo__linha--instrucao { color: var(--c-tinta-2); }
.barra-resumo__total { display: grid; }
.barra-resumo__rotulo { font: 500 var(--t-meta)/1.25rem var(--f-ui); color: var(--c-tinta-2); }
.barra-resumo__valor { font: 600 1.375rem/1.75rem var(--f-ui); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.barra-resumo .botao { min-width: 148px; }
/* 14 ── Folha (sheet) / modal ─────────────────────────────────────────────────────────