/* ============================================================================
   TIO BIGOTES — PLATFORM TOKENS (capa de aplicación, --app-*)
   Fuente: Design System handoff oficial (platform/tb-platform.css), adaptado
   a las rutas estáticas de TB-GGB. No redefine la marca: la traduce a UI.
   ========================================================================== */

@import url('/static/css/tb-tokens.css');

/* ---------------------------------------------------------------------------
   1. ESCALAS CRUDAS DE PRODUCTO (no cambian con el tema)
--------------------------------------------------------------------------- */
:root {
  --tb-ink-950: #050505;
  --tb-ink-925: #0F0F0F;
  --tb-ink-875: #151515;
  --tb-ink-850: #1E1E1E;
  --tb-ink-750: #242424;
  --tb-ink-650: #3A3A3A;
  --tb-ink-600: #464646;
  --tb-ink-200: #C9C9C9;
  --tb-ink-150: #DEDEDE;
  --tb-ink-100: #EDEDED;
  --tb-ink-50:  #F6F6F6;

  --tb-celeste-900: #0B3F5C;
  --tb-celeste-800: #0F5F87;
  --tb-celeste-700: #1673A6;
  --tb-celeste-400: #5BBCE8;
  --tb-celeste-200: #BFE4F4;
  --tb-celeste-50:  #EEF8FD;

  --tb-kraft-700: #8A6A3A;
  --tb-kraft-600: #B79A62;
  --tb-kraft-50:  #FCF9F3;

  --tb-success-700: #145C38;
  --tb-success-500: #1E7A4B;
  --tb-success-300: #7CC49F;
  --tb-success-100: #E6F4EC;

  --tb-warning-700: #8A5910;
  --tb-warning-500: #B5761A;
  --tb-warning-300: #E3BC7B;
  --tb-warning-100: #FCF2E2;

  --tb-danger-700:  #8E2A20;
  --tb-danger-500:  #C0392B;
  --tb-danger-300:  #E39A92;
  --tb-danger-100:  #FBEAE8;

  --tb-info-700:    var(--tb-celeste-800);
  --tb-info-500:    var(--tb-celeste-600);
  --tb-info-300:    var(--tb-celeste-300);
  --tb-info-100:    var(--tb-celeste-100);

  --app-o-disabled: 0.42;
  --app-o-hover:    0.08;
  --app-o-press:    0.14;
  --app-o-scrim:    0.56;
}

/* ---------------------------------------------------------------------------
   2. LAYOUT DE APLICACIÓN
--------------------------------------------------------------------------- */
:root {
  --app-sidebar-w:            264px;
  --app-sidebar-w-collapsed:  68px;
  --app-topbar-h:             60px;
  --app-subbar-h:             48px;
  --app-content-max:          1440px;
  --app-content-pad-x:        var(--tb-space-6);
  --app-content-pad-y:        var(--tb-space-5);
  --app-gutter:               var(--tb-space-5);

  --app-control-h-sm:  30px;
  --app-control-h:     38px;
  --app-control-h-lg:  46px;
  --app-row-h-compact: 36px;
  --app-row-h:         48px;
  --app-row-h-relaxed: 60px;

  --app-bp-sm:  640px;
  --app-bp-md:  900px;
  --app-bp-lg:  1200px;
  --app-bp-xl:  1440px;
  --app-bp-2xl: 1760px;

  --app-z-base:     0;
  --app-z-raised:   10;
  --app-z-sticky:   100;
  --app-z-sidebar:  200;
  --app-z-topbar:   300;
  --app-z-dropdown: 400;
  --app-z-scrim:    500;
  --app-z-modal:    600;
  --app-z-toast:    700;
  --app-z-tooltip:  800;
  --app-z-max:      9999;
}

