/**
 * ========================================
 * ARQUIVO: style.css
 * ========================================
 * Estilos globais da aplicação EB3-Unskilled
 * 
 * ANALOGIA ANDROID:
 * Este arquivo é como um arquivo "dimens.xml" + "colors.xml" + "styles.xml"
 * combinados. Aqui definimos cores, tamanhos, tipografia e layouts reutilizáveis
 * (temas, breakpoints responsivos, etc.) que toda a aplicação Android usaria.
 * ======================================== */

/* ========================================
   1. VARIÁVEIS GLOBAIS & PALETA DE CORES
   ======================================== */
:root {
  /* Cores principais (inspiradas na bandeira dos EUA) */
  --navy-primary: #1b2a47;      /* Azul Navy profundo - cor principal do menu */
  --red-accent: #b22234;        /* Vermelho elegante - botões e destaque */
  --light-gray: #f5f7fa;        /* Fundo claro para bom contraste */
  --white: #ffffff;
  --dark-text: #2c3e50;

  /* Tamanhos e espaçamento (breakpoints responsivos - Mobile First) */
  --nav-width: 250px;           /* Largura do drawer (menu lateral) */
  --navbar-height: 60px;        /* Altura da navbar superior fixa */

  /* Duração de transições (mais rápido para Mobile) */
  --transition-speed: 0.3s;
}

/* ========================================
   2. RESET & ESTILOS GLOBAIS
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Analogia: font-family é como "fontFamily" em Android TextView */
  background-color: var(--light-gray);
  color: var(--dark-text);
  line-height: 1.6;
  overflow-x: hidden; /* Evitar scroll horizontal desnecessário */
}

/* ========================================
   2.1 ACESSIBILIDADE: SKIP LINK & FOCO
   ======================================== */

/* Link "Pular para o conteúdo": fica fora da tela até receber foco
   via teclado (Tab). Permite ao usuário pular a sidebar inteira.
   Analogia Android: atalho equivalente ao que o TalkBack oferece
   automaticamente, mas que na Web precisa ser construído à mão. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 10px;
  z-index: 2000;

  background-color: var(--navy-primary);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 5px 5px;
  text-decoration: none;
  font-weight: 600;

  transition: top var(--transition-speed) ease;
}

.skip-link:focus {
  top: 0;
}

/* Anel de foco consistente para navegação via teclado em toda a app.
   Analogia Android: equivalente ao highlight de foco do D-pad/TalkBack. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--red-accent);
  outline-offset: 2px;
}

/* ========================================
   4. NAVBAR SUPERIOR (Top App Bar)
   ========================================
   Analogia Android:
   Equivalente a uma Toolbar/AppBar fixa no topo da Activity, com o
   ícone de navigation drawer (hambúrguer) à esquerda e o título do
   app ao lado - sempre visível, por cima de tudo o resto. */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  z-index: 1200;
  /* Acima do drawer (1100) e do backdrop (1050), para o hambúrguer
     continuar clicável mesmo com o menu aberto. */

  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;

  background-color: var(--navy-primary);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hamburger-btn {
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;

  transition: background-color var(--transition-speed) ease;
}

.hamburger-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-logo {
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 4px;
}

.navbar-logo-img {
  height: calc(var(--navbar-height) - 4px);
  width: 120px;
}

/* ========================================
   3.1 BARRA DE PESQUISA (Search Bar)
   ========================================
   Analogia Android: SearchView na Toolbar - campo de busca alinhado
   à direita (margin-left: auto empurra como um Spacer), com cor de
   destaque vermelha (remete à bandeira dos EUA) e um dropdown de
   resultados (lista estilo PopupWindow/Autocomplete). */
.navbar-search {
  position: relative;
  margin-left: auto;
}

