/* =====================================================================
   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(.dxgvCommandColumn_Office365 [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;
}

/* Los íconos nuevos (img/iconos-v2/) se generaron a 64x64 para que se vean nítidos
   en pantallas de alta resolución; sin este tamaño fijo, algunos navegadores los
   dibujan a su tamaño real (grandes) en vez de respetar el Image-Height/Image-Width
   del botón de DevExpress. */
img[src*="/iconos-v2/"] {
    width: 16px !important;
    height: 16px !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)
   ───────────────────────────────────────────────────────────────────── */
.dxgvControl_Office365,
.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;
}

    /* Antes esto (y el resto de esta seccion) usaba [class*="dxgv..._"] -- un
       selector de atributo "contiene" no se puede indexar: el navegador tiene
       que revisar el string de clase de CADA elemento del DOM contra CADA uno
       de estos selectores en cada recalculo de estilos. Con una grilla de
       cientos de filas eso midio 118s de "Recalculate style" (DevTools
       Performance) -- el cuello de botella real, muy por encima del servidor.
       DevExpress nombra sus clases "dxgv<Parte>_<Tema>" y todo el sitio ya usa
       Theme="Office365" sin excepcion (263 ASPxGridView, confirmado), asi que
       se puede apuntar a la clase exacta: el navegador la busca por indice en
       vez de escanear substrings. */
    .dxgvControl_Office365 .dxgvControl_Office365 {
        border-radius: var(--ux-radius) !important;
    }

    .dxgvControl_Office365 > table,
    .dxgvTable_Office365 {
        border: 0 !important;
        font-family: var(--ux-font) !important;
    }

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

.panel-body > .dxgvControl_Office365:only-child,
.panel-body > .erp-card:only-child > .dxgvControl_Office365:only-child,
.panel-body > div:only-child > .erp-card:only-child > .dxgvControl_Office365:only-child {
    border: 0 !important;
    margin: 0 !important;
}

/* Encabezados */
.dxgvHeader_Office365,
.dxgvHeader_Office365 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;
}

    .dxgvHeader_Office365:hover {
        background: var(--ux-gray-100) !important;
        color: var(--ux-text) !important;
    }

/* Filas */
tr.dxgvDataRow_Office365 > td,
tr[class*="dxgvDataRowAlt_"] > td,
tr[class*="dxgvAltDataRow_"] > td,
tr.dxgvFocusedRow_Office365 > td,
tr.dxgvSelectedRow_Office365 > 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.dxgvDataRow_Office365:hover > td,
tr[class*="dxgvDataRowHover_"] > td,
tr[class*="dxgvDataRowAlt_"]:hover > td {
    background: var(--ux-gray-50) !important;
}

tr.dxgvFocusedRow_Office365 > td,
tr.dxgvSelectedRow_Office365 > 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.dxgvFocusedRow_Office365 > td:first-child {
        box-shadow: inset 3px 0 0 var(--ux-primary);
    }

tr.dxgvFocusedRow_Office365 a,
tr.dxgvSelectedRow_Office365 a {
    color: var(--ux-brand-700) !important;
}

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

    .dxgvDataRow_Office365 a:hover {
        text-decoration: underline;
    }

/* Agrupación, totales, filtros */
tr.dxgvGroupRow_Office365 > td {
    background: var(--ux-gray-50) !important;
    color: var(--ux-text) !important;
    font-weight: 600 !important;
    border-color: var(--ux-border) !important;
}

tr.dxgvFooter_Office365 > td,
tr.dxgvGroupFooter_Office365 > td {
    background: var(--ux-gray-50) !important;
    border-color: var(--ux-border) !important;
    color: var(--ux-text) !important;
    font-weight: 700 !important;
}

tr.dxgvFilterRow_Office365 > td {
    background: var(--ux-surface) !important;
    border-color: var(--ux-border) !important;
    padding: 6px 4px !important;
}

.dxgvGroupPanel_Office365 {
    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;
}

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

