/*----------------------------------------------------------------
  Textil (Rollos de Tela) - Admin Theme (Azules)
  Base de marca: #293674
------------------------------------------------------------------*/

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

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

    /* Paleta de Marca (Azules) */
    --vz-primary: #203078;
    /* Brand Blue (Logo) */
    --vz-secondary: #2F7EF3;
    /* Azure (acciones secundarias / links) */
    --vz-success: #16A34A;
    /* Success */
    --vz-info: #0EA5E9;
    /* Info */
    --vz-warning: #F59E0B;
    /* Warning */
    --vz-danger: #DC2626;
    /* Danger */
    --vz-light: #F8FAFC;
    /* Fondo general (canvas) */
    --vz-dark: #0B1220;
    /* Texto principal (casi negro azulado) */
    --vz-white: #FFFFFF;

    --vz-primary-hover: #1C2A67;
    --vz-primary-active: #172255;
    --vz-primary-tint: #E7EAF8;

    /* RGB derivados para overlays */
    --vz-primary-rgb: 32, 48, 120;
    /* #293674 */
    --vz-secondary-rgb: 47, 126, 243;
    /* #2F7EF3 */
    --vz-success-rgb: 22, 163, 74;
    /* #16A34A */
    --vz-info-rgb: 14, 165, 233;
    /* #0EA5E9 */
    --vz-warning-rgb: 245, 158, 11;
    /* #F59E0B */
    --vz-danger-rgb: 220, 38, 38;
    /* #DC2626 */
    --vz-light-rgb: 248, 250, 252;
    /* #F8FAFC */
    --vz-dark-rgb: 11, 18, 32;
    /* #0B1220 */
    --vz-white-rgb: 255, 255, 255;
    --vz-black-rgb: 0, 0, 0;

    /* Layout Colors (Administración) */
    --vz-vertical-menu-bg: #F1F5F9;
    /* Sidebar slate muy claro */
    --vz-vertical-menu-item-color: #334155;
    /* Texto sidebar */
    --vz-vertical-menu-item-hover-color: var(--vz-secondary);
    --vz-vertical-menu-item-active-color: var(--vz-primary);

    --vz-vertical-menu-sub-item-color: #334155;
    --vz-vertical-menu-sub-item-hover-color: var(--vz-secondary);
    --vz-vertical-menu-sub-item-active-color: var(--vz-primary);
    --vz-vertical-menu-title-color: var(--vz-primary);

    --vz-header-bg: #FFFFFF;
    /* Header limpio */
    --vz-header-item-color: var(--vz-dark);

    --vz-footer-bg: #F1F5F9;
    --vz-footer-color: #334155;

    --vz-boxed-body-bg: var(--vz-light);
    --vz-heading-color: var(--vz-dark);

    --vz-link-color: var(--vz-secondary);
    --vz-link-hover-color: #2666C4;
    /* Secondary Hover */

    /* Resto */
    --vz-topbar-search-bg: var(--vz-white);
    --vz-topbar-user-bg: var(--vz-white);
    --vz-topbar-user-bg-dark: var(--vz-dark);

    --vz-topnav-bg: var(--vz-light);
    --vz-topnav-item-color: var(--vz-dark);
    --vz-topnav-item-color-active: var(--vz-primary);

    --vz-twocolumn-menu-iconview-bg: var(--vz-light);
    --vz-twocolumn-menu-bg: var(--vz-light);
    --vz-twocolumn-menu-iconview-bg-dark: #0B1220;
    --vz-twocolumn-menu-bg-dark: #0B1220;
    --vz-twocolumn-menu-item-color-dark: #E2E8F0;
    --vz-twocolumn-menu-item-active-color-dark: var(--vz-secondary);
    --vz-twocolumn-menu-item-active-bg-dark: rgba(var(--vz-secondary-rgb), .16);

    /* Bordes / Cards / Inputs */
    --vz-border-color: #CBD5E1;
    --vz-card-bg-custom: var(--vz-white);
    --vz-card-logo-dark: block;
    --vz-card-logo-light: none;
    --vz-list-group-hover-bg: #EEF2FF;
    /* Azul muy sutil */

    --vz-input-bg: var(--vz-white);
    --vz-input-border: #CBD5E1;
    --vz-input-focus-border: #9DB6FF;
    /* Focus Ring */
    --vz-input-disabled-bg: #F1F5F9;
    --vz-input-group-addon-bg: #F1F5F9;
    --vz-input-check-border: var(--vz-input-border);

    --vz-border-radius: 1.5rem;
    --vz-card-border-radius: 1rem;
    --vz-modal-border-radius: 1rem;
    --vz-modal-inner-border-radius: 1rem;
}

