/* ============================================================
 * UMSA Design System v1.0 — Single-file bundle
 *
 * Imports everything in the right order. Drop this in your
 * global CSS and you're done.
 *
 *   <link rel="stylesheet" href="umsa-design-system/umsa.bundle.css">
 *
 * Or in a build:
 *   @import 'umsa-design-system/umsa.bundle.css';
 * ============================================================ */

/* ============================================================
 * UMSA · Última Milla S.A. — Design System v1.0
 * tokens/umsa.css — Single source of truth
 *
 * Two-tier architecture:
 *   --red-600          → primitive (raw scale value)
 *   --color-brand-primary → semantic (intent, references primitive)
 *
 * Always use semantic tokens in components.
 * Only reference primitives when defining new semantic tokens.
 * ============================================================ */

@import url('https://fonts.cdnfonts.com/css/futura-pt');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
  /* ============================================================
   * TIER 1 · PRIMITIVES — Raw scale values
   * Never reference these directly in components.
   * ============================================================ */

  /* Brand red — ramp */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-300: #FCA5A5;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-800: #991B1B;
  --red-900: #7F1D1D;

  /* Stone (warm neutrals) — ramp */
  --stone-0:   #FFFFFF;
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;
  --stone-950: #0C0A09;

  /* Functional — feedback ramps */
  --green-50: #F0FDF4; --green-100: #DCFCE7; --green-600: #16A34A; --green-700: #15803D; --green-800: #166534;
  --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-600: #D97706; --amber-700: #B45309; --amber-800: #92400E;
  --blue-50:  #EFF6FF; --blue-100:  #DBEAFE; --blue-600:  #2563EB; --blue-700:  #1D4ED8; --blue-800:  #1E40AF;
  --violet-50:#F5F3FF; --violet-100:#EDE9FE; --violet-600:#7C3AED; --violet-700:#6D28D9;

  /* Type — families */
  --font-brand: 'Futura PT', 'Futura', 'Inter', sans-serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Type — weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type — sizes (px tier) */
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px;
  --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px;

  /* Type — tracking + leading */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.08em;
  --leading-tight:    1.1;
  --leading-snug:     1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;

  /* Spacing — 4px base */
  --space-0:  0;
  --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;
  --space-16: 64px;

  /* Radii */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 999px;

  /* Shadows — warm (rgba based on stone-900) */
  --shadow-1: 0 1px 2px 0 rgba(28,25,23,0.04);
  --shadow-2: 0 1px 3px 0 rgba(28,25,23,0.06), 0 1px 2px 0 rgba(28,25,23,0.04);
  --shadow-3: 0 4px 6px -1px rgba(28,25,23,0.08), 0 2px 4px -2px rgba(28,25,23,0.05);
  --shadow-4: 0 10px 15px -3px rgba(28,25,23,0.10), 0 4px 6px -4px rgba(28,25,23,0.06);
  --shadow-5: 0 20px 25px -5px rgba(28,25,23,0.12), 0 8px 10px -6px rgba(28,25,23,0.08);

  /* Motion — durations */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  220ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  /* Motion — easings */
  --ease-linear:      linear;
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);       /* default */
  --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1.3);     /* slight bounce on enter */
  --ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);       /* enter */
  --ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);       /* exit */

  /* Z layers */
  --z-base:     0;
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-tooltip:  3000;

  /* ============================================================
   * TIER 2 · SEMANTIC — Reference primitives, used by components
   * ============================================================ */

  /* Brand */
  --color-brand-primary:        var(--red-600);
  --color-brand-primary-hover:  var(--red-700);
  --color-brand-primary-active: var(--red-800);
  --color-brand-primary-bg:     var(--red-50);
  --color-brand-primary-line:   var(--red-100);

  /* Text */
  --color-text-primary:   var(--stone-900);
  --color-text-secondary: var(--stone-700);
  --color-text-tertiary:  var(--stone-500);
  --color-text-muted:     var(--stone-400);
  --color-text-inverted:  var(--stone-0);
  --color-text-brand:     var(--red-600);
  --color-text-danger:    var(--red-700);

  /* Backgrounds */
  --color-bg-base:     var(--stone-0);     /* cards, panels */
  --color-bg-subtle:   var(--stone-50);    /* secondary surfaces */
  --color-bg-muted:    var(--stone-100);   /* app bg, table headers */
  --color-bg-inverted: var(--stone-900);   /* navbar, hero */
  --color-bg-brand:    var(--red-600);

  /* Borders */
  --color-border-subtle:  var(--stone-200);
  --color-border-default: var(--stone-300);
  --color-border-strong:  var(--stone-400);
  --color-border-brand:   var(--red-600);

  /* Feedback */
  --color-feedback-success:      var(--green-700);
  --color-feedback-success-bg:   var(--green-50);
  --color-feedback-success-line: var(--green-100);
  --color-feedback-warning:      var(--amber-700);
  --color-feedback-warning-bg:   var(--amber-50);
  --color-feedback-warning-line: var(--amber-100);
  --color-feedback-danger:       var(--red-700);
  --color-feedback-danger-bg:    var(--red-50);
  --color-feedback-danger-line:  var(--red-100);
  --color-feedback-info:         var(--blue-700);
  --color-feedback-info-bg:      var(--blue-50);
  --color-feedback-info-line:    var(--blue-100);

  /* Status (Certificados / Facturas en SGI) */
  --color-status-pendiente-bg:  var(--amber-50);  --color-status-pendiente-fg:  var(--amber-700);
  --color-status-proceso-bg:    var(--violet-50); --color-status-proceso-fg:    var(--violet-700);
  --color-status-aprobado-bg:   var(--green-50);  --color-status-aprobado-fg:   var(--green-700);
  --color-status-facturado-bg:  var(--blue-50);   --color-status-facturado-fg:  var(--blue-700);
  --color-status-cobrado-bg:    var(--green-100); --color-status-cobrado-fg:    var(--green-800);
  --color-status-vencido-bg:    var(--red-50);    --color-status-vencido-fg:    var(--red-700);

  /* Component radii */
  --radius-control: var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-modal:   var(--radius-xl);
  --radius-pill:    var(--radius-full);

  /* Component shadows */
  --shadow-card:    var(--shadow-2);
  --shadow-popover: var(--shadow-4);
  --shadow-modal:   var(--shadow-5);
  --shadow-fab:     var(--shadow-4);

  /* Motion presets */
  --motion-interactive: var(--duration-fast) var(--ease-standard);
  --motion-enter:       var(--duration-normal) var(--ease-decelerate);
  --motion-exit:        var(--duration-fast) var(--ease-accelerate);
  --motion-emphasized:  var(--duration-slow) var(--ease-emphasized);

  /* Focus ring — accessibility */
  --focus-ring: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-brand-primary);
  --focus-ring-danger: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-feedback-danger);
}

