/* THE STEADY FEW · componentes (identidad v2). Requiere tokens.css y las fuentes Montserrat e Inter. */
.tsf-root { font-family: var(--tsf-font-text); color: var(--tsf-white); background: var(--tsf-black); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.tsf-root *, .tsf-root *::before, .tsf-root *::after { box-sizing: border-box; }
.tsf-display { font-family: var(--tsf-font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1.06; font-weight: 700; }
.tsf-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1.2 var(--tsf-font-text); letter-spacing: .26em; text-transform: uppercase; }
.tsf-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--tsf-silver); flex: none; }
.tsf-muted { color: var(--tsf-ash); }
.tsf-ink-silver { color: var(--tsf-silver); }
.tsf-rule { height: 2px; background: linear-gradient(90deg, var(--tsf-silver) 0 48px, var(--tsf-steel) 48px); border: 0; margin: 0; }

/* Botones: cápsula. Principal relleno en platino con texto negro; secundario con contorno blanco. */
.tsf-btn { --h: 52px; display: inline-flex; align-items: center; justify-content: center; min-height: var(--h); padding: 0 30px; border: 2px solid transparent; border-radius: 999px; background: var(--tsf-accent); color: var(--tsf-black); font: 600 13px/1 var(--tsf-font-display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: filter .15s, background .15s, color .15s; }
.tsf-btn > span { display: inline-flex; align-items: center; gap: 12px; }
.tsf-btn:hover { filter: brightness(1.08); }
.tsf-btn:active { transform: translateY(1px); }
.tsf-btn:focus-visible { outline: 3px solid var(--tsf-white); outline-offset: 3px; }
.tsf-btn:disabled, .tsf-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; filter: none; }
.tsf-btn--secondary { background: transparent; border-color: var(--tsf-white); color: var(--tsf-white); }
.tsf-btn--secondary:hover { background: var(--tsf-white); color: var(--tsf-black); filter: none; }
.tsf-btn--dark { background: var(--tsf-graphite); border-color: var(--tsf-steel); color: var(--tsf-white); }
.tsf-btn--ghost { background: transparent; padding: 0 12px; color: var(--tsf-white); }
.tsf-btn--ghost:hover { text-decoration: underline; filter: none; }
.tsf-btn--sm { --h: 44px; font-size: 11px; padding: 0 20px; }
.tsf-btn--lg { --h: 60px; font-size: 14px; padding: 0 36px; }
.tsf-btn--block { display: flex; width: 100%; }

/* Formularios */
.tsf-field { display: grid; gap: 8px; }
.tsf-label { font: 600 12px/1.2 var(--tsf-font-text); letter-spacing: .1em; text-transform: uppercase; }
.tsf-input { height: 52px; padding: 0 16px; background: var(--tsf-graphite); border: 1.5px solid var(--tsf-steel); border-radius: var(--tsf-radius-sm); color: var(--tsf-white); font: 500 16px/1 var(--tsf-font-text); width: 100%; }
.tsf-input::placeholder { color: var(--tsf-ash); }
.tsf-input:focus { outline: none; border-color: var(--tsf-white); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.tsf-help { font-size: 13px; color: var(--tsf-ash); }
.tsf-error { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tsf-danger); }
.tsf-field--error .tsf-input { border-color: var(--tsf-danger); }
.tsf-check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.tsf-check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--tsf-ash); border-radius: 7px; background: transparent; display: grid; place-content: center; }
.tsf-check input:checked { background: var(--tsf-accent); border-color: var(--tsf-accent); }
.tsf-check input:checked::after { content: ""; width: 11px; height: 6px; border-left: 3px solid var(--tsf-black); border-bottom: 3px solid var(--tsf-black); transform: rotate(-45deg) translate(1px, -1px); }
.tsf-check input:focus-visible { outline: 3px solid var(--tsf-white); outline-offset: 2px; }
.tsf-check a { color: var(--tsf-white); }

