/* KairSun Web — mock 1:1 del hub de Skills (pantalla 44).
 *
 * Contenido: biblioteca (panel, búsqueda, filas con rank real, tags), sheet
 * Organizar, Atributos (6 pilares), Rangos (Novato→Dominio) y la cara
 * Tracking general (selector de período, barras apiladas por categoría,
 * heatmap 30D, Top Skills y Práctica por categoría).
 *
 * Reglas duras: solo CSS, sin JS, sin inline styles, sin prioridad forzada.
 * Prefijo .sk- para no rozar otras pantallas. Todo el interior se mide en
 * calc(N * var(--u)) como pide ks-screens-base.css.
 *
 * Evidencia (repo app, READ-ONLY):
 * - Biblioteca/panel/filtros: presentation/widgets/skill_library_panel.dart,
 *   skills_filters_sheet.dart, domain/models/skill_library_models.dart.
 * - Tracking general: screens/skills_general_history_screen.dart,
 *   widgets/tracking/category_stacked_bars_chart.dart,
 *   widgets/skill_tracking_calendar.dart, widgets/tracking/top_skills_card.dart,
 *   widgets/tracking/practice_by_category_card.dart.
 * - Atributos: screens/attributes_tab_content.dart, shared/constants/core_attribute.dart.
 * - Rangos: systems/gamification/skill_rank.dart, screens/skill_rank_info_screen.dart.
 * - Copy: lib/l10n/app_es.arb (DM Sans real, rioplatense).
 */

[data-screen="skills"] {
  --sk-cyan: #5bf6ff;
  --sk-cyan-2: #38e0ff;
  --sk-purple: #8b5cf6; /* SkillsGeneralHistoryScreen._accent */
  --sk-attr: #6c3bff; /* attributes_tab_content.dart _C.accent */
  --sk-ink: #071315; /* texto sobre accent (apply real) */
  --sk-surface: #14161c;
  --sk-elev: #1d2029;
  --sk-glass: rgba(255, 255, 255, 0.06);
  --sk-glass-line: rgba(255, 255, 255, 0.14);
  --sk-sheet-top: #191c25;
}

/* ── Base de la pantalla ─────────────────────────────────────────────────── */

.sk-sprite {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.sk-i {
  display: block;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  fill: currentColor;
  flex: none;
}

.sk-screen {
  display: block;
}

.sk-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Safe-area superior: la isla del bezel ocupa hasta 51u. */
  padding-top: calc(44 * var(--u));
  color: var(--ks-text);
  font-family: var(--ks-font);
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(91, 246, 255, 0.10), transparent 62%),
    var(--ks-bg);
}

/* Teléfonos sin shell (Atributos y Rangos): la isla no puede tapar el header. */
.phone__screen > .sk-pane {
  padding-top: calc(44 * var(--u));
}

/* Toggle Skills | Tracking sobre el contrato de ks-screens-base.css */
.sk-view {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.sk-view .ks-view__tabs {
  align-self: center;
  margin: calc(8 * var(--u)) 0 calc(4 * var(--u));
  flex: none;
}
.sk-view .ks-view__panes {
  flex: 1;
  min-height: 0;
}
.sk-view .ks-pane {
  position: relative;
  height: 100%;
}

.sk-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sk-pane--lib {
  background: radial-gradient(120% 45% at 50% -10%, rgba(91, 246, 255, 0.07), transparent 60%),
    var(--ks-bg);
}
.sk-pane--track {
  background: radial-gradient(120% 50% at 50% -10%, rgba(139, 92, 246, 0.16), transparent 60%),
    var(--ks-bg);
}

/* ── Piezas compartidas ──────────────────────────────────────────────────── */

.sk-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(13 * var(--u));
  color: var(--sk-cyan);
  background: rgba(91, 246, 255, 0.10);
  border: 1px solid rgba(91, 246, 255, 0.28);
  text-decoration: none;
  flex: none;
}
.sk-iconbtn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--sk-glass-line);
  color: var(--ks-text-2);
}
.sk-iconbtn--close {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--sk-glass-line);
  color: var(--ks-text);
}
.sk-iconbtn .sk-i {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}