/* ============================================================
 * DARK MODE — semantic tokens flip; primitives stay the same
 * Activate with [data-theme="dark"] on <html> or <body>
 * ============================================================ */
[data-theme="dark"] {
  --color-text-primary:   var(--stone-50);
  --color-text-secondary: var(--stone-200);
  --color-text-tertiary:  var(--stone-400);
  --color-text-muted:     var(--stone-500);
  --color-text-inverted:  var(--stone-900);

  --color-bg-base:     var(--stone-800);
  --color-bg-subtle:   var(--stone-900);
  --color-bg-muted:    var(--stone-950);
  --color-bg-inverted: var(--stone-50);

  --color-border-subtle:  var(--stone-700);
  --color-border-default: var(--stone-600);
  --color-border-strong:  var(--stone-500);

  --color-brand-primary-bg:   rgba(220, 38, 38, 0.12);
  --color-brand-primary-line: rgba(220, 38, 38, 0.25);

  --color-feedback-success-bg:   rgba(22, 101, 52, 0.18);
  --color-feedback-success-line: rgba(22, 101, 52, 0.30);
  --color-feedback-warning-bg:   rgba(180, 83, 9, 0.18);
  --color-feedback-warning-line: rgba(180, 83, 9, 0.30);
  --color-feedback-danger-bg:    rgba(220, 38, 38, 0.18);
  --color-feedback-danger-line:  rgba(220, 38, 38, 0.30);
  --color-feedback-info-bg:      rgba(37, 99, 235, 0.18);
  --color-feedback-info-line:    rgba(37, 99, 235, 0.30);

  --color-status-pendiente-bg: rgba(180, 83, 9, 0.15);  --color-status-pendiente-fg: var(--amber-100);
  --color-status-proceso-bg:   rgba(124, 58, 237, 0.15); --color-status-proceso-fg:  var(--violet-100);
  --color-status-aprobado-bg:  rgba(21, 128, 61, 0.15);  --color-status-aprobado-fg:  var(--green-100);
  --color-status-facturado-bg: rgba(29, 78, 216, 0.15);  --color-status-facturado-fg: var(--blue-100);
  --color-status-vencido-bg:   rgba(220, 38, 38, 0.15);  --color-status-vencido-fg:   var(--red-300);
  --color-status-cobrado-bg:   rgba(21, 128, 61, 0.15);  --color-status-cobrado-fg:   var(--green-100);

  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.30);
  --shadow-2: 0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px 0 rgba(0,0,0,0.30);
  --shadow-3: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.35);
  --shadow-4: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.35);
  --shadow-5: 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.40);

  --focus-ring: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--red-400);
}

/* Respect user system preference if no explicit theme is set */
/* Auto-apply dark mode when user's OS prefers dark and no explicit light theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-primary:   var(--stone-50);
    --color-text-secondary: var(--stone-200);
    --color-text-tertiary:  var(--stone-400);
    --color-text-muted:     var(--stone-500);
    --color-text-inverted:  var(--stone-900);

    --color-bg-base:     var(--stone-800);
    --color-bg-subtle:   var(--stone-900);
    --color-bg-muted:    var(--stone-950);
    --color-bg-inverted: var(--stone-50);

    --color-border-subtle:  var(--stone-700);
    --color-border-default: var(--stone-600);
    --color-border-strong:  var(--stone-500);

    --color-brand-primary-bg:   rgba(220, 38, 38, 0.12);
    --color-brand-primary-line: rgba(220, 38, 38, 0.25);

    --color-feedback-success-bg:   rgba(22, 101, 52, 0.18);
    --color-feedback-success-line: rgba(22, 101, 52, 0.30);
    --color-feedback-warning-bg:   rgba(180, 83, 9, 0.18);
    --color-feedback-warning-line: rgba(180, 83, 9, 0.30);
    --color-feedback-danger-bg:    rgba(220, 38, 38, 0.18);
    --color-feedback-danger-line:  rgba(220, 38, 38, 0.30);
    --color-feedback-info-bg:      rgba(37, 99, 235, 0.18);
    --color-feedback-info-line:    rgba(37, 99, 235, 0.30);

    --color-status-pendiente-bg: rgba(180, 83, 9, 0.15);  --color-status-pendiente-fg: var(--amber-100);
    --color-status-proceso-bg:   rgba(124, 58, 237, 0.15); --color-status-proceso-fg:  var(--violet-100);
    --color-status-aprobado-bg:  rgba(21, 128, 61, 0.15);  --color-status-aprobado-fg:  var(--green-100);
    --color-status-facturado-bg: rgba(29, 78, 216, 0.15);  --color-status-facturado-fg: var(--blue-100);
    --color-status-vencido-bg:   rgba(220, 38, 38, 0.15);  --color-status-vencido-fg:   var(--red-300);
    --color-status-cobrado-bg:   rgba(21, 128, 61, 0.15);  --color-status-cobrado-fg:   var(--green-100);

    --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.30);
    --shadow-2: 0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px 0 rgba(0,0,0,0.30);
    --shadow-3: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.35);
    --shadow-4: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.35);
    --shadow-5: 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.40);

    --focus-ring: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--red-400);
  }
}

/* ============================================================
 * BASE — html, body resets
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Material Icons — full reset for ligature activation */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: var(--fs-18);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.material-icons.size-12 { font-size: var(--fs-12); }
.material-icons.size-14 { font-size: var(--fs-14); }
.material-icons.size-16 { font-size: var(--fs-16); }
.material-icons.size-20 { font-size: var(--fs-20); }
.material-icons.size-24 { font-size: var(--fs-24); }

/* ============================================================
 * BRAND LOGO — composable component class
 * <span class="um-logo um-logo--md">ultimamilla<span>.</span>com<span>.</span>ar</span>
 * ============================================================ */
.um-logo {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  line-height: 1;
  white-space: nowrap;
}
.um-logo > span { color: var(--color-brand-primary); }
.um-logo--inverted { color: var(--color-text-inverted); }
.um-logo--xs { font-size: var(--fs-14); }
.um-logo--sm { font-size: var(--fs-18); }
.um-logo--md { font-size: var(--fs-24); }
.um-logo--lg { font-size: var(--fs-40); }
.um-logo--xl { font-size: var(--fs-56); }

