/* ===== tokens/fonts.css ===== */
/* HAN webfonts. Google Fonts substitutions — see readme.md "Fonts & substitutions".
   Cinzel stands in for Trajan Pro (no license/binaries provided).
   SF Pro Display is not redistributable; Manrope + Inter cover the dashboard voice. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ===== tokens/colors.css ===== */
/* HAN — Sistema Cromático. Base values first, semantic aliases below. */
:root{
  /* Brand core */
  --han-black:#000000;
  --han-midnight:#111111;
  --han-navy:#081726;
  --han-graphite:#3A3A3A;
  --han-gold:#D4AF37;
  --han-royal-gold:#C9981A;
  --han-gold-deep:#8C6B19;
  --han-gold-light:#F2DC9B;
  --han-platinum:#C9CCD1;
  --han-silver:#B5B5B5;
  --han-white:#FFFFFF;
  --han-burgundy:#7A1F3D;

  /* Neutral ramp (dark-first) */
  --ink-1000:#000000;
  --ink-950:#070708;
  --ink-900:#0B0B0C;
  --ink-850:#111111;
  --ink-800:#17171A;
  --ink-700:#1E1E22;
  --ink-600:#26262B;
  --ink-500:#3A3A3A;
  --ink-400:#54545C;
  --ink-300:#7A7A83;
  --ink-200:#A8A8B0;
  --ink-100:#D6D6DA;
  --ink-050:#F2F2F3;

  /* Gold ramp */
  --gold-100:#FAF2DC;
  --gold-200:#F2DC9B;
  --gold-300:#E3C868;
  --gold-400:#D4AF37;
  --gold-500:#C9981A;
  --gold-600:#8C6B19;
  --gold-700:#5C4610;

  /* Semantic / market */
  --up:#2FBF87;
  --up-soft:rgba(47,191,135,.14);
  --down:#E5484D;
  --down-soft:rgba(229,72,77,.14);
  --warn:#E0A426;
  --warn-soft:rgba(224,164,38,.14);
  --info:#4C8DFF;
  --info-soft:rgba(76,141,255,.14);

  /* Surfaces — dark mode is the default HAN environment */
  --surface-base:var(--ink-1000);
  --surface-1:var(--ink-900);
  --surface-2:var(--ink-850);
  --surface-3:var(--ink-800);
  --surface-card:var(--ink-900);
  --surface-raised:var(--ink-800);
  --surface-inset:#050506;
  --surface-overlay:rgba(6,6,7,.82);
  --surface-gold-soft:rgba(212,175,55,.08);
  --surface-navy:var(--han-navy);

  /* Text */
  --text-primary:var(--han-white);
  --text-secondary:var(--han-platinum);
  --text-tertiary:var(--ink-300);
  --text-muted:var(--ink-400);
  --text-gold:var(--han-gold);
  --text-on-gold:var(--ink-1000);
  --text-inverse:var(--ink-1000);

  /* Borders */
  --border-subtle:rgba(255,255,255,.07);
  --border-default:rgba(255,255,255,.11);
  --border-strong:rgba(255,255,255,.18);
  --border-gold:rgba(212,175,55,.32);
  --border-gold-strong:var(--han-gold);
  --divider:rgba(255,255,255,.06);

  /* Signature gradients */
  --gradient-gold:linear-gradient(135deg,#8C6B19 0%,#D4AF37 42%,#F2DC9B 52%,#C9981A 100%); /* @kind color */
  --gradient-gold-line:linear-gradient(90deg,rgba(212,175,55,0) 0%,#D4AF37 50%,rgba(212,175,55,0) 100%); /* @kind color */
  --gradient-platinum:linear-gradient(135deg,#7E8A99 0%,#C9CCD1 45%,#FFFFFF 55%,#A8B0B8 100%); /* @kind color */
  --gradient-midnight:linear-gradient(180deg,#081726 0%,#000000 100%); /* @kind color */
  --gradient-veil:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 70%,#000 100%); /* @kind color */
  --gradient-card:linear-gradient(160deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 42%); /* @kind color */
}

/* Light scope — used only for print, documents and stationery, never for the BackOffice. */
[data-han-theme="light"]{
  --surface-base:var(--han-white);
  --surface-1:#FBFBFA;
  --surface-2:var(--ink-050);
  --surface-3:#E9E9EA;
  --surface-card:var(--han-white);
  --surface-raised:var(--han-white);
  --surface-inset:var(--ink-050);
  --surface-overlay:rgba(255,255,255,.86);
  --text-primary:var(--ink-1000);
  --text-secondary:var(--ink-500);
  --text-tertiary:var(--ink-400);
  --text-muted:var(--ink-300);
  --text-gold:var(--han-gold-deep);
  --border-subtle:rgba(0,0,0,.07);
  --border-default:rgba(0,0,0,.12);
  --border-strong:rgba(0,0,0,.2);
  --divider:rgba(0,0,0,.08);
}

/* ===== tokens/typography.css ===== */
/* HAN — Tipografía.
   Cinzel: institucional, siempre MAYÚSCULAS con tracking abierto.
   Cormorant Garamond: editorial, citas y manifiestos.
   Montserrat: comunicación corporativa y marketing.
   Inter / Manrope: interfaz del BackOffice. */
:root{
  --font-display:"Cinzel",'Trajan Pro',"Times New Roman",serif;
  --font-editorial:"Cormorant Garamond",Georgia,serif;
  --font-corporate:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-ui:"Inter","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --font-ui-alt:"Manrope","Inter",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

  --text-body:var(--font-ui);
  --text-heading:var(--font-display);

  /* Scale */
  --size-3xs:10px;
  --size-2xs:11px;
  --size-xs:12px;
  --size-sm:13px;
  --size-base:15px;
  --size-md:16px;
  --size-lg:18px;
  --size-xl:21px;
  --size-2xl:26px;
  --size-3xl:32px;
  --size-4xl:40px;
  --size-5xl:52px;
  --size-6xl:68px;
  --size-7xl:88px;

  /* Weights */
  --weight-light:300; /* @kind other */
  --weight-regular:400; /* @kind other */
  --weight-medium:500; /* @kind other */
  --weight-semibold:600; /* @kind other */
  --weight-bold:700; /* @kind other */
  --weight-black:800; /* @kind other */

  /* Line heights */
  --leading-tight:1.08; /* @kind other */
  --leading-snug:1.24; /* @kind other */
  --leading-normal:1.5; /* @kind other */
  --leading-relaxed:1.68; /* @kind other */

  /* Tracking — the HAN signature is generous letterspacing on institutional type */
  --tracking-institutional:.22em; /* @kind other */
  --tracking-wide:.12em; /* @kind other */
  --tracking-label:.08em; /* @kind other */
  --tracking-normal:0; /* @kind other */
  --tracking-tight:-.01em; /* @kind other */
  --tracking-display:-.02em; /* @kind other */
}

/* Reusable type roles */
.han-institutional{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-institutional);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
.han-display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-bold);line-height:var(--leading-tight)}
.han-editorial{font-family:var(--font-editorial);font-weight:var(--weight-light);font-size:var(--size-2xl);line-height:var(--leading-snug);font-style:italic}
.han-eyebrow{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-institutional);font-size:var(--size-2xs);font-weight:var(--weight-semibold);color:var(--text-tertiary)}
.han-label{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:var(--size-xs);font-weight:var(--weight-medium)}
.han-body{font-family:var(--font-ui);font-size:var(--size-base);line-height:var(--leading-relaxed);color:var(--text-secondary)}
.han-numeric{font-family:var(--font-ui-alt);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold)}
.han-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--size-xs)}

