/* =============================================================
   RedControl · compact-density.css  (v21)
   Se carga DESPUÉS de app-ux.css.
   Objetivo: reducir densidad visual sin alterar funcionalidad.
   Ajusta escala tipográfica, padding, alturas de controles.
   ============================================================= */

:root {
    --rc-header-height: 52px;
    --rc-sidebar-w: 220px;
    --rc-sidebar-w-collapsed: 62px;
    --rc-content-px: 22px;
    --rc-content-py-top: 18px;
    --rc-content-py-bottom: 36px;
    --rc-panel-p: 14px;
    --rc-panel-radius: 10px;
    --rc-gap-sm: 8px;
    --rc-gap-md: 12px;
    --rc-gap-lg: 16px;
}

/* -------- Layout base -------- */
.sidebar { width: var(--rc-sidebar-w); }
main { margin-left: var(--rc-sidebar-w); }
.app-shell.sidebar-collapsed .sidebar { width: var(--rc-sidebar-w-collapsed); }
.app-shell.sidebar-collapsed main { margin-left: var(--rc-sidebar-w-collapsed); }
.topbar { height: var(--rc-header-height); padding: 0 20px; }
.topbar .topbar-context h2 { font-size: 13px; letter-spacing: -.01em; }
.topbar .topbar-context span { font-size: 9px; }
.icon-button { width: 34px; height: 34px; border-radius: 8px; }
.user-chip { min-height: 32px; padding: 0 10px; font-size: 10.5px; }
main > .content, main > .page-content, main > section, main > article, main > div.page,
main > .rc-page, main > .page-shell { padding: var(--rc-content-py-top) var(--rc-content-px) var(--rc-content-py-bottom); }

/* Fallback general: el main directo también */
main { padding: 0; }
main > *:not(.topbar) { padding-left: var(--rc-content-px); padding-right: var(--rc-content-px); }
main > .topbar { padding: 0 20px; }
main > .page-heading:first-of-type,
main > .map-page-heading:first-of-type { padding-top: var(--rc-content-py-top); }

/* -------- Sidebar más compacto -------- */
.sidebar .brand { padding: 12px 14px; }
.sidebar nav { padding: 6px 8px 18px; gap: 1px; }
.sidebar nav a { padding: 7px 10px; font-size: 12.5px; border-radius: 7px; gap: 10px; }
.sidebar nav a .rz-icon { font-size: 18px; }
.nav-caption { margin: 10px 4px 4px; font-size: 9px; letter-spacing: .12em; }

/* -------- Headings -------- */
.page-heading, .map-page-heading { margin-bottom: 14px; gap: 16px; }
.page-heading h1, .map-page-heading h1 { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; }
.page-heading p, .map-page-heading p { font-size: 12px; margin-top: 3px; }
.eyebrow { font-size: 9px; margin-bottom: 4px; letter-spacing: .12em; }
.heading-actions { gap: 8px; }
.compact-heading { margin-bottom: 12px; }

/* -------- KPIs mucho más compactos -------- */
.kpi-grid { gap: 10px; margin-bottom: 14px; }
.kpi-card { min-height: 76px; padding: 11px 13px; border-radius: 9px; }
.kpi-card::before { width: 2px; }
.kpi-card > span { font-size: 10px; letter-spacing: .01em; }
.kpi-card > strong { font-size: 18px; margin: 5px 0 1px; letter-spacing: -.02em; }
.kpi-card > small { font-size: 9.5px; }
.kpi-icon { top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 7px; }
.kpi-icon .rz-icon { font-size: 14px; }
.compact-kpis .kpi-card { min-height: 72px; padding: 10px 12px; }
.compact-kpis .kpi-card > strong { font-size: 17px; }

/* Badge píldora dentro de KPI (heredado de v11): más pequeña */
.kpi-card .kpi-badge,
.kpi-card [class*="badge"] { font-size: 9px; padding: 1px 6px; }

/* -------- Panels -------- */
.panel { padding: var(--rc-panel-p); border-radius: var(--rc-panel-radius); }
.panel-title { margin-bottom: 10px; gap: 12px; }
.panel-title h2 { font-size: 14.5px; letter-spacing: -.005em; }
.panel-title p { font-size: 10.5px; margin-top: 2px; }
.enterprise-panel-title { margin-bottom: 12px; }
.clean-panel-title { padding-bottom: 8px; }

/* -------- Botones Radzen -------- */
.rz-button { padding: 6px 12px !important; font-size: 12px !important; min-height: 32px !important; border-radius: 7px !important; }
.rz-button .rz-button-icon-left { font-size: 15px !important; margin-right: 5px !important; }
.rz-button.rz-button-md { min-height: 32px !important; }
.rz-button.rz-button-sm { padding: 4px 9px !important; font-size: 11px !important; min-height: 26px !important; }
.rz-button.rz-button-xs { padding: 3px 7px !important; font-size: 10.5px !important; min-height: 22px !important; }
.rz-button-icon-only { padding: 6px !important; min-width: 32px !important; }
.rz-button-icon-only.rz-button-sm { min-width: 26px !important; }
.row-actions { gap: 4px; }
.row-actions .rz-button { padding: 4px !important; min-width: 26px !important; min-height: 26px !important; }
.row-actions .rz-button .rz-icon { font-size: 15px; }

