/* ============================================================================
   TELOS - UI Kit  (requiere telos-tokens.css cargado antes)
   Neomorfismo oscuro + Liquid Glass con rim light dual oro -> violeta.
   Prefijo de clases: .tl-
   ========================================================================== */

/* ---------- Base de pagina ------------------------------------------------ */
.tl-page {
  background:
    radial-gradient(1200px 700px at 8% -10%,  rgba(252,167,12,.14), transparent 60%),
    radial-gradient(1100px 800px at 100% 110%, rgba(98,20,236,.22), transparent 60%),
    var(--tl-ink-900);
  color: var(--tl-text);
  font-family: var(--tl-font-body);
  font-size: var(--tl-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.tl-page ::selection { background: rgba(252,167,12,.35); color: var(--tl-text-hi); }

/* ---------- Tipografia de marca ------------------------------------------ */
.tl-logo {
  font-family: var(--tl-font-display);
  font-weight: 200;
  letter-spacing: var(--tl-track-logo);
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(180deg, #FFFDF2 0%, var(--tl-gold-200) 38%, var(--tl-gold-400) 62%, #C9A860 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 6px 18px rgba(252,167,12,.18));
}
.tl-tagline {
  font-family: var(--tl-font-body);
  font-weight: 300;
  letter-spacing: var(--tl-track-tag);
  text-transform: uppercase;
  font-size: var(--tl-fs-xs);
  color: var(--tl-gold-300);
  opacity: .85;
}
.tl-eyebrow {
  font-size: var(--tl-fs-xs);
  font-weight: 500;
  letter-spacing: var(--tl-track-eyebrow);
  text-transform: uppercase;
  color: var(--tl-text-mid);   /* neutro: el violeta es solo profundidad */
}
.tl-h1, .tl-h2, .tl-h3 {
  font-family: var(--tl-font-display);
  color: var(--tl-text-hi);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
}
.tl-h1 { font-size: var(--tl-fs-h1); font-weight: 300; }
.tl-h2 { font-size: var(--tl-fs-h2); font-weight: 300; }
.tl-h3 { font-size: var(--tl-fs-h3); font-weight: 400; }
.tl-hero-title { font-size: var(--tl-fs-hero); font-weight: 200; letter-spacing: .02em; }
.tl-gold-text {
  background: linear-gradient(120deg, var(--tl-gold-100), var(--tl-gold-500) 55%, var(--tl-gold-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tl-rim-text {
  background: var(--tl-rim);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tl-muted { color: var(--tl-text-mid); }
.tl-mono  { font-family: var(--tl-font-mono); font-size: var(--tl-fs-sm); }

/* ---------- Rim border (borde gradiente que respeta el radio) ------------ */
.tl-rim-border { position: relative; isolation: isolate; }
.tl-rim-border::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: var(--tl-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
}
.tl-rim-border--soft::after { background: var(--tl-rim-soft); padding: 1px; opacity: 1; }

/* ---------- LIQUID GLASS -------------------------------------------------- */
.tl-glass {
  position: relative; isolation: isolate;
  border-radius: var(--tl-r-xl);
  background: var(--tl-glass-bg);
  -webkit-backdrop-filter: var(--tl-glass-blur); backdrop-filter: var(--tl-glass-blur);
  border: 1px solid var(--tl-glass-border);
  box-shadow: var(--tl-glass-inset), var(--tl-shadow-3), var(--tl-glow-dual);
  overflow: hidden;
  transition: transform var(--tl-dur) var(--tl-ease-glass), box-shadow var(--tl-dur) var(--tl-ease);
}
/* Reflejo especular superior-izquierdo, como en el icono */
.tl-glass::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(90% 60% at 18% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    radial-gradient(60% 40% at 92% 100%, rgba(136,130,245,.14), rgba(136,130,245,0) 60%),
    var(--tl-specular),
    var(--tl-eclipse);
}
.tl-glass > * { position: relative; z-index: 1; }
.tl-glass--sm { border-radius: var(--tl-r-lg); }
.tl-glass--xs { border-radius: var(--tl-r-md); }
.tl-glass--pill { border-radius: var(--tl-r-pill); }
.tl-glass--rim { border-color: transparent; }
.tl-glass--rim::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px; background: var(--tl-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tl-glass--hover:hover { transform: translateY(-3px); box-shadow: var(--tl-glass-inset), var(--tl-shadow-3), var(--tl-glow-dual), var(--tl-glow-gold); }
.tl-glass--deep { -webkit-backdrop-filter: var(--tl-glass-blur-lg); backdrop-filter: var(--tl-glass-blur-lg); }

/* ---------- NEUMORFISMO --------------------------------------------------- */
.tl-neu {
  border-radius: var(--tl-r-lg);
  background: var(--tl-neu-bg);
  box-shadow: var(--tl-neu-raised);
  border: 1px solid rgba(255,255,255,.03);
  transition: box-shadow var(--tl-dur) var(--tl-ease), transform var(--tl-dur) var(--tl-ease);
}
.tl-neu--sm      { border-radius: var(--tl-r-md); box-shadow: var(--tl-neu-raised-sm); }
.tl-neu--pressed { box-shadow: var(--tl-neu-pressed); background: var(--tl-neu-bg-pressed); }
.tl-neu--flat    { box-shadow: var(--tl-neu-flat); }
.tl-neu--pill    { border-radius: var(--tl-r-pill); }
.tl-neu--rim     { box-shadow: var(--tl-neu-raised), var(--tl-glow-dual); }

/* ---------- BOTONES ------------------------------------------------------- */
.tl-btn {
  --_h: 46px;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--_h); padding: 0 22px;
  border-radius: var(--tl-r-pill);
  font-family: var(--tl-font-body); font-weight: 500; font-size: var(--tl-fs-sm);
  letter-spacing: .02em; text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; color: var(--tl-text-hi);
  position: relative; isolation: isolate; overflow: hidden;
  transition: transform var(--tl-dur-fast) var(--tl-ease), box-shadow var(--tl-dur) var(--tl-ease), filter var(--tl-dur) var(--tl-ease);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.tl-btn:active { transform: translateY(1px) scale(.985); }
.tl-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(252,167,12,.45); }
.tl-btn--sm { --_h: 36px; padding: 0 16px; font-size: var(--tl-fs-xs); }
.tl-btn--lg { --_h: 56px; padding: 0 30px; font-size: var(--tl-fs-body); }

/* Primario: relleno oro metalico (como las letras del logotipo) */
.tl-btn--gold {
  color: var(--tl-text-on-gold);
  background: linear-gradient(180deg, #FFF4D0 0%, var(--tl-gold-400) 28%, var(--tl-gold-500) 62%, #D8973A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(120,70,0,.25), var(--tl-glow-gold), var(--tl-shadow-2);
}
.tl-btn--gold:hover { filter: brightness(1.06) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(120,70,0,.25), 0 0 0 1px rgba(252,167,12,.5), 0 12px 40px -8px rgba(252,167,12,.6); }

/* Glass: vidrio con rim dual (el icono como boton) */
.tl-btn--glass {
  background: var(--tl-glass-bg);
  -webkit-backdrop-filter: var(--tl-glass-blur); backdrop-filter: var(--tl-glass-blur);
  box-shadow: var(--tl-glass-inset), var(--tl-shadow-2);
  border-color: rgba(255,255,255,.10);
}
.tl-btn--glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: var(--tl-rim); opacity: .75; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--tl-dur) var(--tl-ease);
}
.tl-btn--glass:hover { box-shadow: var(--tl-glass-inset), var(--tl-shadow-2), var(--tl-glow-dual); }
.tl-btn--glass:hover::after { opacity: 1; }

/* Neumorfico: se hunde al presionar */
.tl-btn--neu {
  background: var(--tl-neu-bg);
  box-shadow: var(--tl-neu-raised-sm);
  border-color: rgba(255,255,255,.03);
  color: var(--tl-gold-300);
}
.tl-btn--neu:hover { color: var(--tl-gold-100); box-shadow: var(--tl-neu-raised-sm), var(--tl-glow-gold); }
.tl-btn--neu:active, .tl-btn--neu.is-active { box-shadow: var(--tl-neu-pressed); transform: none; }

/* Violeta: accion secundaria fuerte */
.tl-btn--violet {
  color: #fff;
  background: linear-gradient(180deg, #9B7BFF 0%, var(--tl-violet-600) 45%, var(--tl-violet-core) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--tl-glow-violet), var(--tl-shadow-2);
}
.tl-btn--ghost { color: var(--tl-text-mid); background: transparent; }
.tl-btn--ghost:hover { color: var(--tl-gold-300); background: rgba(255,255,255,.04); }

/* ---------- INPUTS (neumorfico hundido, foco oro) ------------------------- */
.tl-field { display: grid; gap: 8px; }
.tl-label { font-size: var(--tl-fs-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-text-mid); }
.tl-input, .tl-select, .tl-textarea {
  box-sizing: border-box;
  width: 100%; min-height: 48px; padding: 12px 18px;
  border-radius: var(--tl-r-md);
  background: var(--tl-neu-bg-pressed);
  box-shadow: var(--tl-neu-pressed);
  border: 1px solid rgba(255,255,255,.04);
  color: var(--tl-text-hi); font: inherit; font-size: var(--tl-fs-sm);
  transition: box-shadow var(--tl-dur) var(--tl-ease), border-color var(--tl-dur) var(--tl-ease);
}
.tl-input::placeholder, .tl-textarea::placeholder { color: var(--tl-text-low); }
.tl-input:focus, .tl-select:focus, .tl-textarea:focus {
  outline: none; border-color: rgba(252,167,12,.45);
  box-shadow: var(--tl-neu-pressed), 0 0 0 3px rgba(252,167,12,.16), 0 0 24px -6px rgba(252,167,12,.5);
}
.tl-textarea { min-height: 120px; resize: vertical; }

/* ---------- TOGGLE neumorfico -------------------------------------------- */
.tl-toggle { position: relative; display: inline-block; width: 58px; height: 32px; cursor: pointer; }
.tl-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tl-toggle__track {
  position: absolute; inset: 0; border-radius: var(--tl-r-pill);
  background: var(--tl-neu-bg-pressed);
  box-shadow: var(--tl-neu-pressed); transition: background var(--tl-dur) var(--tl-ease);
}
.tl-toggle__thumb {
  position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--tl-neu-thumb);
  box-shadow: -2px -2px 5px rgba(255,255,255,.06), 3px 3px 8px rgba(0,0,0,.7);
  transition: transform var(--tl-dur) var(--tl-ease-glass), background var(--tl-dur) var(--tl-ease);
}
.tl-toggle input:checked ~ .tl-toggle__track { background: linear-gradient(135deg, rgba(252,167,12,.35), rgba(98,20,236,.45)); }
.tl-toggle input:checked ~ .tl-toggle__thumb {
  transform: translateX(26px);
  background: linear-gradient(180deg, #FFF4D0, var(--tl-gold-500));
  box-shadow: 0 0 14px rgba(252,167,12,.6), 2px 2px 6px rgba(0,0,0,.6);
}

/* ---------- CHIPS / BADGES ----------------------------------------------- */
.tl-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
  border-radius: var(--tl-r-pill); font-size: var(--tl-fs-xs); font-weight: 500; letter-spacing: .04em;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--tl-text-mid);
}
.tl-chip--gold   { color: var(--tl-gold-300);   border-color: rgba(252,167,12,.35); background: rgba(252,167,12,.08); }
.tl-chip--violet { color: var(--tl-violet-300); border-color: rgba(136,130,245,.35); background: rgba(98,20,236,.12); }
.tl-chip--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tl-success); box-shadow: 0 0 10px var(--tl-success); }

/* ---------- NAV de vidrio ------------------------------------------------- */
.tl-nav {
  position: sticky; top: 12px; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 10px 14px 10px 22px; margin-inline: auto;
  border-radius: var(--tl-r-pill);
  background: var(--tl-glass-bg);
  -webkit-backdrop-filter: var(--tl-glass-blur); backdrop-filter: var(--tl-glass-blur);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--tl-glass-inset), var(--tl-shadow-2);
}
.tl-nav a { color: var(--tl-text-mid); text-decoration: none; font-size: var(--tl-fs-sm); transition: color var(--tl-dur-fast); }
.tl-nav a:hover, .tl-nav a[aria-current] { color: var(--tl-gold-300); }

/* ---------- MARCA: anillo eclipse en CSS puro ----------------------------- */
/* Anillo partido: arco izquierdo oro caliente (luz arriba-izq), arco derecho
   champan palido. Dos cortes: ~1 en punto y ~7 en punto, como el isotipo.
   --_s = diametro, --_w = grosor del anillo como % del radio (26% ~ icono). */
.tl-ring {
  --_s: 96px; --_w: 26%;
  display: block; width: var(--_s); aspect-ratio: 1; border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(from 0deg,
      #F5D48A 0deg, #FFF3C9 22deg,
      transparent 30deg, transparent 50deg,
      #FBEDBD 56deg, #E9D5A8 120deg, #C9A860 206deg,
      transparent 212deg, transparent 232deg,
      #B78A3C 238deg, var(--tl-gold-500) 285deg, var(--tl-gold-core) 322deg, #F5D48A 360deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - var(--_w) - 1px), #000 calc(100% - var(--_w)));
          mask: radial-gradient(circle closest-side, transparent calc(100% - var(--_w) - 1px), #000 calc(100% - var(--_w)));
  filter: drop-shadow(-3px -3px 10px rgba(252,167,12,.45)) drop-shadow(4px 5px 12px rgba(98,20,236,.55));
}
/* Cerrado: la "O" del logotipo (sin cortes) */
.tl-ring--closed {
  background: conic-gradient(from 0deg,
      #F5D48A 0deg, #FFF3C9 30deg, #FBEDBD 70deg, #E9D5A8 130deg, #C9A860 210deg,
      #B78A3C 240deg, var(--tl-gold-500) 285deg, var(--tl-gold-core) 322deg, #F5D48A 360deg);
}

/* ---------- KPI / stat tile ----------------------------------------------- */
.tl-kpi { display: grid; gap: 6px; padding: 22px 24px; }
.tl-kpi__label { font-size: var(--tl-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tl-text-low); }
.tl-kpi__value { font-family: var(--tl-font-display); font-weight: 300; font-size: 2.2rem; line-height: 1; color: var(--tl-text-hi); }
.tl-kpi__delta { font-size: var(--tl-fs-xs); color: var(--tl-success); }

/* ---------- Divisores ----------------------------------------------------- */
.tl-divider { height: 1px; border: 0; background: var(--tl-rim-soft); opacity: .6; }
.tl-divider--plain { background: var(--tl-ink-300); opacity: 1; }

/* ---------- Utilidades ---------------------------------------------------- */
.tl-container { width: min(1180px, 100% - 40px); margin-inline: auto; }
.tl-stack > * + * { margin-top: var(--tl-sp-4); }
.tl-row { display: flex; flex-wrap: wrap; gap: var(--tl-sp-4); align-items: center; }
.tl-grid { display: grid; gap: var(--tl-sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tl-pad { padding: var(--tl-sp-6); }
.tl-pad-sm { padding: var(--tl-sp-5); }

@media (prefers-reduced-motion: reduce) {
  .tl-glass, .tl-neu, .tl-btn, .tl-toggle__thumb { transition: none; }
}