/**
 * SISTEMA FUPJ - Configuracion de Tema Principal
 * ===================================================
 *
 * Este archivo centraliza todos los colores del tema del sistema.
 * Para cambiar el tema, solo necesitas modificar las variables en :root
 *
 * TEMA ACTUAL: Navy (Azul Oscuro) - #13304D
 */

:root {
    /* =====================================================
       COLORES PRINCIPALES DEL TEMA
       ===================================================== */

    /* Color principal del tema */
    --theme-primary: #13304D;

    /* Color principal oscuro (para hover, gradientes) */
    --theme-primary-dark: #0d2339;

    /* Color principal claro (para fondos suaves) */
    --theme-primary-light: #1a4166;

    /* Color principal muy claro (para fondos de secciones) */
    --theme-primary-lighter: #e8eef4;

    /* Color principal RGB (para transparencias) */
    --theme-primary-rgb: 19, 48, 77;

    /* =====================================================
       COLORES SECUNDARIOS Y DE ACENTO
       ===================================================== */

    /* Color secundario */
    --theme-secondary: #6c757d;
    --theme-secondary-dark: #5a6268;

    /* Color de exito */
    --theme-success: #28a745;
    --theme-success-light: #d4edda;

    /* Color de peligro/error */
    --theme-danger: #dc3545;
    --theme-danger-dark: #c82333;

    /* Color de advertencia */
    --theme-warning: #ffc107;
    --theme-warning-light: #fff3cd;

    /* Color de informacion */
    --theme-info: #17a2b8;
    --theme-info-light: #d1ecf1;

    /* =====================================================
       GRADIENTES
       ===================================================== */

    --theme-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    --theme-gradient-reverse: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary) 100%);
    --theme-gradient-light: linear-gradient(135deg, var(--theme-primary-light) 0%, var(--theme-primary) 100%);
}

/* =====================================================
   ESTILOS DE COMPONENTES CON EL TEMA
   ===================================================== */

/* ----- Headers de Modales ----- */
.modal-header-orange,
.modal-header-themed {
    background: var(--theme-gradient) !important;
    color: white !important;
    border-radius: 0;
    padding: 1rem 1.5rem;
}

.modal-header-orange h5,
.modal-header-orange h6,
.modal-header-themed h5,
.modal-header-themed h6 {
    margin: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: white !important;
}

.modal-header-orange .close,
.modal-header-themed .close {
    color: white !important;
    opacity: 0.8;
    text-shadow: none;
}

.modal-header-orange .close:hover,
.modal-header-themed .close:hover {
    opacity: 1;
    color: white !important;
}

/* ----- Botones Principales ----- */
.btn-orange,
.btn-themed,
.btn-primary-themed,
.btn-custom-primary,
button.btn-orange,
a.btn-orange {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
    background: var(--theme-primary) !important;
}

.btn-orange:hover,
.btn-orange:active,
.btn-orange:focus,
.btn-orange:focus:not(.disabled),
.btn-custom-primary:hover,
.btn-custom-primary:active,
.btn-custom-primary:focus,
button.btn-orange:hover,
button.btn-orange:active,
button.btn-orange:focus,
.button.btn-orange:active,
.btn-themed:hover,
.btn-themed:focus,
.btn-primary-themed:hover,
.btn-primary-themed:focus {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    background: var(--theme-primary-dark) !important;
    color: white !important;
}

.btn-outline-orange,
.btn-outline-themed {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    background-color: transparent !important;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus,
.btn-outline-themed:hover,
.btn-outline-themed:focus {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

/* ----- Titulos de Secciones ----- */
.section-title,
.section-title-ver {
    color: var(--theme-primary) !important;
}

.section-title i,
.section-title-ver i {
    color: var(--theme-primary) !important;
}

/* ----- Labels de Formularios ----- */
.form-group-styled label i {
    color: var(--theme-primary) !important;
}

/* ----- Info Box ----- */
.info-box {
    background-color: var(--theme-primary-lighter) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
}

.info-box p,
.info-box i {
    color: var(--theme-primary) !important;
}

/* ----- Focus de Inputs ----- */
.form-group-styled .form-control:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--theme-primary-rgb), 0.15) !important;
}

/* ----- Tablas con Header Themed ----- */
.adjuntos-table thead,
table thead.bg-themed {
    background: var(--theme-gradient) !important;
    color: white !important;
}