.search-input {
  width: 220px;
  padding: 8px 14px;
  border: 2px solid var(--red-accent);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 14px;
  transition: all var(--transition-speed) ease;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.search-input:focus {
  outline: none;
  background-color: var(--white);
  color: var(--dark-text);
  box-shadow: 0 0 0 3px rgba(178, 34, 52, 0.35);
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 100%;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  background-color: var(--white);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  list-style: none;
  z-index: 1300;
}

.search-results[hidden] {
  display: none;
}

.search-result-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--light-gray);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item.is-active {
  background-color: var(--light-gray);
}

.search-result-page {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--red-accent);
  margin-bottom: 2px;
}

.search-result-heading {
  display: block;
  font-size: 14px;
  color: var(--dark-text);
}

.search-no-results {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--dark-text);
}

/* ========================================
   4.1 SIDEBAR / DRAWER (Menu Lateral)
   ========================================
   Analogia Android:
   O <nav> se comporta como um NavigationView dentro de um
   DrawerLayout: começa fora da tela (translateX(-100%)) e "flutua"
   por cima do conteúdo quando aberto, sem empurrar o layout. */
nav {
  width: var(--nav-width);
  height: 100vh;
  /* Analogia: 100vh = 100% da altura visível do dispositivo (como match_parent em Android) */

  background-color: var(--navy-primary);
  color: var(--white);

  /* Posicionamento e rolagem */
  position: fixed;
  left: 0;
  top: 0;
  overflow-y: auto;
  /* Permite scroll interno se o menu ficar muito grande */

  z-index: 1100;
  /* Abaixo da navbar (1200), mas acima do backdrop (1050) e do
     conteúdo - flutua por cima da página quando aberto. */

  display: flex;
  flex-direction: column;

  /* Drawer começa fechado, deslizado para fora da tela à esquerda */
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--transition-speed) ease-in-out,
    visibility 0s var(--transition-speed);
  /* Analogia: transition é como ValueAnimator ou animateLayoutChanges no Android */
}

/* ========================================
   4.2 LISTA DE NAVEGAÇÃO (UL/LI)
   ======================================== */
nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  /* Analogia: Como um LinearLayout vertical com orientation="vertical" */

  flex-grow: 1;
  /* Faz a lista ocupar o espaço restante da sidebar */

  /* padding-top maior para abrir espaço abaixo da navbar fixa,
     que fica sobreposta ao topo do drawer */
  padding: calc(var(--navbar-height) + 15px) 0 15px;
}

nav li {
  /* Sem margin externo, usa padding no <a> para padronizar */
  margin: 0;
}

nav a {
  /* Estilo de link/botão */
  display: block;
  padding: 15px 20px;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;

  /* Transições suaves ao hover */
  transition: all var(--transition-speed) ease;

  border-left: 4px solid transparent;
  /* Barra visual à esquerda para estado ativo */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-left-color: var(--red-accent);
  /* Analogia: Comportamento similar a OnClickListener feedback visual */
}

nav a.active {
  background-color: var(--red-accent);
  border-left-color: var(--red-accent);
  color: var(--white);
}

/* ========================================
   4.3 ESTADO ABERTO DO DRAWER
   ========================================
   Analogia Android:
   Equivalente a chamar drawerLayout.openDrawer(GravityCompat.START) -
   o menu desliza para dentro da tela e fica imediatamente visível e
   focável, sem esperar o fim da animação. */
nav.open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--transition-speed) ease-in-out,
    visibility 0s 0s;
}

/* ========================================
   4.4 BACKDROP (Fundo Escurecido)
   ========================================
   Analogia Android:
   É o "scrim" semi-transparente que o DrawerLayout desenha sobre o
   conteúdo quando o drawer está aberto - clicar nele fecha o menu,
   como um Dialog com "cancelable on touch outside". */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  /* Entre o drawer (1100) e o conteúdo */

  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-speed) ease-in-out,
    visibility 0s var(--transition-speed);
}

.sidebar-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--transition-speed) ease-in-out,
    visibility 0s 0s;
}

/* ========================================
   4.5 BOTÃO VOLTAR AO TOPO
   ========================================
   Analogia Android: como um FAB secundário controlado por um
   RecyclerView.OnScrollListener - some/aparece conforme o scroll. */
