@font-face {
    font-family: CenturyGothic;
    src: url('../fonts/CenturyGothic.ttf') format('truetype');
}
body {
    background-color: #e7e5e5;
    font-family: CenturyGothic;
}

/* Estilo para los botones */
.img-btn {
    margin-left: 25px;
    display: inline-block;
    transition: transform 0.3s ease; /* Transición suave */
    width: 443px; /* Ajusta el ancho al tamaño de la imagen */
    height: 80px; /* Ajusta la altura al tamaño de la imagen */
    overflow: hidden; /* Asegura que el contenedor no tenga áreas transparentes adicionales */
}

.img-btn:hover {
    transform: scale(1.1); /* Agrandar el botón al pasar el mouse */
}

.img-btn img {
    max-height: 100%; /* Ajusta la altura máxima de la imagen según tus necesidades */
    width: auto; /* Mantén la proporción de la imagen */
    display: block; /* Elimina el espacio en línea alrededor de la imagen */
}

/* Estilo para el contenedor de los botones */
.btn-container {
    width: fit-content;
    margin-left: 250px;
    margin-top: 50vh ; /* Ajusta el margen superior para centrar verticalmente */
    transform: translateY(-50%); /* Ajusta la posición para centrar verticalmente */
}

.btn-container.shift-right {
    margin-left: 300px; /* Ajusta este valor según sea necesario */
}

.btn-burger-img {
    background: url('../img/burger-menu.png') no-repeat center center;
    background-size: cover;
    margin-top: 10px;
    margin-left: 10px;
    width: 25px; /* Ajusta el ancho del botón */
    height: 25px; /* Ajusta la altura del botón */
    border: none; /* Elimina el borde del botón */
    cursor: pointer; /* Cambia el cursor a una mano */
}

#sidebar {
    background-color: #ac0000;
    position: fixed; /* Fija el sidebar en la posición */
    top: 100px; /* Ajusta el top para que esté debajo del header-top */
    left: 0;
    height: calc(100vh - 100px); /* Altura que cubra toda la página menos la altura del header-top */
    transition: width 0.3s ease;
    overflow-y: auto; /* Agrega una barra de desplazamiento vertical si es necesario */
    z-index: 5; /* Asegúrate de que el sidebar esté por debajo del header-top */
}

#sidebar.inactive {
    width: 50px; /* Ancho cuando el sidebar está inactivo */
}

#sidebar.active {
    width: 250px; /* Ancho cuando el sidebar está activo */
    background-image: url('../img/bg-menu-activo.jpg'); /* Imagen de fondo cuando el sidebar está activo */
    background-size: cover;
    background-position: center;
}

#sidebar ul {
    display: none; /* Ocultar el menú cuando el sidebar está inactivo */
    font-family: CenturyGothic; /* Aplica la fuente CenturyGothic */
    color: white; /* Aplica el color blanco a la letra */
    margin-top: 20px; /* Ajusta este valor según sea necesario para mover la lista hacia abajo */
    padding-left: 10px; /* Añade un poco de padding a la izquierda para separación */
}

#sidebar.active ul {
    display: block; /* Mostrar el menú cuando el sidebar está activo */
}

#sidebar ul li {
    margin-bottom: 10px; /* Añade un margen inferior a los elementos de la lista */
}

#sidebar ul li a {
    color: white; /* Aplica el color blanco a los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
}

#sidebar ul li a:hover {
    text-decoration: underline; /* Opcional: subrayado al pasar el mouse */
}

#sidebar.active .btn {
    display: block; /* Mostrar el botón de cierre cuando el sidebar está activo */
}

#sidebar.inactive .bg-menu-lateral {
    background-image: url('../img/bg-menu-lateral.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

#sidebar .bg-menu-lateral {
    display: none;
}

#sidebar.inactive .bg-menu-lateral {
    display: block;
}

