/* =====================================================================
   ERPUIX — Sistema de diseño del ERP
   ---------------------------------------------------------------------
   Un solo archivo para todas las pantallas:
     · Site.Master lo carga al final de sus hojas de estilo.
     · assets/newstyle.css lo importa (páginas sin Master).
     · ERPModern.css / dlg/ERPModernDlg.css usan sus variables.

   Color de marca: índigo por defecto; cada compañía puede tener el suyo
   en la tabla dbo.siTemaUI (lo aplica /TemaUI.ashx).
   ===================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─────────────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────────────── */
:root {
    /* Marca: índigo por defecto. Si la compañía tiene color en la tabla
       dbo.siTemaUI, /TemaUI.ashx redefine estas variables (ver
       App_Code/ErpTemaUI.cs y erpuixv2/sql/siTemaUI.sql). */
    --ux-brand-50: #eef1fd;
    --ux-brand-100: #dde2fb;
    --ux-brand-200: #bbc5f7;
    --ux-brand-500: #5169e9;
    --ux-brand-600: #3b55e6;
    --ux-brand-700: #3046bd;
    --ux-brand-800: #27389c;

    /* Neutros (carbón del logo) */
    --ux-gray-25: #fcfcfd;
    --ux-gray-50: #f8f9fb;
    --ux-gray-100: #f1f3f6;
    --ux-gray-200: #e4e7ec;
    --ux-gray-300: #d0d5dd;
    --ux-gray-400: #98a2b3;
    --ux-gray-500: #667085;
    --ux-gray-600: #475467;
    --ux-gray-700: #344054;
    --ux-gray-800: #1d2939;
    --ux-gray-900: #101828;

    /* Estados */
    --ux-success: #079455;
    --ux-success-bg: #ecfdf3;
    --ux-warning: #dc6803;
    --ux-warning-bg: #fffaeb;
    --ux-info: #1570ef;
    --ux-info-bg: #eff8ff;
    --ux-danger: #b42318;
    --ux-danger-bg: #fef3f2;

    /* Semánticos */
    --ux-primary: var(--ux-brand-600);
    --ux-primary-hover: var(--ux-brand-700);
    --ux-primary-soft: var(--ux-brand-50);
    --ux-focus-ring: 0 0 0 3px rgba(59, 85, 230, .18);
    --ux-bg: #f4f5f7;
    --ux-surface: #ffffff;
    --ux-border: var(--ux-gray-200);
    --ux-border-strong: var(--ux-gray-300);
    --ux-text: var(--ux-gray-900);
    --ux-text-2: var(--ux-gray-700);
    --ux-muted: var(--ux-gray-500);

    /* Barra lateral */
    --ux-side-bg: #16181d;
    --ux-side-bg-2: #1e2127;
    --ux-side-text: #b8bec8;
    --ux-side-text-strong: #ffffff;
    --ux-side-muted: #6b7280;
    --ux-side-hover: rgba(255, 255, 255, .06);
    --ux-side-active: rgba(59, 85, 230, .16);

    /* Medidas */
    --ux-side-w: 248px;
    --ux-side-w-xs: 64px;
    --ux-header-h: 56px;
    --ux-control-h: 36px;
    --ux-radius-sm: 6px;
    --ux-radius: 8px;
    --ux-radius-lg: 12px;
    --ux-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --ux-font-size: 13px;
    --ux-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --ux-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --ux-shadow-md: 0 8px 16px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);
    --ux-shadow-lg: 0 20px 32px -8px rgba(16, 24, 40, .18), 0 6px 12px -4px rgba(16, 24, 40, .06);

    /* Compatibilidad con variables usadas en pantallas existentes */
    --accent: var(--ux-primary);
    --accent-hover: var(--ux-primary-hover);
    --accent-light: var(--ux-side-active);
    --text-primary: var(--ux-text);
    --text-muted: var(--ux-muted);
    --border: var(--ux-border);
    --card-bg: var(--ux-surface);
    --content-bg: var(--ux-bg);
    --success: var(--ux-success);
    --warning: var(--ux-warning);
    --danger: var(--ux-danger);
    --radius: var(--ux-radius);
    --radius-lg: var(--ux-radius-lg);
    --font: var(--ux-font);
    --shadow-sm: var(--ux-shadow-sm);
    --shadow: var(--ux-shadow-md);
    --sidebar-w: var(--ux-side-w);
    --header-h: var(--ux-header-h);
    --erp-accent: var(--ux-primary);
    --erp-accent-hover: var(--ux-primary-hover);
    --erp-border: var(--ux-border);
    --erp-bg: var(--ux-bg);
    --erp-card: var(--ux-surface);
    --erp-text: var(--ux-text);
    --erp-muted: var(--ux-muted);
    --erp-radius: var(--ux-radius);
    --erp-font: var(--ux-font);
}

/* ─────────────────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────────────────── */
html {
    -webkit-text-size-adjust: 100%;
    font-weight: 400;
}

body {
    font-family: var(--ux-font) !important;
    font-size: var(--ux-font-size) !important;
    /* assets/css/bootstrap.css define body { font-weight: 700 } */
    font-weight: 400 !important;
    line-height: 1.5;
    color: var(--ux-text) !important;
    background: var(--ux-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

body, button, input, select, textarea, table {
    font-family: var(--ux-font);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ux-font);
    color: var(--ux-text);
    font-weight: 600;
    letter-spacing: -.01em;
}

a {
    color: var(--ux-primary);
}

    a:hover, a:focus {
        color: var(--ux-primary-hover);
    }

hr {
    border-top-color: var(--ux-border);
}

::selection {
    background: var(--ux-brand-100);
    color: var(--ux-gray-900);
}

:focus-visible {
    outline: 2px solid var(--ux-brand-500);
    outline-offset: 2px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ux-gray-300) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--ux-gray-300);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--ux-gray-400);
    }

::-webkit-scrollbar-track {
    background: transparent;
}

.text-muted {
    color: var(--ux-muted) !important;
}

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

.text-success {
    color: var(--ux-success) !important;
}

.text-danger {
    color: var(--ux-danger) !important;
}

.text-warning {
    color: var(--ux-warning) !important;
}

.text-info {
    color: var(--ux-info) !important;
}

.text-semibold, .fw-bold {
    font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   3. TARJETAS / PANELES (Limitless .panel, .card, .erp-card)
   ───────────────────────────────────────────────────────────────────── */
.panel, .panel-flat, .card, .erp-card {
    background: var(--ux-surface) !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg) !important;
    box-shadow: var(--ux-shadow-xs) !important;
    margin-bottom: 16px !important;
}

    .panel > .panel-heading, .card > .card-header {
        background: transparent !important;
        border-bottom: 1px solid var(--ux-border) !important;
        border-radius: var(--ux-radius-lg) var(--ux-radius-lg) 0 0 !important;
        padding: 14px 20px !important;
        color: var(--ux-text) !important;
    }

.panel-title, .card-title, .panel-heading h5, .panel-heading h6 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ux-text) !important;
}

.panel-body, .card-body {
    padding: 20px !important;
}

.panel-footer, .card-footer {
    background: var(--ux-gray-50) !important;
    border-top: 1px solid var(--ux-border) !important;
    border-radius: 0 0 var(--ux-radius-lg) var(--ux-radius-lg) !important;
    padding: 12px 20px !important;
}

