/* ==========================================================================
   ASODIB
   Archivo: assets/css/responsive.css
   Configuración responsive global del Portal Web.
   Dependencias:
   - variables.css
   - estilo.css
   - componentes.css
   - Bootstrap 5
   Responsabilidades:
   - Ajustes globales responsive.
   - Header público.
   - Menú principal.
   - Banner.
   - Publicación destacada.
   - Secciones.
   - Tarjetas.
   - Widgets.
   - Botones.
   - Tablas.
   - Formularios.
   - Footer.
   - Utilidades responsive.
   No colocar aquí estilos exclusivos de un módulo.
   ========================================================================== */
/* ==========================================================================
   CONTENEDOR GENERAL
   ========================================================================== */
@media (max-width: 1200px) {
  .container {
    max-width: 96%;
  }
}
/* ==========================================================================
   HEADER PÚBLICO
   ========================================================================== */
@media (max-width: 992px) {
  .header-publico {
    text-align: center;
  }
  .logo-asodib {
    display: block;
    margin: auto;
  }
  .titulo-asodib {
    margin-top: var(--espacio-4);
    font-size: var(--titulo-h2);
  }
  .descripcion-asodib {
    font-size: var(--texto-lg);
  }
  .datos-contacto {
    margin-top: var(--espacio-6);
    text-align: center;
  }
}
@media (max-width: 576px) {
  .logo-asodib {
    max-height: 80px;
  }
  .titulo-asodib {
    font-size: var(--titulo-h3);
  }
  .descripcion-asodib {
    font-size: var(--texto-md);
  }
}
/* ==========================================================================
   MENÚ PRINCIPAL
   ========================================================================== */
@media (max-width: 992px) {
  .navbar-nav {
    padding: var(--espacio-4) 0;
  }
  .navbar-nav .nav-link {
    padding: var(--espacio-4);
    text-align: center;
  }
  .navbar .btn {
    width: 100%;
    margin-top: var(--espacio-4);
  }
  .navbar form {
    display: none !important;
  }
}
/* ==========================================================================
   BANNER PRINCIPAL
   ========================================================================== */
@media (max-width: 992px) {
  .banner-principal {
    min-height: 300px;
  }
  .banner-imagen {
    height: 300px;
  }
  .banner-titulo {
    font-size: var(--titulo-h2);
  }
}
@media (max-width: 768px) {
  .banner-principal {
    min-height: 250px;
  }
  .banner-imagen {
    height: 250px;
  }
  .banner-titulo {
    font-size: var(--titulo-h3);
  }
  .banner-subtitulo,
  .banner-texto {
    font-size: var(--texto-md);
  }
  .banner-botones {
    flex-direction: column;
  }
}
@media (max-width: 576px) {
  .banner-principal {
    min-height: 220px;
    border-radius: var(--radio-lg);
  }
  .banner-imagen {
    height: 220px;
  }
  .banner-titulo {
    font-size: var(--titulo-h4);
  }
  .banner-subtitulo,
  .banner-texto {
    display: none;
  }
}
/* ==========================================================================
   PUBLICACIÓN DESTACADA
   ========================================================================== */
@media (max-width: 992px) {
  .destacada-contenido {
    padding: var(--espacio-6);
  }
}
@media (max-width: 768px) {
  .destacada-grid {
    display: block;
  }
  .destacada-contenido {
    grid-template-columns: 1fr;
  }
  .destacada-imagen {
    min-height: 260px;
  }
}
/* ==========================================================================
   SECCIONES
   ========================================================================== */
@media (max-width: 768px) {
  .home-panel-header {
    flex-direction: column;
    text-align: center;
  }
  .home-panel-body {
    padding: var(--espacio-5);
  }
}
/* ==========================================================================
   GRIDS Y TARJETAS
   ========================================================================== */
@media (max-width: 992px) {
  .home-grid-3,
  .home-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .home-grid-2,
  .home-grid-3,
  .home-grid-4 {
    grid-template-columns: 1fr;
  }
  .home-card-imagen {
    height: var(--altura-imagen-card);
  }
}
/* ==========================================================================
   ESTADÍSTICAS DEL HOME
   ========================================================================== */
@media (max-width: 1200px) {
  .home-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 992px) {
  .home-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .home-stats {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   WIDGETS
   ========================================================================== */
@media (max-width: 768px) {
  .home-widget {
    margin-bottom: var(--espacio-5);
  }
}
/* ==========================================================================
   BOTONES
   ========================================================================== */
@media (max-width: 768px) {
  .home-btn {
    width: 100%;
    justify-content: center;
  }
  .home-btn-group {
    flex-direction: column;
  }
}
/* ==========================================================================
   TABLAS
   ========================================================================== */
@media (max-width: 768px) {
  .table-responsive {
    border-radius: var(--radio-md);
  }
}
/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
@media (max-width: 768px) {
  .form-control,
  .form-select {
    font-size: 16px;
  }
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
@media (max-width: 768px) {
  .footer {
    text-align: center;
  }
  .footer .row > div {
    margin-bottom: var(--espacio-6);
  }
}
/* ==========================================================================
   UTILIDADES RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .text-center-mobile {
    text-align: center !important;
  }
  .hide-mobile {
    display: none !important;
  }
  .show-mobile {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }
}
/* ==========================================================================
   PANTALLAS GRANDES
   ========================================================================== */
@media (min-width: 1400px) {
  .container {
    max-width: var(--ancho-maximo);
  }
  .banner-principal {
    min-height: 460px;
  }
  .banner-imagen {
    height: 460px;
  }
  .banner-titulo {
    font-size: var(--titulo-h1);
  }
}