.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;

  width: 50px;
  height: 50px;
  border-radius: 50%;

  background-color: var(--navy-primary);
  color: var(--white);
  border: none;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(27, 42, 71, 0.4);

  /* Inicialmente invisível: só aparece após rolar a página */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-speed) ease-in-out;
  z-index: 500;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn.is-visible:hover {
  background-color: #14213a;
  transform: translateY(-4px);
}

.scroll-top-btn:active {
  transform: translateY(0);
}

/* ========================================
   5. CONTEÚDO PRINCIPAL (#content)
   ======================================== */
#content {
  /* O drawer agora flutua por cima do conteúdo (não empurra mais o
     layout), então #content sempre ocupa a largura inteira da tela.
     padding-top reserva espaço para a navbar fixa não cobrir o
     início do conteúdo. */
  padding: calc(var(--navbar-height) + 40px) 40px 40px;
  min-height: 100vh;

  background-color: var(--light-gray);
  /* Fundo cinza para destacar os "cards" de cada seção (ver item 7) */
  overflow-y: auto;

  /* Transição suave ao trocar de página */
  transition: opacity 0.15s ease-out;
}

/* Estado de transição entre páginas (ver loadPage() em app.js).
   Analogia Android: equivalente a um overridePendingTransition()
   com fade entre Activities/Fragments. */
#content.is-loading {
  opacity: 0;
}

/* #content recebe foco programático após cada navegação (a11y),
   mas não deve exibir um anel de foco ao redor da página inteira. */
#content:focus,
#content:focus-visible {
  outline: none;
}

/* ========================================
   6. CARROSSEL/BANNER (Hero Section com Slides)
   ======================================== */
.hero-section {
  background: linear-gradient(135deg, var(--navy-primary) 0%, #0f1621 100%);
  /* gradient é como um <shape> com GradientDrawable no Android */

  color: var(--white);
  padding: 0;
  /* Sem padding extra: o .carousel interno já controla seu espaçamento */
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* box-shadow = android:elevation com sombra customizada */
}

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  /* Analogia: height é como android:layout_height="400dp" */

  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide {
  /* Posicionamento absoluto para empilhar slides */
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 60px 40px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  opacity: 0;
  /* Invisível por padrão */
  transition: opacity var(--transition-speed) ease-in-out;
  /* Fade in/out effect */

  /* Slides inativos não devem capturar cliques - sem isso, o slide
     empilhado por cima (mesmo com opacity: 0) bloqueia o botão
     "Ver Detalhes" dos demais slides */
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  /* Visível quando tem classe 'active' */
  pointer-events: auto;
}

.carousel-slide h2 {
  font-size: 36px;
  margin-bottom: 15px;
  color: var(--red-accent);
  /* Título em vermelho para destaque */
}

.carousel-slide p {
  font-size: 16px;
  max-width: 600px;
  line-height: 1.8;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
}

.carousel-button {
  background-color: var(--red-accent);
  color: var(--white);
  border: none;
  padding: 12px 30px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;

  transition: all var(--transition-speed) ease;
  /* Analogia: Como ObjectAnimator no Android */
}

.carousel-button:hover {
  background-color: #8b1a29;
  /* Cor mais escura ao hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(178, 34, 52, 0.3);
}

.carousel-button:active {
  transform: translateY(0);
}

/* Indicadores de slide (pontinhos na base do carrossel) */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-indicator {
  /* Reset de estilos padrão de <button> */
  border: none;
  padding: 0;

  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all var(--transition-speed) ease;
}

.carousel-indicator:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.carousel-indicator.active {
  background-color: var(--red-accent);
  width: 30px;
  border-radius: 6px;
}

.carousel-indicator.active:hover {
  background-color: var(--red-accent);
}

/* ========================================
   6.1 CARROSSEL DE ASSESSORIAS (altura dinâmica)
   ======================================== */
/* O carrossel da home tem altura fixa porque os slides têm texto
   curto e de tamanho parecido. Já o de Assessorias tem descrições
   de tamanhos bem diferentes, então usamos altura automática e
   trocamos os slides com display (em vez de empilhar com position:
   absolute + opacity), evitando que o conteúdo "vaze" do card. */
#assessorias-carousel {
  height: auto;
  background: linear-gradient(135deg, var(--navy-primary) 0%, #0f1621 100%);
  border-radius: 8px;
}

#assessorias-carousel .carousel-slide {
  position: relative;
  display: none;
  width: 100%;
  height: auto;
  padding: 0 0 50px;
  opacity: 1;
  pointer-events: auto;
}

#assessorias-carousel .carousel-slide.active {
  display: flex;
}

