/*
 * VieyraWeb theme — capa de estilos sobre Metronic 8.
 * Se carga después de style.bundle.css y sobrescribe tokens y componentes.
 */

/* ---------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------- */
:root,
[data-theme="light"],
html:not([data-theme="dark"]) {
    --vw-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --vw-radius-sm: 6px;
    --vw-radius: 8px;
    --vw-radius-lg: 12px;
    --vw-border: #e7e7ec;
    --vw-border-strong: #d9d9e0;
    --vw-bg: #f7f7f9;
    --vw-surface: #ffffff;
    --vw-surface-muted: #fcfcfd;
    --vw-hover: #fafafb;
    --vw-check-border: #cfcfd8;
    --vw-backdrop: rgba(23, 23, 28, 0.4);
    --vw-loading-overlay: rgba(247, 247, 249, 0.45);
    --vw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --vw-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --vw-shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.16), 0 4px 8px -4px rgba(16, 24, 40, 0.06);
    --vw-ring: 0 0 0 3px rgba(79, 70, 229, 0.16);

    /* Escala de grises neutra */
    --kt-gray-100: #f4f4f6;
    --kt-gray-200: #ececf0;
    --kt-gray-300: #e2e2e8;
    --kt-gray-400: #b4b4be;
    --kt-gray-500: #8d8d99;
    --kt-gray-600: #6e6e7a;
    --kt-gray-700: #4f4f5b;
    --kt-gray-800: #33333d;
    --kt-gray-900: #17171c;
    --kt-gray-100-rgb: 244, 244, 246;
    --kt-gray-200-rgb: 236, 236, 240;
    --kt-gray-300-rgb: 226, 226, 232;
    --kt-gray-400-rgb: 180, 180, 190;
    --kt-gray-500-rgb: 141, 141, 153;
    --kt-gray-600-rgb: 110, 110, 122;
    --kt-gray-700-rgb: 79, 79, 91;
    --kt-gray-800-rgb: 51, 51, 61;
    --kt-gray-900-rgb: 23, 23, 28;
    --kt-text-gray-100: #f4f4f6;
    --kt-text-gray-200: #ececf0;
    --kt-text-gray-300: #e2e2e8;
    --kt-text-gray-400: #b4b4be;
    --kt-text-gray-500: #8d8d99;
    --kt-text-gray-600: #6e6e7a;
    --kt-text-gray-700: #4f4f5b;
    --kt-text-gray-800: #33333d;
    --kt-text-gray-900: #17171c;
    --kt-text-muted: #8d8d99;
    --kt-light: #f4f4f6;
    --kt-light-active: #ececf0;
    --kt-light-inverse: #4f4f5b;
    --kt-light-rgb: 244, 244, 246;
    --kt-dark: #17171c;
    --kt-dark-active: #000000;
    --kt-dark-rgb: 23, 23, 28;
    --kt-text-dark: #17171c;
    --kt-secondary: #ececf0;
    --kt-secondary-active: #e2e2e8;
    --kt-secondary-light: #f4f4f6;
    --kt-secondary-inverse: #33333d;

    /* Marca: índigo */
    --kt-primary: #4f46e5;
    --kt-primary-active: #4338ca;
    --kt-primary-light: #eef2ff;
    --kt-primary-inverse: #ffffff;
    --kt-primary-rgb: 79, 70, 229;
    --kt-text-primary: #4f46e5;
    --kt-link-color: #4f46e5;
    --kt-link-hover-color: #4338ca;
    --kt-component-active-bg: #4f46e5;
    --kt-component-hover-color: #4f46e5;
    --kt-component-hover-bg: #f4f4f6;
    --kt-component-checked-bg: #4f46e5;
    --kt-btn-link-color: #4f46e5;
    --kt-btn-link-hover-color: #4338ca;

    /* Estados */
    --kt-success: #12b76a;
    --kt-success-active: #039855;
    --kt-success-light: #ecfdf3;
    --kt-success-rgb: 18, 183, 106;
    --kt-text-success: #039855;
    --kt-info: #7a5af8;
    --kt-info-active: #6938ef;
    --kt-info-light: #f4f3ff;
    --kt-info-rgb: 122, 90, 248;
    --kt-text-info: #6938ef;
    --kt-warning: #f79009;
    --kt-warning-active: #dc6803;
    --kt-warning-light: #fffaeb;
    --kt-warning-rgb: 247, 144, 9;
    --kt-text-warning: #dc6803;
    --kt-danger: #f04438;
    --kt-danger-active: #d92d20;
    --kt-danger-light: #fef3f2;
    --kt-danger-rgb: 240, 68, 56;
    --kt-text-danger: #d92d20;

    /* Superficies */
    --kt-body-bg: #f7f7f9;
    --kt-body-bg-rgb: 247, 247, 249;
    --kt-body-color: #17171c;
    --kt-headings-color: #17171c;
    --kt-border-color: #e7e7ec;
    --kt-border-dashed-color: #e2e2e8;
    --kt-app-bg-color: #f7f7f9;
    --kt-app-blank-bg-color: #f7f7f9;
    --kt-card-bg: #ffffff;
    --kt-card-box-shadow: var(--vw-shadow-sm);
    --kt-card-border-color: #e7e7ec;
    --kt-card-border-dashed-color: #e2e2e8;
    --kt-card-cap-bg: transparent;
    --kt-box-shadow-xs: var(--vw-shadow-sm);
    --kt-box-shadow-sm: var(--vw-shadow);
    --kt-box-shadow: var(--vw-shadow-lg);
    --kt-menu-dropdown-box-shadow: var(--vw-shadow-lg);
    --kt-dropdown-box-shadow: var(--vw-shadow-lg);

    /* Tablas */
    --kt-table-color: #33333d;
    --kt-table-border-color: #ececf0;
    --kt-table-striped-color: #33333d;
    --kt-table-striped-bg: #fafafb;
    --kt-table-hover-bg: #fafafb;
    --kt-table-active-bg: #f4f4f6;

    /* Formularios */
    --kt-input-bg: #ffffff;
    --kt-input-color: #17171c;
    --kt-input-placeholder-color: #a3a3ad;
    --kt-input-border-color: #dcdce3;
    --kt-input-focus-bg: #ffffff;
    --kt-input-focus-color: #17171c;
    --kt-input-focus-border-color: #4f46e5;
    --kt-input-disabled-bg: #f4f4f6;
    --kt-input-disabled-border-color: #e2e2e8;
    --kt-input-solid-bg: #f4f4f6;
    --kt-input-solid-bg-focus: #ececf0;
    --kt-input-solid-color: #17171c;
    --kt-input-solid-placeholder-color: #a3a3ad;
    --kt-input-group-addon-bg: #f7f7f9;
    --kt-input-group-addon-color: #4f4f5b;
    --kt-input-group-addon-border-color: #dcdce3;
    --kt-input-btn-focus-box-shadow: var(--vw-ring);
    --kt-btn-focus-box-shadow: var(--vw-ring);
    --kt-form-label-color: #33333d;
    --kt-form-text-color: #8d8d99;
    --kt-form-select-color: #17171c;
    --kt-form-select-border-color: #dcdce3;
    --kt-form-select-focus-border-color: #4f46e5;
    --kt-form-select-focus-box-shadow: var(--vw-ring);
    --kt-form-check-input-border: 1px solid #cfcfd8;
    --kt-form-check-input-bg-solid: #ececf0;
    --kt-form-check-input-checked-bg-color: #4f46e5;
    --kt-form-check-input-checked-bg-color-solid: #4f46e5;
    --kt-form-check-input-checked-border-color: #4f46e5;
    --kt-form-check-input-indeterminate-bg-color: #4f46e5;
    --kt-form-check-input-indeterminate-border-color: #4f46e5;

    /* Layout */
    --kt-app-header-base-bg-color: #ffffff;
    --kt-app-header-base-bg-color-mobile: #ffffff;
    --kt-app-header-base-box-shadow: none;
    --kt-app-header-base-box-shadow-mobile: none;
    --kt-app-toolbar-base-bg-color: transparent;
    --kt-app-toolbar-base-bg-color-mobile: transparent;
    --kt-app-toolbar-base-box-shadow: none;
    --kt-app-toolbar-base-box-shadow-mobile: none;
    --kt-app-toolbar-base-border-top: 0;
    --kt-app-toolbar-base-border-top-mobile: 0;
    --kt-app-footer-bg-color: transparent;
    --kt-app-footer-bg-color-mobile: transparent;
    --kt-app-sidebar-light-bg-color: #ffffff;
    --kt-app-sidebar-light-separator-color: #ececf0;
    --kt-app-sidebar-light-scrollbar-color: #ececf0;
    --kt-app-sidebar-light-scrollbar-color-hover: #d9d9e0;
    --kt-modal-header-border-color: #ececf0;
    --kt-tooltip-box-shadow: var(--vw-shadow-lg);
    --kt-popover-box-shadow: var(--vw-shadow-lg);
    --kt-pagination-hover-border-color: #e2e2e8;

    --bs-border-radius: var(--vw-radius);
    --bs-border-radius-sm: var(--vw-radius-sm);
    --bs-border-radius-lg: var(--vw-radius-lg);
}

