/* =========================
   RESET BÁSICO + CONTAINER
   ========================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* =========================
     LINKS DE ATALHO E FOCO
     ========================= */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #002050;
    color: #fff;
    padding: 8px;
    z-index: 100;
    text-decoration: none;
    transition: top 0.3s;
  }
  .skip-link:focus {
    top: 0;
  }
  a:focus, button:focus, input:focus {
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
  }
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  
  /* ======================================
   Ajuste responsivo do logo no header
   ====================================== */
.header-main .header-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;    /* permite quebrar em linhas se necessário */
  padding: 0 1rem;    /* evita colar nas bordas */
}

.top-bar {
    background-color: #002050;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 0.9em;
  }
  .header-main {
    background-color: #fff;
    padding: 15px 0;
  }

.header-main .logo-area img {
  width: 100%;        /* escala para caber no container */
  max-width: 500px;   /* mantém o limite original no desktop */
  height: auto;       /* preserva proporção */
}

/* em telas muito estreitas, reduz ainda mais */
@media (max-width: 400px) {
  .header-main .logo-area img {
    max-width: 300px;
  }
}
  
  /* =========================
     MENU DE NAVEGAÇÃO
     ========================= */
  .menu-bar {
    background-color: #004080;
    padding: 10px 0;
  }
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .menu-list {
    list-style: none;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }
  .menu-list li a {
    text-decoration: none;
    color: #fff;
    background-color: #0066cc;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    transition: background 0.3s, color 0.3s;
  }
  .menu-list li a:hover {
    background-color: #ffcc00;
    color: #004080;
  }
  .menu-dropdown {
    position: relative;
  }
  .menu-dropdown .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #3366cc;
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    min-width: 200px;
    z-index: 1000;
  }
  .menu-dropdown:hover .submenu {
    display: block;
  }
  .menu-dropdown .submenu li {
    padding: 5px 20px;
    text-align: left;
  }
  .menu-dropdown .submenu li a {
    color: #fff;
    display: block;
    font-weight: normal;
    transition: background 0.3s, color 0.3s;
  }
  .menu-dropdown .submenu li a:hover {
    background-color: #ffcc00;
    color: #004080;
    border-radius: 5px;
  }
  .menu-dropdown > a i {
    margin-left: 5px;
    font-size: 0.8em;
  }

  
  /* =========================
     BARRA DE BUSCA
     ========================= */
  .search-bar {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .search-bar input {
    padding: 8px 12px;
    border-radius: 20px;
    border: none;
  }
  .search-bar button {
    padding: 8px 16px;
    background-color: #ffcc00;
    color: #004080;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s;
  }
  .search-bar button:hover {
    background-color: #ffd633;
  }
  
  /* =========================
     AVISO DE DESENVOLVIMENTO
     ========================= */
  .site-aviso {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 12px 20px;
    text-align: center;
    font-size: 0.95em;
  }
  
  /* =========================
     HERO BANNER
     ========================= */
  .hero-banner {
    position: relative;
    background: url('banner.png') center/cover no-repeat;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .hero-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.4);
  }
  .hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 800px;
  }
  .hero-content h1 {
    font-size: 2.5em;
  }
  .hero-content p {
    font-size: 1.2em;
    margin: 10px 0 20px;
  }
  .hero-button {
    display: inline-block;
    background-color: #ffcc00;
    color: #004080;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s;
  }
  .hero-button:hover {
    background-color: #ffd633;
  }
  
  /* =========================
     LINKS ÚTEIS
     ========================= */
  .links-uteis {
    background-color: #004080;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
  }
  .links-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  .links-icon-grid a {
    background-color: rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    transition: background 0.3s;
  }
  .links-icon-grid a:hover {
    background-color: rgba(255,255,255,0.2);
  }
  .links-icon-grid i {
    font-size: 2em;
    margin-bottom: 10px;
  }
  .links-icon-grid span {
    font-weight: bold;
  }

  /* Estilo original da seção “Informações Institucionais” (dados-rpps) */
.dados-rpps {
  margin-top: 40px;
  padding: 20px;
  border-top: 1px solid #ccc;
}

.dados-rpps h2 {
  background-color: #002050;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 1.2em;
  margin: 0 0 20px;
}