/* ===== tokens/spacing.css ===== */
/* HAN — Espaciado, radios, grid. Base 4px; el lujo se expresa con aire, no con densidad. */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:104px;
  --space-13:136px;

  /* Radii — restrained. Nothing rounder than 16px except pills and avatars. */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Borders */
  --stroke-hairline:1px; /* @kind spacing */
  --stroke-emphasis:2px; /* @kind spacing */

  /* Layout */
  --sidebar-width:264px;
  --sidebar-width-collapsed:76px;
  --topbar-height:68px;
  --content-max:1440px;
  --gutter:24px;
  --card-padding:24px;
  --card-padding-lg:32px;
  --grid-columns:12; /* @kind other */

  /* Control sizing */
  --control-height-sm:32px;
  --control-height-md:40px;
  --control-height-lg:48px;
  --control-height-xl:56px;
  --tap-min:44px;

  /* Z-index */
  --z-base:0; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-sidebar:200; /* @kind other */
  --z-dropdown:300; /* @kind other */
  --z-modal:400; /* @kind other */
  --z-toast:500; /* @kind other */
}

/* ===== tokens/elevation.css ===== */
/* HAN — Elevación. Sobre negro las sombras casi no existen: la jerarquía la da el borde y el brillo dorado. */
:root{
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-subtle);
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.7);
  --shadow-lg:0 24px 60px -16px rgba(0,0,0,.8);
  --shadow-modal:0 40px 120px -24px rgba(0,0,0,.9);
  --glow-gold:0 0 0 1px rgba(212,175,55,.34),0 0 32px -8px rgba(212,175,55,.28);
  --glow-gold-strong:0 0 0 1px rgba(212,175,55,.6),0 0 44px -6px rgba(212,175,55,.45);
  --glow-up:0 0 24px -8px rgba(47,191,135,.5);
  --glow-down:0 0 24px -8px rgba(229,72,77,.5);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.05);
  --inset-gold:inset 0 1px 0 rgba(242,220,155,.28);
  --blur-panel:blur(18px); /* @kind other */
  --blur-overlay:blur(28px); /* @kind other */
  --ring-focus:0 0 0 2px rgba(0,0,0,1),0 0 0 4px rgba(212,175,55,.55);
}

