/* ==========================================================================
   7. Responsividade
   - Contém todas as regras de estilo que são aplicadas apenas em telas
     menores (largura máxima de 600px).
   ========================================================================== */
.text-abbr {
  display: none;
}
.text-full {
  display: inline;
}

@media (max-width: 600px) {
  /* Ajustes na Barra de Navegação (Navbar) */
  .user-nav {
    font-size: 0.83em;
    padding: 8px 15px;
  }

  .nav-left,
  .nav-right {
    gap: 10px;
  }

  /* Ajustes Gerais de Layout */
  .container {
    padding: 10px;
  }

  .header-branding-banner {
    height: 60px;
  }

  .step-header {
    font-size: 1.2em;
    text-align: center;
  }

  /* --- AJUSTES NOS BREADCRUMBS PARA TELAS MENORES (VERSÃO MELHORADA) --- */

  /* 1. Esconde todos os itens e separadores da trilha por padrão */
  .breadcrumbs .breadcrumb-item,
  .breadcrumbs .breadcrumb-separator,
  .nav-left > .breadcrumb-separator {
    display: none;
  }

  /* 2. Mostra APENAS o penúltimo item, que é o link para a página pai */
  .breadcrumbs .breadcrumb-item:nth-last-of-type(2) {
    display: block;
  }

  /* 3. Adiciona uma seta de "voltar" antes do link da página pai */
  .breadcrumbs .breadcrumb-item:nth-last-of-type(2) a::before {
    content: "‹ ";
    font-weight: bold;
  }

  /* 4. (MELHORIA) Garante que o texto do link não quebre a linha */
  .breadcrumbs .breadcrumb-item:nth-last-of-type(2) a {
    display: inline-block; /* Necessário para o text-overflow funcionar */
    vertical-align: middle; /* Alinha o texto com a seta */
    max-width: 200px; /* Largura máxima do texto, ajuste se necessário */
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Esconde o que ultrapassar a largura máxima */
    text-overflow: ellipsis; /* Adiciona "..." ao final do texto cortado */
  }

  .text-full {
    display: none;
  }
  .text-abbr {
    display: inline;
  }

  /* Ajustes de Conteúdo Específico (Pesquisa) */
  .secao-titulo {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .secao-imagem {
    max-height: 100px;
    max-width: 200px;
    margin: 0 auto;
  }

  .form-navigation-dual {
    flex-direction: column;
    gap: 10px;
  }

  /* Ajustes em Componentes */
  .btn {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9em;
    padding: 10px 15px;
  }

  .pagination a {
    font-size: 0.9em;
    padding: 6px 12px;
  }
}