.dados-rpps .info-boxes {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.dados-rpps .info-boxes div {
  margin: 10px 20px;
  text-align: center;
}

.dados-rpps .info-boxes strong {
  display: block;
  margin-bottom: 5px;
  color: #004080;
}
  
  /* =========================
     TRANSPARÊNCIA
     ========================= */
  /* =========================
   TRANSPARÊNCIA
   ========================= */

.transparencia-section {
  padding: 50px 20px;
  text-align: center;
  background-color: #f4f4f4;
}

.transparencia-section h2 {
  font-size: 2em;
  margin-bottom: 10px;
  color: #004080;
}

.transparencia-section p {
  font-size: 1em;
  margin-bottom: 35px;
  color: #333;
}

.transparencia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.transparencia-card {
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 16px;
  text-decoration: none;
  color: #004080;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.transparencia-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.transparencia-card i {
  font-size: 42px;
  margin-bottom: 18px;
  color: #0b5ed7; /* azul institucional */
}

.transparencia-card h3 {
  font-size: 1em;
  font-weight: 600;
  color: #004080;
  text-align: center;
}

  
  /* =========================
     NOTÍCIAS
     ========================= */
     .noticias-pagina {
      padding: 40px 20px;
      max-width: 1100px;
      margin: auto;
    }
    .noticias-pagina h1 {
      font-size: 2em;
      color: #004080;
      margin-bottom: 20px;
    }
    .noticias-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .news-card {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      overflow: hidden;
      flex: 1 1 300px;
    }
    .news-image {
      height: 180px;
      background-size: cover;
      background-position: center;
    }
    .news-content {
      padding: 15px;
    }
    .news-content h3 {
      color: #004080;
      font-size: 1.2em;
      margin-bottom: 10px;
    }
    .news-content p {
      font-size: 0.95em;
      margin-bottom: 10px;
    }
    .card-button {
      display: inline-block;
      background-color: #ffcc00;
      color: #004080;
      padding: 8px 16px;
      border-radius: 20px;
      text-decoration: none;
      font-weight: bold;
      transition: background-color 0.3s;
    }
    .card-button:hover {
      background-color: #ffd633;
    }

  .noticias-section {
    background-color: #f4f4f4;
    padding: 40px 20px;
    text-align: center;
  }
  .noticias-section h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #004080;
  }
  .noticias-section p {
    font-size: 1em;
    margin-bottom: 30px;
    color: #333;
  }
  .noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  .news-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .news-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  .news-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
  }
  .news-content {
    padding: 15px;
    text-align: left;
  }
  .news-content h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
  }
  .news-content p {
    font-size: 0.95em;
    margin-bottom: 15px;
    color: #555;
  }
  .card-button {
    display: inline-block;
    background-color: #ffcc00;
    color: #004080;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s;
  }
  .card-button:hover {
    background-color: #ffd633;
  }

  /* Estilos específicos para esta página */
  .noticia-completa {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    line-height: 1.8;
  }
  .noticia-completa h1 {
    color: #004080;
    margin-bottom: 20px;
    text-align: center;
  }
  .noticia-image {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
  }
  .noticia-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  .noticia-completa p {
    margin-bottom: 15px;
    text-align: justify;
    color: #333;
  }

     /* ===== estilos específicos da Ouvidoria ===== */
    
    /* reaproveita o estilo dos botões do site */
    .hero-button {
      display: inline-block;
      background: #ffcc00;
      color: #004080;
      padding: 12px 24px;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      text-align: center;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }
    .hero-button:hover {
      background: #ffd633;
    }
  
  /* =========================
     TABELAS FILTRÁVEIS
     ========================= */
  .tabela-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
  }
  .tabela-container h1 {
    color: #004080;
    margin-bottom: 20px;
  }
  .tabela-container input#filtro {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  thead {
    background-color: #001f4d;
    color: #fff;
  }
  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ccc;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  .visualizar-link {
    color: #004080;
    font-weight: bold;
  }
  .visualizar-link i {
    margin-right: 5px;
    color: #e74c3c;
  }
  
/* ======================================
   Rodapé – Novo estilo inspirado no exemplo
   ====================================== */
.site-footer {
  background: #002050;
  color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 40px 1rem 20px;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer a:hover {
  color: #ffcc00;
}

/* LINKS PRINCIPAIS – 3 colunas */
.footer-site-links {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-col {
  flex: 1;
  min-width: 160px;
}

.footer-col h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  position: relative;
  padding-left: 1.2em;
}

/* adiciona o “›” antes de cada item */
.footer-col li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: #fff;
  font-weight: 700;
}

/* separador */
.footer-separator {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.2);
  margin: 30px auto;
  max-width: 1200px;
}

/* META (info + parceiro) */
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-info {
  flex: 1;
  min-width: 200px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.footer-info p {
  margin: 0.3rem 0;
}

.footer-logo {
  text-align: center;
  flex: 1;
  min-width: 160px;
}

.footer-logo h4 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.footer-logo img {
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* COPYRIGHT */
.footer-copy {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-top: 20px;
}

/* ==========================
   Rodapé – ajustes mobile
   ========================== */
@media (max-width: 767px) {
  /* 1) Espaçamento interno do footer */
  .site-footer {
    padding: 2rem 1rem;
  }

  /* 2) Grid de 2 colunas para os links (Institucional | Publicações) e
        “Transparência” se estende ocupando ambas as colunas */
  .footer-site-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "inst pub"
      "trans trans";
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .footer-site-links .footer-col:nth-child(1) { grid-area: inst; }
  .footer-site-links .footer-col:nth-child(2) { grid-area: pub; }
  .footer-site-links .footer-col:nth-child(3) { grid-area: trans; }

  /* 3) Aproxima as setas e texto na lista “Transparência” */
  .footer-site-links .footer-col:nth-child(3) ul {
    padding-left: 0.75rem;       /* menos recuo esquerdo */
    list-style-position: inside; /* marcador “›” fica junto ao texto */
  }
  .footer-site-links .footer-col:nth-child(3) ul li {
    margin-left: 0.25rem; /* afina espaço entre seta e texto */
  }

  /* 4) Títulos das colunas */
  .footer-site-links .footer-col h3 {
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
  }

  /* 5) Linha separadora */
  .footer-separator {
    width: 90%;
    margin: 1.5rem auto;
  }

  /* 6) Metadados e parceiros empilhados e centralizados */
  .footer-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .footer-info, .footer-logo {
    text-align: center;
  }
  .footer-logo img {
    max-width: 130px;
    height: auto;
  }

  /* 7) Créditos – texto menor e centralizado */
  .footer-copy {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #ccc;
  }
}

  /* =========================
     RESPONSIVO
     ========================= */
  @media (max-width: 768px) {
    .menu-list {
      flex-direction: column;
      align-items: center;
    }
    .search-bar {
      width: 100%;
      justify-content: center;
      margin-top: 10px;
    }
    .hero-banner {
      height: 300px;
    }
    .hero-content h1 {
      font-size: 2em;
    }
    .hero-content p {
      font-size: 1em;
    }
  }
  
  /* =========================
     WIDGET DE ACESSIBILIDADE
     ========================= */
  .a11y-widget {
    position: fixed;
    top: 7rem;
    right: 1rem;
    z-index: 1000;
  }
  .a11y-toggle {
    background: #002050;
    color: #fff;
    border: none;
    padding: 0.7rem;
    border-radius: 0.25rem;
    cursor: pointer;
  }
  .a11y-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ccc;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border-radius: 0.25rem;
  }
  .a11y-menu.open {
    display: flex;
  }
  .a11y-menu a,
  .a11y-menu button {
    background: none;
    border: none;
    text-align: left;
    padding: 0.5rem;
    cursor: pointer;
    color: #002050;
    font-size: 0.9rem;
  }
  .a11y-menu a:hover,
  .a11y-menu button:hover {
    background: #f0f0f0;
  }
  .a11y-menu i {
    margin-right: 0.5rem;
  }
  
  /* =========================
     CLASSES DE ACESSIBILIDADE
     ========================= */
  body.high-contrast {
    background: #000 !important;
    color: #fff !important;
  }
  body.high-contrast a {
    color: #0ff !important;
  }
  body.bw {
    filter: grayscale(100%) contrast(120%) !important;
  }
  body.invert {
    filter: invert(1) !important;
  }
  body.highlight-links a {
    background: yellow !important;
    color: #000 !important;
  }
  body.large-font {
    font-size: 1.2em !important;
  }
  body.small-font {
    font-size: 0.8em !important;
  }
  body.font-regular {
    font-family: Arial, sans-serif !important;
  }
  
  /* busca na nav */
  .search-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
  }
  .search-nav input {
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    font-size: 0.9em;
  }
  .search-nav button {
    background-color: #004080;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
  }

  /* ===== Cookie Banner ===== */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #002050;
  color: #fff;
  padding: 15px;
  font-size: 0.95em;
  z-index: 10000;
  display: none;
}
.cookie-banner__content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.cookie-banner__content p {
  margin: 0;
  flex: 1 1 auto;
}
.cookie-banner__link {
  color: #ffcc00;
  text-decoration: underline;
}
.cookie-banner__actions {
  margin-top: 10px;
  flex: 0 0 auto;
}
@media (min-width: 600px) {
  .cookie-banner__actions {
    margin-top: 0;
    margin-left: 20px;
  }
}
.btn {
  background: none;
  border: 2px solid #fff;
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: .2s;
}
.btn--primary {
  background: #ffcc00;
  color: #004080;
  border-color: #ffcc00;
}
.btn:hover {
  opacity: 0.8;
}