#assessorias-carousel .carousel-indicators {
  bottom: 15px;
}

/* .btn-external-link é navy com borda vermelha (pensado para fundo
   branco). Sobre o fundo navy do carrossel ele ficaria "apagado",
   então usamos o mesmo vermelho do .carousel-button da home para
   manter contraste e destaque do CTA. */
#assessorias-carousel .btn-external-link {
  background-color: var(--red-accent);
  border-color: var(--red-accent);
}

#assessorias-carousel .btn-external-link:hover {
  background-color: #8b1a29;
  border-color: #8b1a29;
}

/* ========================================
   7. SEÇÕES DE CONTEÚDO (Cards)
   ======================================== */

/* Cada <section> vira um "card" sobre o fundo cinza de #content.
   Analogia Android: equivalente a um CardView com elevação,
   cantos arredondados e padding interno. */
section {
  background-color: var(--white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

section h1 {
  color: var(--navy-primary);
  font-size: 32px;
  margin-bottom: 15px;
}

section h2 {
  color: var(--red-accent);
  font-size: 24px;
  margin-top: 30px;
  margin-bottom: 12px;
}

section p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ========================================
   7.1 GLOSSÁRIO DE SIGLAS (Definition List)
   ======================================== */

/* Trechos de código/exemplo (ex: formato do case number).
   Analogia Android: TextView com fonte monoespaçada e fundo
   destacado para representar um valor literal. */
code {
  background-color: var(--light-gray);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  color: var(--navy-primary);
}

/* Cada sigla (<dt>) vira um "chip" de destaque, seguido de sua
   explicação (<dd>) logo abaixo.
   Analogia Android: par de Chip + TextView repetido dentro de
   um RecyclerView de glossário. */
.glossary-list dt {
  display: inline-block;
  background-color: var(--navy-primary);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 4px;
  margin-top: 18px;
}

.glossary-list dt:first-child {
  margin-top: 0;
}

.glossary-list dd {
  margin: 6px 0 0;
  line-height: 1.7;
}

/* ========================================
   7.2 AVISO/DISCLAIMER (Nota de Atenção)
   ========================================
   Analogia Android: como um card de "Atenção" fixado no topo de uma
   tela - chama atenção do usuário sem ser tão chamativo quanto o
   destaque vermelho de .external-tool-section. */
.disclaimer-section {
  background-color: rgba(27, 42, 71, 0.05);
  border-left: 4px solid var(--navy-primary);
  padding: 20px 30px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.disclaimer-section h2 {
  margin-top: 0;
}

/* ========================================
   8. FORMULÁRIOS
   ======================================== */
form {
  background-color: var(--light-gray);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

fieldset {
  border: 2px solid var(--navy-primary);
  padding: 20px;
  margin: 15px 0;
  border-radius: 5px;
}

legend {
  color: var(--navy-primary);
  padding: 0 10px;
  font-weight: 600;
}

label {
  display: block;
  margin: 12px 0 5px;
  color: var(--dark-text);
  font-weight: 500;
  /* Analogia: FontWeight em Android */
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color var(--transition-speed) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy-primary);
  box-shadow: 0 0 8px rgba(27, 42, 71, 0.2);
}

button[type="submit"] {
  background-color: var(--red-accent);
  color: var(--white);
  padding: 12px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition-speed) ease;
}

button[type="submit"]:hover {
  background-color: #8b1a29;
  transform: translateY(-2px);
}

button[type="submit"]:active {
  transform: translateY(0);
}

/* ========================================
   9. DESIGN RESPONSIVO (Mobile-First)
   ======================================== */

/* Breakpoint para tablets (768px) */
@media (max-width: 768px) {
  /* Em telas menores, reduzimos um pouco o tamanho do logo para caber
     melhor ao lado do hambúrguer. */
  .navbar-logo-img {
    height: calc(var(--navbar-height) - 12px);
    width: 102px;
  }

  .search-input {
    width: 140px;
    font-size: 13px;
  }

  .search-results {
    min-width: 220px;
  }

  #content {
    padding: calc(var(--navbar-height) + 20px) 20px 20px;
  }

  section {
    padding: 20px;
  }

  .carousel {
    height: 300px;
  }

  .carousel-slide h2 {
    font-size: 24px;
  }

  .carousel-slide p {
    font-size: 14px;
  }

  /* Reserva espaço extra na base do slide para os indicadores não
     ficarem por cima do botão "Ver Detalhes" (sobreposição em telas
     de toque, onde não há cursor de mouse para "passar por cima"). */
  .carousel-slide {
    padding-bottom: 60px;
  }

  .carousel-indicators {
    bottom: 12px;
  }
}

/* Breakpoint para celulares pequenos (480px) */
@media (max-width: 480px) {
  #content {
    padding: calc(var(--navbar-height) + 15px) 15px 15px;
  }

  .search-input {
    width: 110px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .search-results {
    min-width: 200px;
  }

  .carousel {
    height: 250px;
  }

  .carousel-slide {
    padding: 25px 20px 55px;
  }

  .carousel-slide h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .carousel-slide p {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .carousel-button {
    padding: 10px 20px;
    font-size: 12px;
  }

  .carousel-indicators {
    bottom: 10px;
  }

  form {
    padding: 20px;
  }

  section {
    padding: 16px;
  }

  section h1 {
    font-size: 24px;
  }

  section h2 {
    font-size: 18px;
  }
}

/* ========================================
   14. INTEGRAÇÃO COM FERRAMENTAS EXTERNAS
       (Google Sheets, PermQueue, etc)
   ======================================== */

/* Link externo no menu de navegação */
nav a.nav-external {
  /* Diferencia visualmente do menu principal */
  font-size: 13px;
  font-weight: 600;
  color: var(--red-accent);
  text-transform: none;
  
  /* Animação sutil ao hover */
  transition: all var(--transition-speed) ease;
}

nav a.nav-external:hover {
  background-color: rgba(178, 34, 52, 0.15);
  border-left-color: var(--red-accent);
  transform: translateX(4px);
  /* Analogia Android: Similar a um animateX com ObjectAnimator */
}

/* Seção de destaque para ferramentas externas (calculadora PERM,
   Case Status Search, etc.) */
.external-tool-section {
  background: linear-gradient(135deg, rgba(27, 42, 71, 0.05) 0%, rgba(178, 34, 52, 0.05) 100%);
  border-left: 4px solid var(--red-accent);
  padding: 30px;
  margin-top: 40px;
  border-radius: 8px;
  
  /* Sombra sutil para destaque */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.external-tool-section h2 {
  color: var(--navy-primary);
  margin-bottom: 15px;
  font-size: 22px;
}

.external-tool-section p {
  margin-bottom: 15px;
  line-height: 1.8;
  color: var(--dark-text);
}

.external-tool-section ul {
  margin-left: 20px;
  margin-bottom: 20px;
}

.external-tool-section ul li {
  margin-bottom: 10px;
  color: var(--dark-text);
}

/* Botão/Link para a calculadora PERM */
.btn-external-link {
  /* Estilo de botão */
  display: inline-block;
  padding: 14px 28px;
  
  /* Cores: Navy com red em hover */
  background-color: var(--navy-primary);
  color: var(--white);
  
  /* Tipografia */
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  
  /* Forma e sombra */
  border-radius: 6px;
  border: 2px solid var(--red-accent);
  box-shadow: 0 4px 12px rgba(27, 42, 71, 0.2);
  
  /* Transição suave */
  transition: all var(--transition-speed) ease;
  
  cursor: pointer;
  /* Analogia Android: Similar a um Material Button com ripple effect */
}

.btn-external-link:hover {
  background-color: var(--red-accent);
  border-color: var(--red-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(178, 34, 52, 0.3);
}

.btn-external-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(178, 34, 52, 0.2);
}

/* Responsividade para Mobile */
@media (max-width: 768px) {
  .external-tool-section {
    padding: 20px;
    margin-top: 30px;
  }

  .external-tool-section h2 {
    font-size: 18px;
  }

  .btn-external-link {
    width: 100%;
    text-align: center;
    padding: 16px 20px;
  }
}

/* ========================================
   15. VISA BULLETIN (Status, Tendência,
       Gráfico, Calculadora e Histórico)
   ======================================== */

/* Cards de status atual - grid responsivo, igual a um
   GridLayout que quebra para 1 coluna em telas pequenas */
.vb-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.vb-status-card {
  background-color: var(--light-gray);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vb-status-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dark-text);
  opacity: 0.7;
}

.vb-status-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-primary);
}