.header-top {
    width: 100%;
    height: 100px; /* Ajusta la altura según sea necesario */
    background-image: url('../img/top.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #ac0000; /* Ajusta el color del texto según sea necesario */
    position: fixed; /* Fija el header-top en la parte superior */
    top: 0;
    left: 0;
    z-index: 10; /* Asegúrate de que el header-top esté por encima del sidebar */
}

.header-top p {
    font-family: CenturyGothic;
    width: 100%;
    margin-top: 50px;
    font-size: 1.2rem; /* Ajusta el tamaño de la fuente según sea necesario */
    color: white;
    position: absolute;
    text-align: right;
    white-space: nowrap; /* Evitar que el texto se divida en varias líneas */
}

/* Media queries para ajustar la altura del header-top en diferentes tamaños de pantalla */
@media (max-width: 768px) {
    .header-top {
        height: 100px; /* Ajusta la altura para pantallas más pequeñas */
    }

    .header-top p {
        font-size: 1rem; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
    }

    #sidebar {
        top: 100px; /* Ajusta el top para pantallas más pequeñas */
        height: calc(100vh - 100px); /* Altura que cubra toda la página menos la altura del header-top */
        background-color: #ac0000; /* Rellenar el espacio en blanco superior vertical */
    }

    #sidebar::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px; /* Ajusta la altura según sea necesario */
        background-color: #ac0000; /* Color de fondo para rellenar el espacio en blanco */
        z-index: -1; /* Asegúrate de que esté detrás del contenido del sidebar */
    }

    .img-btn {
        width: 300px; /* Ajusta el ancho del botón de imagen */
        height: 60px; /* Ajusta la altura del botón de imagen */
    }
}

@media (max-width: 576px) {
    .header-top {
        height: 80px; /* Ajusta la altura para pantallas aún más pequeñas */
    }

    .header-top p {
        font-size: 0.8rem; /* Ajusta el tamaño de la fuente para pantallas aún más pequeñas */
    }

    #sidebar {
        top: 80px; /* Ajusta el top para pantallas aún más pequeñas */
        height: calc(100vh - 80px); /* Altura que cubra toda la página menos la altura del header-top */
        background-color: #ac0000; /* Rellenar el espacio en blanco superior vertical */
    }

    #sidebar::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 50px;
        height: 80px; /* Ajusta la altura según sea necesario */
        background-color: #ac0000; /* Color de fondo para rellenar el espacio en blanco */
        z-index: -1; /* Asegúrate de que esté detrás del contenido del sidebar */
    }
    

    .img-btn {
        width: 300px; /* Ajusta el ancho del botón de imagen */
        height: 60px; /* Ajusta la altura del botón de imagen */
    }

}

/* Asegúrate de que el contenedor padre ocupe toda la altura de la pantalla */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Estilo para el contenedor de login */
.login-container {
    background-color: #e7e5e6; /* Color de fondo principal */
    width: 300px;
    border-radius: 15px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    overflow: hidden; /* Para que los bordes redondeados afecten todo */
}

/* Cabecera con imagen */
.login-header {
    background: url('../img/bg-login.png') no-repeat center/cover;
    height: 60px; /* Ajusta la altura según necesites */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Contenido del login */
.login-body {
    padding: 20px;
}

.login-body h2 {
    font-size: 20px;
    color: #444;
    margin-bottom: 15px;
}

.login-body label {
    display: block;
    text-align: center;
    font-size: 16px;
    margin-top: 15px;
    color: #666;
}

.login-body input[type="text"],
.login-body input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #d32f2f;
    border-radius: 15px;
    outline: none;
}

.login-body input[type="submit"] {
    width: 100%;
    background: url('../img/btn-sesion.png') no-repeat center/cover;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
}

.login-body input[type="submit"]:hover {
    background: #b71c1c;
}

.logout-form {
    position: absolute;
    bottom: 60px; /* Ajusta este valor según sea necesario */
    left: 10px; /* Ajusta este valor según sea necesario */
}

.logout-form .btn {
    display: none;
    text-decoration: none;
    color: white; /* Asegura que el texto del botón sea blanco */
    padding: 0;
}

.content-container {
    font-family: CenturyGothic;
     /* Ajusta este valor según sea necesario */
    margin-top: 10rem; /* Ajusta este valor según sea necesario */
    padding-top: 5rem; /* Ajusta este valor según sea necesario */
    width: 80%; /* Asegura que el contenedor ocupe todo el ancho disponible */
    align-self: center;
    overflow-x: auto; /* Permite el desplazamiento horizontal si es necesario */
}

.table-responsive {
    margin-left: 50px; /* Ajusta este valor según sea necesario */
    width: 100%; /* Asegura que el contenedor de la tabla ocupe todo el ancho disponible */
    overflow-x: auto; /* Permite el desplazamiento horizontal si es necesario */
}