.navbar-header {
    justify-content: right !important;
    position: relative;
}

.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true],
.navbar-menu .navbar-nav .nav-sm .nav-link.active {
    color: var(--vz-vertical-menu-sub-item-hover-color);
}

.topnav-hamburger .hamburger-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.topnav-hamburger .hamburger-icon i {
    display: block;
    color: var(--vz-gray-600);
    font-size: 1.5rem;
    line-height: 1;
}

.hamburger-icon.open {
    transform: none;
}

[data-topbar=dark] .topnav-hamburger .hamburger-icon i {
    color: #e9ebec;
}

@media (max-width: 991px) {
    .shortcuts-container {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .navbar-header .topnav-hamburger {
        position: absolute;
        top: 0;
        left: .75rem;
        z-index: 2;
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }

    .footer {
        height: auto;
        margin-top: 32px;
    }

    .page-content {
        padding: calc(70px + 1.5rem) .3rem 80px .3rem;
    }
}

/* Tabs active background */
:root .nav-tabs {
    --vz-nav-tabs-link-active-bg: rgba(var(--vz-secondary-rgb), .10);
}



/* Dropdowns / Selects / Editors */
: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: #F1F5F9;
    --vz-choices-link-active-color: var(--vz-primary);
}

/*--------------------------------------------------------------
  Dark Mode Overrides
--------------------------------------------------------------*/
[data-layout-mode=dark] {
    --vz-body-bg: #0B1220;
    --vz-body-bg-rgb: var(--vz-dark-rgb);
    --vz-body-color: #E2E8F0;
    --vz-body-color-rgb: 226, 232, 240;

    --vz-vertical-menu-bg: #0F172A;
    --vz-header-bg: #0F172A;
    --vz-footer-bg: #0F172A;
    --vz-boxed-body-bg: #0B1220;
}

/*--------------------------------------------------------------
  Color Palette Definitions (utilitarias)
--------------------------------------------------------------*/
:root {
    /* Bootstrap-like palette mapping */
    --vz-blue: var(--vz-primary);
    --vz-indigo: #1B244F;
    --vz-purple: #7C3AED;
    --vz-pink: #DB2777;
    --vz-red: var(--vz-danger);
    --vz-orange: #FFB703;
    --vz-yellow: var(--vz-warning);
    --vz-green: var(--vz-success);
    --vz-teal: #00B7C2;
    --vz-cyan: var(--vz-info);

    /* Grises (Slate) */
    --vz-gray: #64748B;
    --vz-gray-dark: #334155;
    --vz-gray-100: #F1F5F9;
    --vz-gray-200: #E2E8F0;
    --vz-gray-300: #CBD5E1;
    --vz-gray-400: #94A3B8;
    --vz-gray-500: #64748B;
    --vz-gray-600: #475569;
    --vz-gray-700: #334155;
    --vz-gray-800: #1F2937;
    --vz-gray-900: #0B1220;

    /* Base */
    --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);
}

/* ============================
   Bootstrap Buttons – Textil Azul
   ============================ */
.btn {
    --vz-btn-border-radius: .5rem;
}

.btn-topbar {
    --vz-btn-hover-color: var(--vz-primary);
    --vz-btn-hover-bg: rgba(var(--vz-secondary-rgb), 0.12);
}

