@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-weight: 800;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.main {
    min-height: 100vh;
    width: 110%;
    overflow: hidden;
    background-image: url("../img/daniel.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Ajusta la imagen para que cubra toda la pantalla */
}



#sidebar {
    max-width: 234px;
    min-width: 234px;
    transition: all 0.35s ease-in-out;
    background-color: #000000;
    display: flex;
    flex-direction: column;
}

#sidebar.collapsed {
    margin-left: -264px;
}
#sidebar-toggler {
        display: none; /* Ocultar el botón en pantallas grandes */
    }
    /* Posicionamiento del botón como pestaña */
    #toggler-btn {
        position: fixed;
        top: 70px; /* Ajusta según la altura de tu barra superior */
        left: 0;
        background-color: #005aa7; /* Color del botón/pestaña */
        cursor: pointer;
        border: 2px solid #fbde02; /* Borde para dar más visibilidad */
        border-radius: 0 8px 8px 0; /* Bordes redondeados solo en la derecha */
        padding: 5px 10px;
        z-index: 1002;
        transform: translateX(-50%); /* Sobresale del borde izquierdo */
        transition: transform 0.3s ease-in-out;
    }

    #toggler-btn:hover {
        transform: translateX(0); /* Desliza hacia adentro al pasar el mouse */
        background-color: #ac965a; /* Cambio de color al hover */
        color: #005aa7;
    }

    #toggler-btn i {
        font-size: 1.75rem;
        color: white;
    }

.navbar {
    padding: 1.15rem 1.5rem;
    background-color: #302E2E; /* Fondo negro principal */
    border-bottom: 2px dashed #b3a8a8;
    position: relative; /* Necesario para contener las ondas */
    overflow: hidden; /* Oculta cualquier contenido que salga del contenedor */
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%; /* Cubre más área horizontal para animación fluida */
    height: 400%; /* Extiende el gradiente para dar un efecto de ondas verticales */
    background: radial-gradient(circle,
        rgba(0, 255, 204, 0.4), /* Verde Aqua */
        rgba(0, 128, 255, 0.5), /* Azul Brillante */
        rgba(255, 0, 128, 0.4), /* Magenta */
        rgba(255, 255, 0, 0.3)  /* Amarillo */
    );
    background-size: 50% 50%; /* Tamaño reducido para que las ondas sean más definidas */
    opacity: 0.85; /* Mezcla el gradiente con el fondo negro */
    animation: wave 10s infinite alternate; /* Animación de onda */
    z-index: 0; /* Mantiene las ondas detrás del contenido */
}

.navbar > * {
    position: relative; /* Asegura que el contenido esté por encima de las ondas */
    z-index: 1;
}

/* Animación de ondas */
@keyframes wave {
    0% {
        transform: translate(-40%, -40%) scale(1.1); /* Inicia desde el centro con un leve zoom */
    }
    50% {
        transform: translate(10%, -30%) scale(1.3); /* Movimiento hacia arriba con más zoom */
    }
    100% {
        transform: translate(50%, -40%) scale(1.1); /* Movimiento hacia la derecha con regreso al tamaño inicial */
    }
}

.logout{
    color:white !important;
    font-size: 56px;
    position: absolute;
    top: 0;
    right: 5rem;
    margin: 0;
    top:2rem;
}
.logout:hover{
    color:red !important;

}
.sidebar-nav {
    flex: 1 1 auto;
}

.sidebar-logo {
    padding: 1.15rem 1.5rem;
    text-align: center;
}

.sidebar-logo a {
    color: #FFF;
    font-weight: 800;
    font-size: 1.5rem;
}

.sidebar-header {
    color: #FFF;
    font-size: .75rem;
    padding: 1.5rem 1.5rem .375rem;
}

a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #FFF;
    position: relative;
    transition: all 0.35s;
    display: block;
    font-size: 1.25rem;
}

a.sidebar-link:hover {
    background-color: #f9f6f630;
}

.sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

.sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

/* Media Queries for Responsiveness */

/* Para dispositivos móviles, mostrar/ocultar el sidebar */
@media (max-width: 748px) {
    /* Hacer que el sidebar esté oculto por defecto */
    #sidebar {
        position: fixed;
        top: 70px; /* Ajustamos el top para que se deslice justo debajo del botón */
        left: 0;
        width: 200%; /* Asegura que el sidebar ocupe el ancho completo */
        height: 0; /* Inicialmente el sidebar tiene altura 0 */
        background-color: #333;
        overflow: hidden; /* Evitar que se vea el contenido al principio */
        transition: height 0.3s ease-in-out; /* Deslizar hacia abajo */
        z-index: 1001; /* Asegurarse de que esté encima de otros elementos */
    }

    /* Mostrar el sidebar cuando tiene la clase 'active' */
    #sidebar.active {
        height: 250px; /* Altura del sidebar cuando está activo */
        overflow-y: auto; /* Hacer scroll si el contenido es más grande */
    }
    #toggler-btn{
      display: none;
    }
    /* Botón para mostrar el sidebar */
    #sidebar-toggler {
        position: absolute;
        top: 10px; /* Ajusta la posición */
        left: 15px;
        color: white;
        font-size: 30px;
        padding: 6px;
        background-color: transparent;
        z-index: 1002; /* Asegurarse de que esté encima de otros elementos */
        border: none;
        cursor: pointer;
        margin-left: -10px;
    }

    /* Ajustes para el botón de logout en dispositivos móviles */
 


    .logout i {
        font-size: 18px; /* Reducir el tamaño del ícono */
    }


    .header-container_g {
      /*position: absolute; /* Ubicación fija en la parte superior */
      top: 155px; /* Espaciado desde la parte superior */
      left: 58%; /* Centra horizontalmente */
      /*transform: translateX(-50%); /* Ajusta la posición para centrar completamente */
      width: 30%; /* Define un ancho fijo para el contenedor */
      max-width: 800px; /* Limita el ancho máximo */
      background-color: white; /* Fondo verde */
      border-radius: 10px; /* Bordes redondeados */
      padding: 15px 30px; /* Espaciado interno */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */
      text-align: center; /* Centra el texto dentro del contenedor */
      z-index: 1; /* Asegura que esté encima de otros elementos */
      opacity: 0.8;
      display: none;
    }
    .header-container_g h1 {
      color: black; /* Texto negro */
      font-family: 'Arial', sans-serif; /* Fuente */
      font-size: 24px; /* Tamaño del texto */
      margin: 0; /* Elimina márgenes por defecto */
      letter-spacing: 1px; /* Espaciado entre letras */
        display: none;
    }
    .header-container_g:hover {
      background-color: #005aa7; /* Cambio de tono al pasar el cursor */
      cursor: pointer; /* Indica interactividad */
        display: none;
    }
    /* Cambiar el tamaño del logo para pantallas pequeñas y ocultarlo */
    nav img {
      width: 200px;
         height: auto;
         left: 50px;
    }
    /* El botón de toggler se mostrará solo en dispositivos móviles */
        #sidebar-toggler {
            display: block; /* Asegura que se muestre en pantallas pequeñas */
        }


}



/* Tablets */
@media (max-width: 1024px) {
    .main {
        background-size: cover;
        background-position: center;
    }

    #sidebar {
        width: 250px; /* Aseguramos que tenga un ancho adecuado en tablets */
    }

    .navbar {
        padding: 1.25rem;
    }

    .navbar::before {
        width: 250%;
        height: 350%;
        background-size: 55% 55%;
    }

    .sidebar-logo a {
        font-size: 2rem;
    }

    .sidebar-link {
        font-size: 1.1rem;
        padding: .625rem 1.25rem;
    }

    /* Ajustes para el botón de logout en dispositivos móviles */
  


    .logout i {
        font-size: 25px; /* Reducir el tamaño del ícono */
    }


}