/* ============================================================================
   DSA Core · Design System (Host)
   Tokens, modo claro/oscuro, shell (sidebar/topbar), cards, scrollbars, motion.
   Se apoya en las variables de marca --dsa-* / --rz-* que aplica DsaThemeService.
   ============================================================================ */

:root {
    /* Escala de espaciado / radios / sombras */
    --dsa-radius-sm: 8px;
    --dsa-radius: 14px;
    --dsa-radius-lg: 20px;
    --dsa-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --dsa-shadow-2: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .06);
    --dsa-shadow-3: 0 12px 28px rgba(15, 23, 42, .14), 0 6px 12px rgba(15, 23, 42, .08);
    --dsa-ease: cubic-bezier(.4, 0, .2, 1);

    /* Superficies (modo claro por defecto) */
    --dsa-surface: #ffffff;
    --dsa-surface-2: #f6f8fc;
    --dsa-ink: #0f172a;
    --dsa-ink-soft: #64748b;
    --dsa-line: #e8edf5;
    /* Sidebar más ancho para módulos con nombres compuestos/largos */
    --rz-sidebar-width: 300px;
    /* Topbar con color de marca por defecto (si no hay marca aplicada en runtime) */
    --dsa-topbar-bg: linear-gradient(90deg, #1E1B4B 0%, #312E81 55%, #4338CA 100%);
    --dsa-topbar-on: #ffffff;
}

/* Ancho del sidebar (Radzen define --rz-sidebar-width en .rz-layout, más específico que :root;
   por eso forzamos la variable en .rz-layout y un literal en el elemento). */
