/* ============================================================
   Orion design system — Capa 1 (UX.1)
   ------------------------------------------------------------
   Tokens semánticos en :root y [data-theme="dark"]. Las
   utilidades viejas .orion-* siguen funcionando porque los
   aliases --orion-* mapean a los tokens nuevos.

   Escala estricta:
   - Espaciado: múltiplos de 4px (--space-1..--space-12)
   - Tipografía: Inter (variable, autoalojada), escala 12/14/16/20/28, pesos 400/500/600
   - Radii: 4/8/12px
   - Borders: 1px en lugar de sombras
   - tabular-nums universal en .orion-num
   ============================================================ */

/* ============================================================
   TIPOGRAFÍA — Inter 4.1 autoalojada (fuente variable, SIL OFL 1.1)
   ------------------------------------------------------------
   Se sirve desde el propio origen: la CSP es style-src/font-src
   'self' (bloqueaba el @import a rsms.me y la fuente nunca cargaba)
   y el hosting local en VM no tiene salida a internet.
   Archivos, procedencia y licencia: wwwroot/fonts/inter/README.md
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter/InterVariable-Italic.woff2') format('woff2');
}

:root {
    /* — espaciado base 4px — */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* — tipografía — */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --line-height-tight: 1.3;
    --line-height-base: 1.5;

    /* — radii — */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* — borders — */
    --border-width: 1px;

    /* — transición estándar — */
    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;

    /* ─────────────────────────────────────────────────────────
       Paleta semántica (UX.2.5.F) — 4 familias explícitas:
         · bg-*       Profundidad visual (canvas → surface → elevated)
         · text-*     Jerarquía de lectura (primary > secondary > tertiary > muted)
         · money-*    Flow de dinero (entró/salió/cero)
         · status-*   Workflow (success/danger/warning/info)
       Tono por módulo (--tone-*) es 3ª familia separada (identidad).
       Tailwind Zinc base, todos los pares texto/fondo verifican WCAG AA.
       ───────────────────────────────────────────────────────── */

    /* — Profundidad (light) — */
    --bg-canvas: #fafafa;            /* zinc-50 — página */
    --bg-surface: #ffffff;            /* white — cards */
    --bg-elevated: #ffffff;           /* white + shadow — modal/popover */
    --border: #e4e4e7;                /* zinc-200 */
    --border-strong: #d4d4d8;         /* zinc-300 */

    /* — Jerarquía de texto (light) — */
    --text-primary: #09090b;          /* zinc-950 (18:1) */
    --text-secondary: #27272a;        /* zinc-800 (13:1) */
    --text-tertiary: #52525b;         /* zinc-600 (7.5:1) */
    --text-muted: #71717a;            /* zinc-500 (4.6:1, mínimo AA) */

    /* — Money (flow de dinero) — */
    --money-positive: #10b981;        /* emerald-500 (más "money" que green) */
    --money-positive-bg: color-mix(in srgb, var(--money-positive) 8%, transparent);
    --money-negative: #ef4444;        /* red-500 (subtle, suceso normal) */
    --money-negative-bg: color-mix(in srgb, var(--money-negative) 8%, transparent);
    --money-neutral: var(--text-tertiary);
    --money-neutral-bg: color-mix(in srgb, var(--text-tertiary) 8%, transparent);

    /* — Status (workflow) — */
    /* Pareja: el color "base" es para iconos/borders sobre superficie clara
       (AA 3:1 para UI components). El "-strong" es para TEXTO sobre la
       pareja "-bg" (que es el mismo color al 8% alpha). Sin "-strong",
       el texto sobre la pill da ~2.9:1 (falla AA 4.5:1). */
    --status-success: #16a34a;        /* green-600 — icon/border */
    --status-success-strong: #15803d; /* green-700 — texto sobre success-bg (5.5:1) */
    --status-success-bg: color-mix(in srgb, var(--status-success) 8%, transparent);
    --status-danger: #dc2626;         /* red-600 — icon/border */
    --status-danger-strong: #991b1b;  /* red-800 — texto sobre danger-bg (7.4:1) */
    --status-danger-bg: color-mix(in srgb, var(--status-danger) 8%, transparent);
    --status-warning: #d97706;        /* amber-600 — icon/border */
    --status-warning-strong: #92400e; /* amber-800 — texto sobre warning-bg (7.2:1) */
    --status-warning-bg: color-mix(in srgb, var(--status-warning) 8%, transparent);
    --status-info: #2563eb;           /* blue-600 — icon/border */
    --status-info-strong: #1e40af;    /* blue-800 — texto sobre info-bg (8.6:1) */
    --status-info-bg: color-mix(in srgb, var(--status-info) 8%, transparent);

    /* — Compatibilidad con código existente (DEPRECATED, migrar progresivamente) — */
    --bg: var(--bg-canvas);
    --surface: var(--bg-surface);
    --surface-alt: var(--bg-canvas);
    --surface-hover: #f3f5f9;
    --text: var(--text-primary);
    --text-faint: var(--text-muted);
    --success: var(--money-positive);
    --success-soft: var(--money-positive-bg);
    --danger: var(--money-negative);
    --danger-soft: var(--money-negative-bg);
    --warning: var(--status-warning);
    --warning-soft: var(--status-warning-bg);

    /* — accent único (azul Linear-style) — sin variantes por modo, ya está calibrado — */
    --accent: #3b5cf3;
    --accent-hover: #2843d6;
    --accent-soft: #e3e9ff;
    --accent-fg: #ffffff;

    /* — sidebar (sigue oscuro en light mode, intencional Linear-style) — */
    --sidebar-bg: #11131a;
    --sidebar-bg-hover: #1d2030;
    --sidebar-text: #c9cdd9;
    --sidebar-text-active: #ffffff;
    --sidebar-border: #1f2330;
    --sidebar-group: #6c7591;

    /* — topbar — */
    --topbar-bg: #ffffff;
    --topbar-text: #1a1d28;
    --topbar-border: var(--border);

    /* — focus — */
    --focus-ring: 0 0 0 3px rgba(59, 92, 243, 0.18);

    /* — tonos por módulo (light) — usados en KPI cards del dashboard. */
    --tone-cash: #3b5cf3;          /* azul accent */
    --tone-cash-soft: #e3e9ff;
    --tone-ar: #1d8855;            /* verde income */
    --tone-ar-soft: #e0f3e8;
    --tone-ap: #b97400;            /* ámbar gasto */
    --tone-ap-soft: #fdf1d6;
    --tone-inv: #7c3aed;           /* púrpura inventario */
    --tone-inv-soft: #efe7ff;
    --tone-fa: #0891b2;            /* cyan activos fijos */
    --tone-fa-soft: #d6f0f7;
    --tone-journal: #475569;       /* slate asientos */
    --tone-journal-soft: #eef2f7;

    /* — aliases legacy --orion-* (no romper páginas existentes) — */
    --orion-bg: var(--bg);
    --orion-surface: var(--surface);
    --orion-border: var(--border);
    --orion-text: var(--text);
    --orion-text-soft: var(--text-muted);
    --orion-primary: var(--accent);
    --orion-primary-soft: var(--accent-soft);
    --orion-danger: var(--danger);
    --orion-success: var(--success);
    --orion-warning: var(--warning);
    --orion-sidebar-bg: var(--sidebar-bg);
    --orion-sidebar-text: var(--sidebar-text);
    --orion-sidebar-text-active: var(--sidebar-text-active);
    --orion-sidebar-active-bg: var(--accent);
    --orion-topbar-bg: var(--topbar-bg);
    --orion-topbar-text: var(--topbar-text);
}

[data-theme="dark"] {
    /* — Profundidad (dark, Zinc) — */
    --bg-canvas: #09090b;             /* zinc-950 */
    --bg-surface: #18181b;            /* zinc-900 */
    --bg-elevated: #27272a;           /* zinc-800 */
    --border: #27272a;                /* zinc-800 */
    --border-strong: #3f3f46;         /* zinc-700 */

    /* — Texto (dark) — */
    --text-primary: #fafafa;          /* zinc-50 (18:1) */
    --text-secondary: #d4d4d8;        /* zinc-300 (13:1) */
    --text-tertiary: #a1a1aa;         /* zinc-400 (7.5:1) */
    --text-muted: #71717a;            /* zinc-500 (4.6:1, mismo que light) */

    /* — Money (dark, calibrado más claro y saturación 14% para pills) — */
    --money-positive: #34d399;        /* emerald-400 */
    --money-positive-bg: color-mix(in srgb, var(--money-positive) 14%, transparent);
    --money-negative: #f87171;        /* red-400 (subtle) */
    --money-negative-bg: color-mix(in srgb, var(--money-negative) 14%, transparent);
    --money-neutral: var(--text-tertiary);
    --money-neutral-bg: color-mix(in srgb, var(--text-tertiary) 14%, transparent);

    /* — Status (dark) — */
    /* En dark mode el "-strong" sube de tono (no baja) para mantener
       contraste sobre el alpha del bg. Background es color-mix con 14% en
       lugar de 8% para más visibilidad sobre fondo oscuro. */
    --status-success: #22c55e;        /* green-500 — icon/border */
    --status-success-strong: #4ade80; /* green-400 — texto sobre success-bg */
    --status-success-bg: color-mix(in srgb, var(--status-success) 14%, transparent);
    --status-danger: #ef4444;         /* red-500 — icon/border */
    --status-danger-strong: #fca5a5;  /* red-300 — texto sobre danger-bg */
    --status-danger-bg: color-mix(in srgb, var(--status-danger) 14%, transparent);
    --status-warning: #f59e0b;        /* amber-500 — icon/border */
    --status-warning-strong: #fcd34d; /* amber-300 — texto sobre warning-bg */
    --status-warning-bg: color-mix(in srgb, var(--status-warning) 14%, transparent);
    --status-info: #3b82f6;           /* blue-500 — icon/border */
    --status-info-strong: #93c5fd;    /* blue-300 — texto sobre info-bg */
    --status-info-bg: color-mix(in srgb, var(--status-info) 14%, transparent);

    /* — Aliases legacy — */
    --bg: var(--bg-canvas);
    --surface: var(--bg-surface);
    --surface-alt: var(--bg-elevated);
    --surface-hover: #1f1f23;
    --text: var(--text-primary);
    --text-faint: var(--text-muted);
    --success: var(--money-positive);
    --success-soft: var(--money-positive-bg);
    --danger: var(--money-negative);
    --danger-soft: var(--money-negative-bg);
    --warning: var(--status-warning);
    --warning-soft: var(--status-warning-bg);

    /* — Accent (dark) — más claro que en light para legibilidad — */
    --accent: #6680ff;
    --accent-hover: #8197ff;
    --accent-soft: #1e2745;
    --accent-fg: #ffffff;

    /* — tonos por módulo (dark) — */
    --tone-cash: #6680ff;
    --tone-cash-soft: #1e2745;
    --tone-ar: #4cc38a;
    --tone-ar-soft: #1d3a2a;
    --tone-ap: #e0a04a;
    --tone-ap-soft: #3a2f1a;
    --tone-inv: #a78bfa;
    --tone-inv-soft: #2a1f4a;
    --tone-fa: #38bdf8;
    --tone-fa-soft: #0e2a3a;
    --tone-journal: #94a3b8;
    --tone-journal-soft: #1f2937;

    --sidebar-bg: #0a0c12;
    --sidebar-bg-hover: #15171f;
    --sidebar-text: #b6bccb;
    --sidebar-text-active: #ffffff;
    --sidebar-border: #1c1f29;
    --sidebar-group: #6a7286;

    --topbar-bg: #0d0f15;
    --topbar-text: #ebedf3;

    --focus-ring: 0 0 0 3px rgba(102, 128, 255, 0.25);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--font-sans);
    /* Features OpenType de Inter (rsms.me/inter/#features), decisión de identidad de UX.1:
       cv11 = "a" de un solo piso (single-story a); ss01 = dígitos abiertos (0/6/9 más
       legibles en tamaños pequeños); ss03 = comillas y comas redondas. No conflictúan con
       `tabular-nums` (tag `tnum`) usado en `.orion-num` para cifras financieras. */
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--text);
    background: var(--bg);
    margin: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-hover); text-decoration: none; }

code, .orion-input-mono { font-family: var(--font-mono); font-size: 0.92em; }

/* tabular-nums universal donde se renderizan montos */
.orion-num,
td.orion-num,
th.orion-num,
.orion-summary-value,
.orion-stat-value,
.orion-input-num { font-variant-numeric: tabular-nums; }

th.orion-num, td.orion-num { text-align: right; }

/* ============================================================
   SHELL
   ============================================================ */

/* ── Shell de navegación: sidebar + hub-página + main ────────────────────────
   Grid de 2 columnas. Sidebar de 248px: hamburguesa arriba (contrae al rail
   de 56px), búsqueda ⌘K, Frecuentes, Módulos como LINKS a su página hub
   (/hub/{id} — launchpad de botones en el contenido; nada expande hacia
   abajo) y el usuario SOLO abajo. Reemplaza al acordeón (rechazado: "nada
   que abra hacia abajo") y antes al rail+hub flotante.

   AppNav es un island interactivo (@rendermode InteractiveServer) que porta
   las clases de estado (.is-collapsed / .is-mobile-open) en .orion-nav-state;
   el shell ESTÁTICO reacciona vía :has() — el estado nunca cruza el boundary
   SSR→interactive por parámetros. */
.orion-shell {
    --sidebar-width: 248px;
    --sidebar-width-mini: 56px;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    transition: grid-template-columns var(--transition-base);
}
.orion-shell:has(.orion-nav-state.is-collapsed) {
    grid-template-columns: var(--sidebar-width-mini) 1fr;
}

/* El island no tiene caja propia; el aside ocupa la columna 1. */
.orion-nav-state { display: contents; }

.orion-sidebar {
    grid-column: 1;
    position: sticky;
    top: 0;
    /* sticky crea stacking context con z-index:auto; sin esto, el flyout del
       UserMenu en rail pinta DEBAJO de sticky/lookups del contenido (tfoot
       z-1, lookups z-200). 500 = sobre el contenido, bajo modales (1000+). */
    z-index: 500;
    height: 100vh;
    height: 100dvh;   /* toolbars dinámicas (tablets en ancho desktop) */
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: var(--border-width) solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;              /* solo .orion-sidebar-scroll scrollea */
}

/* — Header: SOLO la hamburguesa (sin marca ni empresa — la identidad vive en
     el CompanySwitcher del topbar). Contrae/expande el rail en desktop. — */
.orion-sidebar-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 var(--space-2);
}
.orion-sidebar-burger {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.orion-sidebar-burger:hover { background: var(--sidebar-bg-hover); color: #fff; }
.orion-sidebar-burger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* — Búsqueda global visible (abre la CommandPalette, misma que Ctrl/⌘+K) — */
.orion-sidebar-search {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) var(--space-3) var(--space-2);
    padding: 0 var(--space-3);
    height: 34px;
    background: var(--sidebar-bg-hover);
    border: var(--border-width) solid var(--sidebar-border);
    border-radius: var(--radius-md);
    color: var(--sidebar-group);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.orion-sidebar-search:hover { color: var(--sidebar-text); border-color: var(--sidebar-group); }
.orion-sidebar-search:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.orion-sidebar-search-label { flex: 1; text-align: left; }
.orion-sidebar-kbd {
    font-family: var(--font-mono, ui-monospace);
    font-size: 10px;
    border: var(--border-width) solid var(--sidebar-border);
    border-radius: var(--radius-sm);
    padding: 0 5px;
    color: var(--sidebar-group);
}

/* — ÚNICA zona scrolleable — */
.orion-sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-2) var(--space-3);
}

.orion-sidebar-glabel {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--sidebar-group);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-3) var(--space-2) var(--space-1);
}

/* — Fila de nav (Frecuentes, enlaces directos, cabecera de módulo) — */
.orion-side-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 7px var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sidebar-text);
    font-size: var(--font-size-sm);
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.orion-side-item:hover { background: var(--sidebar-bg-hover); color: #fff; text-decoration: none; }
.orion-side-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.orion-side-item.active {
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: var(--font-weight-medium);
}
.orion-side-item .orion-icon { color: var(--sidebar-group); flex-shrink: 0; }
.orion-side-item:hover .orion-icon,
.orion-side-item.active .orion-icon { color: currentColor; }
.orion-side-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fila de módulo: LINK a su página hub (/hub/{id}). .active = su hub está
   abierto (accent pleno); .is-here = la pantalla actual pertenece al módulo
   (barrita de orientación). */
.orion-side-modhead { position: relative; }
.orion-side-modhead.is-here::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--accent);
}
/* Chevron fijo a la derecha: señal de "lleva a su hub" — nunca rota. */
.orion-side-chevron {
    display: inline-flex;
    opacity: 0.55;
}

/* — Pie: ÚNICA aparición del usuario (su menú abre hacia arriba) — */
.orion-sidebar-foot {
    flex-shrink: 0;
    border-top: var(--border-width) solid var(--sidebar-border);
    padding: var(--space-2);
}
.orion-sidebar-user { width: 100%; }

/* — Estado colapsado (rail 56px, solo iconos, vía hamburguesa): los iconos
   siguen llevando a la página hub del módulo (con texto grande al llegar) —
   SOLO desktop: en móvil el off-canvas siempre va expandido, y restringir
   aquí evita tener que anular reglas con revert (que retrocede al origen
   user-agent y rompe los display flex de search/chevron). */
@media (min-width: 769px) {
    .orion-nav-state.is-collapsed .orion-sidebar-head { justify-content: center; padding: 0; }
    .orion-nav-state.is-collapsed .orion-sidebar-search-label,
    .orion-nav-state.is-collapsed .orion-sidebar-kbd,
    .orion-nav-state.is-collapsed .orion-sidebar-glabel,
    .orion-nav-state.is-collapsed .orion-side-label,
    .orion-nav-state.is-collapsed .orion-side-chevron,
    .orion-nav-state.is-collapsed .orion-usermenu-trigger-info,
    .orion-nav-state.is-collapsed .orion-usermenu-chevron { display: none; }
    .orion-nav-state.is-collapsed .orion-sidebar-search { justify-content: center; margin-inline: var(--space-2); padding: 0; height: 34px; }
    .orion-nav-state.is-collapsed .orion-side-item { justify-content: center; padding: 10px 0; }
    .orion-nav-state.is-collapsed .orion-side-modhead.is-here::before { left: 0; }
    /* Rail: solo el avatar (target completo del trigger ≥44px). */
    .orion-nav-state.is-collapsed .orion-usermenu-trigger { justify-content: center; padding: 6px 0; }
    /* El panel no cabe en 56px y el aside clipea (overflow hidden): flyout
       fijo pegado al rail, abajo-izquierda. Sin transform en ancestros en
       desktop, fixed ancla al viewport. */
    .orion-nav-state.is-collapsed .orion-usermenu-panel {
        position: fixed;
        left: calc(var(--sidebar-width-mini) + var(--space-2));
        right: auto;
        bottom: var(--space-3);
        width: 270px;
    }
}

/* Backdrop: solo off-canvas móvil (ver media query). */
.orion-sidebar-backdrop { display: none; }

/* Hamburguesa móvil — fija arriba-izquierda, oculta en desktop. Vive en el
   island AppNav para que su click corra en el boundary interactivo. */
.orion-nav-burger {
    display: none;                     /* solo móvil (media query la muestra) */
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1003;                     /* sobre el backdrop (1001) y sidebar (1002) */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
}
.orion-nav-burger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Página hub de módulo (/hub/{modulo}) ────────────────────────────────────
   Launchpad de botones grandes en el ÁREA DE CONTENIDO: pulsar un módulo en
   el sidebar navega aquí (nada expande hacia abajo ni flota al lado). Tiles
   tipo card 1px border — sin sombras, sin gradientes; el accent queda para
   navegación activa y focus. */
.orion-hub-crumb { font-size: var(--font-size-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.orion-hub-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-6);
}
.orion-hub-title:focus { outline: none; } /* recibe foco programático tras navegar (FocusOnNavigate) */
.orion-hub-section { margin-bottom: var(--space-8); }
.orion-hub-heading {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-3);
}
.orion-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}
.orion-hub-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;                       /* > 44px táctil, denso sin apretar */
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.orion-hub-tile:hover { border-color: var(--border-strong); color: var(--text-primary); text-decoration: none; }
.orion-hub-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.orion-hub-tile .orion-icon { color: var(--text-muted); flex-shrink: 0; }
.orion-hub-tile:hover .orion-icon { color: var(--text-secondary); }

.orion-main { grid-column: 2; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

.orion-topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    border-bottom: var(--border-width) solid var(--topbar-border);
}

.orion-tenant-badge { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-sm); }
.orion-tenant-code {
    font-weight: var(--font-weight-semibold);
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
    font-size: var(--font-size-xs);
}
.orion-tenant-name { font-size: var(--font-size-sm); color: var(--text-muted); }

/* Búsqueda global en el top bar (MainLayout). Botón que abre la paleta
   Ctrl/⌘+K vía window.orionNav.openPalette — el shell es SSR estático.
   En ancho reducido queda solo la lupa. */
