/*
 * Base do agendador: tokens da marca, reset e estrutura das telas.
 *
 * Todos os valores são cópia fiel do <style> de
 * /mockup/agendador-cardapio-web.html, com os mesmos nomes de variável e de
 * classe — assim a comparação entre a aplicação e o protótipo continua direta.
 *
 * Os componentes reutilizáveis moram em componentes.css; o que é exclusivo de
 * uma tela mora num arquivo próprio, carregado pela view via content_for(:head).
 */

/* ───────────────────────── Tokens da marca ───────────────────────── */
:root{
  --roxo:#59327a;
  --roxo-escuro:#41235c;
  --lilas:#a26ecd;
  --lilas-suave:#f2ebf9;
  --coral:#ff5959;
  --coral-escuro:#e64545;
  --amarelo:#ffc000;
  --amarelo-suave:#fff8e3;

  --tinta:#1d1526;
  --tinta-media:#5c5368;
  --tinta-fraca:#8b8496;
  --linha:#e7e2ee;
  --linha-forte:#d6cfe0;
  --papel:#ffffff;
  --fundo:#f7f5fa;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;
  --sombra-sm:0 1px 2px rgba(29,21,38,.06), 0 2px 8px rgba(29,21,38,.05);
  --sombra-md:0 4px 12px rgba(29,21,38,.08), 0 12px 32px rgba(29,21,38,.07);
  --sombra-coral:0 6px 18px rgba(255,89,89,.32);
  --transicao:180ms cubic-bezier(.22,.61,.36,1);
}

/* ───────────────────────── Reset e base ───────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--fundo);
  color:var(--tinta);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body::before{ /* brilho sutil da marca no topo */
  content:"";position:fixed;inset:0 0 auto;height:420px;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 380px at 12% -8%, rgba(162,110,205,.20), transparent 62%),
    radial-gradient(720px 320px at 92% -14%, rgba(255,89,89,.13), transparent 60%);
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--lilas);outline-offset:2px;border-radius:6px}

/* ───────────────────────── Layout / telas ─────────────────────────
   No mockup as quatro telas convivem no mesmo HTML e são alternadas por
   classe. Aqui cada tela é uma página, então .tela já entra ativa — o que
   preserva a mesma animação de entrada a cada navegação. */
.palco{position:relative;z-index:1;flex:1;width:100%;max-width:1080px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 56px}
.tela{display:block;animation:entra 420ms cubic-bezier(.22,.61,.36,1)}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .tela{animation:none} *{transition-duration:1ms !important} }

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}