/* Modo oscuro. Redefine todo lo que el bloque dark de style.bundle.css
   deja mal (varias superficies quedaron en #4f46e5 por un reemplazo viejo). */
[data-theme="dark"] {
    color-scheme: dark;

    --vw-border: #26262e;
    --vw-border-strong: #33333d;
    --vw-bg: #0e0e11;
    --vw-surface: #16161a;
    --vw-surface-muted: #131317;
    --vw-hover: #1c1c22;
    --vw-check-border: #3d3d48;
    --vw-backdrop: rgba(0, 0, 0, 0.6);
    --vw-loading-overlay: rgba(14, 14, 17, 0.5);
    --vw-modal-header-bg: #2a2a33;
    --vw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --vw-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --vw-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
    --vw-ring: 0 0 0 3px rgba(129, 140, 248, 0.25);

    --kt-gray-100: #1c1c22;
    --kt-gray-200: #24242b;
    --kt-gray-300: #2e2e37;
    --kt-gray-400: #4a4a55;
    --kt-gray-500: #75757f;
    --kt-gray-600: #94949e;
    --kt-gray-700: #b6b6bf;
    --kt-gray-800: #dcdce2;
    --kt-gray-900: #f4f4f6;
    --kt-gray-100-rgb: 28, 28, 34;
    --kt-gray-200-rgb: 36, 36, 43;
    --kt-gray-300-rgb: 46, 46, 55;
    --kt-gray-400-rgb: 74, 74, 85;
    --kt-gray-500-rgb: 117, 117, 127;
    --kt-gray-600-rgb: 148, 148, 158;
    --kt-gray-700-rgb: 182, 182, 191;
    --kt-gray-800-rgb: 220, 220, 226;
    --kt-gray-900-rgb: 244, 244, 246;
    --kt-text-gray-100: #1c1c22;
    --kt-text-gray-200: #24242b;
    --kt-text-gray-300: #2e2e37;
    --kt-text-gray-400: #4a4a55;
    --kt-text-gray-500: #75757f;
    --kt-text-gray-600: #94949e;
    --kt-text-gray-700: #b6b6bf;
    --kt-text-gray-800: #dcdce2;
    --kt-text-gray-900: #f4f4f6;
    --kt-text-muted: #75757f;
    --kt-light: #24242b;
    --kt-light-active: #2e2e37;
    --kt-light-inverse: #b6b6bf;
    --kt-light-rgb: 36, 36, 43;
    --kt-dark: #f4f4f6;
    --kt-dark-active: #ffffff;
    --kt-dark-inverse: #16161a;
    --kt-dark-light: #24242b;
    --kt-dark-rgb: 244, 244, 246;
    --kt-text-dark: #f4f4f6;
    --kt-secondary: #24242b;
    --kt-secondary-active: #2e2e37;
    --kt-secondary-light: #1c1c22;
    --kt-secondary-inverse: #dcdce2;
    --kt-secondary-rgb: 36, 36, 43;
    --kt-text-secondary: #94949e;

    --kt-primary: #6366f1;
    --kt-primary-active: #4f46e5;
    --kt-primary-light: #1e1d3a;
    --kt-primary-inverse: #ffffff;
    --kt-primary-rgb: 99, 102, 241;
    --kt-text-primary: #818cf8;
    --kt-link-color: #818cf8;
    --kt-link-hover-color: #a5b4fc;
    --kt-component-active-bg: #6366f1;
    --kt-component-hover-color: #818cf8;
    --kt-component-hover-bg: #1c1c22;
    --kt-component-checked-bg: #6366f1;
    --kt-btn-link-color: #818cf8;
    --kt-btn-link-hover-color: #a5b4fc;

    --kt-success-light: #0f2a1e;
    --kt-text-success: #32d583;
    --kt-info-light: #231c40;
    --kt-text-info: #9b8afb;
    --kt-warning-light: #2e2112;
    --kt-text-warning: #fdb022;
    --kt-danger-light: #331a19;
    --kt-text-danger: #f97066;

    --kt-body-bg: #0e0e11;
    --kt-body-bg-rgb: 14, 14, 17;
    --kt-body-color: #e4e4e9;
    --kt-headings-color: #f4f4f6;
    --kt-border-color: #26262e;
    --kt-border-dashed-color: #2e2e37;
    --kt-app-bg-color: #0e0e11;
    --kt-app-blank-bg-color: #0e0e11;
    --kt-card-bg: #16161a;
    --kt-card-box-shadow: var(--vw-shadow-sm);
    --kt-card-border-color: #26262e;
    --kt-card-border-dashed-color: #2e2e37;
    --kt-box-shadow-xs: var(--vw-shadow-sm);
    --kt-box-shadow-sm: var(--vw-shadow);
    --kt-box-shadow: var(--vw-shadow-lg);
    --kt-box-shadow-lg: var(--vw-shadow-lg);
    --kt-menu-dropdown-box-shadow: var(--vw-shadow-lg);
    --kt-menu-dropdown-bg-color: #1a1a1f;
    --kt-menu-heading-color: #75757f;
    --kt-menu-link-color-hover: #818cf8;
    --kt-menu-link-color-show: #818cf8;
    --kt-menu-link-color-here: #818cf8;
    --kt-menu-link-color-active: #818cf8;
    --kt-menu-link-bg-color-hover: #24242b;
    --kt-menu-link-bg-color-show: #24242b;
    --kt-menu-link-bg-color-here: #24242b;
    --kt-menu-link-bg-color-active: #24242b;
    --kt-dropdown-bg: #1a1a1f;
    --kt-dropdown-color: #e4e4e9;
    --kt-dropdown-link-color: #dcdce2;
    --kt-dropdown-link-hover-color: #f4f4f6;
    --kt-dropdown-link-hover-bg: #24242b;
    --kt-dropdown-divider-bg: #26262e;
    --kt-dropdown-box-shadow: var(--vw-shadow-lg);
    --kt-drawer-bg-color: #16161a;
    --kt-drawer-box-shadow: var(--vw-shadow-lg);
    --kt-drawer-overlay-bg-color: rgba(0, 0, 0, 0.5);
    --kt-offcanvas-bg-color: #16161a;
    --kt-modal-bg: #1a1a1f;
    --kt-modal-content-bg: #1a1a1f;
    --kt-modal-header-border-color: #26262e;
    --kt-modal-footer-border-color: #26262e;
    --kt-modal-box-shadow: var(--vw-shadow-lg);
    --kt-modal-content-box-shadow: var(--vw-shadow-lg);
    --kt-modal-content-box-shadow-xs: var(--vw-shadow-lg);
    --kt-modal-content-box-shadow-sm-up: var(--vw-shadow-lg);
    --kt-accordion-bg: #16161a;
    --kt-accordion-button-bg: #16161a;
    --kt-accordion-color: #e4e4e9;
    --kt-accordion-button-color: #e4e4e9;
    --kt-accordion-border-color: #26262e;
    --kt-thumbnail-bg: #16161a;
    --kt-thumbnail-border-color: #26262e;
    --kt-feedback-popup-background-color: #1a1a1f;
    --kt-scrolltop-bg-color: #6366f1;
    --kt-scrolltop-bg-color-hover: #4f46e5;
    --kt-ribbon-label-bg: #6366f1;
    --kt-badge-color: #ffffff;
    --kt-tooltip-bg: #2e2e37;
    --kt-tooltip-color: #f4f4f6;
    --kt-tooltip-box-shadow: var(--vw-shadow-lg);
    --kt-popover-bg: #1a1a1f;
    --kt-popover-border-color: #26262e;
    --kt-popover-header-bg: #1a1a1f;
    --kt-popover-header-color: #f4f4f6;
    --kt-popover-header-border-color: #26262e;
    --kt-popover-body-color: #dcdce2;
    --kt-popover-box-shadow: var(--vw-shadow-lg);
    --kt-symbol-label-bg: #24242b;
    --kt-symbol-label-color: #dcdce2;
    --kt-bullet-bg-color: #4a4a55;
    --kt-scrollbar-color: #2e2e37;
    --kt-scrollbar-hover-color: #3d3d48;
    --kt-progress-bg: #24242b;
    --kt-code-bg: #24242b;
    --kt-code-color: #f0abfc;
    --kt-breadcrumb-active-color: #818cf8;
    --kt-overlay-bg: rgba(0, 0, 0, 0.3);
    --kt-blockui-overlay-bg: rgba(0, 0, 0, 0.3);

    --kt-table-color: #dcdce2;
    --kt-table-border-color: #24242b;
    --kt-table-striped-color: #dcdce2;
    --kt-table-striped-bg: #131317;
    --kt-table-hover-bg: #1c1c22;
    --kt-table-active-bg: #1c1c22;
    --kt-table-loading-message-bg: #1a1a1f;
    --kt-table-loading-message-color: #b6b6bf;

    --kt-nav-tabs-border-color: #26262e;
    --kt-nav-tabs-link-active-bg: #16161a;
    --kt-nav-tabs-link-active-color: #f4f4f6;
    --kt-pagination-item-bg: #16161a;
    --kt-pagination-color: #b6b6bf;
    --kt-pagination-hover-color: #818cf8;
    --kt-pagination-hover-bg: #24242b;
    --kt-pagination-focus-color: #818cf8;
    --kt-pagination-focus-bg: #24242b;
    --kt-pagination-active-bg: #6366f1;
    --kt-pagination-disabled-color: #4a4a55;
    --kt-list-group-bg: #16161a;
    --kt-list-group-color: #e4e4e9;
    --kt-list-group-border-color: #26262e;
    --kt-list-group-hover-bg: #1c1c22;

    --kt-input-bg: #16161a;
    --kt-input-color: #f4f4f6;
    --kt-input-placeholder-color: #6b6b75;
    --kt-input-plaintext-color: #dcdce2;
    --kt-input-border-color: #33333d;
    --kt-input-focus-bg: #16161a;
    --kt-input-focus-color: #f4f4f6;
    --kt-input-focus-border-color: #6366f1;
    --kt-input-disabled-bg: #1c1c22;
    --kt-input-disabled-border-color: #2e2e37;
    --kt-input-solid-bg: #1c1c22;
    --kt-input-solid-bg-focus: #24242b;
    --kt-input-solid-color: #f4f4f6;
    --kt-input-solid-placeholder-color: #6b6b75;
    --kt-input-group-addon-bg: #1c1c22;
    --kt-input-group-addon-color: #b6b6bf;
    --kt-input-group-addon-border-color: #33333d;
    --kt-form-label-color: #dcdce2;
    --kt-form-text-color: #75757f;
    --kt-form-select-bg: #16161a;
    --kt-form-select-color: #f4f4f6;
    --kt-form-select-border-color: #33333d;
    --kt-form-select-focus-border-color: #6366f1;
    --kt-form-select-disabled-bg: #1c1c22;
    --kt-form-select-disabled-border-color: #2e2e37;
    --kt-form-select-indicator-color: #94949e;
    --kt-form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394949E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --kt-form-file-button-bg: #1c1c22;
    --kt-form-file-button-color: #dcdce2;
    --kt-form-check-input-bg: transparent;
    --kt-form-check-input-border: 1px solid #3d3d48;
    --kt-form-check-input-bg-solid: #24242b;
    --kt-form-check-input-checked-bg-color: #6366f1;
    --kt-form-check-input-checked-bg-color-solid: #6366f1;
    --kt-form-check-input-checked-border-color: #6366f1;
    --kt-form-check-input-indeterminate-bg-color: #6366f1;
    --kt-form-check-input-indeterminate-border-color: #6366f1;

    --kt-app-header-base-bg-color: #16161a;
    --kt-app-header-base-bg-color-mobile: #16161a;
    --kt-app-header-base-menu-link-bg-color-active: #24242b;
    --kt-app-header-light-separator-color: #26262e;
    --kt-app-toolbar-base-bg-color: transparent;
    --kt-app-toolbar-base-bg-color-mobile: transparent;
    --kt-app-toolbar-base-box-shadow-mobile: none;
    --kt-app-toolbar-base-border-top-mobile: 0;
    --kt-app-footer-bg-color: transparent;
    --kt-app-footer-bg-color-mobile: transparent;
    --kt-app-sidebar-base-toggle-btn-bg-color: #16161a;
    --kt-app-sidebar-light-bg-color: #16161a;
    --kt-app-sidebar-light-separator-color: #26262e;
    --kt-app-sidebar-light-scrollbar-color: #24242b;
    --kt-app-sidebar-light-scrollbar-color-hover: #33333d;
    --kt-app-sidebar-light-menu-heading-color: #75757f;
    --kt-app-sidebar-light-menu-link-bg-color-active: #24242b;
    --kt-pagination-hover-border-color: transparent;

    --bs-gray-100: #1c1c22;
    --bs-gray-200: #24242b;
    --bs-gray-300: #2e2e37;
    --bs-gray-400: #4a4a55;
    --bs-gray-500: #75757f;
    --bs-gray-600: #94949e;
    --bs-gray-700: #b6b6bf;
    --bs-gray-800: #dcdce2;
    --bs-gray-900: #f4f4f6;
    --bs-light: #24242b;
    --bs-dark: #f4f4f6;
    --bs-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bs-body-color: #e4e4e9;
    --bs-body-color-rgb: 228, 228, 233;
    --bs-body-bg: #0e0e11;
    --bs-body-bg-rgb: 14, 14, 17;
    --bs-border-color: #26262e;
    --bs-heading-color: #f4f4f6;
    --bs-link-color: #818cf8;
    --bs-link-hover-color: #a5b4fc;
}

