* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  margin-left: 260px;            /* El contenido inicia después del sidebar expandido */
  transition: all 0.3s ease;
  width: calc(100% - 260px);     /* Ajusta el ancho para llenar el espacio restante */
}


body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(to bottom right, #ffffff, #fcd1c8); 
  color: #31393a;
  display: flex;
  min-height: 100vh;
}


/* Tipografía */

/*Fuente base: Arial */
body {
  font-family: 'Arial', sans-serif;
}

/* Títulos destacados: Arial Rounded MT Bold */
h1, h2, h3, .titulo-destacado {
  font-family: 'Arial Rounded MT Bold', 'Arial Rounded MT', Arial, sans-serif;
  text-transform: uppercase; /* fuerza mayúsculas */
  letter-spacing: 1px; /* mejora la legibilidad */
  font-weight: bold;
}

/* Subtítulos o textos complementarios: Cambria */
h4, h5, h6, .subtitulo, .texto-cambria {
  font-family: 'Cambria', serif;
  font-style: normal;
}

/* SIDEBAR  */
.sidebar {
  width: 260px;                 /* Ancho */
  background-color:  #012f50;    /* Color de fondo */
  color:#ffffff;                 /* Color texto */
  padding: 20px 0;
  position: fixed;              /* Fija al borde izquierdo */
  top: 0; 
  left: 0;
  height: 100vh;                /*Altura de la ventana */
}

/* Posición del nombre de la Asociación  */
.logo { 
  text-align: center; 
  margin-bottom: 30px; /*Espacio entre el nombre de la asociación y el menu*/
  margin-left: 40px;
}

/* Caracteristicas nombre asociación */
.logo a {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  color: #ffffff;
  text-decoration: none; /* quita el subrayado */
  font-size: 26px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

/* Menú de navegación */
.menu { 
  display: flex;
  flex-direction: column; 
  gap: 10px;                    /* Espacio entre enlaces */
  padding: 0 10px; 
}

/* Enlaces del menú */
.menu a {
  color: #ffff;
  text-decoration: none;        /* Quita subrayado */
  padding: 12px 20px; 
  display: block;
  font-size: 15px;
  border-radius: 6px;
}

/* Efecto al pasar el mouse */
.menu a:hover { 
  background-color: #1e79bb; 
  color: #ffffffff;; 
}


/* Sección principal*/
.content {
  margin-left: 260px;
  width: calc(100% - 240px);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Encabezado  */
.header-parte {
  text-align: center;
  padding: 60px 20px;
  color: #000;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.logo-animado {
  width: 200px;
  height: auto; 
  margin-bottom: 18px;
  animation: float 3s ease-in-out infinite; /* Animación flotante */
}
@keyframes float {
  0% { 
    transform: translateY(0px);     /* Posición inicial */
  }
  50% { 
    transform: translateY(-10px);   /* Sube 10px a mitad de ciclo */
  }
  100% { 
    transform: translateY(0px);     /* Vuelve a la posición original */
  }
}


.header-parte h1 {
  font-size: 2rem;
}

/* Intro */
.intro-parte {
  text-align: center;
  max-width: 900px;
  margin: 50px auto;
  padding: 0 20px;
}

.intro-parte h2 {
  color: #1e79bb;/*color texto titulo*/
  margin-bottom: 15px;
}

.intro-parte p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Bloques */
.opciones-parte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
  border-radius: 10px;
}

.card {
  background-color: #ffffff;/*color bloques*/
  border-radius: 16px;
  text-align: center;
  padding: 30px 25px;
  width: 260px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);

}

.card i {
  font-size: 40px;
  color: #f68621;
  margin-bottom: 15px;
}

.card h3 {
  color: #1e79bb;
  margin-bottom: 10px;
}



/*Footer*/

/* contactos*/
.contacto-parte {
  background: #1e79bb; /* color de fondo principal */
  color: #ffffff;
  padding: 15px 10px;
  text-align: center;
  width: 100%;
  margin: 0;
}


