/*---------------------------------
        Header CSS 
-----------------------------------*/
/* --------------------- 
        .logo-dark
 ----------------------- */
 /* Estilo general para el logo (funciona en todas las pantallas) */
 .navbar-brand .logo-dark {
    max-width: 100%;  /* El logo se ajusta al ancho del contenedor */
    height: auto;     /* Mantiene la proporción del logo */
     /* Centra la imagen si es necesario */
  }
  
  /* Ajuste de la imagen en pantallas grandes */
  .logo-dark {
    width: 20vw; /* Ajusta el logo al 20% del ancho de la pantalla */
    height: auto; /* Mantiene la proporción */
  }
  
  /* Media query para pantallas de tamaño medio (como tabletas) */
  @media (max-width: 1024px) {
    .navbar-brand .logo-dark {
        max-width: 100%;  /* Ajusta el logo al 80% del ancho del contenedor en pantallas medianas */
    }
    
  }
  
  /* Media query para pantallas más pequeñas (dispositivos móviles) */
  @media (max-width: 768px) {
    .navbar-brand .logo-dark {
        max-width: 100%;  /* Ajusta el logo al 60% del ancho del contenedor en móviles */
    }
  }
  
  /* Media query para pantallas muy pequeñas (como teléfonos de gran resolución) */
  @media (max-width: 480px) {
    .navbar-brand .logo-dark {
        max-width: 100%;  /* Ajusta el logo al 50% del ancho del contenedor en pantallas pequeñas */
    }
  }
  
  /* Dinámica de botónes */
  /* Estado cerrado de color azul */
.accordion-button {
  background-color: #0404fc !important;
  color: white !important;
  border-radius: 5px;
  padding: 12px;
  width: 100%;
  transition: background-color 0.3s ease-in-out;
}

.accordion-button[aria-expanded="true"] {
  background-color: #68d001 !important;
}

/* Modo dark para los desplegables de Ayuda */
.theme-dark .faq-accordion {
  background-color: rgba(255, 255, 255, 0.1) !important; 
}

/* Modo oscuro: Fondos de los cuadros de preguntas y respuestas transparentes */
.theme-dark .faq-accordion,
.theme-dark .accordion-body,
.theme-dark .accordion-collapse {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: white !important; 
}

.theme-dark .accordion-item {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.theme-dark .accordion-body i {
    color: white !important;
}