@media (min-width: 992px) {
    :root {
        --kt-app-header-height: 60px;
        --kt-app-sidebar-width: 248px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --kt-app-header-height: 56px;
    }
}

/* ---------------------------------------------------------------
 * 2. Base
 * ------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--vw-font);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--vw-bg);
    color: var(--kt-body-color);
    letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.015em;
}

::selection {
    background: rgba(79, 70, 229, 0.16);
}

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

.separator {
    border-bottom-color: var(--vw-border);
}

/* Utilidad usada en las vistas que no existe en Bootstrap/Metronic */
.min-w-0 {
    min-width: 0 !important;
}

/* Evita el scroll horizontal de la página por drawers fuera de pantalla */
.app-root {
    overflow-x: clip;
}

/* ---------------------------------------------------------------
 * 3. Header
 * ------------------------------------------------------------- */
/* Sin backdrop-filter: crearía un containing block y atraparía los
   elementos fixed del header (drawer del cronómetro, dropdowns). */
.app-header {
    border-bottom: 1px solid var(--vw-border);
}

.app-header .vw-avatar {
    border-radius: 999px !important;
    background: linear-gradient(135deg, #4f46e5, #7a5af8) !important;
    color: #fff !important;
    font-weight: 600;
}

.app-header .vw-header-project {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 280px;
    margin-right: 12px;
}

.app-header .vw-header-project > div {
    width: 100%;
    min-width: 0;
}

.app-header .app-navbar {
    gap: 10px !important;
}

/* Botón del cronómetro */
.tt-container .symbol-label.bg-dark {
    background-color: var(--vw-surface) !important;
    border: 1px solid var(--vw-border-strong);
    border-radius: 999px;
    box-shadow: var(--vw-shadow-sm);
}

.tt-container .symbol-label.bg-dark i {
    color: var(--kt-gray-800) !important;
}

.tt-container .symbol-label.bg-warning {
    border-radius: 999px;
}

/* ---------------------------------------------------------------
 * 4. Sidebar
 * ------------------------------------------------------------- */
[data-kt-app-layout="light-sidebar"] .app-sidebar {
    border-right: 1px solid var(--vw-border) !important;
}

.app-sidebar .app-sidebar-logo {
    height: var(--kt-app-header-height);
    min-height: var(--kt-app-header-height);
    padding: 0 20px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid var(--vw-border) !important;
}

.app-sidebar .app-sidebar-logo .app-sidebar-logo-default {
    height: 28px;
    width: auto;
    max-width: 100% !important;
}

.app-sidebar .app-sidebar-logo .app-sidebar-logo-minimize {
    height: 30px !important;
}

.app-sidebar .app-sidebar-toggle {
    background: var(--vw-surface) !important;
    border: 1px solid var(--vw-border) !important;
    box-shadow: var(--vw-shadow) !important;
    border-radius: 999px !important;
    height: 26px !important;
    width: 26px !important;
}

.app-sidebar .app-sidebar-toggle .svg-icon svg {
    height: 14px;
    width: 14px;
}

.app-sidebar .app-sidebar-wrapper {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.app-sidebar .menu {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Encabezado de sección (primer nivel) */
.app-sidebar .menu > .menu-item.menu-accordion {
    margin-bottom: 10px;
}

.app-sidebar .menu > .menu-item.menu-accordion > .menu-link {
    background: transparent !important;
    padding: 6px 10px !important;
    margin: 0;
    color: var(--kt-gray-500) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--vw-radius-sm);
}

.app-sidebar .menu > .menu-item.menu-accordion > .menu-link .menu-title,
.app-sidebar .menu > .menu-item.menu-accordion > .menu-link .menu-icon i,
.app-sidebar .menu > .menu-item.menu-accordion > .menu-link .menu-arrow:after {
    color: var(--kt-gray-500) !important;
    font-weight: 600;
}

.app-sidebar .menu > .menu-item.menu-accordion > .menu-link .menu-icon {
    width: 22px;
    margin-right: 6px;
}

.app-sidebar .menu > .menu-item.menu-accordion > .menu-link .menu-icon i {
    font-size: 14px !important;
}

.app-sidebar .menu > .menu-item.menu-accordion > .menu-link:hover .menu-title,
.app-sidebar .menu > .menu-item.menu-accordion > .menu-link:hover .menu-icon i {
    color: var(--kt-gray-800) !important;
}

/* Ítems de segundo nivel */
.app-sidebar .menu-sub-accordion {
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
}

.app-sidebar .menu-sub-indention .menu-sub:not([data-popper-placement]) {
    margin-left: 0 !important;
}

.app-sidebar .menu-sub-accordion .menu-item {
    padding: 0 !important;
    margin-bottom: 1px;
}

.app-sidebar .menu-sub-accordion .menu-link {
    padding: 7px 10px 7px 38px !important;
    border-radius: var(--vw-radius) !important;
    font-size: 13.5px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.app-sidebar .menu-sub-accordion .menu-link .menu-title {
    color: var(--kt-gray-700) !important;
    font-weight: 500;
}

.app-sidebar .menu-sub-accordion .menu-link .menu-bullet {
    display: none;
}

.app-sidebar .menu-sub-accordion .menu-link:hover {
    background-color: var(--kt-gray-100) !important;
}

.app-sidebar .menu-sub-accordion .menu-link:hover .menu-title {
    color: var(--kt-gray-900) !important;
}

.app-sidebar .menu-sub-accordion .menu-link.active {
    background-color: var(--kt-primary-light) !important;
    position: relative;
}

.app-sidebar .menu-sub-accordion .menu-link.active .menu-title {
    color: var(--kt-primary) !important;
    font-weight: 600;
}

.app-sidebar .menu-sub-accordion .menu-link.active::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 999px;
    background: var(--kt-primary);
}

.app-sidebar .menu .badge-circle {
    height: 18px;
    min-width: 18px;
    width: auto;
    padding: 0 5px;
    font-size: 10.5px;
    border-radius: 999px;
}

/* Sidebar minimizado (desktop) */
@media (min-width: 992px) {
    [data-kt-app-sidebar-minimize="on"]:not([data-kt-app-sidebar-hoverable="true"]) .app-sidebar .menu-sub-accordion,
    [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"] .app-sidebar:not(:hover) .menu-sub-accordion {
        display: none;
    }

    [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"] .app-sidebar:not(:hover) .app-sidebar-logo {
        justify-content: center !important;
        padding: 0 !important;
    }

    [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"] .app-sidebar:not(:hover) .menu > .menu-item.menu-accordion > .menu-link {
        justify-content: center;
    }

    [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"] .app-sidebar:not(:hover) .menu > .menu-item.menu-accordion > .menu-link .menu-icon i {
        font-size: 18px !important;
    }
}

/* Drawer mobile */
@media (max-width: 991.98px) {
    .app-sidebar.drawer {
        box-shadow: var(--vw-shadow-lg) !important;
    }

    .drawer-overlay {
        background-color: rgba(23, 23, 28, 0.32) !important;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

/* ---------------------------------------------------------------
 * 5. Toolbar / título de página
 * ------------------------------------------------------------- */
.app-toolbar {
    padding-top: 24px !important;
    padding-bottom: 12px !important;
    height: auto !important;
}

.app-toolbar .app-container {
    flex-wrap: wrap;
    gap: 12px;
}

.app-toolbar .page-heading {
    font-size: 1.375rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em;
    color: var(--kt-gray-900) !important;
}

.app-toolbar .breadcrumb {
    font-size: 12.5px !important;
    padding-top: 4px !important;
}

.app-toolbar .breadcrumb .breadcrumb-item,
.app-toolbar .breadcrumb .breadcrumb-item a {
    color: var(--kt-gray-500) !important;
}

.app-toolbar .breadcrumb .breadcrumb-item a:hover {
    color: var(--kt-primary) !important;
}

.app-toolbar .breadcrumb .breadcrumb-item .bullet {
    width: 3px !important;
    height: 3px !important;
    border-radius: 999px;
}

.app-content {
    padding-top: 8px;
    padding-bottom: 32px;
}

/* Vistas que anidan su propio app-content/app-container dentro del layout */
#kt_app_content_container.app-container .app-content {
    padding: 0 !important;
}

#kt_app_content_container.app-container .app-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-footer {
    border-top: 1px solid var(--vw-border);
    font-size: 12.5px;
}

/* ---------------------------------------------------------------
 * 6. Cards
 * ------------------------------------------------------------- */
.card {
    border: 1px solid var(--vw-border) !important;
    border-radius: var(--vw-radius-lg) !important;
    box-shadow: var(--vw-shadow-sm) !important;
}

.card.border-0,
.card.shadow-none {
    box-shadow: none !important;
}

.card .card-header {
    min-height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--vw-border) !important;
    border-top-left-radius: var(--vw-radius-lg) !important;
    border-top-right-radius: var(--vw-radius-lg) !important;
}

.card .card-header .card-title,
.card .card-header .card-title h3,
.card .card-header .card-title .card-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--kt-gray-900);
}