.orion-topbar-search {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 6px var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.orion-topbar-search:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.orion-topbar-search:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
.orion-topbar-search .orion-kbd { font-size: 10px; padding: 1px 5px; }
@media (max-width: 720px) {
    .orion-topbar-search-label,
    .orion-topbar-search .orion-kbd { display: none; }
    .orion-topbar-search { padding: 6px; }
}

/* — Company switcher (Slack/GitHub-style dropdown en topbar) — */
.orion-switcher { position: relative; }

.orion-switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 6px 10px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.orion-switcher-trigger:hover { background: var(--surface-hover); border-color: var(--border); }
.orion-switcher-trigger .orion-login-avatar { width: 28px; height: 28px; font-size: 11px; }
.orion-switcher-info { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; line-height: 1.2; }
.orion-switcher-code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.orion-switcher-name {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-switcher-trigger .orion-icon { color: var(--text-muted); transition: transform var(--transition-fast); }
.orion-switcher-trigger[aria-expanded="true"] .orion-icon { transform: rotate(90deg); }

.orion-switcher-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

.orion-switcher-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 360px;
    max-width: calc(100vw - var(--space-4));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.orion-switcher-head {
    padding: var(--space-3) var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--border);
}
.orion-switcher-title {
    margin: 0;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}
.orion-switcher-sub { margin: 2px 0 0 0; font-size: 11px; color: var(--text-muted); }

.orion-switcher-search {
    margin: var(--space-2) var(--space-3) 0;
    background: var(--surface-hover);
    border-color: var(--border);
}
.orion-switcher-search input { color: var(--text); }
.orion-switcher-search input::placeholder { color: var(--text-muted); }

.orion-switcher-list {
    padding: var(--space-2);
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.orion-switcher-list::-webkit-scrollbar { width: 6px; }
.orion-switcher-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.orion-switcher-list .orion-login-section-label { color: var(--text-muted); margin: var(--space-2) var(--space-2) var(--space-1); }

.orion-switcher-row-form { margin: 0; }
.orion-switcher-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.orion-switcher-row:hover { background: var(--surface-hover); }
.orion-switcher-row[data-current="true"] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.orion-switcher-row[data-current="true"] .orion-icon { color: var(--accent); margin-left: auto; }
.orion-switcher-row .orion-login-avatar { width: 32px; height: 32px; font-size: 12px; }
.orion-switcher-row-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; line-height: 1.3; }
.orion-switcher-row-name {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-switcher-row-meta {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.orion-switcher-foot {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}
.orion-switcher-foot form { margin: 0; }
.orion-switcher-foot-link {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}
.orion-switcher-foot-link:hover { color: var(--status-danger); }

/* — Menú de cuenta del usuario (FOOTER del sidebar, única aparición) — */
/* El separador lo pone el border-top de .orion-sidebar-foot; el panel abre
   HACIA ARRIBA (abajo no hay espacio y el aside clipea con overflow hidden). */
.orion-usermenu {
    position: relative;
}
.orion-usermenu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 6px 8px;
    color: var(--sidebar-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.orion-usermenu-trigger:hover { background: var(--sidebar-bg-hover); border-color: var(--sidebar-border); }
.orion-usermenu-avatar {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 12px;
}
.orion-usermenu-trigger-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.orion-usermenu-name {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--sidebar-text-active);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-usermenu-email {
    font-size: 11px;
    color: var(--sidebar-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* El chevron apunta hacia ARRIBA (el menú abre hacia arriba); abierto, baja. */
.orion-usermenu-chevron { display: inline-flex; color: var(--sidebar-text); flex-shrink: 0; transition: transform var(--transition-fast); transform: rotate(180deg); }
.orion-usermenu-chevron.is-open { transform: rotate(0deg); }

.orion-usermenu-panel {
    position: absolute;
    bottom: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: 100;
    max-width: calc(100vw - var(--space-4));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: var(--space-2);
}
.orion-usermenu-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}
.orion-usermenu-head-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; }
.orion-usermenu-head-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    font-size: 15px;
}
.orion-usermenu-camera {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.orion-usermenu-camera:hover { color: var(--accent); border-color: var(--accent); }
.orion-usermenu-head-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.orion-usermenu-head-name {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-usermenu-head-email {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-usermenu-role {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    color: var(--accent);
    background: var(--accent-soft);
    padding: 1px 8px;
    border-radius: 999px;
}
.orion-usermenu-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.orion-usermenu-link:hover { background: var(--surface-hover); }
.orion-usermenu-link .orion-icon,
.orion-usermenu-link svg { color: var(--text-muted); flex-shrink: 0; }
.orion-usermenu-link.is-disabled { color: var(--text-muted); cursor: default; }
.orion-usermenu-link.is-disabled:hover { background: transparent; }
.orion-usermenu-soon {
    margin-left: auto;
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    background: var(--surface-hover);
    padding: 1px 6px;
    border-radius: 999px;
}
.orion-usermenu-toggle-row { justify-content: space-between; }
.orion-usermenu-toggle-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.orion-usermenu-kbd {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

/* CommandPalette.razor (Fase 3) — paleta de comandos global Ctrl/⌘+K.
   Modal centrado arriba con backdrop translúcido. Items con icono +
   título + ruta; agrupados por categoría con header. */
.orion-cmdk-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
}
.orion-cmdk {
    position: fixed; top: 15vh; left: 50%; transform: translateX(-50%);
    z-index: 1001; width: 600px; max-width: calc(100% - 2rem);
    max-height: 70vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.orion-cmdk-input-row {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.orion-cmdk-input-row input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 15px; color: var(--text);
}
.orion-cmdk-list {
    flex: 1; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none;
}
.orion-cmdk-group-header {
    padding: 8px 16px 4px;
    font-size: 11px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.orion-cmdk-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    cursor: pointer; color: var(--text);
}
.orion-cmdk-item.is-selected { background: var(--surface-hover); }
.orion-cmdk-item .orion-cmdk-title { flex: 1; font-size: 14px; }
.orion-cmdk-item .orion-cmdk-route {
    font-size: 11px; color: var(--text-muted); font-family: var(--font-mono);
}
.orion-cmdk-empty {
    padding: 20px 16px; text-align: center; color: var(--text-muted); font-size: 13px;
}
.orion-cmdk-footer {
    display: flex; gap: 16px; justify-content: flex-end;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-muted);
}
.orion-cmdk-footer .orion-kbd { font-size: 10px; padding: 1px 5px; }

/* VendorPickerModal — modal de lookup de suplidores disparado con F5.
   Comparte estilo con la paleta de comandos pero con CTA "+ Crear nuevo"
   más prominente en el footer + empty state cuando no hay coincidencias. */
.orion-vpm-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
}
.orion-vpm {
    position: fixed; top: 12vh; left: 50%; transform: translateX(-50%);
    z-index: 1001; width: 640px; max-width: calc(100% - 2rem);
    max-height: 75vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.orion-vpm-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.orion-vpm-head h3 { margin: 0; font-size: 15px; }
.orion-vpm-close {
    border: 0; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--text-muted);
    padding: 0 6px;
}
.orion-vpm-search {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.orion-vpm-search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 14px; color: var(--text);
}
.orion-vpm-spinner { color: var(--text-muted); font-size: 13px; }
.orion-vpm-list {
    flex: 1; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none;
}
.orion-vpm-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; cursor: pointer; color: var(--text);
}
.orion-vpm-item.is-selected { background: var(--surface-hover); }
.orion-vpm-item code {
    font-family: var(--font-mono); font-size: 12px;
    background: var(--surface-2); padding: 2px 6px; border-radius: 4px;
    color: var(--text-muted); flex-shrink: 0;
}
.orion-vpm-item-main { flex: 1; min-width: 0; }
.orion-vpm-name { font-size: 14px; }
.orion-vpm-meta { font-size: 11px; color: var(--text-muted); }
.orion-vpm-empty {
    padding: 24px 16px; text-align: center; color: var(--text-muted);
    font-size: 13px; display: flex; flex-direction: column; gap: 12px;
    align-items: center;
}
.orion-vpm-create { display: inline-flex; gap: 6px; align-items: center; }
.orion-vpm-foot {
    display: flex; gap: 16px; align-items: center; justify-content: flex-end;
    padding: 8px 16px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-muted);
}
.orion-vpm-foot .orion-kbd { font-size: 10px; padding: 1px 5px; }
.bn-inline-hint { margin-left: 8px; color: var(--text-muted); }

/* Shortcut.razor — display de atajos OS-aware. En macOS sin "+" entre
   modificadores (convención Apple); en Windows/Linux con "+" visual. */
.orion-shortcut { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.orion-shortcut-plus { color: var(--text-muted); font-size: 10px; }
.orion-kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    line-height: 1;
}
.orion-usermenu-sep { height: 1px; background: var(--border); margin: var(--space-2) 0; }
.orion-usermenu-logout { color: var(--status-danger); }
.orion-usermenu-logout svg { color: var(--status-danger); }
.orion-usermenu-logout:hover { background: color-mix(in srgb, var(--status-danger) 10%, transparent); }
.orion-usermenu form { margin: 0; }

/* Switch (toggle) reusable — usado en "Modo oscuro" del UserMenu */
.orion-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background var(--transition-fast);
    flex-shrink: 0;
}
.orion-switch.is-on { background: var(--accent); }
.orion-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--transition-fast);
}
.orion-switch.is-on .orion-switch-knob { transform: translateX(16px); }

/* — Editor de foto de perfil en Seguridad — */
.orion-avatar-edit {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
}
.orion-avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 22px;
}
.orion-avatar-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.orion-avatar-upload {
    cursor: pointer;
    margin: 0;
}
.orion-avatar-upload input[type="file"] { display: none; }

/* — 2FA (TOTP) en Seguridad — */
.orion-pill-success {
    color: var(--status-success-strong);
    background: var(--status-success-bg);
}
.orion-2fa-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0;
    font-size: 13px;
    color: var(--text);
}
.orion-2fa-key {
    display: inline-block;
    margin: var(--space-2) 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    user-select: all;
}
.orion-recovery-codes {
    list-style: none;
    margin: var(--space-2) 0 var(--space-3);
    padding: var(--space-3);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 6px var(--space-5);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text);
    user-select: all;
}
/* Botón secundario en variante destructiva (Desactivar 2FA) */
.orion-btn-destructive {
    color: var(--status-danger);
    border-color: color-mix(in srgb, var(--status-danger) 40%, transparent);
}
.orion-btn-destructive:hover { background: color-mix(in srgb, var(--status-danger) 10%, transparent); }

/* — Empty state del panel de tenants en login — */
.orion-login-tenants-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-2);
    color: #6b7184;
    padding: var(--space-6);
}
.orion-login-tenants-empty .orion-icon { color: #4a5468; }
.orion-login-tenants-empty-title { margin: 0; font-size: 15px; font-weight: var(--font-weight-medium); color: #d2d6e0; }
.orion-login-tenants-empty-sub { margin: 0; font-size: 12px; color: #6b7184; max-width: 280px; line-height: 1.5; }

.orion-user-info { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--text-muted); }
.orion-logout-form { margin: 0; }

.orion-content { padding: var(--space-6) var(--space-8); max-width: 1400px; width: 100%; box-sizing: border-box; }

/* ============================================================
   PAGE HEADER
   ============================================================ */

.orion-page-header { margin-bottom: var(--space-5); }
.orion-page-header h1 { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; line-height: var(--line-height-tight); }
.orion-page-sub { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); }
.orion-page-foot { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.orion-page-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.orion-status-row { display: flex; gap: var(--space-1); }

/* ============================================================
   STATS
   ============================================================ */

.orion-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.orion-stat-card {
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.orion-stat-label { color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.orion-stat-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }

/* ============================================================
   SECTION
   ============================================================ */

.orion-section {
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}
.orion-section-mt { margin-top: var(--space-3); }
/* Fila de secciones lado a lado (regla del dueño en condominios 2026-07-16:
   todo formulario cabe en 1366×768 sin scroll — compactar apilando MENOS,
   no recortando campos). Colapsa a 1 columna bajo 1024px. */
.orion-section-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
    margin-bottom: var(--space-4);
}
.orion-section-row > .orion-section { margin-bottom: 0; }
/* Reparto 2/5 – 3/5 para filas donde la sección derecha carga más controles
   (Configuración del condominio: atrasos con pares tipo+tasa y acta+fecha).
   minmax(0, …) evita que el min-content de un select con opciones largas
   estire su columna y estreche la otra (1fr solo = minmax(auto, 1fr)). */
.orion-section-row-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
/* Variante de 3 columnas para filas de bloques colapsados (`<details>` de una
   línea): tres secciones plegadas cuestan 49px en una fila en vez de 147px +
   gaps apiladas. Presupuesto de altura de 1366×768 (spec §3.1). */
.orion-section-row-3 {
    grid-template-columns: repeat(3, 1fr);
    /* start, no el stretch heredado: al desplegar uno de los tres bloques las
       otras dos cards quedarían estiradas con espacio muerto hasta igualar su
       altura. Con start cada una conserva la suya. */
    align-items: start;
}
@media (max-width: 1024px) {
    .orion-section-row,
    .orion-section-row-2-3,
    .orion-section-row-3 { grid-template-columns: 1fr; }
}
.orion-section h2 { margin: 0 0 var(--space-3) 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }
.orion-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-4); flex-wrap: wrap; }
.orion-section-head h2 { margin: 0; }
.orion-section-head h2 .orion-icon { vertical-align: -2px; margin-right: 4px; color: var(--text-muted); }

/* Contador de paso "N de 3" en cabeceras de sección de un formulario por pasos. */
.orion-section-step { font-size: 12px; color: var(--text-muted); font-weight: var(--font-weight-medium); }
.orion-muted { color: var(--text-muted); font-weight: var(--font-weight-regular); font-size: 12px; }

/* Acciones en el header de página (Cancelar / Guardar borrador / Guardar y enviar). */
.orion-header-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* Pill neutra (estado Borrador). */
.orion-pill-muted { color: var(--text-muted); background: var(--surface-hover); font-size: 12px; vertical-align: middle; margin-left: var(--space-2); }

/* Hint pequeño bajo un campo de formulario + fila de label con acción. */
.orion-field-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.orion-field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.orion-btn-link-sm { font-size: 12px; padding: 0; }

/* Totales en vivo de la cotización. */
.orion-quote-totals {
    margin-top: var(--space-3);
    margin-left: auto;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.orion-quote-totals > div { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); }
.orion-quote-totals > div span { color: var(--text-muted); }
.orion-quote-totals-grand {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 6px;
    font-size: 15px !important;
}
.orion-quote-totals-grand strong { color: var(--accent); }

/* Chips para insertar snippets de términos comerciales. */
.orion-quote-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.orion-chip {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-hover);
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.orion-chip:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Chips-filtro de la grilla de revisión de lotes (DEP-4): el mismo .orion-chip, pero clicable
   como toggle — .orion-chip-active marca cuál veredicto está incluido en el filtro. */
.orion-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.orion-chip-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Fila seleccionada en una tabla con selección de fila a fila (grilla + panel lateral). */
.orion-row-selected { background: var(--accent-soft); }

.orion-table th.orion-center, .orion-table td.orion-center { text-align: center; }

/* ── Editor de plantillas (C.7 PR-D): split-view form + preview en vivo ── */
.orion-template-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 1000px) {
    .orion-template-editor { grid-template-columns: 1fr; }
}
.orion-template-form { display: flex; flex-direction: column; gap: var(--space-3); }
.orion-template-actions { justify-content: space-between; }

.orion-template-preview {
    position: sticky;
    top: var(--space-4);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.orion-template-preview-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text);
}
.orion-template-preview-head .orion-icon { color: var(--text-muted); }
.orion-template-preview-head .orion-muted { margin-left: auto; }
.orion-template-preview-frame { width: 100%; height: 70vh; border: 0; background: #fff; }

/* Color: swatch + hex + presets */
.orion-color-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.orion-color-swatch-input { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.orion-color-hex { width: 100px; }
.orion-color-presets { display: flex; gap: 6px; }
.orion-color-preset {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition-fast);
}
.orion-color-preset:hover { transform: scale(1.15); }

.orion-checkbox-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text); cursor: pointer; }
.orion-logo-row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.orion-logo-preview { max-height: 60px; max-width: 200px; border: 1px solid var(--border); border-radius: 6px; padding: 4px; }

/* PR-D2: fieldset agrupador de flags del editor de plantillas. Marco discreto
   para no romper la jerarquía visual; los checkboxes de adentro mantienen el
   estilo .orion-checkbox-field. */
.orion-fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4) var(--space-4);
    margin: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.orion-fieldset legend { padding: 0 var(--space-2); font-size: 12px; font-weight: 600; color: var(--text-muted); }
.orion-checkbox-hint { display: block; margin-left: 26px; font-size: 11px; line-height: 1.3; color: var(--text-muted); }

/* Variante compacta (UX.2.6): paddings y margen menores para forms que viven
   en una sola pantalla (CustomerNew, InvoiceNew, BillNew, etc). El default
   se conserva para reportes y pantallas de detalle donde respirar es deseable. */
.orion-section-compact { padding: var(--space-4); margin-bottom: var(--space-3); }
.orion-section-compact h2 { margin-bottom: var(--space-2); font-size: var(--font-size-sm); }

/* ============================================================
   FORMS SIN SCROLL — utilidades (docs/ux/SPEC_FORMS_SIN_SCROLL.md §5)
   ============================================================ */

/* 1. Cards lado a lado (maestros, config). Colapsa a 1 col en <=1100px
      para no apretar grids 3col internos. align-items:start evita que
      la card corta se estire. */
.orion-card-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: start;
}

/* 2. Header de card slim: icono 16px + h2 en una línea, sin subtítulo
      (el contexto ya lo da el h1 de página). Ahorra ~35px/card vs
      .orion-section-header. Va después de .orion-section-compact h2
      para ganar la cascada (misma especificidad). */
.orion-section-header-slim {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.orion-section-header-slim h2 { margin: 0; font-size: var(--font-size-sm); }
.orion-section-header-slim .orion-icon { color: var(--text-muted); flex-shrink: 0; }

/* 3. Tabla con scroll interno (aplicación de pagos/cobros, líneas de
      asiento): la página nunca crece, la tabla sí. El thead sticky ya
      existe en .orion-table; aquí se asegura z-index sobre los inputs
      de las filas y se suma tfoot sticky para totales siempre visibles.
      El contenedor lleva tabindex="0" en el markup (scroll por teclado)
      → focus visible obligatorio. */
.orion-table-scroll {
    max-height: 45vh;
    overflow-y: auto;
    /* Red de seguridad: en viewports estrechos (o con el menú expandido en
       1366) la tabla de líneas puede exceder el ancho disponible. Sin esto
       overflow-x quedaba en `visible`, que el spec computa a `auto` de forma
       implícita — declararlo explícito documenta la intención y evita que un
       cambio futuro de overflow-y lo convierta en recorte. La fila de
       encabezado (sticky top) acompaña el scroll horizontal: `top` solo fija
       el eje vertical. */
    overflow-x: auto;
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
}
.orion-table-scroll:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.orion-table-scroll thead th { z-index: 1; }
.orion-table-scroll tfoot th,
.orion-table-scroll tfoot td {
    position: sticky;
    bottom: 0;
    /* surface-alt = mismo fondo que thead y .orion-totals-row: evita
       sangrado transparente al scrollear, también en dark mode. */
    background: var(--surface-alt);
    z-index: 1;
    border-top: var(--border-width) solid var(--border);
    padding: var(--space-3) var(--space-4);
}

/* 3b. F1.10 — soporte de .orion-table-scroll para la tabla de líneas
      div-based de InvoiceNew (.orion-line-table): el marco lo aporta el
      contenedor scroll (evita doble borde) y la fila de encabezado actúa
      como thead sticky. El z-index 200 del dropdown del lookup resuelve
      el stacking sobre el encabezado, pero NO escapa el clipping del
      overflow — eso lo resuelve la regla :has() de abajo. Fondo de
      --bg-subtle ya es sólido en dark. */
.orion-table-scroll > .orion-line-table { border: 0; border-radius: 0; }
.orion-table-scroll .orion-line-row-head { position: sticky; top: 0; z-index: 2; }

/* Review PR-7 bloqueante 2 — con el lookup abierto (la lista se renderiza
   condicionalmente en el DOM) se suspende el clipping del contenedor:
   sin esto, una factura de 1 línea recorta el dropdown de productos a
   ~70px. El header sticky deja de pegar mientras la lista está abierta —
   transitorio y aceptable. */
.orion-table-scroll:has(.orion-lookup-list) {
    overflow: visible;
    max-height: none;
}

/* 4. Layout main + aside genérico (generaliza bn-grid de BillNewV2 para
      InvoiceNew y EmployeeForm tab 2). Aside sticky bajo el topbar. */
.orion-form-layout-aside {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-4);
    align-items: start;
}
.orion-form-layout-aside > aside { position: sticky; top: var(--space-4); }

@media (max-width: 1100px) {
    .orion-card-columns { grid-template-columns: 1fr; }
    .orion-form-layout-aside { grid-template-columns: 1fr; }
    .orion-form-layout-aside > aside { position: static; }
}

