/* Fondo de imagen en el body */
body {

    background-image: url('../images/pop-bg.jpg'); /* Ruta de la imagen */
    background-size: cover; /* Hace que la imagen cubra toda la pantalla */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Fija la imagen al fondo cuando se hace scroll */
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina relleno por defecto */
}

/* Estilos del header */
.main-header {
    
    color: #fff;
    padding: 20px;
    text-align: center;
}

.main-header h1 {
    margin: 0;
    font-size: 24px;
}

/* Estilos de la barra de navegación */
.navbar {
    margin-top: 15px;
}

.nav-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* Permite que los elementos se ajusten a varias líneas */
}

.nav-list li {
    display: flex;
    align-items: center;
}

.nav-list a {
    color: #000000;
    text-decoration: none;
    padding: 8px 15px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    background-color: #ffffff62;
    border-radius: 5px;
}

.nav-list a:hover {
    background-color: #5c5c5c;
    border-radius: 5px;
}

/* Estilos para el ícono de usuario */
.user-info {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.user-info i {
    font-size: 20px;
}

.user-info span {
    font-size: 16px;
    font-weight: 500;
}


/* Estilo para el ícono de usuario */
.user-icon {
    display: flex;
    align-items: center;
}

.user-icon i {
    margin-right: 5px;
    color: #333;
}

/* Alertas */
.alert {
    padding: 15px;
    margin: 10px 0;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    .nav-list {
        flex-direction: column; /* Cambiar a columna en dispositivos móviles */
        align-items: center; /* Centrar elementos */
    }

    .nav-list a {
        padding: 10px 20px; /* Aumentar el área de clic */
        width: 100%; /* Hacer que los enlaces ocupen todo el ancho */
        text-align: center; /* Centrar el texto */
    }

    .main-header {
        padding: 15px; /* Reducir el espaciado en móviles */
    }

    .main-header h1 {
        font-size: 20px; /* Reducir tamaño de fuente */
    }
}




/* Estilo para el botón del menú */
.menu-toggle {
    display: none; /* Ocultar por defecto */
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Mostrar el botón en móviles */
        margin: 15px auto; /* Centrar el botón */
        
    }

    .nav-list {
        display: none; /* Ocultar el menú por defecto */
        flex-direction: column; /* Cambiar a columna */
        align-items: center; /* Centrar elementos */
        width: 100%; /* Ancho completo */
    }

    .nav-list.active {
        display: flex; /* Mostrar el menú cuando está activo */
    }

    .nav-list a {
        padding: 10px 20px; /* Aumentar área de clic */
        width: 100%; /* Hacer que los enlaces ocupen todo el ancho */
        text-align: center; /* Centrar texto */
    }
}
   .headeryo {
    position: relative;         /* Cambia a relative o absolute según tus necesidades */
    z-index: 1000;             /* Un valor alto para asegurarte de que esté por encima */
    display: flex;              /* Utiliza flexbox para centrar */
    justify-content: center;    /* Centra horizontalmente */
    align-items: center;        /* Centra verticalmente */
    height: 100px;              /* Ajusta la altura según tus necesidades */
 background-color: #f8f9fa60;
    padding: 20px;              /* Espaciado interno opcional */
}



/* Estilos generales para el footer */
footer {
    background-color: #333; /* Color de fondo oscuro */
    color: #fff; /* Color de texto blanco */
    text-align: center; /* Centrar el texto */
    padding: 20px 0; /* Espaciado alrededor del contenido */
    position: relative; /* Asegura que el contenido se muestre correctamente */
    font-size: 14px; /* Tamaño de fuente más pequeño */
}

/* Estilo para el texto del copyright */
footer .tm-copyright-text {
    margin: 0; /* Eliminar márgenes */
}

/* Estilo para el año actual */
footer .tm-current-year {
    font-weight: bold; /* Poner en negrita el año */
}

/* Estilo para el enlace */
footer .tm-text-highlight {
    color: #f9a825; /* Color de texto amarillo */
    text-decoration: none; /* Quitar el subrayado del enlace */
    font-weight: bold; /* Poner el enlace en negrita */
    transition: color 0.3s; /* Transición suave para el color */
}

/* Efecto al pasar el ratón sobre el enlace */
footer .tm-text-highlight:hover {
    color: #fbc02d; /* Color más brillante al pasar el mouse */
}

/* Pequeños ajustes para mejorar la legibilidad en pantallas pequeñas */
@media (max-width: 768px) {
    footer {
        font-size: 12px; /* Reducir el tamaño de la fuente en pantallas pequeñas */
    }
}