/*============================*/
/* === VARIABLES GLOBALES === */
/*============================*/

:root {
    --app-bg: #ffffff;
    --app-text: #000000;
    --app-grad-start: #007bff;
    --app-grad-end: #0056b3;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #cfe2ff;
    --app-icon-text: #000000;
    --app-grad-start-rgb: 13,110,253;
    --app-grad-end-rgb: 0,86,179;
    --app-user-icon: #ffffff;
}

/* === OVERRIDES POR TEMA === */
.theme-default {
    --app-bg: #0d6efd;
    --app-text: #000000;
    --app-grad-start: #007bff;
    --app-grad-end: #0056b3;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #0b5ed7;
    --app-grad-start-rgb: 13,110,253;
    --app-grad-end-rgb: 0,86,179;
    --app-user-icon: #0d6efd;
}

.theme-dark {
    --app-bg: #212529;
    --app-text: #ffffff;
    --app-grad-start: #343a40;
    --app-grad-end: #212529;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #212529;
    --app-icon-text: #000000;
    --app-grad-start-rgb: 52, 58, 64; /* #343a40 */
    --app-grad-end-rgb: 33, 37, 41; /* #212529 */
    --app-user-icon: #212529;
}

.theme-green {
    --app-bg: #198754;
    --app-text: #ffffff;
    --app-grad-start: #157347;
    --app-grad-end: #146c43;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #146c43;
    --app-grad-start-rgb: 21, 115, 71; /* #157347 */
    --app-grad-end-rgb: 20, 108, 67; /* #146c43 */
    --app-user-icon: #198754;
}

.theme-red {
    --app-bg: #dc3545;
    --app-text: #ffffff;
    --app-grad-start: #bb2d3b;
    --app-grad-end: #b02a37;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #b02a37;
    --app-grad-start-rgb: 187, 45, 59; /* #bb2d3b */
    --app-grad-end-rgb: 176, 42, 55; /* #b02a37 */
    --app-user-icon: #dc3545;
}

.theme-pink {
    --app-bg: #FF77B7;
    --app-text: #ffffff;
    --app-grad-start: #c32c72;
    --app-grad-end: #FF77B7;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #FF77B7;
    --app-grad-start-rgb: 195, 44, 114; /* #c32c72 */
    --app-grad-end-rgb: 255,119,183; /* #FF77B7 */
    --app-user-icon: #FF77B7;
}

.theme-orange {
    --app-bg: #fd7e14;
    --app-text: #000000;
    --app-grad-start: #e8590c;
    --app-grad-end: #d9480f;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #d9480f;
    --app-grad-start-rgb: 232, 89, 12; /* #e8590c */
    --app-grad-end-rgb: 217, 72, 15; /* #d9480f */
    --app-user-icon: #fd7e14;
}

.theme-violet {
    --app-bg: #6f42c1;
    --app-text: #000000;
    --app-grad-start: #8f6bd1;
    --app-grad-end: #6f42c1;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #6f42c1;
    --app-grad-start-rgb: 143, 107, 209;
    --app-grad-end-rgb: 111, 66, 193;
    --app-user-icon: #6f42c1;
}

.theme-teal {
    --app-bg: #20c997;
    --app-text: #000000;
    --app-grad-start: #1aa179;
    --app-grad-end: #169973;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #169973;
    --app-grad-start-rgb: 26, 161, 121; /* #1aa179 */
    --app-grad-end-rgb: 22, 153, 115; /* #169973 */
    --app-user-icon: #20c997;
}

.theme-gray {
    --app-bg: #6c757d;
    --app-text: #ffffff;
    --app-grad-start: #5a6268;
    --app-grad-end: #495057;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #495057;
    --app-grad-start-rgb: 90, 98, 104; /* #5a6268 */
    --app-grad-end-rgb: 73, 80, 87; /* #495057 */
    --app-user-icon: #6c757d;
}

.theme-dark-blue {
    --app-bg: #2E5077;
    --app-text: #000000;
    --app-grad-start: #244163;
    --app-grad-end: #1c324f;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #1c324f;
    --app-grad-start-rgb: 36, 65, 99; /* #244163 */
    --app-grad-end-rgb: 28, 50, 79; /* #1c324f */
    --app-user-icon: #2E5077;
}

.theme-dark-red {
    --app-bg: #A94A4A;
    --app-text: #ffffff;
    --app-grad-start: #8a3d3d;
    --app-grad-end: #732f2f;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #732f2f;
    --app-grad-start-rgb: 138, 61, 61; /* #8a3d3d */
    --app-grad-end-rgb: 115, 47, 47; /* #732f2f */
    --app-user-icon: #A94A4A;
}