/* ---------------------------------------------------------------------------
   3. MOTION DE PRODUCTO
--------------------------------------------------------------------------- */
:root, [data-theme] {
  --app-dur-instant: 80ms;
  --app-dur-fast:    var(--tb-dur-fast);
  --app-dur-base:    var(--tb-dur);
  --app-dur-slow:    var(--tb-dur-slow);
  --app-dur-slower:  520ms;

  --app-ease:         var(--tb-ease);
  --app-ease-out:     var(--tb-ease-out);
  --app-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --app-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  --app-t-color:     color var(--app-dur-fast) var(--app-ease-out), background-color var(--app-dur-fast) var(--app-ease-out), border-color var(--app-dur-fast) var(--app-ease-out);
  --app-t-transform: transform var(--app-dur-base) var(--app-ease-out);
  --app-t-panel:     transform var(--app-dur-base) var(--app-ease-out), opacity var(--app-dur-fast) linear;

  --app-skeleton-dur: 1400ms;
  --app-spinner-dur:  760ms;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --app-dur-instant: 1ms; --app-dur-fast: 1ms; --app-dur-base: 1ms;
    --app-dur-slow: 1ms; --app-dur-slower: 1ms; --app-skeleton-dur: 0ms;
  }
}

/* ---------------------------------------------------------------------------
   4. TEMA CLARO (default)
--------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --app-canvas:        var(--tb-paper-100);
  --app-surface:       var(--tb-white);
  --app-surface-2:     var(--tb-kraft-50);
  --app-surface-3:     var(--tb-kraft-100);
  --app-surface-sunken: #F1ECE2;
  --app-surface-inverse: var(--tb-black);
  --app-surface-hover:   rgba(10,10,10,0.04);
  --app-surface-press:   rgba(10,10,10,0.08);
  --app-surface-selected: var(--tb-celeste-50);
  --app-scrim:         rgba(10,10,10,var(--app-o-scrim));

  --app-text:          var(--tb-black);
  --app-text-secondary: var(--tb-ink-700);
  --app-text-muted:    var(--tb-ink-500);
  --app-text-subtle:   var(--tb-ink-400);
  --app-text-disabled: var(--tb-ink-300);
  --app-text-inverse:  var(--tb-white);
  --app-text-on-accent: var(--tb-white);
  --app-text-link:     var(--tb-celeste-700);
  --app-text-link-hover: var(--tb-celeste-900);

  --app-border-subtle: var(--tb-ink-100);
  --app-border:        var(--tb-line);
  --app-border-strong: var(--tb-ink-300);
  --app-border-ink:    var(--tb-black);

  --app-accent:        var(--tb-celeste-500);
  --app-accent-hover:  var(--tb-celeste-600);
  --app-accent-press:  var(--tb-celeste-700);
  --app-accent-soft:   var(--tb-celeste-100);
  --app-accent-soft-hover: var(--tb-celeste-200);
  --app-accent-text:   var(--tb-celeste-800);

  --app-focus-ring:    var(--tb-celeste-600);
  --app-focus-ring-offset: var(--tb-white);
  --app-focus-w:       3px;
  --app-focus-offset:  2px;

  --app-success:      var(--tb-success-500);
  --app-success-bg:   var(--tb-success-100);
  --app-success-text: var(--tb-success-700);
  --app-warning:      var(--tb-warning-500);
  --app-warning-bg:   var(--tb-warning-100);
  --app-warning-text: var(--tb-warning-700);
  --app-danger:       var(--tb-danger-500);
  --app-danger-bg:    var(--tb-danger-100);
  --app-danger-text:  var(--tb-danger-700);
  --app-info:         var(--tb-info-500);
  --app-info-bg:      var(--tb-info-100);
  --app-info-text:    var(--tb-info-700);
  --app-neutral:      var(--tb-ink-500);
  --app-neutral-bg:   var(--tb-ink-50);
  --app-neutral-text: var(--tb-ink-700);

  --app-shadow-none: none;
  --app-shadow-xs:   0 1px 1px rgba(10,10,10,0.05);
  --app-shadow-sm:   var(--tb-shadow-sm);
  --app-shadow-md:   var(--tb-shadow-md);
  --app-shadow-lg:   var(--tb-shadow-lg);
  --app-shadow-xl:   0 24px 60px rgba(10,10,10,0.18);
  --app-shadow-focus: 0 0 0 var(--app-focus-w) var(--tb-celeste-200);

  --app-logo-lockup:  url('/static/logos/lockup-horizontal-black.png');
  --app-logo-wordmark: url('/static/logos/wordmark-black.png');
  --app-logo-emblem:  url('/static/logos/emblem-black.png');
}

/* ---------------------------------------------------------------------------
   5. TEMA OSCURO
--------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --app-canvas:        var(--tb-ink-950);
  --app-surface:       var(--tb-ink-925);
  --app-surface-2:     var(--tb-ink-850);
  --app-surface-3:     var(--tb-ink-750);
  --app-surface-sunken: #000000;
  --app-surface-inverse: var(--tb-paper-100);
  --app-surface-hover:   rgba(255,255,255,0.06);
  --app-surface-press:   rgba(255,255,255,0.12);
  --app-surface-selected: rgba(54,169,225,0.16);
  --app-scrim:         rgba(0,0,0,0.72);

  --app-text:          #F7F4EC;
  --app-text-secondary: var(--tb-ink-200);
  --app-text-muted:    #9A9A9A;
  --app-text-subtle:   var(--tb-ink-400);
  --app-text-disabled: var(--tb-ink-600);
  --app-text-inverse:  var(--tb-black);
  --app-text-on-accent: var(--tb-black);
  --app-text-link:     var(--tb-celeste-400);
  --app-text-link-hover: var(--tb-celeste-300);

  --app-border-subtle: #262626;
  --app-border:        #333333;
  --app-border-strong: #4D4D4D;
  --app-border-ink:    #F7F4EC;

  --app-accent:        var(--tb-celeste-400);
  --app-accent-hover:  var(--tb-celeste-300);
  --app-accent-press:  var(--tb-celeste-200);
  --app-accent-soft:   rgba(54,169,225,0.16);
  --app-accent-soft-hover: rgba(54,169,225,0.24);
  --app-accent-text:   var(--tb-celeste-300);

  --app-focus-ring:    var(--tb-celeste-400);
  --app-focus-ring-offset: var(--tb-ink-950);

  --app-success:      #4CB37C;
  --app-success-bg:   rgba(76,179,124,0.15);
  --app-success-text: #8FD3AE;
  --app-warning:      #E0A040;
  --app-warning-bg:   rgba(224,160,64,0.15);
  --app-warning-text: #EFC583;
  --app-danger:       #E2685A;
  --app-danger-bg:    rgba(226,104,90,0.15);
  --app-danger-text:  #F0A199;
  --app-info:         var(--tb-celeste-400);
  --app-info-bg:      rgba(54,169,225,0.15);
  --app-info-text:    var(--tb-celeste-300);
  --app-neutral:      var(--tb-ink-300);
  --app-neutral-bg:   rgba(255,255,255,0.07);
  --app-neutral-text: var(--tb-ink-200);

  --app-shadow-xs:   0 1px 1px rgba(0,0,0,0.5);
  --app-shadow-sm:   0 1px 2px rgba(0,0,0,0.5);
  --app-shadow-md:   0 4px 14px rgba(0,0,0,0.55);
  --app-shadow-lg:   0 12px 34px rgba(0,0,0,0.6);
  --app-shadow-xl:   0 24px 60px rgba(0,0,0,0.7);
  --app-shadow-focus: 0 0 0 var(--app-focus-w) rgba(54,169,225,0.35);

  --app-tooltip-bg:     var(--tb-ink-750);
  --app-tooltip-fg:     var(--app-text);
  --app-tooltip-border: var(--app-border-strong);

  --app-logo-lockup:  url('/static/logos/lockup-tagline-negative.png');
  --app-logo-wordmark: url('/static/logos/wordmark-white.png');
  --app-logo-emblem:  url('/static/logos/emblem-white.png');
}

/* ---------------------------------------------------------------------------
   6. TOKENS DE COMPONENTE
--------------------------------------------------------------------------- */
:root, [data-theme] {
  --app-btn-h:            var(--app-control-h);
  --app-btn-h-sm:         var(--app-control-h-sm);
  --app-btn-h-lg:         var(--app-control-h-lg);
  --app-btn-pad-x:        var(--tb-space-5);
  --app-btn-pad-x-sm:     var(--tb-space-3);
  --app-btn-gap:          var(--tb-space-2);
  --app-btn-radius:       var(--tb-radius-pill);
  --app-btn-font:         var(--tb-font-body);
  --app-btn-weight:       var(--tb-w-bold);
  --app-btn-fs:           var(--tb-fs-sm);
  --app-btn-ls:           0.02em;
  --app-btn-bw:           var(--tb-bw-2);

  --app-btn-primary-bg:         var(--app-surface-inverse);
  --app-btn-primary-fg:         var(--app-text-inverse);
  --app-btn-primary-bg-hover:   var(--tb-ink-800);
  --app-btn-primary-bg-press:   var(--tb-ink-700);
  --app-btn-primary-border:     var(--app-surface-inverse);

  --app-btn-accent-bg:          var(--app-accent);
  --app-btn-accent-fg:          var(--app-text-on-accent);
  --app-btn-accent-bg-hover:    var(--app-accent-hover);
  --app-btn-accent-bg-press:    var(--app-accent-press);

  --app-btn-outline-bg:         transparent;
  --app-btn-outline-fg:         var(--app-text);
  --app-btn-outline-border:     var(--app-border-ink);
  --app-btn-outline-bg-hover:   var(--app-surface-inverse);
  --app-btn-outline-fg-hover:   var(--app-text-inverse);

  --app-btn-ghost-bg:           transparent;
  --app-btn-ghost-fg:           var(--app-text-secondary);
  --app-btn-ghost-bg-hover:     var(--app-surface-hover);

  --app-btn-danger-bg:          var(--app-danger);
  --app-btn-danger-fg:          #FFFFFF;
  --app-btn-danger-bg-hover:    var(--tb-danger-700);

  --app-input-h:          var(--app-control-h);
  --app-input-pad-x:      var(--tb-space-3);
  --app-input-radius:     var(--tb-radius-sm);
  --app-input-bw:         var(--tb-bw-1);
  --app-input-bg:         var(--app-surface);
  --app-input-fg:         var(--app-text);
  --app-input-placeholder: var(--app-text-subtle);
  --app-input-border:     var(--app-border-strong);
  --app-input-border-hover: var(--app-text-muted);
  --app-input-border-focus: var(--app-accent);
  --app-input-border-error: var(--app-danger);
  --app-input-bg-disabled: var(--app-surface-2);
  --app-input-fs:         var(--tb-fs-sm);
  --app-input-label-fs:   var(--tb-fs-xs);
  --app-input-label-ls:   var(--tb-ls-caps);
  --app-input-help-fs:    var(--tb-fs-xs);

  --app-card-bg:          var(--app-surface);
  --app-card-border:      var(--app-border);
  --app-card-bw:          var(--tb-bw-1);
  --app-card-radius:      var(--tb-radius-md);
  --app-card-pad:         var(--tb-space-5);
  --app-card-pad-sm:      var(--tb-space-4);
  --app-card-gap:         var(--tb-space-4);
  --app-card-shadow:      var(--app-shadow-none);
  --app-card-shadow-hover: var(--app-shadow-sm);
  --app-card-header-h:    52px;

  --app-table-bg:            var(--app-surface);
  --app-table-head-bg:       var(--app-surface-2);
  --app-table-head-fg:       var(--app-text-muted);
  --app-table-head-fs:       var(--tb-fs-xs);
  --app-table-head-ls:       var(--tb-ls-caps);
  --app-table-head-weight:   var(--tb-w-bold);
  --app-table-head-h:        40px;
  --app-table-row-h:         var(--app-row-h);
  --app-table-row-bg-hover:  var(--app-surface-hover);
  --app-table-row-bg-selected: var(--app-surface-selected);
  --app-table-zebra-bg:      var(--app-surface-2);
  --app-table-border:        var(--app-border-subtle);
  --app-table-pad-x:         var(--tb-space-4);
  --app-table-fs:            var(--tb-fs-sm);
  --app-table-num-font:      var(--tb-font-body);
  --app-table-sticky-shadow: 4px 0 8px rgba(10,10,10,0.06);

  --app-badge-h:        22px;
  --app-badge-pad-x:    var(--tb-space-2);
  --app-badge-radius:   var(--tb-radius-pill);
  --app-badge-fs:       var(--tb-fs-xs);
  --app-badge-weight:   var(--tb-w-bold);
  --app-badge-ls:       0.06em;
  --app-chip-h:         30px;
  --app-chip-radius:    var(--tb-radius-pill);
  --app-chip-bg:        var(--app-surface-2);
  --app-chip-bg-active: var(--app-surface-inverse);
  --app-chip-fg-active: var(--app-text-inverse);

  --app-nav-bg:           var(--app-surface-inverse);
  --app-nav-fg:           rgba(255,255,255,0.72);
  --app-nav-fg-active:    #FFFFFF;
  --app-nav-item-h:       42px;
  --app-nav-item-radius:  var(--tb-radius-sm);
  --app-nav-item-bg-hover: rgba(255,255,255,0.08);
  --app-nav-item-bg-active: rgba(54,169,225,0.18);
  --app-nav-indicator:    var(--tb-celeste-500);
  --app-nav-indicator-w:  3px;
  --app-nav-section-fs:   var(--tb-fs-xs);
  --app-nav-section-ls:   var(--tb-ls-caps);
  --app-nav-section-fg:   rgba(255,255,255,0.42);

  --app-topbar-bg:        var(--app-surface);
  --app-topbar-border:    var(--app-border);
  --app-topbar-shadow:    var(--app-shadow-none);

  --app-tab-h:            42px;
  --app-tab-fg:           var(--app-text-muted);
  --app-tab-fg-active:    var(--app-text);
  --app-tab-indicator:    var(--app-border-ink);
  --app-tab-indicator-w:  var(--tb-bw-2);

  --app-modal-bg:       var(--app-surface);
  --app-modal-radius:   var(--tb-radius-lg);
  --app-modal-pad:      var(--tb-space-6);
  --app-modal-w-sm:     420px;
  --app-modal-w:        560px;
  --app-modal-w-lg:     760px;
  --app-modal-shadow:   var(--app-shadow-xl);

  --app-menu-bg:        var(--app-surface);
  --app-menu-radius:    var(--tb-radius-md);
  --app-menu-pad:       var(--tb-space-1);
  --app-menu-item-h:    36px;
  --app-menu-shadow:    var(--app-shadow-lg);
  --app-menu-min-w:     200px;

  --app-tooltip-bg:     var(--tb-ink-900);
  --app-tooltip-fg:     var(--tb-white);
  --app-tooltip-border: transparent;
  --app-tooltip-radius: var(--tb-radius-sm);
  --app-tooltip-fs:     var(--tb-fs-xs);
  --app-tooltip-pad:    var(--tb-space-2) var(--tb-space-3);

  --app-toast-bg:       var(--app-surface-inverse);
  --app-toast-fg:       var(--app-text-inverse);
  --app-toast-radius:   var(--tb-radius-md);
  --app-toast-w:        380px;
  --app-toast-shadow:   var(--app-shadow-lg);
  --app-toast-dur:      5000ms;

  --app-drawer-w:       440px;

  --app-skeleton-bg:      var(--app-surface-2);
  --app-skeleton-shine:   rgba(255,255,255,0.55);
  --app-skeleton-radius:  var(--tb-radius-sm);
  --app-skeleton-h:       12px;
  --app-spinner-track:    var(--app-border);
  --app-spinner-fg:       var(--app-accent);
  --app-spinner-w:        2.5px;
  --app-spinner-size:     20px;
  --app-progress-track:   var(--app-border-subtle);
  --app-progress-fg:      var(--app-accent);
  --app-progress-h:       6px;

  --app-empty-bg:         var(--app-surface-2);
  --app-empty-fg:         var(--app-text-muted);
  --app-empty-icon:       var(--app-text-disabled);
  --app-empty-pad:        var(--tb-space-8) var(--tb-space-6);
  --app-empty-max-w:      380px;

  --app-error-bg:         var(--app-danger-bg);
  --app-error-fg:         var(--app-danger-text);
  --app-error-border:     var(--tb-danger-300);

  --app-avatar-sm:      24px;
  --app-avatar:         34px;
  --app-avatar-lg:      48px;
  --app-avatar-radius:  var(--tb-radius-full);
  --app-avatar-bg:      var(--app-surface-3);
  --app-thumb-radius:   var(--tb-radius-md);
  --app-thumb-ratio:    1 / 1;
  --app-hero-ratio:     16 / 9;

  --app-icon-xs:      14px;
  --app-icon-sm:      16px;
  --app-icon:         20px;
  --app-icon-lg:      24px;
  --app-icon-xl:      32px;
  --app-icon-stroke:  1.75px;
  --app-icon-color:   currentColor;
}