/* ===== tokens/motion.css ===== */
/* HAN — Movimiento. Nada rebota. Todo entra con calma y sale rápido. */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */
  --duration-slower:640ms; /* @kind other */
  --duration-cinematic:1200ms; /* @kind other */

  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.7,0,.84,0); /* @kind other */
  --ease-luxe:cubic-bezier(.22,.61,.36,1); /* @kind other */

  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-base) var(--ease-out); /* @kind other */
  --transition-surface:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-standard); /* @kind other */
}
@keyframes han-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes han-fade{from{opacity:0}to{opacity:1}}
@keyframes han-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes han-pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.35)}50%{box-shadow:0 0 0 8px rgba(212,175,55,0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ===== tokens/ranks.css ===== */
/* HAN — Sistema de Rangos. 10 niveles, cada uno con color base, degradado de insignia y aura. */
:root{
  --rank-bronze:#A9713B;
  --rank-silver:#B5B5B5;
  --rank-gold:#D4AF37;
  --rank-platinum:#DCE3E8;
  --rank-diamond:#9FE3F0;
  --rank-black-diamond:#3A3A46;
  --rank-titanium:#7E8A99;
  --rank-imperium:#7A1F3D;
  --rank-legend:#E3C868;
  --rank-founder:#FFFFFF;

  --rank-bronze-grad:linear-gradient(135deg,#5E3A18,#A9713B 48%,#D9A46A 56%,#7A4E23); /* @kind color */
  --rank-silver-grad:linear-gradient(135deg,#6E6E6E,#B5B5B5 46%,#EDEDED 56%,#8A8A8A); /* @kind color */
  --rank-gold-grad:var(--gradient-gold); /* @kind color */
  --rank-platinum-grad:var(--gradient-platinum); /* @kind color */
  --rank-diamond-grad:linear-gradient(135deg,#3E7C8C,#9FE3F0 46%,#FFFFFF 56%,#6FB6C7); /* @kind color */
  --rank-black-diamond-grad:linear-gradient(135deg,#0C0C10,#3A3A46 46%,#6E6E80 56%,#16161C); /* @kind color */
  --rank-titanium-grad:linear-gradient(135deg,#495664,#7E8A99 46%,#C3CBD4 56%,#5B6774); /* @kind color */
  --rank-imperium-grad:linear-gradient(135deg,#3E0F1F,#7A1F3D 46%,#B8496C 56%,#54142A); /* @kind color */
  --rank-legend-grad:linear-gradient(135deg,#8C6B19,#E3C868 40%,#FFF6DA 52%,#C9981A); /* @kind color */
  --rank-founder-grad:linear-gradient(135deg,#C9CCD1,#FFFFFF 40%,#F2DC9B 60%,#D4AF37); /* @kind color */

  /* XP / gamificación */
  --xp-track:rgba(255,255,255,.08);
  --xp-fill:var(--gradient-gold); /* @kind color */
  --points-color:var(--han-gold);
  --streak-color:#E0A426;
}

/* ===== tokens/base.css ===== */
/* HAN — Reset y defaults mínimos. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-base);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--size-base);line-height:var(--leading-normal)}
::selection{background:rgba(212,175,55,.28);color:var(--han-white)}
a{color:var(--han-gold);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--gold-200)}
a:active{color:var(--gold-500)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
hr{border:0;height:1px;background:var(--divider);margin:var(--space-6) 0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:var(--radius-pill);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.4);background-clip:content-box}
/* Filete dorado: el separador institucional de HAN */
.han-rule{height:1px;background:var(--gradient-gold-line);border:0}
.han-hairline{height:1px;background:var(--divider);border:0}

/* ===== components/components.css ===== */
/* HAN — Estilos de componentes. Clases consumidas por los componentes React del sistema.
   Todo valor sale de tokens/; aquí solo viven estados (hover/active/focus/disabled) que
   no se pueden expresar con estilos en línea. */

/* ---------- Button ---------- */
.han-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:var(--transition-control),transform var(--duration-fast) var(--ease-standard);text-decoration:none}
.han-btn:focus-visible{box-shadow:var(--ring-focus)}
.han-btn:active:not(:disabled){transform:scale(.985)}
.han-btn:disabled{opacity:.38;cursor:not-allowed;background:var(--ink-600);color:var(--text-tertiary);border-color:transparent;box-shadow:none}
.han-btn--sm{height:var(--control-height-sm);padding:0 var(--space-3);font-size:var(--size-2xs)}
.han-btn--md{height:var(--control-height-md);padding:0 var(--space-5);font-size:var(--size-xs)}
.han-btn--lg{height:var(--control-height-lg);padding:0 var(--space-6);font-size:var(--size-sm)}
.han-btn--gold{background:var(--gradient-gold);color:var(--text-on-gold);box-shadow:var(--inset-gold)}
.han-btn--gold:hover:not(:disabled){background:linear-gradient(135deg,#C9981A 0%,#E3C868 42%,#FFF6DA 52%,#D4AF37 100%);box-shadow:var(--glow-gold)}
.han-btn--platinum{background:var(--gradient-platinum);color:var(--text-on-gold)}
.han-btn--platinum:hover:not(:disabled){filter:brightness(1.08)}
.han-btn--outline{background:transparent;border-color:var(--border-gold);color:var(--text-gold)}
.han-btn--outline:hover:not(:disabled){border-color:var(--border-gold-strong);background:var(--surface-gold-soft)}
.han-btn--ghost{background:transparent;color:var(--text-secondary)}
.han-btn--ghost:hover:not(:disabled){background:rgba(255,255,255,.05);color:var(--text-primary)}
.han-btn--danger{background:transparent;border-color:rgba(229,72,77,.4);color:var(--down)}
.han-btn--danger:hover:not(:disabled){background:var(--down-soft);border-color:var(--down)}
.han-btn--block{width:100%}

/* ---------- IconButton ---------- */
.han-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-tertiary);cursor:pointer;position:relative;transition:var(--transition-control)}
.han-iconbtn:hover{color:var(--text-gold);background:rgba(255,255,255,.05)}
.han-iconbtn:focus-visible{box-shadow:var(--ring-focus)}
.han-iconbtn--outline{border-color:var(--border-default)}
.han-iconbtn--outline:hover{border-color:var(--border-gold)}
.han-iconbtn--gold{background:var(--gradient-gold);color:var(--text-on-gold)}
.han-iconbtn--gold:hover{color:var(--text-on-gold);filter:brightness(1.08)}
.han-iconbtn--sm{width:32px;height:32px}
.han-iconbtn--md{width:40px;height:40px}
.han-iconbtn--lg{width:48px;height:48px}
.han-iconbtn__dot{position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:var(--radius-circle);background:var(--han-gold);box-shadow:0 0 0 2px var(--surface-base)}

/* ---------- Badge / Tag ---------- */
.han-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);font-family:var(--font-ui);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;font-size:var(--size-3xs);padding:4px 10px;border:1px solid transparent;font-variant-numeric:tabular-nums}
.han-badge--md{font-size:var(--size-2xs);padding:5px 12px}
.han-tag{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-raised);color:var(--text-secondary);font-size:var(--size-xs);padding:5px 10px}
.han-tag__x{display:inline-flex;background:none;border:0;color:var(--text-muted);cursor:pointer;padding:0;line-height:1}
.han-tag__x:hover{color:var(--down)}

/* ---------- Card ---------- */
.han-card{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:var(--transition-surface)}
.han-card--interactive{cursor:pointer}
.han-card--interactive:hover{border-color:var(--border-gold);background:var(--surface-raised)}
.han-card--elite{border-color:var(--border-gold);background-image:var(--gradient-card);box-shadow:var(--glow-gold)}
.han-card--inset{background:var(--surface-inset);border-color:var(--border-default)}
.han-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}

/* ---------- Inputs ---------- */
.han-field{display:flex;flex-direction:column;gap:var(--space-2)}
.han-field__label{font-family:var(--font-ui);font-size:var(--size-2xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-tertiary);font-weight:var(--weight-medium)}
.han-field__hint{font-size:var(--size-xs);color:var(--text-muted)}
.han-field__error{font-size:var(--size-xs);color:var(--down)}
.han-inputwrap{display:flex;align-items:center;gap:var(--space-3);background:var(--surface-inset);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:0 var(--space-4);transition:var(--transition-control);color:var(--text-muted)}
.han-inputwrap:focus-within{border-color:var(--border-gold-strong);box-shadow:0 0 0 3px rgba(212,175,55,.14)}
.han-inputwrap--error{border-color:var(--down)}
.han-inputwrap--sm{height:var(--control-height-sm)}
.han-inputwrap--md{height:var(--control-height-md)}
.han-inputwrap--lg{height:var(--control-height-lg)}
.han-inputwrap--disabled{opacity:.45}
.han-input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text-primary);font-family:var(--font-ui);font-size:var(--size-sm)}
.han-input::placeholder{color:var(--text-muted)}
.han-select{flex:1;background:transparent;border:0;outline:none;color:var(--text-primary);font-family:var(--font-ui);font-size:var(--size-sm);appearance:none;cursor:pointer}
.han-select option{background:var(--ink-800);color:var(--text-primary)}

/* ---------- Checkbox / Radio / Switch ---------- */
.han-check{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--size-sm);color:var(--text-secondary);user-select:none}
.han-check input{position:absolute;opacity:0;width:0;height:0}
.han-check__box{width:18px;height:18px;flex:none;border:1px solid var(--border-strong);border-radius:var(--radius-xs);display:grid;place-items:center;transition:var(--transition-control);color:transparent}
.han-check--radio .han-check__box{border-radius:var(--radius-circle)}
.han-check:hover .han-check__box{border-color:var(--border-gold-strong)}
.han-check input:checked+.han-check__box{background:var(--gradient-gold);border-color:transparent;color:var(--text-on-gold)}
.han-check input:focus-visible+.han-check__box{box-shadow:var(--ring-focus)}
.han-check--disabled{opacity:.4;cursor:not-allowed}
.han-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--size-sm);color:var(--text-secondary)}
.han-switch input{position:absolute;opacity:0;width:0;height:0}
.han-switch__track{width:44px;height:24px;flex:none;border-radius:var(--radius-pill);background:var(--ink-600);border:1px solid var(--border-default);position:relative;transition:var(--transition-control)}
.han-switch__knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--radius-circle);background:var(--han-silver);transition:transform var(--duration-base) var(--ease-out),background var(--duration-fast) var(--ease-standard)}
.han-switch input:checked+.han-switch__track{background:var(--gradient-gold);border-color:transparent}
.han-switch input:checked+.han-switch__track .han-switch__knob{transform:translateX(20px);background:var(--ink-1000)}
.han-switch input:focus-visible+.han-switch__track{box-shadow:var(--ring-focus)}

