/*
 * SisAgenda — estilos customizados
 * Carregar SEMPRE depois de assets/vendor/bootstrap/bootstrap.min.css.
 * Tokens de cor conforme paleta do plan.md (001.RN02, 001.AD04).
 */

:root {
  /* Tokens de cor da marca (paleta oficial — plan.md) */
  --sa-bg: #FFFFFF;
  --sa-lilac-100: #F3ECFC;
  --sa-lilac-500: #8F5AD3;
  --sa-blue-100: #E8F5FC;
  --sa-blue-500: #217CB1;
  --sa-text: #33314B;
  --sa-text-muted: #5B5770;

  /*
   * Variantes RGB (uso interno em rgba()/sombras, não são tokens novos de marca).
   * -500 escurecidos em relação à proposta original de paleta do plan.md
   * (001.TK24): #9B6BD8→#8F5AD3 e #4FA9DE→#217CB1, mesmo matiz, para atingir
   * contraste AA (4.5:1) como texto/fundo de botão sobre branco.
   */
  --sa-lilac-500-rgb: 143, 90, 211;
  --sa-blue-500-rgb: 33, 124, 177;
  --sa-text-rgb: 51, 49, 75;

  /* --- Overrides das variáveis globais do Bootstrap 5.3 --- */
  --bs-body-bg: var(--sa-bg);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--sa-text);
  --bs-body-color-rgb: var(--sa-text-rgb);
  --bs-emphasis-color: var(--sa-text);
  --bs-emphasis-color-rgb: var(--sa-text-rgb);
  --bs-secondary-color: var(--sa-text-muted);
  --bs-secondary-color-rgb: 91, 87, 112;
  --bs-link-color: var(--sa-blue-500);
  --bs-link-color-rgb: var(--sa-blue-500-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--sa-blue-500) 80%, black);
  --bs-link-hover-color-rgb: var(--sa-blue-500-rgb);

  /* Altura da navbar fixa (includes/navbar.php), usada no offset do body,
     das âncoras de seção e do smooth scroll em main.js (001.TK16). */
  --sa-navbar-height: 4rem;
}

body {
  background-color: var(--sa-bg);
  color: var(--sa-text);
  /* Compensa a navbar fixed-top (includes/navbar.php) para o conteúdo não ficar coberto. */
  padding-top: var(--sa-navbar-height);
}

/* Compensa o offset da navbar fixa ao navegar/rolar até uma âncora de seção. */
section[id] {
  scroll-margin-top: var(--sa-navbar-height);
}

/*
 * Fallback progressivo de smooth scroll via CSS puro (001.RN08): funciona mesmo
 * com JavaScript desabilitado. Quando main.js está ativo, o scroll animado via
 * jQuery assume o controle (o navegador ainda aplica scroll-behavior nas
 * eventuais rolagens nativas remanescentes, sem conflito).
 */
html {
  scroll-behavior: smooth;
}

/* Utilitários de fundo para seções alternadas (sem gradiente) */
.sa-bg-lilac {
  background-color: var(--sa-lilac-100);
}

.sa-bg-blue {
  background-color: var(--sa-blue-100);
}

/* --- Navbar --- */
.navbar {
  --bs-navbar-brand-color: var(--sa-text);
  --bs-navbar-brand-hover-color: var(--sa-text);
  --bs-navbar-color: var(--sa-text);
  --bs-navbar-hover-color: var(--sa-lilac-500);
  --bs-navbar-active-color: var(--sa-lilac-500);
  background-color: var(--sa-bg);
  border-bottom: 1px solid var(--sa-lilac-100);
}

.navbar-brand img {
  height: 2rem;
  width: auto;
}

/* --- Botões --- */
/* Ação primária (ex.: "Cadastre-se grátis", "Assinar agora") */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sa-lilac-500);
  --bs-btn-border-color: var(--sa-lilac-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--sa-lilac-500) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sa-lilac-500) 80%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--sa-lilac-500) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--sa-lilac-500) 70%, black);
  --bs-btn-disabled-bg: var(--sa-lilac-500);
  --bs-btn-disabled-border-color: var(--sa-lilac-500);
  --bs-btn-focus-shadow-rgb: var(--sa-lilac-500-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--sa-lilac-500);
  --bs-btn-border-color: var(--sa-lilac-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sa-lilac-500);
  --bs-btn-hover-border-color: var(--sa-lilac-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sa-lilac-500);
  --bs-btn-active-border-color: var(--sa-lilac-500);
  --bs-btn-disabled-color: var(--sa-lilac-500);
  --bs-btn-disabled-border-color: var(--sa-lilac-500);
  --bs-btn-focus-shadow-rgb: var(--sa-lilac-500-rgb);
}

/* Ação secundária (ex.: "Ver funcionalidades") */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sa-blue-500);
  --bs-btn-border-color: var(--sa-blue-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--sa-blue-500) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sa-blue-500) 80%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--sa-blue-500) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--sa-blue-500) 70%, black);
  --bs-btn-disabled-bg: var(--sa-blue-500);
  --bs-btn-disabled-border-color: var(--sa-blue-500);
  --bs-btn-focus-shadow-rgb: var(--sa-blue-500-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--sa-blue-500);
  --bs-btn-border-color: var(--sa-blue-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sa-blue-500);
  --bs-btn-hover-border-color: var(--sa-blue-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sa-blue-500);
  --bs-btn-active-border-color: var(--sa-blue-500);
  --bs-btn-disabled-color: var(--sa-blue-500);
  --bs-btn-disabled-border-color: var(--sa-blue-500);
  --bs-btn-focus-shadow-rgb: var(--sa-blue-500-rgb);
}

/* --- Cards (seção Funcionalidades / Preços) --- */
.card {
  --bs-card-border-color: var(--sa-lilac-100);
  --bs-card-bg: var(--sa-bg);
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(var(--sa-text-rgb), 0.06);
}

.card-title {
  color: var(--sa-text);
}

.card-text {
  color: var(--sa-text-muted);
}

/* Ícones das seções de recursos (Funcionalidades) — círculo pastel, sem gradiente */
.sa-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--sa-lilac-100);
  color: var(--sa-lilac-500);
}

/* Lista de recursos inclusos no plano (seção Preços) */
.sa-price-features {
  max-width: 320px;
}

.sa-price-features li {
  position: relative;
  padding-left: 1.75rem;
}

.sa-price-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sa-blue-500);
  font-weight: 700;
}