/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;700&display=swap');

/*--------------------------------------------------------------
  Base Variables
--------------------------------------------------------------*/
:root {
    /* Fuente */
    --vz-font-sans-serif: 'Public Sans', serif;

    /* Paleta de Marca */
    --vz-primary:      #405189;   
    --vz-secondary:    #3577f1;  
    --vz-success:      #0ab39c;   
    --vz-info:         #299cdb;  
    --vz-warning:      #f7b84b;  
    --vz-danger:       #f06548;  
    --vz-light:        #f3f6f9;  
    --vz-dark:         #2E2E2E; 
    --vz-white:        #FFFFFF;

    /* RGB derivados para overlays */
    --vz-primary-rgb:   64, 81, 137;
    --vz-secondary-rgb: 53, 119, 241;
    --vz-success-rgb:   10, 179, 156;
    --vz-info-rgb:      41, 156, 219;
    --vz-warning-rgb:   247, 184, 75;
    --vz-danger-rgb:    240, 101, 72;
    --vz-light-rgb:     243, 246, 249;
    --vz-dark-rgb:      33, 37, 41;
    --vz-white-rgb:     255,255,255;
    --vz-black-rgb:     0,0,0;
}

:root .nav-tabs {
    --vz-nav-tabs-link-active-bg: rgba(var(--vz-secondary-rgb), .1);
}

:root .choices,
:root .flatpickr-calendar,
:root .ck.ck-toolbar,
:root .ql-toolbar,
:root .select2-container,
:root .menu-dropdown {
    --vz-choices-bg:             var(--vz-white);
    --vz-choices-link-color:     var(--vz-dark);
    --vz-choices-link-hover-bg:  var(--vz-light);
    --vz-choices-link-active-color: var(--vz-primary);
}

[data-layout-mode=dark] {
    /* Dark Mode Overrides */
    --vz-body-bg:        var(--vz-dark);
    --vz-body-bg-rgb:    var(--vz-dark-rgb);
    --vz-body-color:     var(--vz-light);
    --vz-body-color-rgb: var(--vz-light-rgb);

    /* Mantener huesos en Dark: usamos grises oscuros */
    --vz-vertical-menu-bg:                  #2A2A2A;
    --vz-header-bg:                         #333333;
    --vz-footer-bg:                         #2A2A2A;
    --vz-boxed-body-bg:                     #1A1A1E;
}

/*--------------------------------------------------------------
  Color Palette Definitions (utilitarias)
--------------------------------------------------------------*/
:root {
    --vz-blue:    var(--vz-primary);
    --vz-indigo:  #2E2E2E;
    --vz-purple:  #8F3F71;
    --vz-pink:    #E76F51;
    --vz-red:     var(--vz-danger);
    --vz-orange:  var(--vz-secondary);
    --vz-yellow:  var(--vz-warning);
    --vz-green:   var(--vz-success);
    --vz-teal:    var(--vz-info);
    --vz-cyan:    #61A0AF;

    --vz-gray:      #777777;
    --vz-gray-dark: #444444;
    --vz-gray-100:  #EEEEEE;
    --vz-gray-200:  #DDDDDD;
    --vz-gray-300:  #CCCCCC;
    --vz-gray-400:  #BBBBBB;
    --vz-gray-500:  #AAAAAA;
    --vz-gray-600:  #888888;
    --vz-gray-700:  #666666;
    --vz-gray-800:  #444444;
    --vz-gray-900:  #222222;

    --vz-border-width:  1px;
    --vz-border-style:  solid;
    --vz-border-radius: 0.5rem;
    --vz-body-font-family: var(--vz-font-sans-serif);
    --vz-body-color:    var(--vz-dark);
    --vz-body-bg:       var(--vz-light);
}

/* ============================
    login
============================ */
/* Login background image */
.auth-one-bg{
    background-image:url(/build/icons/auth-one-bg.png);
    background-position:center;
    background-size:cover
}