/* ============================================================
   FORMS
   ============================================================ */

.orion-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-5);
}
/* Variantes de densidad (UX.2.6): grids con más columnas para forms con
   muchos campos cortos. En mobile (<=768px) colapsan a 1 columna como el grid base. */
.orion-form-grid-3col { grid-template-columns: repeat(3, 1fr); }
.orion-form-grid-4col { grid-template-columns: repeat(4, 1fr); }

.orion-col-span-2, .orion-form-field-wide { grid-column: 1 / -1; }
/* Variante "fit": las columnas se reparten a partes iguales aunque una celda
   (select con opciones largas, par de controles) tenga min-content mayor —
   los controles se encogen y truncan en vez de robarle ancho a la otra
   columna. Necesario para presupuestar altura (1366×768 sin scroll). */
.orion-form-grid-fit > * { min-width: 0; }
/* F1.10 (SPEC_FORMS_SIN_SCROLL §3.1) — celda de 2 columnas reales dentro
   del grid 4col ("Cliente wide×2"): -wide ocupa la fila completa, esta
   solo la mitad. Se resetea en <=768px cuando el grid colapsa a 1 col. */
.orion-field-span-2 { grid-column: span 2; }
/* Par de controles en una misma celda del grid (regla del dueño en
   condominios: el formulario cabe en 1366×768 sin scroll — dos controles
   ligados, p. ej. "tipo de recargo + tasa" o "acta + fecha", comparten fila
   y label en vez de costar una fila extra). Los hijos se reparten el ancho;
   un hijo con .orion-field-pair-short toma un ancho fijo corto (fecha). En
   <=768px el grid colapsa a 1 columna y el par ocupa el ancho completo. */
.orion-field-pair { display: flex; gap: var(--space-2); align-items: center; }
.orion-field-pair > * { flex: 1 1 0; min-width: 0; }
.orion-field-pair > .orion-field-pair-short { flex: 0 0 9.5rem; width: 9.5rem; } /* 133px: dd/mm/aaaa + icono sin recorte */
.orion-form-help { color: var(--text-muted); font-size: var(--font-size-xs); margin-top: var(--space-1); }
.orion-text-danger { color: var(--status-danger); }
.orion-text-positive { color: var(--money-positive); }

.orion-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
}
/* DEP-3 — dos selects lado a lado dentro de un .orion-form-field (mes + año del
   período del lote), sin montar un .orion-form-grid entero para dos campos. */
.orion-inline-fields { display: flex; gap: var(--space-2); }
.orion-inline-fields > select { flex: 1; }
/* Reset margin acumulado (UX.2.6): dentro de .orion-form-grid el espaciado
   vertical lo provee el `gap` row. El margin-bottom del field generaba
   doble separación que estiraba el form sin necesidad. */
.orion-form-grid > .orion-form-field { margin-bottom: 0; }
.orion-form-field span,
.orion-form-field-inline span {
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: 0.01em;
}

.orion-form-field input,
.orion-form-field select,
.orion-form-field textarea,
.orion-filters input,
.orion-filters select,
.orion-form-field-inline > input,
.orion-form-field-inline > select {
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.orion-form-field input:hover,
.orion-form-field select:hover,
.orion-form-field textarea:hover,
.orion-filters input:hover,
.orion-filters select:hover { border-color: var(--border-strong); }

.orion-form-field input:focus,
.orion-form-field select:focus,
.orion-form-field textarea:focus,
.orion-filters input:focus,
.orion-filters select:focus,
.orion-form-field-inline > input:focus,
.orion-form-field-inline > select:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.orion-form-field input[disabled],
.orion-form-field select[disabled] { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; }

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

/* Entry lines table inputs */
.orion-entry-lines td { vertical-align: top; padding: var(--space-1) var(--space-2); }
.orion-entry-lines input, .orion-entry-lines select {
    width: 100%;
    padding: 6px var(--space-2);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--surface);
    color: var(--text);
    box-sizing: border-box;
}
.orion-input-num { text-align: right; font-variant-numeric: tabular-nums; }
.orion-num-muted { color: var(--text-faint); }
.orion-totals-row td { background: var(--surface-alt); padding: var(--space-3) var(--space-4); border-top: 2px solid var(--border); font-weight: var(--font-weight-medium); }

/* Detail */
.orion-detail-table th { background: transparent; text-transform: none; letter-spacing: normal; font-size: var(--font-size-xs); color: var(--text-muted); width: 12rem; padding: var(--space-1) var(--space-4); position: static; font-weight: var(--font-weight-medium); }
.orion-detail-table td { padding: var(--space-1) var(--space-4); }

/* ============================================================
   ACTIONS
   ============================================================ */

.orion-actions-bar { display: flex; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-4) 0; border-top: var(--border-width) solid var(--border); }
.orion-actions-inline { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.orion-form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; padding: var(--space-4) 0; }

/* ============================================================
   BUTTONS — 3 variantes (UX.2 incipiente)
   ============================================================ */

.orion-btn-primary,
.orion-btn-secondary,
.orion-btn-ghost,
.orion-btn-success,
.orion-btn-danger,
.orion-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    padding: 9px var(--space-4);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.orion-btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.orion-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
.orion-btn-primary:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.orion-btn-primary:disabled { background: var(--accent); border-color: var(--accent); opacity: 0.5; cursor: not-allowed; }

.orion-btn-secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.orion-btn-secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.orion-btn-secondary:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.orion-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.orion-btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: transparent;
    padding: 9px var(--space-3);
}
.orion-btn-ghost:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.orion-btn-ghost:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.orion-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variantes semánticas (mantienen compatibilidad) */
.orion-btn-success {
    background: var(--status-success);
    color: #fff;
    border-color: var(--status-success);
}
.orion-btn-success:hover { background: color-mix(in srgb, var(--status-success) 88%, black); border-color: color-mix(in srgb, var(--status-success) 88%, black); }
.orion-btn-success:disabled { opacity: 0.5; cursor: not-allowed; }

.orion-btn-danger {
    background: var(--bg-surface);
    color: var(--status-danger);
    border-color: var(--status-danger);
}
/* Hover con --bg-surface (no #fff): en dark el texto pasa a casi-negro sobre el
   rojo y sube el contraste de ~3.8:1 a ~4.6:1 (AA). :focus-visible faltaba solo
   en la variante danger — primary/secondary/ghost ya lo tenían. */
.orion-btn-danger:hover { background: var(--status-danger); color: var(--bg-surface); }
.orion-btn-danger:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.orion-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* V-2 — botón con su atajo visible como badge (<Shortcut />), descubrible sin hover.
   Versión global de la regla que BillNewV2 tenía embebida como .bn-btn-with-shortcut. */
.orion-btn-with-shortcut { display: inline-flex; align-items: center; gap: 6px; }
.orion-btn-with-shortcut .orion-shortcut { margin-left: 4px; opacity: 0.8; }
.orion-btn-with-shortcut:disabled .orion-shortcut { opacity: 0.4; }

.orion-btn-icon-danger { background: transparent; border: 0; color: var(--status-danger); cursor: pointer; font-size: var(--font-size-base); line-height: 1; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.orion-btn-icon-danger:hover { background: var(--status-danger-bg); }
.orion-btn-icon-danger:disabled { color: var(--text-faint); cursor: not-allowed; }

.orion-btn-link {
    background: transparent;
    color: var(--accent);
    border-color: transparent;
    padding: var(--space-1) var(--space-2);
    font-weight: var(--font-weight-medium);
}
.orion-btn-link:hover { color: var(--accent-hover); text-decoration: underline; background: transparent; }
.orion-btn-link:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }
/* V-3 — aria-disabled en vez de disabled: el botón sigue en el tab order y el lector de
   pantalla anuncia el motivo (title/aria-label); el guard real vive en el handler. */
.orion-btn-link[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-outline-light {
    background: transparent;
    border: var(--border-width) solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 6px var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.1); }

/* ============================================================
   CARDS / REPORTS
   ============================================================ */

.orion-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.orion-card {
    display: block;
    padding: var(--space-5) var(--space-6);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.orion-card:hover { border-color: var(--accent); background: var(--surface-hover); text-decoration: none; }
/* Card "Próximamente" — atenuamos texto/icono/borde explícitamente en lugar
   de usar opacity, para preservar contraste accesible (WCAG AA) cuando el
   usuario inspecciona el contenido o usa lectores de pantalla. */
.orion-card-disabled {
    pointer-events: none;
    background: var(--surface);
    border-color: var(--border-subtle, var(--border));
    cursor: default;
}
.orion-card-disabled:hover { border-color: var(--border-subtle, var(--border)); background: var(--surface); }
.orion-card-disabled h3,
.orion-card-disabled p { color: var(--text-muted); }
.orion-card-disabled .orion-card-icon { color: var(--text-muted); }
.orion-card-icon { display: inline-block; font-size: var(--font-size-lg); margin-bottom: var(--space-2); color: var(--accent); }
.orion-card h3 { margin: var(--space-1) 0 var(--space-1) 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text); letter-spacing: -0.01em; }
.orion-card p { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); line-height: var(--line-height-base); }
.orion-card h3 .orion-pill { font-size: var(--font-size-xs); margin-left: var(--space-2); vertical-align: middle; }

/* ============================================================
   FILTERS
   ============================================================ */

.orion-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: end;
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
}
.orion-filters input, .orion-filters select { min-width: 160px; }
.orion-filters input[type="search"] { flex: 1 1 240px; }

.orion-form-field-inline { display: flex; flex-direction: column; gap: var(--space-1); min-width: 8rem; }
.orion-flex-grow { flex-grow: 1; min-width: 14rem; }

/* ============================================================
   SUMMARY BLOCKS
   ============================================================ */

.orion-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.orion-summary-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
}
.orion-summary-label { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: var(--font-weight-medium); }
.orion-summary-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.orion-summary-highlight { background: var(--money-positive-bg); border-color: var(--money-positive); }
.orion-summary-highlight .orion-summary-value { color: var(--money-positive); }
.orion-summary-danger { background: var(--money-negative-bg); border-color: var(--money-negative); }
.orion-summary-danger .orion-summary-value { color: var(--money-negative); }

/* ============================================================
   TABLES
   ============================================================ */

.orion-table-wrapper {
    overflow-x: auto;
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.orion-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); line-height: var(--line-height-base); }

.orion-table thead th {
    text-align: left;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    text-transform: none;
    letter-spacing: 0.01em;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border);
    position: sticky;
    top: 0;
}

.orion-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border);
    color: var(--text);
}
.orion-table tbody tr:last-child td { border-bottom: none; }

/* En lugar de zebra striping, hover sutil — más Linear-style */
.orion-table-striped tbody tr:hover td { background: var(--surface-hover); }
.orion-table tbody tr:hover td { background: var(--surface-hover); }

.orion-table .orion-cell-desc { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orion-row-void { color: var(--text-muted); }
.orion-row-void code { color: var(--text-muted); }

.orion-table-compact td, .orion-table-compact th { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); }
.orion-th-group { text-align: center; background: var(--surface-alt); border-bottom: var(--border-width) solid var(--border); font-size: var(--font-size-xs); }

th { text-align: left; }

/* Aging bucket emphasis */
.orion-aging-over { color: var(--status-danger); font-weight: var(--font-weight-semibold); }

/* Clickable rows */
.orion-clickable { cursor: pointer; }
.orion-clickable:hover td { background: var(--surface-hover) !important; }

/* ============================================================
   PILLS / BADGES
   ============================================================ */

.orion-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    line-height: 1.5;
}
.orion-pill-detail { background: var(--accent-soft); color: var(--accent); }
.orion-pill-header { background: #f1ecff; color: #5a3ad6; }
.orion-pill-posted { background: var(--status-success-bg); color: var(--status-success-strong); }
.orion-pill-draft { background: var(--status-warning-bg); color: var(--status-warning-strong); }
.orion-pill-void { background: var(--status-danger-bg); color: var(--status-danger-strong); }
/* F5.1 — "En Espera" usa la paleta warning (ámbar) reutilizando los tokens
   de status. Visualmente igual al draft pero conceptualmente distinto: draft
   = todavía no posteado; warning = pausado por intervención del usuario. */
.orion-pill-warning { background: var(--status-warning-bg); color: var(--status-warning-strong); border-color: var(--status-warning-strong); }
/* F6.1 — "Exportada" (e-CF ACK por DGII). Cyan/info para diferenciar de
   Posted (success) — semánticamente Posted+1 en el flujo electrónico. */
.orion-pill-exported { background: #e0f2fe; color: #075985; border-color: #38bdf8; }
[data-theme="dark"] .orion-pill-exported { background: #082f49; color: #7dd3fc; border-color: #0369a1; }

/* === C.9.s.2 F4.1 — Tags (chips + picker) ===
   Cada tag puede tener su propio color (--tag-color); si no, cae a un azul neutro.
   Estados: idle = borde gris, selected = fondo coloreado. */
.orion-tag-chip {
    --tag-color: var(--accent);

    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--tag-color);
    background: transparent;
    color: var(--tag-color);
    font-size: .8125rem;
    cursor: pointer;
    transition: background-color 100ms ease, color 100ms ease;
}
.orion-tag-chip:hover { background: color-mix(in srgb, var(--tag-color) 12%, transparent); }
.orion-tag-chip-selected {
    background: color-mix(in srgb, var(--tag-color) 18%, transparent);
    color: var(--tag-color);
    font-weight: 600;
}
.orion-tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* === C.9.s.2 F6.2 — Audit timeline en modal de Historial de factura === */
.orion-audit-timeline {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0;
    border-left: 2px solid var(--border);
}
.orion-audit-event {
    position: relative;
    padding: var(--space-2) var(--space-3) var(--space-3) var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.orion-audit-event::before {
    content: "";
    position: absolute;
    left: -7px;
    top: var(--space-3);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border-strong);
}
.orion-audit-event-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
}
.orion-audit-event-body { flex: 1; min-width: 0; }
.orion-audit-event-headline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.orion-audit-event-time {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.orion-audit-event-actor {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

/* === C.9.s.2 F8.1 — Meta línea de factura (Unidad, Categoría, Precio sug.) === */
.orion-line-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}
.orion-line-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}
.orion-line-meta-sub {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* === C.9.s.2 F8.2 — Tour onboarding (OnboardingStepper) === */
.orion-tour-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1000;
}
.orion-tour-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    /* CR PR #191: contención vertical con scroll para que los botones de
       acción queden siempre accesibles en pantallas chicas o con zoom. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    z-index: 1001;
    outline: none;
}
.orion-tour-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.orion-tour-step-indicator {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
}
.orion-tour-title {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}
.orion-tour-body {
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}
.orion-tour-body strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.orion-tour-body em { font-style: italic; color: var(--accent); }
.orion-tour-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    align-items: center;
}

@media (max-width: 480px) {
    .orion-tour-card {
        width: calc(100vw - 16px);
        padding: var(--space-4);
    }
}

/* === F1.8 — Ticket térmico genérico (80mm / 58mm) ===
   Generaliza el voucher de tarjeta (C.9.s.2 F8.4, antes `printing-voucher`)
   a cualquier documento en formato ticket: recibo de ingreso, cierre de
   caja, etc. El componente ThermalTicket.razor agrega `printing-ticket`
   (+ `printing-ticket-58` cuando aplica) al body justo antes de
   window.print() y la remueve al terminar.
   ref: docs/Symasoft/_inventario/MATRIZ_COBERTURA_FUNCIONAL.md §4 (nivel 1). */

/* En pantalla: oculto (el ticket existe solo para imprimir). */
.orion-ticket { display: none; }

/* Solo aplica el "hide all + show ticket" cuando el body tiene la clase
   `printing-ticket`. Sin esto, Cmd+P en cualquier otra página rompería la
   impresión normal del navegador. */
@media print {
    body.printing-ticket * { visibility: hidden; }
    body.printing-ticket .orion-ticket,
    body.printing-ticket .orion-ticket * { visibility: visible; }
    body.printing-ticket .orion-ticket {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        font-family: 'Courier New', monospace;
        line-height: 1.4;
        color: #000;
        background: #fff;
        /* Montos alineados en columna — regla del sistema de diseño. */
        font-variant-numeric: tabular-nums;
    }
    /* Variante 80mm — Epson TM-T20 y compatibles. */
    body.printing-ticket .orion-ticket-80 {
        width: 80mm;
        padding: 6mm 5mm;
        font-size: 11pt;
    }
    /* Variante 58mm — térmicas genéricas angostas. Fuente menor y padding
       reducido para que NCF/RNC y montos no se corten en el borde. */
    body.printing-ticket .orion-ticket-58 {
        width: 58mm;
        padding: 4mm 3mm;
        font-size: 8.5pt;
    }

    /* Piezas internas dimensionadas en `em` para que escalen con la
       variante de ancho sin duplicar reglas. */
    .orion-ticket-header {
        text-align: center;
        margin-bottom: 4mm;
        padding-bottom: 3mm;
        border-bottom: 2px solid #000;
    }
    .orion-ticket-company { font-size: 1.15em; font-weight: 700; }
    .orion-ticket-meta { font-size: 0.85em; }
    .orion-ticket-title { font-weight: 700; margin-top: 2mm; letter-spacing: 0.05em; }
    .orion-ticket-row {
        display: flex;
        justify-content: space-between;
        gap: 3mm;
        margin: 1.5mm 0;
    }
    .orion-ticket-row span { color: #333; }
    .orion-ticket-row strong { font-weight: 700; text-align: right; }
    /* Total / diferencias en negrita y cuerpo mayor — criterio de
       aceptación: "total en negrita" legible en térmica. */
    .orion-ticket-total { font-size: 1.18em; margin: 2.5mm 0; }
    .orion-ticket-divider { border-top: 1px dashed #999; margin: 2.5mm 0; }
    .orion-ticket-section {
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        margin: 3mm 0 1.5mm 0;
        font-size: 0.9em;
        letter-spacing: 0.04em;
    }
    .orion-ticket-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
    .orion-ticket-table th,
    .orion-ticket-table td { padding: 0.6mm 0; text-align: left; font-weight: 400; }
    .orion-ticket-table thead th { border-bottom: 1px solid #000; font-weight: 700; }
    .orion-ticket-table tfoot th { border-top: 1px solid #000; font-weight: 700; }
    .orion-ticket-table .orion-ticket-num { text-align: right; }
    .orion-ticket-notes { margin: 1mm 0; font-size: 0.9em; text-align: left; }
    .orion-ticket-footer { margin-top: 6mm; text-align: center; }
    .orion-ticket-footer p { margin: 1.5mm 0; font-size: 0.9em; }
    .orion-ticket-signature { border-top: 1px solid #000; margin: 12mm 4mm 1mm 4mm; }
    .orion-ticket-thanks { font-style: italic; margin-top: 3mm; font-size: 0.85em; }

    /* Named pages solo para el ticket — otras impresiones (asientos,
       reportes A4/Carta) mantienen el tamaño por defecto. */
    @page ticket {
        size: 80mm auto;
        margin: 0;
    }
    @page ticket-58 {
        size: 58mm auto;
        margin: 0;
    }
    body.printing-ticket { page: ticket; }
    body.printing-ticket.printing-ticket-58 { page: ticket-58; }
}

[data-theme="dark"] .orion-pill-header { background: #2a1f4d; color: #b59cf5; }

.orion-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-pill);
    letter-spacing: 0.01em;
}
.orion-badge-success { background: var(--status-success-bg); color: var(--status-success); }
.orion-badge-warning { background: var(--status-warning-bg); color: var(--status-warning); }
.orion-badge-neutral { background: var(--surface-alt); color: var(--text-muted); border: var(--border-width) solid var(--border); }

/* ============================================================
   STATUS / EMPTY / LOADING / ALERTS
   ============================================================ */

.orion-loading { color: var(--text-muted); padding: var(--space-3) 0; font-size: var(--font-size-sm); }
.orion-empty {
    background: var(--surface);
    border: var(--border-width) dashed var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.orion-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    border: var(--border-width) solid transparent;
    line-height: var(--line-height-base);
}
.orion-alert-error { background: var(--status-danger-bg); color: var(--status-danger); border-color: var(--status-danger); }
.orion-alert-success { background: var(--status-success-bg); color: var(--status-success); border-color: var(--status-success); }
.orion-alert-warning { background: var(--status-warning-bg); color: var(--status-warning); border-color: var(--status-warning); }
.orion-alert-info { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ============================================================
   BALANCE SHEET LAYOUT
   ============================================================ */

.orion-bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
@media (max-width: 900px) { .orion-bs-grid { grid-template-columns: 1fr; } }
.orion-bs-col { padding: var(--space-5) var(--space-6); }
.orion-bs-subhead {
    font-size: var(--font-size-sm);
    color: var(--accent);
    margin: var(--space-2) 0 var(--space-1) 0;
    padding-bottom: var(--space-1);
    border-bottom: var(--border-width) solid var(--border);
    font-weight: var(--font-weight-semibold);
}
.orion-bs-earnings td { background: var(--status-warning-bg); font-weight: var(--font-weight-medium); }
.orion-bs-grand { margin-top: var(--space-2); }
.orion-bs-grand tfoot td {
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4);
    background: var(--accent);
    color: #fff !important;
    border: 0 !important;
    font-weight: var(--font-weight-semibold);
}
.orion-bs-grand tfoot strong { color: #fff; }

.orion-bs-summary { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-2); }
.orion-bs-summary > div { display: flex; flex-direction: column; gap: var(--space-1); }
.orion-bs-equals { font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); color: var(--text-muted); align-self: center; padding-top: var(--space-4); }

/* ============================================================
   MUTED ROWS
   ============================================================ */

.orion-row-muted { opacity: 0.55; }

/* ============================================================
   AUTH
   ============================================================ */

.orion-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: var(--space-8) var(--space-4);
}
.orion-auth-card {
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-8);
    width: 100%;
    max-width: 400px;
}
.orion-auth-brand { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-6); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
/* Punto de marca "● Orion" (lo usa AuthLayout; el sidebar ya no lleva marca). */
.orion-brand-mark { color: var(--accent); font-size: var(--font-size-lg); line-height: 1; }
.orion-auth-tagline { font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--text-muted); margin-left: auto; }
.orion-auth-form h1 { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }
.orion-auth-help { color: var(--text-muted); font-size: var(--font-size-sm); margin: 0 0 var(--space-5) 0; }
.orion-auth-error { background: var(--status-danger-bg); color: var(--status-danger); border: var(--border-width) solid var(--status-danger); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); margin-bottom: var(--space-3); }
.orion-auth-footer { color: var(--text-muted); font-size: var(--font-size-xs); margin-top: var(--space-5); line-height: var(--line-height-base); }
.orion-auth-form .orion-btn-primary { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); }