/* ============================================================
 * UTILITIES — money, codes, status helpers
 * ============================================================ */
.u-mono     { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.u-tabular  { font-variant-numeric: tabular-nums; }
.u-uppercase{ text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-pretty   { text-wrap: pretty; }
.u-balance  { text-wrap: balance; }
.u-srOnly   { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
 * UMSA · Components — Button
 * Depends on: tokens/umsa.css
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--motion-interactive), border-color var(--motion-interactive), color var(--motion-interactive), box-shadow var(--motion-interactive);
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variants */
.btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverted);
}
.btn--primary:hover:not(:disabled) { background: var(--color-brand-primary-hover); }
.btn--primary:active:not(:disabled){ background: var(--color-brand-primary-active); }

.btn--secondary {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-bg-subtle); }

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.btn--ghost:hover:not(:disabled) { background: var(--color-bg-subtle); color: var(--color-text-primary); }

.btn--danger {
  background: var(--color-feedback-danger);
  color: var(--color-text-inverted);
}
.btn--danger:hover:not(:disabled) { background: var(--red-800); }

/* Sizes */
.btn--xs { padding: var(--space-1) var(--space-2); font-size: var(--fs-11); }
.btn--sm { padding: 6px var(--space-3); font-size: var(--fs-12); }
.btn--lg { padding: var(--space-3) var(--space-5); font-size: var(--fs-14); }

/* Icon-only */
.btn--icon { padding: var(--space-2); width: 36px; height: 36px; }
.btn--icon.btn--sm { width: 32px; height: 32px; padding: 6px; }

/* Focus state — universal */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Material Icons inside buttons */
.btn .material-icons { font-size: var(--fs-16); }
.btn--lg .material-icons { font-size: var(--fs-18); }
.btn--sm .material-icons { font-size: var(--fs-14); }

/* ============================================================
 * UMSA · Components — Badge & Status pill
 * ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.badge .material-icons { font-size: 11px; }

/* Neutral / default — for tags, counts */
.badge--neutral { background: var(--color-bg-muted); color: var(--color-text-secondary); }

/* Status — SGI domain */
.badge--pendiente { background: var(--color-status-pendiente-bg); color: var(--color-status-pendiente-fg); }
.badge--proceso   { background: var(--color-status-proceso-bg);   color: var(--color-status-proceso-fg); }
.badge--aprobado  { background: var(--color-status-aprobado-bg);  color: var(--color-status-aprobado-fg); }
.badge--facturado { background: var(--color-status-facturado-bg); color: var(--color-status-facturado-fg); }
.badge--cobrado   { background: var(--color-status-cobrado-bg);   color: var(--color-status-cobrado-fg); }
.badge--vencido   { background: var(--color-status-vencido-bg);   color: var(--color-status-vencido-fg); }

/* Feedback */
.badge--success { background: var(--color-feedback-success-bg); color: var(--color-feedback-success); }
.badge--warning { background: var(--color-feedback-warning-bg); color: var(--color-feedback-warning); }
.badge--danger  { background: var(--color-feedback-danger-bg);  color: var(--color-feedback-danger); }
.badge--info    { background: var(--color-feedback-info-bg);    color: var(--color-feedback-info); }
.badge--brand   { background: var(--color-brand-primary-bg);    color: var(--color-brand-primary); }

/* Solid variants — when contrast against page bg matters more */
.badge--solid-brand   { background: var(--color-brand-primary); color: var(--color-text-inverted); }
.badge--solid-success { background: var(--color-feedback-success); color: var(--color-text-inverted); }
.badge--solid-danger  { background: var(--color-feedback-danger);  color: var(--color-text-inverted); }

/* Sizes */
.badge--lg { padding: 4px 10px; font-size: var(--fs-11); }
.badge--lg .material-icons { font-size: 13px; }

/* ============================================================
 * UMSA · Components — Form fields (input, select, textarea, checkbox, switch)
 * ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.field__hint {
  font-size: var(--fs-12);
  color: var(--color-text-tertiary);
}
.field__error {
  font-size: var(--fs-12);
  color: var(--color-feedback-danger);
  display: flex;
  align-items: center;
  gap: 4px;
}
.field--required .field__label::after {
  content: ' *';
  color: var(--color-feedback-danger);
}

/* ===== Input / Select / Textarea ===== */
.input,
.select,
.textarea {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  line-height: 1.4;
  transition: border-color var(--motion-interactive), box-shadow var(--motion-interactive);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-text-muted); }

.input:hover:not(:disabled),
.select:hover:not(:disabled),
.textarea:hover:not(:disabled) { border-color: var(--color-border-strong); }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px var(--color-brand-primary-bg);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.input--error,
.select--error,
.textarea--error { border-color: var(--color-feedback-danger); }
.input--error:focus-visible,
.select--error:focus-visible,
.textarea--error:focus-visible { box-shadow: 0 0 0 3px var(--color-feedback-danger-bg); }

.input--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.input--sm { padding: 6px 10px; font-size: var(--fs-13); }
.input--lg { padding: 12px 14px; font-size: var(--fs-16); }

.textarea { min-height: 96px; resize: vertical; }

/* ===== Input group (icon prefix/suffix) ===== */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group .input { padding-left: 36px; }
.input-group__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
}
.input-group--suffix .input { padding-left: 12px; padding-right: 36px; }
.input-group--suffix .input-group__icon { left: auto; right: 10px; }

/* ===== Checkbox ===== */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--color-text-primary);
}
.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-base);
  cursor: pointer;
  position: relative;
  transition: background var(--motion-interactive), border-color var(--motion-interactive);
  flex-shrink: 0;
}
.checkbox input[type="checkbox"]:checked {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}
.checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px;
  width: 4px; height: 8px;
  border: solid var(--color-text-inverted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-primary-bg);
}

/* ===== Switch ===== */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
  position: relative;
  cursor: pointer;
  transition: background var(--motion-interactive);
  flex-shrink: 0;
}
.switch input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-text-inverted);
  border-radius: var(--radius-full);
  top: 2px; left: 2px;
  transition: transform var(--motion-interactive);
  box-shadow: var(--shadow-1);
}
.switch input[type="checkbox"]:checked { background: var(--color-brand-primary); }
.switch input[type="checkbox"]:checked::before { transform: translateX(14px); }
.switch input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-primary-bg);
}

