/* Tema do Portal MBE derivado do Manual de Identidade Visual da APM (docs/identidade_visual/, R18).
   A origem de cada token (página do manual) está em docs/identidade_visual/README.md. */
:root {
  /* paleta principal (manual p.44) */
  --apm-primaria: #00675a;          /* Pantone 329C */
  --apm-primaria-escura: #004165;   /* Pantone 302C */
  --apm-primaria-media: #009581;    /* Pantone 3285C: superfícies e detalhes; não em texto pequeno (3,7:1) */
  --apm-secundaria: #009581;        /* Pantone 3285C */
  --apm-verde-rodape: #005248;      /* derivado: 329C a 80% de luminosidade, como o rodapé do portal atual */
  /* cores para destaque (p.30 e p.45) */
  --apm-destaque: #ffb612;          /* Pantone 1235C */
  --apm-destaque-escuro: #c59217;   /* Pantone 1245C */
  /* cinza da marca (p.42) e paleta de suporte (p.30) */
  --apm-texto: #616365;             /* Pantone Cool Gray 10C */
  --apm-fundo: #e2dcd5;             /* suporte, tom claro (amostrado da p.30) */
  --apm-fundo-suave: #f4f1ed;       /* derivado: meio-termo entre --apm-fundo e branco */
  --apm-branco: #ffffff;
  --apm-raio-box: 1.25rem;
  --apm-exclusivo-solido: #bd3632;  /* Pantone 180C sólido para o selo (p.45) */
  --apm-sombra: 0 1px 2px rgba(0, 65, 101, .06), 0 2px 8px rgba(0, 65, 101, .06);
  --apm-sombra-elevada: 0 6px 20px rgba(0, 65, 101, .14);          /* "box com apenas um de seus cantos arredondados" (p.36) */

  /* mapeamento para o Bootstrap 5.3 */
  --bs-primary: var(--apm-primaria);
  --bs-primary-rgb: 0, 103, 90;
  --bs-secondary: var(--apm-secundaria);
  --bs-secondary-rgb: 0, 149, 129;
  --bs-body-color: var(--apm-texto);
  --bs-body-color-rgb: 97, 99, 101;
  /* p.47: em web e vídeo a fonte é a Verdana de sistema; Neo Sans fica para impressos e internos */
  --bs-body-font-family: Verdana, "DejaVu Sans", Geneva, Tahoma, sans-serif;
  --bs-body-font-size: .9375rem;    /* Verdana é larga: 15px equivale ao corpo 16px de outras famílias */
  --bs-heading-color: var(--apm-primaria-escura);
  --bs-link-color: var(--apm-primaria);
  --bs-link-color-rgb: 0, 103, 90;
  --bs-link-hover-color: var(--apm-primaria-escura);
  --bs-link-hover-color-rgb: 0, 65, 101;
  --bs-border-radius: .5rem;
  --bs-focus-ring-color: rgba(0, 149, 129, .35);
}

/* p.32: Light em tamanhos grandes, Bold só para destaques. Verdana não tem Light: títulos em Regular. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 400; }

.form-control:focus, .form-select:focus {
  border-color: var(--apm-secundaria);
  box-shadow: 0 0 0 .25rem rgba(0, 149, 129, .25);
}
hr { border-color: var(--apm-fundo); opacity: 1; }

/* botões: primário na 329C; secundário sobre branco (p.36: texto sobre áreas brancas ou cor sólida) */
.btn-primary {
  --bs-btn-bg: var(--apm-primaria);
  --bs-btn-border-color: var(--apm-primaria);
  --bs-btn-hover-bg: var(--apm-primaria-escura);
  --bs-btn-hover-border-color: var(--apm-primaria-escura);
  --bs-btn-active-bg: var(--apm-primaria-escura);
  --bs-btn-active-border-color: var(--apm-primaria-escura);
  --bs-btn-focus-shadow-rgb: 0, 149, 129;
}
.btn-secondary {
  --bs-btn-color: var(--apm-primaria);
  --bs-btn-bg: var(--apm-branco);
  --bs-btn-border-color: var(--apm-primaria);
  --bs-btn-hover-color: var(--apm-branco);
  --bs-btn-hover-bg: var(--apm-primaria);
  --bs-btn-hover-border-color: var(--apm-primaria);
  --bs-btn-active-color: var(--apm-branco);
  --bs-btn-active-bg: var(--apm-primaria-escura);
  --bs-btn-active-border-color: var(--apm-primaria-escura);
  --bs-btn-focus-shadow-rgb: 0, 149, 129;
}
.faixa-botoes .btn { min-width: 11rem; }
.btn { transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }

/* header: faixa verde de ponta a ponta como no portal atual (headerbar do theme.min.css), sticky e
   encolhendo ao rolar (≥ 992px). O logo fica em uma caixa branca pendurada no topo da faixa
   (p.36: marca sobre fundo branco; p.50: respiro da marca; um só canto arredondado). */
.header-portal {
  position: sticky; top: 0; z-index: 1030;
  background: linear-gradient(to bottom right, var(--apm-primaria), var(--apm-primaria-escura));
  color: var(--apm-branco);
}
.header-portal > .container { min-height: 96px; transition: min-height .2s; }
.header-portal .marca {
  display: inline-block; align-self: flex-start;
  background: var(--apm-branco); padding: .75rem 1.5rem 1rem;
  border-radius: 0 0 var(--apm-raio-box) 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  transition: padding .2s;
}
.header-portal .logo-header { width: auto; height: auto; max-height: 80px; transition: max-height .2s; }
.header-portal.header-scrolled > .container { min-height: 64px; }
.header-portal.header-scrolled .marca { padding: .4rem 1rem .6rem; }
.header-portal.header-scrolled .logo-header { max-height: 52px; } /* p.51: nunca abaixo de 28 mm (≈106px de largura) */
.redes-sociais a { color: var(--apm-branco); font-size: 1.1rem; }
.redes-sociais a:hover, .redes-sociais a:focus { color: var(--apm-destaque); }

/* caixa de destaque: fundo de suporte e um único canto arredondado (p.36) */
.caixa-apm { background: var(--apm-fundo-suave); border-radius: 0 var(--apm-raio-box) 0 0; }

/* abertura: título visível e busca em destaque */
.abertura-titulo { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); color: var(--apm-primaria-escura); margin-bottom: .75rem; }
.abertura-subtitulo { max-width: 40rem; margin-bottom: 1.75rem; line-height: 1.6; }
.titulo-secao { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); color: var(--apm-primaria-escura); }
.titulo-secao::after {
  content: ""; display: block; width: 3rem; height: 3px; margin: .6rem auto 0;
  background: var(--apm-secundaria);
}
.busca-integrada { max-width: 56rem; }
.barra-busca {
  padding: .5rem; background: var(--apm-branco);
  border-radius: 0 var(--apm-raio-box) 0 0; box-shadow: var(--apm-sombra-elevada);
}
.barra-busca .form-control, .barra-busca .form-select { border-color: transparent; background-color: var(--apm-fundo-suave); }
.campo-busca { position: relative; }
.campo-busca > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--apm-primaria); pointer-events: none; }
.campo-busca .form-control { padding-left: 2.75rem; }
.seletor-busca { flex: 0 0 auto; }
@media (min-width: 992px) { .seletor-busca { width: 13rem; } }

/* alertas */
.alert { border-radius: 0 var(--apm-raio-box) 0 0; }
.alert-warning {
  --bs-alert-bg: #fff3cf;              /* derivado: tom claro da 1235C */
  --bs-alert-border-color: var(--apm-destaque);
  --bs-alert-color: #5c4a0e;           /* derivado: tom escuro da 1235C, 7,9:1 sobre o fundo */
  --bs-alert-link-color: var(--apm-primaria-escura);
}

/* grupos de serviços: acesso livre e exclusivo lado a lado (≥ 1200px), cada um numa caixa de suporte com
   um canto arredondado (p.36); o exclusivo leva filete na 180C, a mesma cor que sinaliza o bloqueio */