.theme-sky-blue {
    --app-bg: #C6E7FF;
    --app-text: #000000;
    --app-grad-start: #9fd1ff;
    --app-grad-end: #8dcaff;
    --app-nav-1: #ffffff;
    --app-nav-2: #e7f1ff;
    --app-nav-3: #8dcaff;
    --app-grad-start-rgb: 159,209,255; /* #9fd1ff */
    --app-grad-end-rgb: 141,202,255; /* #8dcaff */
    --app-user-icon: #0d6efd;
}

/*======================================*/
/*============= LAYOUT  ===============**/
/*======================================*/

/* Personalizaciones adicionales */
.bg-gradient-primary {
    background: linear-gradient( 180deg, var(--app-grad-start) 0%, var(--app-grad-end) 100% );
}

/* Cuando está colapsado el wrapper */
#wrapper.toggled #page-content-wrapper {
    margin-left: 80px;
}

/* Texto del link (nombre) */
.link-text {
    display: inline;
    transition: all 0.3s ease;
}

/* Cuando está colapsado, ocultar texto */
#wrapper.toggled .link-text {
    display: none;
}

/* Íconos siempre visibles */
#sidebar-wrapper i {
    font-size: 1.5rem;
    margin-right: 10px;
}

/* Cuando está colapsado, centrar los íconos */
#wrapper.toggled #sidebar-wrapper a {
    text-align: center;
}

#wrapper.toggled #sidebar-wrapper i {
    margin: 0;
}

/* Estilos para el sidebar colapsado */
#wrapper.toggled #sidebar-wrapper .link-text {
    display: none;
}

.list-group-item {
    border: none;
    transition: all 0.3s;
}

    .list-group-item:hover {
        background-color: rgba(255,255,255,0.2);
        color: var(--app-text);
    }

.navbar .btn {
    margin-right: 10px;
}
.navbar .btn-primary {
    background-color: var(--app-bg);
    color: var(--app-text) !important;
    border-color: var(--app-bg);    
}
.navbar .text-primary {
    color: var(--app-user-icon) !important;
}

.navbar-gradient {
    background: linear-gradient(to bottom, var(--app-nav-1) 0%, var(--app-nav-2) 50%, var(--app-nav-3) 100% );
}

    .navbar-gradient .nav-link,
    .navbar-gradient .dropdown-toggle {
        color: var(--app-icon-text) !important;
    }

    .navbar-gradient .dropdown-menu {
        background-color: white;
    }


#page-content-wrapper {
    flex-grow: 1;
    flex-basis: 0;
    padding: 20px;
    width: 100%;
}

#sidebar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* Altura completa de la pantalla */
    width: 240px; /* Ancho sidebar normal */
    background: linear-gradient( 180deg, var(--app-grad-start) 0%, var(--app-grad-end) 100% );
    overflow-y: auto; /* Por si hay mucho menú */
    transition: width 0.3s ease;
    z-index: 1000; /* Siempre arriba del contenido */
}

#wrapper.toggled #sidebar-wrapper {
    width: 80px;
}

/* SOLO si el wrapper tiene data-layout="sidebar" */
#wrapper[data-layout="sidebar"] #page-content-wrapper {
    margin-left: 240px;
    min-height: 100vh;
    overflow-y: auto;
    padding: 20px;
    background-color: #ffffff;
}