/* Paneles vacíos (separadores heredados) no ocupan espacio */
.panel:empty, .panel-flat:empty {
    display: none !important;
}

/*
   Patrón común en las pantallas: un panel externo que envuelve toda la
   página y dentro otros paneles. El externo se vuelve transparente para
   que las tarjetas internas no queden "caja dentro de caja".
*/
.content > .panel:has(.panel),
.content > div > .panel:has(> .panel-body > .panel),
.erp-modern-page > .panel:has(.panel),
.erp-modern-page > .panel:has(.erp-card) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

    .content > .panel:has(.panel) > .panel-body,
    .content > div > .panel:has(> .panel-body > .panel) > .panel-body,
    .erp-modern-page > .panel:has(.panel) > .panel-body,
    .erp-modern-page > .panel:has(.erp-card) > .panel-body {
        padding: 0 !important;
    }

        .content > .panel:has(.panel) > .panel-body > br:first-child,
        .erp-modern-page > .panel > .panel-body > br:first-child {
            display: none;
        }

/* Una tarjeta .erp-card dentro de un panel no necesita otro borde */
.panel .erp-card {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────────
   4. TÍTULO DE PANTALLA (ltitulo / .erp-title-label)
   ───────────────────────────────────────────────────────────────────── */
.erp-title-label,
span[id$="_ltitulo"],
span[id$="_lTitulo"] {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    min-height: 0 !important;
    margin: 4px 0 16px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ux-text) !important;
    font-family: var(--ux-font) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.02em;
}

    .erp-title-label::before,
    span[id$="_ltitulo"]::before,
    span[id$="_lTitulo"]::before {
        content: "";
        position: static !important;
        flex: 0 0 4px;
        width: 4px !important;
        height: 24px !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: var(--ux-primary) !important;
        box-shadow: none !important;
    }

    .erp-title-label + hr,
    span[id$="_ltitulo"] + hr {
        display: none;
    }

/* ─────────────────────────────────────────────────────────────────────
   5. FORMULARIOS
   ───────────────────────────────────────────────────────────────────── */
label, .control-label, .dxflCaption, [class*="dxflCaption_"] {
    color: var(--ux-text-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.form-group {
    margin-bottom: 14px;
}

    .form-group > label, .form-group > .control-label {
        display: block;
        margin-bottom: 6px;
    }

.form-control,
input[type="text"].form-control,
select.form-control {
    height: var(--ux-control-h);
    padding: 7px 11px;
    font-size: 13px;
    color: var(--ux-text);
    background: var(--ux-surface);
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-xs);
    transition: border-color .15s, box-shadow .15s;
}

textarea.form-control {
    height: auto;
    min-height: 80px;
}

.form-control:focus {
    border-color: var(--ux-brand-500) !important;
    box-shadow: var(--ux-focus-ring) !important;
    outline: 0;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background: var(--ux-gray-50);
    color: var(--ux-gray-600);
}

.form-control::placeholder {
    color: var(--ux-gray-400);
}

/* DevExpress aplica CssClass="form-control" a su <table>: sin doble caja */
table.form-control[class*="dxe"],
table.form-control.dxeTextBoxSys,
table.form-control.dxeButtonEditSys {
    height: auto !important;
    padding: 0 !important;
    box-shadow: none;
}

/* Ancho de los editores en formularios: DevExpress deja su ancho por defecto
   (~170px) aunque el campo tenga CssClass="form-control", y en modo edición
   los campos quedaban angostos. Con form-control ocupan todo el campo; dentro
   de un .form-group sin ancho propio, también. Un ancho fijo puesto a propósito
   (style="width:…") se respeta en el segundo caso. */
table.form-control[class*="dxe"]:not([class*="dxeCheckBox"]):not([class*="dxeRadioButtonList"]) {
    width: 100% !important;
    max-width: 100%;
}

:is(.form-group, .cp-field, .rp-field, .rl-field) > table:is(.dxeTextBoxSys, .dxeButtonEditSys, [class*="dxeMemo"], [class*="dxeSpinEdit"]):not([style*="width"]) {
    width: 100%;
    max-width: 100%;
}

    table.form-control[class*="dxe"] td.dxic,
    table.form-control[class*="dxe"] input[class*="dxeEditArea"],
    table.form-control[class*="dxe"] textarea {
        width: 100% !important;
    }

/* Editor sin tema (EnableTheming="false"), p. ej. el Número de Facturas: mismo aspecto que los demás */
table.dxeTextBoxSys.form-control:not([class*="dxeTextBox_"]) {
    background: var(--ux-gray-50) !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-radius) !important;
    border-collapse: separate !important;
    overflow: hidden;
}

    table.dxeTextBoxSys.form-control:not([class*="dxeTextBox_"]) td {
        padding: 0 10px !important;
        height: calc(var(--ux-control-h) - 2px);
    }

    table.dxeTextBoxSys.form-control:not([class*="dxeTextBox_"]) input {
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0;
        font-family: var(--ux-font) !important;
        font-size: 13px !important;
        color: var(--ux-text) !important;
    }

.input-group-addon {
    background: var(--ux-gray-50);
    border-color: var(--ux-border-strong);
    color: var(--ux-muted);
    border-radius: var(--ux-radius);
}

.has-error .form-control {
    border-color: var(--ux-danger) !important;
}

.help-block, .validation-message, span[style*="color:Red"], span[style*="color: red"] {
    font-size: 12px;
}

/* Editores DevExpress (TextBox, ComboBox, DateEdit, SpinEdit, Memo, ButtonEdit) */
[class*="dxeTextBox_"],
[class*="dxeButtonEdit_"],
[class*="dxeMemo_"],
[class*="dxeTextBoxSys"][class*="dxeTextBox"] {
    background: var(--ux-surface) !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-xs);
    border-collapse: separate !important;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

    [class*="dxeTextBox_"] td.dxic,
    [class*="dxeButtonEdit_"] td.dxic {
        padding: 0 10px !important;
        height: calc(var(--ux-control-h) - 2px);
    }

    [class*="dxeTextBox_"] input,
    [class*="dxeButtonEdit_"] input,
    [class*="dxeMemo_"] textarea,
    input[class*="dxeEditArea_"] {
        border: 0 !important;
        box-shadow: none !important;
        font-family: var(--ux-font) !important;
        font-size: 13px !important;
        color: var(--ux-text) !important;
        background: transparent !important;
    }

    [class*="dxeFocused_"],
    [class*="dxeTextBox_"]:focus-within,
    [class*="dxeButtonEdit_"]:focus-within,
    [class*="dxeMemo_"]:focus-within {
        border-color: var(--ux-brand-500) !important;
        box-shadow: var(--ux-focus-ring) !important;
    }

[class*="dxeDisabled_"],
[class*="dxeReadOnly_"] {
    background: var(--ux-gray-50) !important;
}

    [class*="dxeDisabled_"] input {
        color: var(--ux-gray-500) !important;
    }

[class*="dxeButtonEditButton_"],
td[class*="dxeButtonEditButton_"],
[class*="dxeSpinIncButton_"], [class*="dxeSpinDecButton_"] {
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid var(--ux-border) !important;
    padding: 0 10px !important;
}

    [class*="dxeButtonEditButton_"]:hover {
        background: var(--ux-gray-50) !important;
    }

[class*="dxeNullText_"] input, [class*="dxeNullTextCss_"] {
    color: var(--ux-gray-400) !important;
}