/* ============================================================
   Login secuencial (F1.6 — estilo QuickBooks)
   Paso 1 credenciales (/login) → paso 2 código 2FA (/login/2fa)
   → paso 3 selector de empresa (/elegir-empresa).
   ============================================================ */

.orion-login-shell {
    min-height: 100vh;
    background: #0d0f14;
    color: #f5f6fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.orion-login-card {
    width: 100%;
    max-width: 1100px;
    background: #14161d;
    border: 1px solid #1f232c;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* — Header — */
.orion-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid #1f232c;
}
.orion-login-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.orion-login-brand-mark {
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
}
.orion-login-brand-title {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: #f5f6fa;
}
.orion-login-brand-sub {
    margin: 0;
    font-size: 12px;
    color: #8b91a0;
}
.orion-login-demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1f232c;
    color: #d2d6e0;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
}

/* — Layout legado de tarjeta ancha —
   El login ya no usa esta grilla (F1.6 lo volvió tarjeta angosta), pero
   Register.razor y VerifyEmailResult.razor siguen montados sobre ella. */
.orion-login-body {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    min-height: 540px;
}
.orion-login-form-col {
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-right: 1px solid #1f232c;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (max-width: 900px) {
    .orion-login-body { grid-template-columns: 1fr; }
    .orion-login-form-col { border-right: none; border-bottom: 1px solid #1f232c; }
}

/* — Variantes de ancho de tarjeta (F1.6) —
   La tarjeta de credenciales y la de 2FA son angostas (un solo foco de
   atención, como QuickBooks); el selector de empresa es algo más ancho
   porque su contenido es una lista con avatar + nombre + meta. */
.orion-login-card--narrow { max-width: 440px; }
.orion-login-card--select { max-width: 560px; }

/* — Paso 1: tarjeta de credenciales (columna única) — */
.orion-login-auth-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
}

/* — Paso 2 (2FA): columna única, sin lista de empresas — */
.orion-login-2fa-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    max-width: 420px;
}

/* — Paso 3: selector de empresa standalone — */
.orion-login-select-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    /* Altura mínima estable: que la tarjeta no "salte" al filtrar la lista. */
    min-height: 420px;
}
/* En la página standalone la lista puede respirar más que en la columna
   del login viejo: el contador con 100+ empresas necesita ver más filas. */
.orion-login-select-body .orion-login-tenants-list { max-height: min(52vh, 480px); }

.orion-login-greeting {
    margin: 0;
    color: #8b91a0;
    font-size: 14px;
}

/* Cada fila de empresa es su propio form-post; el wrapper no debe
   alterar el layout de la fila. */
.orion-login-row-form { display: flex; width: 100%; }
.orion-login-row-form .orion-login-tenant-row { flex: 1; }

/* Botón terciario (ghost con borde) para cerrar sesión: visible pero
   sin competir con la acción principal, que es elegir empresa. */
.orion-login-logout {
    background: transparent;
    border: 1px solid #2a2f3a;
    border-radius: 8px;
    color: #8b91a0;
    padding: 8px 14px;
    font-size: 12px;
    font-family: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.orion-login-logout:hover {
    color: #d2d6e0;
    border-color: #3a4150;
}

/* — Form — */
.orion-login-title {
    margin: 0;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: #f5f6fa;
    letter-spacing: -0.02em;
}
.orion-login-sub {
    margin: 0;
    color: #8b91a0;
    font-size: 13px;
}
.orion-login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.orion-login-field span {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: #d2d6e0;
}
.orion-login-field input {
    background: #0d0f14;
    border: 1px solid #2a2f3a;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: #f5f6fa;
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.orion-login-field input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.orion-login-field input::placeholder { color: #5b6271; }

.orion-login-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #d2d6e0;
    font-size: 13px;
    cursor: pointer;
}
.orion-login-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.orion-login-cta-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.orion-login-cta {
    background: #f5f6fa;
    color: #0d0f14;
    border: none;
    border-radius: 10px;
    padding: 14px var(--space-5);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.orion-login-cta:hover:not(:disabled) {
    background: #fff;
    transform: translateY(-1px);
}
.orion-login-cta:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.orion-login-cta-foot {
    margin: 0;
    text-align: center;
    color: #6b7184;
    font-size: 11px;
}

/* — Tenants col — */
.orion-login-tenants-head { display: flex; flex-direction: column; gap: 2px; }
.orion-login-tenants-title {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: #f5f6fa;
    letter-spacing: -0.01em;
}
.orion-login-tenants-sub {
    margin: 0;
    color: #8b91a0;
    font-size: 12px;
}

.orion-login-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: #0d0f14;
    border: 1px solid #2a2f3a;
    border-radius: 10px;
    padding: 0 12px;
}
.orion-login-search .orion-icon { color: #5b6271; flex-shrink: 0; }
.orion-login-search input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 0;
    color: #f5f6fa;
    font-size: 13px;
    font-family: inherit;
}
.orion-login-search input:focus { outline: none; }
.orion-login-search input::placeholder { color: #5b6271; }
.orion-login-search kbd {
    background: #1f232c;
    color: #8b91a0;
    border: 1px solid #2a2f3a;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-family: var(--font-mono);
}

.orion-login-tenants-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    max-height: 360px;
    padding-right: var(--space-1);
}
.orion-login-tenants-list::-webkit-scrollbar { width: 6px; }
.orion-login-tenants-list::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 3px; }

.orion-login-section-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-3) 0 var(--space-1) 0;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: #8b91a0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.orion-login-section-label .orion-icon { color: #6b7184; }

.orion-login-tenant-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 12px;
    color: #d2d6e0;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.orion-login-tenant-row:hover {
    background: #1a1d26;
}
.orion-login-tenant-row.is-recent {
    background: #161922;
    border-color: #1f232c;
}
.orion-login-tenant-row.is-recent:hover {
    background: color-mix(in srgb, var(--accent) 15%, #161922);
    border-color: color-mix(in srgb, var(--accent) 40%, #1f232c);
}
.orion-login-tenant-row.is-recent .orion-icon {
    margin-left: auto;
    color: #5b6271;
}
.orion-login-tenant-row.is-recent:hover .orion-icon { color: #d2d6e0; }

.orion-login-tenant-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.orion-login-tenant-name {
    color: #f5f6fa;
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-login-tenant-meta {
    color: #8b91a0;
    font-size: 11px;
    font-family: var(--font-mono);
}
.orion-login-tenant-code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #6b7184;
    width: 70px;
    flex-shrink: 0;
}

/* — Avatares — */
.orion-login-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
    background: var(--avatar-bg, #4a5568);
}
.orion-login-avatar[data-color="blue"]   { --avatar-bg: #3b5cf3; }
.orion-login-avatar[data-color="green"]  { --avatar-bg: #1d8855; }
.orion-login-avatar[data-color="amber"]  { --avatar-bg: #d97706; }
.orion-login-avatar[data-color="violet"] { --avatar-bg: #7c3aed; }
.orion-login-avatar[data-color="rose"]   { --avatar-bg: #e11d48; }
.orion-login-avatar[data-color="teal"]   { --avatar-bg: #0891b2; }

/* — Footer — */
.orion-login-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid #1f232c;
    color: #6b7184;
    font-size: 11px;
}
.orion-login-footer a { color: var(--accent); text-decoration: none; }
.orion-login-footer a:hover { text-decoration: underline; }

/* ============================================================
   LOOKUP
   ============================================================ */

.orion-lookup { position: relative; }
.orion-lookup input { width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); font-size: var(--font-size-sm); background: var(--surface); color: var(--text); }
.orion-lookup input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.orion-lookup-list {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    max-height: 280px;
    overflow-y: auto;
}
.orion-lookup-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-size: var(--font-size-sm);
    border-bottom: var(--border-width) solid var(--border);
}
.orion-lookup-item:last-child { border-bottom: 0; }
.orion-lookup-item:hover { background: var(--surface-hover); }
/* V-2 — ítem resaltado en los typeaheads. Teclado (↑/↓) y mouse (mouseenter)
   comparten el mismo índice ("roving highlight", patrón combobox WAI-ARIA), así que
   :hover queda como respaldo visual; la barra de acento marca el que Enter elegirá. */
.orion-lookup-item.is-active { background: var(--surface-hover); box-shadow: inset 3px 0 0 var(--accent); }
.orion-lookup-item-empty { padding: var(--space-3); color: var(--text-muted); font-size: var(--font-size-sm); }

/* ============================================================
   ICON COMPONENT (UX.2)
   ============================================================ */

.orion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    color: currentColor;
    vertical-align: middle;
}
.orion-icon svg { width: 100%; height: 100%; stroke-width: 1.75; }

/* ============================================================
   BLAZOR ERROR UI
   ============================================================ */

#blazor-error-ui {
    background: var(--status-danger);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: var(--space-3) var(--space-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-3); top: var(--space-2); }
#blazor-error-ui .reload { color: #fff; text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    /* Off-canvas: el sidebar sale del flujo y se desliza desde la izquierda
       sobre un backdrop. El main ocupa todo el ancho. La hamburguesa fija lo
       abre/cierra. En móvil el sidebar SIEMPRE va expandido (el colapsado a
       56px es un modo de desktop). */
    .orion-shell,
    .orion-shell:has(.orion-nav-state.is-collapsed) {
        grid-template-columns: 1fr;
    }

    /* Targets táctiles: en el drawer las filas suben a ≥44px (en desktop la
       densidad de 34px es deliberada — ahí se opera con mouse). */
    .orion-side-item { min-height: 44px; }
    .orion-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100dvh;
        width: var(--sidebar-width);
        z-index: 1002;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
    }
    .orion-shell:has(.orion-nav-state.is-mobile-open) .orion-sidebar { transform: translateX(0); }
    .orion-shell:has(.orion-nav-state.is-mobile-open) .orion-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(0, 0, 0, 0.5);
    }
    .orion-nav-burger { display: inline-flex; }
    /* Dentro del drawer no hace falta la hamburguesa de colapso: en móvil
       manda la fija del viewport y el rail de 56px no existe. */
    .orion-sidebar-head { display: none; }
    /* El main vuelve a la columna 1: el grid móvil solo tiene un track
       explícito y pedir la columna 2 crearía un track implícito con hueco. */
    .orion-main { grid-column: 1; }
    /* Deja hueco a la izquierda del topbar para no tapar el switcher con la
       hamburguesa fija. */
    .orion-topbar { padding-left: calc(var(--space-6) + 40px); }

    .orion-content { padding: var(--space-4); }
    .orion-form-grid,
    .orion-form-grid-3col,
    .orion-form-grid-4col { grid-template-columns: 1fr; }
    /* F1.10 — con el grid en 1 col, un span 2 explícito crearía una columna
       implícita desbordada; se devuelve al flujo normal. */
    .orion-field-span-2 { grid-column: auto; }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
    .orion-sidebar, .orion-sidebar-backdrop, .orion-nav-burger, .orion-topbar, .orion-actions-bar, .orion-form-actions, .orion-btn-primary, .orion-btn-secondary { display: none !important; }
    .orion-shell { grid-template-columns: 1fr; }
    .orion-main { grid-column: 1; }
    .orion-content { padding: 0; max-width: none; }
    body { background: #fff; }
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    /* Patrón WAI-ARIA estándar: anular animaciones/transiciones globalmente
       cuando el usuario lo solicita en su SO. Las reglas locales (toast,
       skeleton, etc.) lo refuerzan explícitamente pero esto cubre todo el
       resto del CSS (transitions de hover, focus, etc.) sin tener que
       wrappear cada una. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   DASHBOARD EJECUTIVO (compact, fits viewport)
   ============================================================ */

.orion-dash-root {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
    min-height: 0;
}
/* Cuando el dashboard está activo, el header es más compacto y el body llena vertical. */
body:has(.orion-dash-root) .orion-page-header { margin-bottom: var(--space-3); }
body:has(.orion-dash-root) .orion-page-header h1 { font-size: 22px; }
body:has(.orion-dash-root) .orion-content { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; }

/* — Accesos directos (quick actions). Fila superior estilo QuickBooks/Alegra:
   icono circular sobre fondo suave + label, navegando a la acción más común.
   Aparece encima de los KPIs para que el usuario que entra a "hacer algo
   específico" no tenga que abrir el sidebar. — */
.orion-dash-quick-actions {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
}
@media (max-width: 1100px) {
    .orion-dash-quick-actions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .orion-dash-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
.orion-dash-qa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.orion-dash-qa:hover {
    background: var(--surface-hover, #f3f5f9);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.orion-dash-qa:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.orion-dash-qa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.orion-dash-qa-label {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

/* — Top KPI row (Liquidez · Por cobrar · Por pagar · Utilidad mes) — */
.orion-dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
@media (max-width: 1100px) {
    .orion-dash-kpis { grid-template-columns: repeat(2, 1fr); }
}
.orion-dash-kpi {
    --tone: var(--accent);
    --tone-soft: var(--accent-soft);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: relative;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.orion-dash-kpi[data-tone="cash"]    { --tone: var(--tone-cash);    --tone-soft: var(--tone-cash-soft); }
.orion-dash-kpi[data-tone="ar"]      { --tone: var(--tone-ar);      --tone-soft: var(--tone-ar-soft); }
.orion-dash-kpi[data-tone="ap"]      { --tone: var(--tone-ap);      --tone-soft: var(--tone-ap-soft); }
.orion-dash-kpi[data-tone="profit"]  { --tone: var(--money-positive); --tone-soft: var(--money-positive-bg); }
.orion-dash-kpi:hover {
    border-color: color-mix(in srgb, var(--tone) 35%, var(--border));
    transform: translateY(-1px);
}

.orion-dash-kpi-head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.orion-dash-kpi-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tone-soft);
    color: var(--tone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.orion-dash-kpi-icon .orion-icon { display: inline-flex; }
.orion-dash-kpi-value {
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
    word-break: normal;
    overflow-wrap: anywhere;
}
.orion-dash-kpi-value.is-money::before {
    content: 'RD$ ';
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    margin-right: 3px;
    letter-spacing: 0;
}
.orion-dash-kpi-value.is-positive { color: var(--money-positive); }
.orion-dash-kpi-value.is-negative { color: var(--money-negative); }
.orion-dash-kpi-value.is-neutral { color: var(--text-tertiary); }

.orion-dash-kpi-meta {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    display: flex;
    gap: var(--space-1);
    align-items: center;
    flex-wrap: wrap;
}
.orion-dash-kpi-meta .is-up { color: var(--money-positive); font-weight: var(--font-weight-medium); }
.orion-dash-kpi-meta .is-down { color: var(--money-negative); font-weight: var(--font-weight-medium); }
.orion-dash-kpi-meta .is-warn { color: var(--status-warning); font-weight: var(--font-weight-medium); }

/* — Alert banner (overdue invoices, etc.) — */
.orion-dash-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid color-mix(in srgb, var(--status-warning) 40%, var(--border));
    background: color-mix(in srgb, var(--status-warning-bg) 60%, var(--bg-surface));
    border-radius: var(--radius-md);
}
.orion-dash-alert-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--status-warning) 25%, var(--status-warning-bg));
    color: var(--status-warning);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.orion-dash-alert-body { flex: 1; min-width: 0; }
.orion-dash-alert-title {
    margin: 0 0 2px 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--status-warning);
}
.orion-dash-alert-sub {
    margin: 0;
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--status-warning) 70%, var(--text-muted));
}
.orion-dash-alert-action {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--status-warning);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: filter var(--transition-fast);
}
.orion-dash-alert-action:hover { filter: brightness(1.06); }

/* — Three-column row (Aging + Pendientes + Actividad) — */
.orion-dash-grid-3 {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.25fr;
    gap: var(--space-3);
    min-height: 0;
}
@media (max-width: 1280px) {
    .orion-dash-grid-3 { grid-template-columns: 1fr 1fr; }
    .orion-dash-grid-3 > .orion-dash-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
    .orion-dash-grid-3 { grid-template-columns: 1fr; }
    .orion-dash-grid-3 > .orion-dash-card:last-child { grid-column: auto; }
}

.orion-dash-card {
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.orion-dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.orion-dash-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    letter-spacing: -0.01em;
}
.orion-dash-card-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}
.orion-dash-card-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.orion-dash-card-body::-webkit-scrollbar { width: 6px; }
.orion-dash-card-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.orion-dash-card-link {
    color: var(--accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    flex-shrink: 0;
}
.orion-dash-card-link:hover { text-decoration: underline; }

/* — Aging buckets (progress bars) — */
.orion-aging-bucket {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px var(--space-2);
    margin-bottom: var(--space-2);
}
.orion-aging-bucket:last-child { margin-bottom: 0; }
.orion-aging-bucket-label {
    font-size: 12px;
    color: var(--text);
}
.orion-aging-bucket-value {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    text-align: right;
}
.orion-aging-bar {
    grid-column: 1 / -1;
    height: 4px;
    background: var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.orion-aging-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--bar-color, var(--accent));
    transition: width var(--transition-base);
    min-width: 4px;
}
.orion-aging-bucket[data-bucket="current"]   { --bar-color: var(--money-positive); }
.orion-aging-bucket[data-bucket="bucket1"]   { --bar-color: #4f8df7; }
.orion-aging-bucket[data-bucket="bucket2"]   { --bar-color: var(--status-warning); }
.orion-aging-bucket[data-bucket="overdue"]   { --bar-color: var(--status-danger); }
.orion-aging-bucket[data-bucket="overdue"] .orion-aging-bucket-label { color: var(--status-danger); font-weight: var(--font-weight-medium); }

/* — Pendientes (checklist) — */
.orion-dash-checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.orion-dash-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.orion-dash-checklist-mark {
    --mark-tone: var(--text-muted);
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--mark-tone);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    margin-top: 2px;
}
.orion-dash-checklist-item[data-tone="warn"] .orion-dash-checklist-mark   { --mark-tone: var(--status-warning); }
.orion-dash-checklist-item[data-tone="danger"] .orion-dash-checklist-mark { --mark-tone: var(--status-danger); }
.orion-dash-checklist-item[data-tone="info"] .orion-dash-checklist-mark   { --mark-tone: var(--accent); }
.orion-dash-checklist-body { flex: 1; min-width: 0; }
.orion-dash-checklist-title {
    margin: 0;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--text);
    line-height: 1.3;
}
.orion-dash-checklist-sub {
    margin: 1px 0 0 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}
.orion-dash-checklist-item[data-tone="danger"] .orion-dash-checklist-sub { color: var(--status-danger); }
.orion-dash-checklist-link {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
    align-self: center;
}
.orion-dash-checklist-link:hover { text-decoration: underline; }