.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-height: calc(48 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(15 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.sk-btn--primary {
  flex: 2;
  background: var(--sk-cyan);
  color: var(--sk-ink);
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(56, 224, 255, 0.24);
}
.sk-btn--ghost {
  flex: 1;
  color: var(--sk-cyan);
  background: rgba(91, 246, 255, 0.10);
  border: 1px solid rgba(91, 246, 255, 0.34);
}

/* Acento por tag real (tag_system.dart colorHex). --c = tinte de superficie,
 * --c-ink = variante legible sobre fondo oscuro. */
.sk-tag--code { --c: #00e676; --c-ink: #6bffb0; }
.sk-tag--read { --c: #8d6e63; --c-ink: #d8b9a8; }
.sk-tag--music { --c: #e91e63; --c-ink: #ff7bac; }
.sk-tag--run { --c: #f4511e; --c-ink: #ff9d6e; }
.sk-tag--lang { --c: #0097a7; --c-ink: #4fd8ef; }
.sk-tag--med { --c: #9575cd; --c-ink: #c3a6f5; }
.sk-tag--study { --c: #1e88e5; --c-ink: #7ab8ff; }
.sk-tag--design { --c: #e040fb; --c-ink: #e79bff; }

/* Porcentajes como dato de clase (nada inline): --p intensidad de relleno,
 * --h altura de barra. Se usan con calc(var(--x) * 1%). */
.sk-p--5 { --p: 5; } .sk-p--10 { --p: 10; } .sk-p--15 { --p: 15; }
.sk-p--20 { --p: 20; } .sk-p--25 { --p: 25; } .sk-p--30 { --p: 30; }
.sk-p--35 { --p: 35; } .sk-p--40 { --p: 40; } .sk-p--45 { --p: 45; }
.sk-p--50 { --p: 50; } .sk-p--55 { --p: 55; } .sk-p--60 { --p: 60; }
.sk-p--65 { --p: 65; } .sk-p--70 { --p: 70; } .sk-p--75 { --p: 75; }
.sk-p--80 { --p: 80; } .sk-p--85 { --p: 85; } .sk-p--90 { --p: 90; }
.sk-p--95 { --p: 95; } .sk-p--100 { --p: 100; }
.sk-h--5 { --h: 5; } .sk-h--10 { --h: 10; } .sk-h--15 { --h: 15; }
.sk-h--20 { --h: 20; } .sk-h--25 { --h: 25; } .sk-h--30 { --h: 30; }
.sk-h--35 { --h: 35; } .sk-h--40 { --h: 40; } .sk-h--45 { --h: 45; }
.sk-h--50 { --h: 50; } .sk-h--55 { --h: 55; } .sk-h--60 { --h: 60; }
.sk-h--65 { --h: 65; } .sk-h--70 { --h: 70; } .sk-h--75 { --h: 75; }
.sk-h--80 { --h: 80; } .sk-h--85 { --h: 85; } .sk-h--90 { --h: 90; }
.sk-h--100 { --h: 100; }
.sk-hh--15 { --hh: 15; } .sk-hh--25 { --hh: 25; } .sk-hh--35 { --hh: 35; }
.sk-hh--40 { --hh: 40; } .sk-hh--45 { --hh: 45; } .sk-hh--50 { --hh: 50; }
.sk-hh--55 { --hh: 55; } .sk-hh--60 { --hh: 60; } .sk-hh--65 { --hh: 65; }
.sk-hh--100 { --hh: 100; }

/* Scroll interno estilo app (fino, discreto) */
.sk-list,
.sk-trackscroll,
.sk-attrs__scroll,
.sk-rank__scroll,
.sk-sheet__scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sk-list::-webkit-scrollbar,
.sk-trackscroll::-webkit-scrollbar,
.sk-attrs__scroll::-webkit-scrollbar,
.sk-rank__scroll::-webkit-scrollbar,
.sk-sheet__scroll::-webkit-scrollbar {
  width: calc(3 * var(--u));
}
.sk-list::-webkit-scrollbar-thumb,
.sk-trackscroll::-webkit-scrollbar-thumb,
.sk-attrs__scroll::-webkit-scrollbar-thumb,
.sk-rank__scroll::-webkit-scrollbar-thumb,
.sk-sheet__scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

[data-screen="skills"] a:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
  border-radius: calc(12 * var(--u));
}

/* ── Biblioteca: panel, chips, filas ─────────────────────────────────────── */

.sk-libtop {
  flex: none;
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u));
}

.sk-panel {
  display: flex;
  align-items: stretch;
  gap: calc(6 * var(--u));
}
.sk-panel__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(18 * var(--u));
  text-decoration: none;
  color: var(--ks-text);
  /* Color.lerp(surface, _skillsAccent, .085) — skill_library_panel.dart:143 */
  background: linear-gradient(160deg, rgba(91, 246, 255, 0.14), rgba(91, 246, 255, 0.05));
  border: 1px solid rgba(91, 246, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.sk-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(12 * var(--u));
  color: var(--sk-cyan);
  background: rgba(91, 246, 255, 0.12);
  flex: none;
}
.sk-panel__icon .sk-i {
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
}
.sk-panel__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
}
.sk-panel__title {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--ks-text);
}
.sk-panel__name {
  padding: 0 calc(7 * var(--u));
  border-radius: 999px;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  font-style: normal;
  color: var(--sk-cyan);
  background: rgba(91, 246, 255, 0.10);
}
.sk-panel__sub {
  font-size: calc(11 * var(--u));
  color: var(--ks-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-panel__chev {
  color: var(--ks-muted);
  display: inline-flex;
  flex: none;
}
.sk-panel__chev .sk-i {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.sk-chiprow {
  display: flex;
  gap: calc(6 * var(--u));
  margin-top: calc(8 * var(--u));
  overflow-x: auto;
  padding-bottom: calc(2 * var(--u));
  scrollbar-width: none;
}
.sk-chiprow::-webkit-scrollbar { display: none; }
.sk-fchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: calc(28 * var(--u));
  padding: 0 calc(11 * var(--u));
  border-radius: 999px;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: var(--ks-text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sk-glass-line);
  text-decoration: none;
}
.sk-fchip--on {
  color: var(--sk-cyan);
  font-weight: 800;
  background: rgba(91, 246, 255, 0.14);
  border-color: rgba(91, 246, 255, 0.44);
}
.sk-fchip--link {
  color: var(--ks-text);
  border-style: dashed;
}
.sk-fchip .sk-i {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  color: var(--sk-cyan);
}

.sk-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(104 * var(--u));
}

/* Fila de skill: arte real del rank (40–64px), nombre, rango y tiempo. */
.sk-row {
  display: flex;
  gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  border-radius: calc(20 * var(--u));
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--sk-glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sk-row__art {
  width: calc(52 * var(--u));
  aspect-ratio: 3 / 4;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(14 * var(--u));
  background-color: rgba(0, 230, 118, 0.16);
  background-color: color-mix(in srgb, var(--c) 16%, transparent);
  background-image: radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%);
  border: 1px solid rgba(0, 230, 118, 0.46);
  border: 1px solid color-mix(in srgb, var(--c) 46%, transparent);
  overflow: hidden;
}
.sk-row__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sk-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
}
.sk-row__head {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}
.sk-row__name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  color: var(--ks-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-pin {
  color: var(--c-ink);
  display: inline-flex;
  flex: none;
}
.sk-pin .sk-i {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
.sk-row__line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-width: 0;
  font-size: calc(11.5 * var(--u));
}
.sk-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  max-width: 45%;
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-ink);
  background: rgba(0, 230, 118, 0.18);
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border: 1px solid rgba(0, 230, 118, 0.4);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.sk-dot {
  width: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 50%;
  background: var(--ks-muted);
  flex: none;
}
.sk-row__rank {
  color: var(--c-ink);
  font-weight: 700;
  white-space: nowrap;
}
.sk-progress {
  height: calc(6 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.sk-progress > i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, #66f0ad, var(--c));
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #ffffff), var(--c));
}
.sk-row__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 * var(--u)) calc(10 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  color: var(--ks-muted);
  font-variant-numeric: tabular-nums;
}
.sk-row__flag {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  align-self: flex-start;
  margin-top: calc(1 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-gold-hi);
  background: rgba(245, 196, 81, 0.12);
  border: 1px solid rgba(245, 196, 81, 0.42);
}
.sk-row__flag .sk-i {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}
.sk-row--pinned {
  box-shadow: inset 0 0 0 1px rgba(0, 230, 118, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sk-row--resume {
  border-color: rgba(245, 196, 81, 0.34);
}

/* Accesos a Atributos y Rangos (en la app, tab de Atributos + ruta de rangos) */
.sk-quicknav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(6 * var(--u));
  margin-top: calc(8 * var(--u));
}
.sk-quicknav__item {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(48 * var(--u));
  padding: calc(6 * var(--u)) calc(9 * var(--u));
  border-radius: calc(16 * var(--u));
  text-decoration: none;
  color: var(--ks-text);
  background: rgba(108, 59, 255, 0.10);
  border: 1px solid rgba(108, 59, 255, 0.30);
}
.sk-quicknav__item:last-child {
  background: rgba(91, 246, 255, 0.08);
  border-color: rgba(91, 246, 255, 0.28);
}
.sk-quicknav__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 900;
  color: #d9ccff;
  background: rgba(108, 59, 255, 0.22);
  border: 1px solid rgba(108, 59, 255, 0.46);
  flex: none;
}
.sk-quicknav__item:last-child .sk-quicknav__orb {
  color: var(--sk-cyan);
  background: rgba(91, 246, 255, 0.14);
  border-color: rgba(91, 246, 255, 0.40);
}
.sk-quicknav__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: calc(12.5 * var(--u));
  font-weight: 800;
}
.sk-quicknav__label small {
  font-size: calc(9.5 * var(--u));
  font-weight: 600;
  color: var(--ks-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA Forge (KairsunCtaPanel: label + subtitle) */
.sk-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(18 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(to bottom, rgba(10, 12, 16, 0) 0%, var(--ks-bg) 46%);
  text-align: center;
}
.sk-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  min-height: calc(62 * var(--u));
  border-radius: calc(24 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--sk-ink);
  background: linear-gradient(180deg, #c9fbff 0%, var(--sk-cyan) 46%, var(--sk-cyan-2) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 calc(-3 * var(--u)) 0 rgba(26, 169, 214, 0.55) inset,
    0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(56, 224, 255, 0.30);
}
.sk-cta__btn .sk-i {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}
.sk-cta__sub {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: var(--ks-text-2);
}

/* ── Búsqueda activa (metamorfosis del panel) ────────────────────────────── */

.sk-app--search .sk-libtop {
  padding-top: calc(10 * var(--u));
}
.sk-searchbar {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
}
.sk-searchbar__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: calc(48 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--ks-elev);
  border: 1.4px solid var(--sk-cyan);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(91, 246, 255, 0.14);
}
.sk-searchbar__field > .sk-i {
  color: var(--sk-cyan);
}
.sk-searchbar__text {
  flex: 1;
  min-width: 0;
  font-size: calc(15 * var(--u));
  font-weight: 500;
  color: var(--ks-text);
}
.sk-searchbar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(26 * var(--u));
  min-height: calc(22 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: 999px;
  font-size: calc(11 * var(--u));
  font-weight: 900;
  color: var(--sk-cyan);
  background: rgba(91, 246, 255, 0.15);
  border: 1px solid rgba(91, 246, 255, 0.38);
}
.sk-searchbar__trash {
  color: var(--ks-muted);
  display: inline-flex;
}
.sk-searchbar__trash .sk-i {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}
.sk-searchhint {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  color: var(--ks-muted);
}

/* ── Tracking general ────────────────────────────────────────────────────── */

.sk-trackbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u));
  border-bottom: 1px solid var(--sk-glass-line);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.04));
}
.sk-trackbar__titles {
  flex: 1;
  min-width: 0;
}
.sk-trackbar__titles h2 {
  margin: 0;
  font-size: calc(17 * var(--u));
  font-weight: 800;
}
.sk-trackbar__titles p {
  margin: 0;
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: calc(13 * var(--u));
  color: var(--ks-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sk-glass-line);
  flex: none;
}
.sk-back .sk-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}

