/* =========================================================
   DIRSU 2026 - RESPONSIVE GLOBAL
   Se carga despues de Bootstrap, style.css y custom.css.
   Objetivo: que TODAS las paginas usen correctamente el
   ancho del viewport en movil/tablet sin alterar escritorio.
   ========================================================= */

html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

/* Elementos multimedia nunca deben ensanchar la pagina. */
img,
video,
canvas,
svg {
  max-width: 100%;
}

iframe {
  max-width: 100%;
}

/* Evita que hijos flex/grid impidan encogerse en pantallas pequenas. */
.row,
.row > *,
.navbar,
.navbar > *,
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  min-width: 0;
}

@media (max-width: 991.98px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Shell general: topbar, navbar y bloques de ancho completo. */
  body > .topbar-dirsu,
  body > nav.navbar,
  body > .container-fluid,
  #pageHeaderBlock,
  .page-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Bootstrap conserva padding interno, pero nunca una columna angosta. */
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .row {
    min-width: 0 !important;
  }

  .row > * {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Navbar movil: marca y hamburguesa siempre caben en una sola fila. */
  nav.navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .dirsu-brand-wrap {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 84px) !important;
  }

  .dirsu-brand {
    min-width: 0 !important;
  }

  .navbar-toggler {
    flex: 0 0 auto !important;
    margin-right: 1rem !important;
  }

  #navbarCollapse {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Portadas internas. */
  #pageHeaderBlock,
  .page-header {
    background-position: center center !important;
  }

  #pageHeaderBlock > .container,
  .page-header > .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Modulos editables de Noticias y Eventos. */
  #newsSection,
  #evtSection {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #newsSection > .container,
  #evtSection > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #newsSection .news-feature,
  #newsSection .news-mini,
  #evtSection .evt-card {
    max-width: 100% !important;
  }

  /* Home / novedades: el componente nunca vuelve a quedar en media pantalla. */
  #homeNovedadesWrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* El mapa del footer viene con width HTML fijo; en movil debe adaptarse. */
  .footer iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px;
  }

  /* Evita que textos/URLs largos generen scroll horizontal. */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  td,
  th,
  .modal-body,
  .card-body {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767.98px) {
  /* Espaciado consistente en las secciones principales. */
  #newsSection,
  #evtSection {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #newsSection > .container,
  #evtSection > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Cabecera de cada modulo: evita que titulo/boton se desborden. */
  #newsSection .d-flex,
  #evtSection .d-flex {
    min-width: 0;
  }

  /* Tablas administrativas: desplazar horizontalmente, no la pagina completa. */
  .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modales utilizables en telefono. */
  .modal-dialog:not(.modal-fullscreen) {
    max-width: calc(100% - 16px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575.98px) {
  .page-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .page-header > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .page-header .display-3 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .page-header-desc {
    width: 100%;
    max-width: 100% !important;
    font-size: 0.95rem;
    line-height: 1.48;
  }

  .breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* Boton flotante sin salirse del viewport. */
  .floating-auth-wrap {
    right: 12px !important;
    bottom: 12px !important;
    max-width: calc(100% - 24px);
  }
}


/* =========================================================
   DIRSU 2026 - POLITICA GLOBAL DE ENCUADRE DE IMAGENES
   - Publicaciones (noticias/eventos): priorizan la parte superior.
   - Galerias, retratos, logos y portadas: conservan centrado/completo.
   ========================================================= */

/* Afiches y portadas de publicaciones: el contenido importante suele estar arriba. */
#newsSection .news-feature-img:not(.is-logo-fallback),
#newsSection .mini-img:not(.is-logo-fallback),
#evtSection .evt-img {
  object-fit: cover;
  object-position: center top !important;
}

/* La galeria debe seguir centrada porque puede contener fotos, paisajes o personas. */
#newsView .news-public-thumb img,
.news-gimg {
  object-position: center center !important;
}

/* Logos institucionales nunca deben recortarse. */
#newsSection .news-feature-img.is-logo-fallback,
#newsSection .mini-img.is-logo-fallback,
.dirsu-brand-logo {
  object-position: center center !important;
}

/* Imagen completa dentro de modales/visores. */
#newsView .news-view-img,
#evtModalView .evt-modal-img {
  object-position: center center !important;
}

/* Portadas panoramicas de Areas, Voluntariado y CECUNT permanecen centradas. */
#pageHeaderBlock,
.page-header {
  background-position: center center !important;
}