/* — Actividad reciente (timeline compacto) — */
.orion-dash-activity {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 6px var(--space-2);
    align-items: center;
}
.orion-dash-activity-time {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.orion-dash-activity-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bullet-tone, var(--text-muted));
    margin: 0 auto;
}
.orion-dash-activity-row[data-tone="success"] .orion-dash-activity-bullet { --bullet-tone: var(--status-success); }
.orion-dash-activity-row[data-tone="info"] .orion-dash-activity-bullet    { --bullet-tone: var(--accent); }
.orion-dash-activity-row[data-tone="warn"] .orion-dash-activity-bullet    { --bullet-tone: var(--status-warning); }
.orion-dash-activity-row[data-tone="muted"] .orion-dash-activity-bullet   { --bullet-tone: var(--text-faint); }
.orion-dash-activity-text {
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.orion-dash-activity-text strong { font-weight: var(--font-weight-medium); }
.orion-dash-activity-meta {
    color: var(--text-muted);
    margin-left: var(--space-1);
}
.orion-dash-activity-amount {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
}
.orion-dash-activity-amount.is-positive { color: var(--money-positive); }
.orion-dash-activity-amount.is-negative { color: var(--money-negative); }
.orion-dash-activity-row { display: contents; }

/* — Skeleton loader — */
@keyframes orion-skel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
/* — Skeleton loaders genéricos (UX.4 entregable 6). El prefijo .orion-skel
   se usa fuera del dashboard (e.g. TableSkeleton). Los .orion-dash-skel
   se mantienen como alias para no romper DashboardSkeleton existente. — */
.orion-skel,
.orion-dash-skel {
    display: inline-block;
    background: var(--surface-hover);
    border-radius: var(--radius-sm);
    animation: orion-skel-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .orion-skel,
    .orion-dash-skel { animation: none; }
}
.orion-skel-line,
.orion-dash-skel-line { height: 10px; margin-bottom: var(--space-2); }
.orion-skel-line.is-h-lg,
.orion-dash-skel-line.is-h-lg { height: 22px; }
.orion-skel-line.is-w-40,
.orion-dash-skel-line.is-w-40 { width: 40%; }
.orion-skel-line.is-w-50,
.orion-dash-skel-line.is-w-50 { width: 50%; }
.orion-skel-line.is-w-60,
.orion-dash-skel-line.is-w-60 { width: 60%; }
.orion-skel-line.is-w-100,
.orion-dash-skel-line.is-w-100 { width: 100%; }
.orion-dash-skel-kpi { display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; }

/* TableSkeleton: en celdas, el span debe ocupar su ancho sin tirar de margin
   inferior (el row ya tiene altura propia). */
.orion-table-skeleton td .orion-skel-line,
.orion-table-skeleton th .orion-skel-line { margin-bottom: 0; display: inline-block; }

/* Utilidad screen-reader-only: el elemento queda accesible para lectores de
   pantalla pero invisible visualmente. Patrón estándar WAI-ARIA. */
.orion-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    /* clip-path es el reemplazo moderno de la propiedad clip (deprecada en
       CSS Masking Level 1). inset(50%) achica al elemento a 0×0 sin afectar
       a screen readers. Sin -webkit- prefix — caniuse confirma soporte
       universal en navegadores modernos (>2020). */
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* — Sección secundaria: cuentas bancarias + composición AR — */
.orion-dash-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 1100px) {
    .orion-dash-secondary { grid-template-columns: 1fr; }
}
.orion-dash-bank-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
}
.orion-dash-bank-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.orion-dash-bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}
.orion-dash-bank-row:last-child { border-bottom: none; }
.orion-dash-bank-name {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}
.orion-dash-bank-code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--surface-hover);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.orion-dash-bank-meta {
    color: var(--text-muted);
    font-size: 11px;
}
.orion-dash-bank-balance {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-medium);
    color: var(--text);
    white-space: nowrap;
    flex-shrink: 0;
}
.orion-dash-bank-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}
.orion-dash-bank-foot strong {
    font-weight: var(--font-weight-medium);
    color: var(--text);
}

/* — Stacked bar — */
.orion-dash-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.orion-dash-stack-bar {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--surface-hover);
}
.orion-dash-stack-seg {
    display: block;
    height: 100%;
}
.orion-dash-stack-seg:not(:first-child) { border-left: 1px solid var(--surface); }
.orion-dash-stack-legend {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
}
.orion-dash-stack-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.orion-dash-stack-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* — Donut chart — */
.orion-dash-donut {
    position: relative;
    flex-shrink: 0;
}
.orion-dash-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.orion-dash-donut-label {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    line-height: 1;
}
.orion-dash-donut-sub {
    margin: 2px 0 0 0;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* — Aging layout (donut + leyenda) — */
.orion-dash-aging-layout {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-4);
    align-items: center;
}
@media (max-width: 540px) {
    .orion-dash-aging-layout { grid-template-columns: 1fr; justify-items: center; gap: var(--space-3); }
}
.orion-dash-aging-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
}
.orion-dash-aging-legend li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.orion-dash-aging-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bullet, var(--text-muted));
    flex-shrink: 0;
}
.orion-dash-aging-legend li[data-bucket="current"] .dot   { --bullet: var(--money-positive); }
.orion-dash-aging-legend li[data-bucket="bucket1"] .dot   { --bullet: #4f8df7; }
.orion-dash-aging-legend li[data-bucket="bucket2"] .dot   { --bullet: var(--status-warning); }
.orion-dash-aging-legend li[data-bucket="overdue"] .dot   { --bullet: var(--status-danger); }
.orion-dash-aging-legend li[data-bucket="overdue"] .lbl   { color: var(--status-danger); font-weight: var(--font-weight-medium); }
.orion-dash-aging-legend .lbl {
    color: var(--text);
    flex: 1;
    min-width: 0;
}
.orion-dash-aging-legend .val {
    font-variant-numeric: tabular-nums;
    color: var(--text);
    white-space: nowrap;
    text-align: right;
}
.orion-dash-aging-legend .pct {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 4px;
}

/* ============================================================
   INBOX (CAP.1) — bandeja de captura multi-canal
   ============================================================ */
.orion-inbox-root {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-4);
}
@media (max-width: 900px) {
    .orion-inbox-root { grid-template-columns: 1fr; }
}

.orion-inbox-drop {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-canvas);
    padding: var(--space-5);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    align-self: start;
}
.orion-inbox-drop.is-dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.orion-inbox-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
}
.orion-inbox-drop-inner .orion-icon { color: var(--text-muted); margin-bottom: var(--space-1); }
.orion-inbox-drop-title { margin: 0; font-size: 14px; font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.orion-inbox-drop-sub { margin: 0; font-size: 12px; color: var(--text-muted); }
.orion-inbox-drop-pick {
    margin-top: var(--space-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.orion-inbox-uploads {
    list-style: none;
    margin: var(--space-3) 0 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.orion-inbox-upload {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 11px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border);
}
.orion-inbox-upload.is-uploading { color: var(--text-muted); }
.orion-inbox-upload.is-ok { color: var(--money-positive); border-color: color-mix(in srgb, var(--money-positive) 30%, var(--border)); }
.orion-inbox-upload.is-duplicate { color: var(--status-warning); border-color: color-mix(in srgb, var(--status-warning) 30%, var(--border)); }
.orion-inbox-upload.is-error { color: var(--status-danger); border-color: color-mix(in srgb, var(--status-danger) 30%, var(--border)); }

.orion-inbox-list {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 0;
}
.orion-inbox-list .orion-table { margin: 0; }
.orion-inbox-file-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}
.orion-inbox-file-link:hover { text-decoration: underline; }
.orion-inbox-file-meta { color: var(--text-muted); font-size: 11px; margin-left: 6px; }
.orion-inbox-actions { white-space: nowrap; text-align: right; }
.orion-btn-sm { padding: 4px 8px; font-size: 12px; }

.orion-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
    gap: var(--space-2);
}
.orion-empty-state .orion-icon { color: var(--text-muted); margin-bottom: var(--space-1); }
/* opacity 0.6 sobre --text-muted (#71717a en light) dejaba el icono en ~2.5:1
   sobre fondo blanco — falla AA aún siendo decorativo. Quitando la opacity,
   --text-muted ya está al 4.6:1 (mínimo AA para texto) y se ve igual de sobrio. */
.orion-empty-state p { margin: 0; }
.orion-empty-state-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text);
}
.orion-empty-state-sub { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; max-width: 420px; }
.orion-empty-state-cta { margin-top: var(--space-3); }
.orion-empty-sub { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; }

/* — Ficha de revisión de un lote (DEP-4.1). Regla del dueño extendida a
     Compras → Captura → Lotes: sin scroll de página para poder ver las
     notas del veredicto de cada comprobante sin desplazarse — mismo
     mecanismo body:has() que .orion-condo-import. grid-template-rows usa
     minmax(0,1fr), NO 1fr a secas: 1fr a secas computa a minmax(auto,1fr)
     y no clampa la fila al alto del contenedor (trampa medida en la
     maqueta estática, ver memoria del proyecto). — */
body:has(.orion-lot-review) .orion-main { height: 100vh; }
body:has(.orion-lot-review) .orion-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: var(--space-3) var(--space-8);
}
.orion-lot-review { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.orion-lot-review-split {
    flex: 1;
    min-height: 0;
    display: grid;
    /* 1.8/1 y no 1.6/1 (DEP-6a): medido a 1366×658, con 1.6 la columna de la
       grilla daba 624 px de tabla y el NCF de un e-CF (13 caracteres, 110 px)
       quedaba a 5 px de recortarse — margen que cualquier diferencia de
       métricas tipográficas se come. 1.8 sube la tabla a ~652 px y deja ~11 px
       de holgura tanto al NCF como al número del borrador, que son los dos
       datos que IDENTIFICAN el comprobante y no pueden depender de un title.
       El panel de detalle pasa de 399 a 371 px: sigue mostrando la imagen y la
       ficha, y ahora además su pie fijo. */
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-3);
}
/* La grilla (lista de comprobantes) sí puede necesitar scroll interno — es
   una lista larga, es lo esperado. El panel de detalle NO: la regla del
   dueño es que la imagen, las notas y los datos de UN comprobante quepan
   juntos sin desplazarse — por eso .orion-section adentro es columna flex
   y la imagen (único elemento de tamaño variable) es la que cede espacio,
   nunca el resto. overflow-y:auto queda como red de seguridad para el caso
   extremo (muchas alertas a la vez) — no como el camino esperado. */
.orion-lot-review-grid { min-height: 0; overflow-y: auto; }
/* DEP-6a: el detalle deja de desplazarse ENTERO. Se parte en cuerpo
   desplazable y pie fijo (.orion-lot-detail-body / -foot), porque si el panel
   entero es el que se desplaza, el pie se va con él y la acción principal
   vuelve a quedar fuera de pantalla — que es justo el defecto que esto
   corrige. */
.orion-lot-review-detail { min-height: 0; overflow: hidden; }
.orion-lot-review-detail .orion-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
}
/* Antes el scroll era de página, siempre alcanzable con teclado. Ahora vive
   en estos dos divs — tabindex="0" + role="region" en el markup, anillo de
   foco aquí (mismo mecanismo que .orion-table-scroll:focus-visible). */
.orion-lot-review-grid:focus-visible,
.orion-lot-detail-body:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
/* Las notas del veredicto van ANTES que la imagen en el markup — es lo
   primero que el contador necesita leer. flex:1 + min-height acotado: la
   imagen absorbe el espacio que sobra después de notas/campos/sugerencias/
   DGII, nunca al revés — así el panel entero cabe sin scroll interno en el
   caso común. Es un <button> (no un <div> con @onclick en la imagen): el
   zoom es la única forma de leer el comprobante una vez encogido a su piso
   de 96px, así que tiene que abrirse por teclado — reset de estilos nativos
   de <button> en las primeras cuatro líneas. */
.orion-lot-review-image-wrap {
    flex: 1;
    min-height: 96px;
    position: relative;
    overflow: hidden;
    padding: 0;
    border: var(--border-width) solid var(--border);
    background: var(--surface-alt);
    font: inherit;
    color: inherit;
    cursor: zoom-in;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.orion-lot-review-image-wrap:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
/* position:absolute + inset (no max-width/max-height:100% en flujo normal):
   ese porcentaje se resuelve contra el alto que el propio wrap recibe vía
   flex-grow (no una `height` explícita), y WebKit tiene bugs conocidos
   resolviendo max-height:% contra un ancestro flexado — silencioso porque
   overflow:hidden del wrap solo recorta la imagen centrada, no rompe nada
   visible. inset:0 fija el containing block al padding-box del wrap, que
   SIEMPRE es definido después del layout, sin ambigüedad de porcentajes. */
.orion-lot-review-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Overlay de zoom — mismo z-index de capa "modal" que el resto del sistema
   (500 = topbar/sidebar, 1000+ = modales, ver comentario de .orion-sidebar
   más arriba en este archivo). Backdrop + diálogo separados, mismo patrón
   que VoidReasonModal: @onmousedown (no @onclick) en el backdrop evita el
   cierre accidental al soltar el mouse fuera; el diálogo es focuseable
   (tabindex=-1 + FocusAsync en OnAfterRenderAsync) para que Escape y el
   foco atrapado tengan un destino real. overscroll-behavior:contain evita
   que la rueda del mouse sobre el overlay desplace el panel de abajo. */
.orion-lot-review-zoom {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: color-mix(in srgb, black 75%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    overscroll-behavior: contain;
}
.orion-lot-review-zoom-dialog {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    outline: none;
}
.orion-lot-review-zoom-dialog img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 2 * var(--space-6));
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.orion-lot-review-zoom-close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.orion-lot-review-zoom-close:hover { background: rgba(0, 0, 0, 0.75); }
.orion-lot-review-zoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.orion-lot-review-zoom-link {
    position: absolute;
    bottom: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}
.orion-lot-review-zoom-link:hover { background: rgba(0, 0, 0, 0.75); }
.orion-lot-review-zoom-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* — Aprobación del lote (DEP-6a): crear los borradores desde la misma ficha.
     Presupuesto vertical a 1366×768 (contenido útil ≈ 687 px): cabecera ~69,
     chips ~26, esta barra 44, y el split se queda con el resto vía
     minmax(0,1fr). Todo lo nuevo vive DENTRO de esas franjas — no se añade
     ninguna que empuje la grilla hacia abajo, y por eso el progreso REEMPLAZA
     al contenido de la barra en vez de aparecer debajo. — */
.orion-lot-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 44px;
    box-sizing: border-box;
    margin-top: var(--space-1);
    padding: 0 var(--space-3);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
}
/* Cada ajuste es etiqueta + control en la MISMA línea: apilarlos duplicaría el
   alto de la franja. min-width:0 para que el campo ceda antes de desbordar. */
.orion-lot-bar-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.orion-lot-bar-field-narrow { flex: 0 1 240px; }
.orion-lot-bar-label {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}
.orion-lot-bar-field .orion-lookup { flex: 1 1 auto; min-width: 0; }
/* Controles de 30 px para caber en la franja de 44: el padding por defecto de
   los inputs del sistema (8/12) da 39 px y rompería el presupuesto. */
.orion-lot-bar-field .orion-lookup input,
.orion-lot-bar select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
}
.orion-lot-bar-action { flex: 0 0 auto; padding: var(--space-1) var(--space-3); white-space: nowrap; }
.orion-lot-bar-track { flex: 1 1 auto; min-width: 0; }

/* — Grilla de aprobación: SIETE columnas de dos líneas en ~652 px.
     table-layout:fixed + anchos en % garantiza cero scroll horizontal pase lo
     que pase con el contenido. El padding del sistema (12/16) se comería un
     tercio del ancho, así que aquí se aprieta.

     Por qué dos líneas y no diez columnas: medido, diez columnas dejaban el
     NCF de un e-CF recortado (81 px de celda para 110 px de texto) y la fecha
     partida en dos renglones, con filas de 45 px y solo 7 visibles. Apilando
     los datos que se leen juntos, cada columna tiene holgura y la fila mide
     siempre lo mismo. Bajar la letra NO era opción: 12 px es el último escalón
     de la escala y no se inventa uno nuevo. — */
.orion-lot-grid { table-layout: fixed; }
.orion-lot-grid thead th,
.orion-lot-grid tbody td {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
}
/* Alto de fila FIJO (39 px = 2 líneas de 15.6 + 4+4 de padding). Sin él, una
   celda con pastilla mide más que una de texto plano y el ojo pierde el
   renglón al recorrer cuarenta comprobantes; además hace predecible cuántas
   filas caben: 8 a 658 px de alto de ventana y 11 a 768. */
.orion-lot-grid tbody td { height: 39px; }
/* La cabecera es pegajosa y repite el par de etiquetas de cada celda; con la
   caja apretada ocupa 36 px y devuelve ese espacio a las filas, que es lo que
   de verdad se lee. */
.orion-lot-grid thead th .orion-lot-cell-line,
.orion-lot-grid thead th .orion-lot-cell-sub { line-height: 14px; }
.orion-lot-cell-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-lot-cell-click { cursor: pointer; }
/* Las dos líneas de una celda apilada. `nowrap` en AMBAS — sin él la fecha se
   partía en dos renglones y TODAS las filas crecían a 45 px. La segunda línea
   se distingue por COLOR y no por tamaño: no hay token por debajo de
   --font-size-xs y meter un 11px literal abriría otra escala tipográfica
   fuera del sistema. */
.orion-lot-cell-line,
.orion-lot-cell-sub {
    display: block;
    line-height: var(--line-height-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-lot-cell-sub { color: var(--text-muted); }
/* Pastillas y chips dentro de la grilla: caja de 15 px (13 + 1 de borde a cada
   lado) para que ocupen exactamente UNA de las dos líneas y no estiren la fila. */
.orion-lot-grid .orion-chip,
.orion-lot-grid .orion-pill {
    display: inline-block;
    font-size: var(--font-size-xs);
    line-height: 13px;
    padding: 0 var(--space-2);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}
.orion-lot-grid .orion-chip { cursor: default; }
/* El enlace al borrador vive en la segunda línea: hereda su tamaño y su caja. */
.orion-lot-cell-sub a { color: var(--accent); }

/* — La grilla y su pie viven en la misma columna del split: el pie queda fijo
     DENTRO del contenedor (no de la página) y solo la tabla se desplaza. — */
.orion-lot-review-gridwrap {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.orion-lot-review-gridwrap .orion-lot-review-grid { flex: 1; }
/* Mientras se crean los borradores la grilla se atenúa y sus casillas van
   deshabilitadas (el atributo, no solo el color): marcar una fila a mitad de
   la corrida daría a entender que entra en ella, y no entra. */
.orion-lot-review-gridwrap.is-busy { opacity: 0.55; }
/* El pie de totales va apretado (25 px): cada píxel que se lleva es medio
   renglón menos de comprobantes, y lo que se viene a leer son los comprobantes. */
.orion-lot-review-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-3);
    line-height: var(--line-height-tight);
    border-top: var(--border-width) solid var(--border);
    background: var(--surface-alt);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.orion-lot-review-foot strong { color: var(--text); }

/* — El panel de detalle, con el mismo reparto: cuerpo desplazable y pie fijo.
     La acción principal del comprobante seleccionado («Crear borrador de este
     comprobante») y, en los ya aprobados, el enlace a su borrador, viven en el
     pie: son lo que la persona viene a hacer después de mirar la imagen, y
     antes quedaban debajo de 455 px de desplazamiento interno.

     Dentro del cuerpo se conserva el criterio de DEP-4: es columna flex y la
     IMAGEN (.orion-lot-review-image-wrap, flex:1) es lo único elástico, así
     que es ella la que cede espacio a las notas y a los datos, nunca al revés. — */
.orion-lot-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.orion-lot-detail-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
    border-top: var(--border-width) solid var(--border);
}
.orion-lot-detail-foot:empty { display: none; }

/* — Panel de resultado: ocupa el hueco del split, con su propia tabla
     desplazable para que las fichas de conteo y los botones no se vayan
     fuera de la pantalla. — */
.orion-lot-result {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.orion-lot-result-stats { margin-bottom: 0; }
.orion-lot-result-stats .orion-stat-card { padding: var(--space-2) var(--space-3); }
.orion-lot-result .orion-alert { margin: 0; }
.orion-lot-result-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
}
.orion-lot-result-grid:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.orion-lot-result-table { table-layout: fixed; }
.orion-lot-result-table th:nth-child(1), .orion-lot-result-table td:nth-child(1) { width: 8%; }
.orion-lot-result-table th:nth-child(2), .orion-lot-result-table td:nth-child(2) { width: 18%; }
.orion-lot-result-table th:nth-child(3), .orion-lot-result-table td:nth-child(3) { width: 20%; }
.orion-lot-result-actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* — Confirmación: el cuerpo se desplaza por dentro (un lote de cuarenta
     páginas no puede empujar los botones fuera de la pantalla). El modal deja
     de desplazarse él mismo para que la cabecera y las acciones queden
     siempre a la vista. — */
.orion-lot-confirm {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.orion-lot-confirm-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(320px, 46vh);
    overflow-y: auto;
}
.orion-lot-confirm-list {
    margin: 0 0 var(--space-2);
    padding-left: 18px;
    font-size: var(--font-size-sm);
}
.orion-lot-confirm-list li { margin-bottom: var(--space-1); }

/* ========= UX.7 — Hub de Configuración ========= */

/* Buscador inline en la cabecera del hub. */
.orion-config-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.orion-config-search:focus-within {
    border-color: var(--border-strong);
    box-shadow: var(--focus-ring);
}
.orion-config-search .orion-icon { color: var(--text-muted); flex-shrink: 0; }
.orion-config-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--font-size-sm);
    color: var(--text);
    padding: 2px 0;
}
.orion-config-search input::placeholder { color: var(--text-muted); }

/* Sección por categoría. */
.orion-config-section { margin-bottom: var(--space-8); }
.orion-config-section-title {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--text);
}
.orion-config-section-sub {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Grid de cards: 1col mobile, 2col tablet, 3col desktop. */
.orion-config-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 640px) {
    .orion-config-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .orion-config-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Card individual: link estilizado con icono + título + descripción. */
.orion-config-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.orion-config-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.orion-config-card:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}
.orion-config-card-disabled {
    pointer-events: none;
    opacity: 0.55;
    cursor: not-allowed;
}