[class*="dxeInvalid_"], [class*="dxeInvalid"] {
    border-color: var(--ux-danger) !important;
}

[class*="dxeErrorCell_"], [class*="dxeErrorFrame_"] {
    color: var(--ux-danger) !important;
    font-size: 12px !important;
}

/* Listas desplegables de DevExpress */
[class*="dxeDropDownWindow_"],
[class*="dxeListBox_"],
[class*="dxpc-ddSys"] .dxpc-mainDiv {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-md) !important;
    overflow: hidden;
}

[class*="dxeListBoxItem_"] {
    padding: 7px 12px !important;
    font-size: 13px !important;
}

[class*="dxeListBoxItemHover_"] {
    background: var(--ux-gray-50) !important;
}

[class*="dxeListBoxItemSelected_"] {
    background: var(--ux-primary-soft) !important;
    color: var(--ux-brand-700) !important;
}

/* Calendario */
[class*="dxeCalendar_"] {
    border: 0 !important;
    font-family: var(--ux-font) !important;
}

[class*="dxeCalendarSelected_"] {
    background: var(--ux-primary) !important;
    color: #fff !important;
    border-radius: var(--ux-radius-sm);
}

[class*="dxeCalendarToday_"] {
    outline: 1px solid var(--ux-brand-500);
    border-radius: var(--ux-radius-sm);
}

/* ─────────────────────────────────────────────────────────────────────
   6. BOTONES
   ───────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--ux-control-h);
    padding: 7px 14px;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-xs);
    text-transform: none;
    letter-spacing: 0;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

    .btn:focus, .btn:active:focus {
        outline: 0 !important;
        box-shadow: var(--ux-focus-ring) !important;
    }

.btn-xs, .btn-sm {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px !important;
}

.btn-lg {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px !important;
}

.btn-default, .btn-secondary, .btn-light {
    background: var(--ux-surface) !important;
    color: var(--ux-text-2) !important;
    border: 1px solid var(--ux-border-strong) !important;
}

    .btn-default:hover, .btn-secondary:hover, .btn-light:hover {
        background: var(--ux-gray-50) !important;
        color: var(--ux-text) !important;
    }

.btn-primary, .bg-primary.btn, .btn-danger.btn-primary {
    background: var(--ux-primary) !important;
    border: 1px solid var(--ux-primary) !important;
    color: #fff !important;
}

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

.btn-success {
    background: var(--ux-success) !important;
    border: 1px solid var(--ux-success) !important;
    color: #fff !important;
}

.btn-info {
    background: var(--ux-info) !important;
    border: 1px solid var(--ux-info) !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--ux-warning) !important;
    border: 1px solid var(--ux-warning) !important;
    color: #fff !important;
}

/* Peligro: contorno para no competir con el rojo de marca */
.btn-danger {
    background: var(--ux-surface) !important;
    border: 1px solid #fda29b !important;
    color: var(--ux-danger) !important;
}

    .btn-danger:hover {
        background: var(--ux-danger-bg) !important;
    }

.btn-link {
    box-shadow: none;
    color: var(--ux-primary) !important;
}

.btn:disabled, .btn.disabled {
    opacity: .5;
    box-shadow: none;
}

/* ASPxButton: secundario por defecto. Se excluyen los botones-icono
   (BackColor White + BorderStyle None) que viven dentro de las grillas. */
[class*="dxbButton_"]:not([style*="border-style:None"]):not([style*="border-style: none"]):not(td.dxgv [class*="dxbButton_"]):not([class*="dxgvCommandColumn"] [class*="dxbButton_"]) {
    min-height: var(--ux-control-h);
    background: var(--ux-surface) !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-xs);
    color: var(--ux-text-2) !important;
    font-family: var(--ux-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}

    [class*="dxbButton_"]:not([style*="border-style:None"]):not([style*="border-style: none"]) .dxb {
        padding: 7px 14px !important;
    }

    [class*="dxbButton_"]:not([style*="border-style:None"]):not([style*="border-style: none"]):hover,
    [class*="dxbButtonHover_"] {
        background: var(--ux-gray-50) !important;
        color: var(--ux-text) !important;
    }

    [class*="dxbButton_"]:focus-within,
    [class*="dxbButtonPressed_"] {
        box-shadow: var(--ux-focus-ring) !important;
    }

[class*="dxbButton_"] .dx-vam {
    font-family: var(--ux-font) !important;
}

/* ASPxButton "principal": CssClass btn-primary / erp-btn-primary o
   Text habitual de confirmación.
   :not(#ux-principal) solo suma peso: así le gana a la regla general de
   ASPxButton (fondo blanco), que tiene varios :not(). */