/* ============================
    Bootstrap Buttons
============================ */
/* Primary */
.btn-primary {
    --vz-btn-color:             var(--vz-white);
    --vz-btn-bg:                var(--vz-primary);
    --vz-btn-border-color:      var(--vz-primary);
    --vz-btn-hover-color:       var(--vz-white);
    --vz-btn-hover-bg:          rgba(var(--vz-primary-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-primary-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-primary-rgb);
    --vz-btn-active-color:      var(--vz-white);
    --vz-btn-active-bg:         rgba(var(--vz-primary-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-primary-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-white);
    --vz-btn-disabled-bg:       var(--vz-primary);
    --vz-btn-disabled-border-color: var(--vz-primary);
}

/* Secondary */
.btn-secondary {
    --vz-btn-color:             var(--vz-white);
    --vz-btn-bg:                var(--vz-secondary);
    --vz-btn-border-color:      var(--vz-secondary);
    --vz-btn-hover-color:       var(--vz-white);
    --vz-btn-hover-bg:          rgba(var(--vz-secondary-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-secondary-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-secondary-rgb);
    --vz-btn-active-color:      var(--vz-white);
    --vz-btn-active-bg:         rgba(var(--vz-secondary-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-secondary-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-white);
    --vz-btn-disabled-bg:       var(--vz-secondary);
    --vz-btn-disabled-border-color: var(--vz-secondary);
}

/* Success */
.btn-success {
    --vz-btn-color:             var(--vz-white);
    --vz-btn-bg:                var(--vz-success);
    --vz-btn-border-color:      var(--vz-success);
    --vz-btn-hover-color:       var(--vz-white);
    --vz-btn-hover-bg:          rgba(var(--vz-success-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-success-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-success-rgb);
    --vz-btn-active-color:      var(--vz-white);
    --vz-btn-active-bg:         rgba(var(--vz-success-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-success-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-white);
    --vz-btn-disabled-bg:       var(--vz-success);
    --vz-btn-disabled-border-color: var(--vz-success);
}

/* Info */
.btn-info {
    --vz-btn-color:             var(--vz-white);
    --vz-btn-bg:                var(--vz-info);
    --vz-btn-border-color:      var(--vz-info);
    --vz-btn-hover-color:       var(--vz-white);
    --vz-btn-hover-bg:          rgba(var(--vz-info-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-info-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-info-rgb);
    --vz-btn-active-color:      var(--vz-white);
    --vz-btn-active-bg:         rgba(var(--vz-info-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-info-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-white);
    --vz-btn-disabled-bg:       var(--vz-info);
    --vz-btn-disabled-border-color: var(--vz-info);
}

/* Warning */
.btn-warning {
    --vz-btn-color:             var(--vz-dark);
    --vz-btn-bg:                var(--vz-warning);
    --vz-btn-border-color:      var(--vz-warning);
    --vz-btn-hover-color:       var(--vz-dark);
    --vz-btn-hover-bg:          rgba(var(--vz-warning-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-warning-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-warning-rgb);
    --vz-btn-active-color:      var(--vz-dark);
    --vz-btn-active-bg:         rgba(var(--vz-warning-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-warning-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-dark);
    --vz-btn-disabled-bg:       var(--vz-warning);
    --vz-btn-disabled-border-color: var(--vz-warning);
}

/* Danger */
.btn-danger {
    --vz-btn-color:             var(--vz-white);
    --vz-btn-bg:                var(--vz-danger);
    --vz-btn-border-color:      var(--vz-danger);
    --vz-btn-hover-color:       var(--vz-white);
    --vz-btn-hover-bg:          rgba(var(--vz-danger-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-danger-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-danger-rgb);
    --vz-btn-active-color:      var(--vz-white);
    --vz-btn-active-bg:         rgba(var(--vz-danger-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-danger-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-white);
    --vz-btn-disabled-bg:       var(--vz-danger);
    --vz-btn-disabled-border-color: var(--vz-danger);
}

/* Light */
.btn-light {
    --vz-btn-color:             var(--vz-dark);
    --vz-btn-bg:                var(--vz-light);
    --vz-btn-border-color:      var(--vz-light);
    --vz-btn-hover-color:       var(--vz-dark);
    --vz-btn-hover-bg:          rgba(var(--vz-light-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-light-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-light-rgb);
    --vz-btn-active-color:      var(--vz-dark);
    --vz-btn-active-bg:         rgba(var(--vz-light-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-light-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-dark);
    --vz-btn-disabled-bg:       var(--vz-light);
    --vz-btn-disabled-border-color: var(--vz-light);
}

/* Dark */
.btn-dark {
    --vz-btn-color:             var(--vz-white);
    --vz-btn-bg:                var(--vz-dark);
    --vz-btn-border-color:      var(--vz-dark);
    --vz-btn-hover-color:       var(--vz-white);
    --vz-btn-hover-bg:          rgba(var(--vz-dark-rgb), .85);
    --vz-btn-hover-border-color:rgba(var(--vz-dark-rgb), .85);
    --vz-btn-focus-shadow-rgb:  var(--vz-dark-rgb);
    --vz-btn-active-color:      var(--vz-white);
    --vz-btn-active-bg:         rgba(var(--vz-dark-rgb), .75);
    --vz-btn-active-border-color:rgba(var(--vz-dark-rgb), .75);
    --vz-btn-active-shadow:     inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:    var(--vz-white);
    --vz-btn-disabled-bg:       var(--vz-dark);
    --vz-btn-disabled-border-color: var(--vz-dark);
}

/* ===== Outline Variants ===== */
.btn-outline-primary {
    --vz-btn-color:            var(--vz-primary);
    --vz-btn-border-color:     var(--vz-primary);
    --vz-btn-hover-color:      var(--vz-white);
    --vz-btn-hover-bg:         var(--vz-primary);
    --vz-btn-hover-border-color:var(--vz-primary);
    --vz-btn-focus-shadow-rgb: var(--vz-primary-rgb);
    --vz-btn-active-color:     var(--vz-white);
    --vz-btn-active-bg:        var(--vz-primary);
    --vz-btn-active-border-color:var(--vz-primary);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-primary);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-primary);
    --vz-gradient:             none;
}

.btn-outline-secondary {
    --vz-btn-color:            var(--vz-secondary);
    --vz-btn-border-color:     var(--vz-secondary);
    --vz-btn-hover-color:      var(--vz-white);
    --vz-btn-hover-bg:         var(--vz-secondary);
    --vz-btn-hover-border-color:var(--vz-secondary);
    --vz-btn-focus-shadow-rgb: var(--vz-secondary-rgb);
    --vz-btn-active-color:     var(--vz-white);
    --vz-btn-active-bg:        var(--vz-secondary);
    --vz-btn-active-border-color:var(--vz-secondary);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-secondary);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-secondary);
    --vz-gradient:             none;
}

.btn-outline-success {
    --vz-btn-color:            var(--vz-success);
    --vz-btn-border-color:     var(--vz-success);
    --vz-btn-hover-color:      var(--vz-white);
    --vz-btn-hover-bg:         var(--vz-success);
    --vz-btn-hover-border-color:var(--vz-success);
    --vz-btn-focus-shadow-rgb: var(--vz-success-rgb);
    --vz-btn-active-color:     var(--vz-white);
    --vz-btn-active-bg:        var(--vz-success);
    --vz-btn-active-border-color:var(--vz-success);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-success);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-success);
    --vz-gradient:             none;
}

.btn-outline-info {
    --vz-btn-color:            var(--vz-info);
    --vz-btn-border-color:     var(--vz-info);
    --vz-btn-hover-color:      var(--vz-white);
    --vz-btn-hover-bg:         var(--vz-info);
    --vz-btn-hover-border-color:var(--vz-info);
    --vz-btn-focus-shadow-rgb: var(--vz-info-rgb);
    --vz-btn-active-color:     var(--vz-white);
    --vz-btn-active-bg:        var(--vz-info);
    --vz-btn-active-border-color:var(--vz-info);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-info);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-info);
    --vz-gradient:             none;
}

.btn-outline-warning {
    --vz-btn-color:            var(--vz-warning);
    --vz-btn-border-color:     var(--vz-warning);
    --vz-btn-hover-color:      var(--vz-dark);
    --vz-btn-hover-bg:         var(--vz-warning);
    --vz-btn-hover-border-color:var(--vz-warning);
    --vz-btn-focus-shadow-rgb: var(--vz-warning-rgb);
    --vz-btn-active-color:     var(--vz-dark);
    --vz-btn-active-bg:        var(--vz-warning);
    --vz-btn-active-border-color:var(--vz-warning);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-warning);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-warning);
    --vz-gradient:             none;
}

.btn-outline-danger {
    --vz-btn-color:            var(--vz-danger);
    --vz-btn-border-color:     var(--vz-danger);
    --vz-btn-hover-color:      var(--vz-white);
    --vz-btn-hover-bg:         var(--vz-danger);
    --vz-btn-hover-border-color:var(--vz-danger);
    --vz-btn-focus-shadow-rgb: var(--vz-danger-rgb);
    --vz-btn-active-color:     var(--vz-white);
    --vz-btn-active-bg:        var(--vz-danger);
    --vz-btn-active-border-color:var(--vz-danger);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-danger);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-danger);
    --vz-gradient:             none;
}

.btn-outline-light {
    --vz-btn-color:            var(--vz-light);
    --vz-btn-border-color:     var(--vz-light);
    --vz-btn-hover-color:      var(--vz-dark);
    --vz-btn-hover-bg:         var(--vz-light);
    --vz-btn-hover-border-color:var(--vz-light);
    --vz-btn-focus-shadow-rgb: var(--vz-light-rgb);
    --vz-btn-active-color:     var(--vz-dark);
    --vz-btn-active-bg:        var(--vz-light);
    --vz-btn-active-border-color:var(--vz-light);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-light);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-light);
    --vz-gradient:             none;
}