/* ========== Ajuste de posicionamento do widget VLibras ========== */
/* Centraliza o painel do widget horizontalmente */
.vw-plugin-wrapper {
  /* anula o posicionamento padrão */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Opcional: reposiciona o botão flutuante se estiver em conflito */
.vw-plugin-wrapper .vw-button {
  /* ex.: canto inferior direito */
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  left: auto !important;
}

/* ====================
   Sitemap (Mapa do Site)
   ==================== */
.sitemap-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: auto;
}

.sitemap-section h1 {
  font-size: 2em;
  color: #004080;
  text-align: center;
  margin-bottom: 30px;
}

.sitemap-list {
  list-style: none;
  padding-left: 0;
}

.sitemap-list ul {
  margin-left: 20px;
  list-style: disc;
}

.sitemap-list li {
  margin: 8px 0;
}

.sitemap-list li > a {
  text-decoration: none;
  color: #0066cc;
  font-weight: 500;
  transition: color 0.2s;
}

.sitemap-list li > a:hover {
  color: #ffcc00;
}

/* Marcadores diferenciados */
.sitemap-list li::marker {
  color: #004080;
  font-size: 1.2em;
}

/* Responsivo */
@media (max-width: 768px) {
  .sitemap-section {
    padding: 20px 10px;
  }
  .sitemap-section h1 {
    font-size: 1.75em;
  }
}

/* ================================
   Termos de Uso & Política de Privacidade
   ================================ */
.termos-privacidade-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  color: #333;
  font-family: Arial, sans-serif;
  line-height: 1.8;
}

.termos-privacidade-container section {
  margin-bottom: 60px;
}

.termos-privacidade-container h1 {
  font-size: 2.2em;
  color: #004080;
  text-align: center;
  margin-bottom: 20px;
}

.termos-privacidade-container h2 {
  font-size: 1.5em;
  color: #004080;
  margin-top: 30px;
  margin-bottom: 15px;
  border-left: 5px solid #ffcc00;
  padding-left: 10px;
}

.termos-privacidade-container p,
.termos-privacidade-container ul li {
  margin-bottom: 15px;
  text-align: justify;
  color: #333;
}

.termos-privacidade-container ul {
  list-style: disc;
  margin-left: 30px;
}

.termos-privacidade-container ul li {
  margin-bottom: 8px;
}

/* links internos na seção */
.termos-privacidade-container a {
  color: #0066cc;
  text-decoration: underline;
}

.termos-privacidade-container a:hover {
  color: #004080;
}

/* responsivo */
@media (max-width: 768px) {
  .termos-privacidade-container {
    padding: 0 15px;
  }
  .termos-privacidade-container h1 {
    font-size: 1.8em;
  }
  .termos-privacidade-container h2 {
    font-size: 1.3em;
  }
}

/* ===============================
   Estilos para a página “Conheça a Cidade”
   =============================== */
.container-texto {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  line-height: 1.8;
  color: #333;
}

.container-texto h1 {
  font-size: 2em;
  color: #004080;
  margin-bottom: 20px;
  text-align: center;
}

.container-texto h2 {
  font-size: 1.5em;
  color: #004080;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #ffcc00;
  padding-left: 10px;
}

.container-texto p {
  margin-bottom: 15px;
  text-align: justify;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
  .container-texto {
    padding: 0 10px;
  }
  .container-texto h1 {
    font-size: 1.8em;
  }
  .container-texto h2 {
    font-size: 1.3em;
  }
}








