html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Navbar personalizado */
.custom-navbar {
    background-color: #052F46; /* Azul muy oscuro */
    border-bottom: 2px solid #024C71;
}

    .custom-navbar .navbar-brand {
        color: #ffffff;
    }

    .custom-navbar .nav-link {
        color: #ffffff;
    }

        .custom-navbar .nav-link:hover,
        .custom-navbar .nav-link:focus {
            color: #67E3F2; /* Celeste claro */
            text-decoration: underline;
        }

    /* Botón hamburguesa color blanco */
    .custom-navbar .navbar-toggler {
        border-color: #ffffff;
    }

    .custom-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

/* Footer personalizado */
.custom-footer {
    background-color: #024C71; /* Azul medio */
    color: #ffffff;
    border-top: 2px solid #0083A1;
}

    .custom-footer p {
        margin-bottom: 0;
    }

/* Reemplazar botones */
.btn-primary {
    background-color: #052F46;
    border-color: #052F46;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: #024C71;
        border-color: #024C71;
    }

/* Reemplazar botones secundarios */
.btn-secondary {
    background-color: #024C71;
    border-color: #024C71;
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
        background-color: #0083A1;
        border-color: #0083A1;
    }

/* Reemplazar info */
.btn-info {
    background-color: #0083A1;
    border-color: #0083A1;
}

    .btn-info:hover, .btn-info:focus, .btn-info:active {
        background-color: #00A7C8;
        border-color: #00A7C8;
    }

/* Success */
.btn-success {
    background-color: #00A7C8;
    border-color: #00A7C8;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active {
        background-color: #67E3F2;
        border-color: #67E3F2;
    }

/* Warning */
.btn-warning {
    background-color: #67E3F2;
    border-color: #67E3F2;
}

    .btn-warning:hover, .btn-warning:focus, .btn-warning:active {
        background-color: #052F46;
        border-color: #052F46;
    }

.btn-danger {
    background-color: #dc3545; /* o tu color personalizado */
    border-color: #dc3545;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active {
        background-color: #a71d2a;
        border-color: #a71d2a;
    }

/* También alertas */
.alert-primary {
    background-color: #052F46;
    color: #ffffff;
    border-color: #052F46;
}

.alert-secondary {
    background-color: #024C71;
    color: #ffffff;
    border-color: #024C71;
}

.alert-info {
    background-color: #0083A1;
    color: #ffffff;
    border-color: #0083A1;
}

.alert-success {
    background-color: #00A7C8;
    color: #ffffff;
    border-color: #00A7C8;
}

.alert-warning {
    background-color: #67E3F2;
    color: #000000;
    border-color: #67E3F2;
}


/* Estilo para el contenedor de la notificación flotante */
.notification-container {
    position: fixed;
    top: 70px; /* Ajusta la distancia desde la parte superior */
    right: 20px; /* Ajusta la distancia desde la parte derecha */
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
    background-color: #052F46; /* Fondo primary de Bootstrap (color azul) */
    border-radius: 10px; /* Bordes redondeados */
    padding: 10px; /* Espaciado alrededor del ícono */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para el efecto flotante */
    width: fit-content; /* Ajuste automático según el tamaño del contenido */
}

    /* Estilo para el ícono */
    .notification-container .bi-bell {
        font-size: 2rem;
        color: white; /* Color blanco para el ícono */
    }

    /* Estilo para el badge flotante */
    .notification-container #badgeNoti-desktop {
        position: absolute;
        top: -5px;
        right: -5px;
        transform: translate(50%, -50%);
        z-index: 10000;
        background-color: #dc3545; /* El color del badge (rojo en este caso) */
        color: white; /* Color blanco para el texto dentro del badge */
        font-size: 0.75rem; /* Ajusta el tamaño del texto */
        padding: 3px 6px; /* Ajusta el padding del badge */
        border-radius: 50%; /* Hace el badge circular */
    }

    /* Estilo para la lista de notificaciones */
    .notification-container .dropdown-menu {
        width: 400px;
        max-height: 400px;
        overflow-y: auto;
        /*background-color: #007bff;*/ /* Fondo igual al del ícono de notificación */
        border: none; /* Eliminar borde por defecto */
        border-radius: 10px; /* Bordes redondeados para la lista */
    }



@media (max-width: 766px) {
    .notification-container {
        display: none;
    }
}

@media (max-width: 576px) {
    .card {
        width: 100% !important;
    }
}



/* Estilo general para Select2 */
.select2-container--bootstrap-5 .select2-selection {
    height: calc(2.5rem + 5px); /* altura como .form-control */
    padding: 0.375rem 0.75rem; /* padding estándar de Bootstrap */
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
}

/* Centrar el texto del combo */
.select2-container--bootstrap-5 .select2-selection__rendered {
    line-height: .5;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Ajustar la altura del icono de flecha */
.select2-container--bootstrap-5 .select2-selection__arrow {
    height: calc(2.5rem + 300px);
    top: 0;
}


.offcanvas {
    max-width: none !important;
}

/* Pantallas grandes (desktops) */
@media (min-width: 992px) {
    .offcanvas {
        width: 65vw !important;
    }
}

/* Pantallas medianas (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .offcanvas {
        width: 85vw !important;
    }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 767.98px) {
    .offcanvas {
        width: 95vw !important; /* o incluso 100vw si quieres pantalla completa */
    }
}