.btn-outline-dark {
    --vz-btn-color:            var(--vz-dark);
    --vz-btn-border-color:     var(--vz-dark);
    --vz-btn-hover-color:      var(--vz-white);
    --vz-btn-hover-bg:         var(--vz-dark);
    --vz-btn-hover-border-color:var(--vz-dark);
    --vz-btn-focus-shadow-rgb: var(--vz-dark-rgb);
    --vz-btn-active-color:     var(--vz-white);
    --vz-btn-active-bg:        var(--vz-dark);
    --vz-btn-active-border-color:var(--vz-dark);
    --vz-btn-active-shadow:    inset 0 3px 5px rgba(0,0,0,.125);
    --vz-btn-disabled-color:   var(--vz-dark);
    --vz-btn-disabled-bg:      transparent;
    --vz-btn-disabled-border-color: var(--vz-dark);
    --vz-gradient:             none;
}

/* ===== Link ===== */
.btn-link {
    --vz-btn-font-weight: 400;
    --vz-btn-color:       var(--vz-link-color);
    --vz-btn-bg:          transparent;
    --vz-btn-border-color:transparent;
    --vz-btn-hover-color: var(--vz-link-hover-color);
    --vz-btn-active-color:var(--vz-link-hover-color);
    --vz-btn-disabled-color: #777777;
    --vz-btn-focus-shadow-rgb: var(--vz-primary-rgb);
    text-decoration:      underline;
}

.menu-title span {
    padding: 10px 20px 0px 20px;
    display: inline-block;
}

.nav-pills {
    --vz-nav-pills-border-radius: .25rem;
    --vz-nav-pills-link-active-color: #fff;
    --vz-nav-pills-link-active-bg: var(--vz-primary);
}

@media (min-width: 992px) {
    .custom-verti-nav-pills .nav-link.active:before {
        border-left-color: var(--vz-primary);
    }
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background-color: var(--vz-primary);
    color: #fff;
    border-color: var(--vz-primary);
    font-weight: 500;
}


/* Detalles más legibles */
.detail-label   { font-weight: 600; color: var(--vz-primary); }
.accordion-button:not(.collapsed) { background: rgba(var(--vz-primary-rgb), .05); }
.accordion-button { padding-top:.65rem; padding-bottom:.65rem; }
.accordion-body  { padding-top: .75rem !important; }
.card.shadow-sm  { border-radius: .5rem; }