.card .card-body {
    padding: 20px;
}

.card .card-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--vw-border) !important;
    background: var(--vw-surface-muted);
    border-bottom-left-radius: var(--vw-radius-lg) !important;
    border-bottom-right-radius: var(--vw-radius-lg) !important;
}

/* ---------------------------------------------------------------
 * 7. Botones
 * ------------------------------------------------------------- */
.btn {
    border-radius: var(--vw-radius) !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    padding: 0.6rem 1.05rem;
    font-size: 13.5px;
}

.btn.btn-sm:not(.btn-icon) {
    padding: 0.4rem 0.8rem !important;
    font-size: 12.5px !important;
}

.btn.btn-lg:not(.btn-icon) {
    padding: 0.75rem 1.4rem !important;
    font-size: 14.5px !important;
}

.btn:focus-visible {
    box-shadow: var(--vw-ring) !important;
}

.btn.btn-primary {
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn.btn-light,
.btn.btn-secondary {
    background-color: var(--vw-surface);
    border: 1px solid var(--vw-border-strong) !important;
    color: var(--kt-gray-800);
    box-shadow: var(--vw-shadow-sm);
}

.btn.btn-light:hover:not(.btn-active),
.btn.btn-secondary:hover:not(.btn-active),
.btn.btn-light.active,
.btn.btn-light.show {
    background-color: var(--kt-gray-100) !important;
    color: var(--kt-gray-900) !important;
}

.btn.btn-light i,
.btn.btn-secondary i {
    color: var(--kt-gray-600);
}

.btn.btn-icon {
    border-radius: var(--vw-radius) !important;
}

.btn.btn-icon.btn-sm,
.btn.btn-icon.btn-sm.w-30px {
    height: 30px;
    width: 30px;
}

.btn-close:focus {
    box-shadow: var(--vw-ring);
}

/* ---------------------------------------------------------------
 * 8. Formularios
 * ------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--vw-radius) !important;
    font-size: 14px;
    font-weight: 400;
    padding: 0.6rem 0.85rem;
    box-shadow: var(--vw-shadow-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.form-select {
    padding-right: 2.5rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kt-primary) !important;
    box-shadow: var(--vw-ring) !important;
}

.form-control.form-control-sm,
.form-select.form-select-sm {
    font-size: 13px;
    padding: 0.42rem 0.7rem;
    border-radius: var(--vw-radius-sm) !important;
}

.form-select.form-select-sm {
    padding-right: 2.2rem;
}

/* Variante "solid" de Metronic: queda como input claro con borde */
.form-control.form-control-solid,
.form-select.form-select-solid {
    background-color: var(--vw-surface);
    border: 1px solid var(--kt-input-border-color);
    color: var(--kt-input-color);
}

.form-control.form-control-solid:focus,
.form-control.form-control-solid.active,
.form-select.form-select-solid:focus {
    background-color: var(--vw-surface) !important;
}

.form-control.form-control-solid::placeholder {
    color: var(--kt-input-placeholder-color);
}

.form-control.bg-transparent {
    background-color: var(--vw-surface) !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--kt-danger) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.14) !important;
}