/* ---------- Tables ---------- */
.han-table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-ui);font-size:var(--size-sm)}
.han-table th{text-align:left;font-size:var(--size-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted);font-weight:var(--weight-semibold);padding:0 var(--space-4) var(--space-3);border-bottom:1px solid var(--divider);white-space:nowrap}
.han-table td{padding:var(--space-4);border-bottom:1px solid var(--divider);color:var(--text-secondary);vertical-align:middle}
.han-table--dense td{padding:var(--space-3) var(--space-4)}
.han-table tbody tr{transition:background var(--duration-fast) var(--ease-standard)}
.han-table tbody tr:hover{background:rgba(255,255,255,.025)}
.han-table tbody tr:last-child td{border-bottom:0}
.han-table .han-num{font-family:var(--font-ui-alt);font-variant-numeric:tabular-nums;color:var(--text-primary);text-align:right}

/* ---------- Nav ---------- */
.han-navitem{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:0 var(--space-4);height:44px;border:0;background:transparent;border-left:2px solid transparent;color:var(--text-tertiary);font-family:var(--font-ui);font-size:var(--size-sm);cursor:pointer;text-align:left;transition:var(--transition-control)}
.han-navitem:hover{color:var(--text-primary);background:rgba(255,255,255,.04)}
.han-navitem--active{color:var(--han-gold);background:var(--surface-gold-soft);border-left-color:var(--han-gold)}
.han-navitem__badge{margin-left:auto;font-family:var(--font-ui-alt);font-variant-numeric:tabular-nums;font-size:var(--size-3xs);color:var(--text-on-gold);background:var(--han-gold);border-radius:var(--radius-pill);padding:2px 7px;font-weight:var(--weight-bold)}
.han-tab{position:relative;background:none;border:0;padding:var(--space-3) 0;font-family:var(--font-ui);font-size:var(--size-xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-tertiary);cursor:pointer;transition:var(--transition-control)}
.han-tab:hover{color:var(--text-primary)}
.han-tab--active{color:var(--han-gold)}
.han-tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gradient-gold)}