/* 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), .88);
    --vz-btn-hover-border-color: rgba(var(--vz-primary-rgb), .88);
    --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), .78);
    --vz-btn-active-border-color: rgba(var(--vz-primary-rgb), .78);
    --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), .88);
    --vz-btn-hover-border-color: rgba(var(--vz-secondary-rgb), .88);
    --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), .78);
    --vz-btn-active-border-color: rgba(var(--vz-secondary-rgb), .78);
    --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), .88);
    --vz-btn-hover-border-color: rgba(var(--vz-success-rgb), .88);
    --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), .78);
    --vz-btn-active-border-color: rgba(var(--vz-success-rgb), .78);
    --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), .88);
    --vz-btn-hover-border-color: rgba(var(--vz-info-rgb), .88);
    --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), .78);
    --vz-btn-active-border-color: rgba(var(--vz-info-rgb), .78);
    --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), .88);
    --vz-btn-hover-border-color: rgba(var(--vz-warning-rgb), .88);
    --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), .78);
    --vz-btn-active-border-color: rgba(var(--vz-warning-rgb), .78);
    --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), .88);
    --vz-btn-hover-border-color: rgba(var(--vz-danger-rgb), .88);
    --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), .78);
    --vz-btn-active-border-color: rgba(var(--vz-danger-rgb), .78);
    --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: #E2E8F0;
    --vz-btn-hover-color: var(--vz-dark);
    --vz-btn-hover-bg: rgba(var(--vz-light-rgb), .92);
    --vz-btn-hover-border-color: rgba(203, 213, 225, .92);
    --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), .78);
    --vz-btn-active-border-color: rgba(203, 213, 225, .78);
    --vz-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .08);
    --vz-btn-disabled-color: var(--vz-dark);
    --vz-btn-disabled-bg: var(--vz-light);
    --vz-btn-disabled-border-color: #E2E8F0;
}

/* 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), .88);
    --vz-btn-hover-border-color: rgba(var(--vz-dark-rgb), .88);
    --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), .78);
    --vz-btn-active-border-color: rgba(var(--vz-dark-rgb), .78);
    --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: #94A3B8;
    --vz-btn-border-color: #CBD5E1;
    --vz-btn-hover-color: var(--vz-dark);
    --vz-btn-hover-bg: #F1F5F9;
    --vz-btn-hover-border-color: #CBD5E1;
    --vz-btn-focus-shadow-rgb: 203, 213, 225;
    --vz-btn-active-color: var(--vz-dark);
    --vz-btn-active-bg: #E2E8F0;
    --vz-btn-active-border-color: #CBD5E1;
    --vz-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .08);
    --vz-btn-disabled-color: #CBD5E1;
    --vz-btn-disabled-bg: transparent;
    --vz-btn-disabled-border-color: #E2E8F0;
    --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;
}

/* ===== Login ===== */
.auth-one-bg .bg-overlay {
    opacity: 0.7;
}

/* ===== Modals ===== */
.modal-header {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

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

/* ===== 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: #94A3B8;
    --vz-btn-focus-shadow-rgb: var(--vz-secondary-rgb);
    text-decoration: underline;
}

/* UI Extras */
.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);
}

.nav-success .nav-link.active {
    background-color: #405189;
}

@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) !important;
    color: #fff !important;
    border-color: var(--vz-primary) !important;
    font-weight: 600 !important;
}

.card {
    --vz-card-border-radius: 1rem;

}

.rounded {
    --vz-border-radius: 1.5rem;
}

