/* ── EndoTrace tokens ───────────────────────────────────────────────────────
   Global --et-* custom properties, declared only under :root or a theme
   selector (html[data-theme]). Component/modifier-scoped variables stay with
   their selector. Convention: docs/ui/STYLES_CONVENTION.md. Loaded before app.css.
──────────────────────────────────────────────────────────────────────────── */

:root {
	/* Colores — Dark mode (default)
       S23 token realignment — paleta alineada con docs/handoff/kpicard-reference-dark.png.
       Dark shell es más neutro (menos azulado). Accent pasa de emerald a teal-400 para
       igualar el mockup. README:45-49 del handoff es la fuente de verdad de la paleta. */
	--et-bg: #0b0d10;
	--et-surface: #16181d;
	--et-surface-2: #1c1f25;
	--et-surface-3: #20242b; /* inputs, search-pill bg */
	--et-accent: #2dd4bf; /* teal-400 */
	--et-accent-hover: #14b8a6; /* teal-500 */
	--et-accent-active: #0d9488; /* teal-600 */
	--et-on-accent: #ffffff;
	--et-text: #e8eaed;
	--et-text-muted: #8b9199;
	--et-text-subtle: #5c626a; /* timestamps, placeholders */
	--et-border: #2d343d;
	--et-border-strong: #3a424d; /* hover / selected */

	/* Colores — Light mode (crema cálido per reference) */
	--et-bg-light: #fafaf8;
	--et-surface-light: #ffffff;
	--et-surface-2-light: #f4f4f1;
	--et-surface-3-light: #eceae5;
	--et-text-light: #18181b;
	--et-text-muted-light: #71717a;
	--et-text-subtle-light: #a1a1aa;
	--et-border-light: #e7e5e0;
	--et-border-strong-light: #d4d4d0;

	/* Radios */
	--et-radius-card: 12px;
	--et-radius-btn: 8px;
	--et-radius-input: 8px;
	--et-radius-lg: 16px; /* hero containers */
	--et-radius-full: 9999px; /* pills, avatars */

	/* Status (S23 — alineado con reference paleta). Red/amber plenos, success emerald. */
	--et-status-success: #10b981; /* emerald-500 */
	--et-status-error: #ef4444; /* red-500 */
	--et-status-warning: #f59e0b; /* amber-500 */
	--et-status-info: #60a5fa; /* blue-400 */

	/* Chart palette (4+1 buckets, aging/segments) — reference rows 2-6 */
	--et-chart-1: #2dd4bf; /* teal */
	--et-chart-2: #f59e0b; /* amber */
	--et-chart-3: #ef4444; /* red */
	--et-chart-4: #60a5fa; /* blue */
	--et-chart-5: #a78bfa; /* violet (reserve) */

	/* Pill-button radius (S23 — CTA "Nueva orden" en reference). */
	--et-radius-btn-pill: 14px;

	/* Status — soft backgrounds (T-02, from KpiCard PoC).
       --et-warning-bg / --et-error-bg are retained above as legacy aliases; new
       consumers should prefer the -soft variants. Dark-mode alpha = 12%. */
	--et-status-success-soft: color-mix(
		in srgb,
		var(--et-status-success) 12%,
		transparent
	);
	--et-status-info-soft: color-mix(
		in srgb,
		var(--et-status-info) 12%,
		transparent
	);
	--et-status-warning-soft: color-mix(
		in srgb,
		var(--et-status-warning) 12%,
		transparent
	);
	--et-status-error-soft: color-mix(
		in srgb,
		var(--et-status-error) 12%,
		transparent
	);

	/* Status — soft text (T-03). Mixes the status/accent hue with muted text
       so labels stay legible at low contrast backgrounds. */
	--et-status-success-text-soft: color-mix(
		in srgb,
		var(--et-status-success) 72%,
		var(--et-text-muted) 28%
	);
	--et-status-info-text-soft: color-mix(
		in srgb,
		var(--et-status-info) 72%,
		var(--et-text-muted) 28%
	);
	--et-status-warning-text-soft: color-mix(
		in srgb,
		var(--et-status-warning) 72%,
		var(--et-text-muted) 28%
	);
	--et-status-error-text-soft: color-mix(
		in srgb,
		var(--et-status-error) 72%,
		var(--et-text-muted) 28%
	);
	--et-accent-text-soft: color-mix(
		in srgb,
		var(--et-accent) 72%,
		var(--et-text-muted) 28%
	);

	/* Shadows / Elevation */
	--et-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); /* legacy — valor propio, NO alias de --et-elevation-2 */
	--et-elevation-0: none;
	--et-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.2);
	--et-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.25);
	--et-elevation-4: 0 4px 8px rgba(0, 0, 0, 0.3);
	--et-elevation-8: 0 8px 16px rgba(0, 0, 0, 0.4);
	--et-elevation-12: 0 12px 24px rgba(0, 0, 0, 0.5);
	--et-elevation-16: 0 16px 48px rgba(0, 0, 0, 0.6);
	--et-modal-edge:
		0 0 2px 0 rgba(255, 255, 255, 0.15), 0 12px 48px -4px rgba(0, 0, 0, 0.7),
		0 0 100px -10px rgba(0, 0, 0, 0.5);

	/* Typography */
	--et-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Spacing scale (4px base) */
	--et-space-1: 0.25rem; /* 4px */
	--et-space-2: 0.5rem; /* 8px */
	--et-space-3: 0.75rem; /* 12px */
	--et-space-4: 1rem; /* 16px */
	--et-space-5: 1.25rem; /* 20px (T-01, KpiCard header gap) */
	--et-space-6: 1.5rem; /* 24px */
	--et-space-8: 2rem; /* 32px */
	--et-space-12: 3rem; /* 48px */

	/* Spacing semantic aliases (S01) */
	--et-spacing-xs: var(--et-space-1); /* 4px */
	--et-spacing-sm: var(--et-space-2); /* 8px */
	--et-spacing-md: var(--et-space-3); /* 12px */
	--et-spacing-base: var(--et-space-4); /* 16px */
	--et-spacing-lg: var(--et-space-6); /* 24px */
	--et-spacing-xl: var(--et-space-8); /* 32px */
	--et-spacing-xxl: var(--et-space-12); /* 48px */

	/* Typography scale */
	--et-text-xs: 0.75rem; /* 12px */
	--et-text-sm: 0.8125rem; /* 13px */
	--et-text-base: 0.875rem; /* 14px */
	--et-text-lg: 1rem; /* 16px */
	--et-text-xl: 1.25rem; /* 20px */
	--et-text-2xl: 1.5rem; /* 24px — page titles */
	--et-text-3xl: 2rem; /* 32px — display */

	/* Z-index scale */
	--et-z-header: 1000;
	--et-z-overlay: 1050;
	--et-z-sidebar: 1100;
	--et-z-dialog: 1300;
	--et-z-snackbar: 1400;

	/* Notification shell tokens (accessible notification system). */
	--et-notification-border: color-mix(
		in srgb,
		var(--et-border-strong) 70%,
		transparent
	);
	--et-notification-backdrop: color-mix(in srgb, var(--et-bg) 86%, transparent);
	--et-notification-shadow: color-mix(in srgb, var(--et-bg) 70%, transparent);
	--et-notification-muted-panel: color-mix(
		in srgb,
		var(--et-surface-3) 74%,
		transparent
	);
	--et-notification-modal-max: 520px;
	--et-notification-priority-max: 680px;
	--et-notification-decision-max: 580px;
	--et-notification-quick-max: 560px;

	/* Overlay / hover (light-mode safe) */
	--et-hover-overlay: rgba(255, 255, 255, 0.05);
	--et-badge-overlay: rgba(255, 255, 255, 0.08);

	/* Missing radius */
	--et-radius-sm: 4px;

	/* Semantic surface tokens (S23 — teal rebased). */
	--et-error-bg: rgba(239, 68, 68, 0.1);
	--et-accent-subtle: rgba(45, 212, 191, 0.08);
	--et-accent-tag: rgba(45, 212, 191, 0.12);
	--et-accent-tag-light: rgba(45, 212, 191, 0.05);
	--et-warning-bg: rgba(245, 158, 11, 0.1);
	--et-overlay: rgba(0, 0, 0, 0.4);

	/* Motion (S01) */
	--et-motion-fast: 120ms;
	--et-motion-normal: 200ms;
	--et-motion-slow: 320ms;
	--et-motion-lift: -1px; /* T-08, translateY on hover lift */
	--et-motion-skeleton: 1.4s; /* T-09, shimmer loop duration */
	--et-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* Focus ring (S01 + S23 teal rebase). */
	--et-focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.25);
	--et-focus-ring-width: 3px;

	/* Stroke widths (T-04, SVG). Unitless — stroke-width accepts raw numbers. */
	--et-stroke-fine: 1.6;
	--et-stroke-regular: 1.7;
	--et-stroke-bold: 2.4;

	/* Card sizing (T-05). Minimum heights to avoid layout jitter when skeletons
       swap into real content. */
	--et-card-min-h-default: 160px;
	--et-card-min-h-dense: 132px;

	/* Typography tracking (T-06). Negative tightens display numerals; positive
       widens eyebrows / all-caps labels. */
	--et-tracking-tight: -0.02em;
	--et-tracking-normal: 0;
	--et-tracking-wide: 0.04em;

	/* Charts (T-07). Area fill opacity under sparkline strokes. */
	--et-chart-area-alpha: 0.2;

	/* Color mixing ratios (T-10). Generic overlay/tint alphas plus the
       badge-text-soft split used by KpiCard. Named specifically so they do not
       collide with future chart/status mix alphas. */
	--et-mix-overlay: 10%;
	--et-mix-tint: 30%;
	--et-badge-text-mix-primary: 72%;
	--et-badge-text-mix-secondary: 28%;

	/* ── S10d tokens — consumed by dashboard-role.css ────────────────────────
       Added as part of S10d remediation (CRITICAL-2). These close the 10-token
       gap discovered by FMEA validator; every new var is either a semantic
       alias over an existing primitive or a spec-mandated constant. */

	/* Card sizing — minimum width for auto-fill grid columns in vendor dashboard.
       Matches the existing --et-dash-card-min default used by S10c admin grid. */
	--et-size-card-min: 280px;

	/* Dashboard grid — KPI row minimum column width and gap (S10g unification).
       --et-size-kpi-row-min drives the 4-column responsive KPI row via auto-fill.
       --et-dash-gap is the canonical gap across every .et-dashboard-grid instance. */
	--et-size-kpi-row-min: 240px;
	--et-dash-gap: var(--et-space-6);

	/* Radius semantic alias — pill-shaped chips/badges. Aliases --et-radius-full. */
	--et-radius-pill: var(--et-radius-full);

	/* Line-height scale — small copy (chips, badges). Tight for single-line labels. */
	--et-line-sm: 1.25;

	/* Transition preset — composed duration+easing for chip hover/toggle feedback. */
	--et-transition-fast: var(--et-motion-fast) var(--et-ease-standard);

	/* Font-weight semantic aliases (matches Inter webfont variants already loaded). */
	--et-font-semibold: 600;
	--et-font-bold: 700;

	/* Border tint — subtler divider for dense tables where var(--et-border) reads
       too heavy. 50% alpha mix toward surface keeps rows legible at small sizes. */
	--et-border-subtle: color-mix(in srgb, var(--et-border) 50%, transparent);

	/* Disabled-state opacity. Constant at 0.5 across UI controls (WCAG AA-aware
       when combined with tint/label contrast). */
	--et-opacity-disabled: 0.5;

	/* Heading size aliases — map to MudBlazor Typo.h5 / Typo.h6 equivalents
       used by pre-S10d Dashboard.razor vendor block (replaced by .et-value-accent). */
	--et-text-h5: 1.25rem; /* 20px */
	--et-text-h6: 1rem; /*  16px */

	/* Color on top of var(--et-accent) — emerald-500 background → white text.
       Named CSS color (not hex) to keep ET0002 parity with the other 10 new tokens. */
	--et-on-accent: white;
}

