/* =====================================================================
   ui-deco · tokens do "art déco pleno" (plano-v2, seção 14.1)
   Tema escuro: design/art-deco-pleno/tokens.css. Tema claro: design/marfim-bronze/tokens.css (sem o @import de
   fontes da rede). Escolha por data-theme="escuro" | "claro" no <html>; sem atributo, vale o escuro.
   No claro, ouro nunca é texto (1,89:1 sobre marfim): só ornamento.
   Os pares de texto são conferidos por packages/ui-deco/testes/contraste.test.mjs (AA: 4,5:1; borda e foco: 3:1).
   Fontes: nenhuma da rede. Cinzel e Source Sans 3 entram empacotadas quando o médico aprovar os arquivos (0049);
   até lá, a pilha cai nas fontes do sistema.
   ===================================================================== */

:root,
:root[data-theme="escuro"] {
  color-scheme: dark;

  --c-fundo:          #130A05;
  --c-lateral:        #190500;
  --c-superficie:     #1E130A;
  --c-campo:          #281A0E;
  --c-selecionado:    #3A2810;
  --c-hover:          #2E1F10;

  --c-texto:          #EFE6D4;
  --c-texto-2:        #CDBFA5;
  --c-texto-3:        #B3A387;
  --c-texto-lateral:  #D9CBB0;

  --c-acento:         #D8A860;  /* títulos e marca */
  --c-acento-forte:   #E8CF94;  /* texto do botão secundário */
  --c-botao-fundo:    #C49442;  /* fundo sólido do botão primário (o degradê fica por cima) */
  --c-sobre-botao:    #190500;
  --c-foco:           #F0D890;

  --c-filete:         #4A3418;
  --c-borda-campo:    #8A6A34;
  --c-borda-forte:    #C09048;

  --c-alerta:         #E8907A;
  --c-alerta-fundo:   #2B150D;
  --c-ok:             #7CC4A4;
  --c-ok-fundo:       #14251E;
  --c-info-fundo:     #241809;

  --grad-marca:       linear-gradient(180deg, #F6E3A8 0%, #E2B96C 42%, #B8862E 56%, #D8A860 78%, #F0D890 100%);
  --grad-botao:       linear-gradient(180deg, #F0D890 0%, #DDB066 48%, #C49442 52%, #B8863A 100%);
  --grad-filete:      linear-gradient(90deg, transparent 0%, #784818 12%, #C09048 35%, #F0D890 50%, #C09048 65%, #784818 88%, transparent 100%);
  --orn-losango:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0.8L11.2 6L6 11.2L0.8 6Z' fill='none' stroke='%23C09048'/%3E%3Cpath d='M6 4L8 6L6 8L4 6Z' fill='%23D8A860'/%3E%3C/svg%3E");
}

:root[data-theme="claro"] {
  color-scheme: light;

  --c-fundo:          #F5EFE3;
  --c-lateral:        #120904;
  --c-superficie:     #FCF9F2;
  --c-campo:          #FCF9F2;
  --c-selecionado:    #EFE1C3;
  --c-hover:          #EEE5D3;

  --c-texto:          #1F130A;
  --c-texto-2:        #4D3A27;
  --c-texto-3:        #6B5641;
  --c-texto-lateral:  #D9CBB0;

  --c-acento:         #7A4914;  /* bronze: o ouro não é texto no claro */
  --c-acento-forte:   #5E370C;
  --c-botao-fundo:    #6F4213;
  --c-sobre-botao:    #FFF9EE;
  --c-foco:           #1F130A;

  --c-filete:         #DACBAE;
  --c-borda-campo:    #9A7B48;
  --c-borda-forte:    #B69A68;

  --c-alerta:         #9A2A1C;
  --c-alerta-fundo:   #F8E6DE;
  --c-ok:             #3D5A2A;
  --c-ok-fundo:       #E5ECD9;
  --c-info-fundo:     #EEE5D3;

  --grad-marca:       none;
  --grad-botao:       none;
  --grad-filete:      linear-gradient(90deg, transparent 0%, #CDAE74 20%, #A87830 50%, #CDAE74 80%, transparent 100%);
  --orn-losango:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0.8L11.2 6L6 11.2L0.8 6Z' fill='none' stroke='%23A87830'/%3E%3Cpath d='M6 4L8 6L6 8L4 6Z' fill='%23A87830'/%3E%3C/svg%3E");
}

:root {
  /* Tipografia: Cinzel só em títulos curtos; texto em Source Sans 3, 16 px; número nunca em Cinzel (.num). */
  --f-titulo:   "Cinzel", "Trajan Pro", "Times New Roman", Georgia, serif;
  --f-texto:    "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --t-rotulo:   13px;
  --t-base:     16px;
  --t-medio:    18px;
  --t-titulo:   22px;
  --lh-texto:   1.55;
  --lh-justo:   1.25;
  --tracking-caps: 0.14em;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 48px;

  /* Aresta viva: raio de 0 a 2 px. */
  --r-0: 0;
  --r-1: 2px;
  --l-fina: 1px;
  --l-foco: 2px;
}

/* agendar. · celular primeiro, art déco pleno com os tokens de packages/ui-deco (a construção junta tokens.css
   antes deste arquivo). Layout próprio: uma coluna, moldura com filete dourado e losango na marca. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--c-fundo);
  color: var(--c-texto);
  font: 1rem/1.5 "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.moldura { max-width: 34rem; margin: 0 auto; min-height: 100vh; padding: 0 1rem 2rem; }
.marca {
  display: flex; align-items: center; gap: .6rem; padding: 1rem 0 .8rem;
  font-family: Cinzel, Georgia, "Times New Roman", serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-acento); border-bottom: 1px solid transparent; border-image: var(--grad-filete) 1;
}
.losango { width: 1.1rem; height: 1.1rem; background: var(--orn-losango) center / contain no-repeat; }

.tela { padding-top: 1.2rem; }
h1 { font-family: Cinzel, Georgia, serif; font-size: 1.45rem; line-height: 1.25; color: var(--c-acento); margin: .2rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.3rem 0 .4rem; color: var(--c-texto); }
p, li { color: var(--c-texto-2); }
a { color: var(--c-acento-forte); }
ul { padding-left: 1.2rem; }
ul.beneficios { list-style: none; padding-left: 0; }
ul.beneficios li { padding-left: 1.4rem; margin: .45rem 0; background: var(--orn-losango) 0 .35rem / .75rem no-repeat; }
.passo { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texto-3); margin: 0; }
.nota { font-size: .92rem; color: var(--c-texto-3); }
.rodape { font-size: .8rem; color: var(--c-texto-3); margin-top: 1.6rem; }

.campo { display: block; margin: .8rem 0; }
.campo span { display: block; font-size: .9rem; margin-bottom: .25rem; color: var(--c-texto-2); }
.campo input {
  width: 100%; min-height: 3rem; padding: .6rem .75rem; font: inherit; color: var(--c-texto);
  background: var(--c-campo); border: 1px solid var(--c-borda-campo); border-radius: 2px;
}
.campo.erro input { border-color: var(--c-alerta); }
fieldset.responsavel { border: 1px solid var(--c-filete); padding: .4rem .9rem .6rem; margin: 1rem 0; }
legend { color: var(--c-acento); padding: 0 .3rem; }

.acoes { display: flex; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap; }
.botao {
  flex: 1 1 10rem; min-height: 3rem; font: inherit; font-weight: 600; letter-spacing: .04em; cursor: pointer;
  color: var(--c-sobre-botao); background: var(--c-botao-fundo); background-image: var(--grad-botao);
  border: 1px solid var(--c-borda-forte); border-radius: 2px;
}
.botao.secundario { background: transparent; color: var(--c-acento-forte); }

/* Aceito e Não aceito: a mesma classe, o mesmo tamanho, a mesma cor e o mesmo peso (11.3). */
.par-respostas { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .6rem 0 1rem; }
.resposta {
  min-height: 3rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--c-texto); background: var(--c-superficie); border: 1px solid var(--c-borda-forte); border-radius: 2px;
}
.resposta[aria-pressed="true"] { background: var(--c-selecionado); outline: 2px solid var(--c-foco); outline-offset: 1px; }

.grade-opcoes { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: .8rem 0; }
.grade-opcoes.dias, .grade-opcoes.horarios { grid-template-columns: repeat(3, 1fr); }
.opcao {
  min-height: 2.8rem; font: inherit; cursor: pointer; text-align: center;
  color: var(--c-texto); background: var(--c-superficie); border: 1px solid var(--c-filete); border-radius: 2px;
}
.opcao[aria-pressed="true"] { background: var(--c-selecionado); border-color: var(--c-borda-forte); }
.opcao:disabled { color: var(--c-texto-3); cursor: not-allowed; text-decoration: line-through; }

.quadro { border: 1px solid var(--c-filete); background: var(--c-info-fundo); padding: .4rem 1rem .8rem; margin: 1rem 0; }
.pergunta { border-top: 1px solid var(--c-filete); padding-top: .4rem; }
.mensagem { color: var(--c-alerta); background: var(--c-alerta-fundo); padding: .6rem .8rem; border-left: 3px solid var(--c-alerta); }
.resumo { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0; }
.resumo dt { color: var(--c-texto-3); }
.resumo dd { margin: 0; color: var(--c-texto); }
.localizador { font-family: ui-monospace, Consolas, monospace; font-size: 1.25rem; letter-spacing: .15em; color: var(--c-acento); }
.link-gestao { word-break: break-all; user-select: all; font-family: ui-monospace, Consolas, monospace; color: var(--c-texto); }

:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }

@media (min-width: 40rem) {
  .moldura { padding-top: 1.5rem; }
  .grade-opcoes.horarios { grid-template-columns: repeat(4, 1fr); }
}