/* =========================================================================
   Identidade visual 3D6IA (fase 5).

   Fonte: documento "3d6 Analytics — Identidade Visual" no Outline. Verde
   #27a862, grafite #26292e e branco; tipografia Now Alt / ZT Nature, com
   Montserrat no lugar enquanto a web nao tem as fontes da marca.

   Tudo o que tem cor nas telas le daqui: as telas nao declaram hex proprio
   (a nao ser as cores de estado: erro, aviso, sucesso). Este arquivo tambem
   repinta o Bootstrap (primary, links, foco, checkbox), para que um
   `btn-primary` ja saia na cor da marca.

   A folha impressa (static/css/atividade.css) NAO le daqui: ela tem as
   proprias fontes (Gabarito, ABeeZee, Playwrite BR) e sai em preto.
   ========================================================================= */

@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/Montserrat-latin-wght.311d352d9323.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Marca ── */
  --ia-verde: #27a862;
  --ia-verde-rgb: 39, 168, 98;
  --ia-verde-escuro: #1e8a4f;
  --ia-verde-claro: #e6f5ec;
  --ia-verde-palido: #f3faf6;
  --ia-grafite: #26292e;
  --ia-grafite-rgb: 38, 41, 46;
  --ia-grafite-2: #3a3f46;
  --ia-branco: #ffffff;

  /* ── Superficies e texto ── */
  --ia-fundo: #f4f6f5;
  --ia-borda: #e2e6e4;
  --ia-borda-forte: #cdd3d0;
  --ia-texto: #26292e;
  --ia-texto-suave: #5f6670;
  --ia-texto-apagado: #9aa1a8;

  /* ── Componentes ── */
  --ia-cabecalho: linear-gradient(135deg, var(--ia-grafite) 0%, var(--ia-grafite-2) 100%);
  --ia-raio: 8px;
  --ia-sombra: 0 1px 3px rgba(var(--ia-grafite-rgb), 0.08), 0 1px 2px rgba(var(--ia-grafite-rgb), 0.04);
  --ia-fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ── Bootstrap repintado ── */
  --bs-primary: var(--ia-verde);
  --bs-primary-rgb: var(--ia-verde-rgb);
  --bs-primary-text-emphasis: #0f4a2a;
  --bs-primary-bg-subtle: var(--ia-verde-claro);
  --bs-primary-border-subtle: #a9dcbf;
  --bs-success: var(--ia-verde-escuro);
  --bs-success-rgb: 30, 138, 79;
  --bs-dark: var(--ia-grafite);
  --bs-dark-rgb: var(--ia-grafite-rgb);
  --bs-link-color: var(--ia-verde-escuro);
  --bs-link-color-rgb: 30, 138, 79;
  --bs-link-hover-color: #166b3c;
  --bs-link-hover-color-rgb: 22, 107, 60;
  --bs-body-font-family: var(--ia-fonte);
  --bs-body-color: var(--ia-texto);
  --bs-border-color: var(--ia-borda);
  --bs-focus-ring-color: rgba(var(--ia-verde-rgb), 0.25);
}

