/* ===============================================================
   AEGEA - OVERRIDES GLOBAIS
   ---------------------------------------------------------------
   Carregado apos theme.css (adx_displayorder 11) e consumido por
   todas as paginas do portal. Concentra o sistema de cards de
   aviso, antes duplicado como style inline em cada pagina.

   Nao editar theme.css para estes componentes.
   =============================================================== */

:root {
  --sucess: #065f46;
  --sucess-color: #16a34a;
  --sucess-bg: #ecfdf5;

  --error: #7f1d1d;
  --error-color: #dc2626;
  --error-bg: #fef2f2;

  --normal: #1e3a8a;
  --normal-color: #2563eb;
  --normal-bg: #eff6ff;

  --warning: #9a3412;
  --warning-color: #f97316;
  --warning-bg: #fff7ed;

  --info: #1f2937;
  --info-bg: #f8fafc;
}

/* ===============================
   CARDS DE AVISO
   =============================== */
/* ATENCAO: `.card` tambem existe no Bootstrap 5, que o portal carrega antes
   deste arquivo. La ela e um componente com `display:flex; flex-direction:
   column`, o que faria cada trecho de texto do aviso cair numa linha
   propria, alem de desenhar uma borda 1px em volta. Os tres resets abaixo
   (display / position / border) neutralizam isso — nao remover. */
