/* base.css — Tokens de design (cores, raio, fonte), reset, estilos de elementos base, ícones (.i) e container (.wrap). */

/* ===== Tokens: altere aqui para trocar a identidade visual =====
   Paleta base do site: só estas quatro cores. Todas as outras (textos, bordas, fundos suaves, hover, sombras) são MISTURAS delas
   com branco ou entre si (color-mix), então trocar uma das quatro muda o site inteiro de forma coerente.
   Fora da paleta ficam só as cores de ESTADO (confirmado, livre, quase cheio, lotado, erro, pendente), que precisam ser distinguíveis do azul. */
:root{
  /* Paleta base */
  --navy-deep:#152a44;        /* azul noite: texto, fundo do painel de login, fundo do aviso rápido */
  --brand:#1c448a;            /* azul marinho: marca, botões, barra lateral */
  --brand-light:#4788c8;      /* azul claro: destaques, bordas de seleção, foco */
  --bg:#f3f6fb;               /* fundo das páginas */

  /* Superfícies escuras (barra lateral, telas de acesso, datas, botões escuros) */
  --btn:#162a43; --btn-shadow:0 6px 16px color-mix(in srgb,#162a43 35%,transparent);              /* botões: uma cor só; o mouse por cima só ganha sombra */
  --side-bg:#162a43;                                                                            /* fundo da barra lateral */
  --header:var(--side-bg); --header-2:var(--side-bg);      /* header-2: hover dos botões e círculo da tela de conclusão */
  --nav-hover:rgba(255,255,255,.08); --nav-active:rgba(255,255,255,.16);   /* véu branco sobre o azul marinho da barra lateral */
  --on-dark:var(--bg); --on-dark-soft:color-mix(in srgb,var(--brand-light) 35%,white);      /* texto sobre o azul */
  --circle-2:color-mix(in srgb,var(--brand-light) 55%,var(--brand));                          /* círculo decorativo das telas cheias */

  /* Ação e destaque */
  --accent:var(--brand-light);
  --primary:var(--btn); --primary-soft:color-mix(in srgb,var(--brand-light) 14%,white); --primary-edge:color-mix(in srgb,var(--brand-light) 45%,white);
  --primary-hover:var(--header-2); --primary-off:color-mix(in srgb,var(--brand) 40%,white);   /* hover e botão desativado */

  /* Texto, fundos e bordas */
  --surface:#fff; --text:var(--brand); --muted:color-mix(in srgb,var(--side-bg) 72%,white); --border:color-mix(in srgb,var(--brand) 16%,white);
  --surface-blue:color-mix(in srgb,var(--brand-light) 4%,white);       /* fundo claro das telas de acesso */
  --soft-surface:color-mix(in srgb,var(--brand) 6%,white); --accent-soft:color-mix(in srgb,var(--brand-light) 11%,white);
  --off:color-mix(in srgb,var(--brand) 11%,white);
  --shadow:0 10px 30px color-mix(in srgb,var(--brand) 10%,transparent);

  /* Estados (função, não marca): verde = confirmado/aceito, amarelo = pendente, vermelho = recusado/erro. Ficam fora da paleta de propósito. */
  --ok:#059669; --ok-soft:#d1fae5; --ok-ink:#065f46;
  --warn-soft:#fef3c7; --warn-ink:#92400e; --warn-edge:#f5d68a;
  --err:#be123c; --err-soft:#ffe4e6;

  /* LEGENDA do calendário (livre, poucos horários, sem horários, indisponível): cores próprias, fora da paleta, de propósito */
  --free:#0d9488; --almost:#f59e0b; --full:#e11d48; --dot-off:#8a97b0; --day-off:#e3e8f1;

  --sidebar-w:220px;
  --radius:20px;
  /* Nexa (manual 04.21): Heavy nos títulos, Bold nos subtítulos, Regular nos textos. Fonte comercial: usada se estiver instalada;
     senão Manrope (carregada no index.html), geométrica e parecida. */
  --font:'Nexa','Manrope','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,Menlo,monospace;         /* senhas temporárias e outros códigos: mesma largura de caractere, fácil de diferenciar letra por letra */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.45;min-height:100vh}
h1,h2{font-weight:800}
h3,h4{font-weight:700}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1840px;margin:0 auto;padding:0 2.25rem}

/* Atributo hidden sempre vence os display: definidos nas classes; .sr esconde só visualmente (leitores de tela ainda leem) */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Códigos (senha temporária, protocolos e outros valores gerados pelo sistema): fonte monoespaçada, para não confundir letra com número */
.mono{font-family:var(--font-mono);letter-spacing:.02em}

/* Sprite SVG de ícones: fica no HTML, só precisa sair do fluxo da página */
.sprite{position:absolute}