@charset "UTF-8";

/* ============================================
   CRUD STYLES - BEST
   Estilos para vistas CRUD (DataGrid y TreeList)
   Se carga desde el Layout para permitir overrides
   ============================================ */

/* ============================================
   CRUD CONTAINER
   ============================================ */
.crud-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-6, 1.125rem) var(--spacing-6, 1.125rem);
}

/* ============================================
   CRUD FILTER CARD
   ============================================ */
.crud-filter-card {
    background: var(--outlook-bg-primary, #FFFFFF);
    border: 1px solid var(--outlook-border-light, #E0E0E0);
    border-radius: var(--radius-xl, 1rem);
    box-shadow: var(--outlook-shadow-subtle, 0 1.6px 3.6px rgba(0,0,0,.04));
    margin-bottom: var(--spacing-6, 1.125rem);
    overflow: hidden;
}

.crud-filter-card .card-body {
    padding: var(--spacing-4, 0.75rem) var(--spacing-5, 0.938rem);
}

.crud-filter-card .card-header {
    background: var(--outlook-bg-secondary, #F5F5F5);
    border-bottom: 1px solid var(--outlook-border-light, #E0E0E0);
    padding: var(--spacing-3, 0.563rem) var(--spacing-5, 0.938rem);
}

.crud-filter-card .card-header h6,
.crud-filter-card .card-header .card-title {
    font-size: var(--font-size-sm, 0.813rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--outlook-text-primary, #323130);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   CRUD TABLE CARD
   ============================================ */
.crud-table-card {
    background: var(--outlook-bg-primary, #FFFFFF);
    border: 1px solid var(--outlook-border-light, #E0E0E0);
    border-radius: var(--radius-xl, 1rem);
    box-shadow: var(--outlook-shadow-subtle, 0 1.6px 3.6px rgba(0,0,0,.04));
    overflow: hidden;
    position: relative;
}

.crud-table-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--palette-blue-primary, #4A90E2) 0%, var(--palette-teal, #48C9B0) 100%);
    border-radius: var(--radius-xl, 1rem) 0 0 var(--radius-xl, 1rem);
}

.crud-table-card .card-body {
    padding: var(--spacing-4, 0.75rem);
}

/* ============================================
   DEVEXTREME HEADERS
   ============================================ */
[id^="dataGridContainer"] .dx-datagrid-headers,
[id^="dataGridContainer"] .dx-treelist-headers {
    background: var(--outlook-bg-secondary, #F5F5F5) !important;
    border-bottom: 2px solid var(--outlook-border, #D1D1D1) !important;
}

[id^="dataGridContainer"] .dx-header-row {
    background: var(--outlook-bg-secondary, #F5F5F5) !important;
}

[id^="dataGridContainer"] .dx-header-row td,
[id^="dataGridContainer"] .dx-header-row th {
    font-size: var(--font-size-xs, 0.688rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--outlook-text-primary, #323130) !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: var(--spacing-3, 0.563rem) var(--spacing-4, 0.75rem) !important;
    border-bottom: 2px solid var(--outlook-border, #D1D1D1) !important;
    background: var(--outlook-bg-secondary, #F5F5F5) !important;
}

/* ============================================
   DEVEXTREME DATA ROWS
   ============================================ */
[id^="dataGridContainer"] .dx-data-row td {
    font-size: var(--font-size-sm, 0.813rem) !important;
    color: var(--outlook-text-primary, #323130) !important;
    padding: var(--spacing-3, 0.563rem) var(--spacing-4, 0.75rem) !important;
    border-bottom: 1px solid var(--outlook-border-light, #E0E0E0) !important;
    vertical-align: middle !important;
}

[id^="dataGridContainer"] .dx-row-alt td {
    background: var(--outlook-bg-tertiary, #FAFAFA) !important;
}

[id^="dataGridContainer"] .dx-data-row:hover td,
[id^="dataGridContainer"] .dx-state-hover > td {
    background: var(--outlook-bg-hover, #E1E1E1) !important;
}

[id^="dataGridContainer"] .dx-selection td,
[id^="dataGridContainer"] .dx-row-focused td {
    background: var(--outlook-bg-selected, #D6E3F0) !important;
}

/* ============================================
   DEVEXTREME TOOLBAR
   ============================================ */
[id^="dataGridContainer"] .dx-datagrid-toolbar,
[id^="dataGridContainer"] .dx-treelist-toolbar,
[id^="dataGridContainer"] .dx-toolbar {
    background: transparent !important;
    padding: var(--spacing-3, 0.563rem) 0 !important;
    margin-bottom: var(--spacing-3, 0.563rem);
}

/* ============================================
   CRUD BUTTON TOKENS (inherits global button mode)
   ============================================ */
.crud-container {
    --crud-btn-bg: var(--binas-btn-bg, var(--outlook-bg-primary));
    --crud-btn-border: var(--binas-btn-border, var(--outlook-border-light));
    --crud-btn-text: var(--binas-btn-text, var(--outlook-text-secondary));
    --crud-btn-radius: var(--binas-btn-radius, var(--radius-md));
    --crud-btn-padding-y: var(--binas-btn-padding-y, var(--spacing-2));
    --crud-btn-padding-x: var(--binas-btn-padding-x, var(--spacing-3));
    --crud-btn-weight: var(--binas-btn-weight, var(--font-weight-semibold));
    --crud-btn-hover-bg: var(--binas-btn-hover-bg, rgba(var(--palette-blue-primary-rgb), 0.06));
    --crud-btn-hover-border: var(--binas-btn-hover-border, rgba(var(--palette-blue-primary-rgb), 0.35));
    --crud-btn-hover-text: var(--binas-btn-hover-text, var(--outlook-text-primary));
    --crud-btn-hover-shadow: var(--binas-btn-hover-shadow, var(--outlook-shadow-card));
    --crud-btn-focus-border: var(--binas-btn-focus-border, rgba(var(--palette-blue-primary-rgb), 0.5));
    --crud-btn-focus-shadow: var(--binas-btn-focus-shadow, 0 0 0 0.2rem rgba(var(--palette-blue-primary-rgb), 0.2));
}

/* ============================================
   DEVEXTREME BUTTONS
   ============================================ */
.crud-container .dx-button {
    border-radius: var(--crud-btn-radius) !important;
    font-weight: var(--crud-btn-weight) !important;
    font-size: var(--font-size-xs, 0.75rem) !important;
    line-height: 1.2 !important;
    min-height: 34px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
    box-shadow: var(--outlook-shadow-subtle) !important;
}

.crud-container .dx-button-normal {
    background: var(--crud-btn-bg) !important;
    border: 1px solid var(--crud-btn-border) !important;
    color: var(--crud-btn-text) !important;
}

.crud-container .dx-button-normal:hover {
    background: var(--crud-btn-hover-bg) !important;
    border-color: var(--crud-btn-hover-border) !important;
    color: var(--crud-btn-hover-text) !important;
    box-shadow: var(--crud-btn-hover-shadow) !important;
}

.crud-container .dx-button-default {
    background: var(--color-primary, var(--binas-navy, #232D4F)) !important;
    border-color: var(--color-primary, var(--binas-navy, #232D4F)) !important;
    color: var(--outlook-bg-primary, #fff) !important;
}

.crud-container .dx-button-default:hover {
    background: var(--color-primary-dark, var(--binas-navy-light, #3c4a72)) !important;
    border-color: var(--color-primary-dark, var(--binas-navy-light, #3c4a72)) !important;
}

.crud-container .dx-button:focus,
.crud-container .dx-button:active {
    border-color: var(--crud-btn-focus-border) !important;
    box-shadow: var(--crud-btn-focus-shadow) !important;
}

/* Add Row Button - estilo unificado con modo global */
[id^="dataGridContainer"] .dx-datagrid-addrow-button,
[id^="dataGridContainer"] .dx-treelist-addrow-button {
    background-color: var(--crud-btn-bg) !important;
    border: 1px solid var(--crud-btn-border) !important;
    color: var(--crud-btn-text) !important;
    border-radius: var(--crud-btn-radius) !important;
    padding: var(--crud-btn-padding-y) var(--crud-btn-padding-x) !important;
    font-weight: var(--crud-btn-weight) !important;
    min-height: 34px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
    box-shadow: var(--outlook-shadow-subtle) !important;
}

[id^="dataGridContainer"] .dx-datagrid-addrow-button:hover,
[id^="dataGridContainer"] .dx-treelist-addrow-button:hover {
    background-color: var(--crud-btn-hover-bg) !important;
    border-color: var(--crud-btn-hover-border) !important;
    box-shadow: var(--crud-btn-hover-shadow) !important;
    color: var(--crud-btn-hover-text) !important;
}

[id^="dataGridContainer"] .dx-datagrid-addrow-button:active,
[id^="dataGridContainer"] .dx-datagrid-addrow-button:focus,
[id^="dataGridContainer"] .dx-treelist-addrow-button:active,
[id^="dataGridContainer"] .dx-treelist-addrow-button:focus {
    border-color: var(--crud-btn-focus-border) !important;
    box-shadow: var(--crud-btn-focus-shadow) !important;
    outline: none !important;
}

/* ============================================
   ACTION LINKS - estilo unificado con modo global
   ============================================ */
[id^="dataGridContainer"] .dx-link,
[id^="dataGridContainer"] .dx-link-icon,
[id^="dataGridContainer"] a.dx-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 0.875rem !important;
    background-color: var(--crud-btn-bg) !important;
    border: 1px solid var(--crud-btn-border) !important;
    border-radius: var(--crud-btn-radius) !important;
    margin: 0 2px !important;
    padding: 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

[id^="dataGridContainer"] .dx-link:hover,
[id^="dataGridContainer"] .dx-link-icon:hover,
[id^="dataGridContainer"] a.dx-link:hover {
    background-color: var(--crud-btn-hover-bg) !important;
    border-color: var(--crud-btn-hover-border) !important;
    box-shadow: var(--crud-btn-hover-shadow) !important;
    text-decoration: none !important;
}

[id^="dataGridContainer"] .dx-link:active,
[id^="dataGridContainer"] .dx-link:focus,
[id^="dataGridContainer"] a.dx-link:active,
[id^="dataGridContainer"] a.dx-link:focus {
    background-color: var(--crud-btn-hover-bg) !important;
    border-color: var(--crud-btn-focus-border) !important;
    box-shadow: var(--crud-btn-focus-shadow) !important;
    outline: none !important;
}

/* ============================================
   SEMANTIC ICON COLORS
   Solo el icono tiene color, similar a btn-* del sistema
   Usar !important para sobreescribir el color base
   ============================================ */

/* Edit action - Icono azul */
[id^="dataGridContainer"] .dx-link-edit,
[id^="dataGridContainer"] .dx-link-edit .dx-icon,
[id^="dataGridContainer"] .dx-link-edit i,
[id^="dataGridContainer"] .dx-link[class*="fa-pen"],
[id^="dataGridContainer"] .dx-link [class*="fa-pen"] {
    color: var(--palette-blue-primary, #4A90E2) !important;
}

[id^="dataGridContainer"] .dx-link-edit:hover,
[id^="dataGridContainer"] .dx-link-edit:hover .dx-icon,
[id^="dataGridContainer"] .dx-link-edit:hover i,
[id^="dataGridContainer"] .dx-link[class*="fa-pen"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-pen"] {
    color: var(--binas-navy, #232D4F) !important;
}

/* Delete action - Icono rojo */
[id^="dataGridContainer"] .dx-link-delete,
[id^="dataGridContainer"] .dx-link-delete .dx-icon,
[id^="dataGridContainer"] .dx-link-delete i,
[id^="dataGridContainer"] .dx-link[class*="fa-trash"],
[id^="dataGridContainer"] .dx-link [class*="fa-trash"] {
    color: var(--icon-color-danger, #E57373) !important;
}

[id^="dataGridContainer"] .dx-link-delete:hover,
[id^="dataGridContainer"] .dx-link-delete:hover .dx-icon,
[id^="dataGridContainer"] .dx-link-delete:hover i,
[id^="dataGridContainer"] .dx-link[class*="fa-trash"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-trash"] {
    color: var(--color-danger, #dc3545) !important;
}

/* Add action - Icono verde */
[id^="dataGridContainer"] .dx-link-add,
[id^="dataGridContainer"] .dx-link-add .dx-icon,
[id^="dataGridContainer"] .dx-link-add i,
[id^="dataGridContainer"] .dx-link[class*="fa-plus"],
[id^="dataGridContainer"] .dx-link [class*="fa-plus"] {
    color: var(--icon-color-success, #48C9B0) !important;
}

[id^="dataGridContainer"] .dx-link-add:hover,
[id^="dataGridContainer"] .dx-link-add:hover .dx-icon,
[id^="dataGridContainer"] .dx-link-add:hover i,
[id^="dataGridContainer"] .dx-link[class*="fa-plus"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-plus"] {
    color: var(--color-success, #28a745) !important;
}

/* Clone action - Icono cyan */
[id^="dataGridContainer"] .dx-link[class*="fa-clone"],
[id^="dataGridContainer"] .dx-link [class*="fa-clone"] {
    color: var(--palette-cyan, #50B8D8) !important;
}

[id^="dataGridContainer"] .dx-link[class*="fa-clone"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-clone"] {
    color: var(--color-info, #17a2b8) !important;
}

/* Settings/Gear action - Icono gris oscuro */
[id^="dataGridContainer"] .dx-link[class*="fa-gear"],
[id^="dataGridContainer"] .dx-link [class*="fa-gear"],
[id^="dataGridContainer"] .dx-link[class*="fa-cog"],
[id^="dataGridContainer"] .dx-link [class*="fa-cog"] {
    color: var(--icon-color-neutral, #6c757d) !important;
}

[id^="dataGridContainer"] .dx-link[class*="fa-gear"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-gear"],
[id^="dataGridContainer"] .dx-link[class*="fa-cog"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-cog"] {
    color: var(--outlook-text-primary, #323130) !important;
}

/* Excel/Export action - Icono verde */
[id^="dataGridContainer"] .dx-link[class*="fa-file-excel"],
[id^="dataGridContainer"] .dx-link [class*="fa-file-excel"] {
    color: var(--icon-color-success, #48C9B0) !important;
}

[id^="dataGridContainer"] .dx-link[class*="fa-file-excel"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-file-excel"] {
    color: var(--color-success, #28a745) !important;
}

/* Download action - Icono cyan */
[id^="dataGridContainer"] .dx-link[class*="fa-download"],
[id^="dataGridContainer"] .dx-link [class*="fa-download"] {
    color: var(--palette-cyan, #50B8D8) !important;
}

[id^="dataGridContainer"] .dx-link[class*="fa-download"]:hover,
[id^="dataGridContainer"] .dx-link:hover [class*="fa-download"] {
    color: var(--color-info, #17a2b8) !important;
}

/* Default color for unmatched icons - gris neutral */
[id^="dataGridContainer"] .dx-link,
[id^="dataGridContainer"] .dx-link i {
    color: var(--outlook-text-secondary, #605E5C);
}

[id^="dataGridContainer"] .dx-link:hover,
[id^="dataGridContainer"] .dx-link:hover i {
    color: var(--outlook-text-primary, #323130);
}

/* ============================================
   COMMAND COLUMN CELL ADJUSTMENTS
   ============================================ */
[id^="dataGridContainer"] .dx-command-edit {
    padding: var(--spacing-2, 0.375rem) var(--spacing-3, 0.563rem) !important;
}

[id^="dataGridContainer"] .dx-command-edit-with-icons {
    vertical-align: middle !important;
}

/* Ensure proper spacing between action buttons */
[id^="dataGridContainer"] .dx-command-edit .dx-link + .dx-link,
[id^="dataGridContainer"] .dx-command-edit a + a {
    margin-left: var(--spacing-1, 0.188rem);
}

/* Dropdown editor button height adjustment */
[id^="dataGridContainer"] .dx-dropdowneditor-button {
    height: 90% !important;
}

/* ============================================
   MOBILE BUTTONS (moved from inline _Table.cshtml)
   ============================================ */
.mobile-buttons .dx-link {
    width: 20px;
    height: 20px;
    background-position: 0 0;
    background-size: 20px 20px;
    padding: 0;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    margin: 0 4px;
    vertical-align: middle;
    text-decoration: none;
    display: inline-block;
}

/* ============================================
   DEVEXTREME POPUP STYLES
   Los popups se renderizan en el body, fuera del contenedor CRUD
   ============================================ */

/* Popup wrapper y contenido */
.dx-popup-wrapper .dx-popup-content {
    padding: var(--spacing-5, 0.938rem) !important;
    background: var(--outlook-bg-primary, #FFFFFF) !important;
}

.dx-popup-wrapper .dx-popup-title {
    background: var(--binas-navy, #232D4F) !important;
    color: white !important;
    font-size: var(--font-size-md, 1rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    padding: var(--spacing-4, 0.75rem) var(--spacing-5, 0.938rem) !important;
    border-bottom: none !important;
}

.dx-popup-wrapper .dx-closebutton {
    color: white !important;
}

.dx-popup-wrapper .dx-closebutton:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Popup border radius */
.dx-popup-wrapper .dx-overlay-content {
    border-radius: var(--radius-lg, 0.75rem) !important;
    overflow: hidden !important;
    box-shadow: var(--outlook-shadow-elevated, 0 6.4px 14.4px rgba(0,0,0,.10)) !important;
    border: 1px solid var(--outlook-border-light, #E0E0E0) !important;
}

/* Popup toolbar (footer con botones) */
.dx-popup-wrapper .dx-toolbar.dx-popup-bottom {
    background: var(--outlook-bg-secondary, #F5F5F5) !important;
    border-top: 1px solid var(--outlook-border-light, #E0E0E0) !important;
    padding: var(--spacing-3, 0.563rem) var(--spacing-5, 0.938rem) !important;
}

/* Botones del popup */
.dx-popup-wrapper .dx-button-default {
    background: var(--binas-navy, #232D4F) !important;
    border-color: var(--binas-navy, #232D4F) !important;
    color: white !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    padding: var(--spacing-2, 0.375rem) var(--spacing-5, 0.938rem) !important;
}

.dx-popup-wrapper .dx-button-default:hover {
    background: var(--binas-navy-light, #3c4a72) !important;
    border-color: var(--binas-navy-light, #3c4a72) !important;
}

.dx-popup-wrapper .dx-button-normal {
    background: var(--outlook-bg-primary, #FFFFFF) !important;
    border: 1px solid var(--outlook-border, #D1D1D1) !important;
    color: var(--outlook-text-primary, #323130) !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    padding: var(--spacing-2, 0.375rem) var(--spacing-5, 0.938rem) !important;
}

.dx-popup-wrapper .dx-button-normal:hover {
    background: var(--outlook-bg-hover, #E1E1E1) !important;
    border-color: var(--outlook-border-hover, #A6A6A6) !important;
}

/* ============================================
   DEVEXTREME FORM STYLES
   Formularios dentro de popups y en página
   NOTA: Solo cambiar COLORES, no crear bordes nuevos
   DevExtreme maneja el floating label correctamente
   ============================================ */

/* Form container */
.dx-form {
    background: transparent !important;
}

/* Form groups */
.dx-form .dx-form-group {
    margin-bottom: var(--spacing-4, 0.75rem) !important;
}

.dx-form .dx-form-group-caption {
    font-size: var(--font-size-sm, 0.813rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--binas-navy, #232D4F) !important;
    padding-bottom: var(--spacing-2, 0.375rem) !important;
    margin-bottom: var(--spacing-3, 0.563rem) !important;
    border-bottom-color: var(--palette-blue-primary, #4A90E2) !important;
}

.dx-form .dx-form-group-content {
    padding: var(--spacing-3, 0.563rem) 0 !important;
}

/* Form items */
.dx-form .dx-field-item {
    padding: var(--spacing-2, 0.375rem) var(--spacing-3, 0.563rem) !important;
}

/* Form labels */
.dx-form .dx-field-item-label-text {
    font-size: var(--font-size-sm, 0.813rem) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    color: var(--outlook-text-secondary, #605E5C) !important;
}

/* Required asterisk */
.dx-form .dx-field-item-required-mark {
    color: var(--color-danger, #dc3545) !important;
}

/* ============================================
   GRID CELL POLISH (mc-grid-cell hook)
   ============================================ */
.mc-grid-cell {
    transition: background-color 0.15s ease !important;
}

/* ============================================
   FORM EDITOR WIDGET POLISH (mc-editor-widget hook)
   ============================================ */
.mc-editor-widget {
    transition: opacity 0.2s ease;
}

.mc-editor-widget .dx-texteditor {
    border-radius: var(--radius-sm, 0.375rem) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mc-editor-widget .dx-texteditor.dx-state-focused {
    border-color: var(--outlook-border-focus, #0078D4) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.12) !important;
}

.mc-editor-widget .dx-texteditor.dx-state-hover:not(.dx-state-focused) {
    border-color: var(--outlook-border-hover, #A6A6A6) !important;
}

/* ============================================
   SEARCH PANEL REFINEMENT
   ============================================ */
[id^="dataGridContainer"] .dx-datagrid-search-panel,
[id^="dataGridContainer"] .dx-treelist-search-panel {
    border-radius: var(--radius-md, 0.5rem) !important;
    border: 1px solid var(--outlook-border-light, #E0E0E0) !important;
    background: var(--outlook-bg-primary, #FFFFFF) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    min-width: 220px;
}

[id^="dataGridContainer"] .dx-datagrid-search-panel.dx-state-focused,
[id^="dataGridContainer"] .dx-treelist-search-panel.dx-state-focused {
    border-color: var(--outlook-border-focus, #0078D4) !important;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.10) !important;
}

[id^="dataGridContainer"] .dx-datagrid-search-panel .dx-icon-search::before,
[id^="dataGridContainer"] .dx-treelist-search-panel .dx-icon-search::before {
    color: var(--outlook-text-terciary, #8A8886) !important;
}

/* ============================================
   COLUMN CHOOSER BUTTON
   ============================================ */
[id^="dataGridContainer"] .dx-datagrid-column-chooser-button,
[id^="dataGridContainer"] .dx-treelist-column-chooser-button {
    background: var(--outlook-bg-primary, #FFFFFF) !important;
    border: 1px solid var(--outlook-border-light, #E0E0E0) !important;
    border-radius: var(--radius-sm, 0.375rem) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

[id^="dataGridContainer"] .dx-datagrid-column-chooser-button:hover,
[id^="dataGridContainer"] .dx-treelist-column-chooser-button:hover {
    border-color: var(--outlook-border-hover, #A6A6A6) !important;
    box-shadow: var(--outlook-shadow-subtle, 0 1.6px 3.6px rgba(0,0,0,.04)) !important;
}

[id^="dataGridContainer"] .dx-datagrid-column-chooser-button .dx-icon,
[id^="dataGridContainer"] .dx-treelist-column-chooser-button .dx-icon {
    color: var(--outlook-text-secondary, #605E5C) !important;
}

/* ============================================
   PAGER REFINEMENT
   ============================================ */
[id^="dataGridContainer"] .dx-datagrid-pager,
[id^="dataGridContainer"] .dx-treelist-pager {
    border-top: 1px solid var(--outlook-border-light, #E0E0E0) !important;
    background: var(--outlook-bg-secondary, #F5F5F5) !important;
    padding: var(--spacing-2, 0.375rem) var(--spacing-4, 0.75rem) !important;
}

[id^="dataGridContainer"] .dx-page {
    border-radius: var(--radius-sm, 0.375rem) !important;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: var(--font-size-sm, 0.813rem) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    color: var(--outlook-text-secondary, #605E5C) !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

[id^="dataGridContainer"] .dx-page:hover {
    background: var(--outlook-bg-hover, #E1E1E1) !important;
    color: var(--outlook-text-primary, #323130) !important;
}

[id^="dataGridContainer"] .dx-page.dx-selection {
    background: var(--binas-navy, #232D4F) !important;
    color: #FFFFFF !important;
    font-weight: var(--font-weight-semibold, 600) !important;
}

[id^="dataGridContainer"] .dx-navigate-button {
    border-radius: var(--radius-sm, 0.375rem) !important;
    color: var(--outlook-text-secondary, #605E5C) !important;
    transition: background-color 0.15s ease !important;
}

[id^="dataGridContainer"] .dx-navigate-button:hover {
    background: var(--outlook-bg-hover, #E1E1E1) !important;
}

[id^="dataGridContainer"] .dx-page-size {
    border-radius: var(--radius-sm, 0.375rem) !important;
    font-size: var(--font-size-sm, 0.813rem) !important;
    color: var(--outlook-text-secondary, #605E5C) !important;
    transition: background-color 0.15s ease !important;
}

[id^="dataGridContainer"] .dx-page-size.dx-selection {
    background: rgba(var(--binas-navy-rgb, 35, 45, 79), 0.08) !important;
    color: var(--binas-navy, #232D4F) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
}

[id^="dataGridContainer"] .dx-info {
    font-size: var(--font-size-xs, 0.688rem) !important;
    color: var(--outlook-text-terciary, #8A8886) !important;
}

/* ============================================
   ROW TRANSITIONS & FOCUS
   ============================================ */
[id^="dataGridContainer"] .dx-data-row {
    transition: background-color 0.15s ease !important;
}

[id^="dataGridContainer"] .dx-row-focused > td {
    background: var(--outlook-bg-selected, #D6E3F0) !important;
    border-color: rgba(0, 120, 212, 0.15) !important;
}

[id^="dataGridContainer"] .dx-row-focused > td:first-child {
    box-shadow: inset 3px 0 0 var(--outlook-border-focus, #0078D4) !important;
}

/* ============================================
   HEADER SORT INDICATORS
   ============================================ */
[id^="dataGridContainer"] .dx-sort-up::before,
[id^="dataGridContainer"] .dx-sort-down::before {
    color: var(--binas-navy, #232D4F) !important;
    font-size: 0.65rem !important;
}

[id^="dataGridContainer"] .dx-header-filter::before {
    color: var(--outlook-text-terciary, #8A8886) !important;
    transition: color 0.15s ease !important;
}

[id^="dataGridContainer"] .dx-header-filter:hover::before {
    color: var(--outlook-text-primary, #323130) !important;
}

[id^="dataGridContainer"] .dx-header-filter-active::before {
    color: var(--outlook-border-focus, #0078D4) !important;
}

/* ============================================
   EMPTY STATE (NO DATA)
   ============================================ */
[id^="dataGridContainer"] .dx-datagrid-nodata,
[id^="dataGridContainer"] .dx-treelist-nodata {
    font-size: var(--font-size-sm, 0.813rem) !important;
    color: var(--outlook-text-terciary, #8A8886) !important;
    padding: var(--spacing-10, 1.875rem) var(--spacing-6, 1.125rem) !important;
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
[id^="dataGridContainer"] .dx-scrollable-content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[id^="dataGridContainer"] .dx-scrollable-content::-webkit-scrollbar-track {
    background: transparent;
}

[id^="dataGridContainer"] .dx-scrollable-content::-webkit-scrollbar-thumb {
    background: var(--outlook-border, #D1D1D1);
    border-radius: var(--radius-pill, 999px);
}

[id^="dataGridContainer"] .dx-scrollable-content::-webkit-scrollbar-thumb:hover {
    background: var(--outlook-border-hover, #A6A6A6);
}

/* ============================================
   LOADING INDICATOR
   ============================================ */
[id^="dataGridContainer"] .dx-loadindicator-icon .dx-loadindicator-segment {
    background: var(--binas-navy, #232D4F) !important;
}

[id^="dataGridContainer"] .dx-loadpanel-content {
    border-radius: var(--radius-lg, 0.75rem) !important;
    box-shadow: var(--outlook-shadow-elevated, 0 6.4px 14.4px rgba(0,0,0,.10)) !important;
    border: 1px solid var(--outlook-border-light, #E0E0E0) !important;
}

[id^="dataGridContainer"] .dx-loadpanel-message {
    font-size: var(--font-size-sm, 0.813rem) !important;
    color: var(--outlook-text-secondary, #605E5C) !important;
}

/* ============================================
   FORM GROUP VISUAL HIERARCHY
   ============================================ */
.dx-popup-wrapper .dx-form .dx-form-group {
    background: var(--outlook-bg-terciary, #FAFAFA);
    border: 1px solid var(--outlook-border-light, #E0E0E0);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--spacing-3, 0.563rem) !important;
    margin-bottom: var(--spacing-4, 0.75rem) !important;
    position: relative;
    overflow: hidden;
}

.dx-popup-wrapper .dx-form .dx-form-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--palette-blue-primary, #4A90E2);
    border-radius: var(--radius-md, 0.5rem) 0 0 var(--radius-md, 0.5rem);
}

.dx-popup-wrapper .dx-form .dx-form-group-caption {
    font-size: var(--font-size-sm, 0.813rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--binas-navy, #232D4F) !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-left: var(--spacing-2, 0.375rem) !important;
}

.dx-popup-wrapper .dx-form .dx-form-group-content {
    padding: var(--spacing-2, 0.375rem) 0 0 0 !important;
    background: transparent !important;
}

/* ============================================
   VALIDATION MESSAGES
   ============================================ */
.dx-invalid-message > .dx-overlay-content {
    border-radius: var(--radius-sm, 0.375rem) !important;
    font-size: var(--font-size-xs, 0.688rem) !important;
    padding: var(--spacing-1, 0.188rem) var(--spacing-3, 0.563rem) !important;
    box-shadow: var(--outlook-shadow-subtle, 0 1.6px 3.6px rgba(0,0,0,.04)) !important;
}

/* ============================================
   POPUP ENTRANCE ANIMATION
   ============================================ */
.dx-popup-wrapper .dx-overlay-content {
    animation: crudPopupFadeIn 0.2s ease-out;
}

@keyframes crudPopupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   POPUP TITLE BAR CLOSE BUTTON
   ============================================ */
.dx-popup-wrapper .dx-closebutton {
    border-radius: var(--radius-sm, 0.375rem) !important;
    transition: background-color 0.15s ease !important;
}

.dx-popup-wrapper .dx-closebutton:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================
   HEADER FILTER POPUP
   ============================================ */
.dx-header-filter-menu .dx-popup-content {
    border-radius: var(--radius-md, 0.5rem) !important;
}

/* ============================================
   COLUMN CHOOSER POPUP
   ============================================ */
.dx-datagrid-column-chooser .dx-overlay-content,
.dx-treelist-column-chooser .dx-overlay-content {
    border-radius: var(--radius-lg, 0.75rem) !important;
    box-shadow: var(--outlook-shadow-elevated, 0 6.4px 14.4px rgba(0,0,0,.10)) !important;
}

.dx-datagrid-column-chooser .dx-popup-title,
.dx-treelist-column-chooser .dx-popup-title {
    background: var(--binas-navy, #232D4F) !important;
    color: white !important;
    font-size: var(--font-size-sm, 0.813rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
}

/* ============================================
   CHECKBOX / BOOLEAN COLUMN REFINEMENT
   ============================================ */
[id^="dataGridContainer"] .dx-checkbox-icon {
    border-radius: var(--radius-xs, 0.25rem) !important;
    border-color: var(--outlook-border, #D1D1D1) !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

[id^="dataGridContainer"] .dx-checkbox-checked .dx-checkbox-icon {
    background: var(--binas-navy, #232D4F) !important;
    border-color: var(--binas-navy, #232D4F) !important;
}

[id^="dataGridContainer"] .dx-checkbox-indeterminate .dx-checkbox-icon {
    background: var(--outlook-bg-hover, #E1E1E1) !important;
    border-color: var(--outlook-border-hover, #A6A6A6) !important;
}

/* ============================================
   TOOLTIP REFINEMENT
   ============================================ */
.dx-tooltip-wrapper .dx-overlay-content {
    border-radius: var(--radius-sm, 0.375rem) !important;
    font-size: var(--font-size-xs, 0.688rem) !important;
    box-shadow: var(--outlook-shadow-card, 0 3.2px 7.2px rgba(0,0,0,.07)) !important;
}

/* ============================================
   SELECTBOX / DROPDOWNBOX IN EDIT FORMS
   ============================================ */
.dx-popup-wrapper .dx-selectbox,
.dx-popup-wrapper .dx-dropdownbox,
.dx-popup-wrapper .dx-tagbox {
    border-radius: var(--radius-sm, 0.375rem) !important;
}

.dx-popup-wrapper .dx-selectbox.dx-state-focused,
.dx-popup-wrapper .dx-dropdownbox.dx-state-focused,
.dx-popup-wrapper .dx-tagbox.dx-state-focused {
    border-color: var(--outlook-border-focus, #0078D4) !important;
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.12) !important;
}

/* ============================================
   CRUD FORM GROUP OVERRIDE
   Clase para resetear/sobreescribir todos los estilos
   aplicados a .dx-form-group dentro del contexto CRUD.
   Aplicar directamente al elemento .dx-form-group o
   a su contenedor más cercano.
   ============================================ */
.crud-form-group-override.dx-form-group,
.crud-form-group-override .dx-form-group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.crud-form-group-override.dx-form-group::before,
.crud-form-group-override .dx-form-group::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    background: none !important;
}

.crud-form-group-override .dx-form-group-caption {
    font-size: var(--font-size-sm, 0.813rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--binas-navy, #232D4F) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding-left: 0 !important;
    padding-bottom: var(--spacing-2, 0.375rem) !important;
    margin-bottom: var(--spacing-3, 0.563rem) !important;
    border-bottom-color: var(--palette-blue-primary, #4A90E2) !important;
}

.crud-form-group-override .dx-form-group-content {
    padding: var(--spacing-3, 0.563rem) 0 !important;
    background: transparent !important;
}

.crud-form-group-override .dx-field-item {
    padding: var(--spacing-2, 0.375rem) var(--spacing-3, 0.563rem) !important;
}

.crud-form-group-override .dx-field-item-label-text {
    font-size: var(--font-size-sm, 0.813rem) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    color: var(--outlook-text-secondary, #605E5C) !important;
}

.crud-form-group-override .dx-field-item-required-mark {
    color: var(--color-danger, #dc3545) !important;
}

/* ============================================
   CRUD CONTAINER FADE-IN ANIMATION
   ============================================ */
.animate-fade-in-up {
    animation: crudFadeInUp 0.35s ease-out both;
}

@keyframes crudFadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   TREE LIST SPECIFIC
   ============================================ */
[id^="dataGridContainer"] .dx-treelist-expanded .dx-treelist-icon-container .dx-icon,
[id^="dataGridContainer"] .dx-treelist-collapsed .dx-treelist-icon-container .dx-icon {
    color: var(--outlook-text-secondary, #605E5C) !important;
    transition: color 0.15s ease, transform 0.2s ease !important;
}

[id^="dataGridContainer"] .dx-treelist-expanded .dx-treelist-icon-container .dx-icon:hover,
[id^="dataGridContainer"] .dx-treelist-collapsed .dx-treelist-icon-container .dx-icon:hover {
    color: var(--binas-navy, #232D4F) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .crud-container {
        padding: var(--spacing-3, 0.563rem);
    }

    [id^="dataGridContainer"] .dx-header-row td,
    [id^="dataGridContainer"] .dx-header-row th {
        font-size: var(--font-size-xs, 0.688rem) !important;
        padding: var(--spacing-2, 0.375rem) var(--spacing-3, 0.563rem) !important;
    }

    [id^="dataGridContainer"] .dx-data-row td {
        font-size: var(--font-size-xs, 0.688rem) !important;
        padding: var(--spacing-2, 0.375rem) var(--spacing-3, 0.563rem) !important;
    }

    [id^="dataGridContainer"] .dx-link,
    [id^="dataGridContainer"] .dx-link-icon,
    [id^="dataGridContainer"] a.dx-link {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   BUTTON MODE OVERRIDES (CRUD - DevExtreme)
   Usa las clases en <body> definidas por layout:
   - binas-btn-mode-legacy
   - binas-btn-mode-current
   - binas-btn-mode-v3-soft
   - binas-btn-mode-v3-strong
   ============================================ */

/* Legacy: más rectangular y amplio */
body.binas-btn-mode-legacy .crud-container .dx-button,
body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-datagrid-addrow-button,
body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-treelist-addrow-button {
    border-radius: var(--radius-xs, 0.25rem) !important;
    min-height: 36px !important;
    padding: var(--spacing-3, 0.563rem) var(--spacing-4, 0.75rem) !important;
}

body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-link,
body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-link-icon,
body.binas-btn-mode-legacy [id^="dataGridContainer"] a.dx-link {
    width: 30px !important;
    height: 30px !important;
    border-radius: var(--radius-xs, 0.25rem) !important;
}

/* Current: base equilibrado */
body.binas-btn-mode-current .crud-container .dx-button,
body.binas-btn-mode-current [id^="dataGridContainer"] .dx-datagrid-addrow-button,
body.binas-btn-mode-current [id^="dataGridContainer"] .dx-treelist-addrow-button {
    min-height: 34px !important;
}

/* V3 Soft: más compacto/suave */
body.binas-btn-mode-v3-soft .crud-container .dx-button,
body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-datagrid-addrow-button,
body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-treelist-addrow-button {
    min-height: 32px !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    padding: calc(var(--spacing-2, 0.375rem) - 1px) var(--spacing-3, 0.563rem) !important;
    box-shadow: var(--outlook-shadow-subtle, 0 1.6px 3.6px rgba(0,0,0,.04)) !important;
}

body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-link,
body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-link-icon,
body.binas-btn-mode-v3-soft [id^="dataGridContainer"] a.dx-link {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: var(--radius-md, 0.5rem) !important;
}

/* V3 Strong: más marcado/visible */
body.binas-btn-mode-v3-strong .crud-container .dx-button,
body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-datagrid-addrow-button,
body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-treelist-addrow-button {
    min-height: 34px !important;
    border-radius: var(--radius-lg, 0.75rem) !important;
    padding: var(--spacing-2, 0.375rem) calc(var(--spacing-3, 0.563rem) + 2px) !important;
    box-shadow: var(--outlook-shadow-card, 0 3.2px 7.2px rgba(0,0,0,.08)) !important;
}

body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-link,
body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-link-icon,
body.binas-btn-mode-v3-strong [id^="dataGridContainer"] a.dx-link {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: var(--radius-lg, 0.75rem) !important;
    box-shadow: var(--outlook-shadow-subtle, 0 1.6px 3.6px rgba(0,0,0,.04)) !important;
}

/* ============================================
   MODE OVERRIDES: TOOLBAR / SEARCH / PAGER
   ============================================ */

/* Legacy: un poco más grande y clásico */
body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-datagrid-search-panel,
body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-treelist-search-panel {
    border-radius: var(--radius-sm, 0.375rem) !important;
    min-height: 36px !important;
}

body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-datagrid-column-chooser-button,
body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-treelist-column-chooser-button {
    border-radius: var(--radius-sm, 0.375rem) !important;
    min-height: 34px !important;
}

body.binas-btn-mode-legacy [id^="dataGridContainer"] .dx-page {
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--radius-sm, 0.375rem) !important;
}

/* Current: mantiene baseline */
body.binas-btn-mode-current [id^="dataGridContainer"] .dx-datagrid-search-panel,
body.binas-btn-mode-current [id^="dataGridContainer"] .dx-treelist-search-panel {
    border-radius: var(--radius-md, 0.5rem) !important;
}

/* V3 Soft: más compacto/suave */
body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-datagrid-search-panel,
body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-treelist-search-panel {
    border-radius: var(--radius-md, 0.5rem) !important;
    min-height: 32px !important;
    box-shadow: var(--outlook-shadow-subtle, 0 1.6px 3.6px rgba(0,0,0,.04)) !important;
}

body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-datagrid-column-chooser-button,
body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-treelist-column-chooser-button {
    border-radius: var(--radius-md, 0.5rem) !important;
    min-height: 30px !important;
}

body.binas-btn-mode-v3-soft [id^="dataGridContainer"] .dx-page {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: var(--radius-md, 0.5rem) !important;
}

/* V3 Strong: más marcado */
body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-datagrid-search-panel,
body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-treelist-search-panel {
    border-radius: var(--radius-lg, 0.75rem) !important;
    min-height: 34px !important;
    border-color: rgba(var(--palette-blue-primary-rgb), 0.35) !important;
    box-shadow: var(--outlook-shadow-card, 0 3.2px 7.2px rgba(0,0,0,.07)) !important;
}

body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-datagrid-column-chooser-button,
body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-treelist-column-chooser-button {
    border-radius: var(--radius-lg, 0.75rem) !important;
    min-height: 32px !important;
    border-color: rgba(var(--palette-blue-primary-rgb), 0.38) !important;
}

body.binas-btn-mode-v3-strong [id^="dataGridContainer"] .dx-page {
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: var(--radius-lg, 0.75rem) !important;
}