li,
ul,
span,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", sans-serif !important;
}



:root {
    --background: 255, 0, 60;
    --size: 1.5rem;
    --duration: 3s;
    --scale: 3;
    --opacity: 0.4;
    --color-primary: #2a1fbc !important;
}

#content_buttons_extra {
    display: inline-flex !important;
}

.circle-text-name {
    height: 50px;
    width: 50px;
    padding: 1rem;
    position: relative;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    color: white;
    text-shadow: 1px 1px black;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}


/* ==========================> Paginador <========================== */
#paginador {
    display: flex !important;
    list-style: none !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 1rem 0 !important;
    padding: 0 !important;
}

.pagination {
    margin: 0 !important;
}

.page-item {
    display: inline-block !important;
    border-radius: 3px !important;
    margin: 0 2px !important;
}

a.page-link {
    padding: 6px 12px !important;
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    color: #333 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
}

.page-link:hover {
    background: #eaeaea !important;
    transform: translateY(-1px) !important;
}

.page-item.active .page-link {
    background: #4e73df !important;
    border-color: #4e73df !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1) !important;
}

.page-item.disabled .page-link {
    opacity: 0.5 !important;
    pointer-events: none !important;
    background: #f5f5f5 !important;
    color: #6c757d !important;
}

/* Estilos para los botones de navegación */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 4px !important;
}

/* Ajustes para íconos en los botones */
.page-link i {
    font-size: 0.8em !important;
}

.hidden-important {
    display: none !important;
}

/* ==========================> Paginador (Fin) <========================== */


.filepond--credits {
    display: none !important;
}

footer {
    width: 100%;
    min-width: 100%;
    z-index: 3;
}

.btn-ayuda {
    display: none !important;
    width: 60px;
    height: 60px;
    bottom: 8rem;
    right: 1rem;
    position: fixed;
    z-index: 10;
    border-radius: 50%;
    justify-content: center;
    align-content: center;
    vertical-align: center;
    text-align: center;
    padding: 0;
    color: black !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    font-size: 20pt;
    background: white !important;
}

.pulse-badge {
    animation: pulse-shadow var(--duration) calc(2 * var(--duration) / 3) linear infinite
}

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--background), var(--opacity))
    }

    100% {
        box-shadow: 0 0 0 calc((var(--scale) - 1) * var(--size) / 2) rgba(var(--background), 0)
    }
}

/* ==========================> Select 2 <========================== */
.select2 {
    /*width: calc(100% - 20%) !important;*/
}

.input-group>.select2-container--bootstrap {
    width: calc(80px - 20%) !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}

.select2-container--bootstrap .select2-selection--single {
    height: 38px !important;
}

/* fix text */
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    width: calc(100% - 20%) !important;
    max-width: calc(100% - 20%) !important;
    flex: 1 1 auto !important;
}

/* fix text */

/* ==========================> Select 2 (Fin) <========================== */
.btn-float {
    bottom: 4rem;
    position: fixed;
    width: 48px;
    height: 48px;
    right: 1rem;
    border-radius: 50%;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.btn-float:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.19), 0 6px 12px rgba(0, 0, 0, 0.23);
}

.btn-float:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);
}

.btn-float svg {
    color: white;
    position: relative;
    font-size: 22pt;
    margin: auto !important;
}

#content_search {
    margin-right: 1rem;
}

#sidebar .content-header {}

.smini-visible {
    margin-left: -0.3rem;
    position: relative;
    padding-left: 0 !important;
}

/* ===========================> Navbar Fixed Height <========================== */
/* Mantener altura fija del navbar */
#page-header .content-header {
    min-height: 64px !important;
    max-height: 64px !important;
}

/* Botón de usuario con altura automática (más pequeño) */
#page-header-user-dropdown {
    height: auto !important;
    padding: 0.375rem 0.5rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Foto de perfil en el navbar - mantener aspecto de relación */
#page-header-user-dropdown img.rounded-circle {
    width: 24px !important;
    height: 24px !important;
    object-fit: cover !important;
    object-position: center !important;
    flex-shrink: 0 !important;
}

/* Foto de perfil en el dropdown */
.img-avatar.img-avatar48 {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Asegurar que todos los elementos del navbar mantengan la altura */
#page-header .content-header .d-flex {
    min-height: 33px !important;
    max-height: 33px !important;
}

/* Botones del navbar con altura consistente */
#page-header .btn-sm {
    min-height: 33px !important;
    max-height: 33px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 0.75rem !important;
}

/* Input de búsqueda con altura consistente */
#page-header .input-group-sm {
    height: 33px !important;
}

#page-header .input-group-sm .form-control,
#page-header .input-group-sm .input-group-text {
    height: 33px !important;
    line-height: 1.5 !important;
}


/* ==========================> Notifications <========================== */
.notif-truncate {
    max-width: 210px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* ==============================================================
   User Avatar & Side Overlay Enhancements (Global for both themes)
   ============================================================== */
#sidebar .img-avatar,
#side-overlay .img-avatar,
#page-header .img-avatar {
    border: 2px solid #e1e5eb; /* Light border in general */
    padding: 2px;
    background-color: #ffffff;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    object-fit: cover;
}

#sidebar .img-avatar:hover,
#side-overlay .img-avatar:hover,
#page-header .img-avatar:hover {
    border-color: #0665d0 !important; /* Primary color hover */
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Fix text-danger close button inside Side Overlay for better modern look globally */
#side-overlay .btn-alt-danger {
    background-color: rgba(220, 38, 38, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
}

#side-overlay .btn-alt-danger i {
    color: #ef4444 !important;
}

#side-overlay .btn-alt-danger:hover {
    background-color: rgba(220, 38, 38, 0.2) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ==============================================================
   Sidebar Active Item — Light Theme
   ============================================================== */

/* Base transition for all nav links (smooth state changes) */
#sidebar .nav-main-link {
    transition: background-color 0.25s ease,
                color 0.25s ease,
                border-left-color 0.25s ease !important;
    border-left: 3px solid transparent !important;
}

/* Active state — primary level links */
#sidebar .nav-main-link.active {
    background-color: rgba(78, 115, 223, 0.08) !important;
    color: #2d4a8a !important;
    border-left: 3px solid #4e73df !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
}

/* Active icon highlight */
#sidebar .nav-main-link.active > .nav-main-link-icon {
    color: #4e73df !important;
}

/* Active link name highlight */
#sidebar .nav-main-link.active > .nav-main-link-name {
    color: #2d4a8a !important;
}

/* Submenu active items — clean subtle indicator */
#sidebar .nav-main-submenu .nav-main-link.active {
    background-color: rgba(78, 115, 223, 0.05) !important;
    border-left: 3px solid #4e73df !important;
    color: #2d4a8a !important;
    font-weight: 500 !important;
}

/* Hover state enhancement — non-active links */
#sidebar .nav-main-link:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-left-color: rgba(78, 115, 223, 0.3) !important;
}

/* Open parent item styling */
#sidebar .nav-main-item.open > .nav-main-link-submenu {
    color: #2d4a8a !important;
    background-color: rgba(78, 115, 223, 0.04) !important;
}

#sidebar .nav-main-item.open > .nav-main-link-submenu > .nav-main-link-icon {
    color: #4e73df !important;
}