/* ── Dark theme runtime authority (MudBlazor token sync) ───────────────────
   html[data-theme] is the visual source of truth because theme.js sets it before
   Blazor hydrates. MudThemeProvider can briefly or permanently disagree when
   server/client theme resolution diverges, so both explicit themes pin the Mud
   CSS variables at the html level. Without this, dark shells can inherit light
   Mud tokens: white labels and black icons on dark inputs. */
html[data-theme="dark"] {
	--mud-palette-text-primary: rgba(232, 234, 237, 1);
	--mud-palette-text-secondary: rgba(156, 163, 175, 1);
	--mud-palette-text-disabled: rgba(255, 255, 255, 0.38);
	--mud-palette-action-default: rgba(232, 234, 237, 0.74);
	--mud-palette-action-default-hover: rgba(255, 255, 255, 0.08);
	--mud-palette-action-disabled: rgba(255, 255, 255, 0.26);
	--mud-palette-action-disabled-background: rgba(255, 255, 255, 0.12);
	--mud-palette-surface: rgba(28, 30, 38, 1);
	--mud-palette-background: rgba(15, 17, 23, 1);
	--mud-palette-background-gray: rgba(22, 24, 29, 1);
	--mud-palette-appbar-background: rgba(28, 30, 38, 1);
	--mud-palette-lines-default: rgba(255, 255, 255, 0.12);
	--mud-palette-lines-inputs: rgba(156, 163, 175, 1);
	--mud-palette-table-lines: rgba(255, 255, 255, 0.12);
	--mud-palette-table-striped: rgba(255, 255, 255, 0.02);
	--mud-palette-table-hover: rgba(255, 255, 255, 0.04);
	--mud-palette-divider: rgba(255, 255, 255, 0.12);
	--mud-palette-divider-light: rgba(255, 255, 255, 0.8);
	--mud-palette-skeleton: rgba(255, 255, 255, 0.11);
	--mud-native-html-color-scheme: dark;
}