/* ============================================================
 * UMSA · Components — Card & Panel
 * ============================================================ */

.card,
.panel {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* Panel — used for dashboard/data containers (full width by default) */
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.panel__title {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}
.panel__sub {
  font-size: var(--fs-12);
  color: var(--color-text-tertiary);
}
.panel__actions { margin-left: auto; display: flex; gap: var(--space-2); }
.panel__body { padding: var(--space-5); }
.panel__body--flush { padding: 0; }

/* Card — used for content cells (flexible) */
.card--interactive {
  cursor: pointer;
  transition: transform var(--motion-interactive), box-shadow var(--motion-interactive), border-color var(--motion-interactive);
}
.card--interactive:hover {
  border-color: var(--color-border-default);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.card--elevated { box-shadow: var(--shadow-card); border-color: transparent; }

/* KPI card — semantic shorthand for stats blocks */
.kpi {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.kpi__label {
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}
.kpi__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  line-height: 1;
}
.kpi__delta {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi__delta--up   { color: var(--color-feedback-success); }
.kpi__delta--down { color: var(--color-feedback-danger); }
.kpi__delta--flat { color: var(--color-text-tertiary); }

/* ============================================================
 * UMSA · Components — Data table
 * ============================================================ */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
}

.tbl thead th {
  text-align: left;
  padding: 10px var(--space-4);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tbl tbody td {
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  color: var(--color-text-primary);
}

.tbl tbody tr {
  transition: background var(--motion-interactive);
}
.tbl tbody tr:hover td { background: var(--color-bg-subtle); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* Cell variants */
.tbl td.tbl__mono,
.tbl th.tbl__mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-12);
}
.tbl td.tbl__num,
.tbl th.tbl__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: var(--fw-semibold);
}
.tbl td.tbl__strong { font-weight: var(--fw-semibold); }
.tbl td.tbl__muted  { color: var(--color-text-tertiary); }

/* Density variants */
.tbl--compact tbody td,
.tbl--compact thead th { padding: 8px var(--space-3); }

.tbl--comfortable tbody td,
.tbl--comfortable thead th { padding: 16px var(--space-5); }

/* Selection column */
.tbl__selection { width: 32px; }

/* Row state */
.tbl tbody tr.is-selected td { background: var(--color-brand-primary-bg); }
.tbl tbody tr.is-warning td  { background: var(--color-feedback-warning-bg); }
.tbl tbody tr.is-danger td   { background: var(--color-feedback-danger-bg); }

/* Empty state */
.tbl__empty {
  padding: var(--space-12) var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--fs-13);
}
.tbl__empty .material-icons {
  font-size: 32px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* Pagination row at the bottom of a table */
.tbl-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-subtle);
}
.tbl-pagination__info {
  font-size: var(--fs-12);
  color: var(--color-text-tertiary);
}
.tbl-pagination__pages {
  display: flex;
  gap: var(--space-1);
}

/* ============================================================
 * UMSA Pagination Component
 *
 * BEM: .pgn
 * Usage: {{> pagination-umsa pagination=pagination baseUrl=url}}
 * ============================================================ */

.pgn {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pgn__item {
  display: flex;
}

.pgn__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.pgn__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.pgn__btn:active {
  background: var(--color-bg-active);
}

/* Active / current page */
.pgn__btn--active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverted);
  font-weight: var(--fw-semibold);
  cursor: default;
  pointer-events: none;
}

.pgn__btn--active:hover {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverted);
}

/* Disabled state */
.pgn__btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Nav buttons (prev/next, first/last) */
.pgn__btn--nav {
  padding: 0 10px;
}

.pgn__btn--nav .material-icons {
  font-size: var(--fs-16);
  line-height: 1;
}

/* Ellipsis between page numbers */
.pgn__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 32px;
  color: var(--color-text-tertiary);
  font-size: var(--fs-13);
  letter-spacing: 1px;
}

/* Info text (page X of Y) */
.pgn__info {
  font-size: var(--fs-12);
  color: var(--color-text-tertiary);
  margin-right: var(--space-3);
  white-space: nowrap;
}

/* Wrapper for the whole pagination bar */
.pgn-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.pgn-wrapper__start {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pgn-wrapper__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Page size selector */
.pgn__size-select {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 4px 24px 4px 8px;
  cursor: pointer;
  appearance: auto;
}

/* Dark mode */
[data-theme="dark"] .pgn__btn {
  background: var(--color-bg-base);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

[data-theme="dark"] .pgn__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

[data-theme="dark"] .pgn__btn--active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverted);
}

/* ============================================================
 * UMSA · Components — App navbar (desktop)
 *
 *  <nav class="navbar">
 *    <div class="navbar__brand">
 *      <span class="um-logo um-logo--sm um-logo--inverted">…</span>
 *      <span class="navbar__tag">SGI</span>
 *    </div>
 *    <div class="navbar__nav">
 *      <a class="navbar__link is-active">…</a>
 *    </div>
 *    <div class="navbar__right">…</div>
 *  </nav>
 * ============================================================ */

.navbar {
  height: 56px;
  background: var(--color-bg-inverted);
  color: var(--color-text-inverted);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-6);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.10);
  height: 100%;
}
.navbar__tag {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  color: rgba(255,255,255,0.45);
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

.navbar__nav {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 100%;
}
.navbar__link {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.7);
  padding: 0 var(--space-3);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color var(--motion-interactive), border-color var(--motion-interactive);
}
.navbar__link:hover { color: var(--color-text-inverted); }
.navbar__link.is-active {
  color: var(--color-text-inverted);
  border-bottom-color: var(--color-brand-primary);
}
.navbar__link .material-icons { font-size: 14px; }

.navbar__right {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.navbar__search {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 6px 10px;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 240px;
  color: rgba(255,255,255,0.5);
  font-size: var(--fs-12);
  cursor: text;
}
.navbar__search:hover { background: rgba(255,255,255,0.10); }
.navbar__search .material-icons { font-size: 14px; }

.navbar__icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background var(--motion-interactive), color var(--motion-interactive);
}
.navbar__icon-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--color-text-inverted);
}

.navbar__avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

/* ============================================================
 * Bottom navigation (mobile)
 * ============================================================ */