/* Si colapsa el sidebar */
#wrapper.toggled[data-layout="sidebar"] #page-content-wrapper {
    margin-left: 80px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.body-default {
    background: linear-gradient( to bottom, var(--app-grad-start) 0%, var(--app-grad-end) 50%, var(--app-grad-end) 100% );
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column */
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/*===================================================*/
/*============= DATA TABLES EN INDEXES ==============*/
/*===================================================*/

.dt-buttons {
    margin-bottom: 1rem;
}

.dataTables_filter {
    margin-bottom: 1rem;
}

    .dataTables_filter input {
        margin-left: 0.5rem;
    }

.dataTables_paginate {
    text-align: center !important;
}

    .dataTables_paginate .pagination {
        justify-content: center !important;
    }

.pagination-icon {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.3rem 0.6rem;
    margin: 0 0.15rem;
    background-color: white;
    color: #212529;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dataTables_paginate .pagination .page-link {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.25rem !important;
    padding: 0.3rem 0.6rem !important;
    margin: 0 0.15rem !important;
    background-color: white !important;
    color: #212529 !important;
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

    .pagination-icon:hover, .dataTables_paginate .pagination .page-link:hover {
        background-color: #f8f9fa;
        color: #0d6efd;
        text-decoration: none;
    }

.dataTables_paginate .pagination .active .page-link {
    background-color: #0d6efd !important;
    color: white !important;
    border-color: #0d6efd !important;
}

/*=======================================*/
/*=============== CARDS =================*/
/*=======================================*/

.card-header {
     background: linear-gradient( to bottom, var(--app-grad-start) 0%, var(--app-grad-end) 50%, var(--app-grad-end) 100% );
     color: var(--app-text);
}

.welcomeBox {
    background: linear-gradient( to bottom, rgba(var(--app-grad-start-rgb), 0.2) 0%, rgba(var(--app-grad-end-rgb), 0.2) 100% );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

/*==============================================================*/
/*=============== VISTAS CREATE/EDIT Y MODALES =================*/
/*==============================================================*/
.chevron-icon {
    transition: transform 0.3s ease;
}

    .chevron-icon.rotated {
        transform: rotate(180deg);
    }

.collapsible-header.active {
    background-color: #0a58ca !important;
}
/* Modal de confirmación encima del modal actual */
.modal-confirmacion-cargo {
    z-index: 1060; /* más alto que 1055 de Bootstrap */
}

.modal-backdrop.show.modal-backdrop-confirmacion {
    z-index: 1055; /* también por encima del backdrop anterior */
}

.modal-confirmacion-categoria {
    z-index: 1060; /* más alto que 1055 de Bootstrap */
}

h1, h2, h3, h4 {
    color: var(--app-bg) !important;
}

.modal-header {
    background: linear-gradient( to bottom, var(--app-grad-start) 0%, var(--app-grad-end) 50%, var(--app-grad-end) 100% );
}

.iconoDashboard {
    color: var(--app-bg) !important;
}
/*==============================================
   =============================================

        Animaciones para los modales

================================================
*===============================================/

/**
    Login y Registro
*/
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-slide {
    animation: fadeSlideIn 0.8s ease-out forwards;
}


/**
    Layout y LayoutPublico
*/
@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-zoom-fade {
    animation: zoomFadeIn 0.8s ease-out forwards;
}


/**
    LayoutPublico
*/
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.list-group-item-public {
    border: none;
    transition: all 0.3s;
}

    .list-group-item-public:hover {
        background-color: rgba(255,255,255,0.2);
    }

/**
    About y Contact
*/
@keyframes fadeInAnimation {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Uso en DASHBOARD - Responsive: si la pantalla es muy chica */
@media (max-width: 768px) {
    .grafico-centro {
        height: 180px;
        max-width: 95%;
    }

    .card-body-grafico {
        min-height: 250px;
    }
}


/*======================*/
/* === THEME COLORS === */
/*======================*/

.theme-default {
    background-color: #ffffff !important;
    color: #000 !important;
}

.theme-dark {
    background-color: #212529 !important;
    color: #fff !important;
}

.theme-green {
    background-color: #198754 !important;
    color: #fff !important;
}

.theme-red {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.theme-pink {
    background-color: #d63384 !important;
    color: #fff !important;
}

.theme-orange {
    background-color: #fd7e14 !important;
    color: #000 !important;
}

.theme-violet {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

.theme-teal {
    background-color: #20c997 !important;
    color: #000 !important;
}

.theme-gray {
    background-color: #6c757d !important;
    color: #fff !important;
}

.theme-dark-blue {
    background-color: #2E5077 !important;
    color: #fff !important;
}

.theme-dark-red {
    background-color: #A94A4A !important;
    color: #fff !important;
}

.theme-sky-blue {
    background-color: #C6E7FF !important;
    color: #000 !important;
}


/* 🔧 Ajuste visual para Select2 en temas oscuros o personalizados */

/* Fondo y texto del dropdown */
.select2-container .select2-dropdown {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Color del texto en cada opción */
.select2-results__option {
    color: #212529 !important;
}

/* Hover y selección */
.select2-results__option--highlighted {
    background-color: #0d6efd !important; /* azul Bootstrap */
    color: #fff !important;
}

/* Ajuste del campo de búsqueda dentro del dropdown */
.select2-search__field {
    color: #212529 !important;
    background-color: #fff !important;
}

/* Fondo del área seleccionada */
.select2-selection {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Placeholder gris tenue */
.select2-selection__placeholder {
    color: #6c757d !important;
}

/* Borde coherente con Bootstrap */
.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
}


/* CAMPOS OBLIGATORIOS */
.required-asterisk {
    color: red;
    font-weight: bold;
    margin-left: 2px;
}