/* ajustes específicos desta página */
    .search-page {
      padding: 40px 20px;
      max-width: 900px;
      margin: auto;
    }
    .search-page h1 {
      color: #004080;
      margin-bottom: 20px;
    }
    .search-box {
      display: flex;
      margin-bottom: 30px;
    }
    .search-box input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px 0 0 4px;
      font-size: 1em;
    }
    .search-box button {
      background-color: #004080;
      color: white;
      border: none;
      padding: 0 16px;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      font-size: 1.1em;
    }
    .result {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
    }
    .result h3 {
      margin: 0 0 8px;
      color: #002050;
    }
    .result p {
      margin: 0 0 8px;
      color: #333;
    }
    .result a {
      color: #004080;
      font-weight: bold;
      text-decoration: none;
    }
    .result a:hover {
      text-decoration: underline;
    }

    /* =============================
   PAGINAÇÃO PARA TABELA
   ============================= */
.pagination-info {
  font-size: 0.9em;
  color: #333;
  margin: 1rem 0 0.5rem;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9em;
  margin-bottom: 2rem;
}

.pagination-controls button,
.pagination-controls .page-number {
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  padding: 0.3em 0.6em;
  cursor: pointer;
  border-radius: 3px;
}

.pagination-controls button:disabled {
  opacity: 0.5;
  cursor: default;
}

.pagination-controls .page-number.active {
  background: #ddd;
  font-weight: bold;
}

/* === estilo desktop (mantém tudo igual) === */
@media (min-width: 768px) {
  .toggle-col,
  .hide-on-mobile {
    display: none !important;
  }
}

/* === estilo mobile (<768px) === */
@media (max-width: 767px) {
  /* 1) oculta as colunas de descrição e visualizar */
  .hide-on-mobile {
    display: none !important;
  }
  /* 2) exibe a coluna de toggle (24px de largura) */
  .toggle-col {
    display: table-cell;
    width: 40px;
    text-align: center;
  }
  /* 3) botão +/− */
  .toggle-btn {
    background: #0055ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
  }
  /* 4) estilo da linha de detalhe */
  .detail-row {
    display: none;
  }
  .detail-row .detail-cell {
    padding: 0.5rem 1rem;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
  }
}

/* ── desktop: mobile-legis escondido ── */
@media (min-width: 768px) {
  .mobile-legis { display: none; }
}

/* ── mobile: tabela escondida, mobile-legis visível ── */
@media (max-width: 767px) {
  /* esconde a table inteira */
  .tabela-container table { display: none !important; }

  /* exibe o container mobile */
  .mobile-legis {
    display: block;
    margin: 1rem 0;
  }

  /* cada item estilo cartão/linha */
  .mobile-legis .legis-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }

  /* cabeçalho mínimo: ano / num / tipo + botão */
  .mobile-legis .legis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 0.5rem 1rem;
  }
  .mobile-legis .legis-header .info {
    display: flex;
    gap: 1rem;
    font-weight: 500;
  }
  .mobile-legis .legis-header button {
    background: #0055ff;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  /* detalhe escondido por padrão */
  .mobile-legis .legis-detail {
    display: none;
    padding: 0.75rem 1rem;
    background: white;
    font-size: 0.95rem;
  }
  .mobile-legis .legis-detail .desc {
    margin-bottom: 0.5rem;
    color: #333;
  }
  .mobile-legis .legis-detail .view-link a {
    text-decoration: none;
    color: #0055ff;
    font-weight: 500;
  }
}

/* ─── Estilo dos cabeçalhos “sortable” ─── */
.tabela-container table thead th.sortable {
  background-color: #002050;
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: left;
  position: relative;
  font-weight: 500;
  font-size: 0.95rem;
}

.tabela-container table thead th.sortable i {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  vertical-align: middle;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.tabela-container table thead th.sortable:hover i {
  opacity: 1;
  cursor: pointer;
}

/* garante que a linha do cabeçalho fique fixa no topo se quiser */
.tabela-container table {
  border-collapse: collapse;
  width: 100%;
}

.tabela-container table thead th {
  border-bottom: 2px solid #fff;
}

/* =====================
   Cabeçalho Mobile
   ===================== */
@media (max-width: 767px) {
  .mobile-legis .labels {
    background: #002050;
    padding: 0.5rem 1rem;
  }
  .mobile-legis .labels .info {
    display: flex;
    gap: 1rem;
    color: #fff;
    font-weight: 600;
  }
  .mobile-legis .labels .info span {
    flex: 1;           /* distribui uniformemente */
    text-align: left;
    font-size: 0.95rem;
  }
}


/* ======================
   Tabela Compacta no Mobile
   ====================== */
@media (max-width: 767px) {
  .table-responsive {
    overflow-x: hidden; /* sem scroll horizontal desnecessário */
  }

  /* Usa layout fixo para distribuir bem as colunas */
  .table-responsive table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Colunas com larguras proporcionais */
  .table-responsive th:nth-child(1),
  .table-responsive td:nth-child(1) {
    width: 20%;
  }
  .table-responsive th:nth-child(2),
  .table-responsive td:nth-child(2) {
    width: 60%;
  }
  .table-responsive th:nth-child(3),
  .table-responsive td:nth-child(3) {
    width: 20%;
  }

  /* Reduce padding e fonte para caber melhor */
  .table-responsive th,
  .table-responsive td {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
  }

  /* Esconde ícones de ordenação no mobile */
  .table-responsive th.sortable i {
    display: none;
  }
}

@media (max-width: 767px) {
  .tabela-container table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
  }

  .tabela-container th,
  .tabela-container td {
    padding: 8px 6px;
    word-break: break-word;
  }

  .tabela-container th {
    font-size: 14px;
  }

  .tabela-container .visualizar-link {
    font-size: 14px;
  }

  /* remove rolagem horizontal se não quiser scroll */
  .table-responsive {
    overflow-x: auto;
  }
}

@media (max-width: 767px) {
  .tabela-container table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    display: table !important; /* força mostrar */
  }

  .tabela-container th,
  .tabela-container td {
    padding: 6px 4px;
    word-break: break-word;
    font-size: 13px;
  }

  .visualizar-link {
    font-size: 13px;
  }
}

/* =========================
   TABELAS FILTRÁVEIS (Legislação)
   ========================= */