.bottom-nav {
  display: flex;
  height: 60px;
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-subtle);
  padding-bottom: 4px;
}
.bottom-nav__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  position: relative;
  padding-top: 4px;
  transition: color var(--motion-interactive);
}
.bottom-nav__tab .material-icons { font-size: 20px; }
.bottom-nav__tab.is-active {
  color: var(--color-brand-primary);
}
.bottom-nav__tab.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--color-brand-primary);
  width: 28px;
  border-radius: 0 0 2px 2px;
}

/* ============================================================
 * UMSA · Components — Misc utility components
 *   - progress bar
 *   - avatar
 *   - dot (legend marker)
 *   - filter pill
 *   - FAB (floating action button)
 *   - divider with eyebrow
 *   - empty state
 * ============================================================ */

/* ===== Progress ===== */
.progress {
  height: 6px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--color-brand-primary);
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-decelerate);
}
.progress--success .progress__bar { background: var(--color-feedback-success); }
.progress--warning .progress__bar { background: var(--color-feedback-warning); }
.progress--danger  .progress__bar { background: var(--color-feedback-danger); }
.progress--sm { height: 4px; }
.progress--lg { height: 10px; }

/* ===== Avatar ===== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-text-secondary);
  color: var(--color-text-inverted);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.avatar--xs { width: 24px; height: 24px; font-size: var(--fs-10); }
.avatar--sm { width: 30px; height: 30px; font-size: var(--fs-11); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--fs-16); }
.avatar--xl { width: 80px; height: 80px; font-size: 28px; border-radius: var(--radius-xl); }
.avatar--brand   { background: var(--color-brand-primary); }
.avatar--info    { background: var(--color-feedback-info); }
.avatar--success { background: var(--color-feedback-success); }
.avatar--violet  { background: var(--violet-600); }

/* ===== Dot (legend marker) ===== */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.dot--brand   { background: var(--color-brand-primary); }
.dot--success { background: var(--color-feedback-success); }
.dot--warning { background: var(--color-feedback-warning); }
.dot--danger  { background: var(--color-feedback-danger); }
.dot--info    { background: var(--color-feedback-info); }

/* ===== Filter pill ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-base);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-subtle);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-interactive), color var(--motion-interactive), border-color var(--motion-interactive);
}
.pill:hover { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.pill.is-active {
  background: var(--color-bg-inverted);
  color: var(--color-text-inverted);
  border-color: var(--color-bg-inverted);
}
.pill .material-icons { font-size: 12px; }

/* ===== Floating Action Button ===== */
.fab {
  position: absolute;
  right: 16px;
  bottom: 76px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverted);
  box-shadow: var(--shadow-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--motion-interactive), box-shadow var(--motion-interactive), background var(--motion-interactive);
  z-index: var(--z-dropdown);
}
.fab:hover { background: var(--color-brand-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-popover); }
.fab:active { transform: translateY(0); }
.fab .material-icons { font-size: 24px; }

/* ===== Section eyebrow ===== */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.eyebrow--brand { color: var(--color-brand-primary); }

/* ===== Divider ===== */
.divider {
  height: 1px;
  background: var(--color-border-subtle);
  border: 0;
  margin: var(--space-6) 0;
}

/* ===== Empty state ===== */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--color-text-tertiary);
}
.empty-state__icon {
  font-size: 48px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.empty-state__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.empty-state__hint {
  font-size: var(--fs-13);
  max-width: 360px;
  margin: 0 auto var(--space-4);
}
.empty-state__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
 * UMSA · Patterns — Composite layouts
 *
 * Patterns combine multiple components into reusable arrangements
 * that recur across screens. Use them as starting points; override
 * spacing/colors via tokens, not hard-coded values.
 * ============================================================ */

/* ============================================================
 * PAGE-HEAD — Breadcrumbs + title + action row
 *
 *  <header class="page-head">
 *    <nav class="page-head__crumbs">SGI <span class="page-head__sep">›</span> Facturas</nav>
 *    <div class="page-head__row">
 *      <h1 class="page-head__title">Facturas emitidas</h1>
 *      <div class="page-head__actions">…</div>
 *    </div>
 *  </header>
 * ============================================================ */
.page-head {
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 18px var(--space-8);
}
.page-head__crumbs {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 6px;
}
.page-head__sep { color: var(--color-text-muted); margin: 0 6px; }
.page-head__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.page-head__main {
  min-width: 0;
}
.page-head__title {
  font-family: var(--font-sans);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.page-head__subtitle {
  color: var(--color-text-tertiary);
  font-size: var(--fs-12);
  margin-top: 4px;
}
.page-head__actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
 * STATS-BAR — Dense KPI strip across page width
 *
 *  <div class="stats-bar">
 *    <div class="stats-bar__item">
 *      <div class="stats-bar__label">Total emitido</div>
 *      <div class="stats-bar__value">$ 12.456.890</div>
 *      <div class="stats-bar__delta is-up">↑ 24.3%</div>
 *    </div>
 *    …
 *  </div>
 * ============================================================ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-subtle);
}
.stats-bar--3 { grid-template-columns: repeat(3, 1fr); }
.stats-bar--4 { grid-template-columns: repeat(4, 1fr); }
.stats-bar--6 { grid-template-columns: repeat(6, 1fr); }
.stats-bar__item {
  padding: 16px var(--space-6);
  border-right: 1px solid var(--color-border-subtle);
}
.stats-bar__item:last-child { border-right: 0; }
.stats-bar__label {
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}
.stats-bar__value {
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stats-bar__delta {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--color-text-tertiary);
}
.stats-bar__delta.is-up   { color: var(--color-feedback-success); }
.stats-bar__delta.is-down { color: var(--color-feedback-danger); }
.stats-bar__value.is-brand { color: var(--color-brand-primary); }
.stats-bar__value.is-success { color: var(--color-feedback-success); }
.stats-bar__value.is-warning { color: var(--color-feedback-warning); }
.stats-bar__value.is-danger { color: var(--color-feedback-danger); }
.stats-bar__value.is-info { color: var(--color-feedback-info); }

/* ============================================================
 * FILTERS-BAR — Pills + search row above tables/lists
 *
 *  <div class="filters-bar">
 *    <button class="pill is-active">Todas · 487</button>
 *    <button class="pill">Cobradas · 312</button>
 *    <div class="filters-bar__search input-group">
 *      <span class="material-icons input-group__icon">search</span>
 *      <input class="input input--sm" placeholder="Número, cliente…" />
 *    </div>
 *  </div>
 * ============================================================ */