/* -------- Inputs Radzen compactos -------- */
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker,
.rz-textbox input, .rz-dropdown-label, .rz-numeric input, .rz-datepicker input {
    min-height: 32px !important;
    font-size: 12.5px !important;
}
.rz-textbox, .rz-dropdown, .rz-numeric, .rz-datepicker { border-radius: 7px !important; }
.rz-textbox input, .rz-numeric input, .rz-datepicker input { padding: 5px 9px !important; }
.rz-dropdown-label { padding: 5px 9px !important; }
.rz-textarea { min-height: 60px !important; font-size: 12.5px !important; padding: 7px 9px !important; border-radius: 7px !important; }
.rz-listbox-item, .rz-multiselect-item, .rz-dropdown-panel .rz-dropdown-item { padding: 6px 10px !important; font-size: 12.5px !important; }

/* -------- Formularios (dialog-grid, form-grid, toolbar-fields) -------- */
.dialog-form { gap: 12px; }
.dialog-grid { gap: 9px 12px; }
.dialog-grid > label, .form-grid > label { font-size: 10.5px; gap: 4px; letter-spacing: .01em; color: var(--rc-muted); font-weight: 600; }
.dialog-grid > label .required, .form-grid > label .required { color: var(--rc-danger); font-weight: 700; margin-left: 2px; }
.dialog-section { padding-top: 10px; gap: 8px; }
.dialog-section-head { margin-bottom: 4px; }
.dialog-section-head h3 { font-size: 11px !important; text-transform: uppercase; letter-spacing: .1em; color: var(--rc-muted); font-weight: 700; }
.dialog-section-head::after { content: ""; flex: 1; height: 1px; background: var(--rc-border); margin-left: 8px; }
.dialog-actions { gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--rc-border); }
.dialog-choice { gap: 8px; }
.dialog-choice button { padding: 8px 12px !important; font-size: 12px; gap: 6px; border-radius: 8px !important; }
.dialog-choice button .rz-icon { font-size: 17px; }
.toolbar-fields { gap: 8px; }
.toolbar-fields .rz-textbox, .toolbar-fields .rz-dropdown { min-width: 160px; }
.toolbar-fields.compact .rz-textbox, .toolbar-fields.compact .rz-dropdown { min-width: 140px; }