.sk-trackscroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(24 * var(--u));
}

.sk-period {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(3 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(139, 92, 246, 0.28);
}
.sk-period__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(36 * var(--u));
  border-radius: 999px;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  color: var(--ks-text-2);
}
.sk-period__opt--on {
  color: #d9ccff;
  font-weight: 800;
  background: rgba(139, 92, 246, 0.30);
  border: 1px solid rgba(139, 92, 246, 0.55);
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(139, 92, 246, 0.35);
}

.sk-pills {
  display: flex;
  gap: calc(6 * var(--u));
  overflow-x: auto;
  padding-bottom: calc(2 * var(--u));
  margin: 0 calc(-12 * var(--u));
  padding-left: calc(12 * var(--u));
  padding-right: calc(12 * var(--u));
  scrollbar-width: none;
}
.sk-pills::-webkit-scrollbar { display: none; }
.sk-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: calc(36 * var(--u));
  padding: 0 calc(13 * var(--u));
  border-radius: 999px;
  font-size: calc(11.5 * var(--u));
  font-weight: 600;
  white-space: nowrap;
  color: var(--ks-text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sk-glass-line);
}
.sk-pill--on {
  color: #d9ccff;
  font-weight: 800;
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(139, 92, 246, 0.50);
}
.sk-pill[class*="sk-tag--"] {
  color: var(--c-ink);
  background: rgba(0, 230, 118, 0.16);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border-color: rgba(0, 230, 118, 0.4);
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
}