.filters-bar {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: 14px var(--space-8);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}
.filters-bar__search {
  flex: 1;
  max-width: 360px;
  margin-left: auto;
}
.filters-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}
.filter-card__head {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.filter-card__label {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}
.filter-card {
  margin-bottom: var(--space-3);
}

.empty-state__actions {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
 * UMSA · App composition helpers
 * Shared by migrated SGI detail, form and report screens.
 * ============================================================ */
.umsa-content {
  padding: var(--space-5) var(--space-8) var(--space-8);
}
.umsa-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.umsa-grid {
  display: grid;
  gap: var(--space-4);
}
.umsa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.umsa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.umsa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.umsa-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.umsa-field-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.umsa-panel-title {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin: 0;
}
.umsa-panel-title .material-icons { font-size: 18px; }
.umsa-panel-subtitle {
  color: var(--color-text-tertiary);
  font-size: var(--fs-12);
  margin-top: 2px;
}
.umsa-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.umsa-info-row {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}
.umsa-info-row__label {
  color: var(--color-text-tertiary);
  font-size: var(--fs-12);
}
.umsa-info-row__value {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  text-align: right;
}
.umsa-entity {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  min-width: 0;
}
.umsa-entity__main { min-width: 0; }
.umsa-entity__title {
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
}
.umsa-entity__meta {
  color: var(--color-text-tertiary);
  font-size: var(--fs-12);
}
.umsa-action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.umsa-action-row--between { justify-content: space-between; }
.umsa-action-grid {
  display: grid;
  gap: var(--space-2);
}
.umsa-table-scroll {
  overflow-x: auto;
}
.umsa-click-row {
  cursor: pointer;
}
.umsa-progress-inline {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}
.umsa-progress-inline .progress {
  flex: 0 0 96px;
  height: 6px;
}
.umsa-reception-row {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) minmax(120px, .35fr) minmax(160px, .45fr);
  margin-bottom: var(--space-2);
}
.umsa-print-only {
  display: none;
}
.umsa-chart {
  min-height: 260px;
  position: relative;
}
.umsa-chart--short { min-height: 180px; }
.umsa-chart canvas {
  max-height: 320px;
}
.umsa-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.umsa-list__item {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-2) 0;
}
.umsa-list__item + .umsa-list__item {
  border-top: 1px solid var(--color-border-subtle);
}
.umsa-related-list {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
}
.umsa-related-item {
  align-items: center;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
}
.umsa-related-item:first-child {
  border-top: 0;
}
.umsa-related-item:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  text-decoration: none;
}
.umsa-related-item__title {
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.umsa-related-item__meta {
  color: var(--color-text-tertiary);
  font-size: var(--fs-12);
  line-height: 1.4;
  margin-top: 2px;
}
.umsa-related-item__tag {
  justify-self: end;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.umsa-detail-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
}
.umsa-detail-grid--sidebar {
  grid-template-columns: minmax(0, 2fr) minmax(320px, .8fr);
}
.umsa-long-text {
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 82ch;
}
.umsa-description-cell {
  min-width: 320px;
  white-space: normal;
}
.umsa-description-cell .tbl__strong,
.umsa-description-cell .tbl__muted {
  display: block;
  max-width: 52ch;
  white-space: normal;
}
.umsa-table-scroll .tbl {
  min-width: 760px;
}
.umsa-muted {
  color: var(--color-text-tertiary);
}
.umsa-center {
  text-align: center;
}
.umsa-success-line {
  align-items: center;
  color: var(--color-feedback-success);
  display: flex;
  font-size: var(--fs-12);
  gap: var(--space-1);
}
.umsa-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.is-hidden {
  display: none !important;
}
.umsa-suggestions {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  display: none;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-popover);
}
.umsa-suggestion-button {
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  cursor: pointer;
  display: block;
  padding: var(--space-2);
  text-align: left;
  width: 100%;
}
.umsa-suggestion-button:hover {
  background: var(--color-bg-subtle);
}
.umsa-field-anchor {
  position: relative;
}
.umsa-scroll-box {
  max-height: 400px;
  overflow: auto;
}
.modal-header--center,
.modal-footer--center {
  justify-content: center;
  text-align: center;
}
.umsa-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.umsa-timeline__item {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 18px 1fr;
}
.umsa-timeline__marker {
  background: var(--color-brand-primary);
  border: 2px solid var(--color-bg-base);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--color-border-default);
  height: 12px;
  margin-top: 3px;
  width: 12px;
}
.umsa-timeline__marker--success {
  background: var(--color-feedback-success);
}
.umsa-timeline__marker--brand {
  background: var(--color-brand-primary);
}
.umsa-timeline__title {
  color: var(--color-text-primary);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
}
.umsa-timeline__description {
  color: var(--color-text-tertiary);
  font-size: var(--fs-12);
}
.hero__sep {
  color: rgba(255,255,255,0.35);
  margin: 0 var(--space-1);
}
.hero__link {
  color: rgba(255,255,255,0.75);
}
.hero__description {
  color: var(--color-text-inverted);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1.35;
}
.umsa-cert-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  cursor: pointer;
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  transition: border-color var(--motion-interactive), background var(--motion-interactive);
}
.umsa-cert-item:hover {
  border-color: var(--color-brand-primary);
}
.umsa-cert-item.is-selected {
  background: var(--color-brand-primary-bg);
  border-color: var(--color-brand-primary);
}
.umsa-cert-item__row {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}
.umsa-cert-item__amount {
  color: var(--color-feedback-success);
  font-weight: var(--fw-bold);
  text-align: right;
}
.progress--metric {
  height: 20px;
}
.progress--metric .progress__bar {
  align-items: center;
  color: var(--color-text-inverted);
  display: flex;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  justify-content: center;
  min-width: 32px;
}
.progress--brand .progress__bar { background: var(--color-brand-primary); }
.segmented {
  align-items: center;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}