.card {
  display: block;
  position: static;
  border: 0;
  border-left: 4px solid;
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.card.card-error {
  background: var(--error-bg);
  border-left-color: var(--error-color) !important;
  color: var(--error) !important;
}

.card.card-normal {
  background: var(--normal-bg);
  border-left-color: var(--normal-color) !important;
  color: var(--normal) !important;
}

.card.card-sucess {
  background: var(--sucess-bg);
  border-left-color: var(--sucess-color) !important;
  color: var(--sucess) !important;
}

.card.card-warning {
  background: var(--warning-bg);
  border-left-color: var(--warning-color) !important;
  color: var(--warning) !important;
}

/* --brand-color vem do theme.css / CSS da pagina; fallback garante a borda
   caso alguma pagina nao declare a variavel. */
.card.card-info {
  background: var(--info-bg);
  border-left-color: var(--brand-color, #0027bd) !important;
  color: var(--info) !important;
}

/* Variante compacta: avisos secundarios */
.card.card-sm {
  margin: 10px 0 14px;
  padding: 10px 12px;
  font-size: 13px;
}

/* ===============================================================
   TOASTS
   ---------------------------------------------------------------
   Avisos no canto superior direito, em substituicao ao alert() do
   navegador. Fecham no X ou sozinhos apos o tempo definido no JS.

   Reaproveitam as variaveis de cor dos cards, entao um toast de erro
   tem a mesma identidade visual de um .card-error.

   O comportamento vive em AegeaToast (JS). Aqui so a aparencia.
   =============================================================== */
.aegea-toast-wrap {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 380px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.aegea-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-left: 4px solid;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  line-height: 1.5;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .18s ease, transform .18s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.aegea-toast.is-visivel {
  opacity: 1;
  transform: translateX(0);
}

/* Saida: o JS remove o no depois da transicao */
.aegea-toast.is-saindo {
  opacity: 0;
  transform: translateX(16px);
}

.aegea-toast-corpo {
  flex: 1;
  min-width: 0;
}

.aegea-toast-titulo {
  font-weight: 700;
  margin-bottom: 2px;
}

.aegea-toast-fechar {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  color: inherit;
  opacity: .55;
}

.aegea-toast-fechar:hover,
.aegea-toast-fechar:focus {
  opacity: 1;
}

.aegea-toast-erro {
  background: var(--error-bg);
  border-left-color: var(--error-color);
  color: var(--error);
}

.aegea-toast-sucesso {
  background: var(--sucess-bg);
  border-left-color: var(--sucess-color);
  color: var(--sucess);
}

.aegea-toast-alerta {
  background: var(--warning-bg);
  border-left-color: var(--warning-color);
  color: var(--warning);
}

.aegea-toast-info {
  background: var(--info-bg);
  border-left-color: var(--brand-color, #0027bd);
  color: var(--info);
}

@media (max-width: 768px) {
  .aegea-toast-wrap {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* Respeita quem pediu menos animacao no sistema */
@media (prefers-reduced-motion: reduce) {
  .aegea-toast {
    transition: none;
    transform: none;
  }
  .aegea-toast.is-saindo {
    transform: none;
  }
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width: 768px) {

  .card-termo .card,
  .card-termo .card * {
    text-align: left !important;
  }

  .card-termo .card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ===============================================================
   FAQ FAB — botao flutuante "Precisa de ajuda?"
   ---------------------------------------------------------------
   Consolidado aqui a partir de 283 blocos espalhados por 17 CSS de
   pagina, que haviam divergido em 7 variantes de codigo. Medido no
   portal antes da consolidacao: as variantes renderizavam IDENTICAS
   (64x64, icone 32px, tooltip 44px/14px, turquesa #17e3cb) — a
   divergencia era ruido acumulado, nao intencao de design.

   Ao mexer no tamanho, lembrar que o conjunto e proporcional:
   circulo 64 / icone 32 / tooltip 44 / offset do tooltip 21.
   =============================================================== */

.faq-fab {
  position: fixed !important;

  right: 24px !important;
  bottom: 92px !important;

  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;

  color: #0027bd !important;
  line-height: 1 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  overflow: visible !important;
  isolation: isolate;

  cursor: pointer !important;
  z-index: 9999 !important;

  box-shadow: none !important;
  outline: none !important;

  transition: transform 0.25s ease !important;
}

/* Bolinha turquesa */
.faq-fab::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  width: 48px !important;
  height: 48px !important;

  background: #17e3cb !important;
  background-color: #17e3cb !important;

  border: none !important;
  border-radius: 50% !important;

  box-shadow:
    0 6px 16px rgba(0, 39, 189, 0.35) !important;

  z-index: 3 !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

/* Impede outros estilos de criarem elemento adicional */
.faq-fab::after {
  content: none !important;
  display: none !important;
}

/* Ícone azul */
.faq-fab svg {
  position: relative !important;
  z-index: 4 !important;

  width: 24px !important;
  height: 24px !important;

  display: block !important;

  color: #0027bd !important;
  fill: currentColor !important;

  pointer-events: none !important;
}

/* Barra recolhida */
.faq-fab-tooltip {
  position: absolute !important;

  /* Centraliza a barra na altura da bolinha */
  top: 50% !important;
  right: 16px !important;

  width: 0 !important;
  height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 0 !important;
  margin: 0 !important;

  /* Aparência da barra */
  background: #ffffff !important;
  background-color: #ffffff !important;

  border: 2px solid #17e3cb !important;
  border-radius: 16px !important;

  color: #0027bd !important;

  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: left !important;

  white-space: nowrap !important;
  overflow: hidden !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /*
    A barra fica atrás da bolinha.
  */
  z-index: 1 !important;

  transform: translateY(-50%) !important;
  box-sizing: border-box !important;

  box-shadow:
    0 6px 16px rgba(0, 39, 189, 0.12) !important;

  transition:
    width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.15s ease,
    visibility 0.15s ease !important;
}

/* Abre a barra para a esquerda */
.faq-fab:hover .faq-fab-tooltip,
.faq-fab:focus .faq-fab-tooltip,
.faq-fab:focus-visible .faq-fab-tooltip {
  width: 210px !important;

  /*
    O espaço à direita impede que o texto
    seja coberto pela bolinha.
  */
  padding: 0 50px 0 18px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;

  color: #0027bd !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: translateY(-50%) !important;
}

/* Efeito da bolinha */
.faq-fab:hover,
.faq-fab:focus,
.faq-fab:active {
  background: transparent !important;
  color: #0027bd !important;
  transform: translateY(-4px) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Sombra no hover */
.faq-fab:hover::before,
.faq-fab:focus::before {
  background: #17e3cb !important;

  transform: scale(1.03) !important;

  box-shadow:
    0 10px 24px rgba(0, 39, 189, 0.42) !important;
}

/* Foco pelo teclado */
.faq-fab:focus-visible::before {
  box-shadow:
    0 0 0 4px rgba(23, 227, 203, 0.35),
    0 10px 24px rgba(0, 39, 189, 0.42) !important;
}

/* Botão de ajuda no canto inferior direito */
.faq-fab {
  right: 24px !important;
  bottom: 24px !important;
}

/* ===============================================================
   MENU COLAPSADO (abaixo de xl — navbar-expand-xl)
   ---------------------------------------------------------------
   O .navbar-collapse aberto vinha com background transparente,
   position:static e z-index:auto. Sem fundo proprio e sem contexto
   de empilhamento, qualquer elemento posicionado da pagina aparece
   POR CIMA dos itens do menu — botoes de acao, cards e barras
   invadem a lista e o usuario ve os dois textos misturados.

   As regras abaixo dao ao menu aberto um fundo solido e um
   empilhamento acima do header (z-index 1000), fechando essa
   classe de problema em qualquer pagina.

   Vale para .show e .collapsing: durante a animacao de abrir e
   fechar o menu tem altura parcial, que e justamente quando a
   sobreposicao mais aparece.
   =============================================================== */
@media (max-width: 1199.98px) {

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    position: relative;
    z-index: 1050;
    background: #ffffff;
    /* !important porque o tema define box-shadow:none no cabecalho */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
  }

  /* Durante a animacao o Bootstrap encolhe a ALTURA do container e conta
     com overflow:hidden para o conteudo ser cortado junto. O tema define
     `.aegea-main-collapse { display: flex !important }` (theme.css 5283 e
     5435), que atropela essa mecanica: o container encolhia mas os itens
     continuavam desenhados fora dele, passando por cima do conteudo da
     pagina — o texto do menu aparecia depois da borda ja ter passado.

     Medido antes: container 112px, conteudo 276px, transbordando 180px. */
  .navbar-collapse.collapsing {
    overflow: hidden !important;
  }

  /* O header inteiro sobe junto. Sem isto o menu ate ganha z-index, mas
     fica preso ao contexto de empilhamento do wrapper (z-index 1000) e
     perde para qualquer elemento da pagina que passe disso. */
  .aegea-header-wrap {
    position: relative !important;
    z-index: 1050 !important;
  }
}

/* ===============================================================
   HEADER COLADO NAS BORDAS
   ---------------------------------------------------------------
   O header e position:fixed e o tema o afastava das bordas
   (theme.css 6925: top/left/right 8px, via --aegea-sticky-offset).
   Como ele flutua, essa folga virava uma fresta: ao rolar, o
   conteudo da pagina passava por tras e aparecia nas laterais e
   acima do cabecalho.

   Zerar os quatro lados fecha a fresta. O border-radius das caixas
   internas vai junto — cantos arredondados encostados na borda da
   tela ficariam com falhas nos vertices.
   =============================================================== */
:root {
  --aegea-sticky-offset: 0px;
}

.aegea-header-wrap {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* o tema limita a `calc(100% - 40px)`, o que deixava sobra na direita
     mesmo com right:0. Sem `width`: left+right ja definem a largura, e
     um width:100% junto estouraria a caixa para fora da tela. */
  width: auto !important;
  max-width: none !important;
}

/* Durante a animacao o Bootstrap encolhe a ALTURA do container e conta com
   overflow:hidden para o conteudo ser cortado junto. Sem isso o container
   encolhe mas os itens continuam desenhados fora dele, passando por cima da
   pagina — o texto do menu aparece depois de a borda ja ter passado.

   Fora de media query de proposito: `.collapsing` so existe enquanto o menu
   colapsado anima, entao a regra ja e especifica desse estado. */
.navbar-collapse.collapsing,
.aegea-main-collapse.collapsing {
  overflow: hidden !important;
}

.aegea-header-box,
.aegea-top-strip,
.aegea-header-wrap .navbar {
  border-radius: 0 !important;
}

/* ===============================================================
   LOOKUP FILTRADO
   ---------------------------------------------------------------
   Aparencia do web template `Aegea Lookup Filtrado`, que troca a
   modal de lookup do basic form por select ou autocomplete.

   O comportamento vive no proprio template (AegeaLookup); aqui so
   o visual da lista de sugestoes.
   =============================================================== */
.aegea-lookup {
  position: relative;
}

.aegea-lookup-dica {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.aegea-lookup-lista {
  position: absolute;
  z-index: 1100;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--border-gray, #cbd5e1);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.aegea-lookup-lista li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.aegea-lookup-lista li:hover,
.aegea-lookup-lista li:focus {
  background: var(--normal-bg, #eff6ff);
  color: var(--normal, #1e3a8a);
}

.aegea-lookup-lista .aegea-lookup-vazio {
  color: #6b7280;
  cursor: default;
  font-style: italic;
}

.aegea-lookup-lista .aegea-lookup-vazio:hover {
  background: transparent;
  color: #6b7280;
}