.form-label,
.col-form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kt-gray-800);
    margin-bottom: 6px;
}

.form-text,
.invalid-feedback {
    font-size: 12.5px;
}

.input-group-text {
    border-radius: var(--vw-radius);
    font-size: 13.5px;
}

.form-check-input {
    border-radius: 5px;
}

.form-check.form-check-solid .form-check-input:not(:checked) {
    background-color: var(--vw-surface);
    border: 1px solid var(--vw-check-border);
}

.form-switch .form-check-input,
.form-check.form-switch .form-check-input {
    border-radius: 999px;
}

.form-check-label {
    font-size: 13.5px;
    color: var(--kt-gray-700);
}

/* Select2 */
.select2-container--bootstrap5 .select2-selection {
    border-radius: var(--vw-radius) !important;
    box-shadow: var(--vw-shadow-sm);
}

.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5.select2-container--open .select2-selection {
    border-color: var(--kt-primary) !important;
    box-shadow: var(--vw-ring) !important;
}

.select2-container--bootstrap5 .select2-dropdown {
    border-radius: var(--vw-radius) !important;
    border: 1px solid var(--vw-border) !important;
    box-shadow: var(--vw-shadow-lg) !important;
}

/* Flatpickr */
.flatpickr-calendar {
    border-radius: var(--vw-radius-lg) !important;
    border: 1px solid var(--vw-border) !important;
    box-shadow: var(--vw-shadow-lg) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--kt-primary) !important;
    border-color: var(--kt-primary) !important;
}