.choices__inner,
.form-control {
    border-radius: 0.5rem !important;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,
.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-text {
    border-radius: .5rem;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,
.ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
    border-radius: .5rem !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
.ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
    border-radius: .5rem !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.page-link.active, .active>.page-link {
    background-color: var(--vz-primary) !important;
    color: #fff !important;
    border-color: var(--vz-primary) !important;
    font-weight: 600 !important;
}

/* ===== Grid js ===== */
.gridjs-pagination .gridjs-pages button {
    border-radius: .5rem !important;
}

.gridjs-wrapper,
.gridjs {
    border-radius: .5rem !important;
}

/*--------------------------------------------------------------
  Utilitarios “subtle” (fondos translúcidos)
--------------------------------------------------------------*/

/* Primary */
.bg-primary-subtle {
    background-color: rgba(var(--vz-primary-rgb), .14) !important;
    color: var(--vz-primary) !important;
}

/* Secondary */
.bg-secondary-subtle {
    background-color: rgba(var(--vz-secondary-rgb), .14) !important;
    color: var(--vz-secondary) !important;
}

/* Success */
.bg-success-subtle {
    background-color: rgba(var(--vz-success-rgb), .14) !important;
    color: var(--vz-success) !important;
}

/* Info */
.bg-info-subtle {
    background-color: rgba(var(--vz-info-rgb), .14) !important;
    color: var(--vz-info) !important;
}

/* Warning – texto oscuro para mejor legibilidad */
.bg-warning-subtle {
    background-color: rgba(var(--vz-warning-rgb), .16) !important;
    color: var(--vz-dark) !important;
}

/* Danger */
.bg-danger-subtle {
    background-color: rgba(var(--vz-danger-rgb), .14) !important;
    color: var(--vz-danger) !important;
}

/* Light – fondo muy claro; texto oscuro */
.bg-light-subtle {
    background-color: rgba(var(--vz-light-rgb), .40) !important;
    color: var(--vz-dark) !important;
}

/* Dark – fondo oscuro translúcido; texto claro */
.bg-dark-subtle {
    background-color: rgba(var(--vz-dark-rgb), .32) !important;
    color: var(--vz-white) !important;
}

/* Detalles más legibles */
.detail-label {
    font-weight: 600;
    color: var(--vz-primary);
}

.accordion-button:not(.collapsed) {
    background: rgba(var(--vz-secondary-rgb), .06);
}

.accordion-button {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.accordion-body {
    padding-top: .75rem !important;
}

.card.shadow-sm {
    border-radius: .5rem;
}

.nav-success.nav-tabs .nav-link.active, .nav-success.nav-tabs-custom .nav-link.active {
    color: var(--vz-secondary);
}

.nav-success.nav-tabs-custom .nav-link.active:after {
    background-color: var(--vz-secondary);
}

#label-preview-mode-disable {
    color: #8087b8;
}

#label-preview-mode-disable:hover {
    color: var(--vz-secondary);
}

.order-priority-toggle {
    isolation: isolate;
}

.order-priority-option {
    min-height: 2.5rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    white-space: nowrap;
}

.order-priority-option--low {
    border-color: #0ab39c !important;
    color: #087f70 !important;
}

.order-priority-option--normal {
    border-color: #f7b84b !important;
    color: #9a6700 !important;
}

.order-priority-option--urgent {
    border-color: #f06548 !important;
    color: #c13f2a !important;
}

.btn-check:checked + .order-priority-option--low {
    background-color: #0ab39c !important;
    color: #fff !important;
}

.btn-check:checked + .order-priority-option--normal {
    background-color: #f7b84b !important;
    color: #212529 !important;
}

.btn-check:checked + .order-priority-option--urgent {
    background-color: #f06548 !important;
    color: #fff !important;
}

.btn-check:disabled + .order-priority-option,
.btn-check[disabled] + .order-priority-option {
    pointer-events: none;
    opacity: .55;
}

.admin-filter-toggle {
    min-height: 2.45rem;
    font-weight: 600;
}

.admin-filter-toggle i {
    font-size: 1.05rem;
    line-height: 1;
}

@media (min-width: 768px) {
    .admin-filters-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible;
    }
}

@media (max-width: 767.98px) {
    .admin-filter-toggle {
        width: 100%;
        justify-content: center;
    }

    .admin-filters-collapse.show,
    .admin-filters-collapse.collapsing {
        margin-top: 1rem;
    }
}

/* Packing list upload css */

.swal2-html-container {
    font-size: 1rem;
}

.packing-catalog-issue-item:hover {
    background-color: #eeeeee;
}

.packing-catalog-swal {
    display: flex !important;
    flex-direction: column;
    width: min(760px, calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 1.25rem !important;
    overflow: hidden;
}

.packing-catalog-swal-title {
    flex: 0 0 auto;
    font-size: 1.05rem !important;
    line-height: 1.3;
}

.packing-catalog-swal .swal2-icon {
    flex: 0 0 auto;
    margin-top: 0 !important;
}

.packing-catalog-swal-html {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    margin: .75rem 0 0 !important;
    text-align: left;
    font-size: .875rem;
    line-height: 1.4;
}

.packing-catalog-swal-actions {
    flex: 0 0 auto;
    width: 100%;
    gap: .5rem;
    margin: 1rem 0 0 !important;
    padding-top: 1rem;
    background: var(--vz-modal-bg, #fff);
}

.packing-catalog-issue-intro {
    font-size: .875rem;
}

.packing-catalog-issue-section {
    margin-bottom: .9rem;
}

.packing-catalog-issue-title {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .35rem;
    color: var(--vz-body-color, #212529);
}

.packing-catalog-issue-list {
    display: grid;
    margin: 0;
    padding: 0;
}

.packing-catalog-issue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
    padding: .3rem;
    border-bottom: solid 1px #eeeeee
}

.packing-catalog-issue-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
    color: var(--vz-body-color, #212529);
}

.packing-catalog-issue-item .btn {
    padding: .2rem .55rem;
    font-size: .75rem;
    line-height: 1.2;
}

@media (max-width: 575.98px) {
    .packing-catalog-swal {
        width: calc(100vw - .75rem) !important;
        max-width: calc(100vw - .75rem) !important;
        max-height: calc(100vh - .75rem);
        max-height: calc(100dvh - .75rem);
        padding: .9rem !important;
    }
    .packing-catalog-swal-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .packing-catalog-swal-actions .btn {
        width: 100%;
        margin: 0 !important;
    }
}