/* ---------------------------------------------------------------------------
   7. DATA VIZ
--------------------------------------------------------------------------- */
:root, [data-theme] {
  --app-viz-1: #36A9E1;
  --app-viz-2: #0F5F87;
  --app-viz-3: #D4BC8D;
  --app-viz-4: #8A6A3A;
  --app-viz-5: #1E7A4B;
  --app-viz-6: #B5761A;
  --app-viz-7: #C0392B;
  --app-viz-8: #2B2B2B;

  --app-viz-seq-1: #EEF8FD;
  --app-viz-seq-2: #BFE4F4;
  --app-viz-seq-3: #8ECEEC;
  --app-viz-seq-4: #5BBCE8;
  --app-viz-seq-5: #36A9E1;
  --app-viz-seq-6: #1673A6;
  --app-viz-seq-7: #0B3F5C;

  --app-viz-neg-2: #C0392B;
  --app-viz-neg-1: #E39A92;
  --app-viz-mid:   var(--tb-ink-150);
  --app-viz-pos-1: #7CC49F;
  --app-viz-pos-2: #1E7A4B;

  --app-viz-grid:      var(--app-border-subtle);
  --app-viz-axis:      var(--app-border);
  --app-viz-label:     var(--app-text-muted);
  --app-viz-label-fs:  var(--tb-fs-xs);
  --app-viz-value-font: var(--tb-font-display);
  --app-viz-tooltip-bg: var(--app-tooltip-bg);
  --app-viz-bar-radius: 2px;
  --app-viz-line-w:     2px;
  --app-viz-dot:        4px;
  --app-viz-area-op:    0.14;
  --app-viz-target:     var(--tb-ink-400);

  --app-viz-star:       #E8A33D;
  --app-viz-star-empty: var(--app-border-strong);
}