[class*="dxbButton_"].btn-primary:not(#ux-principal),
[class*="dxbButton_"].erp-btn-primary:not(#ux-principal),
[class*="dxbButton_"][id$="_bGuardar"]:not(#ux-principal),
[class*="dxbButton_"][id$="_btGuardar"]:not(#ux-principal),
[class*="dxbButton_"][id$="_bAceptar"]:not(#ux-principal),
[class*="dxbButton_"][id$="_btAprobar"]:not(#ux-principal),
[class*="dxbButton_"][id$="_bBuscar"]:not(#ux-principal),
[class*="dxbButton_"][id$="_btnBuscar"]:not(#ux-principal),
[class*="dxbButton_"][id$="_bProcesar"]:not(#ux-principal),
[class*="dxbButton_"][id$="_bAplicar"]:not(#ux-principal) {
    background: var(--ux-primary) !important;
    border-color: var(--ux-primary) !important;
    color: var(--v2-on-primary, #fff) !important;
}

    [class*="dxbButton_"].btn-primary:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"].erp-btn-primary:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_bGuardar"]:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_btGuardar"]:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_bAceptar"]:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_btAprobar"]:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_bBuscar"]:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_btnBuscar"]:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_bProcesar"]:not(#ux-principal) .dx-vam,
    [class*="dxbButton_"][id$="_bAplicar"]:not(#ux-principal) .dx-vam {
        color: var(--v2-on-primary, #fff) !important;
    }

    [class*="dxbButton_"].btn-primary:not(#ux-principal):hover,
    [class*="dxbButton_"].erp-btn-primary:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_bGuardar"]:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_btGuardar"]:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_bAceptar"]:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_btAprobar"]:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_bBuscar"]:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_btnBuscar"]:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_bProcesar"]:not(#ux-principal):hover,
    [class*="dxbButton_"][id$="_bAplicar"]:not(#ux-principal):hover {
        background: var(--ux-primary-hover) !important;
    }

[class*="dxbDisabled_"] {
    opacity: .5;
}

/* Botones-icono dentro de grillas: limpios, con hover suave */
td.dxgv [class*="dxbButton_"],
td.dxgv [class*="dxbButton_"] .dxb {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--ux-radius-sm) !important;
}

    td.dxgv [class*="dxbButton_"]:hover {
        background-color: var(--ux-gray-100) !important;
    }

/* Muchas pantallas ponen la misma imagen como BackgroundImage y como
   Image-Url del botón: se veía el ícono dos veces, desplazado. Si el
   botón ya tiene su <img>, se quita la imagen de fondo. */
[class*="dxbButton_"]:has(img),
[class*="dxbButton_"]:has(img) .dxb {
    background-image: none !important;
}

/* <input type=submit> de asp:Button sin clase */
input[type="submit"]:not([class]),
input[type="button"]:not([class]),
button:not([class]):not([type="button"]) {
    min-height: var(--ux-control-h);
    padding: 7px 14px;
    background: var(--ux-surface);
    border: 1px solid var(--ux-border-strong);
    border-radius: var(--ux-radius);
    color: var(--ux-text-2);
    font: 600 13px var(--ux-font);
    cursor: pointer;
}

    input[type="submit"]:not([class]):hover,
    input[type="button"]:not([class]):hover {
        background: var(--ux-gray-50);
    }

/* ─────────────────────────────────────────────────────────────────────
   7. BARRA DE ACCIONES (ASPxMenu: Buscar, Agregar, Guardar…)
   ───────────────────────────────────────────────────────────────────── */
.erp-action-menu,
.content [class*="dxmLite_"][id$="_Mmenuu"],
.content [class*="dxmLite_"][id$="_Mmenu"],
.content [class*="dxmLite_"][id$="_mMenu"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

    .erp-action-menu .dxm-main,
    .content [class*="dxmLite_"][id$="_Mmenuu"] .dxm-main {
        display: flex;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .erp-action-menu ul.dx,
    .content [class*="dxmLite_"][id$="_Mmenuu"] ul.dx {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .erp-action-menu .dxm-spacing,
    .erp-action-menu .dxm-separator {
        display: none !important;
    }

    .erp-action-menu .dxm-item,
    .content [class*="dxmLite_"][id$="_Mmenuu"] .dxm-item {
        float: none !important;
        margin: 0 !important;
        background: var(--ux-surface) !important;
        border: 1px solid var(--ux-border-strong) !important;
        border-radius: var(--ux-radius) !important;
        box-shadow: var(--ux-shadow-xs);
        transition: background-color .15s, border-color .15s;
    }

        .erp-action-menu .dxm-item.dxm-hovered,
        .erp-action-menu .dxm-item:hover,
        .content [class*="dxmLite_"][id$="_Mmenuu"] .dxm-item.dxm-hovered {
            background: var(--ux-gray-50) !important;
            border-color: var(--ux-gray-400) !important;
        }

        .erp-action-menu .dxm-item.dxm-selected {
            background: var(--ux-primary-soft) !important;
            border-color: var(--ux-brand-200) !important;
        }

        .erp-action-menu .dxm-item.dxm-disabled {
            opacity: .5;
        }

    .erp-action-menu .dxm-content,
    .content [class*="dxmLite_"][id$="_Mmenuu"] .dxm-content {
        display: flex !important;
        align-items: center;
        gap: 7px;
        height: calc(var(--ux-control-h) - 2px);
        padding: 0 12px !important;
        color: var(--ux-text-2) !important;
        font-family: var(--ux-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

        .erp-action-menu .dxm-content .dx-vam,
        .content [class*="dxmLite_"][id$="_Mmenuu"] .dxm-content .dx-vam {
            color: inherit !important;
        }

    .erp-action-menu img.dxm-image,
    .erp-action-menu .dxm-image img,
    .content [class*="dxmLite_"][id$="_Mmenuu"] img.dxm-image {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        margin: 0 !important;
        object-fit: contain;
    }

/* Menús DevExpress en general (sub-menús, pop-ups) */
[class*="dxmLite_"] .dxm-popup,
[class*="dxmLite_"].dxm-popup {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-md) !important;
    background: var(--ux-surface) !important;
    padding: 4px !important;
}

    [class*="dxmLite_"] .dxm-popup .dxm-item {
        border-radius: var(--ux-radius-sm) !important;
    }

        [class*="dxmLite_"] .dxm-popup .dxm-item.dxm-hovered {
            background: var(--ux-gray-50) !important;
        }

/* ─────────────────────────────────────────────────────────────────────
   8. GRILLAS (ASPxGridView, GridView, .table)
   ───────────────────────────────────────────────────────────────────── */
[class*="dxgvControl_"],
.erp-modern-grid {
    width: 100% !important;
    background: var(--ux-surface) !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg) !important;
    box-shadow: none !important;
    /* visible: las grillas anchas sin barra de desplazamiento no se recortan */
    overflow: visible !important;
    font-family: var(--ux-font) !important;
    font-size: 13px !important;
}

    [class*="dxgvControl_"] [class*="dxgvControl_"] {
        border-radius: var(--ux-radius) !important;
    }

    [class*="dxgvControl_"] > table,
    [class*="dxgvTable_"] {
        border: 0 !important;
        font-family: var(--ux-font) !important;
    }

/* Grilla como único contenido de una tarjeta: la tarjeta es el marco */
.panel-body:has(> [class*="dxgvControl_"]:only-child),
.panel-body:has(> .erp-card:only-child > [class*="dxgvControl_"]:only-child),
.panel-body:has(> div:only-child > .erp-card:only-child > [class*="dxgvControl_"]:only-child) {
    padding: 0 !important;
}

    .panel-body > [class*="dxgvControl_"]:only-child,
    .panel-body > .erp-card:only-child > [class*="dxgvControl_"]:only-child,
    .panel-body > div:only-child > .erp-card:only-child > [class*="dxgvControl_"]:only-child {
        border: 0 !important;
        margin: 0 !important;
    }

/* Encabezados */
[class*="dxgvHeader_"],
[class*="dxgvHeader_"] td,
.erp-modern-grid .dxgvHeader {
    background: var(--ux-gray-50) !important;
    border-color: var(--ux-border) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    color: var(--ux-gray-600) !important;
    font-family: var(--ux-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    white-space: nowrap;
    padding: 8px 10px !important;
}

    [class*="dxgvHeader_"]:hover {
        background: var(--ux-gray-100) !important;
        color: var(--ux-text) !important;
    }

/* Filas */
tr[class*="dxgvDataRow_"] > td,
tr[class*="dxgvDataRowAlt_"] > td,
tr[class*="dxgvAltDataRow_"] > td,
tr[class*="dxgvFocusedRow_"] > td,
tr[class*="dxgvSelectedRow_"] > td,
.erp-modern-grid .dxgvDataRow td {
    padding: 8px 10px !important;
    background: var(--ux-surface);
    border-color: var(--ux-gray-100) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    color: var(--ux-text) !important;
    font-family: var(--ux-font) !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

tr[class*="dxgvDataRowAlt_"] > td,
tr[class*="dxgvAltDataRow_"] > td {
    background: var(--ux-gray-25) !important;
}

tr[class*="dxgvDataRow_"]:hover > td,
tr[class*="dxgvDataRowHover_"] > td,
tr[class*="dxgvDataRowAlt_"]:hover > td {
    background: var(--ux-gray-50) !important;
}

tr[class*="dxgvFocusedRow_"] > td,
tr[class*="dxgvSelectedRow_"] > td,
.erp-modern-grid .dxgvFocusedRow td,
.erp-modern-grid .dxgvSelectedRow td {
    background: var(--ux-primary-soft) !important;
    color: var(--ux-text) !important;
    border-color: var(--ux-brand-100) !important;
}

    tr[class*="dxgvFocusedRow_"] > td:first-child {
        box-shadow: inset 3px 0 0 var(--ux-primary);
    }

    tr[class*="dxgvFocusedRow_"] a,
    tr[class*="dxgvSelectedRow_"] a {
        color: var(--ux-brand-700) !important;
    }

[class*="dxgvDataRow_"] a,
a[class*="dxeHyperlink_"] {
    color: var(--ux-primary) !important;
    font-weight: 500;
    text-decoration: none;
}

    [class*="dxgvDataRow_"] a:hover {
        text-decoration: underline;
    }

/* Agrupación, totales, filtros */
tr[class*="dxgvGroupRow_"] > td {
    background: var(--ux-gray-50) !important;
    color: var(--ux-text) !important;
    font-weight: 600 !important;
    border-color: var(--ux-border) !important;
}

tr[class*="dxgvFooter_"] > td,
tr[class*="dxgvGroupFooter_"] > td {
    background: var(--ux-gray-50) !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
    font-weight: 700 !important;
}

tr[class*="dxgvFilterRow_"] > td {
    background: var(--ux-surface) !important;
    border-color: var(--ux-border) !important;
    padding: 6px 4px !important;
}

[class*="dxgvGroupPanel_"] {
    background: var(--ux-surface) !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--ux-border) !important;
    color: var(--ux-gray-400) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 10px 14px !important;
}

[class*="dxgvSearchPanel_"],
[class*="dxgvTitlePanel_"],
[class*="dxgvToolbarContainer"],
.dxgvToolbarContainer {
    background: var(--ux-surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ux-border) !important;
    padding: 12px 14px !important;
}

[class*="dxgvTitlePanel_"] {
    color: var(--ux-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
}

[class*="dxgvEmptyDataRow_"] > td {
    padding: 40px 12px !important;
    color: var(--ux-muted) !important;
    text-align: center !important;
    background: var(--ux-surface) !important;
}

[class*="dxgvEditForm_"],
[class*="dxgvEditFormDisplayRow_"] > td {
    background: var(--ux-gray-25) !important;
}

[class*="dxgvDetailCell_"] {
    background: var(--ux-gray-50) !important;
    padding: 14px !important;
}

/* Barra de herramientas de la grilla (Toolbars) */
[class*="dxgvControl_"] [class*="dxmLite_"] .dxm-main {
    background: transparent !important;
    border: 0 !important;
}

[class*="dxgvControl_"] [class*="dxmLite_"] .dxm-item {
    border-radius: var(--ux-radius-sm) !important;
}

    [class*="dxgvControl_"] [class*="dxmLite_"] .dxm-item.dxm-hovered {
        background: var(--ux-gray-100) !important;
    }

/* Paginador */
[class*="dxgvPagerBottomPanel_"],
[class*="dxgvPagerTopPanel_"],
.erp-modern-grid .dxgvPagerBottomPanel {
    background: var(--ux-surface) !important;
    border: 0 !important;
    border-top: 1px solid var(--ux-border) !important;
    padding: 10px 14px !important;
}

[class*="dxpLite_"],
.dxpLite {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    background: transparent !important;
    border: 0 !important;
    font-family: var(--ux-font) !important;
    font-size: 13px !important;
    padding: 0 !important;
}

    [class*="dxpLite_"] .dxp-summary,
    [class*="dxpLite_"] .dxp-pageSizeItem {
        margin-right: auto;
        color: var(--ux-muted) !important;
        font-size: 12px !important;
    }

    [class*="dxpLite_"] .dxp-num,
    [class*="dxpLite_"] .dxp-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 8px !important;
        margin: 0 !important;
        border: 1px solid transparent !important;
        border-radius: var(--ux-radius) !important;
        color: var(--ux-text-2) !important;
        font-weight: 500;
        text-decoration: none !important;
        background: transparent !important;
    }

        [class*="dxpLite_"] .dxp-num:hover,
        [class*="dxpLite_"] .dxp-button:hover {
            background: var(--ux-gray-50) !important;
            border-color: var(--ux-border) !important;
        }

    [class*="dxpLite_"] .dxp-current,
    .dxp-buttonSel {
        background: var(--ux-primary) !important;
        border-color: var(--ux-primary) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    [class*="dxpLite_"] .dxp-ellip {
        color: var(--ux-muted);
        padding: 0 4px;
    }

/* GridView clásico y tablas Bootstrap */
.table,
table.GridView,
table[id*="GridView"],
table.erp-table {
    width: 100%;
    background: var(--ux-surface);
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg);
    font-size: 13px;
}

    .table > thead > tr > th,
    .table > tbody > tr > th,
    table[id*="GridView"] th {
        background: var(--ux-gray-50) !important;
        color: var(--ux-gray-600) !important;
        font-size: 12px;
        font-weight: 600;
        border-bottom: 1px solid var(--ux-border) !important;
        border-top: 0 !important;
        padding: 10px 12px !important;
        white-space: nowrap;
    }

    .table > tbody > tr > td,
    table[id*="GridView"] td {
        padding: 10px 12px !important;
        border-top: 1px solid var(--ux-gray-100) !important;
        vertical-align: middle !important;
    }

    .table-hover > tbody > tr:hover > td,
    table[id*="GridView"] tr:hover > td {
        background: var(--ux-gray-50);
    }

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: var(--ux-gray-25);
}

/* ─────────────────────────────────────────────────────────────────────
   9. PESTAÑAS (nav-tabs, ASPxPageControl)
   ───────────────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 1px solid var(--ux-border) !important;
    margin-bottom: 16px;
}

    .nav-tabs > li > a {
        margin: 0 2px -1px 0;
        padding: 10px 14px !important;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--ux-muted) !important;
        font-weight: 600;
    }

        .nav-tabs > li > a:hover {
            color: var(--ux-text) !important;
            border-bottom-color: var(--ux-gray-300) !important;
        }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        color: var(--ux-primary) !important;
        border-bottom-color: var(--ux-primary) !important;
    }

[class*="dxtcLite_"] > .dxtc-stripContainer,
[class*="dxtcLite_"] .dxtc-strip {
    background: transparent !important;
    border: 0 !important;
}

[class*="dxtcLite_"] .dxtc-stripContainer {
    border-bottom: 1px solid var(--ux-border) !important;
    padding: 0 !important;
}

[class*="dxtcLite_"] .dxtc-tab,
[class*="dxtcLite_"] .dxtc-activeTab {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 2px -1px 0 !important;
}

    [class*="dxtcLite_"] .dxtc-tab .dxtc-link,
    [class*="dxtcLite_"] .dxtc-activeTab .dxtc-link {
        padding: 10px 14px !important;
        color: var(--ux-muted) !important;
        font-family: var(--ux-font) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    [class*="dxtcLite_"] .dxtc-tab:hover .dxtc-link {
        color: var(--ux-text) !important;
    }

[class*="dxtcLite_"] .dxtc-activeTab {
    border-bottom-color: var(--ux-primary) !important;
}

    [class*="dxtcLite_"] .dxtc-activeTab .dxtc-link {
        color: var(--ux-primary) !important;
    }

[class*="dxtcLite_"] .dxtc-content {
    background: transparent !important;
    border: 0 !important;
    padding: 16px 0 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   10. ROUNDPANEL / FORMLAYOUT / GROUPBOX
   ───────────────────────────────────────────────────────────────────── */
[class*="dxrpControl_"],
[class*="dxrpControlGB_"] {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg) !important;
    background: var(--ux-surface) !important;
}

    [class*="dxrpControl_"] .dxrpHeader,
    [class*="dxrpControl_"] [class*="dxrpHeader_"] {
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ux-border) !important;
        padding: 12px 16px !important;
        color: var(--ux-text) !important;
        font-weight: 600 !important;
    }

    [class*="dxrpControl_"] .dxrpcontent,
    [class*="dxrpControl_"] [class*="dxrpContent"] {
        padding: 16px !important;
        border: 0 !important;
        background: transparent !important;
    }

[class*="dxflGroupBox_"] {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg) !important;
    padding: 12px 16px !important;
}

[class*="dxflGroupBoxCaption_"] {
    color: var(--ux-text) !important;
    font-weight: 600 !important;
    background: var(--ux-surface) !important;
    padding: 0 6px !important;
}

fieldset {
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius-lg);
    padding: 12px 16px 16px;
    margin-bottom: 16px;
}

legend {
    width: auto;
    margin-bottom: 0;
    padding: 0 6px;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ux-text);
}

/* ─────────────────────────────────────────────────────────────────────
   11. VENTANAS EMERGENTES (ASPxPopupControl, modal, SweetAlert)
   ───────────────────────────────────────────────────────────────────── */
.dxpc-mainDiv,
.dxpc-window,
.modal-content {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    font-family: var(--ux-font) !important;
    background: var(--ux-surface) !important;
}

.dxpc-header,
.modal-header {
    background: var(--ux-surface) !important;
    border-bottom: 1px solid var(--ux-border) !important;
    border-radius: calc(var(--ux-radius-lg) - 1px) calc(var(--ux-radius-lg) - 1px) 0 0 !important;
    padding: 14px 18px !important;
    color: var(--ux-text) !important;
}

    /* El texto hereda el color de la barra: así las pantallas que la
       pintan oscura (p. ej. ConsultaPaq.aspx) siguen mostrando el título. */
    .dxpc-headerContent,
    .dxpc-header .dxpc-headerText,
    .dxpc-header span,
    .modal-title {
        background: transparent !important;
        color: inherit !important;
        font-family: var(--ux-font) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 0 !important;
    }

.dxpc-closeBtn,
.dxpc-closeBtn img,
.dxpc-closeBtn td {
    filter: none !important;
    opacity: .6 !important;
    visibility: visible !important;
}

    .dxpc-closeBtn:hover {
        opacity: 1 !important;
        background: var(--ux-gray-100) !important;
        border-radius: var(--ux-radius-sm);
    }

.dxpc-content, .modal-body {
    background: var(--ux-surface) !important;
    font-family: var(--ux-font) !important;
}

.dxpc-content:last-child {
    border-radius: 0 0 calc(var(--ux-radius-lg) - 1px) calc(var(--ux-radius-lg) - 1px) !important;
}

.dxpc-footer, .modal-footer {
    background: var(--ux-gray-50) !important;
    border-top: 1px solid var(--ux-border) !important;
}

.dxpc-modalBG, .dxpcModalBackground, .dxpc-modal, .modal-backdrop {
    background: rgba(16, 24, 40, .45) !important;
    backdrop-filter: blur(2px);
}

.dxpc-modalBG, .dxpcModalBackground, .dxpc-modal {
    z-index: 200000 !important;
}

.dxpc-window, .dxpc-mainDiv, .dxpcLite, .dxpcControl {
    z-index: 200001 !important;
}

.dxpc-content iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

.swal2-container {
    z-index: 300000 !important;
}

.swal2-popup {
    border-radius: 16px !important;
    font-family: var(--ux-font) !important;
    padding: 24px !important;
}

.swal2-title {
    color: var(--ux-text) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.swal2-html-container, .swal2-content {
    color: var(--ux-gray-600) !important;
    font-size: 14px !important;
}

.swal2-styled.swal2-confirm {
    background: var(--ux-primary) !important;
    border-radius: var(--ux-radius) !important;
    font-weight: 600 !important;
}

.swal2-styled.swal2-cancel {
    background: var(--ux-surface) !important;
    color: var(--ux-text-2) !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-radius) !important;
    font-weight: 600 !important;
}

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

/* ─────────────────────────────────────────────────────────────────────
   12. ALERTAS, INSIGNIAS, DESPLEGABLES, SELECT2
   ───────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--ux-radius) !important;
    border: 1px solid transparent !important;
    padding: 12px 16px !important;
    font-size: 13px;
    box-shadow: none !important;
}

.alert-success {
    background: var(--ux-success-bg) !important;
    border-color: #abefc6 !important;
    color: #067647 !important;
}

.alert-danger {
    background: var(--ux-danger-bg) !important;
    border-color: #fecdca !important;
    color: var(--ux-danger) !important;
}

.alert-warning {
    background: var(--ux-warning-bg) !important;
    border-color: #fedf89 !important;
    color: #b54708 !important;
}

.alert-info {
    background: var(--ux-info-bg) !important;
    border-color: #b2ddff !important;
    color: #175cd3 !important;
}

.badge, .label:not(label) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.label-default, .badge-default {
    background: var(--ux-gray-100) !important;
    color: var(--ux-gray-700) !important;
}

.label-primary, .badge-primary {
    background: var(--ux-brand-100) !important;
    color: var(--ux-brand-700) !important;
}

.label-success, .badge-success {
    background: var(--ux-success-bg) !important;
    color: #067647 !important;
}

.label-warning, .badge-warning {
    background: var(--ux-warning-bg) !important;
    color: #b54708 !important;
}

.label-danger, .badge-danger {
    background: var(--ux-danger-bg) !important;
    color: var(--ux-danger) !important;
}

.label-info, .badge-info {
    background: var(--ux-info-bg) !important;
    color: #175cd3 !important;
}

.dropdown-menu {
    padding: 6px !important;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg) !important;
    box-shadow: var(--ux-shadow-lg) !important;
    font-size: 13px;
}

    .dropdown-menu > li > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 8px 10px !important;
        border-radius: var(--ux-radius-sm) !important;
        color: var(--ux-text-2) !important;
    }

        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background: var(--ux-gray-50) !important;
            color: var(--ux-text) !important;
        }

        .dropdown-menu > li > a > i, .dropdown-menu > li > a > .fa, .dropdown-menu > li > a > .fas {
            width: 16px;
            margin: 0 !important;
            color: var(--ux-gray-400);
            font-size: 15px;
            text-align: center;
        }

    .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover {
        background: var(--ux-primary-soft) !important;
        color: var(--ux-brand-700) !important;
    }

    .dropdown-menu .divider {
        margin: 6px 0 !important;
        background: var(--ux-border) !important;
    }

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap-5 .select2-selection,
.select2-selection {
    min-height: var(--ux-control-h) !important;
    border: 1px solid var(--ux-border-strong) !important;
    border-radius: var(--ux-radius) !important;
    background: var(--ux-surface) !important;
    font-family: var(--ux-font) !important;
}

.select2-dropdown {
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius) !important;
    box-shadow: var(--ux-shadow-md) !important;
    font-family: var(--ux-font) !important;
    overflow: hidden;
}

.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] {
    background: var(--ux-primary) !important;
    color: #fff !important;
}

.pagination > li > a, .pagination > li > span {
    border-color: var(--ux-border) !important;
    color: var(--ux-text-2) !important;
}

.pagination > .active > a, .pagination > .active > span {
    background: var(--ux-primary) !important;
    border-color: var(--ux-primary) !important;
    color: #fff !important;
}

/* Tarjetas de indicadores (dashboards) */
.erp-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--ux-surface);
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius-lg);
}

    .erp-kpi .erp-kpi-label {
        color: var(--ux-muted);
        font-size: 12px;
        font-weight: 500;
    }

    .erp-kpi .erp-kpi-value {
        color: var(--ux-text);
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

/* ─────────────────────────────────────────────────────────────────────
   13. INDICADOR DE CARGA (reemplaza el Panel de YUI)
   ───────────────────────────────────────────────────────────────────── */
#loadingOverlay, .ux-loading {
    position: fixed;
    inset: 0;
    z-index: 250000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(244, 245, 247, .72);
    backdrop-filter: blur(2px);
}

    #loadingOverlay.visible, .ux-loading.visible {
        display: flex;
    }