/* -------- Grid de 3 columnas en desktop (opt-in con dialog-grid-3) -------- */
.dialog-grid.three,
.dialog-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dialog-grid.three .span-3,
.dialog-grid-3 .span-3 { grid-column: 1 / -1; }
.dialog-grid.three .span-2,
.dialog-grid-3 .span-2 { grid-column: span 2; }
@media (max-width: 900px) {
    .dialog-grid.three, .dialog-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dialog-grid.three .span-2, .dialog-grid-3 .span-2 { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .dialog-grid, .dialog-grid.three, .dialog-grid-3 { grid-template-columns: 1fr; }
    .dialog-grid .span-2, .dialog-grid .span-3,
    .dialog-grid-3 .span-2, .dialog-grid-3 .span-3 { grid-column: 1 / -1; }
}

/* -------- Tablas Radzen aún más apretadas -------- */
.rz-datatable thead th { padding: 7px 10px !important; font-size: 10px !important; letter-spacing: .06em; }
.rz-datatable tbody td { padding: 6px 10px !important; font-size: 12px !important; }
.rz-datatable .rz-datatable-scrollable-body { font-size: 12px; }
.entity-cell { gap: 8px; }
.entity-cell .entity-avatar { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
.entity-cell strong { font-size: 12.5px; }
.entity-cell small { font-size: 10.5px; }
.badge { padding: 2px 7px; font-size: 10px; border-radius: 10px; }
.rz-pager { padding: 6px 10px !important; font-size: 11px !important; }
.rz-pager .rz-paginator-element { min-width: 26px !important; height: 26px !important; }

/* -------- Toolbars y filtros compactos -------- */
.billing-toolbar, .billing-summary-inline, .period-selector { gap: 10px; }
.billing-summary-inline span { font-size: 11px; }
.billing-summary-inline b { font-size: 12.5px; }
.period-selector label { font-size: 10.5px; gap: 3px; }
.clean-filter-panel { padding: 10px 14px; }

/* -------- Diálogos Radzen contenedores -------- */
.rz-dialog { border-radius: 12px !important; }
.rz-dialog .rz-dialog-titlebar { padding: 12px 18px !important; min-height: 44px !important; }
.rz-dialog .rz-dialog-titlebar .rz-dialog-title { font-size: 14px !important; font-weight: 700; letter-spacing: -.01em; }
.rz-dialog .rz-dialog-content { padding: 14px 18px !important; }

/* -------- Notificaciones más pequeñas -------- */
/* El contenedor permanece invisible; la densidad se aplica a cada aviso real. */
.rz-notification { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.rz-notification:empty { display: none !important; }
.rz-notification-item { padding: 10px 14px !important; font-size: 12px !important; border-radius: 9px !important; }
.rz-notification-title { font-size: 12.5px !important; }
.rz-notification-message { font-size: 11.5px !important; }

/* -------- Result cards / KPI list variantes -------- */
.result-card { padding: 10px 12px; border-radius: 9px; }
.result-card > span { font-size: 11px; }
.result-card strong { font-size: 15px; }

/* -------- Quick grid (dashboard) -------- */
.quick-grid { gap: 10px; }
.quick-grid > a, .quick-grid > article { padding: 12px 14px; border-radius: 9px; }
.quick-grid strong { font-size: 13px; }
.quick-grid small { font-size: 10.5px; }

/* -------- Mapa: ajuste HUD/floating tools a la nueva densidad -------- */
.map-floating-tools button { width: 32px; height: 32px; }
.map-floating-tools button .rz-icon { font-size: 17px; }
.map-mode-banner { padding: 8px 14px; font-size: 11.5px; }
.map-mode-banner .rz-icon { font-size: 16px; }
.map-cursor-hud { padding: 4px 8px; font-size: 10.5px; }
.workspace-heading { font-size: 13.5px; }
.map-workspace { height: calc(100vh - 180px); }

/* -------- Responsive breakpoint refinado -------- */
@media (max-width: 1024px) {
    main > *:not(.topbar) { padding-left: 16px; padding-right: 16px; }
    .kpi-grid.five, .kpi-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .kpi-grid.three { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .page-heading h1 { font-size: 19px; }
    .kpi-card { min-height: 66px; padding: 9px 11px; }
    .kpi-card > strong { font-size: 16px; }
    main > *:not(.topbar) { padding-left: 12px; padding-right: 12px; }
}

/* -------- Filas de grid seleccionables: cursor pointer + hover claro -------- */
.selectable-grid .rz-data-row { cursor: pointer; }
.selectable-grid .rz-data-row:hover td { background: color-mix(in srgb, var(--rc-primary) 5%, transparent) !important; }
.selectable-grid .rz-data-row td:last-child { position: relative; }

/* -------- Compensación para no romper el mapa en pantalla completa -------- */
.map-workspace:fullscreen { padding: 0; height: 100vh; }

/* =========================================================
   V15 · Formularios operativos
   ========================================================= */

.dialog-form {
    gap: 14px !important;
}

.dialog-form > .dialog-section {
    padding: 14px !important;
    border: 1px solid var(--rc-border) !important;
    border-radius: 11px !important;
    background: var(--rc-surface-soft) !important;
}

.dialog-form > .dialog-section:first-child {
    padding-top: 14px !important;
    border-top: 1px solid var(--rc-border) !important;
}

.dialog-section-head {
    align-items: flex-start !important;
    margin-bottom: 8px !important;
}

.dialog-section-head::after {
    display: none !important;
}

.dialog-section-head h3 {
    margin: 0 !important;
    color: var(--rc-text) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.dialog-section-head p,
.dialog-section-head span.dialog-section-help {
    margin: 3px 0 0 !important;
    color: var(--rc-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
}

.dialog-grid > label,
.form-grid > label {
    gap: 5px !important;
    color: var(--rc-muted) !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
}

.rz-dialog .rz-dropdown,
.rz-dialog .rz-numeric,
.rz-dialog .rz-datepicker,
.rz-dialog input.rz-textbox,
.rz-dialog textarea.rz-textarea,
.rz-dialog .rz-autocomplete,
.rz-dialog input.credential-password-input {
    min-height: 36px !important;
    border-radius: 8px !important;
}

.rz-dialog textarea.rz-textarea {
    min-height: 70px !important;
}

.dialog-actions {
    bottom: -14px !important;
    margin: 2px -18px -14px !important;
    padding: 11px 18px 14px !important;
    background: color-mix(in srgb, var(--rc-surface) 96%, transparent) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 -8px 18px rgba(15,23,42,.04);
}

.dialog-toggle-row {
    padding: 10px 12px;
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    background: var(--rc-surface-soft);
}

.dialog-toggle-row > label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--rc-text);
    font-size: 11px;
    font-weight: 650;
}

.catalog-editor-preview {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed var(--rc-border-strong, var(--rc-border));
    border-radius: 9px;
    background: var(--rc-surface);
}

.catalog-editor-preview .catalog-map-icon-preview {
    width: 42px;
    height: 42px;
    border-radius: 11px;
}

.catalog-editor-preview strong {
    display: block;
    color: var(--rc-text);
    font-size: 12px;
}

.catalog-editor-preview small {
    display: block;
    margin-top: 2px;
    color: var(--rc-muted);
    font-size: 10px;
}

.endpoint-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    background: var(--rc-surface);
}

.endpoint-summary .endpoint-node {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.endpoint-summary .endpoint-node:last-child { text-align: right; }
.endpoint-summary .endpoint-node small { color: var(--rc-muted); font-size: 9.5px; }
.endpoint-summary .endpoint-node strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.endpoint-summary .rz-icon { color: var(--rc-primary); }

@media (max-width: 620px) {
    .dialog-form > .dialog-section { padding: 11px !important; }
    .dialog-actions { margin-left: -14px !important; margin-right: -14px !important; }
    .endpoint-summary { grid-template-columns: 1fr; }
    .endpoint-summary .endpoint-node:last-child { text-align: left; }
    .endpoint-summary > .rz-icon { transform: rotate(90deg); }
}

/* =========================================================
   V17 · Diálogos nítidos y formularios operativos
   ========================================================= */
/* La máscara no debe quedar encima del propio diálogo. En V16 máscara y
   wrapper compartían z-index, lo que podía dejar todo el formulario apagado. */
.rz-dialog-wrapper {
    z-index: 7000 !important;
    opacity: 1 !important;
    filter: none !important;
}
.rz-dialog-mask {
    z-index: 0 !important;
    background: rgba(15, 23, 42, .34) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.rz-dialog-wrapper .rz-dialog {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    filter: none !important;
    background: var(--rc-surface) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .24) !important;
}
.rz-dialog-wrapper .rz-dialog-content,
.rz-dialog-wrapper .rz-dialog-titlebar,
.rz-dialog-wrapper .dialog-form,
.rz-dialog-wrapper .dialog-section {
    opacity: 1 !important;
    filter: none !important;
}
.rz-dialog .rz-dialog-titlebar {
    background: var(--rc-surface) !important;
}
.rz-dialog .rz-dialog-content {
    background: var(--rc-surface) !important;
    max-height: calc(100dvh - 128px) !important;
    overflow: auto !important;
}
.dialog-actions {
    background: var(--rc-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, .05) !important;
}
.dialog-form > .dialog-section {
    background: var(--rc-surface) !important;
    border-color: color-mix(in srgb, var(--rc-border) 82%, transparent) !important;
}
.rz-dialog input.rz-textbox,
.rz-dialog textarea.rz-textarea,
.rz-dialog .rz-dropdown,
.rz-dialog .rz-numeric,
.rz-dialog .rz-datepicker,
.rz-dialog input.credential-password-input {
    background: var(--rc-surface) !important;
    color: var(--rc-text) !important;
}

/* V18 · ubicación de clientes */
.dialog-inline-note {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--rc-border, #dbe3ef);
    border-radius: 10px;
    color: var(--rc-muted, #64748b);
    font-size: 12px;
    line-height: 1.35;
}
.dialog-inline-note .rzi { font-size: 18px; flex: 0 0 auto; }

/* ============================================================
   V19 · Editor de planes por pestañas
   ============================================================ */
.plan-editor {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0 !important;
    min-height: min(680px, calc(100dvh - 150px));
}

.plan-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--rc-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.plan-tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--rc-muted);
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.plan-tab:hover {
    background: var(--rc-surface-subtle);
    color: var(--rc-text);
}

.plan-tab.active {
    background: var(--rc-primary-soft);
    border-color: color-mix(in srgb, var(--rc-primary) 28%, var(--rc-border));
    color: var(--rc-primary-ink);
}

.plan-tab .rz-icon { font-size: 18px; }

.plan-tab-count {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--rc-muted) 12%, transparent);
    color: inherit;
    font-size: 10px;
    line-height: 1;
}

.plan-tab.active .plan-tab-count {
    background: color-mix(in srgb, var(--rc-primary) 14%, transparent);
}

.plan-tab-body {
    min-height: 0;
    max-height: min(62dvh, 650px);
    overflow: auto;
    padding: 14px 4px 12px 0;
}

.plan-tab-content {
    display: grid;
    gap: 14px;
}

.plan-section-card {
    padding: 14px !important;
    border: 1px solid var(--rc-border) !important;
    border-radius: 12px;
    background: var(--rc-surface) !important;
}

.plan-section-card .dialog-section-head strong {
    display: block;
    color: var(--rc-text);
    font-size: 13px;
}

.plan-section-card .dialog-section-head small {
    display: block;
    margin-top: 3px;
    color: var(--rc-muted);
    font-size: 11px;
    line-height: 1.35;
}

.plan-option-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    background: var(--rc-surface-subtle);
}

.plan-option-card.compact { margin-top: -2px; }

.plan-option-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.plan-option-copy strong {
    color: var(--rc-text);
    font-size: 12px;
}

.plan-option-copy span {
    color: var(--rc-muted);
    font-size: 11px;
    line-height: 1.4;
}

.plan-services-head { align-items: flex-end !important; }

.plan-price-summary {
    display: grid;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

.plan-price-summary span {
    color: var(--rc-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.plan-price-summary strong {
    color: var(--rc-text);
    font-size: 18px;
}

.plan-service-picker,
.plan-requirement-entry {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 120px auto;
    gap: 10px;
    align-items: end;
}

.plan-requirement-entry {
    grid-template-columns: minmax(260px, 1fr) 120px 125px auto;
}

.plan-service-picker > label,
.plan-requirement-entry > label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--rc-muted);
    font-size: 11px;
    font-weight: 700;
}

.plan-service-picker .rz-dropdown,
.plan-service-picker .rz-numeric,
.plan-requirement-entry .rz-dropdown,
.plan-requirement-entry .rz-numeric {
    width: 100% !important;
}

.plan-switch-inline {
    min-height: 40px;
    grid-template-columns: 1fr auto !important;
    align-items: center;
    padding: 0 2px;
}

.plan-service-preview {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed var(--rc-border);
    border-radius: 10px;
    background: var(--rc-surface-subtle);
}

.plan-service-preview > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.plan-service-preview strong { color: var(--rc-text); font-size: 12px; }
.plan-service-preview span { color: var(--rc-muted); font-size: 10px; }

.plan-service-preview-values {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.plan-service-preview-values span {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
}

.plan-empty-state {
    min-height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    border: 1px dashed var(--rc-border);
    border-radius: 11px;
    color: var(--rc-muted);
    text-align: left;
}

.plan-empty-state .rz-icon { font-size: 30px; }
.plan-empty-state > div { display: grid; gap: 3px; }
.plan-empty-state strong { color: var(--rc-text); font-size: 12px; }
.plan-empty-state span { font-size: 11px; }

.plan-service-list { display: grid; gap: 7px; }

.plan-service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 110px auto;
    gap: 12px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    background: var(--rc-surface-subtle);
}

.plan-service-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-service-icon,
.plan-requirement-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--rc-surface);
    border: 1px solid var(--rc-border);
    color: var(--rc-primary-ink);
}