/* ---------------------------------------------------------------------------
   8. RESET + PRIMITIVAS MÍNIMAS
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--app-canvas);
  color: var(--app-text);
  font-family: var(--tb-font-body);
  font-size: var(--tb-fs-body);
  line-height: var(--tb-lh-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--app-dur-base) var(--app-ease-out), color var(--app-dur-base) var(--app-ease-out);
}

h1, h2, h3 { font-family: var(--tb-font-display); text-transform: uppercase; letter-spacing: var(--tb-ls-display); line-height: var(--tb-lh-tight); margin: 0; }
h4, h5, h6 { font-family: var(--tb-font-heading); line-height: var(--tb-lh-heading); margin: 0; }

a { color: var(--app-text-link); text-decoration: none; transition: var(--app-t-color); }
a:hover { color: var(--app-text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: var(--app-focus-w) solid var(--app-focus-ring);
  outline-offset: var(--app-focus-offset);
  border-radius: var(--tb-radius-sm);
}

.tb-eyebrow {
  font-family: var(--tb-font-body);
  font-size: var(--tb-fs-xs);
  font-weight: var(--tb-w-bold);
  letter-spacing: var(--tb-ls-caps);
  text-transform: uppercase;
  color: var(--app-accent-text);
}

@keyframes tb-skeleton { 0% { background-position: -180% 0 } 100% { background-position: 180% 0 } }
@keyframes tb-spin { to { transform: rotate(360deg) } }