:root {
  /* Colors */
  --surface: #0a1324;
  --surface-dim: #0a1324;
  --surface-bright: #30394c;
  --surface-container-lowest: #050e1f;
  --surface-container-low: #131c2d;
  --surface-container: #172031;
  --surface-container-high: #212a3c;
  --surface-container-highest: #2c3547;
  --on-surface: #dae2fa;
  --on-surface-variant: #c3c6d6;
  --inverse-surface: #dae2fa;
  --inverse-on-surface: #283042;
  --outline: #8d909f;
  --outline-variant: #434653;
  --primary: #b2c5ff;
  --on-primary: #002c72;
  --primary-container: #5b8cff;
  --on-primary-container: #002665;
  --inverse-primary: #1857c8;
  --secondary: #a3cdde;
  --on-secondary: #013543;
  --secondary-container: #234e5c;
  --on-secondary-container: #95bfcf;
  --tertiary: #efbf66;
  --on-tertiary: #412d00;
  --tertiary-container: #b48a36;
  --on-tertiary-container: #392700;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --primary-fixed: #dae2ff;
  --primary-fixed-dim: #b2c5ff;
  --on-primary-fixed: #001847;
  --on-primary-fixed-variant: #0040a0;
  --secondary-fixed: #bee9fa;
  --secondary-fixed-dim: #a3cdde;
  --on-secondary-fixed: #001f28;
  --on-secondary-fixed-variant: #214c5a;
  --tertiary-fixed: #ffdea6;
  --tertiary-fixed-dim: #efbf66;
  --on-tertiary-fixed: #271900;
  --on-tertiary-fixed-variant: #5e4200;
  --background: #0a1324;
  --on-background: #dae2fa;
  --surface-variant: #2c3547;

  /* Trophy Tiers */
  --color-platinum: #b9e4f5;
  --color-gold: #f5c56b;
  --color-silver: #c5ceda;
  --color-bronze: #ce9474;

  /* Typography - TrofeoLab Brand Hierarchy */
  --font-title: 'Merriweather Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-manrope: var(--font-title);
  --font-inter: var(--font-body);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Radii */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  
  /* Easing */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

*, ::after, ::before{
  border:none!important;
}

body {
  background-color: var(--background);
  color: var(--on-background);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-title {
  font-family: var(--font-title);
}

.font-body {
  font-family: var(--font-body);
}

.tabular-nums {
  font-feature-settings: "tnum" 1, "cv05" 1;
}

/* Estados de carga */
.load-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: linear-gradient(90deg, transparent, var(--primary-container), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: load-slide 1.1s ease-in-out infinite;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
body.is-loading .load-bar { opacity: 1; }
@keyframes load-slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
[data-sk].sk-loading { animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .load-bar, [data-sk].sk-loading { animation: none; }
}

/* Controles de filtro */
.flt {
  background: var(--surface-container-low); color: var(--on-surface);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  border-radius: .5rem; padding: .5rem .75rem; font-size: .875rem; min-width: 0; width: 100%;
}
.flt:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.chip {
  padding: .375rem .875rem; border-radius: 9999px; font-size: .8125rem; font-weight: 700;
  background: var(--surface-container); color: var(--on-surface); white-space: nowrap;
}
.chip:hover { background: var(--surface-container-high); }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

/* Iconos y cards */
.icon-fill { font-variation-settings: 'FILL' 1; }
.kpi {
  position: relative; padding: 1.5rem; border-radius: 1rem; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-container-high), var(--surface-container) 60%);
  box-shadow: 0 1px 0 color-mix(in srgb, white 6%, transparent) inset, 0 4px 14px rgba(0,0,0,.25);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent);
  transition: transform .2s, border-color .2s;
}
.kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.kpi-ic {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center;
  background: color-mix(in srgb, currentColor 14%, var(--surface-container-lowest));
}
@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;
  }
  .kpi, .kpi:hover { transition: none; transform: none; }
}

/* Accesibilidad y navegación por teclado (WCAG 2.1 AA) */
:focus-visible {
  outline: 2px solid var(--primary-container) !important;
  outline-offset: 2px !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}