.tabela-container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}
.tabela-container h1 {
  color: #004080;
  margin-bottom: 20px;
}
.tabela-container input#filtro {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.tabela-container table {
  width: 100%;
  border-collapse: collapse;
}
.tabela-container thead {
  background-color: #001f4d;
  color: #fff;
}
.tabela-container th,
.tabela-container td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
.tabela-container tr:nth-child(even) {
  background-color: #f9f9f9;
}
.visualizar-link {
  color: #004080;
  font-weight: bold;
}
.visualizar-link i {
  margin-right: 5px;
  color: #e74c3c;
}

/* =========================
   Accordion Mobile (Legislação)
   ========================= */
/* desktop: oculta o accordion */
@media (min-width: 768px) {
  .mobile-legis { display: none; }
}

/* mobile: esconde a tabela, exibe o accordion */
@media (max-width: 767px) {
  /* apenas na página de legislação */
  body.page-legislacao .tabela-container table {
    display: none !important;
  }
  body.page-legislacao #mobileLegis {
    display: block;
    margin: 1rem 0;
  }

  /* cada cartão */
  body.page-legislacao .mobile-legis .legis-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }

  /* cabeçalho mínimo: Ano | Núm. | Tipo + botão */
  body.page-legislacao .mobile-legis .legis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 0.5rem 1rem;
    font-weight: 500;
  }
  body.page-legislacao .mobile-legis .legis-header .info {
    display: flex;
    gap: 1rem;
  }
  body.page-legislacao .mobile-legis .legis-header button {
    background: #0055ff;
    color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  /* detalhe escondido */
  body.page-legislacao .mobile-legis .legis-detail {
    display: none;
    padding: 0.75rem 1rem;
    background: #fff;
    font-size: 0.95rem;
  }
  body.page-legislacao .mobile-legis .legis-detail .desc,
  body.page-legislacao .mobile-legis .legis-detail .view-link {
    margin-bottom: 0.5rem;
  }
  body.page-legislacao .mobile-legis .legis-detail a {
    color: #0055ff;
    text-decoration: none;
    font-weight: 500;
  }

  /* ─── Cabeçalho fixo estilizado (labels) ─── */
  body.page-legislacao #mobileLegis .labels {
    background: #002050;
    padding: 0.5rem 1rem;
  }
  body.page-legislacao #mobileLegis .labels .info {
    display: flex;
    gap: 1rem;
    color: #fff;
    font-weight: 600;
  }
  body.page-legislacao #mobileLegis .labels .info span {
    flex: 1;
    text-align: left;
    font-size: 0.95rem;
  }
}

/* ================================
   PORTARIAS – estilos gerais
   ================================ */
body.page-portarias .tabela-container {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}
body.page-portarias .tabela-container h1 {
  color: #004080;
  margin-bottom: 20px;
}
body.page-portarias .tabela-container input#filtro {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
body.page-portarias .tabela-container table {
  width: 100%;
  border-collapse: collapse;
}
body.page-portarias .tabela-container th,
body.page-portarias .tabela-container td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
body.page-portarias .tabela-container thead {
  background-color: #001f4d;
  color: #fff;
}
body.page-portarias .tabela-container tr:nth-child(even) {
  background-color: #f9f9f9;
}
body.page-portarias .visualizar-link {
  color: #004080;
  font-weight: bold;
}
body.page-portarias .visualizar-link i {
  margin-right: 5px;
  color: #e74c3c;
}

/* ================================
   PORTARIAS – Accordion Mobile
   ================================ */
/* em desktop esconde o accordion */
@media (min-width: 768px) {
  body.page-portarias .mobile-portarias {
    display: none !important;
  }
}
/* em mobile oculta a tabela e mostra o accordion */
@media (max-width: 767px) {
  /* esconde a tabela original */
  body.page-portarias #tabela-portarias {
    display: none !important;
  }
  /* exibe o container de cards */
  body.page-portarias #mobilePortarias {
    display: block;
    margin: 1rem 0;
  }
  /* cada card */
  body.page-portarias .mobile-portarias .port-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  /* header mínimo com Ano | Núm. | Beneficiário + botão */
  body.page-portarias .mobile-portarias .port-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 0.75rem 1rem;
    font-weight: 500;
  }
  /* centralizar exatamente os três spans */
  body.page-portarias .mobile-portarias .port-header .info {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 1rem;
  }
  body.page-portarias .mobile-portarias .port-header .info span {
    flex: 1;
    text-align: center;
  }
  /* botão “+” perfeitamente circular */
  body.page-portarias .mobile-portarias .toggle-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: #0055ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
  }
  body.page-portarias .mobile-portarias .toggle-btn:hover {
    background: #0041cc;
  }
  /* detalhe (link “Visualizar”) */
  body.page-portarias .mobile-portarias .port-detail {
    display: none;
    padding: 0.75rem 1rem;
    background: #fff;
    font-size: 0.95rem;
  }
  body.page-portarias .mobile-portarias .port-detail a {
    color: #0055ff;
    text-decoration: none;
    font-weight: 500;
  }
}

/* ================================
   PORTARIAS – Esconder “Visualizar” na tabela mobile
   e centralizar colunas
   ================================ */
@media (max-width: 767px) {
  /* apenas oculta a 4ª coluna na tabela */
  body.page-portarias .tabela-container table th:nth-child(4),
  body.page-portarias .tabela-container table td:nth-child(4) {
    display: none !important;
  }
  /* centraliza texto das demais colunas */
  body.page-portarias .tabela-container table th,
  body.page-portarias .tabela-container table td {
    text-align: center;
  }
  /* força layout fixo para distribuir bem as 3 colunas */
  body.page-portarias .tabela-container table {
    table-layout: fixed;
    width: 100%;
  }
}

/* ======================================
   CONTRATOS – Accordion Mobile
   ====================================== */

