/* 
 * Mejoras de Layout para Template UNAL Joomla 5
 * Optimización del uso del espacio y posiciones
 */

/* ========================================
   CONTENEDORES PRINCIPALES
   ======================================== */

/* Contenedor general - sin restricciones innecesarias */
.unal-content {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Wrapper principal que contiene todo el contenido */
.unal-main-wrapper {
  width: 100%;
  max-width: 85%;
  padding: 0;

}

.fondoColor {
  background-color: #FFF;
  border-radius: 25px;
  padding: 20px;
  margin: 50px auto;
}

/* ========================================
   SECCIONES DE SEDE Y DEPARTAMENTO
   ======================================== */

/* IMPORTANTE: Estas secciones SIEMPRE aprovechan el espacio completo
   La opción centerContent NO debe afectarlas, solo afecta el contenido del artículo */

/* Filas de sede - aprovechar mejor el espacio */
.first-row,
.second-row,
.third-row,
.fourth-row,
.fifth-row,
.sixth-row,
.seven-row,
.eight-row {
  max-width: 1400px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
  width: 100%;
}

/* En home, usar todo el ancho disponible */
body.home .first-row,
body.home .second-row,
body.home .third-row,
body.home .fourth-row,
body.home .fifth-row,
body.home .sixth-row,
body.home .seven-row,
body.home .eight-row {
  max-width: 100% !important;
  padding: 0 30px;
}

/* ========================================
   ESPACIADO Y MÁRGENES
   ======================================== */

.rspace {
  margin-bottom: 30px;
}

/* Reducir espaciado en móviles */
@media (max-width: 767.98px) {
  .rspace {
    margin-bottom: 20px;
  }
  
  body.home .first-row,
  body.home .second-row,
  body.home .third-row,
  body.home .fourth-row,
  body.home .fifth-row,
  body.home .sixth-row,
  body.home .seven-row,
  body.home .eight-row {
    padding: 0 15px;
  }
}

/* ========================================
   BANNERS Y ELEMENTOS DESTACADOS
   ======================================== */

/* Los banners SIEMPRE usan el ancho completo, no se ven afectados por centerContent */
.banner-1,
.banner-2 {
  width: 100%;
  max-width: 1400px !important;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}

/* Contenedor interno del banner */
.banner-container {
  width: 100%;
  position: relative;
}

/* Módulos dentro de los banners */
.banner-1 .moduletable,
.banner-2 .moduletable {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Imágenes en banners - responsivas */
.banner-1 img,
.banner-2 img {
  width: 100%;
  height: auto;
  display: block;
}

/* En home, usar todo el ancho disponible */
body.home .banner-1,
body.home .banner-2 {
  max-width: 100% !important;
  padding: 0 30px;
}

/* Carruseles y sliders en banners */
.banner-1 .carousel,
.banner-2 .carousel,
.banner-1 .slider,
.banner-2 .slider {
  width: 100%;
  overflow: hidden;
}

/* Títulos en banners */
.banner-1 h1,
.banner-1 h2,
.banner-1 h3,
.banner-2 h1,
.banner-2 h2,
.banner-2 h3 {
  margin-top: 0;
}

/* Responsividad para banners en móviles */
@media (max-width: 767.98px) {
  .banner-1,
  .banner-2 {
    padding: 0 10px;
  }
  
  body.home .banner-1,
  body.home .banner-2 {
    padding: 0 15px;
  }
}

/* Pantallas grandes - expandir banners */
@media (min-width: 1400px) {
  .banner-1,
  .banner-2 {
    max-width: 1600px !important;
  }
}

/* ========================================
   IMAGEN SUPERIOR
   ======================================== */

.backgroundTop.full-width {
  width: 100%;
  margin: 0;
  padding: 0;
}

.top-banner-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.top-banner-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Alturas máximas para la imagen superior */
.top-banner-image.max-height-300 {
  max-height: 300px;
}

.top-banner-image.max-height-400 {
  max-height: 400px;
}

.top-banner-image.max-height-500 {
  max-height: 500px;
}

.top-banner-image.max-height-600 {
  max-height: 600px;
}

/* ========================================
   MENÚ LATERAL
   ======================================== */

.unal-side-menu {
  width: 250px;
  position: fixed;
  left: 0;
  top: 200px;
  z-index: 100;
  background: #fff;
  box-shadow: 2px 0 5px rgba(0,0,0,.1);
  padding: 20px;
}

.unal-content-padding {
  padding-left: 270px;
}

@media (max-width: 991.98px) {
  .unal-side-menu {
    position: static;
    width: 100%;
    margin-bottom: 20px;
  }
  
  .unal-content-padding {
    padding-left: 0;
  }
}

/* ========================================
   HOME - POSICIONES LEFT Y RIGHT
   ======================================== */

.home-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto 30px;
  padding: 0 15px;
}

body.home .home-right {
  max-width: 100%;
  padding: 0 30px;
}

@media (max-width: 991.98px) {
  .home-right {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ========================================
   ACTUALIZACIÓN Y PREFOOTER
   ======================================== */

/* Estas secciones SIEMPRE usan el ancho completo */
.actualizacion-container {
  max-width: 1400px !important;
  margin: 0 auto;
  padding: 15px;
  width: 100%;
}

.prefooter {
  width: 100%;
  background: #f8f9fa;
  padding: 30px 0;
}

.prefooter > * {
  max-width: 1400px !important;
  margin: 0 auto;
  padding: 0 15px;
}

/* ========================================
   BOTTOM PAGE
   ======================================== */

/* Bottom page siempre usa el ancho completo */
.eight-row {
  width: 100%;
  max-width: 1400px !important;
  margin: 30px auto;
  padding: 0 15px;
}

body.home .eight-row {
  max-width: 100% !important;
  padding: 0 30px;
}

/* ========================================
   MEJORAS PARA ARTÍCULOS
   ======================================== */

/* IMPORTANTE: El centrado SOLO afecta el contenido del artículo dentro de main-container.detalle
   NO afecta las posiciones component-top-full, component-bottom-full, ni las laterales */

/* Contenedor de artículo con centrado opcional */
.center-article-content .main-container.detalle {
  max-width: 900px;
  margin: 0 auto;
}

/* Asegurar que component-top-full y component-bottom-full NO se centren */
.center-article-content .component-top-full-container,
.center-article-content .component-bottom-full-container {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Imágenes en artículos - responsivas */
.container-component img {
  max-width: 100%;
  height: auto;
}

/* ========================================
   BREADCRUMBS
   ======================================== */

/* Breadcrumbs siempre usan el ancho completo disponible */
.breadcrumb-class {
  max-width: 1400px !important;
  margin: 20px auto;
  padding: 0 15px;
  width: 100%;
}

body.home .breadcrumb-class {
  max-width: 100% !important;
  padding: 0 30px;
}

/* ========================================
   PANTALLAS GRANDES
   ======================================== */

@media (min-width: 1200px) {
  .first-row,
  .second-row,
  .third-row,
  .fourth-row,
  .fifth-row,
  .sixth-row,
  .seven-row,
  .eight-row,
  .banner-1,
  .banner-2 {
    max-width: 1400px;
  }
}

@media (min-width: 1400px) {
  .first-row,
  .second-row,
  .third-row,
  .fourth-row,
  .fifth-row,
  .sixth-row,
  .seven-row,
  .eight-row,
  .banner-1,
  .banner-2 {
    max-width: 1600px;
  }
  
  body.home .component-row {
    max-width: 1800px;
  }
}

/* ========================================
   UTILIDADES
   ======================================== */

/* Clase para forzar ancho completo */
.full-width {
  width: 100% !important;
  max-width: 100% !important;
}

/* Clase para contenido centrado */
.centered-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Espaciado vertical */
.mt-section {
  margin-top: 40px;
}

.mb-section {
  margin-bottom: 40px;
}

.py-section {
  padding-top: 40px;
  padding-bottom: 40px;
}