/* ============================================================
   1. VARIABLES GLOBALES — CONTROL DE COLORES Y TEMA
   ============================================================ */

:root {
    /* ===== LOGIN ===== */
    --login-bg-start: #ffffff;
    --login-bg-end: #c2e9fb;
    --Color: #3fa054;
    --color-main: #22552d;
    --color-light: #3fa054;
    --color-dark: #0d2112;
    --login-card-bg: rgba(255, 255, 255, 0.82);
    --login-card-border: rgba(255, 255, 255, 0.6);
    --login-text-primary: #000000;
    --login-text-secondary: #4a5568;
    --login-text-muted: #718096;
    --login-input-bg: #f1f5f9;
    --login-input-focus-bg: #ffffff;
    --login-input-border: #e2e8f0;
    --login-shadow: rgba(0, 119, 204, 0.12);
    --login-corner-bg: #0099ff;
    --login-badge-bg: rgba(255, 255, 255, 0.75);
    --login-badge-border: rgba(0, 119, 204, 0.18);
    --login-stat-icon: #0099ff;
    --bg-icono: #296bb1;
    /* ===== DASHBOARD / APP ===== */
    --st-accent: #2d9f7a;
    --st-bg-page: #f4f6f8;
    --st-bg-card: #ffffff;
    --st-text-primary: #1a1a1a;
    --st-text-secondary: #495057;
    --st-text-muted: #6c757d;
    --st-border: #e9ecef;
    --st-sidebar-w: 255px;
    --st-sidebar-coll: 64px;
    --st-header-h: 65px;
    --st-danger: #dc3545;
}

/* ===== OVERRIDE BOTÓN PRIMARIO (Bootstrap) ===== */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-main);
    --bs-btn-border-color: var(--color-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-light);
    --bs-btn-hover-border-color: var(--color-light) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-main);
    --bs-btn-active-border-color: var(--color-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
    color: aliceblue !important;
}

.btn {
    border-radius: 1rem !important;
}


.btn-outline-primary {
    border-color: var(--color-main) !important;
    color: var(--color-main) !important;
}

    .btn-outline-primary:hover {
        background: var(--color-light) !important;
        border-color: var(--color-light) !important;
        color: #fff;
    }

.btn-outline-primary:hover {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--color-light) !important;
    border-color: var(--color-light) !important;
}

.btn-primary:hover {
    color: var(--color-light) !important;
    background-color: transparent !important;
    border-color: var(--color-light) !important;
}

.nav-tabs-custom .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    transition: all 0.15s;
}

    .nav-tabs-custom .nav-link.active,
    .nav-tabs-custom .nav-link:hover {
        color: var(--color-light);
        border-bottom-color: var(--color-light);
        background: transparent;
    }



.custom-tab-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
}

.custom-tab-item {
    margin: 0;
    padding: 0;
}

.custom-tab-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: none !important;
    border-radius: 8px 8px 0 0;
    color: #64748b;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

    /* Hover */
    .custom-tab-link:hover {
        color: white;
        background: var(--color-light);
    }

    /* Pestaña activa */
    .custom-tab-link.active {
        color: var(--color-light);
        background: #ffffff;
    }

        /* Línea inferior de la pestaña activa */
        .custom-tab-link.active::after {
            content: "";
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: -1px;
            height: 3px;
            background: var(--color-light);
            border-radius: 3px 3px 0 0;
        }

    /* Iconos */
    .custom-tab-link i {
        font-size: 15px;
    }

/* Responsive */
@media (max-width: 576px) {

    .custom-tab-container {
        width: 100%;
        gap: 2px;
    }

    .custom-tab-item {
        flex: 1;
    }

    .custom-tab-link {
        width: 100%;
        padding: 11px 8px;
        font-size: 12px;
        text-align: center;
    }

        .custom-tab-link i {
            font-size: 14px;
        }
}



.nav-item {
    color: var(--color-main);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.75rem;
    margin: 0.1rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    transition: all 0.12s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: calc(100% - 1rem);
    text-align: left;
    font-family: inherit;
}

    .nav-item:hover {
        background: var(--color-light);
        color: #fff;
        text-decoration: none;
    }

    .nav-item.active {
        font-weight: bold;
        border-bottom: 2px solid var(--color-main) !important;
    }

    .nav-item i,
    .nav-item svg,
    .nav-link-item i,
    .nav-link-item svg {
        width: 20px;
        min-width: 20px;
        text-align: center;
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
        display: inline-block;
        color: inherit;
    }


.select2-small {
    width: 180px !important;
}

    .select2-small + .select2-container .select2-selection--single {
        height: 30px;
        font-size: 12px;
    }

        .select2-small + .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 28px;
            font-size: 12px;
        }

        .select2-small + .select2-container .select2-selection--single .select2-selection__arrow {
            height: 28px;
        }