.orion-config-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--text);
    flex-shrink: 0;
}

.orion-config-card-body { flex: 1; min-width: 0; }
.orion-config-card-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.orion-config-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}
.orion-config-card-desc {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Tags por tipo. Paleta sobria — el card es el protagonista, el tag solo
   añade contexto. */
.orion-config-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
}
.orion-config-card-tag-new      { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.orion-config-card-tag-beta     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.orion-config-card-tag-premium  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.orion-config-card-tag-soon     { background: var(--surface-alt); color: var(--text-muted); }
.orion-config-card-tag-neutral  { background: var(--surface-alt); color: var(--text-muted); }

/* ========= UX — Modo Contingencia DGII ========= */

/* Banner global de trial (Sprint A10). Severidad: info > warn > danger.
   Aparece encima del banner de contingencia. */
.orion-trial-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid;
    font-size: var(--font-size-sm);
}
/* Colores oscurecidos (tailwind-700/800) sobre fondo translúcido para
   contraste WCAG AA. El blue-700, amber-800 y rose-700 cumplen >=4.5:1
   contra background-tint del mismo hue. */
.orion-trial-banner.orion-trial-info { background: rgba(37, 99, 235, 0.08); color: #1d4ed8; border-bottom-color: rgba(37, 99, 235, 0.25); }
.orion-trial-banner.orion-trial-warn { background: rgba(217, 119, 6, 0.1); color: #92400e; border-bottom-color: rgba(217, 119, 6, 0.4); }
.orion-trial-banner.orion-trial-danger { background: rgba(225, 29, 72, 0.1); color: #be123c; border-bottom-color: rgba(225, 29, 72, 0.5); font-weight: 500; }
.orion-trial-banner .orion-trial-text { flex: 1; }
.orion-trial-banner .orion-trial-action {
    flex-shrink: 0;
    padding: 4px 12px;
    border: 1px solid currentColor;
    color: currentColor;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: 12px;
}
.orion-trial-banner .orion-trial-action:hover { background: rgba(0,0,0,0.05); }
.orion-trial-banner .orion-trial-dismiss {
    flex-shrink: 0;
    border: 0; background: transparent; color: currentColor; cursor: pointer;
    font-size: 18px; line-height: 1; padding: 0 6px; opacity: 0.7;
}
.orion-trial-banner .orion-trial-dismiss:hover { opacity: 1; }

/* Banner global: aparece debajo del topbar cuando el tenant está en Contingency.
   Usa los tokens de status-warning (compartidos con otros estados de alerta). */
.orion-contingency-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--status-warning-bg);
    color: var(--status-warning);
    border-bottom: 1px solid var(--status-warning);
    font-size: var(--font-size-sm);
}
.orion-contingency-banner-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--status-warning);
}
.orion-contingency-banner-text { flex: 1; }
.orion-contingency-banner-meta {
    color: var(--status-warning);
    opacity: 0.85;
}
.orion-contingency-banner-action {
    flex-shrink: 0;
    padding: 4px 12px;
    background: var(--status-warning);
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: 12px;
}
.orion-contingency-banner-action:hover { opacity: 0.9; }

/* Card "ACTIVO" en la página /configuracion/contingencia-dgii.
   Más prominente que el banner — el usuario está acá específicamente para ver detalle. */
.orion-contingency-active {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.orion-contingency-active-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--status-warning);
    color: #fff;
    flex-shrink: 0;
}
.orion-contingency-active-title {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--status-warning);
}
.orion-contingency-active-meta {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--text);
}

/* Botón warning explícito (CTA "Activar contingencia") — color de alerta */
.orion-btn-warning {
    background: var(--status-warning);
    color: #fff;
    border: 1px solid var(--status-warning);
}
.orion-btn-warning:hover:not(:disabled) { opacity: 0.9; }
.orion-btn-warning:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variante de form-grid más estrecha (1 col, max 540px) para forms con un solo campo
   prominente — evita que el textarea se estire al ancho completo de la página. */
.orion-form-grid-narrow { max-width: 540px; }

/* Marca visual de campo obligatorio (*) que ya se usa en otros forms */
.orion-required { color: var(--status-danger); margin-left: 2px; }

/* ========= UX — Anexos DGII (606/607/608/609) ========= */

.orion-anexos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 640px) {
    .orion-anexos-grid { grid-template-columns: repeat(2, 1fr); }
}

.orion-anexos-btn {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    color: inherit;
    font: inherit;
}
.orion-anexos-btn:hover:not(:disabled) {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.orion-anexos-btn:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}
.orion-anexos-btn:disabled { opacity: 0.55; cursor: progress; }

/* N.1.1 — Botón principal (TXT) + secundario (Excel oficial DGII). */
.orion-anexos-btn-group {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.orion-anexos-btn-group .orion-anexos-btn { flex: 1; }
.orion-anexos-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background-color 100ms ease;
}
.orion-anexos-btn-secondary:hover { background: var(--surface-alt); }
.orion-anexos-btn-secondary:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* N.1.x redesign 2026-05-15 — list de disponibilidad por formato. */
.orion-anexos-availability {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}
.orion-anexos-availability-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.orion-anexos-availability-row.orion-anexos-has-data {
    border-left: 3px solid var(--status-success-strong, #16a34a);
}
/* Estado "vacío" — atenuamos color de fondo y texto secundario, NO opacity
   (opacity reduce contraste WCAG aún sobre texto importante). Los pills usan
   su propia paleta semantic (orion-pill-draft = gris). */
.orion-anexos-availability-row.orion-anexos-empty {
    background: var(--surface-alt);
}
.orion-anexos-availability-row.orion-anexos-empty strong,
.orion-anexos-availability-row.orion-anexos-empty .orion-page-sub {
    color: var(--text-muted, var(--text-secondary));
}
.orion-anexos-availability-row strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05rem;
}
.orion-anexos-btn > .orion-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--surface-alt);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}
.orion-anexos-btn-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.orion-anexos-btn-text strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}
.orion-anexos-btn-text span {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.orion-anexos-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-alt);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.orion-anexos-summary-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.orion-anexos-summary-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.orion-anexos-warnings {
    margin: var(--space-2) 0 0 0;
    padding-left: var(--space-4);
    font-size: var(--font-size-sm);
}
.orion-anexos-warnings li { margin-bottom: 4px; }

/* ========= UX — e-CF emitidos (listado + detalle) ========= */

/* Strip de stats arriba de la tabla: "5 resultados · 2 pendientes · 3 aceptados" */
.orion-summary-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Page header con back-link integrado */
.orion-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-base);
    color: var(--text-muted);
    text-decoration: none;
}
.orion-back-link:hover { color: var(--text); text-decoration: underline; }

/* Card de status del e-CF en detalle: pill grande + meta horizontal */
.orion-ecf-status-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-alt);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}
.orion-ecf-status-pill .orion-pill { font-size: var(--font-size-sm); padding: 4px 10px; }
.orion-ecf-status-meta {
    display: flex;
    gap: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Definition list para datos del comprobante / audit trail */
.orion-dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}
.orion-dl dt {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}
.orion-dl dd {
    margin: 0;
    color: var(--text);
    font-size: var(--font-size-sm);
}
@media (max-width: 640px) {
    .orion-dl { grid-template-columns: 1fr; gap: 2px; }
    .orion-dl dt { margin-top: var(--space-2); }
}

/* Bloques expandibles para XML/JSON crudos */
.orion-collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.orion-collapsible > summary {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    user-select: none;
}
.orion-collapsible > summary:hover { color: var(--text); }
.orion-collapsible[open] > summary { border-bottom: 1px solid var(--border); }
.orion-code-block {
    margin: 0;
    padding: var(--space-3);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    max-height: 400px;
    overflow-y: auto;
}

/* ========= UX — RncLookupInput ========= */

/* Input con badge de estado debajo (resolviendo / no encontrado / encontrado) */
.orion-rnc-input { display: flex; flex-direction: column; gap: 4px; }
.orion-rnc-input input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.orion-rnc-input input:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: var(--focus-ring);
}

.orion-rnc-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.4;
}
.orion-rnc-status-resolving { color: var(--text-muted); }
.orion-rnc-status-invalid   { color: var(--status-danger); }
.orion-rnc-status-notfound  { color: var(--status-warning); }
.orion-rnc-status-resolved  { color: var(--status-success); }

.orion-rnc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.orion-rnc-badge-warn {
    background: var(--status-warning-bg);
    color: var(--status-warning);
}

/* ========= UX — Modal genérico ========= */

/* Backdrop semi-transparente. Click cierra (cuando no está bloqueado). */
.orion-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
}

/* Modal centrado vertical+horizontal, max-width responsive. */
.orion-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    max-width: 540px;
    width: calc(100vw - var(--space-8));
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-5);
    background: var(--bg-elevated, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.orion-modal h2 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-semibold);
}
.orion-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
/* F4.2 — modal ancho para PDF preview (iframe necesita espacio). */
.orion-modal-wide {
    max-width: min(900px, calc(100vw - var(--space-8)));
}
/* Modal mediano-ancho para listados con tabla + formulario (gestión de
   empresas↔usuarios). 540px queda corto para una tabla de varias columnas. */
.orion-modal-lg {
    max-width: min(680px, calc(100vw - var(--space-8)));
}
/* El contenido de un modal nunca debe forzar scroll horizontal. Un <select>
   con opciones largas (la lista de ~120 empresas) crece hasta su opción más
   ancha y revienta el grid del formulario: min-width:0 deja que el track 1fr
   lo contenga y max-width:100% hace que el control trunque en lugar de crecer. */
.orion-modal .orion-form-field { min-width: 0; }
.orion-modal select,
.orion-modal input[type="search"],
.orion-modal input[type="text"] { max-width: 100%; box-sizing: border-box; }
.orion-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

/* ========= UX — DgiiTooltip (entregable 10 Fase I-DGII) ========= */

/* Wrapper inline. Mostramos popover en :hover o :focus-within para que sea
   accesible por teclado. El span tiene tabindex=0 para recibir focus. */
.orion-dgii-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--text-muted);
    cursor: help;
    border-radius: 999px;
    transition: color 120ms ease;
}
.orion-dgii-tooltip:hover,
.orion-dgii-tooltip:focus-within {
    color: var(--text);
    outline: none;
}
.orion-dgii-tooltip:focus-visible {
    box-shadow: var(--focus-ring);
}

/* Popover oculto por default. Aparece arriba del icono al hover/focus. */
.orion-dgii-tooltip-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 320px;
    max-width: 90vw;
    padding: var(--space-3);
    background: var(--bg-elevated, var(--surface));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    /* CSS Grid para apilar título + descripción + ref con gaps consistentes */
    display: grid;
    gap: 6px;
}
.orion-dgii-tooltip:hover > .orion-dgii-tooltip-popover,
.orion-dgii-tooltip:focus-within > .orion-dgii-tooltip-popover {
    opacity: 1;
    pointer-events: auto;
}

.orion-dgii-tooltip-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}
.orion-dgii-tooltip-desc { color: var(--text); }
.orion-dgii-tooltip-ref {
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 6px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* En mobile el popover ocupa más ancho relativo y se reposiciona si choca con bordes. */
@media (max-width: 640px) {
    .orion-dgii-tooltip-popover { width: 280px; }
}

/* === Concierge wizard de habilitación e-CF (entregable 9 Fase I-DGII) ===
   Stack vertical de step cards con barra de progreso superior. Reusa
   `--accent`/`--border`/`--surface` del sistema de tokens para que el dark
   mode quede consistente sin override extra. */

.orion-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.orion-progress-bar {
    margin-top: 12px;
    width: 100%;
    height: 8px;
    background: var(--surface-hover, #f3f5f9);
    border-radius: 999px;
    overflow: hidden;
}
.orion-progress-bar-fill {
    height: 100%;
    background: var(--accent);
    transition: width 200ms ease;
}

.orion-step-card { padding: 16px 20px; }
.orion-step-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.orion-step-card-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--font-weight-semibold);
}
.orion-step-card-title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.orion-step-card-title h3 {
    margin: 0;
    font-size: var(--font-size-base, 16px);
}
.orion-step-card-help { margin-top: 4px; }
.orion-step-card-note {
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--accent-soft);
    color: var(--text-muted);
    background: var(--surface-2, transparent);
    border-radius: 0 4px 4px 0;
}
.orion-step-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Pill "Pendiente" — neutro, distinto de draft (que es ámbar/warning) y de
   posted (verde). Pendiente usa los tokens muted del tema. */