/* ---------------------------------------------------------------
 * 9. Tablas
 * ------------------------------------------------------------- */
.table {
    font-size: 13.5px;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--kt-table-border-color);
}

.table thead th,
.table thead td,
.table tr.fw-bold.text-muted th,
.table tr.text-muted th {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kt-gray-500) !important;
    white-space: nowrap;
}

.table.table-row-dashed tr {
    border-bottom-style: solid !important;
    border-bottom-color: var(--kt-table-border-color) !important;
}

.table.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--vw-hover);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------
 * 10. Badges, alerts, symbols
 * ------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 500;
    font-size: 11.5px;
    padding: 0.32em 0.7em;
    letter-spacing: 0;
}

.badge.badge-circle,
.badge.badge-square {
    padding: 0;
}

.badge.badge-light {
    background-color: var(--kt-gray-100);
    color: var(--kt-gray-700);
}

.badge.badge-light-secondary {
    background-color: var(--kt-gray-100);
    color: var(--kt-gray-600);
}

.alert {
    border-radius: var(--vw-radius-lg);
    border: 1px solid transparent;
    font-size: 13.5px;
}

.alert.alert-primary {
    background-color: var(--kt-primary-light);
    border-color: #e0e7ff;
    color: #3730a3;
}

.alert.alert-success {
    background-color: var(--kt-success-light);
    border-color: #d1fadf;
    color: #05603a;
}