:root, .rz-layout { --rz-sidebar-width: 300px !important; }
.dsa-sidebar, .rz-sidebar, .rz-sidebar.rz-sidebar-expanded { width: 300px !important; }
.dsa-side__nav .rz-navigation-item-text,
.dsa-side .rz-panel-menu .rz-navigation-item-text { white-space: nowrap; }
/* Texto/avatar del perfil legibles sobre el topbar de marca */
.rz-header .dsa-profile__name, .rz-header .dsa-profile__org { color: var(--dsa-topbar-on, #fff) !important; }
.rz-header .dsa-profile__org { opacity: .85; }
.rz-header .dsa-profile__avatar { color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* ── Modo oscuro ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --dsa-surface: #111a2e;
    --dsa-surface-2: #0b1220;
    --dsa-ink: #e7ecf5;
    --dsa-ink-soft: #93a4c0;
    --dsa-line: #1e2a44;

    --rz-base-background-color: #0b1220;
    --rz-body-background-color: #0b1220;
    --rz-content-background-color: #0b1220;
    --rz-base-100: #0b1220;
    --rz-base-200: #111a2e;
    --rz-base-300: #16223b;
    --rz-card-background-color: #111a2e;
    --rz-panel-background-color: #111a2e;
    --rz-input-background-color: #0f1828;
    --rz-text-color: #e7ecf5;
    --rz-text-secondary-color: #93a4c0;
    --rz-border: 1px solid #1e2a44;
    --rz-border-color: #1e2a44;
    --rz-grid-cell-border: 1px solid #1e2a44;
    --rz-header-background-color: #0e1626;
    --rz-datatable-row-background-color: #111a2e;
    --rz-datatable-alternating-row-background-color: #0f1828;
}

:root[data-theme="dark"] body,
body[data-theme="dark"] {
    background: #0b1220;
    color: #e7ecf5;
}

/* Transición suave al cambiar de modo */
body, .rz-card, .rz-sidebar, .rz-header, .rz-datatable {
    transition: background-color .3s var(--dsa-ease), color .3s var(--dsa-ease), border-color .3s var(--dsa-ease);
}

/* ── Cards y superficies ─────────────────────────────────────────────────── */
.rz-card {
    border-radius: var(--dsa-radius) !important;
    box-shadow: var(--dsa-shadow-1) !important;
    border: 1px solid var(--dsa-line) !important;
}

/* ── Topbar / header ─────────────────────────────────────────────────────── */
.rz-header {
    background: var(--dsa-topbar-bg, var(--rz-base-background-color)) !important;
    border-bottom: 1px solid var(--dsa-line);
    box-shadow: var(--dsa-shadow-1);
    backdrop-filter: saturate(1.1);
}

/* ── Anti-flash / anti-desbordamiento horizontal ─────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
.dsa-shell { max-width: 100vw; overflow-x: hidden; }

/* ── Shell: topbar / contenido ───────────────────────────────────────────── */
.dsa-topbar { display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; padding: 0 14px; min-width: 0; box-sizing: border-box; }
.dsa-topbar__spacer { flex: 1 1 auto; min-width: 8px; }
.dsa-topbar__toggle, .dsa-topbar__icon { color: var(--dsa-topbar-on, var(--rz-text-color)) !important; flex: 0 0 auto; }
.dsa-topbar__brand { display: flex; align-items: center; gap: 10px; padding-left: 4px; min-width: 0; overflow: hidden; flex: 0 1 auto; }
.dsa-topbar__brand > .rzi { font-size: 26px; flex: 0 0 auto; }
.dsa-topbar__brandimg { height: 34px; max-width: 150px; width: auto; object-fit: contain; flex: 0 0 auto; }
.dsa-topbar__brandname { font-weight: 800; font-size: 1.02rem; letter-spacing: -.3px; color: var(--dsa-topbar-on, var(--rz-text-color)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsa-content { padding: 22px 26px; }

/* Neutraliza el fondo de color de marca que Radzen pinta tras el ProfileMenu del header */
.rz-header .rz-profile-menu,
.rz-header .rz-profile-menu .rz-profile-menu-user,
.rz-profile-menu-top { background: transparent !important; box-shadow: none !important; }

/* Selector de idioma (topbar) */
.dsa-lang { position: relative; }
.dsa-lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--dsa-topbar-on, var(--rz-text-color)) 18%, transparent); border-radius: 999px; background: transparent; cursor: pointer; color: var(--dsa-topbar-on, var(--rz-text-color)); font-weight: 700; transition: background-color .15s var(--dsa-ease); }
.dsa-lang__btn:hover { background: color-mix(in srgb, var(--dsa-topbar-on, var(--dsa-primary, #1E40AF)) 12%, transparent); }
.dsa-lang__globe { font-size: 20px; }
.dsa-lang__code { font-size: .82rem; letter-spacing: .5px; }
.dsa-lang__chev { font-size: 18px; opacity: .8; }
.dsa-lang__backdrop { position: fixed; inset: 0; z-index: 1190; }
.dsa-lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200; min-width: 210px; padding: 6px; border-radius: 14px; background: var(--rz-card-background-color, #fff); border: 1px solid var(--dsa-line, #e8edf5); box-shadow: var(--dsa-shadow-3); animation: dsa-lang-in .14s var(--dsa-ease); }
@keyframes dsa-lang-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dsa-lang__title { font-size: .68rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--rz-text-secondary-color); padding: 8px 10px 6px; }
.dsa-lang__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent; border-radius: 10px; cursor: pointer; color: var(--rz-text-color); font-weight: 600; text-align: left; }
.dsa-lang__item:hover { background: color-mix(in srgb, var(--dsa-primary, #1E40AF) 10%, transparent); }
.dsa-lang__item.is-active { background: color-mix(in srgb, var(--dsa-primary, #1E40AF) 14%, transparent); }
.dsa-lang__flag { font-size: 1.15rem; }
.dsa-lang__name { flex: 1 1 auto; font-size: .9rem; }
.dsa-lang__tag { font-size: .68rem; font-weight: 800; color: var(--rz-text-secondary-color); background: var(--rz-base-200, #eef1f6); padding: 1px 7px; border-radius: 999px; }
.dsa-lang__check { color: var(--dsa-primary, #1E40AF); font-size: 18px; }
:root[data-theme="dark"] .dsa-lang__tag { background: #16223b; }

/* Chip de usuario (topbar) */
.dsa-profile { cursor: pointer; }
/* Un solo chevron nativo de Radzen, alineado al chip */
.dsa-profile .rz-navigation-item-icon { color: var(--dsa-topbar-on, var(--rz-text-secondary-color)) !important; }
.dsa-userchip { display: inline-flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 999px; transition: background-color .15s var(--dsa-ease); }
.dsa-userchip:hover { background: color-mix(in srgb, var(--dsa-topbar-on, var(--dsa-primary, #1E40AF)) 16%, transparent); }
.dsa-userchip__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--dsa-primary, #1E40AF), var(--dsa-secondary, #3B82F6)); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.dsa-userchip__meta { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.dsa-userchip__name { font-weight: 700; font-size: .88rem; color: var(--dsa-topbar-on, var(--rz-text-color)); }
.dsa-userchip__role { font-size: .68rem; color: var(--dsa-topbar-on, var(--rz-text-secondary-color)); opacity: .8; }
.dsa-userchip__chev { color: var(--dsa-topbar-on, var(--rz-text-secondary-color)); font-size: 18px; }

/* ============================================================================
   SIDEBAR — control total (sin grises de Radzen). Degradado de marca, rail
   colapsable con iconos + expansión al hover, items tipo "glass pill".
   ============================================================================ */
.rz-sidebar {
    background: var(--dsa-sidebar-gradient, linear-gradient(165deg, #1E1B4B 0%, #312E81 55%, #4338CA 100%)) !important;
    border: none !important;
    box-shadow: 6px 0 28px rgba(15, 23, 42, .22);
    padding: 0 !important;
    overflow: hidden !important;
    transition: width .22s var(--dsa-ease), box-shadow .22s var(--dsa-ease);
    z-index: 1100;
}
/* Velo sutil para dar profundidad al degradado */
.rz-sidebar::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.08), transparent 60%);
}

/* Estructura interna: cabecera de marca · menú · footer */
.dsa-side { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; }
.dsa-side__brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; min-height: 64px; }
.dsa-side__brand > * { flex-shrink: 0; }
.dsa-side__brand > .rzi { font-size: 26px; color: #fff; }
.dsa-side__logo { height: 34px; max-width: 150px; width: auto; object-fit: contain; flex: 0 0 auto; }
.dsa-side__name { font-weight: 800; font-size: 1.14rem; color: #fff; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; transition: opacity .18s var(--dsa-ease); }
.dsa-side__nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 6px 0 10px; }
.dsa-side__footer { padding: 12px 18px; border-top: 1px solid rgba(255, 255, 255, .10); display: flex; justify-content: space-between; align-items: center; gap: 8px; white-space: nowrap; transition: opacity .18s var(--dsa-ease); }
.dsa-side__copy { font-size: .7rem; color: rgba(255, 255, 255, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsa-side__ver { font-size: .66rem; font-weight: 700; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .14); padding: 2px 9px; border-radius: 999px; }

/* Mata TODO fondo/borde gris que Radzen pinta en el árbol del panel-menu */
.rz-sidebar .rz-panel-menu,
.rz-sidebar .rz-panel-menu .rz-navigation,
.rz-sidebar .rz-navigation,
.rz-sidebar .rz-navigation-item,
.rz-sidebar .rz-navigation-item-wrapper,
.rz-sidebar ul, .rz-sidebar li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    list-style: none !important;
}

/* Items */
.rz-sidebar .rz-navigation-item-link {
    display: flex !important; align-items: center; gap: 13px;
    color: rgba(255, 255, 255, .80) !important;
    border-radius: 12px;
    margin: 3px 13px;
    padding: 11px 14px;
    font-weight: 600; font-size: .92rem;
    position: relative;
    transition: background-color .15s var(--dsa-ease), color .15s var(--dsa-ease), box-shadow .18s var(--dsa-ease);
}
.rz-sidebar .rz-navigation-item-icon,
.rz-sidebar .rz-navigation-item-link i {
    color: rgba(255, 255, 255, .85) !important;
    font-size: 21px !important; min-width: 24px; text-align: center;
    transition: color .15s var(--dsa-ease);
}
.rz-sidebar .rz-navigation-item-text { white-space: nowrap; overflow: hidden; transition: opacity .18s var(--dsa-ease); }

/* Hover */
.rz-sidebar .rz-navigation-item-link:hover {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}
.rz-sidebar .rz-navigation-item-link:hover .rz-navigation-item-icon,
.rz-sidebar .rz-navigation-item-link:hover i { color: #fff !important; }

/* Submenú (2º nivel): ligeramente indentado y más tenue */
.rz-sidebar .rz-navigation-item .rz-navigation-item .rz-navigation-item-link {
    margin: 2px 13px 2px 18px; padding: 9px 14px; font-size: .88rem; font-weight: 500;
    color: rgba(255, 255, 255, .72) !important;
}

/* Item activo: glass pill + barra de acento (color de marca) */
.rz-sidebar .rz-navigation-item-wrapper-active > .rz-navigation-item-link,
.rz-sidebar a.rz-navigation-item-link.rz-state-active,
.rz-sidebar li.rz-state-active > .rz-navigation-item-link {
    background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .20), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.rz-sidebar .rz-navigation-item-wrapper-active > .rz-navigation-item-link .rz-navigation-item-icon,
.rz-sidebar a.rz-navigation-item-link.rz-state-active .rz-navigation-item-icon,
.rz-sidebar a.rz-navigation-item-link.rz-state-active i { color: #fff !important; }
.rz-sidebar .rz-navigation-item-wrapper-active > .rz-navigation-item-link::before,
.rz-sidebar a.rz-navigation-item-link.rz-state-active::before {
    content: ""; position: absolute; left: -7px; top: 20%; height: 60%; width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--dsa-accent, #c7d2fe);
    box-shadow: 0 0 10px var(--dsa-accent, #c7d2fe);
}

/* Scroll del sidebar */
.rz-sidebar ::-webkit-scrollbar { width: 7px; }
.rz-sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .20); border-radius: 8px; }

/* ── Scrollbars globales ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); border: 2px solid transparent; background-clip: padding-box; }

/* ── Botones / inputs: radios coherentes ─────────────────────────────────── */
.rz-button { border-radius: var(--dsa-radius-sm) !important; }
.rz-textbox, .rz-dropdown, .rz-textarea, .rz-numeric { border-radius: var(--dsa-radius-sm) !important; }

/* ── Chips reutilizables (badges de color para data tables Host) ──────────── */
.dsa-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; line-height: 1.4; }
.dsa-chip .rzi { font-size: 15px; }
.dsa-chip--host { background: rgba(13,110,253,.12); color: #0d6efd; }
.dsa-chip--tenant { background: rgba(111,66,193,.12); color: #6f42c1; }
.dsa-chip--soft { background: var(--rz-base-200, #eef1f6); color: var(--rz-text-secondary-color, #64748b); }
.dsa-chip--ok { background: rgba(25,135,84,.14); color: #198754; }
.dsa-chip--warn { background: rgba(253,126,20,.16); color: #c2410c; }
.dsa-chip--info { background: rgba(13,202,240,.16); color: #0aa2c0; }
.dsa-palprev { display: flex; align-items: center; gap: 8px; }
.dsa-palprev__bar { width: 56px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.dsa-palprev__name { font-size: .78rem; font-weight: 600; }

/* Cabecera de página estándar Host (icono + título + subtítulo + acciones) */
.dsa-phead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dsa-phead__ic { width: 50px; height: 50px; min-width: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.dsa-phead__ic .rzi { font-size: 26px; }
.dsa-phead__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dsa-phead__title { font-weight: 800; font-size: 1.7rem; letter-spacing: -.4px; line-height: 1.1; color: var(--rz-text-color); }
.dsa-phead__sub { font-size: .86rem; color: var(--rz-text-secondary-color); }
.dsa-phead__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dsa-pagehead__title { font-weight: 800; margin: 0; }
.dsa-kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ============================================================================
   SISTEMA DE FORMULARIOS (estándar app) — secciones tipo tarjeta con cabecera,
   grid ancho, pasos estilizados y footer sticky. Usar en todo formulario con
   muchos campos: envolver en .dsa-form y agrupar campos en .dsa-section.
   ============================================================================ */
.dsa-form { display: flex; flex-direction: column; gap: 18px; }

/* Cabecera de contexto del formulario (sobre los pasos) */
.dsa-formhero { display: flex; align-items: center; gap: 14px; padding: 4px 2px 2px; }
.dsa-formhero__media { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--rz-base-200, #eef1f6); box-shadow: var(--dsa-shadow-1); }
.dsa-formhero__media img { width: 100%; height: 100%; object-fit: contain; }
.dsa-formhero__avatar { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--dsa-primary, #1E40AF), var(--dsa-secondary, #3B82F6)); }
.dsa-formhero__eyebrow { font-size: .7rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dsa-primary, #1E40AF); }
.dsa-formhero__title { font-weight: 800; font-size: 1.25rem; letter-spacing: -.3px; color: var(--rz-text-color); line-height: 1.1; }

/* Sección tipo tarjeta */
.dsa-section { border: 1px solid var(--dsa-line); border-radius: 16px; background: var(--rz-card-background-color, #fff); padding: 20px 22px; box-shadow: var(--dsa-shadow-1); }
.dsa-section + .dsa-section { margin-top: 16px; }
.dsa-section__head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.dsa-section__ic { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--dsa-primary, #1E40AF), var(--dsa-secondary, #3B82F6)); box-shadow: 0 4px 10px rgba(15,23,42,.14); }
.dsa-section__ic .rzi { font-size: 22px; }
.dsa-section__t { font-weight: 800; font-size: 1.02rem; color: var(--rz-text-color); line-height: 1.15; }
.dsa-section__s { font-size: .8rem; color: var(--rz-text-secondary-color); }
.dsa-section__d { font-size: .8rem; color: var(--rz-text-secondary-color); margin-top: 2px; }

/* Fila de tarjetas KPI reutilizable (tabs/páginas) */
.dsa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 2px 0 16px; }

/* Rejilla de 2 columnas (paneles analíticos) */
.dsa-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 992px) { .dsa-2col { grid-template-columns: 1fr; } }

/* Estado vacío para paneles/gráficas */
.dsh-empty { display: grid; place-items: center; gap: 8px; height: 240px; color: var(--rz-text-secondary-color); }
.dsh-empty .rzi { font-size: 40px; opacity: .5; }

/* Utilidades de celda para grids ricos */
.dsa-chip--mono { font-family: var(--rz-font-family-monospace, ui-monospace, monospace); font-weight: 700; letter-spacing: .3px; }
.dsa-muted { color: var(--rz-text-secondary-color); }
.dsa-cell-ic { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dsa-cell-ic .rzi { font-size: 18px; color: var(--rz-text-secondary-color); }
.bx-inline { display: flex; align-items: center; gap: 6px; }

/* Carga: ocultar la barra azul indeterminada de Radzen (a petición del usuario).
   El overlay de marca (BrandLoadingOverlay) NO usa esta barra, así que se conserva. */
.rz-progressbar-indeterminate { display: none !important; }

/* Rejilla de campos responsive (12 columnas) — FormSection/FormField */
.dsa-fgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; align-items: start; }
.dsa-field { grid-column: span var(--span, 6); display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dsa-field__lbl { font-size: .8rem; font-weight: 600; color: var(--rz-text-secondary-color); }
.dsa-field__req { color: var(--rz-danger, #dc3545); margin-left: 2px; }
.dsa-field__hint { font-size: .72rem; color: var(--rz-text-secondary-color); }
@media (max-width: 768px) { .dsa-field { grid-column: span 12 !important; } }

/* Campos a ancho completo dentro de un formulario estándar */
.dsa-form .rz-form-field, .dsa-form .rz-textbox, .dsa-form .rz-dropdown,
.dsa-form .rz-numeric, .dsa-form .rz-datepicker, .dsa-form .rz-textarea,
.dsa-form .rz-selectbar { width: 100% !important; }
.dsa-form .rz-numeric input, .dsa-form .rz-datepicker input { width: 100% !important; }
.dsa-formlabel { font-size: .78rem; font-weight: 700; color: var(--rz-text-secondary-color); margin-bottom: 5px; display: block; }

/* Dropzone de logo/imagen */
.dsa-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 116px; border: 2px dashed var(--dsa-line); border-radius: 14px; cursor: pointer; color: var(--rz-text-secondary-color); transition: border-color .15s var(--dsa-ease), background-color .15s var(--dsa-ease); background: var(--rz-base-100, #fafbfe); }
.dsa-dropzone:hover { border-color: var(--dsa-primary, #1E40AF); color: var(--dsa-primary, #1E40AF); background: color-mix(in srgb, var(--dsa-primary, #1E40AF) 5%, transparent); }
.dsa-dropzone input[type="file"] { display: none; }
.dsa-dropzone .rzi { font-size: 26px; }
.dsa-dropzone__img { max-height: 92px; max-width: 100%; border-radius: 10px; }

/* Pasos (RadzenSteps) estilizados con marca */
.dsa-steps .rz-steps-header { gap: 6px; }
.dsa-steps .rz-steps-number { font-weight: 800; transition: background-color .2s var(--dsa-ease); }
.dsa-steps .rz-steps-item.rz-state-active .rz-steps-number,
.dsa-steps .rz-steps-item.rz-steps-current .rz-steps-number { background: linear-gradient(135deg, var(--dsa-primary, #1E40AF), var(--dsa-secondary, #3B82F6)) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(15,23,42,.18); }
.dsa-steps .rz-steps-item.rz-state-active .rz-steps-title,
.dsa-steps .rz-steps-item.rz-steps-current .rz-steps-title { color: var(--dsa-primary, #1E40AF) !important; font-weight: 800; }

/* Tarjetas seleccionables (picker) — modalidad, motor, opciones */
.dsa-pick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 2px solid var(--dsa-line); border-radius: 14px; cursor: pointer; transition: border-color .15s var(--dsa-ease), background-color .15s var(--dsa-ease), box-shadow .15s var(--dsa-ease); background: var(--rz-card-background-color, #fff); height: 100%; }
.dsa-pick:hover { border-color: color-mix(in srgb, var(--dsa-primary, #1E40AF) 45%, var(--dsa-line)); }
.dsa-pick--active { border-color: var(--dsa-primary, #1E40AF); background: color-mix(in srgb, var(--dsa-primary, #1E40AF) 6%, transparent); box-shadow: 0 6px 16px rgba(15,23,42,.10); }
.dsa-pick__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--dsa-primary, #1E40AF); background: color-mix(in srgb, var(--dsa-primary, #1E40AF) 12%, transparent); }
.dsa-pick--active .dsa-pick__ic { color: #fff; background: linear-gradient(135deg, var(--dsa-primary, #1E40AF), var(--dsa-secondary, #3B82F6)); }
.dsa-pick__t { font-weight: 800; font-size: .95rem; color: var(--rz-text-color); }
.dsa-pick__s { font-size: .76rem; color: var(--rz-text-secondary-color); }
.dsa-pick__check { position: absolute; top: 10px; right: 10px; color: var(--dsa-primary, #1E40AF); opacity: 0; transition: opacity .15s var(--dsa-ease); }
.dsa-pick--active .dsa-pick__check { opacity: 1; }

/* Footer de acciones sticky */
.dsa-formfoot { position: sticky; bottom: -2px; display: flex; align-items: center; gap: 10px; padding: 14px 2px 4px; margin-top: 8px; border-top: 1px solid var(--dsa-line); background: linear-gradient(to top, var(--rz-card-background-color, #fff) 78%, transparent); z-index: 2; }
.dsa-formfoot__spacer { flex: 1 1 auto; }

/* ── DataGrid más limpio ─────────────────────────────────────────────────── */
.rz-datatable .rz-data-grid-data tr:hover td { background: color-mix(in srgb, var(--dsa-primary, #1E40AF) 7%, transparent) !important; }

/* ── Modo oscuro: legibilidad de fuentes (tablas · menús · formularios) ───── */
:root[data-theme="dark"] {
    /* DataGrid / tablas */
    --rz-datatable-header-background-color: #0e1626;
    --rz-datatable-header-color: #e7ecf5;
    --rz-datatable-cell-color: #e7ecf5;
    --rz-grid-cell-color: #e7ecf5;
    /* Inputs / formularios */
    --rz-input-color: #e7ecf5;
    --rz-input-placeholder-color: #6f7f9b;
    --rz-label-color: #c4cfe2;
    --rz-dropdown-color: #e7ecf5;
}

:root[data-theme="dark"] .rz-datatable,
:root[data-theme="dark"] .rz-datatable .rz-column-title,
:root[data-theme="dark"] .rz-datatable .rz-cell-data,
:root[data-theme="dark"] .rz-datatable .rz-data-grid-data td,
:root[data-theme="dark"] .rz-datatable .rz-grid-table th,
:root[data-theme="dark"] .rz-datatable .rz-grid-table td,
:root[data-theme="dark"] .rz-grid-table th .rz-column-title-content { color: #e7ecf5 !important; }

:root[data-theme="dark"] .rz-datatable .rz-grid-table thead th { background: #0e1626 !important; }

/* Filas (incluye alternas): fondo oscuro y texto claro — evita filas "fantasma" en dark */
:root[data-theme="dark"] .rz-datatable .rz-data-grid-data tr td,
:root[data-theme="dark"] .rz-datatable .rz-grid-table tbody tr td { background-color: #111a2e !important; color: #e7ecf5 !important; }
:root[data-theme="dark"] .rz-datatable .rz-data-grid-data tr:nth-child(even) td,
:root[data-theme="dark"] .rz-datatable .rz-grid-table tbody tr:nth-child(even) td,
:root[data-theme="dark"] .rz-datatable tr.rz-datatable-even td,
:root[data-theme="dark"] .rz-datatable tr.rz-data-row.rz-datatable-even td { background-color: #0d1424 !important; color: #e7ecf5 !important; }
:root[data-theme="dark"] .rz-datatable .rz-data-grid-data tr:hover td,
:root[data-theme="dark"] .rz-datatable .rz-grid-table tbody tr:hover td { background-color: color-mix(in srgb, var(--dsa-primary, #3B82F6) 22%, #111a2e) !important; color: #ffffff !important; }

/* Tipografía en oscuro: títulos de página/sección/tabla y tabs legibles ───── */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .rz-text-h1,
:root[data-theme="dark"] .rz-text-h2,
:root[data-theme="dark"] .rz-text-h3,
:root[data-theme="dark"] .rz-text-h4,
:root[data-theme="dark"] .rz-text-h5,
:root[data-theme="dark"] .rz-text-h6,
:root[data-theme="dark"] .rz-text-display-h1,
:root[data-theme="dark"] .rz-text-display-h3,
:root[data-theme="dark"] .rz-text-subtitle1,
:root[data-theme="dark"] .rz-text-subtitle2,
:root[data-theme="dark"] .rz-text-body1,
:root[data-theme="dark"] .rz-text-body2,
:root[data-theme="dark"] .dsa-section__t,
:root[data-theme="dark"] .dsa-formhero__title { color: #e7ecf5 !important; }
:root[data-theme="dark"] .rz-text-caption,
:root[data-theme="dark"] .dsa-section__s { color: #93a4c0 !important; }

/* Tabs en oscuro */
:root[data-theme="dark"] .rz-tabview-title,
:root[data-theme="dark"] .rz-tabview-nav li a { color: #c4cfe2 !important; }
:root[data-theme="dark"] .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title,
:root[data-theme="dark"] .rz-tabview-nav li.rz-state-active .rz-tabview-title,
:root[data-theme="dark"] .rz-tabview-nav li.rz-tabview-selected a { color: #ffffff !important; }

/* Inputs, dropdowns, textareas, labels */
:root[data-theme="dark"] .rz-textbox,
:root[data-theme="dark"] .rz-textarea,
:root[data-theme="dark"] .rz-numeric input,
:root[data-theme="dark"] .rz-dropdown,
:root[data-theme="dark"] .rz-dropdown .rz-dropdown-label,
:root[data-theme="dark"] .rz-multiselect,
:root[data-theme="dark"] .rz-datepicker input,
:root[data-theme="dark"] .rz-chkbox-label,
:root[data-theme="dark"] label,
:root[data-theme="dark"] .rz-form-field-content { color: #e7ecf5 !important; }

:root[data-theme="dark"] .rz-textbox::placeholder,
:root[data-theme="dark"] .rz-textarea::placeholder { color: #6f7f9b !important; }

/* Paneles flotantes (dropdown items, menús, diálogos) */
:root[data-theme="dark"] .rz-dropdown-panel,
:root[data-theme="dark"] .rz-dropdown-items,
:root[data-theme="dark"] .rz-dialog,
:root[data-theme="dark"] .rz-dialog-content { background: #111a2e !important; color: #e7ecf5 !important; }
:root[data-theme="dark"] .rz-dropdown-item { color: #e7ecf5 !important; }
:root[data-theme="dark"] .rz-dropdown-item:hover { background: #16223b !important; }

/* Texto general dentro del contenido del cuerpo en oscuro */
:root[data-theme="dark"] .dsa-content,
:root[data-theme="dark"] .dsa-content .rz-text-h1,
:root[data-theme="dark"] .dsa-content .rz-text-h2,
:root[data-theme="dark"] .dsa-content .rz-text-h3,
:root[data-theme="dark"] .dsa-content .rz-text-h4,
:root[data-theme="dark"] .dsa-content .rz-text-h5,
:root[data-theme="dark"] .dsa-content .rz-text-h6 { color: #e7ecf5; }

/* ── Skeleton loaders ────────────────────────────────────────────────────── */
.dsa-skel {
    position: relative;
    overflow: hidden;
    background: var(--dsa-surface-2);
    border-radius: var(--dsa-radius-sm);
}
.dsa-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: dsa-shimmer 1.3s infinite;
}
:root[data-theme="dark"] .dsa-skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent); }

@keyframes dsa-shimmer { 100% { transform: translateX(100%); } }

/* ── Barra de progreso de ruta (top) ─────────────────────────────────────── */
.dsa-routebar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000;
    background: linear-gradient(90deg, var(--dsa-primary, #1E40AF), var(--dsa-accent, #93c5fd));
    transform-origin: left;
    animation: dsa-route 1.1s var(--dsa-ease) infinite;
}
@keyframes dsa-route { 0% { transform: scaleX(0); } 50% { transform: scaleX(.7); } 100% { transform: scaleX(1); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
    .dsa-skel::after, .dsa-routebar { animation: none; }
}