.orion-pill-pending {
    background: var(--surface-hover, #f3f5f9);
    color: var(--text-muted);
}
/* Alias semántico: en este wizard "Saltado / no aplica" usa el mismo styling
   que warning para llamar la atención sin alarmar como danger. */
.orion-pill-warning { background: var(--status-warning-bg); color: var(--status-warning-strong); }

.orion-btn-link-muted { color: var(--text-muted); }

/* ==================================================================
 * Multi-select con checkboxes + search (UserGroupsPage)
 * ================================================================== */
.orion-multiselect-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.25rem;
    background: var(--surface, #ffffff);
}
.orion-multiselect-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1.3;
}
.orion-multiselect-item:hover {
    background: var(--surface-hover, #f3f5f9);
}
.orion-multiselect-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.orion-multiselect-item code {
    background: var(--surface-hover, #f3f5f9);
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.85em;
}

/* ==================================================================
 * Autocomplete dropdown (TenantNew RNC/nombre)
 * ================================================================== */
.orion-autocomplete {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.orion-autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--surface, #ffffff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.orion-autocomplete-list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
}
.orion-autocomplete-list li:last-child { border-bottom: none; }
.orion-autocomplete-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: inherit;
}
.orion-autocomplete-item:hover,
.orion-autocomplete-item:focus {
    background: var(--surface-hover, #f3f5f9);
    outline: none;
}
.orion-autocomplete-item small {
    color: var(--text-muted);
    font-size: 0.85em;
}
.orion-form-hint-success { color: var(--status-success, #16a34a); }
.orion-form-hint-warning { color: var(--status-warning, #d97706); }
.orion-form-readonly {
    padding: 0.5rem 0.75rem;
    background: var(--surface-hover, #f3f5f9);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* — Utilidad screen-reader-only: el elemento queda accesible para lectores
   de pantalla pero invisible visualmente. Patrón estándar WAI-ARIA. — */
.orion-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    /* clip-path es el reemplazo moderno de la propiedad clip (deprecada
       en CSS Masking Level 1). Mismo efecto: achicar a 0×0 sin afectar
       lectores de pantalla. */
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* — Toasts / notificaciones transitorias (UX.4 entregable 4). Pila fija en
   la esquina superior derecha. Cada toast se desliza desde arriba al entrar.
   Coexisten con los <div class="orion-alert"> inline (que siguen usándose
   para errores de validación persistentes en la página). — */
.orion-toast-stack {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 360px;
    pointer-events: none;
}
.orion-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
    border: var(--border-width) solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-size: 14px;
    color: var(--text-primary);
    animation: orion-toast-in 0.18s ease-out;
}
.orion-toast-success { border-left-color: var(--money-positive, #0a8045); }
.orion-toast-error   { border-left-color: var(--status-danger, #c0392b); }
.orion-toast-warning { border-left-color: var(--status-warning, #d97706); }
.orion-toast-info    { border-left-color: var(--accent, #4f8df7); }
.orion-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--text-secondary);
}
.orion-toast-success .orion-toast-icon { color: var(--money-positive, #0a8045); }
.orion-toast-error   .orion-toast-icon { color: var(--status-danger, #c0392b); }
.orion-toast-warning .orion-toast-icon { color: var(--status-warning, #d97706); }
.orion-toast-info    .orion-toast-icon { color: var(--accent, #4f8df7); }
.orion-toast-msg {
    line-height: 1.4;
    /* overflow-wrap: anywhere es el patrón CSS Text Module Level 3 para
       permitir quiebres dentro de palabras largas (URLs, IDs) sin las
       quirks de word-break: break-word (deprecated). */
    word-break: normal;
    overflow-wrap: anywhere;
}
.orion-toast-close {
    background: transparent;
    border: 0;
    padding: 2px;
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.orion-toast-close:hover { color: var(--text-primary); background: var(--surface-hover, #f3f5f9); }
.orion-toast-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@keyframes orion-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .orion-toast { animation: none; }
}

/* ========= C.9 — Drawer lateral derecho (CustomerQuickCreatePanel) ========= */

.orion-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
}

/* Panel deslizable desde la derecha. En móviles, ocupa todo el ancho. */
.orion-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    width: min(560px, 100vw);
    background: var(--bg-elevated, var(--surface));
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: orion-drawer-in 180ms ease-out;
}

@keyframes orion-drawer-in {
    from { transform: translateX(20px); opacity: 0.6; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .orion-drawer { animation: none; }
}

.orion-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.orion-drawer-header h2 {
    margin: 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-semibold);
}

.orion-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.orion-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-elevated, var(--surface));
}

.orion-drawer-footer-actions {
    display: flex;
    gap: var(--space-2);
}

/* Secciones colapsables en formularios (drawer + futuros wizards). */
.orion-form-section {
    margin-bottom: var(--space-5);
}

.orion-form-section:last-child {
    margin-bottom: 0;
}

.orion-form-section-title {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Item "+ Crear nuevo" en lookups — visualmente distinto del listado de
   resultados para que el usuario sepa que es una acción, no una entidad. */
.orion-lookup-create {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-subtle, transparent);
    color: var(--accent, var(--text));
    font-weight: var(--font-weight-medium);
    border-top: 1px solid var(--border);
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.orion-lookup-create:hover {
    background: var(--bg-hover, var(--surface));
}

/* Item hint cuando el dropdown abre sin texto. */
.orion-lookup-item-empty {
    padding: var(--space-2) var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-size-sm, 13px);
    font-style: italic;
}

/* ========= C.9 tranche 2 — ProductQuickCreateDialog + inline button ========= */

/* Modal con header + body + footer separados (vs el modal compacto orion-modal
   original que solo tenía orion-modal-actions). orion-modal-md es 640px. */
.orion-modal-md {
    max-width: 640px;
}

.orion-modal-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
    gap: var(--space-3);
}

.orion-modal-header-row h2 {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: var(--font-weight-semibold);
}

.orion-modal-header-row .orion-page-sub {
    margin: 0;
}

.orion-modal-body {
    padding: 0;
    margin-bottom: var(--space-4);
}

.orion-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.orion-modal-footer-actions {
    display: flex;
    gap: var(--space-2);
}

/* Combo lookup + botón + adyacente en una celda (line editor de factura). */
.orion-inline-lookup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Botón icónico chico (32×32) para acciones adyacentes a inputs. */
.orion-icon-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--bg-subtle, var(--surface));
    color: var(--accent, var(--text));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.orion-icon-btn-sm:hover {
    background: var(--bg-hover, var(--surface));
    border-color: var(--accent);
}

/* Segment control (toggle Producto/Servicio en quick-create). */
.orion-segment {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-subtle, var(--surface));
}

.orion-segment-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.orion-segment-btn:last-child {
    border-right: 0;
}

.orion-segment-btn.is-active {
    background: var(--accent, var(--text));
    color: var(--accent-fg, white);
}

.orion-segment-btn:hover:not(.is-active) {
    background: var(--bg-hover, var(--surface));
    color: var(--text);
}

/* .orion-alert-warning: una sola definición (tokens semánticos, ver .orion-alert-*
   más arriba). La variante con hex fijo que vivía aquí pisaba la de tokens y
   rompía el borde en modo claro (N-3, ui-designer). */

/* Section header con icono + título — usado en CustomerQuickCreatePanel
   y futuros forms para agrupar visualmente. */
.orion-form-section-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    color: var(--text-muted);
}

.orion-form-section-head .orion-form-section-title {
    margin: 0;
}

/* Hint inline al lado del label, en tono menor. */
.orion-label-hint {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
    font-size: 0.85em;
}

/* Drawer header con subtítulo de ayuda. */
.orion-drawer-header > div h2 {
    margin: 0 0 var(--space-1) 0;
}

.orion-drawer-header > div .orion-page-sub {
    margin: 0;
    font-size: var(--font-size-sm, 13px);
}

/* Pulse animation para mensajes loading. */
.orion-pulse {
    animation: orion-pulse 1.4s ease-in-out infinite;
}

@keyframes orion-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .orion-pulse { animation: none; }
}

/* ========= C.9 tranche 3 — Summary box (totales con desglose) ========= */

.orion-summary {
    background: var(--bg-subtle, var(--surface));
    border-radius: var(--radius-md);
}

.orion-summary-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-left: auto;
    max-width: 360px;
}

.orion-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--font-size-sm, 14px);
}

.orion-summary-row strong {
    font-variant-numeric: tabular-nums;
}

.orion-summary-discount {
    color: var(--text-muted);
}

.orion-summary-total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-semibold);
}

.orion-summary-total strong {
    color: var(--accent, var(--text));
    font-size: var(--font-size-lg, 18px);
}

/* Variante del lookup para usar dentro de celdas de tabla (line editor de
   factura). Más compacto + ancho fijo + el dropdown puede salirse del
   table cell con position absolute. */
.orion-lookup-inline-cell {
    position: relative;
    width: 16rem;
}

.orion-lookup-inline-cell input[type="search"] {
    width: 100%;
    font-size: var(--font-size-sm, 13px);
}

.orion-lookup-inline-cell .orion-lookup-list {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 360px;
    z-index: 200;
    background: var(--bg-elevated, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    max-height: 320px;
    overflow-y: auto;
    margin-top: 2px;
}

/* Cell con el lookup activo necesita z-index alto para que el dropdown
   pase por encima de las filas siguientes en el grid. */
.orion-line-cell-product {
    position: relative;
    z-index: 1;
}

.orion-line-cell-product:focus-within {
    z-index: 100;
}

/* Hint cuando el usuario dejó texto que no matchea ningún producto.
   Aparece debajo del input con 2 opciones: crear producto o usar como
   línea simple. Inspirado en Alegra "Venta simple". */
.orion-lookup-unmatched {
    margin-top: 4px;
    padding: var(--space-2) var(--space-2);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-xs, 12px);
    line-height: 1.35;
}

.orion-lookup-unmatched-text {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text);
    margin-bottom: 2px;
}

.orion-lookup-unmatched-text strong {
    font-weight: var(--font-weight-semibold);
}

.orion-lookup-unmatched-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.orion-lookup-unmatched-actions .orion-btn-link {
    padding: 0;
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
}

.orion-lookup-unmatched-sep {
    color: var(--text-muted);
    user-select: none;
}

/* F1 — Hint con info del producto seleccionado. Aparece debajo del input
   del ProductLookup cuando hay producto seleccionado (precio + ITBIS + tipo).
   Inspirado en SymaSoft "Consulta Exist/Precio". */
.orion-product-info {
    margin-top: 4px;
    padding: 3px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-xs, 11px);
    color: var(--text-muted);
    line-height: 1.4;
}

.orion-product-info-price {
    color: var(--text);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.orion-product-info-sep {
    color: var(--text-muted);
    opacity: 0.5;
}

/* F4 — Modal CxC del cliente. */
.orion-cxc-summary {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.orion-cxc-stat {
    flex: 1;
    padding: var(--space-3);
    background: var(--bg-subtle, var(--surface));
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.orion-cxc-stat-label {
    display: block;
    font-size: var(--font-size-xs, 11px);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}

.orion-cxc-stat-value {
    font-size: var(--font-size-lg, 20px);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.orion-cxc-aging {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.orion-cxc-aging-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-subtle, var(--surface));
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm, 13px);
}

.orion-cxc-aging-value {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-medium);
}

.orion-cxc-aging-overdue {
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid #dc2626;
    color: #b91c1c;
}

.orion-cxc-aging-overdue .orion-cxc-aging-value {
    font-weight: var(--font-weight-semibold);
}

/* Botón link inline (al lado de un label). */
.orion-btn-link-inline {
    padding: 0;
    margin-left: var(--space-2);
    font-size: var(--font-size-xs, 12px);
    color: var(--accent);
    font-weight: var(--font-weight-normal);
}

/* C.9.s.2 F1.1 — Card info del cliente seleccionado (RNC/Tel/Email/Dir).
   Aparece debajo del CustomerLookup cuando hay cliente activo. */
.orion-customer-info {
    margin-top: 6px;
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-xs, 11px);
    line-height: 1.4;
}

.orion-customer-info-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    white-space: nowrap;
}

.orion-customer-info-address {
    color: var(--text-muted);
    white-space: normal;
    flex-basis: 100%;
}

/* C.9.s tranche C — Sección colapsable estilo accordion para "detalles
   adicionales" de la factura (Form 607, Pagarés, Adjuntos, etc.).
   Usa <details>/<summary> nativos para a11y + sin JS. */
.orion-collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.orion-collapsible-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    user-select: none;
    background: var(--bg-subtle, var(--surface));
    list-style: none;
    transition: background 120ms ease;
}

.orion-collapsible-summary::-webkit-details-marker {
    display: none;
}

/* En una fila de 3 columnas cada summary tiene ~307px útiles: sin esto el
   texto de pista ("607 · forma de pago DGII · …") envuelve a 3 líneas y se
   come los 65px de altura que la fila venía a ahorrar. Se trunca con elipsis
   en una sola línea; el texto completo queda en el `title` del summary, así
   que no se pierde información ni para el mouse ni para el lector de
   pantalla. El label del bloque no se encoge (flex-shrink: 0). */
.orion-section-row-3 .orion-collapsible-summary { flex-wrap: nowrap; }
.orion-section-row-3 .orion-collapsible-summary > .orion-page-sub {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.orion-section-row-3 .orion-collapsible-summary > span:not(.orion-page-sub),
.orion-section-row-3 .orion-collapsible-summary > .orion-icon {
    flex-shrink: 0;
}

.orion-collapsible-summary:hover {
    background: var(--bg-hover, var(--surface));
}

.orion-collapsible-summary::after {
    content: "▸";
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 180ms ease;
}

.orion-collapsible[open] > .orion-collapsible-summary::after {
    transform: rotate(90deg);
}

.orion-collapsible-summary .orion-page-sub {
    color: var(--text-muted);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-normal);
    margin-left: var(--space-2);
}

.orion-collapsible-body {
    padding: var(--space-4) var(--space-4) var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
}

.orion-collapsible-body textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: var(--font-size-sm, 13px);
    padding: var(--space-2) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface);
    color: var(--text);
}

/* ========= C.9 — Line editor friendly (tabla líneas factura) ========= */

/* Tabla CSS-grid en lugar de <table> para mejor control de columnas y
   alineamiento responsive. overflow:visible es CRÍTICO porque el
   <ProductLookup> dropdown sale fuera del row con position:absolute. */
.orion-line-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: visible;
    /* Cuando el contenedor scrollea en horizontal, el ancho de la tabla debe
       ser el de la fila más ancha (no el del viewport recortado): así el
       fondo del encabezado sticky y los bordes de fila acompañan el scroll
       en vez de terminar a mitad de camino. */
    min-width: min-content;
}

.orion-line-row {
    display: grid;
    /* Ancho útil real (medido, no estimado desde el viewport):
       1366 − sidebar 248 − .orion-content 64 − .orion-section-compact 34
       − borde del scroll 2 = 1.018px. Antes de quitar el aside de 320px
       eran 682px y el grid exigía 1.032 → se cortaba ~350px.

       Presupuesto de columnas = 1.018 − padding 24 − gaps 80 = 914px.
       Fijas suman 516 (con la Unidad de medida del e-CF, E-5: +68) → quedan
       398 para producto+descripción (≈212 y ≈186 con 1.6fr/1.4fr).

       Los mínimos se calibran contra el caso peor soportado, 1280 con el
       menú expandido (932 útiles → 312 para las flexibles): 180 + 120 = 300
       deja 12px de holgura. Bajo eso entra el overflow-x de .orion-table-scroll.

       Producto y descripción llevan `fr`, así que reflujan solas al plegar o
       desplegar el menú — el grid de .orion-shell ya transiciona, sin JS. */
    grid-template-columns:
        24px                 /* drag handle */
        28px                 /* # */
        minmax(180px, 1.6fr) /* producto + warehouse — cede */
        minmax(120px, 1.4fr) /* descripción — cede */
        64px                 /* cantidad */
        68px                 /* unidad de medida e-CF (abreviatura de la Tabla IV) */
        88px                 /* precio */
        52px                 /* dcto% */
        52px                 /* itbis% */
        104px                /* total — 7 dígitos ("1,234,567.89" ≈ 88px) */
        36px;                /* trash — no bajar: touch target */
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    transition: background 120ms ease;
    position: relative;
}

.orion-line-row:last-child {
    border-bottom: 0;
}

/* Border-radius en primera fila (header) y última (data) para preservar
   el rounded look del container con overflow:visible. */
.orion-line-row:first-child {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.orion-line-row:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.orion-line-row:hover:not(.orion-line-row-head) {
    background: var(--bg-hover, var(--surface));
}

.orion-line-row-head {
    background: var(--bg-subtle, var(--surface));
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* DEBE coincidir con el padding de .orion-line-row: encabezado y filas
       comparten el mismo grid y cualquier diferencia desalinea las columnas. */
    padding: var(--space-2) var(--space-3);
}

.orion-line-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* E-5 — Unidad de medida del e-CF: la celda es de 68px, así que el select compacto pierde el relleno
   lateral y recorta con elipsis (caben ~5 letras: UND, KG, LB, CAJ…; el title trae el nombre completo). La
   etiqueta solo se ve en la vista móvil, donde el encabezado de la tabla se oculta. */
.orion-line-cell-unit .orion-line-input {
    padding-inline: 4px 0;
    text-overflow: ellipsis;
}

.orion-line-cell-label {
    display: none;
}

/* Las opciones de un select no heredan el fondo transparente de .orion-line-input: en tema oscuro salían
   claras sobre texto claro. */
[data-theme="dark"] .orion-line-input option {
    background: var(--surface);
    color: var(--text);
}

.orion-line-cell-num {
    text-align: center;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-sm, 13px);
}

.orion-line-cell-handle {
    text-align: center;
}

.orion-line-cell-qty,
.orion-line-cell-price,
.orion-line-cell-pct {
    align-items: flex-end;
}

.orion-line-cell-total {
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}

.orion-line-cell-actions {
    justify-content: center;
    align-items: center;
}

/* Drag handle visual (sin funcionalidad por ahora — placeholder UX
   para reordenamiento futuro). Cursor grab para hint visual. */
.orion-drag-handle {
    display: inline-block;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: grab;
    user-select: none;
    opacity: 0.4;
    transition: opacity 120ms ease;
}

.orion-line-row:hover .orion-drag-handle {
    opacity: 1;
}

/* Inputs sin spinners arrows (look más limpio tipo QB/Alegra). */
.orion-line-input {
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-size-sm, 13px);
    color: var(--text);
    transition: border-color 120ms ease, background 120ms ease;
}

.orion-line-input:hover {
    border-color: var(--border);
    background: var(--bg-subtle, var(--surface));
}

.orion-line-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
}

.orion-line-input-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Quitar spinners arrow de inputs number (look QB/Alegra). */
.orion-line-input-num::-webkit-outer-spin-button,
.orion-line-input-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.orion-line-input-num[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Total por línea: número grande + breakdown chico debajo. */
.orion-line-total-value {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base, 14px);
}

.orion-line-total-breakdown {
    display: flex;
    gap: var(--space-2);
    font-size: var(--font-size-xs, 11px);
    color: var(--text-muted);
}

/* Dropdown de almacén dentro de la celda de producto (cuando aplica). */
.orion-line-warehouse {
    margin-top: 4px;
    padding: 4px 6px;
    font-size: var(--font-size-xs, 12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-subtle, var(--surface));
    width: 100%;
    max-width: 200px;
}

/* Botón danger (eliminar línea). */
.orion-icon-btn-danger:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: #dc2626;
    color: #dc2626;
}

/* Footer con botón "+ Agregar otra línea" abajo del table. */
.orion-line-footer {
    padding: var(--space-3) 0;
    text-align: center;
}

.orion-line-footer .orion-btn-link {
    color: var(--accent);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* Empty state grande cuando no hay líneas. */
.orion-line-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    background: var(--bg-subtle, var(--surface));
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
}

.orion-line-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
}

.orion-line-empty-title {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-base, 15px);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}

.orion-line-empty-sub {
    margin: 0 0 var(--space-4) 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm, 13px);
}

.orion-line-empty .orion-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* === Barra de totales al pie de la sección de líneas (spec §3.1, revisión
      2026-07-20) — sustituye al aside sticky de 320px, que le costaba a la
      tabla el 33% del ancho. Conserva la función que el aside protegía: el
      total siempre a la vista mientras se capturan líneas.

      Sangra a los bordes de la .orion-section-compact con margen negativo
      para leerse como barra del pie de la card, no como bloque suelto. === */
.orion-lines-totals {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
    background: var(--surface-alt);
    border-top: var(--border-width) solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    /* El total sigue visible si la página llegara a crecer (facturas con
       muchas retenciones): mismo rol que el aside sticky que reemplaza. */
    position: sticky;
    bottom: 0;
    z-index: 3;
}

/* Desglose: secundario. Cede primero al envolver — el total nunca se mueve. */
.orion-lines-totals-breakdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    min-width: 0;
}

.orion-lines-totals-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.orion-lines-totals-item strong {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Comisión: informativa, NO compone el total. Se atenúa para que no se lea
   como un componente más de la suma. */
.orion-lines-totals-note,
.orion-lines-totals-note strong {
    color: var(--text-muted);
    font-weight: var(--font-weight-regular);
}

/* El único elemento destacado de la barra. Separador de 1px en vez de sombra. */
.orion-lines-totals-grand {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}

.orion-lines-totals-grand > span {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.orion-lines-totals-grand > strong {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: var(--line-height-tight, 1.25);
}

/* Presupuesto de altura (medido en 1366×768, no estimado): con 45vh el
   formulario daba 849px contra 768 de viewport → 81px de scroll. Se recuperan
   sin sacrificar líneas visibles, que es lo que el editor debe maximizar:
     · 65px — "Avanzado" pasa a la fila de 3 de Retenciones/Adjuntos
       (49 de sección + 16 de gap);
     · 31px — este 34vh (261px) en vez de 45vh (346px).
   34vh y no 36vh: medido en el harness, 36vh dejaba el formulario en 773px
   sobre 768 (desbordaba 5px) y 35vh no alcanzaba. 34vh cierra en ~765 con
   holgura real, sin margen para una barra de
   scroll horizontal o métricas de fuente distintas. A 269px siguen entrando
   5 filas completas (encabezado 29 + 5 × 46 = 259), así que los 7px de
   seguridad no cuestan ninguna línea. */
.orion-table-scroll-lines { max-height: 34vh; }

@media (max-width: 1100px) {
    /* Apilada: el desglose arriba, el total abajo alineado a la derecha. */
    .orion-lines-totals { justify-content: space-between; }
    .orion-lines-totals-grand {
        padding-left: 0;
        border-left: 0;
        border-top: var(--border-width) solid var(--border);
        padding-top: var(--space-2);
        width: 100%;
        justify-content: space-between;
    }
}

/* En móvil, colapsamos a tarjetas verticales. */
@media (max-width: 1100px) {
    .orion-line-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .orion-line-row-head {
        display: none;
    }

    .orion-line-cell-handle,
    .orion-line-cell-num {
        grid-column: span 2;
        flex-direction: row;
        justify-content: space-between;
    }

    .orion-line-cell-product,
    .orion-line-cell-desc {
        grid-column: span 2;
    }

    /* Sin encabezado en la tarjeta, la unidad lleva su propia etiqueta. */
    .orion-line-cell-label {
        display: block;
        font-size: var(--font-size-xs, 12px);
        color: var(--text-muted);
    }

    /* Con la celda de unidad las celdas de datos pasan de 6 a 7: la papelera quedaría sola en la mitad de
       una fila; ocupa la fila entera, alineada a la derecha. */
    .orion-line-cell-actions {
        grid-column: span 2;
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* === C.9.s.2 F3.2 — Total flotante en /facturas/nueva (estilo QuickBooks) === */
.orion-floating-total {
    position: sticky;
    top: var(--space-3);
    z-index: 10;
    margin: 0 0 var(--space-4) auto;
    max-width: 320px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    text-align: right;
}

.orion-floating-total-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}

.orion-floating-total-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
}

.orion-floating-total-currency {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    margin-right: var(--space-1);
}

.orion-floating-total-sub {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    /* En móvil, queda inline (no sticky) — no tiene sentido flotar en pantalla chica. */
    .orion-floating-total {
        position: static;
        max-width: none;
        margin-left: 0;
        text-align: center;
    }
}

/* ============================================================
   EmployeeForm — PR #237 follow-up
   Breadcrumb + page actions inline + payment-method cards + input prefix.
   Patrones reutilizables: el breadcrumb y el page-actions sirven para
   cualquier form que necesite acciones primarias arriba (no al pie).
   ============================================================ */

/* — Breadcrumb sutil, 12px secondary. No agresivo: el usuario lo lee
     periféricamente; el item activo (último) es el único en --text. — */
.orion-breadcrumb { margin-bottom: var(--space-3); }
.orion-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.orion-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-1); }
.orion-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.orion-breadcrumb a:hover { color: var(--text); background: var(--surface-hover); }
.orion-breadcrumb a:focus-visible { outline: 0; box-shadow: var(--focus-ring); color: var(--text); }
.orion-breadcrumb [aria-current="page"] {
    color: var(--text);
    font-weight: var(--font-weight-medium);
}
.orion-breadcrumb-sep {
    color: var(--text-muted);
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
}

/* — Acciones inline en el page-header (Stripe-style: cancelar/guardar
     arriba a la derecha junto al título). Mantiene 1 sola primaria. — */
.orion-page-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* — Cards seleccionables de Forma de pago. 3 columnas, fila simple.
     Patrón Stripe/Linear: el card completo es radio, no solo el input.
     Estado seleccionado: borde 2px accent + bg sutil tint. — */
.orion-payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
}
.orion-payment-grid > legend {
    grid-column: 1 / -1;
    padding: 0;
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}
.orion-payment-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    /* 2px borde permanente → al seleccionar no hay "salto" de layout
       (técnica QuickBooks: borde transparente reserva el espacio). */
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast),
                background var(--transition-fast);
    /* min-height generoso para touch target accesible (44px+). */
    min-height: 64px;
    position: relative;
}
.orion-payment-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}
.orion-payment-card:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}
.orion-payment-card.is-selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.orion-payment-card-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
    transition: color var(--transition-fast);
}
.orion-payment-card.is-selected .orion-payment-card-icon { color: var(--accent); }
.orion-payment-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orion-payment-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}
.orion-payment-card-sub {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
/* Radio input nativo oculto visualmente pero accesible (no display:none —
   los SR ignorarían el grupo y aria-checked no aplica en buttons radio-like). */
.orion-payment-card-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* — Prefijo de input (ej. "RD$" antes del salario). Patrón Stripe. — */
.orion-input-prefix-wrap {
    display: flex;
    align-items: stretch;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.orion-input-prefix-wrap:hover { border-color: var(--border-strong); }
.orion-input-prefix-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.orion-input-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-right: var(--border-width) solid var(--border);
    background: var(--surface-alt);
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    user-select: none;
}
/* Cuando hay wrapper, el input pierde su propio borde y usa el del wrapper. */
.orion-input-prefix-wrap > input {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    box-shadow: none !important;
}
.orion-input-prefix-wrap > input:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

/* — Responsive: cards de pago a 1 columna en mobile. — */
@media (max-width: 768px) {
    .orion-payment-grid { grid-template-columns: 1fr; }
    .orion-page-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   TABS (EmployeeForm v2 PR3)
   ------------------------------------------------------------
   Patrón Linear/Stripe: tabs lineales con indicador inferior fino,
   sin pestañas redondeadas. Activo = accent + indicador 2px abajo.
   Soporta badge a la derecha del label (contadores de pendientes
   o ✓ de sección completa).
   ============================================================ */
.orion-tabs {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    border-bottom: var(--border-width) solid var(--border);
    margin-bottom: var(--space-4);
    overflow-x: auto;
    /* Esconder scrollbar en webkit pero mantener funcionalidad teclado/touch */
    scrollbar-width: thin;
}
.orion-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* superpone el border-bottom de la tablist */
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    min-height: 44px;
}
.orion-tab:hover { color: var(--text); }
.orion-tab:focus-visible { outline: 0; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.orion-tab[aria-selected="true"],
.orion-tab[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.orion-tab-num {
    /* índice "1·" / "2·" sutil antes del label */
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.orion-tab[aria-selected="true"] .orion-tab-num { color: var(--accent); }
.orion-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--status-warning-bg);
    color: var(--status-warning-strong);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.orion-tab-check {
    /* ✓ verde para secciones completas */
    display: inline-flex;
    align-items: center;
    color: var(--status-success);
}
.orion-tab-panel { display: block; }
.orion-tab-panel[hidden] { display: none; }

/* ============================================================
   RADIO CARDS (genérico — reusa el patrón de payment-card)
   Usado en EmployeeForm Pestaña 1 para Forma de pago (3 cards)
   y para inputs tipo "elegir uno" donde la opción es chunky.
   ============================================================ */
.orion-radio-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
@media (max-width: 768px) { .orion-radio-cards { grid-template-columns: 1fr; } }

/* ============================================================
   ROW ITEM (lista dinámica: dependientes)
   ------------------------------------------------------------
   Cada dependiente vive en una "fila" con grid interno + botón
   trash a la derecha. Patrón Notion: pequeño separador, acción
   destructiva discreta (no rojo permanente — solo al hover).
   ============================================================ */
.orion-row-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.orion-row-item {
    background: var(--surface-alt);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: start;
}
.orion-row-item-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
@media (max-width: 768px) {
    .orion-row-item-body { grid-template-columns: 1fr; }
}
.orion-row-item-actions {
    display: flex;
    align-items: flex-start;
    padding-top: var(--space-5); /* alinear con el primer input (label arriba) */
}
.orion-row-trash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.orion-row-trash:hover { color: var(--status-danger); background: var(--surface-hover); border-color: var(--status-danger); }
.orion-row-trash:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.orion-row-add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    align-self: flex-start;
    margin-top: var(--space-2);
}
.orion-row-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.orion-row-add:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

/* ============================================================
   CALLOUTS (info / warning) — banners discretos dentro de cards
   ------------------------------------------------------------
   Distintos a .orion-alert (que es banner full-width). Callouts
   van adentro de una sección para advertir sobre un sub-bloque
   específico (ej. "TSS pendiente de implementación backend").
   ============================================================ */
.orion-callout {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--border);
    background: var(--surface-alt);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    margin-bottom: var(--space-4);
}
.orion-callout-icon { flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.orion-callout-body { color: var(--text); }
.orion-callout-body strong { font-weight: var(--font-weight-semibold); }
.orion-callout-info {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.orion-callout-info .orion-callout-icon { color: var(--accent); }
.orion-callout-warning {
    background: var(--status-warning-bg);
    border-color: color-mix(in srgb, var(--status-warning) 30%, transparent);
}
.orion-callout-warning .orion-callout-icon { color: var(--status-warning); }

/* ============================================================
   AUTOSAVE HINT (header status)
   ------------------------------------------------------------
   Indicador discreto al lado del título: "Borrador guardado hace 2s".
   Equivale al patrón Notion/Figma: 12px secondary, no obstructivo.
   ============================================================ */
.orion-autosave-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
}
.orion-autosave-hint .orion-icon { color: var(--money-positive); }

/* ============================================================
   AVATAR (placeholder iniciales del empleado en header)
   ------------------------------------------------------------
   Círculo 40px con iniciales — visual cue del registro de personal.
   ============================================================ */
.orion-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* ============================================================
   TSS PREVIEW CARD (Pestaña 2 — live PR5)
   ------------------------------------------------------------
   Card lateral con salario bruto, descuentos SDSS/ISR, neto y
   costo empleador. Alimentada por IPayrollCalcService. Filas
   con label muted + monto tabular-nums alineado a la derecha.
   Verde sólo para Neto a pagar (positivo), rojo solo para
   descuentos (negativo) — respeta el sistema de color Orion.
   ============================================================ */
.orion-tss-preview { display: flex; flex-direction: column; gap: 0; }
.orion-tss-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: var(--border-width) solid var(--border);
    font-size: var(--font-size-sm);
}
.orion-tss-preview-row:last-child { border-bottom: 0; }
.orion-tss-preview-row-label {
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.orion-tss-preview-row-meta {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    opacity: 0.85;
}
.orion-tss-preview-row-value {
    color: var(--text);
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.orion-tss-preview-row-total {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border);
    border-bottom: 0;
}
.orion-tss-preview-row-total .orion-tss-preview-row-label {
    color: var(--text);
    font-weight: var(--font-weight-semibold);
}
.orion-tss-preview-row-total .orion-tss-preview-row-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* — Empty state: salario aún no ingresado. — */
.orion-tss-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}
.orion-tss-preview-empty .orion-icon { color: var(--text-muted); opacity: 0.6; }

/* — Separador entre bloque "empleado" y bloque "empleador". — */
.orion-tss-preview-section-divider {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--border);
}
.orion-tss-preview-subheading {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* — Bloque costo empleador con fondo sutil para diferenciarlo. — */
.orion-tss-preview-employer-cost {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-alt);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
}
.orion-tss-preview-employer-cost .orion-tss-preview-row { font-size: var(--font-size-xs); }
.orion-tss-preview-employer-cost .orion-tss-preview-row-total .orion-tss-preview-row-value {
    font-size: var(--font-size-sm);
}