/* 1) desktop: esconde o accordion */
@media (min-width: 768px) {
  body.page-contratos .mobile-contratos {
    display: none !important;
  }
}

/* 2) mobile: esconde a tabela inteira e mostra o accordion */
@media (max-width: 767px) {
  /* 2.1) oculta a tabela original (thead+tbody) */
  body.page-contratos #tabela-contratos {
    display: none !important;
  }

  /* 2.2) exibe o container de cards */
  body.page-contratos #mobileContratos {
    display: block;
    margin: 1rem 0;
  }

  /* 3) cabeçalho fixo (Ano | Núm. | Descrição) */
  body.page-contratos .mobile-contratos .labels {
    background: #002050;
    padding: 0.5rem 1rem;
  }
  body.page-contratos .mobile-contratos .labels .info {
    display: flex;
    gap: 1rem;
    justify-content: center;  /* centraliza as colunas */
    color: #fff;
    font-weight: 600;
  }
  /* largura fixa para ano e número, descrição flexível */
  body.page-contratos .mobile-contratos .labels .info span:nth-child(1),
  body.page-contratos .mobile-contratos .labels .info span:nth-child(2) {
    flex: 0 0 20%;
    text-align: left;
  }
  body.page-contratos .mobile-contratos .labels .info span:nth-child(3) {
    flex: 1;
    text-align: left;
  }

  /* 4) estilo dos cards */
  body.page-contratos .mobile-contratos .contr-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: #fff;
  }
  body.page-contratos .mobile-contratos .contr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    font-weight: 500;
  }
  /* mesmo flex aplicado ao header */
  body.page-contratos .mobile-contratos .contr-header .info {
    display: flex;
    gap: 1rem;
    flex: 1;
    justify-content: center;
  }

  /* 5) botão “+” redondinho */
  body.page-contratos .mobile-contratos .toggle-btn {
    width: 28px;
    height: 28px;
    background: #0055ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  body.page-contratos .mobile-contratos .toggle-btn:hover {
    background: #0041cc;
  }

  /* 6) detalhe – só “Visualizar” e sem ícone */
  body.page-contratos .mobile-contratos .contr-detail {
    display: none;
    padding: 0.75rem 1rem;
    background: #fff;
    font-size: 0.95rem;
  }
  /* esconde o <i> do PDF, mantém só o texto */
  body.page-contratos .mobile-contratos .contr-detail a i {
    display: none;
  }
  body.page-contratos .mobile-contratos .contr-detail a {
    color: #0055ff;
    text-decoration: none;
    font-weight: 500;
  }
}

/* ======================================
   CONTRATOS – Accordion Mobile
   ====================================== */

body.page-contratos #mobileContratos {
  display: none; /* esconde no desktop */
}

/* desktop: esconde o accordion */
@media (min-width: 768px) {
  body.page-contratos .mobile-contratos {
    display: none !important;
  }
}

/* mobile: esconde a tabela original e mostra o accordion */
@media (max-width: 767px) {
  /* 1) oculta a tabela (thead + tbody) */
  body.page-contratos .tabela-container table {
    display: none !important;
  }

  /* 2) mostra o container de cards */
  body.page-contratos #mobileContratos {
    display: block;
    margin: 1rem 0;
  }

  /* 3) cabeçalho fixo (Ano | Núm. | Descrição) */
  body.page-contratos .mobile-contratos .labels {
    background: #002050;
    padding: 0.5rem 1rem;
  }
  body.page-contratos .mobile-contratos .labels .info {
    display: flex;
    gap: 1rem;
    justify-content: center;  /* centraliza as colunas */
    color: #fff;
    font-weight: 600;
  }
  /* largura fixa para Ano e Núm. */
  body.page-contratos .mobile-contratos .labels .info span:nth-child(1),
  body.page-contratos .mobile-contratos .labels .info span:nth-child(2) {
    flex: 0 0 20%;
    text-align: center;
  }
  /* Descrição ocupa o resto */
  body.page-contratos .mobile-contratos .labels .info span:nth-child(3) {
    flex: 1;
    text-align: center;
  }

  /* 4) estilo dos cards */
  body.page-contratos .mobile-contratos .contr-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    background: #fff;
    overflow: hidden;
  }
  body.page-contratos .mobile-contratos .contr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    font-weight: 500;
  }
  /* mesma distribuição de colunas do header */
  body.page-contratos .mobile-contratos .contr-header .info {
    display: flex;
    gap: 1rem;
    flex: 1;
    justify-content: center;
  }
  body.page-contratos .mobile-contratos .contr-header .info span:nth-child(1),
  body.page-contratos .mobile-contratos .contr-header .info span:nth-child(2) {
    flex: 0 0 20%;
    text-align: center;
  }
  body.page-contratos .mobile-contratos .contr-header .info span:nth-child(3) {
    flex: 1;
    text-align: center;
  }

  /* 5) botão “+” perfeitamente redondo */
  body.page-contratos .mobile-contratos .toggle-btn {
    width: 28px;
    height: 28px;
    background: #0055ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  body.page-contratos .mobile-contratos .toggle-btn:hover {
    background: #0041cc;
  }

  /* 6) detalhe “Visualizar” sem ícone */
  body.page-contratos .mobile-contratos .contr-detail {
    display: none;
    padding: 0.75rem 1rem;
    background: #fff;
    font-size: 0.95rem;
  }
  /* esconde apenas o <i> do PDF */
  body.page-contratos .mobile-contratos .contr-detail a i {
    display: none;
  }
  body.page-contratos .mobile-contratos .contr-detail a {
    color: #0055ff;
    text-decoration: none;
    font-weight: 500;
  }
}

/* ===============================
   ATAS DE REUNIÕES – Accordion Mobile
   =============================== */

/* ── Desktop: esconde o accordion ── */
@media (min-width: 768px) {
  body.page-atas #mobileAtas {
    display: none !important;
  }
}