.sk-summary {
  display: flex;
  align-items: center;
  padding: calc(12 * var(--u)) calc(8 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--ks-elev);
  border: 1px solid var(--sk-glass-line);
}
.sk-summary__cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
}
.sk-summary__cell b {
  font-size: calc(18 * var(--u));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sk-summary__cell span {
  font-size: calc(9.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--ks-muted);
}
.sk-summary__sep {
  width: 1px;
  height: calc(34 * var(--u));
  background: var(--sk-glass-line);
}

.sk-card {
  padding: calc(13 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--ks-elev);
  border: 1px solid var(--sk-glass-line);
}
.sk-card--chart {
  border-color: rgba(139, 92, 246, 0.24);
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.02)),
    var(--ks-elev);
}
.sk-card--top {
  border-color: rgba(139, 92, 246, 0.42);
  background: linear-gradient(140deg, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0.05)),
    var(--ks-elev);
  box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(139, 92, 246, 0.16);
}
.sk-card__head {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
}
.sk-card__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(12 * var(--u));
  color: #d9ccff;
  background: rgba(139, 92, 246, 0.26);
  border: 1px solid rgba(139, 92, 246, 0.50);
  flex: none;
}
.sk-card__orb .sk-i {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.sk-card__title {
  margin: 0;
  font-size: calc(12 * var(--u));
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--ks-text);
}
.sk-card--top .sk-card__title {
  font-size: calc(11 * var(--u));
  letter-spacing: 0.08em;
  color: var(--ks-muted);
}
.sk-card__hint {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-card__title + .sk-card__hint {
  margin-top: calc(8 * var(--u));
}

.sk-readout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin: calc(10 * var(--u)) 0 calc(8 * var(--u));
}
.sk-readout__date {
  margin: 0;
  font-size: calc(10.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ks-muted);
}
.sk-readout__value {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
}
.sk-readout__value b {
  font-size: calc(21 * var(--u));
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sk-readout__value small {
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-readout__chips {
  display: flex;
  gap: calc(5 * var(--u));
  margin-top: calc(6 * var(--u));
}
.sk-minichip {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: 999px;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  color: var(--ks-text-2);
  background: rgba(255, 255, 255, 0.06);
}
.sk-minichip--down { color: var(--ks-text-2); }
.sk-minichip--up { color: #6bffb0; background: rgba(16, 185, 129, 0.14); }
.sk-minichip__dash {
  display: inline-flex;
  gap: 2px;
}
.sk-minichip__dash i {
  width: calc(3.5 * var(--u));
  height: calc(1.6 * var(--u));
  border-radius: 999px;
  background: var(--sk-purple);
}

.sk-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: calc(5 * var(--u));
  height: calc(128 * var(--u));
  padding: 0 calc(2 * var(--u));
  border-bottom: 1px solid var(--sk-glass-line);
}
.sk-bar {
  justify-self: center;
  width: min(calc(24 * var(--u)), 66%);
  height: calc(var(--h, 0) * 1%);
  display: flex;
  flex-direction: column-reverse;
  border-radius: calc(9 * var(--u));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sk-bar > i {
  display: block;
  height: calc(var(--hh, 0) * 1%);
  background: var(--c);
}
.sk-bar--focus {
  box-shadow: 0 0 0 1.6px var(--sk-purple),
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(139, 92, 246, 0.35);
}
.sk-axis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(5 * var(--u));
  margin-top: calc(6 * var(--u));
  padding: 0 calc(2 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 600;
  color: var(--ks-muted);
  text-align: center;
}
.sk-axis--on {
  justify-self: center;
  min-width: calc(20 * var(--u));
  padding: 0 calc(5 * var(--u));
  border-radius: 999px;
  font-weight: 800;
  color: #d9ccff;
  background: rgba(139, 92, 246, 0.24);
}
.sk-legend {
  list-style: none;
  margin: calc(10 * var(--u)) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 * var(--u)) calc(10 * var(--u));
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-legend li {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
}
.sk-swatch {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--c);
  flex: none;
}

/* Heatmap 30D (SkillTrackingCalendar: 32dp pintados, celda táctil 48dp) */
.sk-heat {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(5 * var(--u));
  margin-top: calc(12 * var(--u));
}
.sk-heat__day,
.sk-heat__pad {
  aspect-ratio: 1 / 1;
}
.sk-heat__day {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(9 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 700;
  color: var(--ks-text);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.sk-heat--0 { background: rgba(255, 255, 255, 0.06); color: var(--ks-muted); }
.sk-heat--1 { background: rgba(139, 92, 246, 0.24); }
.sk-heat--2 { background: rgba(139, 92, 246, 0.44); }
.sk-heat--3 { background: rgba(139, 92, 246, 0.68); }
.sk-heat--4 { background: #8b5cf6; box-shadow: 0 0 0 1px rgba(217, 204, 255, 0.35); }
.sk-heat__day--today {
  outline: 2px solid var(--sk-cyan-2);
  outline-offset: calc(1 * var(--u));
}
.sk-intensity {
  list-style: none;
  margin: calc(11 * var(--u)) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-intensity li {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(30 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sk-glass-line);
}
.sk-intensity__grad {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: calc(4 * var(--u));
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.20), #8b5cf6);
}
.sk-intensity__empty {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: calc(4 * var(--u));
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.sk-top {
  list-style: none;
  margin: calc(11 * var(--u)) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
}
.sk-top__row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #1a3230;
  background: color-mix(in srgb, var(--c) 9%, var(--ks-elev));
  border: 1px solid rgba(0, 230, 118, 0.32);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}
.sk-top__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(24 * var(--u));
  min-height: calc(24 * var(--u));
  padding: 0 calc(6 * var(--u));
  border-radius: calc(9 * var(--u));
  font-size: calc(11 * var(--u));
  font-weight: 900;
  color: #0b0f14;
  background: var(--c-ink);
}
.sk-top__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(12 * var(--u));
  font-size: calc(17 * var(--u));
  background: #184437;
  background: color-mix(in srgb, var(--c) 18%, var(--ks-elev));
  border: 1px solid rgba(0, 230, 118, 0.4);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  flex: none;
}
.sk-top__name {
  flex: 1;
  min-width: 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-top__time {
  font-size: calc(12.5 * var(--u));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

.sk-insights {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  margin-top: calc(11 * var(--u));
}
.sk-ins {
  display: flex;
  align-items: flex-start;
  gap: calc(9 * var(--u));
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.20);
}
.sk-ins__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(12 * var(--u));
  color: var(--c-ink, #d9ccff);
  background: rgba(0, 230, 118, 0.18);
  background: color-mix(in srgb, var(--c, #8b5cf6) 18%, transparent);
  border: 1px solid rgba(0, 230, 118, 0.4);
  border: 1px solid color-mix(in srgb, var(--c, #8b5cf6) 40%, transparent);
  flex: none;
}
.sk-ins__icon .sk-i {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}
.sk-ins__label {
  margin: 0;
  font-size: calc(10 * var(--u));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-text-2);
}
.sk-ins__name {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.sk-ins__value {
  margin: calc(1 * var(--u)) 0 0;
  font-size: calc(11 * var(--u));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

/* ── Organizar: bottom sheet glass ───────────────────────────────────────── */

.sk-sheetstage {
  position: absolute;
  inset: 0;
}
.sk-sheetstage__bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  filter: blur(calc(2.5 * var(--u)));
  opacity: 0.42;
}
.sk-scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.62);
}
.sk-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 94%;
  display: flex;
  flex-direction: column;
  border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0;
  background: linear-gradient(180deg, var(--sk-sheet-top), var(--sk-surface));
  border-top: 1px solid rgba(91, 246, 255, 0.35);
  box-shadow: 0 calc(-16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.55);
}
.sk-sheet__grab {
  align-self: center;
  width: calc(38 * var(--u));
  height: calc(4 * var(--u));
  margin: calc(8 * var(--u)) 0 calc(4 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
  flex: none;
}
.sk-sheet__head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u));
}
.sk-sheet__head h2 {
  flex: 1;
  margin: 0;
  font-size: calc(19 * var(--u));
  font-weight: 800;
}
.sk-sheet__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u));
}
.sk-group {
  padding: calc(11 * var(--u)) calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--sk-glass-line);
}
.sk-group h3 {
  margin: 0 0 calc(10 * var(--u));
  font-size: calc(10.5 * var(--u));
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--ks-text-2);
}
.sk-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: calc(7 * var(--u));
}
.sk-wrap--swatches {
  gap: calc(8 * var(--u));
}
.sk-fchip--pill {
  min-height: calc(36 * var(--u));
}
.sk-fchip[class*="sk-tag--"] {
  color: var(--c-ink);
  background: rgba(0, 230, 118, 0.15);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  border-color: rgba(0, 230, 118, 0.38);
  border-color: color-mix(in srgb, var(--c) 38%, transparent);
}
.sk-swatch--opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  background: var(--c);
  color: #0b0f14;
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.sk-swatch--opt .sk-i {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}
.sk-swatch--on {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border: 3px solid #f8fafc;
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(91, 246, 255, 0.55);
}
.sk-sheet__actions {
  display: flex;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border-top: 1px solid var(--sk-glass-line);
  background: var(--sk-surface);
}