/* — Footnote con tasa SRL aplicada y año fiscal. — */
.orion-tss-preview-footnote {
    margin: var(--space-3) 0 0 0;
    padding-top: var(--space-2);
    border-top: var(--border-width) dashed var(--border);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

/* ============================================================
   COTIZACION GRID (Pestaña 2 — RiskCategory + Disability + INFOTEP)
   ------------------------------------------------------------
   Grid 2-col en desktop (RiskCategory | Disability) con el checkbox
   INFOTEP ocupando ancho completo abajo. 1-col en mobile.
   ============================================================ */
.orion-cotizacion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}
.orion-cotizacion-grid .orion-cotizacion-checkbox {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}
@media (max-width: 960px) {
    .orion-cotizacion-grid { grid-template-columns: 1fr; }
}

/* — Grid 2 cols (form + sidebar) para Pestaña 2. — */
.orion-form-with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 960px) { .orion-form-with-aside { grid-template-columns: 1fr; } }

/* ============================================================
   SECTION HEADER CON ICONO  (UX.10 — Modernización de formularios)
   ------------------------------------------------------------
   Cabecera de card con icono lineal a la izquierda + título + sub
   opcional. Reutiliza el patrón de EmployeeForm (avatar/iconos
   lineales) llevándolo al nivel de cada card del formulario para
   dar jerarquía visual sin sombras ni colores.
   ============================================================ */
.orion-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.orion-section-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-muted);
}
.orion-section-header-text { min-width: 0; }
.orion-section-header-text h2 { margin: 0; }
.orion-section-header-sub {
    margin: 2px 0 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}
/* La card compacta con header de icono ya no necesita el margin
   inferior del h2 plano — el wrapper .orion-section-header lo aporta. */
.orion-section-compact .orion-section-header h2 { margin: 0; }

/* — Validación inline por campo (UX.10): mensaje rojo con icono
     debajo del input. Distinto a .orion-form-help (gris, neutro).
     El estado de error se comunica por texto + icono, no solo color
     (WCAG — no depender únicamente del color). — */
.orion-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    margin-top: var(--space-1);
    color: var(--status-danger);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}
.orion-field-error .orion-icon { flex-shrink: 0; margin-top: 1px; }
/* Blazor ValidationMessage emite <div class="validation-message">.
   Lo alineamos al lenguaje visual de .orion-field-error. */
.orion-form-field .validation-message {
    margin-top: var(--space-1);
    color: var(--status-danger);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}

/* — Sub-grupo dentro de una card (UX.10): separador sutil + título
     pequeño para dividir una card en bloques lógicos sin abrir otra
     card (ej. "Política de crédito" dentro de la card de comercial). — */
.orion-subsection {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
}
.orion-subsection-title {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* — Toolbar de card: título de sección + acción/contador a la
     derecha (ej. "Direcciones de envío (3)"). — */
.orion-section-header-meta {
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* — Checkbox alineado como campo de grid (UX.10): el InputCheckbox
     queda a la izquierda del label dentro de la celda del form-grid,
     centrado verticalmente con los inputs hermanos. — */
.orion-form-check {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    align-self: end;
    min-height: 38px;
}
.orion-form-check > input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.orion-form-check > span { color: var(--text); }

/* — Badge de estado junto al título de página (UX.10): alinea el
     badge verticalmente con el texto del <h1> sin estirar la línea. — */
.orion-page-header h1 .orion-badge {
    vertical-align: middle;
    margin-left: var(--space-2);
}

/* ============================================================
   IMPORTADOR 606 (D.i) — wizard de 3 pasos
   ------------------------------------------------------------
   Complementa los tokens existentes. Reutiliza orion-section,
   orion-callout, orion-stats, orion-table y orion-badge.
   ============================================================ */

/* — Badge de error: faltaba la variante danger (existían success/
     warning/neutral). Usada para monto inválido / período cerrado. — */
.orion-badge-danger { background: var(--status-danger-bg); color: var(--status-danger-strong); }

/* — Callout danger: variante de error para el callout (existían
     info/warning). Mismo patrón de borde tintado. — */
.orion-callout-danger {
    background: var(--status-danger-bg);
    border-color: color-mix(in srgb, var(--status-danger) 30%, transparent);
}
.orion-callout-danger .orion-callout-icon { color: var(--status-danger); }

/* — Indicador de pasos: barra horizontal numerada. — */
.orion-import-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-4) 0;
    padding: 0;
    flex-wrap: wrap;
}
.orion-import-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.orion-import-step[data-state="current"] {
    color: var(--text);
    font-weight: var(--font-weight-medium);
}
.orion-import-step[data-state="done"] { color: var(--text); }
.orion-import-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border: var(--border-width) solid var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.orion-import-step[data-state="current"] .orion-import-step-num {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
}
.orion-import-step[data-state="done"] .orion-import-step-num {
    background: var(--status-success-bg);
    border-color: color-mix(in srgb, var(--status-success) 30%, transparent);
    color: var(--status-success-strong);
}
.orion-import-step-sep {
    flex: 0 1 32px;
    height: var(--border-width);
    background: var(--border);
}

/* — Dropzone del paso 1: el InputFile se superpone transparente
     para que toda el área sea clicable y soporte drag&drop nativo. — */
.orion-import-dropzone {
    position: relative;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    transition: border-color 120ms ease, background 120ms ease;
}
.orion-import-dropzone:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: var(--accent-soft);
}
.orion-import-dropzone.is-busy { opacity: 0.7; }

/* — Importar unidades del condominio (CM-1). Regla del dueño 2026-07-16: las
     pantallas de Condominios caben en 1366×768 sin scroll de página. Mismo
     mecanismo :has() que el dashboard: la columna principal mide exactamente
     el viewport, el contenido es una columna flex y la TABLA de vista previa
     absorbe el alto que sobra (scroll interno). Si en un viewport muy bajo
     las partes fijas no caben, el scroll queda dentro de .orion-content —
     nunca se recorta la barra de acciones. Medido con maqueta estática
     (app.css real, 1366×658): 30 filas → documento = viewport. — */
body:has(.orion-condo-import) .orion-main { height: 100vh; }
body:has(.orion-condo-import) .orion-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: var(--space-3) var(--space-8);
}
.orion-condo-import { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* El dropzone cubre su caja con un <input type=file> transparente (ver
   .orion-import-dropzone input): el enlace de la plantilla se pone POR ENCIMA
   para que el clic descargue en vez de abrir el selector de archivos. */
.orion-condo-import .orion-import-dropzone { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.orion-import-template-link {
    position: relative;
    z-index: 1;
    flex: none;
    margin-right: var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.orion-import-template-link:hover { text-decoration: underline; }
.orion-condo-import .orion-page-header { margin-bottom: var(--space-3); }
/* El bloque de título puede encoger (min-width:0) para que las acciones no
   caigan a una segunda fila: el subtítulo parte antes que la fila. */
.orion-condo-import .orion-page-header-row > :first-child { flex: 1 1 auto; min-width: 0; }
.orion-condo-import .orion-import-step {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.orion-condo-import .orion-form-actions { padding: var(--space-3) 0 0; }
/* Conteos en UNA línea (las stat-cards del dashboard partían en dos filas). */
.orion-import-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.orion-import-summary-item { display: inline-flex; align-items: baseline; gap: var(--space-1); white-space: nowrap; }
.orion-import-summary-item strong {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.orion-import-summary-item strong.orion-text-success { color: var(--status-success); }
.orion-import-summary-item strong.orion-text-danger { color: var(--status-danger); }
.orion-import-preview-scroll {
    flex: 1;
    min-height: 120px;
    overflow: auto;
}
.orion-import-preview-scroll .orion-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}
.orion-import-preview-scroll .orion-table td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.orion-import-file-errors {
    max-height: 96px;
    overflow: auto;
    margin: 0;
    padding-left: var(--space-5);
}
.orion-import-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.orion-import-dropzone.is-busy input[type="file"] { cursor: progress; }
/* Foco por teclado del input invisible → resalta el contenedor. */
.orion-import-dropzone:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.orion-import-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-8) var(--space-4);
}
.orion-import-dropzone-icon { color: var(--text-muted); margin-bottom: var(--space-1); }
.orion-import-dropzone-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}
.orion-import-dropzone-sub {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* — Checkbox accionable de quick-create dentro de la celda de proveedor. — */
.orion-import-quickcreate {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--accent);
    cursor: pointer;
}
.orion-import-quickcreate input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* — Nota explicativa bajo el badge de estado de fila. — */
.orion-import-row-note {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ============================================================
   FEEDBACK DE PROGRESO DE IMPORTACIÓN (606 / 607)
   ------------------------------------------------------------
   Dos estados, ambos dentro del namespace .orion-import-progress:
     · Indeterminado  → parseo del Excel (duración desconocida).
       Banda animada que recorre la barra de izq. a der.
     · Determinado    → loop de importación comprobante a
       comprobante. Relleno real con % + conteo "X de N".
   Construido sobre los tokens del sistema (--accent, --surface,
   --border, --text-*) → dark mode sin overrides. Respeta
   prefers-reduced-motion: sin animación, la barra solo "salta"
   al porcentaje (el conteo numérico sigue informando avance).
   ============================================================ */

/* — Contenedor común: bloque centrado dentro de la dropzone. — */
.orion-import-progress {
    width: 100%;
    max-width: 420px;
    margin: var(--space-3) auto 0;
    text-align: left;
}

/* — Fila superior: etiqueta de etapa + porcentaje a la derecha. — */
.orion-import-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.orion-import-progress-stage {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}
/* El % es un dato numérico → tabular-nums para que no "baile" al
   crecer de 9% a 10% a 100%. */
.orion-import-progress-pct {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* — Riel de la barra. Mismo grosor/redondeo que .orion-progress-bar
     del concierge e-CF, pero namespace propio para poder animar. — */
.orion-import-progress-track {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--surface-alt);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

/* — Relleno determinado: width gobernado por --orion-progress
     (variable inline desde Razor). Transición suave entre pasos. — */
.orion-import-progress-fill {
    height: 100%;
    width: var(--orion-progress, 0%);
    background: var(--accent);
    border-radius: inherit;
    transition: width 240ms ease;
}

/* — Estado indeterminado: el track recibe el modificador y una
     banda interior recorre el riel en bucle. No usa --orion-progress. — */
.orion-import-progress-track.is-indeterminate .orion-import-progress-fill {
    width: 38%;
    border-radius: var(--radius-pill);
    animation: orion-import-progress-slide 1.25s ease-in-out infinite;
}

@keyframes orion-import-progress-slide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(310%); }
}

/* — Conteo y nota de pie: "Importando comprobante X de N" y aviso. — */
.orion-import-progress-meta {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.orion-import-progress-meta .orion-num,
.orion-import-progress-count {
    font-variant-numeric: tabular-nums;
}

/* — Modo oscuro: los tokens ya resuelven contraste; solo damos al
     riel un fondo ligeramente más tenue que la superficie elevada
     para que el relleno --accent destaque sin parecer un input. — */
:root.dark .orion-import-progress-track,
.dark .orion-import-progress-track {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-alt));
}

/* — Accesibilidad de movimiento: sin la banda deslizante. La barra
     indeterminada queda como pulso de opacidad sutil (sigue
     comunicando "en proceso" sin desplazamiento lateral). — */
@media (prefers-reduced-motion: reduce) {
    .orion-import-progress-fill {
        transition: none;
    }
    .orion-import-progress-track.is-indeterminate .orion-import-progress-fill {
        width: 100%;
        animation: orion-import-progress-pulse 1.6s ease-in-out infinite;
    }
    @keyframes orion-import-progress-pulse {
        0%, 100% { opacity: 0.45; }
        50%      { opacity: 1; }
    }
}

/* — Responsive 960px: pasos y header se compactan. — */
@media (max-width: 960px) {
    .orion-import-step-label { display: none; }
    .orion-import-step-sep { flex-basis: 16px; }
}

/* ============================================================
   EXPEDIENTE DIGITAL DEL EMPLEADO (H.doc PR1)
   ------------------------------------------------------------
   Pantalla /empleados/{id}/expediente. Reutiliza orion-section,
   orion-callout, orion-empty-state, orion-modal y orion-avatar.
   Estilos propios solo para: dropzone de carga, lista agrupada
   de documentos y la celda de acción del listado de empleados.
   ============================================================ */

/* — Celda de acciones de fila en tablas de listado (alineada a la
     derecha, sin envoltura). Usada en EmployeesList → "Expediente". — */
.orion-table-actions {
    text-align: right;
    white-space: nowrap;
}

/* — Dropzone de carga: dashed border + input file invisible que cubre
     todo el área. Mismo patrón visual que .orion-import-dropzone, pero
     namespace propio para no acoplarse al wizard de importación. — */
.orion-expediente-dropzone {
    position: relative;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.orion-expediente-dropzone:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: var(--accent-soft);
}
.orion-expediente-dropzone.is-busy {
    opacity: 0.7;
    pointer-events: none;
}
.orion-expediente-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* Foco por teclado del input invisible → resalta el contenedor. */
.orion-expediente-dropzone:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.orion-expediente-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-8) var(--space-4);
}
.orion-expediente-dropzone-icon { color: var(--text-muted); margin-bottom: var(--space-1); }
.orion-expediente-dropzone-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
}
.orion-expediente-dropzone-sub {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* — Grupo de documentos por categoría. — */
.orion-expediente-group { margin-bottom: var(--space-5); }
.orion-expediente-group:last-child { margin-bottom: 0; }
.orion-expediente-group-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}
.orion-expediente-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--surface-alt);
    border: var(--border-width) solid var(--border);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* — Lista de piezas documentales: filas con borde 1px, sin sombras. — */
.orion-expediente-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.orion-expediente-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition-fast);
}
.orion-expediente-item:hover {
    border-color: var(--border-strong);
}
.orion-expediente-item-icon {
    flex-shrink: 0;
    color: var(--text-muted);
    display: inline-flex;
}
.orion-expediente-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.orion-expediente-item-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.orion-expediente-item-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.orion-expediente-item-desc {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}
.orion-expediente-item-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* — Responsive 720px: la pieza documental apila acciones bajo la info. — */
@media (max-width: 720px) {
    .orion-expediente-item {
        flex-wrap: wrap;
    }
    .orion-expediente-item-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ─── J.1 Books Close — checklist mensual asistido ─── */
.orion-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.orion-checklist-item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}
.orion-checklist-icon {
    font-size: 1.5rem;
    line-height: 1;
    align-self: start;
}
.orion-checklist-body { display: flex; flex-direction: column; gap: var(--space-2); }
.orion-checklist-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.orion-checklist-desc {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}
.orion-checklist-ok { border-left: 4px solid var(--success); }
.orion-checklist-warning { border-left: 4px solid var(--warning); }
.orion-checklist-blocking { border-left: 4px solid var(--danger); }
.orion-checklist-na { border-left: 4px solid var(--border); opacity: 0.7; }
.orion-stat-value-danger { color: var(--danger); }
.orion-stat-value-warning { color: var(--warning); }

/* ============================================================
   EMPRESAS POR MIEMBRO (ORG-1 PR-3, #677) — barra de cambios pendientes
   reutilizable (.orion-dirty-bar) + toolbar de la pantalla (omc-*)
   ============================================================ */
.orion-dirty-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
}
.orion-dirty-bar-summary { flex: 1; font-weight: 600; color: var(--text); }
.orion-dirty-bar .omc-plus { color: var(--status-success-strong); }
.orion-dirty-bar .omc-minus { color: var(--status-danger-strong); }
.omc-toolbar { align-items: center; gap: var(--space-3); }
.omc-only { white-space: nowrap; }
.omc-counters { color: var(--text-muted); white-space: nowrap; }
.omc-toolbar-actions { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.omc-scroll { max-height: 60vh; }
.omc-col-check { width: 2.25rem; text-align: center; }
.orion-table tbody tr.omc-row-changed td { background: var(--status-warning-bg); } /* gana al hover */
.omc-failures { margin: var(--space-2) 0 0 var(--space-4); }

/* ── Enlaces dentro de avisos: el texto de .orion-alert-info ya es --accent, así que un
   enlace solo se distingue por el subrayado (WCAG 1.4.1: el color no puede ser la única señal). */
.orion-alert a {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

/* ── Áreas de texto dentro de modales: mismo ancho máximo que input/select y sin
   resize horizontal (evita scroll dentro del diálogo). */
.orion-modal textarea {
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

/* ── Nómina · celda «Novedades» (paridad N-7) ──────────────────────────────
   Monto con detalle en popover accesible: mismo patrón que .orion-dgii-tooltip
   (hover + :focus-within, tabindex=0) con clases propias porque aquel está
   acoplado al glosario DGII. */
.orion-novelty-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 2px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    cursor: help;
    border-radius: var(--radius-sm);
}
.orion-novelty-badge:hover,
.orion-novelty-badge:focus-within { color: var(--accent); outline: none; }
.orion-novelty-badge:focus-visible { box-shadow: var(--focus-ring); }
.orion-novelty-badge-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 240px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated, var(--surface));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    visibility: hidden; /* fuera del árbol de accesibilidad hasta abrirse */
    pointer-events: none;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
}
.orion-novelty-badge:hover > .orion-novelty-badge-popover,
.orion-novelty-badge:focus-within > .orion-novelty-badge-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.orion-novelty-badge-popover ul { margin: 0; padding-left: 1rem; }