/* =========================================================================
   CINCARE — BASE / DESIGN SYSTEM
   Fonte única de verdade para tokens (cores, sombras, raios, tipografia).
   Carregado por TODAS as páginas antes do CSS específico de cada uma.
   ========================================================================= */

/* ========================================================= RESET ========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========================================================= TOKENS (DESIGN SYSTEM) ========================================================= */

:root {
  /* ---- Marca ---- */
  --brand-navy: #13294b;
  --brand-ink: #1b2a3a;
  --brand-ink-deep: #0e1f33;
  --brand-teal: #00654e;
  --brand-teal-700: #054e3d;
  --brand-teal-600: #00755a;
  --brand-teal-500: #05856a;
  --brand-teal-400: #1a9078;
  --brand-gold: #d9a321;
  --brand-gold-soft: #e6b93f;

  /* ---- Superfícies ---- */
  --bg-page: #f4f6f8;
  --bg-soft: #eef2f5;
  --bg-tint: #edf4f1;
  --surface: #ffffff;
  --surface-alt: #f7f8fa;

  /* ---- Texto ---- */
  --text-primary: #1b2a3a;
  --text-secondary: #64758c;
  --text-muted: #8a99ad;

  /* ---- Bordas ---- */
  --border-color: #e6ecf1;
  --border-soft: #eef2f5;
  --border-strong: #cdd6df;

  /* ---- Formulários ---- */
  --input-border: #d4dee4;
  --input-bg: #ffffff;
  --placeholder: #8a99ad;

  /* ---- Estados ---- */
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fca5a5;
  --success: var(--brand-teal);
  --info-bg: #dbeafe;
  --info-text: #1d4ed8;

  /* ---- Sombras (suaves e em camadas — mais profundidade premium) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 35, 66, 0.04), 0 4px 12px rgba(15, 35, 66, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 35, 66, 0.05), 0 8px 20px rgba(15, 35, 66, 0.06), 0 18px 40px rgba(15, 35, 66, 0.07);
  --shadow-lg: 0 6px 16px rgba(15, 35, 66, 0.07), 0 18px 36px rgba(15, 35, 66, 0.09), 0 36px 64px rgba(15, 35, 66, 0.12);
  --shadow-xl: 0 20px 50px rgba(15, 35, 66, 0.12), 0 44px 88px rgba(15, 35, 66, 0.14);
  --shadow-teal: 0 12px 30px rgba(15, 35, 66, 0.1);

  /* ---- Raios ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Layout (em rem → acompanham a escala fluida do :root) ---- */
  --container-width: 75rem;    /* 1200px @16px · 1350px @18px · 1500px @20px */
  --card-width: 28.125rem;     /* 450px @16px */
  --form-width: 47.5rem;       /* 760px @16px */

  /* Respiro lateral do container (por lado) e largura útil resultante.
     Use `width: var(--shell)` em qualquer wrapper centralizado. */
  --gutter: 1.5rem;
  --shell: min(100% - (var(--gutter) * 2), var(--container-width));

  /* Teto do header. Token PRÓPRIO de propósito: várias páginas (access,
     cadastros) reduzem --container-width para estreitar só o card de
     conteúdo. O header não pode encolher junto — ele é o mesmo em todas
     as telas. Não sobrescreva este token por página. */
  --header-width: 83rem;       /* 1328px @16px · 1494px @18px · 1660px @20px */

  /* ---- Transição ---- */
  --ease: 0.2s ease;
  --ease-premium: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  /* =====================================================================
     PREMIUM  →  gradientes de marca, sombras ricas, brilhos e malhas.
     Camada de elevação visual usada em todas as páginas.
     ===================================================================== */

  /* Gradientes */
  --grad-navy: linear-gradient(135deg, #1f3350 0%, var(--brand-ink) 100%);
  --grad-navy-deep: linear-gradient(150deg, #17324b 0%, var(--brand-ink-deep) 100%);
  --grad-teal: linear-gradient(135deg, var(--brand-teal-400) 0%, var(--brand-teal) 100%);
  --grad-gold: linear-gradient(135deg, var(--brand-gold-soft) 0%, var(--brand-gold) 100%);
  --grad-hero: linear-gradient(115deg, #0a3226 0%, var(--brand-teal) 42%, #0c5f49 68%, #0a2e23 100%);
  --grad-surface: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  --grad-line: linear-gradient(90deg, var(--brand-teal-400), var(--brand-gold));

  /* Sombras premium (neutras, suaves, minimalistas — sem brilho colorido) */
  --shadow-2xl: 0 24px 60px rgba(15, 35, 66, 0.13), 0 6px 18px rgba(15, 35, 66, 0.06);
  --shadow-premium: 0 1px 2px rgba(15, 35, 66, 0.03), 0 10px 28px rgba(15, 35, 66, 0.07), 0 28px 56px rgba(15, 35, 66, 0.07);
  --shadow-float: 0 14px 38px rgba(15, 35, 66, 0.1);
  --shadow-gold: 0 10px 24px rgba(15, 35, 66, 0.1);

  /* Sem "glow" — sombras neutras discretas + anel de foco */
  --glow-teal: 0 8px 22px rgba(15, 35, 66, 0.08);
  --glow-gold: 0 8px 20px rgba(15, 35, 66, 0.07);
  --ring-teal: 0 0 0 4px rgba(0, 101, 78, 0.12);
  --ring-gold: 0 0 0 4px rgba(217, 163, 33, 0.16);

  /* Acabamentos premium reutilizáveis (borda de luz + fio-guia teal→dourado) */
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --card-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --hairline: linear-gradient(90deg, transparent, rgba(0, 101, 78, 0.35), rgba(217, 163, 33, 0.42), transparent);
  --tile-shadow: 0 8px 18px rgba(15, 35, 66, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);

  /* Malhas de fundo bem sutis (leve profundidade, nada de neon) */
  --mesh-teal: radial-gradient(1200px 520px at 50% -12%, rgba(0, 101, 78, 0.035), transparent 60%);
  --mesh-soft: radial-gradient(900px 440px at 100% 0%, rgba(0, 101, 78, 0.03), transparent 55%);

  /* =====================================================================
     APELIDOS LEGADOS  →  mapeiam nomes antigos de token para a paleta
     unificada. Assim, remover o :root local de uma página já aplica as
     cores padronizadas sem precisar reescrever cada regra.
     ===================================================================== */

  /* superfícies / cards */
  --bg-card: var(--surface);
  --card-bg: var(--surface);
  --bg-sidebar: var(--surface-alt);

  /* verdes/teal legados (login, registro, dashboards, access) */
  --green: var(--brand-teal);
  --green-dark: var(--brand-teal-700);
  --green-soft: rgba(0, 101, 78, 0.08);
  --brand: var(--brand-teal);
  --brand-dark: var(--brand-teal-700);
  --brand-light: #e8f3f0;
  --brand-muted: #c9e2db;
  --accent: var(--brand-teal);
  --icon-green: var(--brand-teal);
  --icon-dark: var(--brand-ink);

  /* navy / escuros legados */
  --dark: var(--brand-ink);
  --dark-secondary: var(--brand-navy);
  --button-bg: var(--brand-ink);
  --button-bg-hover: var(--brand-ink-deep);

  /* texto / linhas legados */
  --text-label: var(--brand-navy);
  --line-color: var(--border-color);
  --border: var(--border-color);

  /* raios legados */
  --radius-card: var(--r-lg);
  --radius-input: 10px;
  --radius-button: 12px;
  --radius-option: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: 16px;
  --radius-xl: var(--r-xl);
  --radius-full: var(--r-pill);

  /* sombras legadas */
  --shadow-card: var(--shadow-md);

  /* access-specific legados */
  --option-bg: #f3f4f6;
  --option-hover-patient: #e8f3ee;
  --option-hover-doctor: #eef2f5;
  --option-hover-clinic: #e8f3ee;
  --icon-bg: #e8edf2;
  --icon-hover-patient: #dce8e2;
  --icon-hover-doctor: #e8edf2;
  --icon-hover-clinic: #dce8e2;
}

/* ========================================================= BASE ELEMENTOS ========================================================= */

/* =====================================================================
   ESCALA FLUIDA  →  a peça central da proporção do site.

   Como TODO o layout é escrito em `rem`, crescer o tamanho de fonte da
   raiz faz o site inteiro (tipografia, espaçamentos, cards, ícones,
   containers) crescer JUNTO e na mesma proporção em telas maiores.

   • até 1280px  → 1rem = tamanho padrão do navegador (16px). Nada muda,
     então todo o responsivo já existente (media queries ≤1200px)
     continua valendo exatamente como antes.
   • 1280 → 2560px → 1rem cresce de 16px até 20px, de forma contínua.
   • acima de 2560px → trava em 20px para não exagerar.

   Usar `rem` (e não `px`) na fórmula preserva a preferência de tamanho
   de fonte que o usuário configurou no navegador — acessibilidade.
   ===================================================================== */

html {
  font-size: clamp(1rem, 0.75rem + 0.3125vw, 1.25rem);
  scroll-behavior: smooth;

  /* Reserva sempre o espaço da barra de rolagem. Sem isto, uma página
     curta (sem barra) fica ~15px mais larga que uma página longa (com
     barra) e o header "pula" de lugar ao navegar entre telas. */
  scrollbar-gutter: stable;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: rgba(0, 101, 78, 0.16);
  color: var(--brand-ink);
}

/* Scrollbar sutil e consistente */
* {
  scrollbar-width: thin;
  scrollbar-color: #c3cdd6 transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: #c3cdd6;
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #a9b6c2;
  background-clip: padding-box;
}

/* Utilitário global */
.hidden {
  display: none !important;
}

/* ========================================================= HEADER (marketing: home, legal, access) ========================================================= */

.layout-header {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}

.layout-container.layout-nav {
  /* Mais largo que o conteúdo (como no design original), mas com teto
     proporcional — evita logo e login "grudados" nas bordas em telas 2K+.
     Usa --header-width (e não --container-width) para ficar idêntico em
     todas as páginas, mesmo nas que estreitam o conteúdo. */
  width: min(92%, var(--header-width));
  margin: 0 auto;
  min-height: 5.25rem;
  display: flex;
  align-items: center;
}

.component-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.component-logo img {
  width: 9.0625rem;
  height: auto;
  display: block;
}

/* ========================================================= MENU ========================================================= */

.layout-nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.component-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2.6rem;
  margin: 0;
  padding: 0;
}

.component-menu a {
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 600;
  color: #5a6b82;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.component-menu a:hover {
  color: var(--brand-navy);
}

/* ========================================================= AÇÕES DO HEADER ========================================================= */

.layout-header-actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-left: 2rem;
  flex-shrink: 0;
}

/* ========================================================= BOTÕES COMPARTILHADOS ========================================================= */

.button-secondary {
  background: var(--grad-navy);
  color: #ffffff;
  text-decoration: none;
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0 1.45rem;
  border-radius: 0.8125rem;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 20px rgba(15, 35, 66, 0.2);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, filter 0.3s ease;
}

.button-secondary svg,
.button-secondary i {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke-width: 2.2;
}

.layout-container.layout-nav > .button-secondary {
  margin-left: auto;
}

.button-secondary:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 28px rgba(15, 35, 66, 0.28);
}