.alert.alert-danger {
    background-color: var(--kt-danger-light);
    border-color: #fee4e2;
    color: #b42318;
}

.alert.alert-warning {
    background-color: var(--kt-warning-light);
    border-color: #fef0c7;
    color: #b54708;
}

.alert.alert-info {
    background-color: var(--kt-info-light);
    border-color: #ebe9fe;
    color: #5925dc;
}

.symbol .symbol-label {
    border-radius: var(--vw-radius);
}

.symbol.symbol-circle .symbol-label,
.symbol.symbol-circle > img {
    border-radius: 999px;
}

/* ---------------------------------------------------------------
 * 11. Menús desplegables, dropdowns, modales, tabs
 * ------------------------------------------------------------- */
.menu-sub-dropdown,
.dropdown-menu {
    border: 1px solid var(--vw-border) !important;
    border-radius: var(--vw-radius-lg) !important;
    box-shadow: var(--vw-shadow-lg) !important;
}

.menu-sub-dropdown .menu-link,
.dropdown-menu .dropdown-item {
    border-radius: var(--vw-radius-sm) !important;
    font-size: 13.5px;
    font-weight: 500;
}

.dropdown-menu {
    padding: 6px;
}

.modal-content {
    border: 1px solid var(--vw-border);
    border-radius: 16px !important;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.24) !important;
}

.modal-header {
    padding: 18px 22px;
}

.modal-header .modal-title,
.modal-header h2,
.modal-header h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 22px;
}

.modal-footer {
    padding: 14px 22px;
    background: var(--vw-surface-muted);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.modal-backdrop.show {
    opacity: 1;
    background-color: var(--vw-backdrop);
}

.nav-line-tabs {
    border-bottom-color: var(--vw-border) !important;
}

.nav-line-tabs .nav-item .nav-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kt-gray-600);
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    color: var(--kt-gray-900);
    border-bottom-color: var(--kt-primary);
}

.nav-pills .nav-link {
    border-radius: var(--vw-radius);
    font-weight: 500;
}

.pagination .page-item .page-link {
    border-radius: var(--vw-radius-sm);
    font-weight: 500;
}

.tooltip .tooltip-inner {
    border-radius: var(--vw-radius-sm);
    font-size: 12px;
    padding: 6px 9px;
}

.tooltip-inverse .tooltip-inner {
    background-color: var(--kt-gray-900);
}

/* SweetAlert2 */
.swal2-popup {
    border-radius: 16px !important;
    font-family: var(--vw-font) !important;
    padding: 1.6em 1.4em !important;
}

.swal2-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--kt-gray-900) !important;
}

.swal2-styled {
    border-radius: var(--vw-radius) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 0.6rem 1.1rem !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--kt-primary) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--vw-surface) !important;
    color: var(--kt-gray-800) !important;
    border: 1px solid var(--vw-border-strong) !important;
}

.swal2-styled:focus {
    box-shadow: var(--vw-ring) !important;
}

/* FullCalendar */
.fc .fc-button-primary {
    background-color: var(--vw-surface) !important;
    border: 1px solid var(--vw-border-strong) !important;
    color: var(--kt-gray-800) !important;
    border-radius: var(--vw-radius) !important;
    box-shadow: var(--vw-shadow-sm) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--kt-gray-100) !important;
}

/* FullCalendar calcula el ancho antes de que aparezca el scroll vertical */
.fc .fc-col-header,
.fc .fc-daygrid-body,
.fc .fc-scrollgrid-sync-table,
.fc .fc-timegrid-body,
.fc .fc-timegrid-body table {
    width: 100% !important;
}

/* Overlays de carga */
.lw-loading-overlay {
    background: var(--vw-loading-overlay) !important;
}

.lw-spinner {
    border-color: rgba(79, 70, 229, 0.18) !important;
    border-top-color: var(--kt-primary) !important;
}

