/* Deedo Studio — componentes (spec 2026-09-28 §3.2). Depende de tokens.css.
   Estados interativos usam atributos ARIA (aria-checked, aria-disabled, aria-busy, aria-current),
   então o visual sempre acompanha o que o leitor de tela anuncia. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: calc(var(--altura-nav) + 16px + env(safe-area-inset-bottom)); }
html:has(.nc-main--fluxo) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.nc { margin: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
/* Caixas de marcar e rádios nativos na cor do texto, não no azul do navegador. */
body.nc input[type="checkbox"], body.nc input[type="radio"] { accent-color: var(--cor-texto); }
:where(.nc) img { max-width: 100%; display: block; }
:where(.nc) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.nc) a { color: inherit; text-decoration: none; }
:where(.nc) p { margin: 0; }
.nc :focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 3px; }
.nc [hidden] { display: none !important; }
.visualmente-oculto { 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; }

/* ---------- Tipografia ---------- */
.nc-display { font-family: var(--fonte-titulo); font-size: 34px; line-height: 38px; font-weight: 600; letter-spacing: .005em; margin: 0; text-wrap: balance; }
.nc-titulo-1 { font-family: var(--fonte-titulo); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: .01em; margin: 0; text-wrap: balance; }
.nc-titulo-2 { font-size: 18px; line-height: 24px; font-weight: 600; margin: 0; }
.nc-titulo-3 { font-size: 17px; line-height: 24px; font-weight: 500; margin: 0; }
.nc-apoio { font-size: 14px; line-height: 20px; color: var(--cor-texto-3); }
/* Assinatura de quem fez o sistema: discreta, no fim da home */
.nc-creditos { border-top: 1px solid var(--cor-linha); padding-top: 16px; text-align: center; }
.nc-creditos p { margin: 0; }
.nc-creditos__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; }
.nc-creditos__logo { height: 24px; width: auto; display: block; }
@media (hover: hover) { .nc-creditos__link:hover .nc-apoio { color: var(--cor-texto-2); } }
.nc-rotulo { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-3); margin: 0; }
.nc-link { color: var(--cor-champagne-texto); font-weight: 500; font-size: 14px; }
@media (hover: hover) { .nc-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
p .nc-link, .nc-apoio .nc-link { text-decoration: underline; text-underline-offset: 3px; }
.botao-link { position: relative; background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.botao-link::after { content: ""; position: absolute; inset: -8px -6px; }
@media (min-width: 1024px) {
  .nc-display { font-size: 40px; line-height: 44px; }
  .nc-titulo-1 { font-size: 30px; line-height: 36px; }
  .nc-titulo-2 { font-size: 20px; line-height: 26px; }
}

/* ---------- Layout ---------- */
.nc-pular { position: absolute; left: var(--esp-4); top: -60px; z-index: 100; background: var(--cor-texto); color: #fff; padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-m); transition: top var(--mov-rapido); }
.nc-pular:focus { top: var(--esp-3); }
.nc-main { max-width: var(--largura-max); margin: 0 auto; padding: var(--esp-5) var(--esp-4) calc(var(--altura-nav) + var(--esp-6) + env(safe-area-inset-bottom)); }
.nc-main:focus { outline: none; }
.nc-main--sem-nav { padding-bottom: var(--esp-6); }
.nc-main--fluxo { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.pilha { display: flex; flex-direction: column; gap: var(--esp-4); }
.pilha--g { gap: var(--esp-6); }
.pilha--p { gap: var(--esp-2); }
.linha { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.linha--entre { justify-content: space-between; flex-wrap: nowrap; }
/* Ícone + frase longa: sem o nowrap, a frase (item anônimo, largura de conteúdo máximo) não cabe ao
   lado do ícone e a linha quebra, deixando o ícone sozinho em cima. Com nowrap a frase encolhe e
   quebra por dentro, ao lado do ícone — que o alinhar-inicio mantém no alto. */
.linha--icone { flex-wrap: nowrap; }
.mt-3 { margin-top: var(--esp-3); }
.mt-4 { margin-top: var(--esp-4); }
.alinhar-inicio { align-self: flex-start; }
.secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
@media (min-width: 600px) { .nc-main { padding-left: var(--esp-5); padding-right: var(--esp-5); } }
@media (min-width: 1024px) {
  .nc-main { padding-top: var(--esp-6); padding-bottom: var(--esp-7); }
  .nc-main--fluxo { padding-bottom: var(--esp-7); }
  html, html:has(.nc-main--fluxo) { scroll-padding-top: 84px; scroll-padding-bottom: 16px; }
}

/* ---------- Ícones ---------- */
.icone { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icone--16 { width: 16px; height: 16px; }
.icone--24 { width: 24px; height: 24px; }

/* ---------- Marca ---------- */
.nc-marca { display: inline-flex; flex-direction: column; line-height: 1.1; margin: 0; }
.nc-marca strong { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 600; letter-spacing: .01em; }
.nc-marca span { font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--cor-texto-3); }
.nc-marca__logo { display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain; }
@media (min-width: 1024px) { .nc-marca__logo { height: 44px; } }
/* Complemento ("Equipe") sob o logo: sem o respiro, as maiúsculas encostam no desenho. */
.nc-marca__logo + span { margin-top: 8px; }
/* No cabeçalho de 68 px (topo da equipe), logo + "Equipe" em 44 + 8 + 13 px encostavam na borda. */
.nc-cabecalho .nc-marca__logo:not(:last-child) { height: 34px; }
.nc-cabecalho .nc-marca__logo + span { margin-top: 4px; }

/* ---------- Cabeçalho (computador) ---------- */
.nc-cabecalho { display: none; }
@media (min-width: 1024px) {
  .nc-cabecalho { display: block; position: sticky; top: 0; z-index: 20; background: var(--cor-fundo); border-bottom: 1px solid var(--cor-linha); }
  .nc-cabecalho__interno { max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--esp-5); height: 68px; display: flex; align-items: center; gap: var(--esp-6); }
  .nc-cabecalho__nav { display: flex; gap: var(--esp-1); flex: 1; }
  .nc-cabecalho__nav a { padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-pilula); font-size: 15px; color: var(--cor-texto-3); transition: background-color var(--mov-rapido), color var(--mov-rapido); }
}
@media (min-width: 1024px) and (hover: hover) {
  .nc-cabecalho__nav a:hover { color: var(--cor-texto); background: var(--cor-superficie); }
}
@media (min-width: 1024px) {
  .nc-cabecalho__nav a[aria-current="page"] { color: var(--cor-texto); font-weight: 500; background: var(--cor-superficie); }
}

/* No computador o cabeçalho (.nc-cabecalho) já mostra marca, "Entrar" e "Agendar horário":
   esconde a repetição desses elementos no início da página, sem tirar do fluxo de leitura.
   !important em tudo porque .inicio-entrar também carrega classes de .btn (padding, min-height…)
   declaradas depois no arquivo, que do contrário venceriam por ordem no cascade. */
@media (min-width: 1024px) {
  .inicio-entrar { display: none !important; }
  .inicio-marca {
    position: absolute !important; width: 1px !important; height: 1px !important;
    min-height: 0 !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    white-space: nowrap !important; border: 0 !important;
  }
}

/* ---------- Navegação inferior (celular) ---------- */
.nc-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--cor-nav-fundo); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-top: 1px solid var(--cor-linha); }
.nc-nav__item { position: relative; flex: 1; max-width: 96px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; line-height: 14px; color: var(--cor-texto-3); border-radius: var(--raio-m); }
.nc-nav__item[aria-current="page"] { color: var(--cor-texto); font-weight: 500; }
.nc-nav__item[aria-current="page"]::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--cor-champagne); }
@media (min-width: 1024px) { .nc-nav { display: none; } }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: 48px; padding: 0 22px; border-radius: var(--raio-pilula); border: 1px solid transparent; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; transition: background-color var(--mov-rapido) var(--curva), border-color var(--mov-rapido) var(--curva), transform var(--mov-rapido) var(--curva); }
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.btn--primario { background: var(--cor-champagne); color: var(--cor-texto); }
.btn--secundario { background: var(--cor-fundo); color: var(--cor-texto); border-color: var(--cor-linha-forte); }
.btn--terciario { background: transparent; color: var(--cor-texto); padding: 0 var(--esp-3); }
.btn--destrutivo { background: var(--cor-fundo); color: var(--cor-erro); border-color: var(--cor-erro-linha); }
.btn--texto-erro { color: var(--cor-erro); }
.btn--compacto { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn--bloco { width: 100%; }
@media (hover: hover) {
  .btn--primario:hover { background: var(--cor-champagne-hover); }
  .btn--secundario:hover { background: var(--cor-superficie); }
  .btn--terciario:hover { background: var(--cor-superficie); }
  .btn--destrutivo:hover { background: var(--cor-erro-fundo); }
}
.btn:disabled, .btn[aria-disabled="true"] { background: var(--cor-superficie-2); color: var(--cor-texto-desabilitado); border-color: transparent; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .icone { animation: nc-girar .9s linear infinite; }
.btn-icone { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; border: 0; color: var(--cor-texto); cursor: pointer; flex: none; }
@media (hover: hover) { .btn-icone:hover { background: var(--cor-superficie); } }
@keyframes nc-girar { to { transform: rotate(360deg); } }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__label { font-size: 14px; font-weight: 500; }
.campo__entrada { width: 100%; min-height: 52px; padding: 0 var(--esp-4); border: 1px solid var(--cor-linha-forte); border-radius: var(--raio-m); background: var(--cor-fundo); font-size: 16px; color: var(--cor-texto); -webkit-appearance: none; appearance: none; transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
textarea.campo__entrada { min-height: 96px; padding: var(--esp-3) var(--esp-4); resize: vertical; line-height: 1.5; }
.campo__entrada::placeholder { color: var(--cor-placeholder); }
.campo__entrada::-webkit-search-decoration, .campo__entrada::-webkit-search-cancel-button { -webkit-appearance: none; }
.campo__entrada:focus { outline: none; border-color: var(--cor-texto); box-shadow: 0 0 0 1px var(--cor-texto), 0 0 0 4px var(--cor-foco-anel); }
.campo__entrada[readonly] { background: var(--cor-superficie); }
.campo__ajuda { font-size: 13px; line-height: 18px; color: var(--cor-texto-3); }
.campo__erro { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--cor-erro); }
.campo--erro .campo__entrada { border-color: var(--cor-erro); }
.campo--erro .campo__entrada:focus { border-color: var(--cor-erro); box-shadow: 0 0 0 1px var(--cor-erro), 0 0 0 4px rgba(179, 38, 30, .18); }
.busca { position: relative; max-width: 560px; } /* no computador um campo de 1000px+ perde a proporção */
.busca .icone { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cor-texto-3); pointer-events: none; }
.busca .campo__entrada { min-height: 48px; padding-left: 44px; background: var(--cor-superficie); border-color: transparent; }
.busca .campo__entrada:focus { background: var(--cor-fundo); border-color: var(--cor-texto); }

/* ---------- Chips de horário e dias ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chip { min-height: 44px; min-width: 76px; padding: 0 var(--esp-3); display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--raio-pilula); border: 1px solid var(--cor-linha-forte); background: var(--cor-fundo); color: var(--cor-texto); font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--mov-rapido), border-color var(--mov-rapido), color var(--mov-rapido), transform var(--mov-rapido); }
@media (hover: hover) { .chip:hover { border-color: var(--cor-texto-3); } }
.chip[aria-checked="true"] { background: var(--cor-texto); border-color: var(--cor-texto); color: #fff; }
.chip[aria-disabled="true"] { background: var(--cor-superficie); border-color: transparent; color: var(--cor-desabilitado-fraco); text-decoration: line-through; cursor: not-allowed; }
.chip .icone { width: 16px; height: 16px; stroke-width: 2.2; }
/* Horários em grade de colunas fixas: o check do escolhido não empurra o chip para a linha de baixo. */
.chips--horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.chips--horas .chip { min-width: 0; padding: 0 var(--esp-1); }
.chips--horas .skel--chip { width: auto; }
.grupo-horas { display: flex; flex-direction: column; gap: var(--esp-2); }
.dias { display: flex; gap: var(--esp-2); overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 6px var(--esp-2); margin: 0 -6px; scrollbar-width: none; }
.dias::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .dias { scrollbar-width: thin; }
  .dias::-webkit-scrollbar { display: block; height: 6px; }
  .dias::-webkit-scrollbar-thumb { background: var(--cor-linha-forte); border-radius: 3px; }
}
.dia { flex: none; width: 56px; padding: 10px 0; border-radius: var(--raio-m); border: 1px solid var(--cor-linha); background: var(--cor-fundo); text-align: center; font-size: 12px; line-height: 16px; color: var(--cor-texto-3); scroll-snap-align: start; cursor: pointer; transition: transform var(--mov-rapido); }
.dia__num { display: block; margin-top: 2px; font-size: 19px; line-height: 24px; font-weight: 500; color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.dia[aria-checked="true"] { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-texto-inverso-2); }
.dia[aria-checked="true"] .dia__num { color: #fff; }
.dia[aria-disabled="true"] { background: var(--cor-superficie); border-color: transparent; cursor: not-allowed; }
.dia[aria-disabled="true"] .dia__num { color: var(--cor-texto-desabilitado); text-decoration: line-through; }
.chip:active:not([aria-disabled="true"]), .dia:active:not([aria-disabled="true"]) { transform: scale(.97); }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendario__mes { grid-column: 1 / -1; text-align: left; font-weight: 600; margin: var(--esp-3) 0 var(--esp-1); }
.calendario__semana { font-size: 12px; color: var(--cor-texto-3); padding: 6px 0; }
.calendario__dia { min-height: 44px; border: 0; border-radius: var(--raio-m); background: transparent; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
@media (hover: hover) { .calendario__dia:hover { background: var(--cor-superficie); } }
.calendario__dia[aria-checked="true"] { background: var(--cor-texto); color: #fff; }
.calendario__dia[aria-disabled="true"] { color: var(--cor-texto-desabilitado); text-decoration: line-through; background: transparent; cursor: not-allowed; }

/* ---------- Serviços ---------- */
.grade-servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.grade-servicos--compacta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-2); }
@media (min-width: 600px) { .grade-servicos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grade-servicos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4); }
  .grade-servicos--compacta { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--esp-3); }
}
/* Grupos por categoria (spec 2026-09-29 §4) */
.grupos-servicos { display: flex; flex-direction: column; gap: var(--esp-6); }
.grupo-servicos { display: flex; flex-direction: column; gap: var(--esp-3); }
.grupo-servicos[hidden], .grupo-servicos__titulo[hidden] { display: none; }
.grupo-servicos__titulo { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--cor-texto); }
.servico { position: relative; width: 100%; display: flex; flex-direction: column; padding: 0; text-align: left; color: inherit; background: var(--cor-superficie); border: 2px solid transparent; border-radius: var(--raio-g); overflow: hidden; cursor: pointer; transition: border-color var(--mov-rapido); }
.servico__img { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: var(--cor-superficie); color: var(--cor-ilustracao-vazia); }
.servico__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--mov) var(--curva); }
@media (hover: hover) { .servico:hover .servico__img img { transform: scale(1.03); } }
.servico__img .icone { width: 40px; height: 40px; stroke-width: 1.25; }
.servico__nome { padding: 10px 12px 12px; font-size: 15px; line-height: 20px; font-weight: 500; overflow-wrap: break-word; }
.grade-servicos--compacta .servico__nome { padding: 8px 8px 10px; font-size: 13px; line-height: 17px; }
.servico[aria-checked="true"] { border-color: var(--cor-texto); }
.servico__check { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--cor-texto); color: #fff; display: none; place-items: center; }
.servico[aria-checked="true"] .servico__check { display: grid; }
.servico__check .icone { width: 16px; height: 16px; stroke-width: 2.4; }
.servico-detalhe__img { width: 160px; aspect-ratio: 1; margin: 0 auto var(--esp-4); border-radius: var(--raio-g); overflow: hidden; background: var(--cor-superficie); display: grid; place-items: center; color: var(--cor-ilustracao-vazia); }
.servico-detalhe__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cards, agendamento, badges ---------- */
.card { background: var(--cor-fundo); border: 1px solid var(--cor-linha); border-radius: var(--raio-g); padding: var(--esp-4); }
.card--superficie { background: var(--cor-superficie); border-color: transparent; }
a.card { transition: border-color var(--mov-rapido); }
a.card:not(.ag) { display: block; }
@media (hover: hover) { a.card:hover { border-color: var(--cor-linha-forte); } }
.ag { display: flex; gap: var(--esp-3); align-items: flex-start; }
.ag__corpo { flex: 1; min-width: 0; }
.ag__titulo { display: block; font-size: 16px; line-height: 22px; font-weight: 500; }
/* O status fica só na linha do título; data, profissional e endereço usam a largura toda do card. */
.ag__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-2); }
.ag__cab .ag__titulo { min-width: 0; }
.ag__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
.ag__acoes .btn { flex: 1; }
.ag__acoes .btn--terciario { flex: none; }
/* Do tablet em diante os botões do card ficam no tamanho do texto (antes esticavam até ~900px). */
@media (min-width: 600px) { .ag__acoes .btn { flex: none; min-width: 140px; } .ag__acoes .btn--terciario { min-width: 0; } }
.data-bloco { flex: none; width: 56px; padding: 8px 0; border-radius: var(--raio-m); background: var(--cor-superficie); text-align: center; font-size: 12px; line-height: 16px; color: var(--cor-texto-3); }
.data-bloco__num { display: block; font-size: 20px; line-height: 24px; font-weight: 600; color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--raio-pilula); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.badge--neutro { background: var(--cor-superficie-2); color: var(--cor-texto-2); }
.badge--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.badge--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.badge--erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.badge--champagne { background: var(--cor-champagne-suave); color: var(--cor-champagne-texto); }
.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cor-superficie-2); color: var(--cor-texto-2); font-weight: 500; font-size: 15px; }
.avatar--g { width: 56px; height: 56px; font-size: 19px; }
.banner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-5); border-radius: var(--raio-g); background: var(--cor-superficie); }
.banner .btn { margin-top: var(--esp-3); }
@media (min-width: 1024px) { .banner { padding: var(--esp-6); } }

