@font-face {
    font-family: segoe_ui; /* Cambia el nombre para evitar conflictos */
    src: url(../font/segoe-ui.ttf); 
    font-weight: 400; /* Asigna el peso normal/regular */
    font-style: normal;
}

/* 2. DEFINIR EL PESO SEMIBOLD (NEGITA) */
@font-face {
    font-family: segoe_semibold; /* Mismo nombre de familia */
    src: url(../font/segoe-ui-semibold.ttf); 
    font-weight: 600; /* Asigna el peso semibold o bold */
    font-style: normal;
}


.fondo {
    background-image: url('../img/fondo.svg');
    /* Asegúrate que la ruta sea correcta */
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

body {
    font-family: segoe_semibold;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    /* Esto es clave para evitar el scroll en el body */
}

/* Estilo para el Navbar Superior */
.navbar.grishielo {
    position: relative;
    z-index: 1045;
    min-height: 63px;
    /* Tu altura actual del navbar */
    padding-bottom: 0 !important;
    background-color: rgb(225, 236, 236);
    /* Tu color grishielo */

    /* CAMBIO APLICADO: Quitamos el border-bottom, la línea se manejará con ::after */
    border-bottom: none;
}

/* CAMBIO APLICADO: Restauramos y ajustamos el pseudo-elemento ::after */
.navbar.grishielo::after {
    content: "";
    position: absolute;
    bottom: -4px;
    /* Ajuste para la posición de la línea, si tienes 5px de altura y quieres que el borde inferior esté en 68px, necesitas que su top esté en 63px (bottom del navbar) + 0px. Si quieres que se vea fuera del navbar, bottom -Xpx */
    left: 0;
    width: 100%;
    height: 4px;
    /* Altura de la línea */
    background-color: #37DCDB;
    /* Color de la línea */
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s ease;
    z-index: 1046;
    /* Esto es importante para que el JavaScript pueda detectarlo: */
    pointer-events: auto;
}

.navbar.grishielo:hover::after {
    transform: scaleY(1);
    /* Escala a su tamaño normal (100%) */
}


.piedepagina {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.grishielo {
    background-color: rgb(225, 236, 236);
}

.azul {
    background-color: #5865e7;
}

.aguamarina {
    color: rgb(55, 220, 219);
}

.btn-search {
    right: 7px;
    top: 7px;
    bottom: 7px;
}
.errorlist {
    list-style: none; /* Esto ya lo tienes */
    padding-left: 0;  /* 👈 ESTO ES LO CRUCIAL: Elimina el padding izquierdo */
    margin-left: 0;   /* Por si acaso el navegador usa margin en lugar de padding */
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0;
}

/* Y si los errores están dentro de divs con texto centrado: */
.errorlist li {
    text-align: center; /* Asegura que el texto dentro de la lista esté centrado */
    justify-content: center;
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
}

ul {
    list-style: none;
}

.modal-header {
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: segoe_semibold;
}

.btn-primary {
    --bs-btn-bg: #5865e7;
    --bs-btn-border-color: #5865e7;
    --bs-btn-active-bg: #4E5Ad1;
    --bs-btn-active-border-color: #4E5Ad1;
    font-family: segoe_semibold;
}

.btn-primary:hover {
    background-color: #4E5Ad1;
}

.btn-info {
    --bs-btn-bg: #37DCDB;
    --bs-btn-border-color: #37DCDB;
    --bs-btn-active-bg: #33caca;
    --bs-btn-active-border-color: #33caca;
}

.btn-info:hover {
    background-color: #33caca;
}

.sidebar {
    width: 70px;
    min-height: calc(100vh - 63px);
    overflow: hidden;
    transition: width 0.3s ease;
    position: relative;
    z-index: 1050;
    font-family: segoe_semibold;
}

.sidebar:hover {
    width: 221px;
}

.sidebar ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.sidebar ul li {
    position: relative;
}

.sidebar ul li a {
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 15px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar ul li a img {
    margin-left: 5px;
    margin-right: 15px;
    text-align: center;
    width: 30px;
    height: 30px;
    filter: none;
}

.sidebar ul li a:hover,
.sidebar .has-submenu.submenu-active>a,
.sidebar .has-submenu.submenu-clicked>a {
    color: white;
    background-color: #5865E7;
}

.sidebar .bottom-item a {
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 5px;
}

.sidebar .bottom-item a img {
    margin-left: 20px;
    margin-right: 15px;
    text-align: center;
    width: 30px;
    height: 30px;
    filter: none;
}

.sidebar .bottom-item a:hover {
    color: white;
    background-color: #5865E7;
}

.sidebar:not(:hover) li a span,
.sidebar:not(:hover) .bottom-item a span {
    display: none;
}

.sidebar:hover li a span,
.sidebar:hover .bottom-item a span {
    display: inline;
    margin-left: 5px;
}

.sidebar:not(:hover) .has-submenu.submenu-clicked>a span {
    display: none;
}

.sidebar:hover .has-submenu.submenu-clicked>a span {
    display: inline;
    margin-left: 5px;
}

.sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    width: 4px;
    height: 100%;
    background-color: #5865E7;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar:hover::before {
    opacity: 1;
}

.sidebar .has-submenu {
    position: relative;
}

.sidebar .has-submenu .submenu {
    display: none;
    position: absolute;
    left: calc(100% - 5px);
    top: 0;
    margin-left: 5px;
    background-color: rgb(225, 236, 236);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1051;
    min-width: 150px;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

.sidebar .has-submenu .submenu li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: black;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar .has-submenu .submenu li a:hover {
    background-color: #5865E7;
    color: white;
}

/* --- ESTILOS PARA EL OVERLAY --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50);
    opacity: 0;
    visibility: hidden;
    z-index: 1040;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s;
}

/* --- FIN DE ESTILOS PARA EL OVERLAY --- */

.sidebar .has-submenu.submenu-active>a,
.sidebar .has-submenu.submenu-clicked>a {
    color: white;
    background-color: #5865E7;
}

.navbar {
    font-family: segoe_semibold;
}
/* Altura uniforme para los elementos del navbar que queremos que tengan un hover de alto completo */
.navbar-nav .nav-item {
    height: 63px;
    /* Ya lo tenías así, coincide con min-height del navbar */
    display: flex;
    align-items: center;
}

/* Estilos para "Foto usuario" y "Nueva pestaña" (el ancho del cuadrado de hover) */
.navbar-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 63px;
    /* Ancho para hacer el cuadrado */
    height: 100%;
    transition: background-color 0.3s ease;
}

.navbar-nav .nav-item .nav-link:hover {
    background-color: #37DCDB;
}

/* Invierte el color de los iconos a blanco al hacer hover */
.navbar-nav .nav-item .nav-link:hover img {
    filter: invert(1);
}

.custom-dropdown {
    position: relative;
    /* Importante para posicionar el submenú en relación a este elemento */
}

/* --- ESTILOS DEL DROPDOWN DE USUARIO --- */
.custom-dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out, pointer-events 0s 0s;
    pointer-events: auto;
    position: absolute;
    top: 68px;
    right: 0;
    min-width: 160px;
    background-color: rgb(225, 236, 236);
    /* Tu color grishielo */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
}

.custom-dropdown-menu.active {
    max-height: 500px;
    pointer-events: auto;
}

.custom-dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #707070;
}