body {
  font-family: var(--ia-fonte);
  background-color: var(--ia-fundo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; }

/* ── Botoes ── */
.btn { font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--ia-verde);
  --bs-btn-border-color: var(--ia-verde);
  --bs-btn-hover-bg: var(--ia-verde-escuro);
  --bs-btn-hover-border-color: var(--ia-verde-escuro);
  --bs-btn-active-bg: #1a7744;
  --bs-btn-active-border-color: #1a7744;
  --bs-btn-disabled-bg: var(--ia-verde);
  --bs-btn-disabled-border-color: var(--ia-verde);
  --bs-btn-focus-shadow-rgb: var(--ia-verde-rgb);
}
.btn-success {
  --bs-btn-bg: var(--ia-verde-escuro);
  --bs-btn-border-color: var(--ia-verde-escuro);
  --bs-btn-hover-bg: #1a7744;
  --bs-btn-hover-border-color: #1a7744;
  --bs-btn-active-bg: #166b3c;
  --bs-btn-active-border-color: #166b3c;
  --bs-btn-disabled-bg: var(--ia-verde-escuro);
  --bs-btn-disabled-border-color: var(--ia-verde-escuro);
  --bs-btn-focus-shadow-rgb: 30, 138, 79;
}
.btn-outline-primary,
.btn-outline-success {
  --bs-btn-color: var(--ia-verde-escuro);
  --bs-btn-border-color: var(--ia-verde);
  --bs-btn-hover-bg: var(--ia-verde);
  --bs-btn-hover-border-color: var(--ia-verde);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ia-verde-escuro);
  --bs-btn-active-border-color: var(--ia-verde-escuro);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--ia-verde);
  --bs-btn-disabled-border-color: var(--ia-verde);
  --bs-btn-focus-shadow-rgb: var(--ia-verde-rgb);
}
.btn-dark {
  --bs-btn-bg: var(--ia-grafite);
  --bs-btn-border-color: var(--ia-grafite);
  --bs-btn-hover-bg: var(--ia-grafite-2);
  --bs-btn-hover-border-color: var(--ia-grafite-2);
}

/* ── Formularios ── */
.form-control:focus,
.form-select:focus {
  border-color: #93d4b0;
  box-shadow: 0 0 0 0.2rem rgba(var(--ia-verde-rgb), 0.18);
}
.form-check-input:checked {
  background-color: var(--ia-verde);
  border-color: var(--ia-verde);
}
.form-check-input:focus {
  border-color: #93d4b0;
  box-shadow: 0 0 0 0.2rem rgba(var(--ia-verde-rgb), 0.18);
}
.form-range::-webkit-slider-thumb { background-color: var(--ia-verde); }
.form-range::-moz-range-thumb { background-color: var(--ia-verde); }

/* ── Outros componentes com azul fixo no Bootstrap ── */
.progress, .progress-stacked { --bs-progress-bar-bg: var(--ia-verde); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ia-verde); }
.nav { --bs-nav-link-color: var(--ia-verde-escuro); --bs-nav-link-hover-color: #166b3c; }
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--ia-verde);
  --bs-dropdown-font-size: 0.9rem;
}
.list-group {
  --bs-list-group-active-bg: var(--ia-verde);
  --bs-list-group-active-border-color: var(--ia-verde);
}
.pagination {
  --bs-pagination-color: var(--ia-verde-escuro);
  --bs-pagination-hover-color: #166b3c;
  --bs-pagination-active-bg: var(--ia-verde);
  --bs-pagination-active-border-color: var(--ia-verde);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--ia-verde-rgb), 0.18);
}
.accordion {
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--ia-verde-palido);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--ia-verde-rgb), 0.18);
}
.card {
  --bs-card-border-color: var(--ia-borda);
  --bs-card-border-radius: var(--ia-raio);
}

/* ── Cabecalho de cartao das telas (plano, atividade, perfil...) ── */
.ia-cabecalho {
  background: var(--ia-cabecalho);
  color: #fff;
  border-bottom: 3px solid var(--ia-verde);
}

/* ── Marca: cubo + "3D6IA" ── */
.ia-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.ia-marca:hover { color: #fff; }
.ia-marca__cubo { width: 30px; height: 30px; flex-shrink: 0; }
.ia-marca__nome {
  font-family: var(--ia-fonte);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
/* O "3" com a barra de cima em verde, como no logo da 3D6. */
.ia-marca__tres {
  background: linear-gradient(to bottom, var(--ia-verde) 0 30%, currentColor 30% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ia-marca__ia { color: var(--ia-verde); }
.ia-marca--escura { color: var(--ia-grafite); }
.ia-marca--escura:hover { color: var(--ia-grafite); }
.ia-marca--grande .ia-marca__cubo { width: 52px; height: 52px; }
.ia-marca--grande .ia-marca__nome { font-size: 2.2rem; }