.plan-service-main > div:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.plan-service-main strong {
    color: var(--rc-text);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-service-main span { color: var(--rc-muted); font-size: 10px; }

.plan-qty-control {
    display: inline-grid;
    grid-template-columns: 30px 48px 30px;
    align-items: center;
    justify-items: center;
    gap: 3px;
}

.plan-qty-control .rz-button { min-width: 30px !important; width: 30px !important; height: 30px !important; padding: 0 !important; }
.plan-qty-control strong { font-size: 11px; color: var(--rc-text); }
.plan-service-total { text-align: right; color: var(--rc-text); font-weight: 800; font-size: 12px; }

.plan-info-grid,
.plan-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.plan-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.plan-info-card,
.plan-summary-card {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    background: var(--rc-surface);
}

.plan-info-card.emphasis { background: var(--rc-primary-soft); }
.plan-info-card > span,
.plan-summary-card > span { color: var(--rc-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.plan-info-card strong,
.plan-summary-card strong { color: var(--rc-text); font-size: 14px; }
.plan-info-card small,
.plan-summary-card small { color: var(--rc-muted); font-size: 10px; line-height: 1.35; }

.plan-warning {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--rc-danger, #dc2626) 38%, var(--rc-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--rc-danger, #dc2626) 7%, var(--rc-surface));
}

.plan-warning .rz-icon { color: var(--rc-danger, #dc2626); }
.plan-warning > div { display: grid; gap: 3px; }
.plan-warning strong { color: var(--rc-text); font-size: 11px; }
.plan-warning span { color: var(--rc-muted); font-size: 10px; line-height: 1.4; }

.plan-requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.plan-requirement-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--rc-border);
    border-radius: 10px;
    background: var(--rc-surface-subtle);
}

.plan-requirement-card > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.plan-requirement-card strong { color: var(--rc-text); font-size: 11px; }
.plan-requirement-card span { color: var(--rc-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-requirement-card b { color: var(--rc-text); font-size: 12px; }

.plan-requirement-row { grid-template-columns: minmax(0, 1fr) auto !important; }
.plan-requirement-row > div { display: grid; gap: 2px; }
.plan-requirement-row span { color: var(--rc-muted); font-size: 10px; }

.plan-summary-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--rc-primary) 24%, var(--rc-border));
    border-radius: 13px;
    background: var(--rc-primary-soft);
}

.plan-summary-hero > div:first-child { display: grid; gap: 2px; }
.plan-summary-hero span { color: var(--rc-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.plan-summary-hero strong { color: var(--rc-primary-ink); font-size: 28px; line-height: 1.1; }
.plan-summary-hero small { color: var(--rc-muted); font-size: 11px; }

.plan-summary-status {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid var(--rc-border);
    background: var(--rc-surface);
    color: var(--rc-muted);
}

.plan-summary-status.active { color: var(--rc-primary-ink); border-color: color-mix(in srgb, var(--rc-primary) 30%, var(--rc-border)); }

.plan-check-list { display: grid; gap: 8px; }

.plan-check-list > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rc-muted);
    font-size: 11px;
}

.plan-check-list > div.ok .rz-icon { color: var(--rc-success, #16a34a); }
.plan-check-list > div.error .rz-icon { color: var(--rc-danger, #dc2626); }
.plan-check-list > div.pending .rz-icon { color: var(--rc-muted); }

.plan-actions {
    margin-top: 0 !important;
    padding-top: 12px !important;
}

@media (max-width: 900px) {
    .plan-editor { min-height: 0; }
    .plan-tab-body { max-height: none; }
    .plan-service-picker,
    .plan-requirement-entry { grid-template-columns: 1fr 120px; }
    .plan-service-picker > .rz-button,
    .plan-requirement-entry > .rz-button { grid-column: 1 / -1; }
    .plan-requirement-entry .plan-switch-inline { grid-column: 1 / -1; }
    .plan-info-grid,
    .plan-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-service-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .plan-service-total { display: none; }
}

@media (max-width: 620px) {
    .plan-tabs { margin-right: -8px; }
    .plan-service-picker,
    .plan-requirement-entry,
    .plan-info-grid,
    .plan-summary-grid,
    .plan-requirements-grid { grid-template-columns: 1fr; }
    .plan-service-preview { align-items: flex-start; flex-direction: column; }
    .plan-service-preview-values { justify-content: flex-start; }
    .plan-service-row { grid-template-columns: minmax(0, 1fr) auto; }
    .plan-qty-control { grid-column: 1; justify-self: start; }
    .plan-summary-hero { align-items: flex-start; flex-direction: column; }
}

.field-help {
    display: block;
    margin-top: 4px;
    color: var(--rc-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}

/* V20 · Comercial: servicios y promociones */
.commercial-dialog-tabs {
    min-height: 620px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.commercial-dialog-tabs .plan-tabs { flex: 0 0 auto; }
.commercial-tab-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 2px 18px;
}

.commercial-dialog-tabs .plan-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dialog-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.dialog-toggle-grid.single-column { grid-template-columns: 1fr; }

.setting-switch-card {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid var(--rc-border);
    border-radius: 11px;
    background: var(--rc-surface);
}
.setting-switch-card > span { min-width: 0; display: grid; gap: 2px; }
.setting-switch-card strong { color: var(--rc-text); font-size: 11px; }
.setting-switch-card small { color: var(--rc-muted); font-size: 10px; line-height: 1.4; font-weight: 500; }

.tax-rate-box,
.promo-value-box {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.field-explainer {
    min-height: 42px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--rc-primary) 24%, var(--rc-border));
    border-radius: 10px;
    background: var(--rc-primary-soft);
    color: var(--rc-muted);
    font-size: 10.5px;
    line-height: 1.45;
}
.field-explainer .rz-icon { color: var(--rc-primary-ink); font-size: 17px; }
.field-explainer strong { color: var(--rc-text); }
.field-explainer.neutral { background: var(--rc-surface-subtle); border-color: var(--rc-border); }

.compact-empty {
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px dashed var(--rc-border);
    border-radius: 9px;
    color: var(--rc-muted);
    font-size: 10.5px;
    background: var(--rc-surface-subtle);
}

.choice-cards {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}
.choice-cards.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card {
    appearance: none;
    border: 1px solid var(--rc-border);
    border-radius: 11px;
    background: var(--rc-surface);
    color: var(--rc-text);
    min-height: 80px;
    padding: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    text-align: left;
    cursor: pointer;
}
.choice-card:hover { border-color: color-mix(in srgb, var(--rc-primary) 34%, var(--rc-border)); }
.choice-card.active {
    border-color: color-mix(in srgb, var(--rc-primary) 58%, var(--rc-border));
    background: var(--rc-primary-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc-primary) 16%, transparent);
}
.choice-card > .rz-icon { font-size: 22px; color: var(--rc-primary-ink); }
.choice-card > span { display: grid; gap: 3px; }
.choice-card strong { font-size: 11px; }
.choice-card small { color: var(--rc-muted); font-size: 10px; line-height: 1.35; font-weight: 500; }

.summary-explanation { margin-top: 12px; }
.sticky-dialog-actions {
    flex: 0 0 auto;
    margin-top: 0 !important;
    position: relative;
    z-index: 2;
    background: var(--rc-surface);
}

.subscription-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.promo-chip {
    color: var(--rc-primary-ink) !important;
    background: var(--rc-primary-soft);
    border: 1px solid color-mix(in srgb, var(--rc-primary) 20%, var(--rc-border));
    border-radius: 999px;
    padding: 2px 7px;
}
.promo-contract-preview {
    min-height: 54px;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    background: var(--rc-surface-subtle);
}
.promo-contract-preview small { color: var(--rc-muted); font-size: 9.5px; text-transform: uppercase; font-weight: 700; }
.promo-contract-preview strong { color: var(--rc-text); font-size: 11px; }

@media (max-width: 760px) {
    .commercial-dialog-tabs { min-height: 0; max-height: 88vh; }
    .dialog-toggle-grid,
    .choice-cards.two-columns,
    .tax-rate-box,
    .promo-value-box,
    .commercial-dialog-tabs .plan-summary-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V21 · Comercial UX, diálogos de una sola zona de scroll
   y tablas con filtros avanzados
   ============================================================ */
.rz-dialog:has(.commercial-editor) {
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
}

.rz-dialog:has(.commercial-editor) .rz-dialog-content {
    display: flex !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 20px !important;
}

.commercial-editor {
    width: 100%;
    height: min(720px, calc(100dvh - 118px));
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0 !important;
    overflow: hidden !important;
}

.commercial-editor > .plan-tabs,
.commercial-editor-tabs {
    flex: none !important;
    padding: 10px 0 11px;
    margin: 0;
    background: var(--rc-surface);
}

.commercial-editor-body,
.commercial-editor .plan-tab-body,
.commercial-editor .commercial-tab-body {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 4px 18px 0 !important;
    scrollbar-gutter: stable;
}

.commercial-editor-actions,
.commercial-editor .dialog-actions {
    position: static !important;
    inset: auto !important;
    flex: none !important;
    margin: 0 -20px !important;
    padding: 12px 20px !important;
    border-top: 1px solid var(--rc-border) !important;
    background: var(--rc-surface) !important;
    box-shadow: 0 -8px 18px color-mix(in srgb, #0f172a 7%, transparent);
    z-index: 4;
}

.commercial-editor-actions .rz-button {
    min-height: 38px;
}

.choice-cards.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.promo-duration-choices .choice-card {
    min-height: 104px;
    align-items: start;
}

.promo-value-box.single-field {
    grid-template-columns: minmax(220px, 340px);
}

.campaign-grid {
    align-items: stretch;
}

.campaign-open-ended {
    min-height: 62px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed color-mix(in srgb, var(--rc-primary) 34%, var(--rc-border));
    border-radius: 10px;
    background: var(--rc-primary-soft);
}
.campaign-open-ended .rz-icon { color: var(--rc-primary-ink); font-size: 20px; }
.campaign-open-ended > div { display: grid; gap: 2px; }
.campaign-open-ended strong { color: var(--rc-text); font-size: 11px; }
.campaign-open-ended span { color: var(--rc-muted); font-size: 10px; line-height: 1.35; }
.compact-setting { margin-top: 10px; }

.promotion-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Listados comerciales: más cercanos a una tabla operativa/Excel-like. */
.commercial-list-panel {
    padding: 14px !important;
}

.commercial-list-header {
    margin-bottom: 12px;
}

.commercial-list-header > div:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.commercial-list-header h2 { margin: 0; }
.commercial-list-header span {
    color: var(--rc-muted);
    font-size: 10.5px;
    font-weight: 550;
}

.commercial-grid {
    border: 1px solid var(--rc-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--rc-surface);
}

.commercial-grid .rz-grid-table {
    min-width: 920px;
}

.commercial-grid .rz-grid-table thead th {
    height: 46px;
    padding: 0 13px !important;
    background: var(--rc-surface-subtle) !important;
    border-bottom: 1px solid var(--rc-border) !important;
    color: var(--rc-text) !important;
    font-size: 11px;
    font-weight: 750;
    vertical-align: middle;
}

.commercial-grid .rz-grid-table tbody td {
    min-height: 48px;
    padding: 10px 13px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--rc-border) 78%, transparent) !important;
    background: var(--rc-surface) !important;
    color: var(--rc-text);
    vertical-align: middle;
}

.commercial-grid .rz-grid-table tbody tr:hover td {
    background: color-mix(in srgb, var(--rc-primary-soft) 52%, var(--rc-surface)) !important;
}

.commercial-grid .rz-column-title {
    gap: 6px;
}

.commercial-grid .rz-grid-filter-icon,
.commercial-grid button.rz-grid-filter-icon {
    opacity: .72;
}

.commercial-grid .rz-grid-filter-icon:hover,
.commercial-grid button.rz-grid-filter-icon:hover {
    opacity: 1;
    color: var(--rc-primary-ink) !important;
}

.commercial-grid .rz-paginator {
    min-height: 52px;
    padding: 8px 12px !important;
    border-top: 0 !important;
    background: var(--rc-surface) !important;
}

.commercial-entity-cell {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.commercial-entity-cell strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rc-text);
    font-size: 11.5px;
}
.commercial-entity-cell span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rc-muted);
    font-size: 9.5px;
}

/* El popup avanzado queda visualmente separado y limpio. */
.rz-data-grid-filter-menu,
.rz-grid-filter-menu {
    border-radius: 11px !important;
    border: 1px solid var(--rc-border) !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .16) !important;
}

@media (max-width: 900px) {
    .choice-cards.three-columns,
    .promotion-summary-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .rz-dialog:has(.commercial-editor) .rz-dialog-content { padding: 0 12px !important; }
    .commercial-editor {
        height: calc(100dvh - 88px);
    }
    .commercial-editor-actions,
    .commercial-editor .dialog-actions {
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   V21 - DataGrid empresarial global
   ========================================================= */
.rc-grid {
    border: 1px solid var(--rc-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--rc-surface) !important;
}

.rc-grid .rz-grid-table thead th {
    min-height: 44px;
    padding: 0 12px !important;
    background: var(--rc-surface-subtle) !important;
    border-bottom: 1px solid var(--rc-border) !important;
    color: var(--rc-text) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    vertical-align: middle;
}

.rc-grid .rz-grid-table tbody td {
    padding: 9px 12px !important;
    background: var(--rc-surface) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--rc-border) 78%, transparent) !important;
    color: var(--rc-text) !important;
    vertical-align: middle;
}

.rc-grid .rz-grid-table tbody tr:hover td {
    background: color-mix(in srgb, var(--rc-primary-soft) 42%, var(--rc-surface)) !important;
}

.rc-grid .rz-column-title {
    gap: 6px;
    align-items: center;
}

.rc-grid .rz-grid-filter-icon,
.rc-grid button.rz-grid-filter-icon {
    opacity: .72;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}

.rc-grid .rz-grid-filter-icon:hover,
.rc-grid button.rz-grid-filter-icon:hover {
    opacity: 1;
    color: var(--rc-primary-ink) !important;
}

.rc-grid .rz-paginator {
    min-height: 50px;
    padding: 7px 10px !important;
    border-top: 0 !important;
    background: var(--rc-surface) !important;
}

.rc-grid .rz-paginator-element {
    border-radius: 999px !important;
}

.rc-grid .rz-filter-row td {
    background: var(--rc-surface-subtle) !important;
}

/* DatePicker: se eliminaron las reglas V22 incompatibles con Radzen 8.3.
   El control cerrado se gobierna desde ui-system-v3121.css.
   Se preservan aquí los estilos del calendario desplegado. */
/* Calendario Radzen alineado al tema activo, sin botones morados aislados. */
.rz-calendar,
.rz-datepicker-calendar {
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--rc-overlay) !important;
    color: var(--rc-text) !important;
}
.rz-calendar .rz-button,
.rz-calendar button,
.rz-datepicker-calendar .rz-button,
.rz-datepicker-calendar button {
    box-shadow: none !important;
}
.rz-calendar .rz-calendar-nav-prev,
.rz-calendar .rz-calendar-nav-next,
.rz-calendar .rz-calendar-prev,
.rz-calendar .rz-calendar-next,
.rz-datepicker-calendar .rz-calendar-nav-prev,
.rz-datepicker-calendar .rz-calendar-nav-next {
    background: var(--rc-control-bg) !important;
    color: var(--rc-text) !important;
    border: 1px solid var(--rc-border) !important;
}
.rz-calendar .rz-state-active,
.rz-calendar .rz-state-highlight,
.rz-calendar td.rz-state-active span,
.rz-datepicker-calendar .rz-state-active,
.rz-datepicker-calendar .rz-state-highlight {
    background: var(--rc-primary) !important;
    color: #fff !important;
}
.rz-calendar .rz-state-hover:not(.rz-state-active),
.rz-calendar td:hover:not(.rz-state-disabled) span {
    background: var(--rc-primary-soft) !important;
    color: var(--rc-primary-ink) !important;
}