.loading-spinner, .ux-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ux-gray-200);
    border-top-color: var(--ux-primary);
    border-radius: 50%;
    animation: ux-spin .7s linear infinite;
}

.loading-text, .ux-loading-text {
    color: var(--ux-gray-600);
    font-size: 13px;
    font-weight: 500;
}

@keyframes ux-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-spinner, .ux-loading-spinner {
        animation-duration: 2s;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   14. DIÁLOGOS (páginas dlg/ dentro de iframes)
   ───────────────────────────────────────────────────────────────────── */
body.erp-modern-dialog,
body.erp-modern-standalone {
    background: var(--ux-bg) !important;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   15. BARRA SUPERIOR DE LA PANTALLA, BOTONES Y BÚSQUEDA DE GRILLAS
   ───────────────────────────────────────────────────────────────────── */

/* Fila con la barra de acciones: el menú y los botones sueltos que la
   acompañan (Días entregas, Paquetes disponibles, un número…) van en una
   sola línea en vez de repartirse en columnas de Bootstrap. */
:is(.row, [class*="col-"]):has(> [class*="col-"] > .erp-action-menu):not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    :is(.row, [class*="col-"]):has(> [class*="col-"] > .erp-action-menu) > [class*="col-"] {
        float: none !important;
        flex: 0 0 auto;
        width: auto !important;
        max-width: 100%;
        min-height: 0 !important;
        padding: 0 !important;
    }

        :is(.row, [class*="col-"]):has(> [class*="col-"] > .erp-action-menu) > [class*="col-"]:has(> .erp-action-menu) {
            flex: 0 1 auto;
        }

        /* Campos que acompañan la barra (p. ej. cantidad de registros) */
        :is(.row, [class*="col-"]):has(> [class*="col-"] > .erp-action-menu) > [class*="col-"]:has(> table[class*="dxeButtonEdit"], > table[class*="dxeTextBox"], > input) {
            width: 130px !important;
        }

.erp-action-menu {
    margin-bottom: 0 !important;
}

    .erp-action-menu .dxm-content {
        white-space: nowrap;
    }

/* ASPxButton: contenido centrado aunque la pantalla le dé otro alto.
   Sin !important en display: DevExpress oculta botones (ClientVisible=False,
   SetVisible) con style="display:none" y eso debe seguir mandando. */
[class*="dxbButton_"]:not([style*="border-style:None"]):not([style*="border-style: none"]):not(td.dxgv [class*="dxbButton_"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* El tema da ancho fijo (~90px) a los botones de solo texto: el texto largo
   se salía del botón. Ahora el botón mide lo que su texto; si la pantalla
   le puso Width, ese ancho (en línea) sigue mandando. */
[class*="dxbButton_"][class*="dxbButton_"].dxbTSys:not([style*="width"]) {
    width: auto;
    min-width: 88px;
}

    [class*="dxbButton_"]:not([style*="border-style:None"]):not([style*="border-style: none"]):not(:has(.dxb)) {
        padding: 0 14px !important;
    }

    [class*="dxbButton_"] .dxb {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
    }

/* Panel de búsqueda de la grilla: cuadro + Buscar + Limpiar alineados */
[class*="dxgvSearchPanel_"]:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex;
    align-items: center;
}

    [class*="dxgvSearchPanel_"] > table,
    [class*="dxgvSearchPanel_"] table:not([class*="dxe"]) {
        width: auto !important;
        max-width: 100%;
        border-collapse: separate !important;
    }

    [class*="dxgvSearchPanel_"] td {
        padding: 0 0 0 8px !important;
        vertical-align: middle !important;
    }

        [class*="dxgvSearchPanel_"] td:first-child {
            padding-left: 0 !important;
        }

    [class*="dxgvSearchPanel_"] table[class*="dxeButtonEdit"],
    [class*="dxgvSearchPanel_"] table[class*="dxeTextBox"] {
        width: 360px !important;
        max-width: 100%;
    }

    [class*="dxgvSearchPanel_"] [class*="dxbButton_"],
    [class*="dxgvSearchPanel_"] a {
        height: var(--ux-control-h) !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }

    [class*="dxgvSearchPanel_"] [class*="dxbButton_"] .dxb {
        padding: 0 14px !important;
    }

    /* El primero (Buscar) es el principal */
    [class*="dxgvSearchPanel_"] td:nth-child(2) [class*="dxbButton_"][class*="dxbButton_"][class*="dxbButton_"][class*="dxbButton_"][class*="dxbButton_"] {
        background: var(--ux-primary) !important;
        border-color: var(--ux-primary) !important;
        color: var(--v2-on-primary, #fff) !important;
    }

        [class*="dxgvSearchPanel_"] td:nth-child(2) [class*="dxbButton_"] .dx-vam,
        [class*="dxgvSearchPanel_"] td:nth-child(2) [class*="dxbButton_"][class*="dxbButton_"] * {
            color: var(--v2-on-primary, #fff) !important;
        }

/* Las pantallas usan columnas flotantes (col-lg-*) dentro de asp:Panel
   CssClass="erp-card": sin esto la tarjeta termina antes que su contenido */
.erp-card::after,
.erp-modern-page::after {
    content: "";
    display: table;
    clear: both;
}

/* Tarjetas dentro de tarjetas: la de afuera no se dibuja
   (los paneles vacíos los oculta erpuix-v2-erp.js) */
.content .erp-modern-page > .panel:has(.panel),
.content > .panel:has(> .panel-body > .panel) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

    .content .erp-modern-page > .panel:has(.panel) > .panel-body,
    .content > .panel:has(> .panel-body > .panel) > .panel-body {
        padding: 0 !important;
    }

        .content .erp-modern-page > .panel:has(.panel) > .panel-body > br:first-child {
            display: none;
        }

/* ─────────────────────────────────────────────────────────────────────
   16. RESPONSIVO
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .panel-body, .card-body {
        padding: 14px !important;
    }

    .erp-title-label, span[id$="_ltitulo"] {
        font-size: 19px !important;
    }

    [class*="dxgvControl_"] {
        overflow-x: auto !important;
    }

    .erp-action-menu ul.dx {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px !important;
    }
}

@media print {
    body {
        background: #fff !important;
    }

    .panel, .card, [class*="dxgvControl_"] {
        box-shadow: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   17. ESTADOS VACÍOS Y NOTIFICACIONES
   ───────────────────────────────────────────────────────────────────── */

/* Grilla sin datos: ícono suave y texto centrado */
[class*="dxgvEmptyDataRow_"] > td {
    position: relative;
    padding: 56px 12px 28px !important;
    color: var(--ux-muted) !important;
    font-size: 13.5px !important;
}

    [class*="dxgvEmptyDataRow_"] > td::before {
        content: "";
        position: absolute;
        top: 18px;
        left: 50%;
        width: 28px;
        height: 28px;
        transform: translateX(-50%);
        background: var(--ux-gray-300);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l2 3h4l2-3h5'/%3E%3Cpath d='M5.5 5h13L21 13v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l2 3h4l2-3h5'/%3E%3Cpath d='M5.5 5h13L21 13v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

/* PNotify (SetNot y avisos del sistema) como notificación del ERP */
.ui-pnotify {
    font-family: var(--ux-font) !important;
}

    .ui-pnotify .ui-pnotify-container,
    .ui-pnotify .alert {
        padding: 12px 14px 12px 16px !important;
        background: var(--ux-surface) !important;
        border: 1px solid var(--ux-border) !important;
        border-left: 4px solid var(--ux-info) !important;
        border-radius: var(--ux-radius-lg) !important;
        box-shadow: var(--ux-shadow-lg) !important;
        color: var(--ux-text) !important;
    }

    .ui-pnotify .alert-success, .ui-pnotify .bg-success { border-left-color: var(--ux-success) !important; }
    .ui-pnotify .alert-warning, .ui-pnotify .bg-warning { border-left-color: var(--ux-warning) !important; }
    .ui-pnotify .alert-danger, .ui-pnotify .bg-danger, .ui-pnotify .alert-error { border-left-color: var(--ux-danger) !important; }

    .ui-pnotify .ui-pnotify-title {
        margin-bottom: 2px !important;
        color: var(--ux-text) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .ui-pnotify .ui-pnotify-text {
        color: var(--ux-text-2) !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .ui-pnotify .ui-pnotify-icon,
    .ui-pnotify .ui-pnotify-icon span {
        color: var(--ux-muted) !important;
    }

/* Barra de la pantalla: acciones a la izquierda y un control secundario
   (p. ej. "Mostrar [1000] registros") a la derecha */
.ux-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

    .ux-barra > .erp-action-menu {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

.ux-barra-fin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--ux-muted);
    font-size: 13px;
    white-space: nowrap;
}

    .ux-barra-fin table[class*="dxe"] {
        width: 110px !important;
    }

/* ─────────────────────────────────────────────────────────────────────
   18. DATATABLES (jQuery) — mismo aspecto que las grillas DevExpress
   ───────────────────────────────────────────────────────────────────── */
.dataTables_wrapper {
    font-family: var(--ux-font);
    font-size: 13px;
    color: var(--ux-text);
}

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px;
        color: var(--ux-muted);
    }

    .dataTables_wrapper .dataTables_filter {
        justify-content: flex-end;
    }

        .dataTables_wrapper .dataTables_length select,
        .dataTables_wrapper .dataTables_filter input {
            height: var(--ux-control-h);
            padding: 0 10px;
            margin: 0 4px;
            background: var(--ux-surface);
            border: 1px solid var(--ux-border-strong);
            border-radius: var(--ux-radius);
            color: var(--ux-text);
            font: inherit;
        }

            .dataTables_wrapper .dataTables_filter input:focus,
            .dataTables_wrapper .dataTables_length select:focus {
                border-color: var(--ux-brand-500);
                box-shadow: var(--ux-focus-ring);
                outline: 0;
            }

table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--ux-border) !important;
    border-radius: var(--ux-radius-lg);
    overflow: hidden;
    background: var(--ux-surface);
}

    table.dataTable thead th,
    table.dataTable thead td {
        padding: 10px 12px !important;
        background: var(--ux-gray-50) !important;
        border-bottom: 1px solid var(--ux-border) !important;
        color: var(--ux-muted) !important;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }

    table.dataTable tbody td {
        padding: 9px 12px !important;
        border-top: 1px solid var(--ux-border) !important;
        color: var(--ux-text);
        vertical-align: middle;
    }

    table.dataTable tbody tr:first-child td {
        border-top: 0 !important;
    }

    table.dataTable tbody tr:hover td {
        background: var(--ux-gray-50);
    }

    table.dataTable tbody tr.selected td {
        background: var(--ux-brand-50) !important;
    }

    table.dataTable td.dataTables_empty {
        padding: 40px 12px !important;
        color: var(--ux-muted);
        text-align: center;
    }

.dataTables_wrapper .dataTables_info {
    padding-top: 12px;
    color: var(--ux-muted);
    font-size: 12.5px;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding-top: 10px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 32px;
        height: 32px;
        padding: 0 10px !important;
        border: 1px solid transparent !important;
        border-radius: var(--ux-radius) !important;
        background: transparent !important;
        color: var(--ux-text-2) !important;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            border-color: var(--ux-border) !important;
            background: var(--ux-gray-50) !important;
            color: var(--ux-text) !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            border-color: var(--ux-brand-200) !important;
            background: var(--ux-brand-50) !important;
            color: var(--v2-primary-text, var(--ux-primary)) !important;
            font-weight: 600;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            opacity: .45;
            cursor: default;
        }


/* Celdas con solo un botón ícono (editar, imprimir…): angostas, para que la
   grilla no necesite ocultar columnas (SettingsAdaptivity HideDataCells) */
tr[class*="dxgvDataRow_"] > td:has(> [class*="dxbButton_"]:only-child),
tr[class*="dxgvDataRowAlt_"] > td:has(> [class*="dxbButton_"]:only-child),
tr[class*="dxgvFocusedRow_"] > td:has(> [class*="dxbButton_"]:only-child),
tr[class*="dxgvSelectedRow_"] > td:has(> [class*="dxbButton_"]:only-child) {
    padding: 4px !important;
    text-align: center;
}

/* Formulario de edición emergente de las grillas (Facturas, Cotizaciones, Órdenes):
   cabe en pantallas angostas y su contenido se desplaza dentro de la ventana.
   Un intento de ubicar el popup por posición CSS real (position:absolute/fixed)
   en vez de por clase encontró a veces el fondo gris de TODA la ventana modal en
   vez del cuadro del popup, dejando la barra fuera del cuadro y sin funcionar; se
   volvió a ubicar por las clases genéricas de DevExpress "dxpc-mainDiv"/
   "dxpc-header", que sí funcionaban. */
.dxpc-mainDiv:has(.ux-pef-barra) { max-width: calc(100vw - 24px) !important; }
.dxpc-mainDiv:has(.ux-pef-barra) .dxpc-content { max-height: calc(100vh - 160px); overflow: auto; }
/* Barra Cancelar / Guardar línea de la ventana de edición (erpuix-pantallas.js).
   Va en la cabecera del popup (justo debajo del título), no al pie: con un
   formulario largo el pie queda fuera de la vista sin desplazarse hasta el
   final, mientras que la cabecera siempre está visible. */
.ux-pef-barra {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 8px 16px;
    background: var(--ux-gray-50); border-bottom: 1px solid var(--ux-border);
}
.ux-pef-barra.is-pie { border-bottom: 0; border-top: 1px solid var(--ux-border); margin-top: 8px; background: var(--ux-surface); }
.ux-pef-barra.is-fija { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ux-pef-barra button {
    height: 32px; padding: 0 16px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--ux-border-strong); background: var(--ux-surface); color: var(--ux-text);
}
.ux-pef-barra button:hover { background: var(--ux-gray-50); }
.ux-pef-barra .ux-pef-guardar { background: var(--ux-primary); border-color: var(--ux-primary); color: #fff; }
.ux-pef-barra .ux-pef-guardar:hover { background: var(--ux-primary-hover); }
.ux-pef-barra button:disabled { opacity: .6; cursor: default; }