.segmented__input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.segmented__label {
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  padding: 5px 10px;
}
.segmented__input:checked + .segmented__label {
  background: var(--color-bg-base);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .stats-bar,
  .stats-bar--3,
  .stats-bar--4,
  .stats-bar--6 {
    grid-template-columns: 1fr;
  }
  .stats-bar__item {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .stats-bar__item:last-child {
    border-bottom: 0;
  }
  .page-head {
    padding: var(--space-4);
  }
  .page-head__row {
    align-items: flex-start;
    flex-direction: column;
  }
  .page-head__actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .page-head__actions .btn {
    width: 100%;
  }
  .filters-bar {
    padding: var(--space-4);
  }
  .filters-bar__search {
    max-width: none;
    width: 100%;
    margin-left: 0;
  }
  .filters-bar__actions {
    margin-left: 0;
    width: 100%;
  }
  .filters-bar__actions .btn {
    flex: 1;
  }
  .umsa-content {
    padding: var(--space-4);
  }
  .umsa-grid,
  .umsa-grid--2,
  .umsa-grid--3,
  .umsa-grid--4,
  .umsa-grid--sidebar,
  .umsa-field-grid {
    grid-template-columns: 1fr;
  }
  .umsa-info-row {
    align-items: flex-start;
  }
  .umsa-reception-row {
    grid-template-columns: 1fr;
  }
}

@media print {
  .umsa-print-hidden {
    display: none !important;
  }
  .umsa-print-only {
    display: block;
  }
}

/* ============================================================
 * HERO — Dark "client/project" hero
 * Renders detail-page intro with avatar + title + meta + actions
 *
 *  <section class="hero">
 *    <div class="hero__crumb">Clientes › Constructora Sur</div>
 *    <div class="hero__row">
 *      <div class="avatar avatar--xl avatar--brand">CS</div>
 *      <div class="hero__main">
 *        <h1 class="hero__title">Constructora Sur S.A.</h1>
 *        <div class="hero__meta">
 *          <span><span class="material-icons">badge</span>CUIT 30-...</span>
 *        </div>
 *      </div>
 *      <div class="hero__actions">…</div>
 *    </div>
 *    <div class="hero__kpis">…</div>
 *  </section>
 * ============================================================ */
.hero {
  padding: var(--space-8);
  color: var(--color-text-inverted);
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.4)),
    radial-gradient(circle at 80% 0%, rgba(220,38,38,0.18), transparent 50%),
    var(--color-bg-inverted);
}
.hero__crumb {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-3);
}
.hero__row { display: flex; gap: var(--space-6); align-items: flex-start; }
.hero__main { flex: 1; }
.hero__title {
  font-family: var(--font-sans);
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-inverted);
  margin: 0;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: var(--space-2);
  font-size: var(--fs-13);
  color: rgba(255,255,255,0.6);
}
.hero__meta .material-icons {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  margin-right: 4px;
}
.hero__actions { margin-left: auto; display: flex; gap: var(--space-2); }
.hero__actions .btn--secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--color-text-inverted);
}
.hero__actions .btn--secondary:hover { background: rgba(255,255,255,0.14); }

.hero__kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.hero__kpi {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: 14px var(--space-4);
}
.hero__kpi .stats-bar__label { color: rgba(255,255,255,0.5); }
.hero__kpi .stats-bar__value { color: var(--color-text-inverted); font-size: var(--fs-22); }
.hero__kpi .stats-bar__delta { color: rgba(255,255,255,0.6); }

/* ============================================================
 * TABS — Underline pattern on white surface
 *
 *  <nav class="tabs">
 *    <a class="tabs__tab is-active">Resumen</a>
 *    <a class="tabs__tab">Proyectos <span class="tabs__count">12</span></a>
 *  </nav>
 * ============================================================ */
.tabs {
  background: var(--color-bg-base);
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  gap: 0;
  overflow-x: auto;
}
.tabs__tab {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--color-text-tertiary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-interactive), border-color var(--motion-interactive);
}
.tabs__tab:hover { color: var(--color-text-primary); }
.tabs__tab.is-active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-brand-primary);
}
.tabs__count {
  background: var(--color-bg-muted);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: var(--fs-10);
  margin-left: 4px;
  color: var(--color-text-tertiary);
}

/* SGI runtime guards: clientes list/detail must not fall back to mobile/sidebars on desktop. */
.u-hidden {
  display: none !important;
}

.u-show-md-block {
  display: none !important;
}

@media (min-width: 768px) {
  .u-hide-md,
  .clients-mobile-list {
    display: none !important;
  }

  .u-show-md-block {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .u-show-md-block {
    display: none !important;
  }
}

.cliente-detalle-content .cliente-detalle-grid {
  display: grid;
  grid-template-columns: 1fr !important;
}

.cliente-detalle-content .cliente-detalle-grid > aside,
.cliente-detalle-content .cliente-detalle-grid > .panel {
  min-width: 0;
  width: 100%;
}

.cliente-detalle-content .panel > .tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  overflow: visible;
  padding: 0;
}

.cliente-detalle-content .panel > .tabs .tabs__tab {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
  justify-content: center;
  min-width: 0;
  padding: var(--space-4);
  white-space: normal;
}

.cliente-detalle-content .panel__body > .tab-pane {
  min-width: 0;
  overflow-x: auto;
}

/* ============================================================
 * UMSA · Extras — Motion system
 * Reusable keyframes + utility classes
 *
 * For one-off transitions inside components, prefer the token vars:
 *   transition: opacity var(--motion-interactive);
 *
 * For named animations (page enter, toast, modal), use these.
 * ============================================================ */

/* ===== Keyframes ===== */
@keyframes umsa-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes umsa-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes umsa-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes umsa-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes umsa-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes umsa-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes umsa-shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes umsa-spin {
  to { transform: rotate(360deg); }
}

/* ===== Utility classes ===== */
.animate-fade-in   { animation: umsa-fade-in var(--motion-enter); }
.animate-slide-up  { animation: umsa-slide-up var(--motion-enter); }
.animate-slide-down{ animation: umsa-slide-down var(--motion-enter); }
.animate-scale-in  { animation: umsa-scale-in var(--motion-enter); }
.animate-pulse     { animation: umsa-pulse 2s var(--ease-standard) infinite; }
.animate-spin      { animation: umsa-spin var(--duration-slower) linear infinite; }

/* Stagger helper — applies progressive delays to siblings */
.stagger > * { animation: umsa-slide-up var(--motion-enter) backwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms;   }
.stagger > *:nth-child(2) { animation-delay: 60ms;  }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }

/* Skeleton loader — uses --color-bg-muted as base */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-muted) 0%,
    var(--color-bg-subtle) 50%,
    var(--color-bg-muted) 100%);
  background-size: 1000px 100%;
  animation: umsa-shimmer 1.6s linear infinite;
  border-radius: var(--radius-sm);
}

/* Reduced motion — global override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * UMSA · Extras — Focus & Accessibility
 *
 * Keyboard navigation visibility, skip-links, and
 * accessibility helpers.
 * ============================================================ */