#global-loader {
    background: linear-gradient(90deg, #4f46e5, #7a5af8) !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------
 * 12. Mobile
 * ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .app-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .app-header .app-container {
        gap: 8px;
    }

    .app-toolbar {
        padding-top: 18px !important;
        padding-bottom: 8px !important;
    }

    .app-toolbar .page-heading {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 14px;
    }

    .card .card-header {
        min-height: 50px;
        padding: 0 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card .card-header .card-toolbar {
        margin: 8px 0;
    }

    .card .card-body {
        padding: 16px;
    }

    .card .card-footer {
        padding: 12px 16px;
    }

    /* Headers de card con filtros y acciones: pasan a varias líneas */
    .card .card-header {
        height: auto;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .card .card-header .d-flex {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .card .card-header .d-flex > .position-relative {
        flex: 1 1 100%;
    }

    .card .card-header input[style*="min-width"],
    .card .card-header select[style*="min-width"] {
        min-width: 0 !important;
        width: 100%;
    }

    /* Filas de KPIs (col-md-3 con una card): 2 por fila en lugar de 1 */
    .row > .col-md-3:has(> .card),
    .row > .col-md-4:has(> .card.vw-kpi) {
        flex: 0 0 auto;
        width: 50%;
    }

    .row > .col-md-3:has(> .card) > .card .card-body {
        padding: 14px 12px;
    }

    .row > .col-md-3:has(> .card) > .card .fs-2,
    .row > .col-md-3:has(> .card) > .card .fs-2x {
        font-size: 1.15rem !important;
    }

    .row > .col-md-3:has(> .card) > .card .fs-1 {
        font-size: 1.25rem !important;
    }

    /* Acciones de página: ocupan el ancho y bajan bajo el título */
    .app-toolbar .app-container > .d-flex:last-child {
        width: 100%;
        flex-wrap: wrap;
    }

    .app-toolbar .app-container > .d-flex:last-child:empty {
        display: none !important;
    }

    /* Inputs a 16px para evitar el zoom automático de iOS en el login */
    .vw-auth .form-control {
        font-size: 16px !important;
    }

    .modal-dialog:not(.modal-fullscreen) {
        margin: 12px;
    }

    .modal-dialog.modal-dialog-centered {
        min-height: calc(100% - 24px);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Tablas que no tienen wrapper responsive: scroll horizontal */
    .card-body > .table:not(.table-fixed),
    .card-body > div > .table:not(.table-fixed) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .table td,
    .table th {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #push-banner {
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------
 * 13. Login / páginas en blanco
 * ------------------------------------------------------------- */
.vw-auth {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(79, 70, 229, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(122, 90, 248, 0.10), transparent 60%),
        var(--vw-bg);
    padding: 24px 16px;
}

.vw-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--vw-surface);
    border: 1px solid var(--vw-border);
    border-radius: 16px;
    box-shadow: var(--vw-shadow-lg);
    padding: 32px 28px;
}

.vw-auth-card .form-control {
    padding: 0.7rem 0.9rem;
}

@media (max-width: 575.98px) {
    .vw-auth-card {
        padding: 28px 20px;
    }
}

/* ---------------------------------------------------------------
 * 14. Drawer del cronómetro
 * ------------------------------------------------------------- */
.tt-drawer:not(.tt-drawer-open) {
    box-shadow: none !important;
}

.tt-drawer.tt-drawer-open {
    box-shadow: var(--vw-shadow-lg) !important;
    border-left: 1px solid var(--vw-border);
}

/* ---------------------------------------------------------------
 * 15. Selector de tema (menú de usuario)
 * ------------------------------------------------------------- */
.vw-theme-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--kt-gray-100);
    border: 1px solid var(--vw-border);
    border-radius: var(--vw-radius);
}

.vw-theme-switch .menu-link {
    flex: 1 1 0;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px !important;
    font-size: 12px !important;
    font-weight: 500;
    color: var(--kt-gray-600) !important;
    background: transparent !important;
    border-radius: var(--vw-radius-sm) !important;
}

.vw-theme-switch .menu-link i {
    font-size: 13px;
    color: inherit;
}

.vw-theme-switch .menu-link:hover {
    color: var(--kt-gray-900) !important;
}

.vw-theme-switch .menu-link.active {
    color: var(--kt-gray-900) !important;
    background: var(--vw-surface) !important;
    box-shadow: var(--vw-shadow-sm);
}

/* ---------------------------------------------------------------
 * 16. Ajustes de modo oscuro
 * ------------------------------------------------------------- */
html:not([data-theme="dark"]) .vw-logo-dark,
[data-theme="dark"] .vw-logo-light {
    display: none !important;
}

[data-theme="dark"] body {
    background-color: var(--vw-bg);
}

[data-theme="dark"] .app-header .vw-avatar {
    box-shadow: none;
}

[data-theme="dark"] .btn.btn-primary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .btn.btn-dark {
    color: #16161a;
}

[data-theme="dark"] .alert.alert-primary {
    border-color: #2e2c5c;
    color: #c7d2fe;
}

[data-theme="dark"] .alert.alert-success {
    border-color: #14432c;
    color: #a6f4c5;
}

[data-theme="dark"] .alert.alert-danger {
    border-color: #55201d;
    color: #fecdca;
}

[data-theme="dark"] .alert.alert-warning {
    border-color: #4a3412;
    color: #fedf89;
}

[data-theme="dark"] .alert.alert-info {
    border-color: #3a2f6b;
    color: #d9d6fe;
}

[data-theme="dark"] .bg-white {
    background-color: var(--vw-surface) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--kt-modal-content-bg);
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header {
    border-color: var(--vw-border);
}

[data-theme="dark"] .swal2-popup {
    background: #1a1a1f !important;
    color: var(--kt-gray-700) !important;
}

[data-theme="dark"] .swal2-html-container {
    color: var(--kt-gray-700) !important;
}

[data-theme="dark"] .select2-container--bootstrap5 .select2-dropdown {
    background-color: #1a1a1f;
}

[data-theme="dark"] .select2-container--bootstrap5 .select2-dropdown .select2-results__option {
    color: var(--kt-gray-800);
}

[data-theme="dark"] .flatpickr-calendar {
    background: #1a1a1f !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-weekday,
[data-theme="dark"] .flatpickr-day {
    color: var(--kt-gray-800) !important;
    fill: var(--kt-gray-800) !important;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
    color: var(--kt-gray-500) !important;
}

[data-theme="dark"] .flatpickr-day:hover {
    background: var(--kt-gray-200) !important;
}

[data-theme="dark"] .fc {
    --fc-border-color: var(--vw-border);
    --fc-page-bg-color: var(--vw-surface);
    --fc-neutral-bg-color: var(--kt-gray-100);
    --fc-today-bg-color: rgba(99, 102, 241, 0.1);
    --fc-list-event-hover-bg-color: var(--kt-gray-100);
}

[data-theme="dark"] .tt-container .symbol-label.bg-dark {
    background-color: var(--vw-surface) !important;
}

[data-theme="dark"] ::selection {
    background: rgba(129, 140, 248, 0.3);
}