.contacto-parte h2 { /*titulo contactos*/
  font-size: 1.8rem;
  margin-bottom: 0.4px;
  color: #fff;
  font-size: 22px;
  background: #1e79bb;
  letter-spacing: 1px;
}


/* Contenedor horizontal */
.contacto-contenido {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* mantiene títulos arriba */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 60px;
  
}

/* Cada bloque */
.contacto-item {
  flex: 1;
  text-align: center;
}

.contacto-item h3 {
  margin-bottom: 10px;/*caracteristicas de los subtitulos*/
  font-size: 18px;
}

.contacto-item p {
  font-size: 18px;
  color: #ffffff;
  margin: 0;
}

.footer-simple {/*caracteristicas footer gris*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #494b4d;
  padding: 12px 30px;
  font-size: 14px;
  flex-wrap: wrap;
  margin-top: auto;
}

.footer-simple p {
  color: #ffffff;
  font-size: 13px;
  margin: 0;
}


/* animación al pasar el mouse por el icono */
.social-links a {
  margin-left: 10px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
  transform: scale(1.15);
}



/* Estilo general del item del menú */
.menu-item {
  display: flex;                 
  align-items: center;            /* Centra verticalmente el icono y el texto dentro del contenedor */
  justify-content: center;        /* Centra horizontalmente el contenido (icono + texto) dentro del enlace */
  gap: 12px;                      /* Espacio horizontal entre el icono y el texto */
  color: #fff;                
  text-decoration: none;          /* Quita el subrayado de los enlaces */
  padding: 10px 20px;          
  border-radius: 6px;             /* Bordes redondeados */
  font-size: 15px;                /* Tamaño del texto */
  transition: background-color 0.3s ease; /* animación al hacer hover */
}

/* Hover */
.menu-item:hover {
  background-color: #1e79bb;      /* Cambia el color de fondo al pasar el cursor */
}

/* Íconos del menú */
.menu-item img {
  object-fit: contain;            /* Ajusta la imagen dentro del contenedor sin recortarla */
  transition: transform 0.3s ease;/* Transición suave para el efecto de zoom */
  vertical-align: middle;         /* Alinea verticalmente el icono respecto al texto */
}

/* Pequeño zoom al pasar el mouse */
.menu-item:hover img {
  transform: scale(1.1);          /* Aumenta ligeramente el tamaño del icono cuando se pasa el cursor */
}

/*-----------------------------------------------------------------*/


/* Características de los iconos del menú */

.icon-home {
  width: 50px;                    /* Ancho del icono */
  height: 50px;                   /* Alto del icono */
}

.icon-junta {
  width: 50px;                    
  height: 54px;                   
}

.icon-noticias {
  width: 50px;                    
  height: 50px;                   
  margin-top: 2px;                /* Mueve el icono hacia abajo */
}

.icon-cursos {
  width: 58px;                    
  height: 58px;                   
  margin-top: -3px;               /* Mueve el icono ligeramente hacia arriba*/
}

.icon-serparte {
  width: 60px;                   
  height: 60px;                
  margin-top: 1px;                
}


/* Para versión minimizada del SIDEBAR */
.sidebar.collapsed .menu-item span {
  display: none;                  /* Oculta el texto cuando el sidebar está minimizado */
}

.sidebar.collapsed .menu-item {
  justify-content: center;        /* Centra los íconos cuando no hay texto visible */
}



/* Función para expandir o contraer el SIDEBAR */
.menu-toggle {
  position: fixed;                /* Fija el botón en la ventana */
  top: 7px;                      
  left: 10px;                  
  font-size: 28px;                /* Tamaño del icono*/
  color: white;      
  margin-left: 23px;               
  border: none;                  
  padding: 8px 12px;            
  border-radius: 6px;          
  cursor: pointer;                /* Muestra la mano al pasar el cursor */
  z-index: 1;                     /* Asegura que el botón quede encima del sidebar */
  transition: background-color 0.3s ease; /* Transición suave al cambiar color */
}

.menu-toggle:hover {
  background-color: #1e79bb;    
}

/* Cuando el sidebar esté contraído */
.sidebar.collapsed {
  width: 120px;                   /* Ancho del sidebar cuando está encogido */
  overflow: hidden;               /* Oculta el contenido que sobrepasa el ancho */
  transition: width 0.3s ease;   
}

.sidebar.collapsed .menu a {
  text-align: center;             /* Centra los iconos dentro del sidebar minimizado */
  padding: 12px 0;               
}

.sidebar.collapsed .logo h2 a {
  font-size: 0;                   /* Oculta el texto del logo al colapsar */
}

/* Cuando el sidebar está colapsado */
.sidebar.collapsed ~ main {
  margin-left: 120px;            /* Ajusta el espacio cuando el menú se minimiza */
  width: calc(100% - 120px);
}

.sidebar.collapsed .logo h2 a::before {
  content: "";                    
  font-size: 24px;                
  color: white;                   
}


/* Responsive para celulares */
@media (max-width: 768px) {   

  .menu {
    justify-content: space-evenly; /* Distribuye los ítems de manera uniforme */
    gap: 0;                        /* Elimina espacios extra entre ítems */
  }

  .menu-item {
    padding: 4px;                  /* Reduce el padding para que ocupen menos espacio */
  }

  .contacto-contenido {
    display: flex;                
    justify-content: center;       /* Centra los elementos horizontalmente */
    align-items: center;       
    text-align: center;           
    flex-wrap: wrap;               /* Permite que los elementos salten de fila */
    gap: 20px;                     /* Espacio entre bloques */
    padding: 20px;                 /* Separación interna */
  }


  .contacto-item {
    flex: 1;                       /* Cada ítem crece de forma proporcional */
    min-width: 150px;              /* Evita que se reduzcan demasiado */
  }

  /* Centrar textos e iconos del footer */
  .footer-simple {
    flex-direction: column;        /* Texto arriba y iconos abajo */
    text-align: center;           
    gap: 8px;                      /* Espacio entre texto e iconos */
  }

  .social-links {
    display: flex;           
    justify-content: center;      
    gap: 15px;                     /* Espacio uniforme entre iconos */
  }

  /* Menú horizontal */
  .sidebar {
    width: 100%;                   /* Ocupa todo el ancho */
    height: auto;                  /* Ajuste automático de alto */
    position: fixed;               /* Fija en la pantalla */
    bottom: 0;                     /* En la parte inferior */
    top: auto;                     /* Quita la posición superior */
    left: 0;                     
    display: flex;                 
    justify-content: space-around; /* Distribuye ítems */
    align-items: center;          
    background-color: #012f50;    
    padding: 5px 0;                /* Altura mínima de barra */
    z-index: 99;                 /* Siempre visible encima del contenido */
    border-top: 2px solid #1e79bb;  /* línea superior decorativa */
  }

  .sidebar .logo {
    display: none;                 /* Oculta el logo en móvil */
  }

  /* Menú en formato horizontal */
  .menu {
    flex-direction: row;           /* Ítems en fila */
    justify-content: space-around; /* Distribuidos uniformemente */
    width: 100%;                   /* Ocupa todo el ancho */
    gap: 0;                        /* Sin espacios extras */
    padding: 0;                    /* Sin padding */
  }

  .menu-item {
    flex-direction: column;        /* Ícono arriba y texto abajo */
    justify-content: center;       
    align-items: center;           
    font-size: 12px;              
    padding: 6px;                  /* Espacio alrededor */
  }

  .menu-item img {
    width: 47px;                  
    height: 47px;
    margin: 0;                     /* Quita margen */
   margin-right: -40px;
  }



  .menu-item span {
    display: block;                /* Texto en bloque debajo del icono */
    font-size: 13px;              
    margin-top: -8px;               /* Pequeño espacio */
    margin-left: 6px;
  
  }


  

  /* Contenido principal ajustado para no quedar bajo la barra inferior */
  main.content, .content {
    margin-left: 0;                /* Quita márgenes laterales */
    width: 100%;                   /* Ocupa toda la pantalla */
    padding-bottom: 90px;          /* Deja espacio para la barra inferior */
  }

  .menu-toggle {
    display: none;                 /* Oculta el botón de minimizar y expandir el menú */
  }
}