/* ============================================================
   Colina Dom Bosco — design system
   Tokens + componentes usados na home, no portal e no cartão do colaborador.
   Guia visual completo em /marca/. Cores mudam SÓ aqui no :root.
   ============================================================ */
:root {
  /* ---- Cartela oficial (MIV Sandro Cunha, dez/2025) ---- */
  --verde: #268F52;          /* Verde Grama — cor do logo */
  --verde-cerrado: #3DAE4F;  /* Verde Cerrado — gráficos, ilustração (não usar com texto branco) */
  --ipe: #FFB80F;            /* Flor de Ipê — destaque, atenção (texto sempre Noite por cima) */
  --terracota: #FF7D33;      /* Terracota — campanhas, ilustração (texto Noite por cima) */
  --ceu: #91D1DB;            /* Céu de Brasília — fundos informativos (texto Noite por cima) */
  --lago: #3B369E;           /* Lago Paranoá — informação, links de apoio (aceita texto branco) */
  --concreto: #BFBFBF;       /* Concreto — desativado, divisórias fortes */
  --noite: #18131F;          /* Noite — textos, títulos, menu, rodapé */
  --nevoa: #EDEDE3;          /* Névoa — fundo das páginas */
  --areia: #F2E5D5;          /* Areia — superfícies quentes, área do QR */
  --creme: #F2E8DA;          /* creme do logo aplicado sobre verde/Noite (MIV p.3) */
  /* ---- Derivados para acessibilidade (não são cores novas da marca) ---- */
  --verde-acao: #1E7444;     /* Verde Grama escurecido: botões/links com texto branco (5,6:1) */
  --verde-acao-hover: #175C36;
  --broto: #E3F1E8;          /* Verde Grama a 12% — fundo de "em dia" */
  --ipe-claro: #FFF1CC;      /* Flor de Ipê clara — fundo de atenção */
  --ceu-claro: #E3F3F6;      /* Céu de Brasília claro — fundo de informação */
  /* Neutros */
  --grafite: #18131F;        /* texto principal = Noite */
  --cinza: #58595B;          /* texto secundário (cinza dos títulos do MIV) — 6:1 sobre Névoa */
  --linha: #D8D8CE;          /* bordas: entre Névoa e Concreto */
  --branco: #FFFFFF;
  /* Estados (vermelho é funcional, fora da marca: "bloqueado" precisa ser inconfundível) */
  --ok: #1E7444; --ok-fundo: #E3F1E8;
  --alerta: #7A5200; --alerta-fundo: #FFF1CC;
  --erro: #B42318; --erro-fundo: #FDECEA;
  --info: #3B369E; --info-fundo: #E3F3F6;
  /* Tipografia — títulos: Autorich Sans (MIV) quando chegar o arquivo web; até lá, Outfit */
  --fonte-titulo: "Autorich Sans", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Forma */
  --raio: 14px; --raio-p: 10px; --raio-pill: 999px;
  --sombra: 0 1px 2px rgba(24,19,31,.05), 0 6px 20px rgba(24,19,31,.07);
  --sombra-forte: 0 12px 40px rgba(24,19,31,.18);
  --largura: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte-texto); font-size: 16px; line-height: 1.55; color: var(--grafite); background: var(--nevoa); }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--noite); line-height: 1.15; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--verde-acao); }
.sobretitulo { font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--verde-acao); margin-bottom: .6rem; }
.suave { color: var(--cinza); }
.recipiente { max-width: var(--largura); margin: 0 auto; padding: 0 20px; }

/* ---- Botões ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 22px; border-radius: var(--raio-pill);
  border: 2px solid transparent; font: 600 1rem/1 var(--fonte-titulo); text-decoration: none; cursor: pointer; transition: background .15s, transform .05s, box-shadow .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-primario { background: var(--verde-acao); color: #fff; }
.btn-primario:hover { background: var(--verde-acao-hover); }
.btn-ipe { background: var(--ipe); color: var(--noite); }
.btn-ipe:hover { background: #F0A800; }
.btn-contorno { background: transparent; color: var(--noite); border-color: var(--noite); }
.btn-contorno:hover { background: var(--noite); color: #fff; }
.btn-claro { background: #fff; color: var(--noite); border-color: var(--linha); }
.btn-claro:hover { border-color: var(--verde-acao); }
.btn-perigo { background: var(--erro); color: #fff; }
.btn-texto { background: none; border: 0; color: var(--verde-acao); padding: 0 6px; min-height: 36px; }
.btn-p { min-height: 38px; padding: 0 16px; font-size: .92rem; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--ipe); outline-offset: 2px; }

/* ---- Formulários ---- */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-weight: 600; font-size: .9rem; color: var(--noite); }
.campo small { color: var(--cinza); font-size: .82rem; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; color: var(--grafite);
  background: #fff; border: 1.5px solid var(--linha); border-radius: var(--raio-p); }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--verde-acao); outline: none; box-shadow: 0 0 0 3px var(--broto); }
.campo-bad input, .campo-bad select, .campo-bad textarea { border-color: var(--erro); background: var(--erro-fundo); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 640px) { .grade-2, .grade-3 { grid-template-columns: 1fr; } }
.check, .campo.check { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: .92rem; }
.check input { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--verde-acao); }

/* ---- Cartões e selos ---- */
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--raio-pill); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo-ok { background: var(--ok-fundo); color: var(--ok); }
.selo-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo-erro { background: var(--erro-fundo); color: var(--erro); }
.selo-info { background: var(--info-fundo); color: var(--info); }
.selo-neutro { background: #E4E4DC; color: var(--cinza); }
.aviso { padding: 12px 16px; border-radius: var(--raio-p); font-size: .92rem; border-left: 4px solid; }
.aviso-ok { background: var(--ok-fundo); border-color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); border-color: var(--erro); color: #7a1a12; }
.aviso-info { background: var(--info-fundo); border-color: var(--info); }
.aviso-alerta { background: var(--alerta-fundo); border-color: var(--ipe); }

/* Onda — o traço da letra L do logo, usado como divisor de seções */
.onda { display: block; width: 100%; height: 48px; }

/* ---- Toast e modal do sistema (nunca alert/confirm do navegador) ---- */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 440px); }
.toast { background: var(--noite); color: #fff; padding: 12px 18px; border-radius: var(--raio-p); box-shadow: var(--sombra-forte); font-size: .95rem; animation: sobe .2s ease-out; }
.toast.erro { background: var(--erro); }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.veu { position: fixed; inset: 0; background: rgba(24,19,31,.5); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: var(--raio); width: min(100%, 460px); padding: 24px; box-shadow: var(--sombra-forte); }
.modal h3 { margin-bottom: .4em; }
.modal .acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }