/* ============================================================
   base.css - variáveis globais e reset mínimo
   drpetrus.top · não alterar valores sem revisar todas as páginas
   ============================================================ */

/* AUD-51.1 - fallback metric-matched para Montserrat reduzir CLS.
   Antes do woff2 chegar, o browser usa Arial (sans-serif) com métricas
   AJUSTADAS para casar visualmente com Montserrat: largura, altura de
   linha, ascent/descent. Quando Montserrat real carrega via display=swap,
   a substituição é (quase) sem layout shift.
   Valores calibrados Arial → Montserrat (web.dev / Fontaine reference). */
@font-face {
  font-family: 'Montserrat-fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 23%;
  line-gap-override: 0%;
}

:root {
  /* Cores primárias */
  --az:  #1e4152;   /* azul escuro - cor principal */
  --ci:  #01a9ce;   /* ciano - destaque */
  --ci2: #5a5d60;   /* cinza médio (REV2-A11Y-CONTRAST: 6.0:1 sobre bg/branco; antes #6D7073 ~4.55:1 limítrofe) */
  --ve:  #3c825c;   /* verde */
  --ro:  #40295e;   /* roxo */

  /* Fundo e bordas (tema claro) */
  --bg: #f2f5f7;
  --bd: #d6e0e6;

  /* Sombras */
  --sh:  0 2px 20px rgba(30, 65, 82, .09);
  --shh: 0 8px 40px rgba(30, 65, 82, .18);

  /* Borda arredondada padrão */
  --r: 12px;

  /* Transição padrão (alias --transition removido em AUD-18; usar var(--tr)) */
  --tr: .3s cubic-bezier(.4, 0, .2, 1);
}

/* DRY logo branding: regras compartilhadas em _logo_branding.css
   (importadas tambem por error pages standalone que nao carregam base.css). */
@import url('_logo_branding.css?v=9');

/* DRY brand shell: navbar/cards/botao primario canonicos. Reutilizado
   por pages standalone (error pages, em-construcao, apps-nutrilab acesso). */
@import url('_brand_shell.css?v=10');

/* Logo do navbar público - compartilhado por index, sobre, apps, medtrab.
   bg/radius/padding/height (46px) vem de _logo_branding.css (canonico). */

/* Logo-link "Início" - compartilhado por todas as ferramentas clínicas */
.logo-home {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-home img {
  /* height/bg/radius/padding via _logo_branding.css canonico (46px) */
  display: block;
  transition: opacity .2s;
}
.logo-home:hover img { opacity: .85; }
.logo-home-label {
  font-family: Montserrat, 'Montserrat-fallback', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ci);
  transition: color .2s;
}
.logo-home:hover .logo-home-label { color: #fff; }
/* Login card: logo maior, sem label visível.
   bg/radius/padding canonicos vem de _logo_branding.css. */
.login-logo-row .logo-home img {
  height: 54px;
}

/* Botão voltar à home - compartilhado por todas as ferramentas clínicas */
.btn-back-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 50px;
  font-family: Montserrat, 'Montserrat-fallback', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-back-home:hover {
  color: #fff;
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.1);
}
/* Link "voltar" dentro do card de login (fundo branco) */
.login-back-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 11px;
  font-family: Montserrat, 'Montserrat-fallback', sans-serif;
  color: var(--ci2);
  text-decoration: none;
  opacity: .75;
  transition: opacity .2s, color .2s;
}
.login-back-link:hover { opacity: 1; color: var(--az); }

/* Reset mínimo */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* AUD-62 - alertas inline universais (utils.js::showAlert).
   Antes: duplicado em quests.css com 3 cores. Movido para cá pra cobrir
   apps standalone (imc, nutrilab, benzo) que não carregam quests.css. */
.alert     { padding: 11px 15px; border-radius: 6px; font-size: 12px; font-weight: 500; margin-bottom: 14px; display: none; }
.al-ok     { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.al-err    { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.al-warn   { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.al-info   { background: rgba(1,169,206,.08); color: var(--az); border-left: 3px solid var(--ci); }

/* Rodapé de versão (site-footer.js - fonte: /assets/version.json) */
.site-footer-version {
  display: block;
  text-align: center;
  font-size: 11px;
  font-family: inherit;
  color: #9aa3ab;
  padding: 24px 16px 16px;
  margin-top: auto;
  letter-spacing: .02em;
  user-select: none;
}
.site-footer-version a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color .2s, color .2s;
}
.site-footer-version a:hover,
.site-footer-version a:focus {
  color: var(--ci);
  border-bottom-color: var(--ci);
  outline: none;
}

/* AUD-45 - WCAG 2.1 AA: indicador de foco visivel em qualquer elemento
 * interativo. :focus-visible so dispara em navegacao por teclado, evitando
 * borda em mouse-click. Cor azul cyan com 3px solid + offset 2px atende
 * contraste minimo 3:1 conforme SC 1.4.11. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ci);
  outline-offset: 2px;
  border-radius: 3px;
}

/* AUD-45 - skip-to-content link (WCAG 2.4.1 Bypass Blocks). Visualmente
 * escondido ate receber foco via Tab; permite navegacao por teclado pular
 * direto ao conteudo principal sem percorrer header/nav. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--az);
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  font-weight: 600;
  transition: top .15s ease-out;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--ci);
}

/* AUD-45 - Reduce motion para usuarios com sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}