.grupo-servicos { padding: 1.25rem; background: var(--apm-fundo-suave); border-top: 3px solid var(--apm-secundaria); border-radius: 0 var(--apm-raio-box) 0 0; }
.grupo-servicos--exclusivo { border-top-color: var(--apm-exclusivo-solido); }
.grupo-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; min-height: 2.1rem; }
.grupo-titulo { font-size: 1.05rem; font-weight: 700; color: var(--apm-primaria-escura); margin: 0; }
.grupo-titulo > i { color: var(--apm-primaria); }
.grupo-servicos--exclusivo .grupo-titulo > i { color: var(--apm-exclusivo-solido); }
.selo-liberado {
  display: inline-flex; align-items: center; padding: .25rem .65rem; font-size: .8rem; font-weight: 700;
  color: var(--apm-branco); background: var(--apm-primaria); border-radius: 0 .5rem 0 0;
}

/* cards: cartões brancos com sombra suave e um canto arredondado (p.36); hover eleva o cartão.
   Exclusivo deslogado: ícone esmaecido e cadeado na 180C no canto (o grupo já diz "Exclusivo para associados"). */
.card-recurso {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 100%; padding: 2.25rem 1.25rem 1.5rem; text-align: center; text-decoration: none;
  color: var(--apm-texto); background: var(--apm-branco);
  border: 1px solid var(--apm-fundo); border-radius: 0 var(--apm-raio-box) 0 0;
  box-shadow: var(--apm-sombra);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-recurso:hover, .card-recurso:focus-visible {
  transform: translateY(-4px); box-shadow: var(--apm-sombra-elevada); border-color: var(--apm-secundaria);
}
.card-recurso:focus-visible { outline: 3px solid var(--apm-secundaria); outline-offset: 2px; }
.card-recurso .icone-recurso { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: contain; }
.card-recurso .titulo { display: block; margin-top: 1rem; font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--apm-primaria); }
.card-recurso:hover .titulo { color: var(--apm-primaria-escura); }
.card-recurso.exclusivo-bloqueado .icone-recurso { opacity: .5; filter: grayscale(.4); }
.card-recurso.exclusivo-bloqueado .titulo { color: var(--apm-texto); }
.cadeado-card {
  position: absolute; top: .6rem; right: .6rem;
  display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  font-size: .75rem; color: var(--apm-branco); background: var(--apm-exclusivo-solido);
  border-radius: 0 .5rem 0 0;
}

/* modais: um canto arredondado (p.36), cabeçalho na 329C com texto branco (6,8:1) */
.modal-content { border: 0; border-radius: 0 var(--apm-raio-box) 0 0; overflow: hidden; }
.modal-header { background: var(--apm-primaria); color: var(--apm-branco); border-bottom: 0; }
.modal-header .modal-title { color: var(--apm-branco); }
.modal-header .btn-close { filter: invert(1); }
/* modais informativos: texto alinhado à esquerda em linhas curtas e blocos-resumo com ícone */
.texto-leitura { max-width: 42rem; line-height: 1.7; }
.texto-leitura p { text-align: left; }
.subtitulo-modal { font-size: 1rem; font-weight: 700; color: var(--apm-primaria); margin: 0 0 .75rem; }
.destaques-modal + .subtitulo-modal, .alert + .subtitulo-modal { margin-top: 1.25rem; }
.destaque-modal {
  padding: 1.1rem 1rem; background: var(--apm-fundo-suave);
  border-left: 3px solid var(--apm-secundaria); border-radius: 0 var(--apm-raio-box) 0 0;
}
.destaque-modal > i { font-size: 1.4rem; color: var(--apm-primaria); margin-bottom: .5rem; display: block; }
.destaque-modal .destaque-titulo { font-size: .95rem; font-weight: 700; color: var(--apm-primaria-escura); margin-bottom: .35rem; }
.destaque-modal p { font-size: .875rem; line-height: 1.55; }
.destaque-modal--linha { display: flex; gap: 1rem; align-items: flex-start; max-width: none; }
.destaque-modal--linha > i { margin: .15rem 0 0; }
.destaque-modal--bloqueado { border-left-color: var(--apm-exclusivo-solido); }
.destaque-modal--bloqueado > i::after { content: "\f023"; font-size: .8rem; margin-left: .4rem; color: var(--apm-exclusivo-solido); vertical-align: top; }
.modal-apm .modal-footer { border-top-color: var(--apm-fundo); gap: .5rem; }
.abas-servicos { background: var(--apm-primaria); border-bottom: 0; border-radius: 0 var(--apm-raio-box) 0 0; overflow: hidden; }
.abas-servicos .nav-link { color: var(--apm-branco); border: 0; border-bottom: 3px solid transparent; border-radius: 0; }
.abas-servicos .nav-link:hover, .abas-servicos .nav-link:focus { background: var(--apm-primaria-escura); color: var(--apm-branco); }
.abas-servicos .nav-link.active { background: transparent; color: var(--apm-branco); border-bottom-color: var(--apm-destaque); }
fieldset legend { color: var(--apm-primaria); font-weight: 700; }
.accordion { --bs-accordion-active-bg: var(--apm-fundo-suave); --bs-accordion-active-color: var(--apm-primaria-escura); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(0, 149, 129, .25); }