/* ---------- Alertas, toast, skeleton, vazio ---------- */
.alerta { display: flex; gap: var(--esp-3); align-items: flex-start; padding: 14px var(--esp-4); border-radius: var(--raio-m); font-size: 14px; line-height: 20px; }
.alerta strong { display: block; font-weight: 500; }
.alerta .btn { margin-top: var(--esp-2); }
.alerta--erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.alerta--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }
.alerta--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.alerta--info { background: var(--cor-superficie); color: var(--cor-texto-2); }
.nc-toasts { position: fixed; left: 50%; bottom: calc(var(--altura-nav) + var(--esp-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: var(--esp-2); width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px var(--esp-4); border-radius: var(--raio-m); background: var(--cor-texto); color: #fff; font-size: 14px; box-shadow: var(--sombra-2); animation: nc-subir var(--mov) var(--curva); }
.toast .icone { color: var(--cor-toast-sucesso); }
.toast--erro .icone { color: var(--cor-toast-erro); }
@media (max-width: 1023px) { .nc-main--fluxo ~ .nc-toasts { bottom: calc(96px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { .nc-toasts { bottom: var(--esp-6); } }
.skel { background: linear-gradient(90deg, var(--cor-superficie-2) 0, var(--cor-superficie) 40%, var(--cor-superficie-2) 80%); background-size: 200% 100%; animation: nc-brilho 1.4s linear infinite; border-radius: 8px; }
.skel--chip { display: inline-block; height: 44px; width: 76px; border-radius: var(--raio-pilula); }
.skel--dia { flex: none; height: 64px; width: 56px; border-radius: var(--raio-m); }
.skel--linha { height: 14px; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-6) var(--esp-4); text-align: center; }
.vazio__icone { width: 56px; height: 56px; margin-bottom: var(--esp-2); border-radius: 50%; display: grid; place-items: center; background: var(--cor-superficie); color: var(--cor-texto-3); }
.vazio .btn { margin-top: var(--esp-3); }
@keyframes nc-subir { from { opacity: 0; transform: translateY(8px); } }
@keyframes nc-brilho { to { background-position: -200% 0; } }

/* ---------- Painel (sheet no celular, modal no computador) ---------- */
.painel-fundo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: var(--cor-painel-fundo-escuro); animation: nc-aparecer var(--mov) var(--curva); }
.painel { width: 100%; max-height: 88vh; max-height: 88dvh; overscroll-behavior: contain; overflow-y: auto; padding: 10px var(--esp-5) calc(var(--esp-5) + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--cor-fundo); box-shadow: var(--sombra-2); animation: nc-subir-painel var(--mov) var(--curva); }
@media (max-width: 399px) { .painel { padding-left: var(--esp-4); padding-right: var(--esp-4); } }
.painel__alca { width: 40px; height: 4px; margin: 0 auto var(--esp-4); border-radius: 4px; background: var(--cor-linha-forte); }
.painel__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-3); }
/* Fechar (44px de toque) centrado na linha do título, e o X alinhado à borda do conteúdo. */
.painel__cab .btn-icone { margin: -10px -10px -10px 0; }
.painel__acoes { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-5); }
@keyframes nc-aparecer { from { opacity: 0; } }
@keyframes nc-subir-painel { from { opacity: .6; transform: translateY(24px); } }
@media (min-width: 1024px) {
  .painel-fundo { align-items: center; }
  .painel { width: 480px; padding: var(--esp-6); border-radius: var(--raio-g); }
  .painel__alca { display: none; }
  /* Lado a lado quando cabem; rótulos longos ("Trocar para Amanhã · 09:15") quebram em duas linhas
     de botões em vez de estourar a borda do modal (o .btn não quebra texto). */
  .painel__acoes { flex-direction: row-reverse; flex-wrap: wrap; }
  .painel__acoes .btn { flex: 1 1 auto; }
  /* Três ações não cabem lado a lado em 480px sem estourar a borda: continuam empilhadas. */
  .painel__acoes--pilha { flex-direction: column; }
}
/* Perfil, dados e agendamentos: coluna de leitura no computador (formulário e botões sem esticar a 1120px). */
.coluna-leitura { max-width: 640px; }

/* ---------- Listas e resumo ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista__item { position: relative; display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: 60px; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--cor-linha); text-align: left; color: inherit; }
.lista__item .btn-icone { position: relative; z-index: 1; }
.lista > li:last-child > .lista__item, .lista > .lista__item:last-child { border-bottom: 0; }
a.lista__item, button.lista__item { cursor: pointer; }
.lista__icone { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cor-superficie); color: var(--cor-texto-2); }
.lista__texto { flex: 1; min-width: 0; }
.lista__texto small { display: block; font-size: 13px; line-height: 18px; color: var(--cor-texto-3); }
.lista__seta { color: var(--cor-desabilitado-fraco); }
.historico__mes { margin-top: var(--esp-4); font-weight: 500; color: var(--cor-texto-2); }
.historico__abrir { display: block; padding: 0; background: none; border: 0; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.historico__abrir::after { content: ""; position: absolute; inset: 0; }
.resumo { margin: 0; border: 1px solid var(--cor-linha); border-radius: var(--raio-g); }
.resumo__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: 12px var(--esp-4); border-bottom: 1px solid var(--cor-linha); font-size: 15px; }
.resumo__linha:last-child { border-bottom: 0; }
.resumo__linha dt { color: var(--cor-texto-3); font-size: 14px; }
/* balance: um valor longo (o endereço) quebra em linhas parecidas, sem deixar "- SP" sozinho */
.resumo__linha dd { margin: 0; font-weight: 500; text-align: right; text-wrap: balance; }
.resumo__linha .resumo__valor--multilinha { white-space: pre-line; text-align: left; }
.resumo--sem-borda { border: 0; }
.resumo--sem-borda .resumo__linha { padding-left: 0; padding-right: 0; }
.resumo__trocar { position: relative; margin-left: var(--esp-2); min-height: 28px; padding: 4px 0; background: none; border: 0; color: var(--cor-champagne-texto); font-size: 13px; font-weight: 500; cursor: pointer; }
.resumo__trocar::after { content: ""; position: absolute; inset: -8px -6px; }

/* ---------- Fluxo de agendamento ---------- */
/* minmax(0, 1fr): sem isso a coluna implícita cresce até a largura da faixa de dias
   (rolagem própria) e a página inteira ganha rolagem horizontal no celular. */
.fluxo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
.fluxo__lateral { display: none; }
.fluxo-topo { display: flex; align-items: center; gap: var(--esp-2); margin-left: -10px; }
.fluxo-topo .nc-rotulo { margin-left: auto; }
.etapas { display: flex; gap: 6px; margin-top: var(--esp-2); }
.etapas__seg { flex: 1; height: 3px; border-radius: 3px; background: var(--cor-superficie-2); transition: background-color var(--mov); }
.etapas__seg[data-ativo] { background: var(--cor-texto); }
.etapa { display: flex; flex-direction: column; gap: var(--esp-4); margin-top: var(--esp-4); animation: nc-entrar var(--mov) var(--curva); }
.etapa__titulo:focus { outline: none; }
.pilula-servico { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--esp-2); padding: 6px 10px 6px 14px; border-radius: var(--raio-pilula); background: var(--cor-superficie); font-size: 14px; }
.atalho { display: flex; align-items: center; gap: var(--esp-3); padding: 12px 14px; border: 1px solid var(--cor-linha); border-radius: var(--raio-m); }
.atalho__icone { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cor-champagne-suave); color: var(--cor-champagne-texto); }
.atalho__texto { flex: 1; font-size: 15px; }
.atalho__texto strong { display: block; font-weight: 500; }
.barra-acao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom)); background: var(--cor-fundo); border-top: 1px solid var(--cor-linha); box-shadow: var(--sombra-1); }
.barra-acao__info { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--cor-texto-3); }
.barra-acao__info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--cor-texto); }
.sucesso { max-width: 440px; margin: var(--esp-6) auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); text-align: center; }
.sucesso .resumo, .sucesso .pilha { width: 100%; margin-top: var(--esp-3); text-align: left; }
.sucesso-anel { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); animation: nc-surgir 240ms var(--curva); }
.sucesso-anel .icone { width: 34px; height: 34px; stroke-width: 2; }
.entrar { max-width: 420px; margin: var(--esp-5) auto 0; display: flex; flex-direction: column; gap: var(--esp-5); }
.entrar__rodape { margin-top: var(--esp-6); text-align: center; }
/* No tablet o conteúdo ganha 24px de margem; a barra fixa acompanha para os textos alinharem. */
@media (min-width: 600px) { .barra-acao { padding-left: var(--esp-5); padding-right: var(--esp-5); } }
@keyframes nc-entrar { from { opacity: 0; transform: translateX(8px); } }
@keyframes nc-surgir { from { opacity: 0; transform: scale(.96); } }
@media (min-width: 1024px) {
  .fluxo { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; }
  .fluxo__lateral { display: block; position: sticky; top: 92px; }
  /* Etapa 3 já mostra o resumo completo (com "Trocar") na coluna principal: a lateral fica só com o botão */
  .fluxo[data-etapa="3"] .fluxo__resumo { display: none; }
  .fluxo[data-etapa="3"] .fluxo__lateral .card { padding: 0; border-color: transparent; background: transparent; }
  .barra-acao { display: none; }
}