.button-login {
  background: var(--grad-navy);
  color: #fff;
  text-decoration: none;
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0 1.45rem;
  border-radius: 0.8125rem;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 20px rgba(15, 35, 66, 0.2);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, filter 0.3s ease;
}

.button-login:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 28px rgba(15, 35, 66, 0.28);
}

.button-login i,
.button-login svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.2;
  flex-shrink: 0;
}

/* ========================================================= RESPONSIVO (HEADER) ========================================================= */

@media (max-width: 1200px) {
  .component-menu {
    gap: 2rem;
  }

  .layout-header-actions {
    gap: 1.2rem;
    margin-left: 1.4rem;
  }
}

@media (max-width: 1100px) {
  .layout-nav-menu,
  .component-menu {
    display: none !important;
  }

  .layout-container.layout-nav {
    justify-content: space-between;
  }

  .layout-header-actions {
    margin-left: auto;
  }
}

@media (max-width: 820px) {
  .button-club {
    display: none;
  }

  .layout-header-actions {
    gap: 1rem;
  }

  .component-logo img {
    width: 132px;
  }
}

@media (max-width: 480px) {
  .layout-container.layout-nav {
    width: min(94%, 1440px);
    min-height: 74px;
  }

  .component-logo img {
    width: 118px;
  }

  .button-secondary,
  .button-login {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 11px;
    font-size: 0;
    gap: 0;
  }

  .button-secondary span,
  .button-login span {
    display: none;
  }

  .button-secondary i,
  .button-secondary svg,
  .button-login i,
  .button-login svg {
    width: 17px;
    height: 17px;
    margin: 0;
  }
}

/* ========================================================= TERMOS (checkbox nativo garantido) ========================================================= */

.terms-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

#acceptTerms {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
  position: static !important;
  pointer-events: auto !important;
  cursor: pointer;
}

.terms-check-icon {
  display: none !important;
}