/* ----- Botones de Accion ----- */
.btn-preview,
.btn-adjunto-ver {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.btn-preview:hover,
.btn-adjunto-ver:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Iconos de Archivos ----- */
.file-icon,
.adjunto-item-info i {
    color: var(--theme-primary) !important;
}

/* ----- Info Labels ----- */
.info-label i {
    color: var(--theme-primary) !important;
}

/* ----- SweetAlert2 Customization ----- */
.swal2-confirm.swal2-styled {
    background-color: var(--theme-primary) !important;
}

/* ----- DataTables Buttons ----- */
.dt-btn-orange,
.dt-button.dt-btn-orange,
.dataTables_wrapper .btn-verMas {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.dt-btn-orange:hover,
.dt-btn-orange:active,
.dt-btn-orange:focus,
.dt-button.dt-btn-orange:hover,
.dt-button.dt-btn-orange:active,
.dt-button.dt-btn-orange:focus,
.dt-button.dt-btn-orange:focus:not(.disabled),
.dataTables_wrapper .btn-verMas:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Todos los botones dt-button por defecto ----- */
.dt-button,
.dt-buttons .dt-button,
div.dt-buttons > .dt-button,
.dataTables_wrapper .dt-button {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
    background-image: none !important;
}

.dt-button:hover,
.dt-button:active,
.dt-button:focus,
.dt-buttons .dt-button:hover,
.dt-buttons .dt-button:active,
.dt-buttons .dt-button:focus,
div.dt-buttons > .dt-button:hover,
.dataTables_wrapper .dt-button:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
    background-image: none !important;
}

/* ----- Botones de acción en tablas ----- */
.dataTables_wrapper .btn-info,
table .btn-info,
.table .btn-info {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.dataTables_wrapper .btn-info:hover,
table .btn-info:hover,
.table .btn-info:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Botones warning en tablas (convertir a tema) ----- */
.dataTables_wrapper .btn-warning,
table .btn-warning,
.table .btn-warning {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.dataTables_wrapper .btn-warning:hover,
table .btn-warning:hover,
.table .btn-warning:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Botones de ver/editar en tablas ----- */
.btn-ver,
.btn-editar,
.btn-accion,
table .btn-sm.btn-info,
table .btn-sm.btn-primary,
table .btn-xs.btn-info,
table .btn-xs.btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.btn-ver:hover,
.btn-editar:hover,
.btn-accion:hover,
table .btn-sm.btn-info:hover,
table .btn-sm.btn-primary:hover,
table .btn-xs.btn-info:hover,
table .btn-xs.btn-primary:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Botones con iconos en tablas ----- */
table .btn i,
.table .btn i,
.dataTables_wrapper .btn i {
    color: inherit !important;
}

/* ----- Botones de exportar DataTables ----- */
.buttons-excel,
.buttons-pdf,
.buttons-copy,
.buttons-print,
.buttons-csv {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.buttons-excel:hover,
.buttons-pdf:hover,
.buttons-copy:hover,
.buttons-print:hover,
.buttons-csv:hover {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    color: white !important;
}

/* ----- Botones dt-btn-success (DataTables custom) ----- */
.dt-btn-success,
.dt-button.dt-btn-success,
button.dt-btn-success {
    background-color: #13304D !important;
    border-color: #13304D !important;
    color: #fff !important;
    background: #13304D !important;
}

.dt-btn-success:hover,
.dt-btn-success:focus,
.dt-btn-success:active,
.dt-button.dt-btn-success:hover,
.dt-button.dt-btn-success:focus,
.dt-button.dt-btn-success:active {
    background-color: #0d2339 !important;
    border-color: #0d2339 !important;
    color: #fff !important;
    background: #0d2339 !important;
}

/* ----- Botones btn-success (convertir a tema navy) ----- */
.btn-success,
button.btn-success,
a.btn-success,
input[type="submit"].btn-success,
input[type="button"].btn-success {
    background-color: #13304D !important;
    border-color: #13304D !important;
    color: #fff !important;
    background: #13304D !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
button.btn-success:hover,
button.btn-success:focus,
button.btn-success:active {
    background-color: #0d2339 !important;
    border-color: #0d2339 !important;
    color: #fff !important;
    background: #0d2339 !important;
}

.btn-success i,
button.btn-success i {
    color: #fff !important;
}

/* ----- Botones outline-secondary (convertir a tema navy) ----- */
.btn-outline-secondary,
table .btn-outline-secondary,
.table .btn-outline-secondary,
.dataTables_wrapper .btn-outline-secondary {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
table .btn-outline-secondary:hover,
.table .btn-outline-secondary:hover,
.dataTables_wrapper .btn-outline-secondary:hover {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

.btn-outline-secondary i {
    color: inherit !important;
}

/* ----- Cards y Paneles ----- */
.card-header.bg-themed,
.panel-header.bg-themed,
.accordion-header-themed {
    background: var(--theme-gradient) !important;
    color: white !important;
}

/* ----- Badges ----- */
.badge-themed,
.badge.bg-themed {
    background-color: var(--theme-primary) !important;
    color: white !important;
}

/* ----- Links ----- */
a.text-themed {
    color: var(--theme-primary) !important;
}

a.text-themed:hover {
    color: var(--theme-primary-dark) !important;
}

/* ----- Borders ----- */
.border-themed {
    border-color: var(--theme-primary) !important;
}

/* ----- File Upload Styled ----- */
.file-upload-styled input[type="file"]:hover {
    border-color: var(--theme-primary) !important;
    background-color: var(--theme-primary-lighter) !important;
}

/* ----- Select2 Custom ----- */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--theme-primary) !important;
}

/* ----- Progress Bars ----- */
.progress-bar.bg-themed {
    background-color: var(--theme-primary) !important;
}

/* ----- Hover en filas de tabla ----- */
.adjuntos-table tbody tr:hover {
    background-color: var(--theme-primary-lighter) !important;
}

/* =====================================================
   UTILIDADES
   ===================================================== */

.bg-theme-primary {
    background-color: var(--theme-primary) !important;
}

.bg-theme-gradient {
    background: var(--theme-gradient) !important;
}

.text-theme-primary {
    color: var(--theme-primary) !important;
}

.border-theme-primary {
    border-color: var(--theme-primary) !important;
}

/* =====================================================
   NAVBAR - Tema Navy (igual a Sistema-Grooming)
   ===================================================== */

/* Navbar principal - solo el color */
[data-theme="theme-navy"] .navbar {
    background: var(--theme-gradient) !important;
}

[data-theme="theme-navy"] .navbar-fixed-top {
    background: var(--theme-gradient) !important;
}

/* Responsive para navbar - solo para pantallas pequeñas */
@media screen and (max-width: 640px) {
    .navbar-fixed-top .navbar-brand img {
        width: 100px !important;
    }
}

@media screen and (max-width: 480px) {
    .navbar-fixed-top .navbar-brand img {
        width: 100px !important;
    }
}

/* =====================================================
   ESPACIADO CONTENIDO - igual a Sistema-Grooming (85px)
   ===================================================== */

/* Main content - margen superior para separar del navbar */
#main-content {
    margin-top: 85px !important;
}

/* Sidebar - margen superior para separar del navbar */
#left-sidebar {
    margin-top: 85px !important;
    height: calc(100vh - 85px) !important;
}

/* =====================================================
   PAGINATOR Y DATATABLES
   ===================================================== */

/* Paginación Bootstrap - Enlaces (estado normal) */
.page-link,
.pagination .page-link,
.dataTables_wrapper .page-link,
.dataTables_paginate .page-link,
a.page-link,
.page-item .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link,
.dataTables_paginate .pagination li a,
.dataTables_paginate .pagination li a.page-link {
    color: #13304D !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

/* Paginación - Hover */
.page-link:hover,
.pagination .page-link:hover,
.dataTables_wrapper .page-link:hover,
.dataTables_paginate .page-link:hover,
a.page-link:hover,
.page-item:not(.active) .page-link:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover,
.dataTables_paginate .pagination li a:hover {
    color: #fff !important;
    background-color: #1a4166 !important;
    border-color: #1a4166 !important;
}

/* Paginación - Focus/Active click */
.page-link:focus,
a.page-link:focus,
.page-item:not(.active) .page-link:focus,
.dataTables_paginate .pagination li a:focus {
    color: #13304D !important;
    background-color: #fff !important;
    border-color: #13304D !important;
    box-shadow: 0 0 0 0.2rem rgba(19, 48, 77, 0.25) !important;
}

/* Página activa (seleccionada) */
.page-item.active .page-link,
.pagination .page-item.active .page-link,
.dataTables_wrapper .page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.dataTables_paginate .pagination li.active a,
.dataTables_paginate .pagination li.active a.page-link {
    background-color: #13304D !important;
    border-color: #13304D !important;
    color: #fff !important;
}

/* DataTables Paginación - paginate_button */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button a {
    color: #13304D !important;
    background-color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a {
    background: #1a4166 !important;
    background-color: #1a4166 !important;
    border-color: #1a4166 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current a {
    background: #13304D !important;
    background-color: #13304D !important;
    border-color: #13304D !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #999 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Botones Previous y Next de DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a,
.dataTables_wrapper .dataTables_paginate .paginate_button.next a {
    color: #13304D !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover a,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover a {
    background: #1a4166 !important;
    background-color: #1a4166 !important;
    border-color: #1a4166 !important;
    color: #fff !important;
}

/* DataTables selected row */
table.dataTable tbody tr.selected {
    background-color: var(--theme-primary-lighter) !important;
}

/* =====================================================
   CARDS CON BORDES DE ACENTO
   ===================================================== */

.card.border-primary {
    border-color: var(--theme-primary) !important;
}

.card .card-header.bg-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* =====================================================
   BOTONES ADICIONALES
   ===================================================== */

/* Boton primary de Bootstrap */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary {
    background-color: #13304D !important;
    border-color: #13304D !important;
    color: #fff !important;
    background: #13304D !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:active {
    background-color: #0d2339 !important;
    border-color: #0d2339 !important;
    color: #fff !important;
    background: #0d2339 !important;
}

.btn-primary i,
button.btn-primary i {
    color: #fff !important;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: white !important;
}

/* =====================================================
   FORMULARIOS
   ===================================================== */

.form-control:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* =====================================================
   LINKS Y TEXTOS
   ===================================================== */

/* Enlaces dentro de botones deben mantener color blanco */
.btn a,
a.btn,
.btn-orange a,
.btn-primary a,
.btn-themed a,
.btn-custom-primary a,
.btn-volver a {
    color: white !important;
}

/* Enlaces generales usan color del tema */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.btn-volver) {
    color: var(--theme-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.btn-volver):hover {
    color: var(--theme-primary-dark);
}

.text-primary {
    color: var(--theme-primary) !important;
}

/* =====================================================
   LOADING / SPINNER
   ===================================================== */

.spinner-border.text-primary {
    color: var(--theme-primary) !important;
}

/* =====================================================
   DROPDOWN MENUS
   ===================================================== */

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--theme-primary) !important;
}

/* =====================================================
   TABS Y NAV
   ===================================================== */

.nav-pills .nav-link.active {
    background-color: var(--theme-primary) !important;
}

.nav-tabs .nav-link.active {
    border-color: var(--theme-primary) var(--theme-primary) #fff !important;
    color: var(--theme-primary) !important;
}

/* =====================================================
   TOOLTIPS Y POPOVERS
   ===================================================== */

.tooltip-primary .tooltip-inner,
.bs-tooltip-primary .tooltip-inner {
    background-color: var(--theme-primary) !important;
}

.popover-primary .popover-header {
    background-color: var(--theme-primary) !important;
    color: white !important;
}

/* =====================================================
   LOGIN PAGE - Pagina de autenticacion
   ===================================================== */

/* Fondo del login */
.auth-main {
    background: var(--theme-gradient) !important;
}

.auth-main::before {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
}

.auth-main:after {
    background: var(--theme-gradient) !important;
}

/* Contenedor principal de login con gradiente - SOLO para pagina de login */
[data-theme="theme-navy"] .vertical-align-middle.auth-main {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
}

[data-theme="theme-navy"] .auth-main::before {
    background: transparent !important;
}

[data-theme="theme-navy"] .auth-main:after {
    background: transparent !important;
}

/* Fondo para la pagina de login solamente */
[data-theme="theme-navy"] .vertical-align-wrap {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
    min-height: 100vh;
}

/* Excluir el wrapper principal del sistema (solo aplica en login) */
[data-theme="theme-navy"] .vertical-align-wrap .auth-main {
    background: transparent !important;
}

/* =====================================================
   LOGIN - DIMENSIONES Y ESTILOS (igual a Sistema-Grooming)
   ===================================================== */

/* Tamaño del contenedor del login - OVERRIDE del main.css */
.auth-box {
    width: 550px !important;
    height: auto;
    margin: 0 auto;
}

/* Card del login */
.auth-main .card {
    padding: 10px;
    box-shadow: 0 1px 20px 0px #b7b7b7 !important;
    border-radius: 8px !important;
}

/* Imagen/Logo del login */
.img-register,
.img-fluid.img-register {
    width: 200px !important;
    max-width: 200px !important;
}

/* Formulario de login - quitar padding excesivo */
.form-auth-small {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* BOTON DE LOGIN - Color Navy */
.auth-main .btn-primary,
.auth-box .btn-primary,
.form-auth-small .btn-primary {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    color: white !important;
}

.auth-main .btn-primary:hover,
.auth-main .btn-primary:focus,
.auth-box .btn-primary:hover,
.auth-box .btn-primary:focus,
.form-auth-small .btn-primary:hover,
.form-auth-small .btn-primary:focus {
    background-color: var(--theme-primary-dark) !important;
    border-color: var(--theme-primary-dark) !important;
    background: var(--theme-primary-dark) !important;
    color: white !important;
}

/* Responsive para login */
@media screen and (max-width: 640px) {
    .auth-box {
        width: 80% !important;
        margin: 0 auto;
    }

    .form-auth-small {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media screen and (max-width: 480px) {
    .auth-box {
        width: 95% !important;
        margin: 0 auto;
        padding: 10px;
    }

    .img-register,
    .img-fluid.img-register {
        width: 150px !important;
        max-width: 150px !important;
    }
}

/* =====================================================
   CLASES DE TEXTO CON COLOR DEL TEMA
   ===================================================== */

/* Convertir text-orange al color del tema */
.text-orange {
    color: var(--theme-primary) !important;
}

/* =====================================================
   FIX PARA SELECT2 DENTRO DE MODALES
   ===================================================== */

.modal .select2-container--open .select2-dropdown {
    z-index: 1060 !important;
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
    pointer-events: auto;
}

.modal .select2-container {
    z-index: 1050;
}

/* =====================================================
   FIX PARA MODALES CON SCROLL Y FOOTER VISIBLE
   ===================================================== */

.modal-dialog-scrollable {
    max-height: calc(100vh - 1rem) !important;
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem) !important;
    display: flex;
    flex-direction: column;
}

.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body,
.modal-dialog-scrollable .modal-content > .modal-body {
    flex: 1 1 auto;
    overflow-y: auto !important;
    min-height: 0;
}

.modal-dialog-scrollable .modal-content > form > .modal-footer,
.modal-dialog-scrollable .modal-content > .modal-footer {
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > .modal-header {
    flex-shrink: 0;
}

/* =====================================================
   SIDEBAR / LEFT SIDEBAR
   ===================================================== */

/* Sidebar activo */
#left-sidebar .sidebar-nav .metismenu > li.active > a {
    color: var(--theme-primary) !important;
    border-left-color: var(--theme-primary) !important;
}

#left-sidebar .sidebar-nav .metismenu > li > a:hover {
    color: var(--theme-primary) !important;
}

/* =====================================================
   PAGE LOADER
   ===================================================== */

.page-loader-wrapper {
    background: var(--theme-gradient) !important;
}

/* =====================================================
   BOTÓN FLOTANTE VOLVER ARRIBA (GLOBAL)
   ===================================================== */

#scrollToTopGlobal {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #13304D 0%, #0d2339 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(19, 48, 77, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

#scrollToTopGlobal.show {
    opacity: 1;
    visibility: visible;
}

#scrollToTopGlobal:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(19, 48, 77, 0.4);
    background: linear-gradient(135deg, #1a4166 0%, #13304D 100%);
}

#scrollToTopGlobal:active {
    transform: translateY(-2px);
}

#scrollToTopGlobal i {
    color: #fff !important;
}

/* Responsive para móvil */
@media (max-width: 768px) {
    #scrollToTopGlobal {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

/* Ocultar botón global si existe uno local en la página */
#scrollToTop ~ #scrollToTopGlobal,
#scrollToTopGlobal.hidden {
    display: none !important;
}