/* ---------- Feedback ---------- */
.han-overlay{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:var(--blur-overlay);display:grid;place-items:center;z-index:var(--z-modal);padding:var(--space-6);animation:han-fade var(--duration-base) var(--ease-out)}
.han-dialog{width:100%;max-width:520px;background:var(--surface-2);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);animation:han-fade-up var(--duration-slow) var(--ease-out)}
.han-toast{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--surface-2);border:1px solid var(--border-default);border-left:2px solid var(--han-gold);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-lg);min-width:320px;animation:han-fade-up var(--duration-base) var(--ease-out)}
.han-tooltip{position:relative;display:inline-flex}
.han-tooltip__bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink-800);border:1px solid var(--border-default);color:var(--text-primary);font-size:var(--size-2xs);padding:6px 10px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-standard);box-shadow:var(--shadow-md);z-index:var(--z-dropdown)}
.han-tooltip:hover .han-tooltip__bubble{opacity:1}
.han-notif{display:flex;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--divider);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.han-notif:hover{background:rgba(255,255,255,.03)}

/* ---------- Brand ---------- */
.han-skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(212,175,55,.12) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:han-shimmer 1.8s linear infinite;border-radius:var(--radius-sm)}
.han-shield{position:relative;display:grid;place-items:center;clip-path:polygon(50% 0,100% 22%,100% 70%,50% 100%,0 70%,0 22%)}
.han-rankrow{display:grid;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);transition:var(--transition-control)}
.han-rankrow:hover{background:rgba(255,255,255,.03);border-color:var(--border-subtle)}
.han-rankrow--me{background:var(--surface-gold-soft);border-color:var(--border-gold)}