/* Mantiene siempre visible el pie de editores grandes. */
.commercial-editor {
    height: min(680px, calc(100dvh - 154px)) !important;
}
.commercial-editor-actions,
.commercial-editor .dialog-actions {
    min-height: 58px !important;
    box-sizing: border-box !important;
}

.contract-editor { display: grid; gap: 12px; }
.contract-status-box {
    min-height: 40px;
    border: 1px solid var(--rc-border);
    border-radius: 9px;
    padding: 8px 11px;
    background: var(--rc-surface-soft);
    display: grid;
    gap: 2px;
}
.contract-status-box > span { color: var(--rc-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.contract-status-box > strong { color: var(--rc-text); }
.contract-status-box > small { color: var(--rc-muted); line-height: 1.35; }
.dialog-field-block { display: grid; gap: 6px; color: var(--rc-muted); font-size: 12px; font-weight: 600; }
.account-actions { justify-content: flex-end; flex-wrap: wrap; }
.account-workspace-note { margin-bottom: 10px; }
.page-heading-note { margin: 4px 0 0; color: var(--rc-muted); font-size: 12px; }
.field-explainer.warning { border-color: color-mix(in srgb, var(--rc-warning) 35%, var(--rc-border)); background: color-mix(in srgb, var(--rc-warning) 9%, var(--rc-surface)); }

@media (max-width: 800px) {
    .commercial-editor { height: calc(100dvh - 132px) !important; max-height: none !important; }
    .account-actions { justify-content: stretch; }
    .account-actions .rz-button { flex: 1 1 160px; }
}

/* V24.8 · Encabezados de grilla legibles */
.rc-grid .rz-grid-table thead th .rz-column-title,
.rc-grid .rz-grid-table thead th .rz-column-title-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
}

.rc-grid .rz-grid-table thead th {
    height: auto !important;
    min-height: 44px;
}

.inventory-movements-grid .rz-grid-table { min-width: 1590px !important; }
.accounting-grid .rz-grid-table { min-width: 1180px !important; }
.movement-detail-grid .rz-grid-table { min-width: 1100px !important; }
.accounting-detail-grid .rz-grid-table { min-width: 1160px !important; }

/* =========================================================
   V25.6 · Encabezados de DataGrid sin superposición de filtros
   ========================================================= */
.rc-grid .rz-grid-table thead th {
    overflow: visible !important;
}

.rc-grid .rz-grid-table thead th .rz-column-title {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    gap: 6px !important;
}

.rc-grid .rz-grid-table thead th .rz-column-title:has(.rz-grid-filter-icon),
.rc-grid .rz-grid-table thead th .rz-column-title:has(button.rz-grid-filter-icon) {
    padding-right: 32px !important;
}

.rc-grid .rz-grid-table thead th .rz-column-title-content {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
}

.rc-grid .rz-grid-table thead th .rz-grid-filter-icon,
.rc-grid .rz-grid-table thead th button.rz-grid-filter-icon {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    z-index: 2 !important;
    background: transparent !important;
}

.rc-grid .rz-grid-table thead th .rz-sortable-column-icon {
    flex: 0 0 auto;
}

/* Las grillas anchas deben desplazarse antes que comprimir títulos y filtros. */
.rc-grid .rz-grid-table {
    min-width: 920px;
}

/* Radzen 8.x coloca el botón de filtro como hermano del título, no dentro de él. */
.rc-grid .rz-grid-table thead th:has(.rz-grid-filter-icon) {
    position: relative !important;
    padding-right: 44px !important;
}
.rc-grid .rz-grid-table thead th:has(.rz-grid-filter-icon) .rz-column-title {
    padding-right: 0 !important;
}
.rc-grid .rz-grid-table thead th:has(.rz-grid-filter-icon) > div,
.rc-grid .rz-grid-table thead th:has(.rz-grid-filter-icon) > div > div {
    min-width: 0 !important;
}

/* =========================================================
   V25.6 · Corrección definitiva de cabeceras y filtros Radzen
   Radzen 8.x renderiza .rz-column-title y .rz-grid-filter-icon
   como hermanos directos dentro del TH.
   ========================================================= */
.rz-data-grid .rz-grid-table thead > tr > th {
    position: relative !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.rz-data-grid .rz-grid-table thead > tr > th > .rz-column-title {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
}

.rz-data-grid .rz-grid-table thead > tr > th > .rz-column-title > span:first-child {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    line-height: 1.15 !important;
}

.rz-data-grid .rz-grid-table thead > tr > th:has(> .rz-grid-filter-icon) {
    padding-right: 38px !important;
}

.rz-data-grid .rz-grid-table thead > tr > th > .rz-grid-filter-icon {
    position: absolute !important;
    inset-inline-end: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    z-index: 3 !important;
    opacity: .62 !important;
}

.rz-data-grid .rz-grid-table thead > tr > th:hover > .rz-grid-filter-icon,
.rz-data-grid .rz-grid-table thead > tr > th > .rz-grid-filter-icon.rz-grid-filter-active,
.rz-data-grid .rz-grid-table thead > tr > th > .rz-grid-filter-icon:focus-visible {
    opacity: 1 !important;
}

/* Las columnas calculadas/acciones ya son Filterable=false desde V25.6;
   con esto las cabeceras útiles conservan espacio y las auxiliares quedan limpias. */
.rz-data-grid .rz-grid-table thead > tr > th:not(:has(> .rz-grid-filter-icon)) {
    padding-right: 12px !important;
}