/* Barras de progreso */
.tsf-progress { position: relative; height: 8px; background: var(--tsf-steel); overflow: hidden; border-radius: 999px; }
.tsf-progress > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); background: linear-gradient(90deg, var(--tsf-silver), var(--tsf-white)); border-radius: 999px; }
.tsf-progress--lg { height: 12px; }
.tsf-seg { display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap: 4px; }
.tsf-seg > i { height: 8px; background: var(--tsf-steel); border-radius: 999px; }
.tsf-seg > i.on { background: var(--tsf-platinum); }
.tsf-meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--tsf-ash); margin-bottom: 8px; }
.tsf-meter-row b { color: var(--tsf-white); font-weight: 600; }

/* Navegación */
.tsf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tsf-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1.5px solid var(--tsf-steel); border-radius: 999px; font: 600 13px/1 var(--tsf-font-text); color: var(--tsf-white); background: transparent; }
.tsf-chip--on { background: var(--tsf-platinum); color: var(--tsf-black); border-color: var(--tsf-platinum); }
.tsf-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--tsf-steel); background: var(--tsf-black); padding: 8px 4px; }
.tsf-tab { display: grid; justify-items: center; gap: 4px; min-height: 48px; padding: 6px 0; font: 600 11px/1 var(--tsf-font-text); color: var(--tsf-ash); text-decoration: none; }
.tsf-tab[aria-current="page"] { color: var(--tsf-white); box-shadow: inset 0 2px 0 var(--tsf-silver); }
.tsf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 24px; border-bottom: 1px solid var(--tsf-steel); background: var(--tsf-black); }

/* Tarjetas y datos */
.tsf-card { background: var(--tsf-graphite); border: 1px solid var(--tsf-steel); border-radius: var(--tsf-radius-md); padding: 16px; }
.tsf-card--media { display: grid; grid-template-columns: 1fr 104px; gap: 12px; align-items: stretch; padding: 0; overflow: hidden; }
.tsf-card--media > div:first-child { padding: 14px 0 14px 16px; display: grid; align-content: center; gap: 4px; }
.tsf-thumb { background: linear-gradient(135deg, #4a4d52, #0b0b0b); position: relative; }
.tsf-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tsf-graphite), transparent 55%); }
.tsf-stat { display: grid; gap: 2px; }
.tsf-stat b { font: 700 28px/1.1 var(--tsf-font-display); letter-spacing: .01em; }
.tsf-stat span { font-size: 12px; color: var(--tsf-ash); }
.tsf-up { color: var(--tsf-success); font-weight: 600; }
.tsf-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--tsf-steel); display: grid; place-items: center; font: 600 14px/1 var(--tsf-font-text); flex: none; }
.tsf-play { width: 44px; height: 44px; border-radius: 50%; background: var(--tsf-platinum); color: var(--tsf-black); display: grid; place-items: center; flex: none; }

/* Avisos y diálogos */
.tsf-alert { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 16px; border-left: 4px solid var(--c, var(--tsf-info)); border-radius: 0 var(--tsf-radius-sm) var(--tsf-radius-sm) 0; background: var(--tsf-graphite); font-size: 14px; }
.tsf-alert svg { color: var(--c, var(--tsf-info)); }
.tsf-alert--success { --c: var(--tsf-success); }
.tsf-alert--warning { --c: var(--tsf-warning); }
.tsf-alert--danger { --c: var(--tsf-danger); }
.tsf-sheet { background: var(--tsf-graphite); border: 1px solid var(--tsf-steel); border-top: 3px solid var(--tsf-silver); border-radius: var(--tsf-radius-md); padding: 24px; display: grid; gap: 16px; }
.tsf-cookie { background: var(--tsf-graphite); border: 1px solid var(--tsf-steel); border-top: 3px solid var(--tsf-silver); border-radius: var(--tsf-radius-md); padding: 20px 24px; display: grid; gap: 16px; font-size: 14px; }
.tsf-cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Capa opcional: Liquid Glass (efecto iOS 26) =====
   Base: desenfoque + saturación (todos los navegadores modernos). Refractado SVG solo en Chromium (.lg-refract).
   Alternativa sólida: .no-glass, prefers-reduced-transparency, prefers-contrast y navegadores sin backdrop-filter. */