/* Badges de status (Current / Retrogression / Unauthorized) */
.vb-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 14px;
  width: fit-content;
}

.vb-badge-current {
  background-color: rgba(46, 125, 50, 0.15);
  color: #2e7d32;
}

.vb-badge-retrogression {
  background-color: rgba(178, 34, 52, 0.1);
  color: var(--red-accent);
}

.vb-badge-pause {
  background-color: rgba(255, 152, 0, 0.15);
  color: #e65100;
}

.vb-badge-unavailable {
  background-color: rgba(44, 62, 80, 0.1);
  color: var(--dark-text);
}

/* Cards de tendência/médias (ritmo de avanço) */
.vb-pace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.vb-pace-card {
  background-color: var(--light-gray);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.vb-pace-period {
  font-size: 13px;
  color: var(--dark-text);
  opacity: 0.7;
}

.vb-pace-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-primary);
}

.vb-pace-detail {
  font-size: 12px;
  color: var(--dark-text);
  opacity: 0.6;
}

.vb-trend {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 16px;
  background-color: rgba(27, 42, 71, 0.05);
  border-radius: 8px;
}

/* Gráfico (SVG gerado via JS) */
.vb-chart-container {
  width: 100%;
  overflow-x: auto;
}

.vb-chart-container svg {
  display: block;
  width: 100%;
  min-width: 600px;
  height: auto;
}