.custom-dropdown.active .dropdown-toggle-custom img {
    filter: invert(1);
}

.custom-dropdown.active .dropdown-toggle-custom {
    background-color: #37DCDB;
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: black;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-dropdown-item:hover,
.custom-dropdown-item:focus {
    background-color: #37DCDB;
    color: white;
}

.custom-dropdown-info-item {
    color: #707070;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.custom-dropdown-logout-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    font-weight: 400;
    color: black;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-dropdown-logout-item:hover,
.custom-dropdown-logout-item:focus {
    background-color: #5865E7;
    color: white;
}

.aside-filter {
    display: none;
    position: fixed;
    /* CAMBIO APLICADO: Ajustamos el top del aside-filter */
    top: 67px;
    /* Debe empezar justo después de la línea del navbar */
    left: 74px;
    right: 4px;
    height: 130px;
    background-color: rgb(225, 236, 236);
    font-family: segoe_semibold;
    padding-bottom: 60px;
}

.aside-filter.show {
    display: flex;
}

/* Tus estilos existentes para input[type="date"] y :focus se mantienen */
input[type="date"] {
    height: 34px;
    border-color: #dee2e6;
    color: #707070;
    text-align: left;
    border-radius: 0.25rem;
    font-size: 14px;
    font-family: segoe_ui;
}



.aside-botones {
    /* Este es el contenedor para tus botones */
    display: flex;
    flex-direction: column;
    /* Apila los botones verticalmente */
    gap: 10px;
    /* Añade un espacio entre los botones (opcional, pero bueno para la estética) */
    justify-content: flex-end;
    /* Alinea los botones en la parte superior de la columna */
    align-items: center;
    /* Centra los botones horizontalmente dentro de la columna, ajusta según sea necesario */
    /* Añade cualquier otro estilo para tu última columna aquí */
    max-width: 100%;
    white-space: normal;
}

.boton_primary {
    display: flex;
    background-color: #5865E7;
    align-items: center;
    width: 150px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    align-items: center;
    border: 0;
    color: white;
    position: relative;
    transition: opacity 0.3s;
}

.boton_info {
    display: flex;
    background-color: #37DCDB;
    align-items: center;
    width: 150px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    align-items: center;
    border: 0;
    color: white;
    position: relative;
    transition: opacity 0.3s;
}


.icono-boton {
    width: 20px;
    /* Define un ancho fijo para tu icono */
    height: 20px;
    /* Define una altura fija para tu icono */
    margin-left: 10px;
    flex-shrink: 0;
    /* Asegura que el icono no se encoja */
    margin-right: 0;
}

.texto-boton {
    flex-grow: 1;
    /* Permite que el span del texto ocupe todo el espacio disponible */
    text-align: center;
    /* Centra el texto dentro de su propio contenedor (el span) */
}

.modal-body .form-select,
.modal-body .form-control {
    margin-left: 0;
    border-color: #A1A1A1;
    color: #707070;
    font-family: segoe_ui;
    font-size: medium;

}

.form-control::placeholder {
    color: #A1A1A1;
}


.aside-filter .form-select {
    color: #707070;
    font-family: segoe_ui;
    font-size: medium;

}

.table-light,
.table-light > th,
.table-light > td {
    /* Define tu color de fondo deseado. Ejemplo: Amarillo suave */
    --bs-table-bg: rgb(225, 236, 236); /* Puedes usar variables CSS de Bootstrap o un color hexadecimal */
    background-color: rgb(225, 236, 236) !important; /* Añadir !important si la regla no se aplica */
    color: #483f0f; /* Opcional: Cambiar el color del texto para el contraste */
    border-color: #ffffff; /* Opcional: Cambiar el color del borde */
}

.table tbody td {
    font-family: segoe_ui; /* Forzar el uso de la versión regular */
    font-weight: normal !important;
}

.pagination .page-item.active .page-link {
    /* Cambia el color de fondo del botón activo */
    background-color: #5865E7; /* Ejemplo: Azul primario */
    /* Cambia el color del texto del botón activo */
    color: white; 
    /* Cambia el color del borde del botón activo */
    border-color: #5865E7; 
}

.pagination .page-link {
    color: #707070; /* Ejemplo: Mismo azul para el texto de los links */
    background-color: #ffffff;
}

.pagination .page-link:hover {
    color: #707070;
    background-color: #f0f2f5; /* Un azul más oscuro */
    border-color: #f0f2f5;
}

#pagination-wrapper-fixed {
    /* Fija el elemento a la ventana del navegador */
    position: fixed; 
    bottom: 0;
    /* Asegura que ocupe todo el ancho */
    left: 70px;
    right: 0;
    width: calc(100% - 70px);
    /* Z-index: Debe estar por encima del contenido de la tabla */
    z-index: 1040;
    background-color: #ffffff; /* Fija un fondo para que tape el contenido de la tabla */
    padding: 15px; /* Un poco de relleno arriba y abajo para que no esté pegada al borde */
}

#pagination-wrapper-fixed .pagination {
    margin-bottom: 0; 
}