/* painel de boas-vindas: flutua no canto sem backdrop; cabeçalho sólido na 329C como os modais (p.36).
   z-index acima do header (1030) e abaixo dos modais do Bootstrap (1050+). */
.painel-boas-vindas {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1040;
  display: flex; flex-direction: column; width: min(24rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 8rem));
  background: var(--apm-branco); border-radius: 0 var(--apm-raio-box) 0 0; box-shadow: var(--apm-sombra-elevada), 0 2px 6px rgba(0, 0, 0, .12);
  overflow: hidden; animation: painel-entrada .3s ease-out;
}
.painel-boas-vindas[hidden] { display: none; }
@keyframes painel-entrada { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.painel-cabecalho { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; background: var(--apm-primaria); color: var(--apm-branco); }
.painel-titulo { flex: 1; margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--apm-branco); }
.painel-titulo:focus { outline: none; }
.painel-titulo:focus-visible { outline: 2px solid var(--apm-destaque); outline-offset: 2px; }
.btn-minimizar { flex: 0 0 auto; padding: .15rem .45rem; color: var(--apm-branco); background: transparent; border: 0; border-radius: .25rem; }
.btn-minimizar:hover, .btn-minimizar:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
.painel-corpo { padding: 1rem; overflow-y: auto; font-size: .875rem; line-height: 1.55; }
.resumo-boas-vindas li { display: flex; gap: .65rem; align-items: flex-start; }
.resumo-boas-vindas li + li { margin-top: .6rem; }
.resumo-boas-vindas li > i { margin-top: .2rem; color: var(--apm-primaria); }
.resumo-boas-vindas .fa-lock { color: var(--apm-exclusivo-solido); }
.painel-corpo .destaque-modal { padding: .75rem .85rem; }
.painel-rodape { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--apm-fundo); }
.painel-rodape .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .85rem; }
.seta-saiba-mais { transition: transform .2s; }
[aria-expanded="true"] > .seta-saiba-mais { transform: rotate(180deg); }
.botao-boas-vindas {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1040;
  width: 3rem; height: 3rem; font-size: 1.35rem; color: var(--apm-branco); background: var(--apm-primaria);
  border: 0; border-radius: 50%; box-shadow: var(--apm-sombra-elevada);
}
.botao-boas-vindas:hover { background: var(--apm-primaria-escura); }
.botao-boas-vindas:focus-visible { outline: 3px solid var(--apm-destaque); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .painel-boas-vindas { right: 0; bottom: 0; width: 100%; max-height: 60vh; }
}

/* footer: faixa única como no portal atual, no verde-rodapé (329C escurecida) com texto branco (≈9:1).
   Créditos ao lado da AMB e das redes só a partir de 1400px (a linha pede ~690px); abaixo, linha própria. */
.footer-portal { background: var(--apm-verde-rodape); color: var(--apm-branco); font-size: .875rem; }
.footer-portal a { color: var(--apm-branco); }
.footer-portal a:hover, .footer-portal a:focus { color: var(--apm-destaque); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 0; }
.footer-links li + li::before { content: "|"; margin: 0 .75rem; opacity: .7; }
@media (min-width: 1400px) { .footer-links { justify-content: flex-start; } }
@media (max-width: 767.98px) {
  .footer-links { flex-direction: column; }
  .footer-links li + li::before { content: none; }
}

/* quem pede menos movimento no sistema não vê animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card-recurso:hover, .card-recurso:focus-visible { transform: none; }
}