/* ── Mobile: oculta tabela e coluna “Visualizar”, exibe accordion ── */
@media (max-width: 767px) {
  /* 1) Oculta a tabela original inteira */
  body.page-atas #tabela-atas {
    display: none !important;
  }
  /* 2) Oculta também a coluna “Visualizar” caso ela ainda fique visível */
  body.page-atas #tabela-atas th:nth-child(3),
  body.page-atas #tabela-atas td:nth-child(3) {
    display: none !important;
  }

  /* 3) Exibe o container de cards */
  body.page-atas #mobileAtas {
    display: block;
    margin: 1rem 0;
  }

  /* 4) Cabeçalho fixo “Data | Descrição” */
  body.page-atas #mobileAtas .labels {
    background: #002050;
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
  }
  body.page-atas #mobileAtas .labels .info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  body.page-atas #mobileAtas .labels .info span {
    flex: 1;
    text-align: center;
  }

  /* 5) Cada cartão */
  body.page-atas #mobileAtas .ata-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  /* 6) Header do cartão: Data | Descrição + botão */
  body.page-atas #mobileAtas .ata-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
  }
  body.page-atas #mobileAtas .ata-header .info {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  body.page-atas #mobileAtas .ata-header .info span {
    flex: 1;
    text-align: center;
  }

  /* 7) Botão “+” no estilo das outras páginas */
  body.page-atas #mobileAtas .toggle-btn {
    width: 28px;
    height: 28px;
    background: #0055ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
  }
  body.page-atas #mobileAtas .toggle-btn:hover {
    background: #0041cc;
  }

  /* 8) Detalhe “Visualizar” por trás do click */
  body.page-atas #mobileAtas .ata-detail {
    display: none;
    padding: 0.75rem 1rem;
    background: #fff;
    font-size: 0.95rem;
  }
  body.page-atas #mobileAtas .ata-detail a {
    color: #0055ff;
    text-decoration: none;
    font-weight: 500;
  }
}

/* ── ATAS: esconder a tabela original por completo em mobile ── */
@media (max-width: 767px) {
  body.page-atas .tabela-container table {
    display: none !important;
  }

  /* (A seguir, vêm todas as regras que você já tem para o accordion) */

  /* 1) Oculta também a coluna “Visualizar” caso sobre algo */
  body.page-atas #tabela-atas th:nth-child(3),
  body.page-atas #tabela-atas td:nth-child(3) {
    display: none !important;
  }

  /* 2) Exibe o accordion */
  body.page-atas #mobileAtas {
    display: block;
    margin: 1rem 0;
  }

  /* 3) Cabeçalho fixo “Data | Descrição” */
  body.page-atas #mobileAtas .labels {
    background: #002050;
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
  }
  body.page-atas #mobileAtas .labels .info {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  body.page-atas #mobileAtas .labels .info span {
    flex: 1;
    text-align: center;
  }

  /* 4) Cada cartão */
  body.page-atas #mobileAtas .ata-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  /* 5) Header do cartão */
  body.page-atas #mobileAtas .ata-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
  }
  body.page-atas #mobileAtas .ata-header .info {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  body.page-atas #mobileAtas .ata-header .info span {
    flex: 1;
    text-align: center;
  }

  /* 6) Botão “+” */
  body.page-atas #mobileAtas .toggle-btn {
    width: 28px;
    height: 28px;
    background: #0055ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
  }
  body.page-atas #mobileAtas .toggle-btn:hover {
    background: #0041cc;
  }

  /* 7) Detalhe “Visualizar” */
  body.page-atas #mobileAtas .ata-detail {
    display: none;
    padding: 0.75rem 1rem;
    background: #fff;
    font-size: 0.95rem;
  }
  body.page-atas #mobileAtas .ata-detail a {
    color: #0055ff;
    text-decoration: none;
    font-weight: 500;
  }
}

/* ======================================
   Política de Investimentos – Mobile Only
   ====================================== */

/* 1) Esconde a tabela original em telas pequenas */
@media (max-width: 767px) {
  body.page-investimentos .tabela-container table {
    display: none !important;
  }

  /* 2) Exibe o container de cards */
  body.page-investimentos #mobileInvest {
    display: block;
    margin: 1rem 0;
  }

  /* 3) Cabeçalho fixo “Ano | Descrição | Visualizar” */
  body.page-investimentos .mobile-invest .inv-header {
    background: #002050;
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
  }
  body.page-investimentos .mobile-invest .inv-header .info {
    display: flex;
  }
  body.page-investimentos .mobile-invest .inv-header .info span {
    flex: 1;
    text-align: center;
    font-weight: 500;
  }

  /* 4) Cada “card” de investimento */
  body.page-investimentos .mobile-invest .inv-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  body.page-investimentos .mobile-invest .inv-item .info {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
  }
  body.page-investimentos .mobile-invest .inv-item .info span {
    flex: 1;
    text-align: center;
  }

  /* 4.1) Link “Visualizar” sem ícone PDF, igual ao desktop */
  body.page-investimentos .mobile-invest .inv-item .info a.visualizar-link {
    color: #004080;
    font-weight: bold;
    text-decoration: none;
  }
}

/* 5) Em desktop, esconde o accordion mobile */
@media (min-width: 768px) {
  body.page-investimentos .mobile-invest {
    display: none !important;
  }
}

/* =========================
   Sitemap (Mapa do Site)
   ========================= */
.sitemap-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: auto;
}

.sitemap-section h1 {
  font-size: 2em;
  color: #004080;
  text-align: center;
  margin-bottom: 30px;
}

.sitemap-list {
  list-style: none;
  padding-left: 0;
}

.sitemap-list > li {
  margin: 12px 0;
  font-weight: 500;
  color: #333;
}

.sitemap-list li > a {
  text-decoration: none;
  color: #0066cc;
  transition: color 0.2s;
}

.sitemap-list li > a:hover {
  color: #ffcc00;
}