#pagination-wrapper-fixed #pagination-container {
    width: 100%;
}

/* Para centrar el nav dentro del wrapper fijo */
#pagination-container {
    width: 100%;
}

.aside-filter .container-fluid {
    /* Ajusta el padding-bottom para dejar espacio a la barra fija */
    padding-bottom: 60px !important; 
}

/* O aún mejor, al contenedor de la tabla dentro del aside */
.aside-filter .table-responsive {
    /* Si la tabla tiene su propio scroll, puede que necesites ajustar esto */
    margin-bottom: 60px;
}

/*
 * 1. Estilo para el contenedor del scroll
 * - max-height: Define la altura máxima antes de que aparezca el scroll.
 * - overflow-y: auto; Permite que la barra de scroll vertical aparezca SÓLO si el contenido excede el max-height.
 */
.scroll-y-container {
    max-height: 72vh; /* Ajusta este valor para que quepan exactamente 18 filas */
    overflow-y: auto;
}

/*
 * 2. Estilo para el encabezado fijo
 * - position: sticky; Permite que el elemento se "pegue" en su posición.
 * - top: 0; Fija el encabezado en la parte superior del contenedor con scroll.
 * - z-index: 10; Asegura que el encabezado fijo esté por encima del contenido que se desplaza.
 */
.scroll-y-container thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Esto es crucial para que el fondo del encabezado tape el contenido que se desplaza.
       Usa el mismo color de tu clase 'table-light' o el que defina tu estilo. */
}

.content-area-padding {
    /* Ajusta el valor: debe ser un poco más grande que la altura total de la paginación fija */
    padding-bottom: 70px; 
}