:root { --tsf-glass-tint: rgba(11,11,11,.40); --tsf-glass-sheen: rgba(255,255,255,.14); --tsf-glass-hi: rgba(255,255,255,.55); --tsf-glass-blur: 22px; --tsf-glass-sat: 1.7; --tsf-glass-radius: 28px; --tsf-accent-glass: #E6E6E6; }
.tsf-glass { position: relative; isolation: isolate; border-radius: var(--tsf-glass-radius);
  background: linear-gradient(135deg, var(--tsf-glass-sheen), rgba(255,255,255,.03) 55%, rgba(255,255,255,.08)), var(--tsf-glass-tint);
  -webkit-backdrop-filter: blur(var(--tsf-glass-blur)) saturate(var(--tsf-glass-sat)) brightness(1.06);
  backdrop-filter: blur(var(--tsf-glass-blur)) saturate(var(--tsf-glass-sat)) brightness(1.06);
  box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 var(--tsf-glass-hi), inset 0 -1px 0 rgba(255,255,255,.08);
  transition: transform .25s ease, box-shadow .25s ease; }
.tsf-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 20%) var(--my, 0%), rgba(255,255,255,.26), transparent 48%); opacity: .75; mix-blend-mode: screen; }
.tsf-glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.75), rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 58%, rgba(255,255,255,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.tsf-glass.tsf-card { border: 0; }
.tsf-glass--thin { --tsf-glass-blur: 16px; --tsf-glass-tint: rgba(11,11,11,.32); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 var(--tsf-glass-hi), inset 0 -1px 0 rgba(255,255,255,.08); }
.tsf-glass--pill { --tsf-glass-radius: 999px; }
.tsf-glass--interactive:hover { transform: translateY(-2px); }
.lg-refract .tsf-glass--lens { -webkit-backdrop-filter: none; backdrop-filter: url(#tsf-lens) blur(8px) saturate(1.7) brightness(1.08); }
.tsf-glass .tsf-input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); border-radius: 16px; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.tsf-glass .tsf-input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.35); }
.tsf-glass .tsf-check input { border-radius: 8px; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }

/* Botones de cristal (cápsula). Texto blanco con contraste 4,5:1 o más. */
.tsf-btn--glass, .tsf-btn--glass-accent { border: 0; border-radius: 999px; position: relative; isolation: isolate; }
.tsf-btn--glass { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05)), rgba(11,11,11,.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.4); }
.tsf-btn--glass:hover { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.08)), rgba(11,11,11,.42); filter: none; }
.tsf-btn--glass-accent { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78) 60%), var(--tsf-accent-glass); color: var(--tsf-black);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -10px 18px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.45); }

/* Alternativa sólida */
html.no-glass .tsf-glass, html.no-glass .tsf-btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1A1C1F; box-shadow: 0 0 0 1px #34373B; }
html.no-glass .tsf-glass::before, html.no-glass .tsf-glass::after { display: none; }
html.no-glass .tsf-btn--glass-accent { box-shadow: none; background: var(--tsf-accent-glass); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tsf-glass, .tsf-btn--glass { background: #1A1C1F; box-shadow: 0 0 0 1px #34373B; }
  .tsf-glass::before, .tsf-glass::after { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tsf-glass, .tsf-btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1A1C1F; box-shadow: 0 0 0 1px #34373B; }
  .tsf-glass::before, .tsf-glass::after { display: none; }
}
@media (prefers-contrast: more) {
  .tsf-glass, .tsf-btn--glass { background: #141414; box-shadow: 0 0 0 2px #FFFFFF; }
  .tsf-glass::before, .tsf-glass::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tsf-glass { transition: none; } .tsf-glass--interactive:hover { transform: none; } }