.dxgvTitlePanel_Office365 {
    color: var(--ux-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.dxgvEmptyDataRow_Office365 > td {
    padding: 40px 12px !important;
    color: var(--ux-muted) !important;
    text-align: center !important;
    background: var(--ux-surface) !important;
}

.dxgvEditForm_Office365,
.dxgvEditFormDisplayRow_Office365 > td {
    background: var(--ux-gray-25) !important;
}

.dxgvDetailCell_Office365 {
    background: var(--ux-gray-50) !important;
    padding: 14px !important;
}

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

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

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

/* Paginador */
.dxgvPagerBottomPanel_Office365,
.dxgvPagerTopPanel_Office365,
.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;
}

/* El popup "Buscar Producto" (ASPxPopupControl1, cssclass="modal-full" en
   Facturas/Ordenes/Cotizaciones) se abre desde DENTRO del popup "Editar linea"
   de la grilla de detalle (la lupita junto al campo Codigo). El z-index que de
   verdad compite entre popups NO esta en el .dxpc-mainDiv interno (eso ya se
   intento y no sirvio, confirmado inspeccionando el DOM real): DevExpress lo
   pone, por JS y en linea, en el DIV CONTENEDOR exterior de cada popup, con id
   "<ControlID>_PW-<N>" (ej. cpBody_ASPxPopupControl1_PW-1), con un valor que
   su propio contador interno va subiendo (~10000-12000), muy por debajo del
   200001 fijo que esta hoja fuerza en .dxpc-mainDiv/.dxpc-window. Por eso el
   popup de busqueda, aunque abierto despues, quedaba detras de "Editar linea".
   Se apunta directo a ese contenedor por el patron de id que usa DevExpress
   para TODOS sus popups (lo confirma tambien el id del dropdown de combos de
   abajo), en vez de intentar adivinar la clase CSS que le toque. */
[id*="ASPxPopupControl1_PW-"] {
    z-index: 200002 !important;
}

/* Lista desplegable de un ASPxComboBox (p.ej. "Producto Nombre" dentro del
   popup "Editar linea" de gvDetalle, en Facturas/Ordenes/Cotizaciones). No usa
   las clases dxpc-mainDiv/dxpc-window de arriba, sino dxpc-ddSys/dxdd-root, y
   DevExpress le pone z-index por JS en linea (normalmente 10000), muy por
   debajo del z-index fijo que esta hoja fuerza en los popups (200000+). Al
   abrir el combo DENTRO de un popup ya abierto, la lista quedaba detras del
   popup y no dejaba seleccionar nada. Se sube por encima de cualquier popup. */
[class*="dxpc-ddSys"], .dxdd-root, [class*="dxpcDropDown_"] {
    z-index: 200003 !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.
   dxbButton_/dxe* se dejan como selector "contiene" a proposito: en esta
   misma app conviven botones/editores Office365 Y iOS (confirmado en vivo),
   asi que una clase exacta dejaria sin estilo a los que no son Office365. */
.dxgvSearchPanel_Office365:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex;
    align-items: center;
}

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

.dxgvSearchPanel_Office365 td {
    padding: 0 0 0 8px !important;
    vertical-align: middle !important;
}

    .dxgvSearchPanel_Office365 td:first-child {
        padding-left: 0 !important;
    }

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

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

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

/* El primero (Buscar) es el principal */
.dxgvSearchPanel_Office365 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;
}

.dxgvSearchPanel_Office365 td:nth-child(2) [class*="dxbButton_"] .dx-vam,
.dxgvSearchPanel_Office365 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;
    }

    .dxgvControl_Office365 {
        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, .dxgvControl_Office365 {
        box-shadow: none !important;
    }
}

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

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

    .dxgvEmptyDataRow_Office365 > 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.dxgvDataRow_Office365 > td:has(> [class*="dxbButton_"]:only-child),
tr[class*="dxgvDataRowAlt_"] > td:has(> [class*="dxbButton_"]:only-child),
tr.dxgvFocusedRow_Office365 > td:has(> [class*="dxbButton_"]:only-child),
tr.dxgvSelectedRow_Office365 > 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;
    }