/* ── Light theme runtime override (S02) ─────────────────────────────────────
   Activated by js/theme.js setting <html data-theme="light">.
   Reassigns the core color tokens to their *-light counterparts so every
   existing rule consuming var(--et-bg), var(--et-surface), etc. picks up the
   light palette without changes. Status / accent / motion / elevation tokens
   remain cross-mode per Constitution §Palette. */
html[data-theme="light"] {
	--et-bg: var(--et-bg-light);
	--et-surface: var(--et-surface-light);
	--et-surface-2: var(--et-surface-2-light);
	--et-text: var(--et-text-light);
	--et-text-muted: var(--et-text-muted-light);
	--et-border: var(--et-border-light);
	--et-hover-overlay: rgba(0, 0, 0, 0.04);
	--et-badge-overlay: rgba(0, 0, 0, 0.06);

	/* Status soft backgrounds at 8% alpha for legibility on light surfaces. */
	--et-status-success-soft: color-mix(
		in srgb,
		var(--et-status-success) 8%,
		transparent
	);
	--et-status-info-soft: color-mix(
		in srgb,
		var(--et-status-info) 8%,
		transparent
	);
	--et-status-warning-soft: color-mix(
		in srgb,
		var(--et-status-warning) 8%,
		transparent
	);
	--et-status-error-soft: color-mix(
		in srgb,
		var(--et-status-error) 8%,
		transparent
	);

	/* MudBlazor palette overrides — applied at <html> level so they win over
       MudThemeProvider's :root dark output. Values come from PaletteLight in
       Components/EndoTraceTheme.cs plus MudBlazor's computed light defaults
       (extracted once from IsDarkMode="false" render, 2026-04-20).

       Why here (not via MudThemeProvider parameter): EndoLayout is rendered in
       static SSR mode (pages declare @rendermode InteractiveServer, layouts
       don't), so IThemeService.InitializeAsync never fires from OnAfterRender.
       Theme state lives in localStorage + the data-theme attribute on <html>,
       set pre-hydration by wwwroot/js/theme.js (FOUC-free). S12c may promote
       the layout to interactive; this block remains correct regardless. */
	--mud-palette-text-primary: rgba(26, 26, 46, 1);
	--mud-palette-text-secondary: rgba(107, 114, 128, 1);
	--mud-palette-text-disabled: rgba(0, 0, 0, 0.38);
	--mud-palette-action-default: rgba(0, 0, 0, 0.54);
	--mud-palette-action-default-hover: rgba(0, 0, 0, 0.06);
	--mud-palette-action-disabled: rgba(0, 0, 0, 0.26);
	--mud-palette-action-disabled-background: rgba(0, 0, 0, 0.12);
	--mud-palette-surface: rgba(255, 255, 255, 1);
	--mud-palette-background: rgba(248, 249, 250, 1);
	--mud-palette-background-gray: rgba(245, 245, 245, 1);
	--mud-palette-appbar-background: rgba(255, 255, 255, 1);
	--mud-palette-lines-default: rgba(0, 0, 0, 0.12);
	--mud-palette-lines-inputs: rgba(189, 189, 189, 1);
	--mud-palette-table-lines: rgba(224, 224, 224, 1);
	--mud-palette-table-striped: rgba(0, 0, 0, 0.02);
	--mud-palette-table-hover: rgba(0, 0, 0, 0.04);
	--mud-palette-divider: rgba(224, 224, 224, 1);
	--mud-palette-divider-light: rgba(0, 0, 0, 0.8);
	--mud-palette-skeleton: rgba(0, 0, 0, 0.11);
	--mud-palette-black: rgba(39, 44, 52, 1);
	--mud-native-html-color-scheme: light;
}