/* ===== Universal focus ring ===== */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* When focus lands on an element with explicit focus, the component CSS
 * provides it (button.css, input.css, etc). This is the catch-all. */

/* ===== Skip link ===== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--color-bg-inverted);
  color: var(--color-text-inverted);
  padding: 8px 14px;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  z-index: var(--z-toast);
  transition: top var(--motion-interactive);
}
.skip-link:focus { top: 8px; }

/* ===== Visually hidden, available to screen readers ===== */
.visually-hidden,
.u-srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== Hover-but-not-focus de-emphasis ===== */
@media (hover: hover) {
  /* Provide hover-only states on devices that actually have hover */
}

/* ===== High-contrast mode adjustments ===== */
@media (forced-colors: active) {
  .btn,
  .input,
  .select,
  .textarea {
    border: 1px solid CanvasText;
  }
  .btn--primary { background: Highlight; color: HighlightText; }
}

/* ============================================================
 * VERIFIED CONTRAST PAIRS (WCAG AA-AAA)
 * For reference — check tokens.json $contrast section for full data.
 *
 *   text-primary    on bg-base       → 16.7 : 1   AAA ✓
 *   text-secondary  on bg-base       → 10.1 : 1   AAA ✓
 *   text-tertiary   on bg-base       →  5.5 : 1   AA  ✓ (≥14px or bold ≥12px)
 *   text-muted      on bg-base       →  3.4 : 1   DECORATIVE (borders only)
 *   bg-brand        on text-inverted →  5.9 : 1   AA  ✓
 *   bg-inverted     on text-inverted → 17.3 : 1   AAA ✓
 *   feedback-danger on bg-base       →  5.7 : 1   AA  ✓
 *   feedback-success on bg-base      →  4.9 : 1   AA  ✓ (≥18px or bold ≥14px)
 *
 * REMINDERS
 *  · Never use text-muted (--stone-400) for body copy. Borders only.
 *  · Status badges combine bg + fg from same family — safe by design.
 *  · Disabled text uses opacity, not color shifts (inherits page contrast).
 * ============================================================ */

/* ============================================================
 * UMSA · Extras — Print stylesheet
 *
 * For certificados, facturas, reportes exported to PDF/printer.
 * Optimizes for monochrome A4 with corporate header.
 *
 * Usage: <link rel="stylesheet" href="umsa-design-system/extras/print.css" media="print">
 * Or import in main bundle (it scopes itself to @media print).
 * ============================================================ */

@media print {
  /* ===== Page setup ===== */
  @page {
    size: A4;
    margin: 18mm 16mm 20mm 16mm;
  }
  @page :first { margin-top: 14mm; }

  /* ===== Reset ===== */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  html, body {
    background: var(--stone-0);
    color: var(--stone-900);
    font-family: var(--font-sans);
    font-size: 10pt;
    line-height: 1.4;
  }

  /* ===== Hide UI chrome ===== */
  .navbar, .bottom-nav, .filters-bar,
  .fab, .switcher, .btn, .panel__actions, .page-head__actions,
  .no-print { display: none !important; }

  /* ===== Print header — corporate band ===== */
  .print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 8mm;
    border-bottom: 2px solid var(--red-600);
    margin-bottom: 8mm;
  }
  .print-header__brand {
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 18pt;
    letter-spacing: -0.02em;
    color: var(--stone-900);
  }
  .print-header__brand span { color: var(--red-600); }
  .print-header__meta {
    text-align: right;
    font-size: 9pt;
    color: var(--stone-700);
    line-height: 1.4;
  }

  /* ===== Document title ===== */
  .print-title {
    font-size: 22pt;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 4mm 0 6mm;
    color: var(--stone-900);
  }
  .print-subtitle {
    font-size: 11pt;
    color: var(--stone-700);
    margin-bottom: 8mm;
  }

  /* ===== Document number / status row ===== */
  .print-doc-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4mm;
    padding: 5mm;
    background: var(--stone-50);
    border: 0.4mm solid var(--stone-300);
    border-radius: 1mm;
    margin-bottom: 8mm;
  }
  .print-doc-row__label {
    font-size: 7.5pt;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--stone-600);
    margin-bottom: 1mm;
  }
  .print-doc-row__value {
    font-family: var(--font-mono);
    font-size: 11pt;
    font-weight: 700;
    color: var(--stone-900);
  }

  /* ===== Tables ===== */
  table.tbl, table.print-table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
    margin-bottom: 6mm;
  }
  table.tbl thead th, table.print-table thead th {
    background: var(--stone-100);
    border-bottom: 0.4mm solid var(--stone-700);
    padding: 2mm 3mm;
    font-size: 8pt;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--stone-700);
  }
  table.tbl tbody td, table.print-table tbody td {
    padding: 2mm 3mm;
    border-bottom: 0.2mm solid var(--stone-200);
    font-size: 9.5pt;
  }
  table.tbl tbody tr, table.print-table tbody tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  /* ===== Print badges (no color in print, use border + uppercase) ===== */
  .badge {
    border: 0.3mm solid currentColor !important;
    background: transparent !important;
    color: var(--stone-900) !important;
    padding: 1mm 2mm;
    font-size: 7.5pt;
  }

  /* ===== Totals box ===== */
  .print-totals {
    margin-top: 4mm;
    padding: 4mm 5mm;
    border-top: 0.4mm solid var(--stone-700);
    background: var(--stone-50);
  }
  .print-totals__row {
    display: flex;
    justify-content: space-between;
    padding: 1.5mm 0;
    font-size: 10pt;
  }
  .print-totals__row--final {
    border-top: 0.3mm solid var(--stone-300);
    margin-top: 1mm;
    padding-top: 3mm;
    font-size: 13pt;
    font-weight: 700;
  }
  .print-totals__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  /* ===== Footer — runs on every page ===== */
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3mm 0;
    border-top: 0.2mm solid var(--stone-300);
    font-size: 7pt;
    color: var(--stone-500);
    display: flex !important;
    justify-content: space-between;
  }

  /* ===== Page-break helpers ===== */
  .page-break-before { page-break-before: always; }
  .page-break-after  { page-break-after: always; }
  .avoid-break       { page-break-inside: avoid; }

  /* ===== Force black ink for body text ===== */
  h1, h2, h3, h4, p, td, th, span { color: var(--stone-900); }
}

/* Print-only elements should be hidden on screen */
@media screen {
  .print-only,
  .print-header,
  .print-footer { display: none; }
}