/* ===== Torino Assets — overrides de marca ===== */
body{margin:0;background:#000;color:var(--text-primary);font-family:var(--font-ui)}
a{color:#B08D57;text-decoration:none}
a:hover{color:#D6B98A}
.han-rule{background:linear-gradient(90deg,transparent,#B08D57,transparent) !important}
.han-badge--neutral{background:rgba(255,255,255,.06);color:var(--text-secondary)}
.han-badge--up{background:var(--up-soft);color:var(--up)}
.han-badge--down{background:var(--down-soft);color:var(--down)}
.han-badge--warn{background:var(--warn-soft);color:var(--warn)}
.han-badge--info{background:var(--info-soft);color:var(--info)}
.han-badge--gold{background:var(--gradient-gold);color:var(--text-on-gold)}
.han-badge--outline{background:transparent;border-color:currentColor}
.ico{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
[data-action]{cursor:pointer}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ===== Hover (generado desde los estados del diseño) ===== */
[data-hv="0"]:hover{color:var(--text-primary)}
[data-hv="1"]:hover{border-color:rgba(176,141,87,.45);background:var(--surface-raised)}
[data-hv="2"]:hover{border-color:rgba(176,141,87,.38)}
[data-hv="3"]:hover{color:#D6B98A}

/* ===== Responsive ===== */
@media (max-width:1100px){
  main [style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  main [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  main [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]>div:nth-child(3n){border-right:none !important}
  main [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]>div:nth-child(-n+3){border-bottom:1px solid var(--divider)}
}
@media (max-width:900px){
  header,main>section,footer{padding-left:24px !important;padding-right:24px !important}
  header>div:last-child>span{display:none}
  main [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  main [style*="position:sticky"]{position:static !important}
  main [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]>div{border-right:none !important;border-bottom:1px solid var(--divider)}
  main [style*="grid-template-columns:repeat(6,minmax(0,1fr))"]>div:last-child{border-bottom:none}
  h1[style*="--size-6xl"]{font-size:var(--size-4xl) !important}
  footer{flex-direction:column;gap:10px;align-items:flex-start !important}
}