/* ── Atributos (vista Mastery: incluye “más desarrollado”) ───────────────── */

.sk-pane--attrs {
  background:
    radial-gradient(120% 50% at 50% -10%, rgba(108, 59, 255, 0.16), transparent 60%),
    var(--ks-bg);
}
.sk-attrs__panel {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));
  /* ShellLocalContextBar: mismo vidrio que la píldora del shell */
  background: linear-gradient(160deg, rgba(108, 59, 255, 0.22), rgba(108, 59, 255, 0.07));
  border-bottom: 1px solid rgba(108, 59, 255, 0.38);
}
.sk-attrs__orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  border-radius: 999px;
  color: #f2ecff;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(108, 59, 255, 0.85));
  border: 1.4px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(108, 59, 255, 0.45);
  flex: none;
}
.sk-attrs__orb b {
  font-size: calc(20 * var(--u));
  font-weight: 900;
  line-height: 1;
}
.sk-attrs__orb small {
  font-size: calc(7.5 * var(--u));
  font-weight: 900;
  letter-spacing: 0.06em;
}
.sk-attrs__id {
  flex: 1 1 calc(170 * var(--u));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.sk-attrs__id b {
  font-size: calc(14.5 * var(--u));
  font-weight: 800;
}
.sk-attrs__id small {
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(5 * var(--u));
  flex: 1 1 100%;
}
.sk-podium li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
}
.sk-podium span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 999px;
  font-size: calc(11 * var(--u));
  font-weight: 900;
  color: #241a00;
  background: linear-gradient(160deg, #ffe9b8, #e8a93e);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.sk-podium small {
  max-width: calc(52 * var(--u));
  font-size: calc(8.5 * var(--u));
  font-weight: 700;
  text-align: center;
  color: var(--ks-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-podium__1 span {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  font-size: calc(13 * var(--u));
  box-shadow: 0 0 0 calc(2 * var(--u)) rgba(245, 196, 81, 0.26);
}
.sk-podium__2 span {
  background: linear-gradient(160deg, #f4f7fb, #9aa7bd);
  color: #10131a;
}
.sk-podium__3 span {
  background: linear-gradient(160deg, #f0c39a, #b06b2f);
  color: #2a1400;
}

.sk-attrs__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
}
.sk-attrs__summary {
  margin: 0;
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-pillar {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #171e2b;
  background: color-mix(in srgb, var(--pc) 7%, var(--ks-surface));
  border: 1px solid rgba(59, 130, 246, 0.32);
  border: 1px solid color-mix(in srgb, var(--pc) 32%, transparent);
}
.sk-pillar--mind { --pc: #3b82f6; }
.sk-pillar--body { --pc: #ef4444; }
.sk-pillar--create { --pc: #ec4899; }
.sk-pillar--self { --pc: #f59e0b; }
.sk-pillar--bond { --pc: #22c55e; }
.sk-pillar--life { --pc: #a855f7; }
.sk-pillar__orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  border-radius: calc(15 * var(--u));
  font-size: calc(20 * var(--u));
  background: rgba(59, 130, 246, 0.16);
  background: color-mix(in srgb, var(--pc) 16%, transparent);
  border: 1px solid rgba(59, 130, 246, 0.38);
  border: 1px solid color-mix(in srgb, var(--pc) 38%, transparent);
  flex: none;
}
.sk-pillar__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.sk-pillar__body b {
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.sk-pillar__body small {
  font-size: calc(10.5 * var(--u));
  color: var(--ks-text-2);
}
.sk-pillar__val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(1 * var(--u));
  flex: none;
}
.sk-pillar__val b {
  font-size: calc(13.5 * var(--u));
  font-weight: 800;
  color: #72a5f9;
  color: color-mix(in srgb, var(--pc) 72%, #ffffff);
}
.sk-pillar__val small {
  font-size: calc(10 * var(--u));
  color: var(--ks-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Rangos: Novato → Dominio con el arte real ───────────────────────────── */

.sk-rankbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u));
  border-bottom: 1px solid var(--sk-glass-line);
  background: linear-gradient(180deg, rgba(245, 196, 81, 0.12), rgba(245, 196, 81, 0.02));
}
.sk-rankbar h2 {
  margin: 0;
  font-size: calc(17 * var(--u));
  font-weight: 800;
}
.sk-rank__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
}
.sk-rankhero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(26 * var(--u));
  background: linear-gradient(170deg, rgba(245, 196, 81, 0.14), rgba(245, 196, 81, 0.03)),
    var(--ks-surface);
  border: 1.3px solid rgba(245, 196, 81, 0.42);
  box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(245, 196, 81, 0.12);
  text-align: center;
}
.sk-rankhero img {
  width: calc(150 * var(--u));
  height: calc(200 * var(--u));
  object-fit: contain;
}
.sk-rankhero__kicker {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(10 * var(--u));
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--ks-gold);
}
.sk-rankhero h3 {
  margin: 0;
  font-size: calc(26 * var(--u));
  font-weight: 900;
}
.sk-rankhero__meta {
  margin: 0;
  font-size: calc(11 * var(--u));
  color: var(--ks-text-2);
}
.sk-rank__subtitle {
  margin: 0;
  font-size: calc(11 * var(--u));
  line-height: 1.4;
  color: var(--ks-text-2);
}
.sk-ranklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
.sk-rankrow {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(84 * var(--u));
  padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--sk-glass-line);
}
.sk-rankrow__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(58 * var(--u));
  aspect-ratio: 3 / 4;
  flex: none;
}
.sk-rankrow__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sk-rankrow__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
}
.sk-rankrow__status {
  font-size: calc(9.5 * var(--u));
  font-weight: 900;
  letter-spacing: 0.10em;
  color: var(--ks-muted);
}
.sk-rankrow__body b {
  font-size: calc(16 * var(--u));
  font-weight: 900;
}
.sk-rankrow__body small:last-child {
  font-size: calc(11 * var(--u));
  color: var(--ks-text-2);
}
.sk-rankrow--reached .sk-rankrow__status {
  color: #6bffb0;
}
.sk-rankrow--current {
  background: #2a2721;
  background: color-mix(in srgb, var(--ks-gold) 10%, var(--ks-surface));
  border-color: rgba(245, 196, 81, 0.55);
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(245, 196, 81, 0.12);
}
.sk-rankrow--current .sk-rankrow__status {
  color: var(--ks-gold);
}
.sk-rankrow--locked .sk-rankrow__art img {
  opacity: 0.16;
}
.sk-rankrow--locked .sk-rankrow__body b,
.sk-rankrow--locked .sk-rankrow__body small:last-child {
  color: var(--ks-muted);
}
.sk-rankrow__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ks-text-2);
}
.sk-rankrow__lock .sk-i {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}

/* ── Panel de notas (mock web, fuera del teléfono) ───────────────────────── */

.sk-notes .screen-notes {
  margin: 0;
}
.sk-notes code {
  color: var(--ks-gold-hi);
}

/* ── Vida en el resumen del Tracking: cada métrica con su tinte (solo color) ── */

.sk-summary__cell:nth-child(1) b { color: var(--sk-cyan); }
.sk-summary__cell:nth-child(3) b { color: #d9ccff; }
.sk-summary__cell:nth-child(5) b { color: var(--ks-gold); }