.vb-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--dark-text);
}

.vb-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.vb-legend-dot-current {
  background-color: #2e7d32;
}

.vb-legend-dot-retrogression {
  background-color: var(--red-accent);
}

/* Calculadora de PD */
.vb-calculator {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  background-color: var(--light-gray);
  padding: 20px;
  border-radius: 8px;
}

.vb-calculator label {
  margin: 0;
}

.vb-calculator input[type="date"] {
  width: 160px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
}

.vb-calculator input[type="text"] {
  display: block;
  box-sizing: border-box;
  width: 110px;
  height: 40px;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
}

.vb-calculator select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 130px;
  height: 40px;
  padding: 10px 36px 10px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dark-text);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  cursor: pointer;
}

.vb-calculator select:focus-visible,
.vb-calculator input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--navy-primary);
}

.vb-pd-result {
  margin-top: 16px;
  line-height: 1.8;
}

.vb-pd-result:empty {
  display: none;
}

/* Tabela histórica completa */
.vb-history-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  margin-top: 16px;
}

.vb-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.vb-history-table th,
.vb-history-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--light-gray);
}

.vb-history-table th {
  background-color: var(--navy-primary);
  color: var(--white);
  position: sticky;
  top: 0;
}

.vb-history-table tr.vb-row-pending td {
  color: var(--dark-text);
  opacity: 0.5;
}