/* ---------- Avisos no celular (ciclo 6, spec 2026-09-18 §5.1 e §5.2) ---------- */
/* O bloco e cada estado dele nascem hidden no HTML; assets/js/avisos.js mostra um só. */
.nc-avisos { display: flex; flex-direction: column; gap: var(--esp-2); }
/* Estas duas regras já são redundantes com a regra global `.nc [hidden] { display: none !important; }`
   (linha 15): é ela quem vence o `display: flex` acima (e o de .pilha e .lista__item, usados nos
   estados), e vence por causa do !important — não por especificidade. Ficam como rede de segurança
   local, para o dia em que `.nc-avisos` for usado fora de `.nc` ou o !important global sumir. */
.nc-avisos[hidden] { display: none; }
.nc-avisos [data-estado][hidden] { display: none; }
/* O aviso vazio fica fora do fluxo em vez de display: none: um leitor de tela só percebe a troca de
   texto de uma região role="status" se ela já estava na árvore de acessibilidade antes da troca. */
.nc-avisos [data-avisos-aviso]:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.nc-passos { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--esp-1); }
.nc-passos li { font-size: 14px; line-height: 20px; color: var(--cor-texto-3); }
/* Dentro de .sucesso (coluna centralizada), .nc-avisos encolheria ao conteúdo e herdaria o texto
   centralizado; e .sucesso .pilha (linha 337) daria margem de topo extra aos estados internos, que
   não são itens de topo do .sucesso. */
.sucesso .nc-avisos { width: 100%; text-align: left; }
.nc-avisos .pilha { margin-top: 0; }

/* Opções de um serviço ("Qual é o seu caso?", spec 2026-09-22 §10.1) */
.variacoes { display: grid; gap: var(--esp-2); }
.variacao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: var(--esp-3); border-radius: var(--raio-m); border: 1px solid var(--cor-linha-forte); background: var(--cor-fundo); color: var(--cor-texto); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--mov-rapido), background-color var(--mov-rapido); }
.variacao__nome { font-weight: 600; }
.variacao__info { color: var(--cor-texto-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.variacao[aria-checked="true"] { border-color: var(--cor-texto); background: var(--cor-superficie); box-shadow: inset 0 0 0 1px var(--cor-texto); }
.variacao:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 2px; }