/* Estructura base igual que la principal */
* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif; 
}

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 */
}

/* Cuerpo general de la página */
body { 
  display: flex;                /* Usa flexbox para alinear sidebar y el contenido */
  min-height: 100vh;            /* Altura mínima de la ventana */
  background: linear-gradient(to bottom right, #ffffff, #fcd1c8);    /* Color del fondo */
}

/* 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 */
  
}


/* 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;
  margin-left: 85px;       /* Mueve el logo más a la derecha */
  position: relative;
  top: -2px;/*mueve verticalmente el texto*/
}

/*logo + bienvenida*/
.cursos-header {
  text-align: center;
  margin-bottom: 50px;
}

/* Animacion logo y tamaño*/
.logo-animado {
  width: 200px;
  animation: flotar 3s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Tipografía Título principal */
.cursos-header h1 {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  color: #0a3d62;
  margin: 20px 0 10px;
  text-transform: uppercase;
}

/* Subtítulo descriptivo del encabezado */
.cursos-header p {
  font-family: "Cambria", serif;
  color: #444;
  max-width: 700px;
  margin: 0 auto;
  font-size: 1rem;
}

/* Botones de cada año*/
.filtros-anios {
  text-align: center;
  margin-bottom: 30px;
}

/* Estilo general de los botones */
.anio-btn {
  background-color: #0a3d62; 
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  margin: 0 10px;
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  font-size: 1rem;
  cursor: pointer;/*cambio de forma el mouse al pasarlo por el boton*/
  transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.anio-btn:hover {
  background-color: #145a91;
  transform: scale(1.05);
}


/*Estructura de las tarjetas de cursos*/
.cursos-grid {
  display: flex;
  flex-direction: column;
  gap: 60px; /* Espacio entre los años */
  margin-bottom: 40px;/*Espacio entre los cursos y el footer*/
  padding-left: 20px;  /* crea una separación solo del sidebar entre los cursos y el sidebar */
}

/* Cada grupo de cursos por año */
.cursos-año {
  display: flex;
  justify-content: center;
  gap: 20px; /* Espacio entre la tarjeta grande y las pequeñas */
  flex-wrap: wrap; /* Se adapta en pantallas pequeñas */
  
}

/*Tarjeta principal (grande, a la izquierda)*/
.curso-grande {
  flex: 1;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

 /*Imagen dentro de la tarjeta grande */
.curso-grande img {
  width: 300px;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  margin-bottom: 15px;
}

/* Título del curso principal */
.curso-grande h3 {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  font-size: 1.2rem;
  color: #0a3d62;
  margin-bottom: 10px;
}

/* Texto descriptivo */
.curso-grande p {
  font-family: "Cambria", serif;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* hover */
.curso-grande:hover {
  transform: translateY(-8px);
}

/* 
Tarjetas laterales pequeñas (derecha)*/
.curso-lateral {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 20px;
}

/* Tarjeta pequeña  */
.curso-pequeno {
  background: #ffffff;
  border-radius: 20px;
  padding: 50px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Imagen dentro de la tarjeta pequeña */
.curso-pequeno img {
  width: 300px;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  margin-bottom: 10px;
}

/* Título del curso pequeño */
.curso-pequeno h3 {
  font-family: "Arial Rounded MT Bold", Arial, sans-serif;
  color: #0a3d62;
  font-size: 1rem;
  margin-bottom: 8px;
}

/* Descripción del curso pequeño */
.curso-pequeno p {
  font-family: "Cambria", serif;
  color: #444;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Hover animado para las cajas pequeñas */
.curso-pequeno:hover {
  transform: translateY(-6px);
}




/* 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: flex-start;        /* Coloca a la izquierda del todo del SIDEBAR los iconos y textos */
  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;                   
  border: none;       
  margin-left: 23px;             
  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 */
}

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

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


/*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: 20px;
}

.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);
}



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

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

  /* Sidebar se convierte en barra inferior */
  .sidebar {
    width: 100%;                  /* ocupa todo el ancho de la pantalla */
    height: auto;                 /* ajusta la altura automáticamente */
    position: fixed;              /* queda fijo siempre visible */
    bottom: 0;                    /* colocado en la parte inferior */
    top: auto;                   
    left: 0;                      /* alineado completamente a la izquierda */
    display: flex;                
    justify-content: space-around;/* distribuye los ítems uniformemente */
    align-items: center;          /* centra verticalmente los elementos */
    background-color: #012f50;   
    padding: 6px 0;               /* espacio interno vertical */
    z-index: 99;                /* asegura que quede encima de todo */
    border-top: 2px solid #1e79bb;
  }

  /* Oculta el logo dentro del sidebar */
  .sidebar .logo {
    display: none;               
  }

  /* Menú horizontal */
  .menu {
    display: flex;                
    flex-direction: row;          /* los ítems se colocan en fila */
    justify-content: space-around;
    align-items: center;         
    width: 100%;                  /* abarca todo el ancho */
    gap: 0;                       /* sin espacio extra entre ítems */
    padding: 0;                   /* elimina espacio interno */
    margin: 0;                    /* elimina márgenes */
  }

  /* Ítems del menú tipo app (icono y texto) */
  .menu-item {
    display: flex;                
    flex-direction: column;       /* icono arriba y texto abajo */
    justify-content: center;      /* centra en vertical */
    align-items: center;          /* centra en horizontal */
    text-decoration: none;        /* sin subrayado */
    color: #ffffff;               
    font-size: 12px;             
    padding: 4px;                 /* espacio interno */
    flex: 1;                      /* cada item ocupa el mismo espacio */
  }

  /* Íconos más pequeños */
  .menu-item img {
    width: 45px;                 
    height: 45px;                 
    margin-bottom: 2px;           /* espacio entre icono y texto */
  }

  /* Texto debajo del icono */
  .menu-item span {
    display: block;               /* asegura que aparezca en una línea separada */
    font-size: 13px;             
    margin-top: -17px;              /* separación respecto al ícono */
  }

  /* Animación */
  .menu-item:hover {
    background-color: #1e79bb;    /* cambia el fondo al pasar el dedo/mouse */
    border-radius: 8px;           /* bordes redondeados */
  }

  /* Ajusta el contenido principal */
  main,
  .home-section {
    margin-left: 0;               /* elimina desplazamiento lateral */
    width: 100%;                  
    padding-bottom: 80px;         /* deja espacio para la barra inferior */
  }

  /* Centra el encabezado de cursos */
  .cursos-header {
    margin-top: 20px;            
    padding: 0 10px;              /* espacio lateral */
  }

  .cursos-header h1 {
    font-size: 20px;              }
  }

  .cursos-header p {
    font-size: 14px;              /* texto más compacto */
  }

  .logo-animado {
    width: 130px;                
  }

  /* Botones de años más pequeños */
  .filtros-anios {
    display: flex;                
    flex-wrap: wrap;              /* permite saltar a otra línea */
    justify-content: center;      /* centra los botones */
    gap: 10px;                    /* espacio entre botones */
  }

  .anio-btn {
    padding: 8px 20px;            /* tamaño más pequeño */
    font-size: 14px;             
  }

  /* Distribución de cursos en columna */
  .cursos-año {
    flex-direction: column;       /* cada tarjeta de curso va apilada */
    align-items: center;          
  }

  .curso-grande,
  .curso-lateral,
  .curso-pequeno {
    width: 100%;                 
    padding: 16px;                /* espacio interno */
  }

  .curso-grande img,
  .curso-pequeno img {
    height: auto;                 /* mantiene proporción correcta */
  }

  /* Ajuste de sección de contacto */
  .contacto-parte {
    padding-bottom: 30px;         /* más espacio abajo */
  }

  .contacto-contenido {
    display: flex;               
    justify-content: center;      /* centra horizontalmente */
    align-items: center;          
    text-align: center;          
    flex-wrap: wrap;              /* permite que los elementos salten de línea */
    gap: 20px;                    /* espacio entre bloques */
    padding: 20px;                /* espacio interno */
  }

  .contacto-item {
    flex: 1;                      /* cada ítem se adapta al espacio */
    min-width: 150px;             /* tamaño mínimo para no romper diseño */
  }

  /* Footer centrado */
  .footer-simple {
    flex-direction: column;       /* elementos apilados */
    text-align: center;         
    gap: 8px;                     /* espacio entre elementos */
    padding-bottom: 20px;         /* evita que el menú inferior lo tape */
  }

  .social-links {
    display: flex;                /* coloca redes en línea */
    justify-content: center;     
    gap: 15px;                    /* espacio entre iconos */
  }