/* ── Responsive foundation tokens (moved from responsive-foundation.css) ─── */
:root {
    --et-table-first-col: minmax(12rem, 1.5fr);
    --et-table-expand-col: 3rem;
    --et-table-action-col: 3.5rem;
    --et-ar-customer-col-min: 12rem;
    --et-table-num-col-width: 6.5rem;
    --et-ar-total-col-width: 7rem;
    --et-table-num-col-min: minmax(6.5rem, 1fr);
    --et-table-cell-pad-x: var(--et-space-3);
    --et-table-template: var(--et-table-first-col) var(--et-table-num-col-min)
        var(--et-table-action-col);
    --et-ar-aging-table-width: calc(
        var(--et-table-expand-col) +
        var(--et-ar-customer-col-min) +
        var(--et-table-num-col-width) +
        var(--et-table-num-col-width) +
        var(--et-table-num-col-width) +
        var(--et-table-num-col-width) +
        var(--et-table-num-col-width) +
        var(--et-ar-total-col-width)
    );
    --et-ar-aging-table-template: var(--et-table-expand-col)
        var(--et-ar-customer-col-min) repeat(5, var(--et-table-num-col-width))
        var(--et-ar-total-col-width);
    --et-payments-customer-col-min: 12rem;
    --et-payments-date-col-min: 6.5rem;
    --et-payments-amount-col-min: 7.5rem;
    --et-payments-type-col-min: 8rem;
    --et-payments-status-col-min: 6.5rem;
    --et-payments-invoice-col-min: 9rem;
    --et-payments-pay-col-min: 6rem;
    --et-payments-reference-col-min: 11rem;
    --et-payments-responsible-col-min: 9rem;
    --et-payments-table-min-width: calc(
        var(--et-payments-customer-col-min) +
        var(--et-payments-date-col-min) +
        var(--et-payments-amount-col-min) +
        var(--et-payments-type-col-min) +
        var(--et-payments-status-col-min) +
        var(--et-payments-invoice-col-min) +
        var(--et-payments-pay-col-min) +
        var(--et-payments-reference-col-min) +
        var(--et-payments-responsible-col-min) +
        var(--et-table-action-col)
    );
    --et-payment-requests-status-col-min: 14rem;
    --et-payment-requests-actions-col-min: 5.5rem;
    --et-payment-requests-status-table-min-width: calc(
        var(--et-payments-customer-col-min) +
        var(--et-payments-date-col-min) +
        var(--et-payments-amount-col-min) +
        var(--et-payments-type-col-min) +
        10rem +
        6rem +
        var(--et-payments-responsible-col-min) +
        var(--et-payment-requests-status-col-min)
    );
    --et-payment-requests-table-min-width: calc(
        3.5rem +
        var(--et-payment-requests-actions-col-min) +
        var(--et-payments-customer-col-min) +
        var(--et-payments-date-col-min) +
        var(--et-payments-amount-col-min) +
        var(--et-payments-type-col-min) +
        10rem +
        6rem +
        var(--et-payments-responsible-col-min)
    );
    --et-density-table-text-col-min: 11rem;
    --et-density-table-num-col-min: 7rem;
    --et-sales-orders-table-min-width: calc(
        (var(--et-density-table-text-col-min) * 6) +
        var(--et-density-table-num-col-min)
    );
    --et-stock-table-min-width: calc(
        (var(--et-density-table-text-col-min) * 4) +
        (var(--et-density-table-num-col-min) * 3) +
        var(--et-table-action-col)
    );
    --et-invoices-table-min-width: calc(
        (var(--et-density-table-text-col-min) * 5) +
        (var(--et-density-table-num-col-min) * 4) +
        var(--et-table-action-col)
    );
    --et-mobile-card-label-min: 7rem;
    --et-rf-form-field-min: 24ch;
    --et-rf-form-field-min-compact: 24ch;
    --et-rf-form-panel-min: 34ch;
}