/* Sublistas (níveis internos) */
.sitemap-list li ul {
  list-style: disc;
  margin-left: 20px;
  margin-top: 8px;
}

.sitemap-list li ul li {
  margin: 6px 0;
  font-weight: normal;
  color: #555;
}

/* Responsivo */
@media (max-width: 768px) {
  .sitemap-section {
    padding: 20px 10px;
  }
  .sitemap-section h1 {
    font-size: 1.75em;
  }
  .sitemap-list > li {
    margin: 10px 0;
  }
}

/* ============================
   RODAPÉ – Ajustes para Mobile
   ============================ */
@media (max-width: 767px) {
  /* Faz todo o container do footer ficar em coluna e centralizado */
  .footer-content.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;           /* distância entre os blocos de informações */
    padding-bottom: 0rem;  /* espaço extra embaixo antes do copyright */
  }

  /* Centraliza o texto e afasta um pouco do logo */
  .footer-content.container .footer-info {
    margin-bottom: 0.1 rem; /* espaço entre texto e logo */
    text-align: center;
  }

  /* Aproxima o logo do texto acima */
  .footer-logo {
    margin-top: 0.25rem;   /* ajuste finíssimo para ficar “grudadinho” */
  }
}

/* ==================================================
   Acessibilidade (page-acessibilidade)
   ================================================== */
body.page-acessibilidade {
  background-color: #f4f4f4;
  color: #002050;
}

body.page-acessibilidade .accessibility-page {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

body.page-acessibilidade .accessibility-page h1 {
  font-size: 2em;
  margin-bottom: 1rem;
  color: #002050;
  text-align: center;
}

body.page-acessibilidade .accessibility-page p {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 1rem;
}

body.page-acessibilidade .access-keys-list {
  list-style: disc inside;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

body.page-acessibilidade .access-keys-list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

body.page-acessibilidade kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  margin: 0 0.1em;
  font-size: 0.9em;
  font-family: monospace;
  background: #e0e0e0;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 #b0b0b0;
}

body.page-acessibilidade code {
  font-family: monospace;
  background: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Pequeno ajuste de responsividade */
@media (max-width: 600px) {
  body.page-acessibilidade .accessibility-page {
    padding: 0 0.5rem;
  }
  body.page-acessibilidade .accessibility-page h1 {
    font-size: 1.8em;
  }
  body.page-acessibilidade .accessibility-page p,
  body.page-acessibilidade .access-keys-list li {
    font-size: 0.95em;
  }
  body.page-acessibilidade kbd {
    font-size: 0.8em;
    padding: 0.1em 0.3em;
  }
}

/* Tabela – estado vazio */
.empty-state td {
  text-align: center;
  font-style: italic;
  color: #666;
  padding: 2rem 1rem;
}

.empty-state i {
  margin-right: 0.5rem;
  color: #0055ff;
}

.empty-card .port-header .info span {
  color: #666;
}
.empty-card .port-detail {
  font-style: italic;
  color: #666;
}

.institucional-links {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: "Segoe UI", sans-serif;
  color: #002f6c;
}

.institucional-links h2 {
  font-size: 1.75rem;
  font-weight: bold;
  color: #003e80;
  margin-bottom: 1.2rem;
  text-align: left;
}

.institucional-links p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.institucional-links ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0;
}

.institucional-links li {
  margin-bottom: 0.4rem;
}

.institucional-links a {
  color: #003e80;
  text-decoration: none;
  transition: color 0.2s ease;
}

.institucional-links a:hover {
  color: #f5b300; /* cor dourada suave ao passar o mouse */
  text-decoration: none;
}

.hero-banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hero-banner {
  cursor: pointer;
}





/* =====================================
   MENU MOBILE – IPRESAL (VERSÃO FINAL)
   ===================================== */

html, body {
  overflow-x: hidden;
}

/* botão escondido no desktop */
.hamburger {
  display: none;
}

@media (max-width: 767px) {

  .nav-container {
    position: relative;
  }

  /* ---------- BOTÃO HAMBÚRGUER ---------- */
  .hamburger {
    display: flex;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    z-index: 1200;
    cursor: pointer;
  }

  .hamburger span {
    width: 26px;
    height: 3px;
    background: #ffffff;
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  /* X */
  .hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  .hamburger.open span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* X FIXO NO TOPO DIREITO */
  body.menu-open .hamburger {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    left: auto;
    transform: none;
  }

  body.menu-open .hamburger span {
    background: #fff;
  }

  /* ---------- OVERLAY COM BLUR ---------- */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    z-index: 900;
  }

  /* ---------- MENU LATERAL ---------- */
  .menu-list {
    position: fixed;
    top: 0;
    left: -100%;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    background: linear-gradient(180deg, #002050, #003366);
    padding: 4rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 4px 0 18px rgba(0,0,0,0.35);
    transition: left 0.35s ease;
    z-index: 1000;
  }

  .menu-list.open {
    left: 0;
  }

  /* ---------- BOTÕES PRINCIPAIS ---------- */
  .menu-list li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    border-radius: 15px;
    background: rgba(255,255,255,0.05);
    transition: background 0.25s, color 0.25s;
  }

  .menu-list li > a:hover {
    background: rgba(255,255,255,0.15);
    color: #ffd700;
  }

  /* ---------- SUBMENU (ESTILO NOVO) ---------- */
  .submenu {
    list-style: none;
    margin: 0.10rem 0 0;
    padding: 0.1rem;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }

  .menu-dropdown.open .submenu {
    max-height: 500px;
    opacity: 1;
  }

  .submenu li + li {
    margin-top: 0.4rem;
  }

  .submenu li a {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    color: #eaeaea;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    transition: background 0.2s, color 0.2s;
  }

  .submenu li a:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
  }

  /* ---------- SETA ---------- */
  .menu-dropdown > a i {
    transition: transform 0.3s ease;
  }

  .menu-dropdown.open > a i {
    transform: rotate(-180deg);
  }
}