.vb-tag-current {
  display: inline-block;
  background-color: rgba(46, 125, 50, 0.15);
  color: #2e7d32;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.vb-tag-unavailable {
  display: inline-block;
  background-color: rgba(44, 62, 80, 0.1);
  color: var(--dark-text);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* Responsividade para Mobile */
@media (max-width: 768px) {
  .vb-status-grid,
  .vb-pace-grid {
    grid-template-columns: 1fr;
  }

  .vb-calculator {
    flex-direction: column;
    align-items: stretch;
  }

  .vb-calculator button {
    width: 100%;
    text-align: center;
  }
}

/* ========================================
   16. CLÍNICAS CONVENIADAS
   ========================================
   Analogia Android: grid de cards (como um GridLayoutManager)
   com as informações de cada clínica credenciada. */
.clinic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.clinic-card {
  background-color: var(--light-gray);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clinic-card h3 {
  color: var(--navy-primary);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}

.clinic-card p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.clinic-doctor {
  font-weight: 700;
}

/* Botão pequeno "Abrir no Google Maps" dentro do card */
.clinic-map-link {
  display: inline-block;
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 12px;
  background-color: var(--navy-primary);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color var(--transition-speed) ease;
}

.clinic-map-link:hover {
  background-color: var(--red-accent);
}

/* Campos modernos da calculadora (clínica + nº de pessoas) */
.clinic-calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clinic-calc-field label {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-primary);
}

.clinic-calc-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 12px 36px 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dark-text);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b2a47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  cursor: pointer;
  transition: border-color var(--transition-speed) ease;
}

.clinic-calc-field select:focus-visible {
  outline: none;
  border-color: var(--navy-primary);
}

/* Contador "Pessoas" estilo stepper (-/+) */
.clinic-calc-stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: var(--white);
}

.clinic-calc-age-count {
  display: inline-block;
  width: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-text);
}

.clinic-calc-stepper-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: var(--light-gray);
  color: var(--navy-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease,
    color var(--transition-speed) ease;
}

.clinic-calc-stepper-btn:hover {
  background-color: var(--navy-primary);
  color: var(--white);
}

.clinic-calc-stepper-btn-plus {
  background-color: var(--red-accent);
  color: var(--white);
}

.clinic-calc-stepper-btn-plus:hover {
  background-color: var(--navy-primary);
}

/* Seletor "Pessoas e faixas de idade" (estilo Google Flights) */
.clinic-calc-field-people {
  position: relative;
}

.clinic-calc-people-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 200px;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-text);
  cursor: pointer;
  transition: border-color var(--transition-speed) ease;
}

.clinic-calc-people-toggle:hover,
.clinic-calc-people-toggle[aria-expanded="true"] {
  border-color: var(--navy-primary);
}

.clinic-calc-people-arrow {
  color: var(--navy-primary);
  font-size: 12px;
}

.clinic-calc-people-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 300px;
  padding: 16px;
  background-color: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.clinic-calc-people-panel[hidden] {
  display: none;
}

.clinic-calc-age-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clinic-calc-age-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-text);
}

.clinic-calc-age-desc {
  font-size: 12px;
  color: var(--dark-text);
  opacity: 0.7;
}

.clinic-calc-people-done {
  margin-top: 4px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background-color: var(--navy-primary);
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease;
}

.clinic-calc-people-done:hover {
  background-color: var(--red-accent);
}

/* Responsividade para Mobile */
@media (max-width: 768px) {
  .clinic-grid {
    grid-template-columns: 1fr;
  }

  /* Mantém os botões -/+ circulares (sobrescreve ".vb-calculator button") */
  .clinic-calc-stepper .clinic-calc-stepper-btn {
    flex: none;
    width: 30px;
    text-align: center;
  }

  .clinic-calc-people-panel {
    width: 100%;
  }
}