:root {
  --bg: #edf4f3;
  --surface: #ffffff;
  --line: #d8e3e1;
  --line-soft: #e7efee;
  --ink: #0b1a1c;
  --ink-muted: #596f72;
  --ink-faint: #636e6f;
  /* Color sólido fijo (no se invierte en modo oscuro) para fondos que llevan
       texto/iconos blancos encima: botones "primary", burbujas propias del chat,
       toasts, chips seleccionados... Si usasen var(--ink) dejarían de ser
       legibles en modo oscuro, porque --ink pasa a ser un color claro. */
  --ink-solid: #0b1a1c;
  --blue: #00bfa6;
  --blue-soft: #e1f7f3;
  --green: #1fae68;
  --green-soft: #e3f8ee;
  --red: #e5383f;
  --red-soft: #fdeaea;
  --coral: #ff5a46;
  --coral-soft: #ffe9e5;
  --amber: #f5a623;
  --amber-soft: #fdf1dd;
  --violet: #8b5cf6;
  --violet-soft: #f1ebfe;
  --font: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 4px;
  /* Tamaño único para texto secundario/descriptivo en gris */
  --fs-secondary: 12.5px;
  --inputbar-bg: rgba(255, 255, 255, 0.96);
  --skel-a: #e4eceb;
  --skel-b: #eff6f5;
  --chart-grid: #d8e3e1;
  --chart-label: #636e6f;
  /* Contraste (RN-116, WCAG AA 4,5:1): colores para TEXTO (…-text, --ink-muted, --ink-faint) y para FONDOS con texto
     blanco encima (…-fill). Los de siempre (--blue, --green…) se quedan para bordes, iconos y rellenos sin texto */
  --blue-text: #007c6c;
  --green-text: #177f4c;
  --red-text: #ca3137;
  --coral-text: #ba4233;
  --green-fill: #188650;
  --coral-fill: #cf4939;
  --red-fill: #dc363c;
  --blue-fill: #008674;
  --violet-fill: #8558ec;
}
/* Modo oscuro: se activa añadiendo la clase "dark" al <html>, así que todo
     lo que ya usa var(--bg), var(--surface), var(--ink)... se retinta solo. */
html.dark {
  --bg: #0a1214;
  --surface: #141e20;
  --line: #28393c;
  --line-soft: #1d2a2c;
  --ink: #eaf3f2;
  --ink-muted: #9fb3b1;
  --ink-faint: #839294;
  --blue: #1dd6ba;
  --blue-soft: #0f2e2a;
  --green: #2fc97d;
  --green-soft: #11301f;
  --red: #ff5860;
  --red-soft: #3a1518;
  --coral: #ff7a62;
  --coral-soft: #3a1a14;
  --amber: #ffc144;
  --amber-soft: #3a2c0d;
  --violet: #a47bff;
  --violet-soft: #241c3c;
  --inputbar-bg: rgba(10, 17, 19, 0.94);
  --skel-a: #1b2729;
  --skel-b: #253538;
  --chart-grid: #26363a;
  --chart-label: #839294;
  --blue-text: #1dd6ba;
  --green-text: #2fc97d;
  --red-text: #ff5860;
  --coral-text: #ff7a62;
  --green-fill: #1f8754;
  --coral-fill: #ba5948;
  --red-fill: #cf474e;
  --blue-fill: #128573;
  --violet-fill: #8362cc;
}
/* Paleta alternativa "Atardecer": se activa añadiendo la clase "theme-sunset"
     al <html>, independiente del modo oscuro (se puede combinar con "dark").
     Cambia el fondo y el acento principal a tonos cálidos; los colores
     semánticos (verde=victoria, rojo=derrota) se mantienen reconocibles. */
html.theme-sunset {
  --bg: #fbf2e9;
  --surface: #ffffff;
  --line: #eddcc8;
  --line-soft: #f5ead9;
  --ink: #2b1608;
  --ink-muted: #7b6147;
  --ink-faint: #756450;
  --ink-solid: #2b1608;
  --blue: #ff6b4a;
  --blue-soft: #ffe6dc;
  --coral: #ff3d78;
  --coral-soft: #ffdce7;
  --violet: #b5459b;
  --violet-soft: #f7e4f1;
  --inputbar-bg: rgba(255, 255, 255, 0.96);
  --skel-a: #f0e2d0;
  --skel-b: #f8efe2;
  --chart-grid: #eddcc8;
  --chart-label: #756450;
  --blue-text: #b04a33;
  --green-text: #177f4c;
  --red-text: #ca3137;
  --coral-text: #bd2d59;
  --green-fill: #188650;
  --coral-fill: #d93466;
  --red-fill: #dc363c;
  --blue-fill: #c45239;
  --violet-fill: #b5459b;
}
html.dark.theme-sunset {
  --bg: #1a1007;
  --surface: #251809;
  --line: #402c15;
  --line-soft: #2e1f0e;
  --ink: #fceee0;
  --ink-muted: #c9a98a;
  --ink-faint: #a18d77;
  --blue: #ff8b62;
  --blue-soft: #3d2413;
  --coral: #ff6a93;
  --coral-soft: #3d1c2a;
  --violet: #d97fc4;
  --violet-soft: #331f30;
  --inputbar-bg: rgba(20, 12, 5, 0.94);
  --skel-a: #2a1d0f;
  --skel-b: #372513;
  --chart-grid: #3a2814;
  --chart-label: #a18d77;
  --blue-text: #ff8b62;
  --green-text: #2fc97d;
  --red-text: #ff5860;
  --coral-text: #ff6a93;
  --green-fill: #1f8754;
  --coral-fill: #bf506e;
  --red-fill: #cf474e;
  --blue-fill: #b06044;
  --violet-fill: #a35f93;
}
/* Paleta alternativa "Océano": tonos azules y turquesa, misma mecánica que
     "Atardecer" (clase "theme-oceano" en el <html>, combinable con "dark"). */
html.theme-ocean {
  --bg: #eaf4fb;
  --surface: #ffffff;
  --line: #d3e6f5;
  --line-soft: #e4f0fa;
  --ink: #0b2a3d;
  --ink-muted: #506e80;
  --ink-faint: #5c6d77;
  --ink-solid: #0b2a3d;
  --blue: #0077c8;
  --blue-soft: #ddeefb;
  --coral: #00a9a5;
  --coral-soft: #ddf5f3;
  --violet: #5b6feb;
  --violet-soft: #e7eafd;
  --inputbar-bg: rgba(255, 255, 255, 0.96);
  --skel-a: #dce9f3;
  --skel-b: #eaf3fa;
  --chart-grid: #d3e6f5;
  --chart-label: #5c6d77;
  --blue-text: #006db8;
  --green-text: #177f4c;
  --red-text: #ca3137;
  --coral-text: #007a77;
  --green-fill: #188650;
  --coral-fill: #008481;
  --red-fill: #dc363c;
  --blue-fill: #0077c8;
  --violet-fill: #576be2;
}
html.dark.theme-ocean {
  --bg: #061620;
  --surface: #0d2130;
  --line: #1b3a4d;
  --line-soft: #122a38;
  --ink: #e6f2fa;
  --ink-muted: #96b6c8;
  --ink-faint: #7c97a5;
  --blue: #3fb6ff;
  --blue-soft: #0f2e40;
  --coral: #2de0da;
  --coral-soft: #0c3230;
  --violet: #8b98ff;
  --violet-soft: #242c4a;
  --inputbar-bg: rgba(6, 20, 30, 0.94);
  --skel-a: #122736;
  --skel-b: #1a3444;
  --chart-grid: #1e3b4e;
  --chart-label: #7c97a5;
  --blue-text: #3fb6ff;
  --green-text: #2fc97d;
  --red-text: #ff5860;
  --coral-text: #2de0da;
  --green-fill: #1f8754;
  --coral-fill: #1b8481;
  --red-fill: #cf474e;
  --blue-fill: #2b7cad;
  --violet-fill: #6770bd;
}
/* Paleta alternativa "Bosque": verdes naturales con acentos terracota. */
html.theme-forest {
  --bg: #eff5ea;
  --surface: #ffffff;
  --line: #dce9d2;
  --line-soft: #e8f1e1;
  --ink: #132411;
  --ink-muted: #577051;
  --ink-faint: #606d5a;
  --ink-solid: #132411;
  --blue: #3e8e4f;
  --blue-soft: #e1f2e4;
  --coral: #d97b3d;
  --coral-soft: #fbe7d6;
  --violet: #8a6fa0;
  --violet-soft: #ede6f5;
  --inputbar-bg: rgba(255, 255, 255, 0.96);
  --skel-a: #e2edd9;
  --skel-b: #edf4e7;
  --chart-grid: #dce9d2;
  --chart-label: #606d5a;
  --blue-text: #357943;
  --green-text: #177f4c;
  --red-text: #ca3137;
  --coral-text: #9c592c;
  --green-fill: #188650;
  --coral-fill: #ae6231;
  --red-fill: #dc363c;
  --blue-fill: #3a854a;
  --violet-fill: #866c9b;
}
html.dark.theme-forest {
  --bg: #0b140a;
  --surface: #121f10;
  --line: #26391f;
  --line-soft: #1a2a16;
  --ink: #e8f2e2;
  --ink-muted: #9db893;
  --ink-faint: #869a80;
  --blue: #6bc97f;
  --blue-soft: #173321;
  --coral: #f0985a;
  --coral-soft: #3a2312;
  --violet: #b79bd9;
  --violet-soft: #2b2138;
  --inputbar-bg: rgba(11, 20, 10, 0.94);
  --skel-a: #182a15;
  --skel-b: #20361c;
  --chart-grid: #26391f;
  --chart-label: #869a80;
  --blue-text: #6bc97f;
  --green-text: #2fc97d;
  --red-text: #ff5860;
  --coral-text: #f0985a;
  --green-fill: #1f8754;
  --coral-fill: #a3673d;
  --red-fill: #cf474e;
  --blue-fill: #468353;
  --violet-fill: #826e9a;
}
/* Paleta alternativa "Lavanda": violetas y rosas suaves. */
html.theme-lavender {
  --bg: #f5f1fb;
  --surface: #ffffff;
  --line: #e4daf5;
  --line-soft: #efe8fa;
  --ink: #241832;
  --ink-muted: #706184;
  --ink-faint: #6b627a;
  --ink-solid: #241832;
  --blue: #7b5fe0;
  --blue-soft: #eae3fb;
  --coral: #e0568c;
  --coral-soft: #fbe1ec;
  --violet: #9b59d9;
  --violet-soft: #f0e1fa;
  --inputbar-bg: rgba(255, 255, 255, 0.96);
  --skel-a: #eae1f7;
  --skel-b: #f2ecfb;
  --chart-grid: #e4daf5;
  --chart-label: #6b627a;
  --blue-text: #6c54c5;
  --green-text: #177f4c;
  --red-text: #ca3137;
  --coral-text: #ac426c;
  --green-fill: #188650;
  --coral-fill: #c34b7a;
  --red-fill: #dc363c;
  --blue-fill: #7b5fe0;
  --violet-fill: #9857d5;
}
html.dark.theme-lavender {
  --bg: #160f20;
  --surface: #211730;
  --line: #3b2c52;
  --line-soft: #291d3a;
  --ink: #f1ebfa;
  --ink-muted: #b7a6d1;
  --ink-faint: #978aab;
  --blue: #a78bf5;
  --blue-soft: #2c2247;
  --coral: #f17bab;
  --coral-soft: #3a1f30;
  --violet: #c295ee;
  --violet-soft: #33254c;
  --inputbar-bg: rgba(22, 15, 32, 0.94);
  --skel-a: #251a38;
  --skel-b: #302345;
  --chart-grid: #3b2c52;
  --chart-label: #978aab;
  --blue-text: #a78bf5;
  --green-text: #2fc97d;
  --red-text: #ff5860;
  --coral-text: #f17bab;
  --green-fill: #1f8754;
  --coral-fill: #b05a7d;
  --red-fill: #cf474e;
  --blue-fill: #7d68b8;
  --violet-fill: #8868a7;
}
/* Paleta alternativa "Grafito": monocromo minimal, casi sin color, con un
     único acento cálido reservado para avisos. */
html.theme-graphite {
  --bg: #f2f2f0;
  --surface: #ffffff;
  --line: #dcdcd8;
  --line-soft: #eaeae7;
  --ink: #161616;
  --ink-muted: #686863;
  --ink-faint: #686864;
  --ink-solid: #161616;
  --blue: #161616;
  --blue-soft: #e7e7e4;
  --coral: #b4482e;
  --coral-soft: #f4e3de;
  --violet: #4a4a46;
  --violet-soft: #e7e7e4;
  --inputbar-bg: rgba(255, 255, 255, 0.96);
  --skel-a: #e4e4e0;
  --skel-b: #ededea;
  --chart-grid: #dcdcd8;
  --chart-label: #686864;
  --blue-text: #161616;
  --green-text: #167d4b;
  --red-text: #ca3137;
  --coral-text: #af462d;
  --green-fill: #188650;
  --coral-fill: #b4482e;
  --red-fill: #dc363c;
  --blue-fill: #161616;
  --violet-fill: #4a4a46;
}
html.dark.theme-graphite {
  --bg: #101010;
  --surface: #1a1a1a;
  --line: #2e2e2e;
  --line-soft: #212121;
  --ink: #f2f2ef;
  --ink-muted: #a3a39d;
  --ink-faint: #8d8d8a;
  --blue: #f2f2ef;
  --blue-soft: #242424;
  --coral: #e08561;
  --coral-soft: #33231c;
  --violet: #b8b8b2;
  --violet-soft: #262626;
  --inputbar-bg: rgba(16, 16, 16, 0.94);
  --skel-a: #1e1e1e;
  --skel-b: #262626;
  --chart-grid: #2e2e2e;
  --chart-label: #8d8d8a;
  --blue-text: #f2f2ef;
  --green-text: #2fc97d;
  --red-text: #ff5860;
  --coral-text: #e08561;
  --green-fill: #1f8754;
  --coral-fill: #a86449;
  --red-fill: #cf474e;
  --blue-fill: #747473;
  --violet-fill: #767672;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 191, 166, 0.16), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 34px
    ),
    #081113;
  font-family: var(--font);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 12px;
  overflow: hidden;
}
/* El diseño interno (nodos del hub, paddings, tipografías...) se mide en
     píxeles fijos sobre un lienzo de 390x820. updatePhoneScale() (ver
     <head>) calcula qué factor de zoom hace falta para que ese lienzo quepa
     entero en la pantalla disponible (en ancho y en alto) y aquí se aplica
     como transform:scale(): un móvil pequeño ve la app entera en miniatura
     (nada oculto ni cortado) y una tablet la ve más grande. Si el script no
     llega a ejecutarse, el valor por defecto 1 la deja a su tamaño de diseño. */
.phone {
  width: 390px;
  height: 820px;
  background: var(--bg);
  border-radius: 40px;
  border: 9px solid #081113;
  box-shadow:
    0 0 0 1px rgba(0, 191, 166, 0.35),
    0 0 60px -6px rgba(0, 191, 166, 0.28),
    0 40px 90px -20px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transform: scale(var(--phone-scale, 1));
  transform-origin: center center;
}
.notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 26px;
  background: #081113;
  border-radius: 20px;
  z-index: 50;
}
.notch::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateY(-50%);
  box-shadow: 0 0 6px 2px rgba(0, 191, 166, 0.7);
  animation: sensorBlink 2.6s ease-in-out infinite;
}
@keyframes sensorBlink {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
.statusbar {
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 26px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
}
.screen {
  flex: 1;
  overflow-y: auto;
  position: relative;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar {
  display: none;
}
.view {
  display: none;
  padding: 4px 22px 104px;
  animation: fadeIn 0.3s ease;
  position: relative;
}
.view.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.4px;
}
.eyebrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
/* El "ping" es un ::after que crece y se desvanece con transform+opacity:
     el navegador anima estas dos propiedades solo en el compositor, sin
     repintar el punto en cada frame (como haría con box-shadow). Importa
     porque corre de forma indefinida en casi todas las pantallas. */
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  pointer-events: none;
  animation: eyebrowPing 2.4s ease-out infinite;
  will-change: transform, opacity;
}
/* Variante roja del punto pulsante de arriba, para señalar "esto está pasando
     ahora mismo" (partidos en directo) en vez del azul genérico de "eyebrow". */
.eyebrow.eyebrow-live::before,
.eyebrow.eyebrow-live::after {
  background: var(--red);
}
@keyframes eyebrowPing {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: translateY(-50%) scale(3);
    opacity: 0;
  }
}
.num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

/* ===== CENTRO DE MANDO (hub radial) =====
     Pantalla de aterrizaje: un núcleo pulsante en el centro y los nodos
     orbitando alrededor. Cada nodo hace zoom hacia su pantalla; el botón
     flotante inferior (.core-fab) es el único "regreso al centro".*/
.hub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
}
.hub-top .avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
  cursor: pointer;
}
.hub-greeting {
  text-align: center;
  margin-top: 2px;
}
.hub-greeting .eyebrow {
  justify-content: center;
}
.hub-greeting h1 {
  font-size: 19px;
  margin-top: 2px;
}
.hub-core-wrap {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 22px auto 6px;
}
.hub-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--line);
  animation: hubSpin 40s linear infinite;
}
.hub-orbit-ring.b {
  inset: 34px;
  animation-duration: 60s;
  animation-direction: reverse;
}
@keyframes hubSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.hub-core {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--surface), var(--bg) 75%);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 6px var(--blue-soft),
    0 0 34px -4px rgba(0, 191, 166, 0.55);
  cursor: pointer;
}
/* El brillo pulsante es un ::after con un degradado difuminado que solo
     cambia transform/opacity (se anima en el compositor), en vez del
     box-shadow del propio círculo, que obligaría a repintarlo entero en cada
     frame mientras el usuario está en el centro de mando. */
.hub-core::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(0, 191, 166, 0.5), transparent 70%);
  animation: hubPulse 2.8s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes hubPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.85;
  }
}
.hub-core-value {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 38px;
  color: var(--blue-text);
  line-height: 1;
  letter-spacing: -0.5px;
}
.hub-core-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
  text-align: center;
  padding: 0 10px;
}
.hub-node {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.hub-node:active {
  transform: scale(0.92);
}
/* «Mi código» se usa en la pista para inscribirse: destaca con el color de acento de la paleta, sin gritar */
.hub-node.hub-node-code {
  background: var(--blue-soft);
  border-color: var(--blue);
}
.hub-node.hub-node-code svg {
  stroke: var(--blue);
}
.hub-node.hub-node-code .hub-node-label {
  color: var(--blue-text);
}
.hub-node svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.8;
}
.hub-node-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--ink-muted);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  padding: 0 4px;
  max-width: 64px;
}
.hub-node-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--coral-fill);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.hub-node-badge.ok {
  background: var(--green-fill);
}
/* Las burbujas siempre se colocan en la esquina del nodo más alejada del
     núcleo central, para que nunca queden "hacia dentro" tapadas por los
     anillos. Por defecto (arriba-derecha) sirve para los nodos de la mitad
     superior/derecha; el resto se corrige nodo a nodo según su posición en
     el anillo (reglas .hub-node.nX de aquí abajo). */
.hub-node.n3 .hub-node-badge {
  top: auto;
  right: -4px;
  bottom: -4px;
  left: auto;
}
.hub-node.n4 .hub-node-badge {
  top: auto;
  right: -4px;
  bottom: -4px;
  left: auto;
}
.hub-node.n5 .hub-node-badge {
  top: auto;
  right: auto;
  bottom: -4px;
  left: -4px;
}
.hub-node.n6 .hub-node-badge {
  top: auto;
  right: auto;
  bottom: -4px;
  left: -4px;
}
.hub-node.n7 .hub-node-badge {
  top: -4px;
  right: auto;
  bottom: auto;
  left: -4px;
}
.hub-node.n8 .hub-node-badge {
  top: -4px;
  right: auto;
  bottom: auto;
  left: -4px;
}
/* La posición de cada nodo la calcula positionHubNodes() (en el script):
     reparte los nodos visibles por igual en el anillo y la aplica como
     variables CSS --hx/--hy en el propio elemento. Esta regla solo lee esas
     variables: no hay que tocar CSS para añadir, quitar o reordenar nodos. */
.hub-node {
  left: var(--hx, 0px);
  top: var(--hy, 0px);
}
/* Animación al pulsar un nodo: todos orbitan girando hacia el centro y el
     círculo del nivel se los "traga". Dura ~430ms para no frenar la navegación:
     el destino se abre justo al terminar. */
.hub-node.hub-node-swallow {
  animation: hubNodeSwallow 430ms cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
  pointer-events: none;
  z-index: 6;
}
@keyframes hubNodeSwallow {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  55% {
    transform: translate(calc(var(--sw-dx, 0px) * 0.5), calc(var(--sw-dy, 0px) * 0.5)) rotate(230deg) scale(0.65);
    opacity: 1;
  }
  100% {
    transform: translate(var(--sw-dx, 0px), var(--sw-dy, 0px)) rotate(480deg) scale(0);
    opacity: 0;
  }
}
.hub-core.hub-core-gulp {
  animation: hubCoreGulp 430ms ease-in-out;
}
@keyframes hubCoreGulp {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.93);
  }
  100% {
    transform: scale(1);
  }
}
.hub-orbit-ring.hub-ring-fast {
  animation-duration: 260ms !important;
}
/* Palpitación de alerta: se aplica a un nodo mientras tenga cambios sin ver
     (ranking, racha, historial) o acciones pendientes sin ver (retos, chats,
     solicitudes). Siempre es más rápida que el pulso del núcleo (2.8s); la
     velocidad concreta la fija JS en --pulse-dur según cuántos cambios
     acumule el nodo frente a los demás (más cambios = más rápido). */
/* Igual que en el núcleo y el FAB, el aviso es un ::after con
     transform+opacity, animable en el compositor (con --pulse-dur variable
     puede haber varios nodos animándose a la vez y a distinta velocidad). */
.hub-node.hub-node-alert {
  box-shadow:
    0 6px 16px -8px rgba(0, 0, 0, 0.35),
    0 0 0 3px var(--coral-soft);
  position: absolute;
}
.hub-node.hub-node-alert::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--coral-soft);
  pointer-events: none;
  animation: hubNodePulse var(--pulse-dur, 1.4s) ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes hubNodePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.22);
    opacity: 0.25;
  }
}
/* Animación inversa: al volver al centro de mando desde cualquier pantalla,
     los nodos "salen" del círculo central girando hasta colocarse en su sitio. */
.hub-node.hub-node-emerge {
  animation: hubNodeEmerge 430ms cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
  z-index: 6;
}
@keyframes hubNodeEmerge {
  0% {
    transform: translate(var(--sw-dx, 0px), var(--sw-dy, 0px)) rotate(480deg) scale(0);
    opacity: 0;
  }
  45% {
    transform: translate(calc(var(--sw-dx, 0px) * 0.5), calc(var(--sw-dy, 0px) * 0.5)) rotate(230deg) scale(0.65);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}
.hub-flash {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hub-flash .num {
  font-size: 22px;
  color: var(--green-text);
}

.core-fab {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink-solid);
  border: 2px solid var(--blue);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  cursor: pointer;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.5);
}
/* En el chat hay una barra de escritura fija abajo (misma zona que este
     botón); cuando coinciden, se sube el botón por encima de esa barra para
     que no la tape ni estorbe al escribir. */
.core-fab.above-input {
  bottom: 88px;
}
/* Este botón está visible en casi todas las pantallas salvo el hub, así que
     su animación es la que más tiempo corre de toda la app: el anillo
     expansivo es un ::after que solo anima transform+opacity (compositor). */
.core-fab::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 191, 166, 0.5);
  pointer-events: none;
  animation: coreFabPulse 2.6s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes coreFabPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.core-fab svg {
  width: 22px;
  height: 22px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
}

@keyframes zoomIntoView {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomOutToHub {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.view.zoom-in {
  animation: zoomIntoView 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.view.zoom-out {
  animation: zoomOutToHub 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child {
  border-bottom: none;
}
/* ---- Patrón "requiere tu atención": mismo idioma visual que ya usa el
     hub para sus burbujas (coral = acción pendiente, ver hub-node-alert /
     hub-node-badge) pero aplicado dentro de la propia pantalla, para que al
     entrar en Social (o cualquier otra) se note a simple vista qué hay que
     resolver, sin tener que bajar a mirar. Dos piezas:
     - .eyebrow-alert: variante coral del punto pulsante del eyebrow (en vez
       del azul/rojo ya usados para "normal"/"en directo").
     - .eyebrow-count-badge: la misma píldora coral con número que ya se usa
       en hub-node-badge, pero en línea junto al título de la sección.
     - .attn-card: mismo marco de "esquinas HUD" que quiet-card/challenge-card
       (ver más abajo), en coral en vez de azul, para enmarcar la lista. */
.eyebrow.eyebrow-alert::before,
.eyebrow.eyebrow-alert::after {
  background: var(--coral);
}
.eyebrow-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--coral-fill);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}
.attn-card {
  position: relative;
  border: 1px solid var(--coral);
  background: var(--coral-soft);
  border-radius: 10px;
  padding: 4px 16px;
}
.attn-card::before,
.attn-card::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.65;
  pointer-events: none;
}
.attn-card::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--coral);
  border-left: 2px solid var(--coral);
  border-radius: 4px 0 0 0;
}
.attn-card::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--coral);
  border-right: 2px solid var(--coral);
  border-radius: 0 0 4px 0;
}
.section {
  margin-top: 28px;
}
.section:first-child {
  margin-top: 16px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--ink-solid), #142b2e);
  color: #fff;
  border: none;
  border-bottom: 2.5px solid var(--blue);
  border-radius: 12px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  padding: 15px;
  width: 100%;
  cursor: pointer;
  letter-spacing: 0.1px;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  padding: 12.5px;
  width: 100%;
  cursor: pointer;
}
.btn-ghost:active {
  border-color: var(--blue);
  color: var(--blue-text);
}
.btn-danger {
  background: transparent;
  color: var(--red-text);
  border: 1.5px solid var(--red-soft);
  border-radius: 12px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  padding: 13px;
  width: 100%;
  cursor: pointer;
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 26px;
  transition: background 0.2s ease;
}
.switch .slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.switch input:checked + .slider {
  background: var(--blue);
}
.switch input:checked + .slider::before {
  transform: translateX(18px);
}
input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14.5px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.15s;
}
input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 191, 166, 0.12);
}
input::placeholder {
  color: var(--ink-faint);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
}
.chip-amber {
  background: var(--amber);
  color: #3a2600;
}
.chip-violet {
  background: var(--violet-soft);
  color: var(--violet);
}
/* ---- Patrón de bloqueo Premium: blur + overlay con CTA ----
     Se envuelve cualquier bloque de contenido con .locked-wrap > .locked-blur
     (el contenido real, difuminado y sin interacción) + .locked-overlay (el
     candado y el botón, por encima, que es lo único clicable). Con Premium
     activo simplemente no se genera este envoltorio y se pinta el contenido
     normal — ver lockedBlock() en JS. */
.locked-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.locked-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), var(--bg) 85%);
  z-index: 2;
}
html.dark .locked-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), var(--bg) 85%);
}
.locked-lock-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--violet-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.locked-cta-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.locked-cta-btn {
  margin-top: 2px;
  background: var(--violet-fill);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.chip-win {
  background: var(--green-fill);
  color: #fff;
}
.chip-loss {
  background: var(--coral-fill);
  color: #fff;
}
.chip-muted {
  background: var(--line-soft);
  color: var(--ink-muted);
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink-solid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14.5px;
  flex-shrink: 0;
  font-family: var(--font-display);
}
.avatar.o {
  background: var(--blue-soft);
  color: var(--blue-text);
}
.skel {
  background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 37%, var(--skel-a) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.iconbtn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
/* Utilidades para los dos patrones de "style" inline que más se repetían
     por toda la app (flex:1 suelto y cursor:pointer suelto). Sustituyen a
     decenas de atributos style="..." idénticos sin cambiar nada visualmente,
     y reducen el peso del HTML. */
.u-flex1 {
  flex: 1;
  min-width: 0;
}
/* Corta con puntos suspensivos cualquier nombre (u otro texto de una sola
     línea) que no quepa en su hueco, en vez de solaparse con lo de al lado
     o desbordar el contenedor. Necesita min-width:0 en el propio elemento o
     en su padre flex (.u-flex1 ya lo lleva) porque, por defecto, un hijo
     flex no se encoge por debajo del ancho de su contenido. */
.trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.u-pointer {
  cursor: pointer;
} /* --- Compartir --- */
.share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--line-soft);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.share-btn svg {
  width: 17px;
  height: 17px;
}
.share-btn:active {
  background: var(--blue-soft);
}
.share-preview-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 18px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.25);
  background: var(--skel-a);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-preview-wrap img,
.share-preview-wrap canvas {
  width: 100%;
  display: block;
}
.share-preview-wrap .share-loading {
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 600;
}
.share-app-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 2px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.share-app-row:last-child {
  border-bottom: none;
}
.share-app-row .share-app-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.share-app-row .share-app-icon svg {
  width: 19px;
  height: 19px;
}
.share-app-row .share-app-label {
  font-size: 13.5px;
  font-weight: 700;
}
.share-app-row .share-app-sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ink-solid), #12292c);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60px auto 18px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  font-family: var(--font-display);
  position: relative;
}
.brand-mark::before,
.brand-mark::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  border: 1.5px solid rgba(0, 191, 166, 0.5);
  opacity: 0;
  animation: brandPing 2.8s ease-out infinite;
}
.brand-mark::after {
  animation-delay: 1.4s;
}
@keyframes brandPing {
  0% {
    opacity: 0.65;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.stat-strip {
  display: flex;
  margin-top: 14px;
}
.stat-item {
  flex: 1;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  position: relative;
}
.stat-item:first-child {
  padding-left: 0;
}
.stat-item:last-child {
  border-right: none;
  padding-right: 0;
}

.row#stat-item-streak {
  position: relative;
}

.match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.match-row:last-child {
  border-bottom: none;
}
.match-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
}

/* En escalas amplias (provincia/nacional/global) la posición puede tener
     4-5 cifras (p. ej. #28402): el ancho se adapta al contenido (min-width)
     y el texto se alinea a la derecha para que la columna siga ordenada
     aunque unas filas tengan 2 cifras y otras 5. */
.rank-pos {
  font-family: var(--font-mono);
  font-weight: 800;
  min-width: 40px;
  flex-shrink: 0;
  text-align: right;
  color: var(--ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.rank-row.me .rank-pos {
  color: var(--blue-text);
}
.rank-pos.top3 {
  font-size: 19px;
  color: var(--ink);
  font-weight: 800;
}
.rank-row.me .rank-pos.top3 {
  color: var(--blue-text);
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  animation: fadeIn 0.35s ease both;
}
.rank-row:last-child {
  border-bottom: none;
}
.rank-row.me {
  background: var(--blue-soft);
  margin: 0 -22px;
  padding: 13px 20px;
  border-radius: 8px;
  border-bottom: none;
  border-left: 3px solid var(--blue);
}
/* Cabecera de columnas ("Posición" / "Jugador" / "Puntos"). El ancho de
     .rank-header-pos (130px) no es arbitrario: es la suma exacta del ancho
     de .rank-pos (40px) + su gap (14px) + .rank-trend (30px) + su gap (14px)
     + el avatar (32px) de una fila normal, para que "Jugador" quede alineado
     justo encima del nombre y "Puntos" encima de los puntos, aunque el
     bloque posición/tendencia/avatar se agrupe bajo una sola etiqueta. */
.rank-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}
.rank-header-pos {
  width: 130px;
  flex-shrink: 0;
}
.rank-header-player {
  flex: 1;
  min-width: 0;
}
.rank-header-pts {
  flex-shrink: 0;
}
.rank-trend {
  display: flex;
  align-items: center;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  min-width: 30px;
  flex-shrink: 0;
}
.rank-trend.up {
  color: var(--green-text);
}
.rank-trend.down {
  color: var(--coral-text);
}
.rank-trend.flat {
  color: var(--ink-faint);
}
.rank-trend svg {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}
.rank-gap {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: center;
  margin: 2px -22px 4px;
  padding: 7px 20px;
  background: var(--surface);
  border-radius: 0 0 10px 10px;
}
.rank-gap b {
  color: var(--ink);
}
.avatar.has-photo {
  background-size: cover;
  background-position: center;
  color: transparent;
}

.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 2px;
  margin-bottom: 14px;
}
.scope-chip {
  flex-shrink: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font);
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.scope-chip.active {
  background: var(--ink-solid);
  border-color: var(--ink-solid);
  color: #fff;
}
.club-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
  cursor: pointer;
}
.club-select-row .label {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 600;
}
.club-select-row .value {
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
}
.ranking-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-text);
  margin-top: 6px;
  cursor: pointer;
}
.tabs button {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13.5px;
  padding: 0 0 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--blue);
}
.toast {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-solid);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 18px 10px 15px;
  border-radius: 10px;
  border-left: 3px solid var(--blue);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 80;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bar-track {
  flex: 1;
  height: 6px;
  background: var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #00e0c0);
  border-radius: 6px;
}
.bar-val {
  width: 32px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-muted);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.kv-row:last-of-type {
  border-bottom: none;
}
.kv-row span:first-child {
  color: var(--ink-muted);
  font-weight: 500;
}
.kv-row span:last-child {
  font-weight: 700;
}

/* Foco con teclado o pulsador (RN-116): se ve en qué se está. Con el dedo no sale (:focus-visible). Los campos de texto
   tienen su propio aviso de foco (input:focus) */
button:focus-visible,
a:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.sheet:focus {
  outline: none;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 23, 26, 0.4);
  z-index: 70;
  display: none;
  align-items: flex-end;
}
.overlay.show {
  display: flex;
}
.sheet {
  width: 100%;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 22px 22px 34px;
  animation: slideUp 0.3s ease;
  max-height: 82%;
  overflow-y: auto;
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 3px;
  margin: 0 auto 18px;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.friend-row:last-child {
  border-bottom: none;
}
.btn-add {
  background: var(--ink-solid);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-add.added {
  background: var(--line-soft);
  color: var(--ink-muted);
}

.metric-chips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.metric-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  line-height: 1.25;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.metric-chip .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}
.metric-chip.selected {
  background: var(--ink-solid);
  border-color: var(--ink-solid);
  color: #fff;
}
.metric-chip.selected .dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-secondary);
  color: var(--ink-muted);
  padding: 6px 0;
}
.legend-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-item .dot.dashed {
  background: none;
  border: 1.6px dashed currentColor;
}
.friend-compare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.friend-compare-row:last-child {
  border-bottom: none;
}
.friend-compare-row .check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.friend-compare-row.on .check {
  background: var(--ink-solid);
  border-color: var(--ink-solid);
}
.friend-compare-row.on .check svg {
  display: block;
}
.friend-compare-row .check svg {
  display: none;
  width: 12px;
  height: 12px;
  stroke: #fff;
  stroke-width: 3;
}
.friend-compare-empty {
  color: var(--ink-faint);
  font-size: var(--fs-secondary);
  padding: 8px 0;
}

.quiet-card,
.challenge-card,
.game-tile {
  position: relative;
}
.quiet-card::before,
.challenge-card::before,
.game-tile::before,
.quiet-card::after,
.challenge-card::after,
.game-tile::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0.55;
  pointer-events: none;
}
.quiet-card::before,
.challenge-card::before,
.game-tile::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
  border-radius: 4px 0 0 0;
}
.quiet-card::after,
.challenge-card::after,
.game-tile::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  border-radius: 0 0 4px 0;
}
.quiet-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}
.point-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 6px 4px;
  border-radius: 10px;
  gap: 1px;
  font-family: var(--font-mono);
}
.point-pill span {
  font-size: 12px;
  font-weight: 800;
}
.point-pill small {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  opacity: 0.9;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-me {
  background: var(--blue-fill);
  color: #fff;
}
.pt-partner {
  background: var(--blue-soft);
  color: var(--blue-text);
}
.pt-rival {
  background: var(--line-soft);
  color: var(--ink-muted);
}
.game-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 10px;
}
.game-points {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--line-soft);
  border-top-color: var(--blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.onboard-fill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  text-align: center;
}
.step-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 4px;
}
.step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.step-dot.active {
  background: var(--blue);
  width: 16px;
  border-radius: 4px;
} /* --- Acordeón genérico: convocatorias y pistas (Social y Partidos) y los
     bloques de Ajustes → Notificaciones. --- */
.accordion {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--surface);
}
.accordion-header .chev {
  color: var(--ink-faint);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.accordion-header.open .chev {
  transform: rotate(180deg);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-body.open {
  max-height: 400px;
}
.accordion-body.tall.open {
  max-height: 900px;
}
.accordion-body-inner {
  padding: 2px 16px 12px;
} /* --- Tarjetas de notificaciones al abrir la app --- */
.notif-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  background: var(--surface);
}
.notif-card:active {
  background: var(--line-soft);
}
.notif-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.notif-card-title {
  font-weight: 700;
  font-size: 13.5px;
  padding-right: 20px;
}
.notif-card-desc {
  color: var(--ink-muted);
  font-size: var(--fs-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.notif-card-time {
  color: var(--ink-faint);
  font-size: 10.5px;
  margin-top: 5px;
  font-weight: 600;
}
.notif-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--line-soft);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-card-close:active {
  background: var(--line);
}
.notif-badge-count {
  background: var(--red-fill);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  margin-left: 6px;
}

/* --- Manual de ayuda --- */
.help-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
  transition:
    background-color 0.4s ease,
    border-radius 0.4s ease;
}
.help-section:last-child {
  border-bottom: none;
}
.help-section.help-highlight {
  background: var(--blue-soft);
  margin: 0 -14px;
  padding: 20px 14px;
  border-radius: 14px;
}
.help-flow {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 16px 0 10px;
}
.help-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  text-align: center;
}
.help-flow-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.help-flow-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-muted);
  line-height: 1.3;
}
.help-flow-arrow {
  color: var(--ink-faint);
  font-size: 16px;
  flex-shrink: 0;
  padding-top: 12px;
}
.help-mock-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 14px 0 6px;
}
.help-mock-card {
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--line-soft);
  pointer-events: none;
}
.court-item {
  border-bottom: 1px solid var(--line-soft);
}
.court-item:last-child {
  border-bottom: none;
}
.court-item .row {
  border-bottom: none;
  padding: 12px 0;
}
.court-item .chev.mini {
  width: 15px;
  height: 15px;
}
.court-detail {
  padding: 0 0 14px 50px;
}
.court-detail-row {
  font-size: var(--fs-secondary);
  color: var(--ink-muted);
  line-height: 1.6;
}
.court-detail .btn-ghost {
  margin-top: 10px;
  font-size: 12.5px;
  padding: 10px;
} /* --- Retos --- */
.challenge-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 16px;
  margin-bottom: 12px;
  background: var(--surface);
  overflow: visible;
}
.challenge-card.special {
  border-color: var(--amber);
  background: var(--amber-soft);
}
.challenge-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.challenge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.challenge-title {
  font-weight: 700;
  font-size: 14px;
}
.challenge-desc {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.challenge-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}
.challenge-status {
  font-size: var(--fs-secondary);
  color: var(--ink-muted);
  margin-top: 8px;
  font-weight: 600;
  line-height: 1.4;
}
.challenge-status.ok {
  color: var(--green-text);
}
.challenge-status.soon {
  color: var(--amber);
}
.btn-accept {
  background: var(--ink-solid);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-accept.accepted {
  background: var(--line-soft);
  color: var(--ink-muted);
}
.challenge-remove {
  font-size: 11.5px;
  color: var(--ink-faint);
  cursor: pointer;
  font-weight: 600;
  text-align: right;
  margin-top: 8px;
}
.challenge-share-link {
  font-size: 11.5px;
  color: var(--blue-text);
  cursor: pointer;
  font-weight: 700;
  margin-top: 8px;
}
.challenge-dare {
  font-size: 11.5px;
  color: var(--blue-text);
  cursor: pointer;
  font-weight: 700;
  margin-top: 10px;
}
.special-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #8a5a00;
  background: rgba(245, 166, 35, 0.22);
  border-radius: 6px;
  padding: 3px 7px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.diff-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.diff-chip {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink-muted);
  background: var(--surface);
}
.diff-chip b {
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
  color: var(--ink-faint);
}
/* Dificultad elegida para la semana siguiente (retos de la semana) */
.diff-chip.selected {
  border-color: var(--blue);
  color: var(--blue-text);
  background: var(--blue-soft);
}
.diff-chip.easy:active {
  border-color: var(--green);
  color: var(--green-text);
}
.diff-chip.hard:active {
  border-color: var(--coral);
  color: var(--coral-text);
}
.demo-sim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  margin-bottom: 22px;
} /* --- Nivel de constancia (XP) --- */
.consistency-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--surface), var(--blue-soft));
}
.consistency-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.consistency-level {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.consistency-xp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 700;
}

/* --- Insignias --- */
.badge-circle {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.badge-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--amber-soft);
  border: 1.5px solid var(--amber);
  filter: none;
}
.badge-circle.locked .badge-icon {
  background: var(--line-soft);
  border: 1.5px solid var(--line);
  filter: grayscale(1);
  opacity: 0.55;
}
.badge-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.25;
} /* --- Celebración de reto conseguido --- */
.confetti-dot {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiPop 0.9s ease-out forwards;
  z-index: 5;
}
@keyframes confettiPop {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(0) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(var(--dist, 60px)) scale(1);
    opacity: 0;
  }
}
.xp-float {
  position: absolute;
  top: 8px;
  right: 14px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  color: var(--green-text);
  opacity: 0;
  animation: xpFloatAnim 1.6s ease forwards;
  z-index: 6;
}
@keyframes xpFloatAnim {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}
/* .game-tile se usa como tarjeta clicable con icono (p.ej. el resumen anual compartible) */
.game-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 12px;
  background: var(--surface);
}
.game-tile .icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Las dos tarjetas destacadas de "Buscar partido" / "Crear partido" (en
     Social y en Partidos): más grandes que una fila normal, con fondo
     degradado propio, para que se note que son la acción principal de la
     pantalla y no una opción más de la lista. */
.social-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.social-hero-card {
  border-radius: 18px;
  padding: 16px 14px 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1.5px solid var(--line);
  transition: transform 0.12s;
}
.social-hero-card:active {
  transform: scale(0.97);
}
.social-hero-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* ---------------- CHAT ---------------- */
.chat-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.chat-list-row:last-child {
  border-bottom: none;
}
.chat-list-preview {
  color: var(--ink-muted);
  font-size: var(--fs-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.chat-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}
.chat-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  margin-bottom: 16px;
}
.chat-header-info {
  flex: 1;
  min-width: 0;
}
.chat-header-info .name {
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-header-info .sub {
  color: var(--ink-muted);
  font-size: var(--fs-secondary);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-msg-row {
  display: flex;
  margin-bottom: 12px;
}
.chat-msg-row.me {
  justify-content: flex-end;
}
.chat-msg-row.system {
  justify-content: center;
}
.chat-bubble {
  max-width: 76%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
}
.chat-bubble.them {
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-bubble.me {
  background: var(--ink-solid);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.system {
  background: var(--line-soft);
  color: var(--ink-muted);
  font-size: 11.5px;
  text-align: center;
  border-radius: 10px;
  padding: 7px 12px;
}
.chat-time {
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 4px;
}
.chat-msg-row.me .chat-time {
  text-align: right;
}
.fr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  max-width: 80%;
}
.fr-card .fr-title {
  font-weight: 700;
  font-size: 13px;
}
.fr-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.fr-actions button {
  flex: 1;
  padding: 8px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  border: none;
  font-family: var(--font);
}
.fr-accept {
  background: var(--ink-solid);
  color: #fff;
}
.fr-decline {
  background: var(--line-soft);
  color: var(--ink-muted);
}
.fr-resolved {
  color: var(--ink-faint);
  font-size: 11.5px;
  margin-top: 8px;
  font-weight: 600;
}
.chat-input-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--inputbar-bg);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px 16px 22px;
  display: none;
  gap: 8px;
  align-items: center;
  z-index: 40;
}
.chat-input-bar input {
  margin-bottom: 0;
  flex: 1;
}
.chat-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink-solid);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.msg-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-empty {
  padding: 60px 10px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.6;
}
.avatar.group {
  background: var(--violet-soft);
  color: var(--violet);
}
.emoji-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--line-soft);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
}
.emoji-panel {
  position: absolute;
  bottom: 66px;
  left: 16px;
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  display: none;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.28);
  z-index: 41;
  max-height: 160px;
  overflow-y: auto;
}
.emoji-panel.show {
  display: grid;
}
.emoji-panel button {
  background: none;
  border: none;
  font-size: 20px;
  padding: 6px 0;
  cursor: pointer;
  border-radius: 8px;
}
.emoji-panel button:active {
  background: var(--line-soft);
}
.chat-sender-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 0 2px 3px;
}
.group-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.group-member-row:last-child {
  border-bottom: none;
}
.group-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.group-check.checked {
  background: var(--ink-solid);
  border-color: var(--ink-solid);
}
.group-check.checked svg {
  display: block;
}
.group-check svg {
  display: none;
}
.headerbtn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============ OPTIMIZACIÓN DE BATERÍA ============
     1) Si el sistema operativo del usuario tiene activado "reducir
        movimiento" (una preferencia que el propio usuario elige en los
        ajustes de accesibilidad de su móvil, no algo que toquemos nosotros),
        se apagan aquí las animaciones puramente decorativas e infinitas
        (los "pings", el giro de los anillos del hub, el brillo del núcleo).
        No afecta a nadie que no haya activado esa preferencia, y no toca
        ninguna animación que comunique información real (confetti de logro,
        cambios de pantalla, etc. siguen igual). */
@media (prefers-reduced-motion: reduce) {
  .eyebrow::after,
  .hub-orbit-ring,
  .hub-core::after,
  .core-fab::after,
  .hub-node.hub-node-alert::after,
  .notch::after,
  .skel {
    animation: none !important;
  }
}
/* 2) Clase que añade JS cuando la pestaña/app pasa a segundo plano
     (usuario cambia de app, apaga la pantalla, etc.). Pausa TODAS las
     animaciones CSS en curso: los "pings" infinitos del hub, el botón
     flotante, el giro de los anillos, el shimmer de los skeletons... nada
     de eso tiene sentido (ni gasta CPU/batería) mientras no se está viendo
     la pantalla. Se reanuda solo, tal cual estaba, al volver a primer plano. */
html.app-paused,
html.app-paused * {
  animation-play-state: paused !important;
}
/* Funciones que el DEF 2.1 deja fuera o para más adelante: se ocultan sin borrar su código (FEATURES) */
[data-feature-off] {
  display: none !important;
}
select:disabled,
option:disabled {
  opacity: 0.5;
}
/* Los mensajes reales del servidor pueden ser largos: el aviso flotante pasa a varias líneas */
.toast {
  white-space: normal;
  width: max-content;
  max-width: calc(100% - 40px);
  text-align: center;
  line-height: 1.4;
}
.hub-top .iconbtn {
  position: relative;
}
.iconbtn svg {
  flex-shrink: 0;
}
#notif-badge-count-hub {
  position: absolute;
  top: -4px;
  right: -8px;
}
#notif-badge-count-hub .notif-badge-count {
  margin-left: 0;
}

/* Lo que antes eran estilos en línea (F-14, GUIA_MANTENIMIENTO 5.4 bis). Todo va bajo #app (el <body>): así gana a
   cualquier regla de clases, también en :hover, como el style="…" al que sustituye. */

/* Combinaciones que se repiten */
#app .svg-solid {
  fill: var(--ink);
  stroke: none;
}
#app .link-strong {
  color: var(--blue-text);
  font-weight: 700;
  cursor: pointer;
}
#app .field-select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 12px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  width: 100%;
  margin-bottom: 10px;
}
#app .switch-label {
  flex: 1;
  padding-right: 10px;
}
#app .row-title-sm {
  font-weight: 700;
  font-size: 13px;
}
#app .sub-text-sm {
  color: var(--ink-muted);
  font-size: 11.5px;
  margin-top: 2px;
}
#app .row-title {
  font-weight: 700;
  font-size: 13.5px;
}
#app .sub-text {
  color: var(--ink-muted);
  font-size: 12px;
  margin-top: 2px;
}
#app .meta-text {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
}
#app .row-chevron {
  color: var(--ink-faint);
  font-weight: 400;
}
/* El contador de avisos sin leer de la fila «Notificaciones» va en blanco sobre rojo, no en el gris de la flecha */
#app .row-chevron .notif-badge-count {
  color: #fff;
}
#app .help-h3 {
  font-size: 15px;
  margin: 6px 0 6px;
}
#app .help-text {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
}
#app .kv-value {
  text-align: right;
  max-width: 62%;
  font-weight: 500;
}
#app .sheet-title {
  font-size: 17px;
  margin-bottom: 8px;
}
#app .sheet-select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14.5px;
  margin-bottom: 12px;
}
#app .chev-turn {
  transition: transform 0.25s ease;
  transform: rotate(0deg);
}
#app .chev-turn.is-open {
  transform: rotate(180deg);
}
#app .avatar-choice {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}
#app .avatar-choice.is-picked {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
#app .palette-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--line);
}
#app .view-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
#app .view-title {
  font-size: 17px;
  flex: 1;
}
#app .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#app .sheet-text {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}
#app .help-h4 {
  font-size: 13.5px;
  margin: 16px 0 4px;
}
#app .team-label {
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
#app .accent-strong {
  color: var(--blue-text);
  font-weight: 700;
}
#app .check-input {
  width: auto;
  margin: 2px 0 0;
  flex-shrink: 0;
}
#app .onboard-title {
  text-align: center;
  font-size: 21px;
  margin-top: 10px;
}
#app .empty-state {
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
  padding: 30px 10px;
}
#app .empty-note {
  color: var(--ink-muted);
  font-size: 12.5px;
  padding: 8px 0;
}
#app .compare-label {
  flex: 1;
  font-size: 13px;
  color: var(--ink-muted);
}

/* Valores calculados: la plantilla pone data-vars="--v-w:40%" y applyVars() (app.js) lo pasa al elemento;
   estas clases leen la variable (F-14) */
#app .u-w-var {
  width: var(--v-w);
}
#app .u-bg-var {
  background: var(--v-bg);
}
#app .u-c-var {
  color: var(--v-c);
}
#app .u-delay-var {
  animation-delay: var(--v-delay);
}
#app .u-size-var {
  width: var(--v-size);
  height: var(--v-size);
}
#app .u-fs-var {
  font-size: var(--v-fs);
}
#app .u-bgimg-var {
  background-image: var(--v-img);
}
#app .u-z-var {
  z-index: var(--v-z);
}

/* Utilidades: una declaración cada una, u-<propiedad>-<valor>; los abreviados (margin, padding…) antes que sus
   propiedades largas, así que u-m-0 u-mt-4 deja margin-top:4px, como en línea. */
#app .u-bg-amber-soft {
  background: var(--amber-soft);
}
#app .u-bg-blue {
  background: var(--blue);
}
#app .u-bg-blue-soft {
  background: var(--blue-soft);
}
#app .u-bg-coral-soft {
  background: var(--coral-soft);
}
#app .u-bg-fff {
  background: #fff;
}
#app .u-bg-grad-blue {
  background: linear-gradient(150deg, var(--blue-soft), var(--surface) 75%);
}
#app .u-bg-grad-blue-135 {
  background: linear-gradient(135deg, var(--surface), var(--blue-soft));
}
#app .u-bg-grad-coral {
  background: linear-gradient(150deg, var(--coral-soft), var(--surface) 75%);
}
#app .u-bg-grad-premium {
  background: linear-gradient(135deg, var(--violet), #6d3fd1);
}
#app .u-bg-grad-violet {
  background: linear-gradient(150deg, var(--violet-soft), var(--surface) 75%);
}
#app .u-bg-green {
  background: var(--green);
}
#app .u-bg-green-13 {
  background: #1fae6822;
}
#app .u-bg-green-soft {
  background: var(--green-soft);
}
#app .u-bg-line {
  background: var(--line);
}
#app .u-bg-line-soft {
  background: var(--line-soft);
}
#app .u-bg-none {
  background: none;
}
#app .u-bg-red {
  background: var(--red-fill);
}
#app .u-bg-red-soft {
  background: var(--red-soft);
}
#app .u-bg-surface {
  background: var(--surface);
}
#app .u-bg-violet-soft {
  background: var(--violet-soft);
}
#app .u-bg-white-8 {
  background: rgba(255, 255, 255, 0.08);
}
#app .u-bg-white-92 {
  background: rgba(255, 255, 255, 0.92);
}
#app .u-bd-2-solid-bg {
  border: 2px solid var(--bg);
}
#app .u-bd-2-surface {
  border: 2px solid var(--surface);
}
#app .u-bd-line {
  border: 1px solid var(--line);
}
#app .u-bd-none {
  border: none;
}
#app .u-bottom-n2 {
  bottom: -2px;
}
#app .u-c-14212b {
  color: #14212b;
}
#app .u-c-amber {
  color: var(--amber);
}
#app .u-c-blue {
  color: var(--blue-text);
}
#app .u-c-down {
  color: var(--red, #d64545);
}
#app .u-c-fff {
  color: #fff;
}
#app .u-c-green {
  color: var(--green-text);
}
#app .u-c-ink {
  color: var(--ink);
}
#app .u-c-ink-faint {
  color: var(--ink-faint);
}
#app .u-c-ink-muted {
  color: var(--ink-muted);
}
#app .u-c-red {
  color: var(--red-text);
}
#app .u-c-transparent {
  color: transparent;
}
#app .u-c-up {
  color: var(--green, #18a058);
}
#app .u-c-violet {
  color: var(--violet);
}
#app .u-cur-default {
  cursor: default;
}
#app .u-cur-not-allowed {
  cursor: not-allowed;
}
#app .u-cur-pointer {
  cursor: pointer;
}
#app .u-d-block {
  display: block;
}
#app .u-d-flex {
  display: flex;
}
#app .u-d-grid {
  display: grid;
}
#app .u-d-inline-flex {
  display: inline-flex;
}
#app .u-d-none {
  display: none;
}
#app .u-flex-1 {
  flex: 1;
}
#app .u-flex-132 {
  flex: 0 0 132px;
}
#app .u-gap-0 {
  gap: 0;
}
#app .u-gap-10 {
  gap: 10px;
}
#app .u-gap-12 {
  gap: 12px;
}
#app .u-gap-14 {
  gap: 14px;
}
#app .u-gap-14-10 {
  gap: 14px 10px;
}
#app .u-gap-16 {
  gap: 16px;
}
#app .u-gap-2 {
  gap: 2px;
}
#app .u-gap-24 {
  gap: 24px;
}
#app .u-gap-5 {
  gap: 5px;
}
#app .u-gap-6 {
  gap: 6px;
}
#app .u-gap-8 {
  gap: 8px;
}
#app .u-h-100p {
  height: 100%;
}
#app .u-h-14 {
  height: 14px;
}
#app .u-h-22 {
  height: 22px;
}
#app .u-h-36 {
  height: 36px;
}
#app .u-h-38 {
  height: 38px;
}
#app .u-h-40 {
  height: 40px;
}
#app .u-h-44 {
  height: 44px;
}
#app .u-h-48 {
  height: 48px;
}
#app .u-h-56 {
  height: 56px;
}
#app .u-h-6 {
  height: 6px;
}
#app .u-h-60 {
  height: 60px;
}
#app .u-h-64 {
  height: 64px;
}
#app .u-h-68 {
  height: 68px;
}
#app .u-h-76 {
  height: 76px;
}
#app .u-h-8 {
  height: 8px;
}
#app .u-h-auto {
  height: auto;
}
#app .u-inset-0 {
  inset: 0;
}
#app .u-m-0 {
  margin: 0;
}
#app .u-m-0-0-10 {
  margin: 0 0 10px;
}
#app .u-m-0-0-14 {
  margin: 0 0 14px;
}
#app .u-m-0-0-16 {
  margin: 0 0 16px;
}
#app .u-m-0-0-6 {
  margin: 0 0 6px;
}
#app .u-m-0-0-8 {
  margin: 0 0 8px;
}
#app .u-m-0-auto-12 {
  margin: 0 auto 12px;
}
#app .u-m-10-auto-0 {
  margin: 10px auto 0;
}
#app .u-m-12-0 {
  margin: 12px 0;
}
#app .u-m-14-0 {
  margin: 14px 0;
}
#app .u-m-14-0-0 {
  margin: 14px 0 0;
}
#app .u-m-14-0-6 {
  margin: 14px 0 6px;
}
#app .u-m-16-0 {
  margin: 16px 0;
}
#app .u-m-16-0-6 {
  margin: 16px 0 6px;
}
#app .u-m-18-0 {
  margin: 18px 0;
}
#app .u-m-18-0-4 {
  margin: 18px 0 4px;
}
#app .u-m-2-0-0 {
  margin: 2px 0 0;
}
#app .u-m-2-0-6 {
  margin: 2px 0 6px;
}
#app .u-m-4-0-10 {
  margin: 4px 0 10px;
}
#app .u-m-4-0-14 {
  margin: 4px 0 14px;
}
#app .u-m-4-0-6 {
  margin: 4px 0 6px;
}
#app .u-m-6-0-12 {
  margin: 6px 0 12px;
}
#app .u-m-6-0-14 {
  margin: 6px 0 14px;
}
#app .u-m-6-0-16 {
  margin: 6px 0 16px;
}
#app .u-m-n2-0-8 {
  margin: -2px 0 8px;
}
#app .u-m-n4-0-10 {
  margin: -4px 0 10px;
}
#app .u-m-n4-0-12 {
  margin: -4px 0 12px;
}
#app .u-m-n6-0-12 {
  margin: -6px 0 12px;
}
#app .u-op-0_5 {
  opacity: 0.5;
}
#app .u-op-0_55 {
  opacity: 0.55;
}
#app .u-op-0_6 {
  opacity: 0.6;
}
#app .u-op-0_7 {
  opacity: 0.7;
}
#app .u-ov-hidden {
  overflow: hidden;
}
#app .u-p-0 {
  padding: 0;
}
#app .u-p-0-10 {
  padding: 0 10px;
}
#app .u-p-0-24 {
  padding: 0 24px;
}
#app .u-p-0-30 {
  padding: 0 30px;
}
#app .u-p-0-6 {
  padding: 0 6px;
}
#app .u-p-1-7 {
  padding: 1px 7px;
}
#app .u-p-10 {
  padding: 10px;
}
#app .u-p-10-0 {
  padding: 10px 0;
}
#app .u-p-10-14 {
  padding: 10px 14px;
}
#app .u-p-12-0 {
  padding: 12px 0;
}
#app .u-p-12-14 {
  padding: 12px 14px;
}
#app .u-p-14 {
  padding: 14px;
}
#app .u-p-14-0 {
  padding: 14px 0;
}
#app .u-p-18-10 {
  padding: 18px 10px;
}
#app .u-p-2-7 {
  padding: 2px 7px;
}
#app .u-p-20 {
  padding: 20px;
}
#app .u-p-20-0 {
  padding: 20px 0;
}
#app .u-p-20-10 {
  padding: 20px 10px;
}
#app .u-p-20-4 {
  padding: 20px 4px;
}
#app .u-p-3-8 {
  padding: 3px 8px;
}
#app .u-p-30-0 {
  padding: 30px 0;
}
#app .u-p-40-0 {
  padding: 40px 0;
}
#app .u-p-5-0 {
  padding: 5px 0;
}
#app .u-p-5-10 {
  padding: 5px 10px;
}
#app .u-p-6-0-14 {
  padding: 6px 0 14px;
}
#app .u-p-6-14 {
  padding: 6px 14px;
}
#app .u-p-7-12 {
  padding: 7px 12px;
}
#app .u-p-8-0 {
  padding: 8px 0;
}
#app .u-p-8-10 {
  padding: 8px 10px;
}
#app .u-p-8-12 {
  padding: 8px 12px;
}
#app .u-pos-absolute {
  position: absolute;
}
#app .u-pos-relative {
  position: relative;
}
#app .u-right-n2 {
  right: -2px;
}
#app .u-scale-85 {
  transform: scale(0.85);
}
#app .u-w-1 {
  width: 1px;
}
#app .u-w-100p {
  width: 100%;
}
#app .u-w-22 {
  width: 22px;
}
#app .u-w-36 {
  width: 36px;
}
#app .u-w-38 {
  width: 38px;
}
#app .u-w-40 {
  width: 40px;
}
#app .u-w-44 {
  width: 44px;
}
#app .u-w-45p {
  width: 45%;
}
#app .u-w-56 {
  width: 56px;
}
#app .u-w-60 {
  width: 60px;
}
#app .u-w-68 {
  width: 68px;
}
#app .u-w-70p {
  width: 70%;
}
#app .u-w-76 {
  width: 76px;
}
#app .u-w-8 {
  width: 8px;
}
#app .u-w-auto {
  width: auto;
}
#app .u-w-qr {
  width: min(78vw, 300px);
}
#app .u-ai-center {
  align-items: center;
}
#app .u-ai-end {
  align-items: flex-end;
}
#app .u-ai-start {
  align-items: flex-start;
}
#app .u-bb-line {
  border-bottom: 1px solid var(--line);
}
#app .u-bb-line-soft {
  border-bottom: 1px solid var(--line-soft);
}
#app .u-bb-none {
  border-bottom: none;
}
#app .u-bdc-blue-soft {
  border-color: var(--blue-soft);
}
#app .u-bdc-line-soft {
  border-color: var(--line-soft);
}
#app .u-br-10 {
  border-radius: 10px;
}
#app .u-br-11 {
  border-radius: 11px;
}
#app .u-br-16 {
  border-radius: 16px;
}
#app .u-br-20 {
  border-radius: 20px;
}
#app .u-br-3 {
  border-radius: 3px;
}
#app .u-br-50p {
  border-radius: 50%;
}
#app .u-br-9 {
  border-radius: 9px;
}
#app .u-bt-line-soft {
  border-top: 1px solid var(--line-soft);
}
#app .u-fd-column {
  flex-direction: column;
}
#app .u-shrink-0 {
  flex-shrink: 0;
}
#app .u-fwrap-wrap {
  flex-wrap: wrap;
}
#app .u-ff-font {
  font-family: var(--font);
}
#app .u-ff-font-mono {
  font-family: var(--font-mono);
}
#app .u-fs-10 {
  font-size: 10px;
}
#app .u-fs-10_5 {
  font-size: 10.5px;
}
#app .u-fs-11 {
  font-size: 11px;
}
#app .u-fs-11_5 {
  font-size: 11.5px;
}
#app .u-fs-12 {
  font-size: 12px;
}
#app .u-fs-12_5 {
  font-size: 12.5px;
}
#app .u-fs-13 {
  font-size: 13px;
}
#app .u-fs-13_5 {
  font-size: 13.5px;
}
#app .u-fs-14 {
  font-size: 14px;
}
#app .u-fs-14_5 {
  font-size: 14.5px;
}
#app .u-fs-15 {
  font-size: 15px;
}
#app .u-fs-15_5 {
  font-size: 15.5px;
}
#app .u-fs-16 {
  font-size: 16px;
}
#app .u-fs-16_5 {
  font-size: 16.5px;
}
#app .u-fs-17 {
  font-size: 17px;
}
#app .u-fs-18 {
  font-size: 18px;
}
#app .u-fs-20 {
  font-size: 20px;
}
#app .u-fs-21 {
  font-size: 21px;
}
#app .u-fs-22 {
  font-size: 22px;
}
#app .u-fs-24 {
  font-size: 24px;
}
#app .u-fs-27 {
  font-size: 27px;
}
#app .u-fs-28 {
  font-size: 28px;
}
#app .u-fs-9_5 {
  font-size: 9.5px;
}
#app .u-fst-italic {
  font-style: italic;
}
#app .u-fw-500 {
  font-weight: 500;
}
#app .u-fw-600 {
  font-weight: 600;
}
#app .u-fw-700 {
  font-weight: 700;
}
#app .u-fw-800 {
  font-weight: 800;
}
#app .u-img-pixelated {
  image-rendering: pixelated;
}
#app .u-jc-between {
  justify-content: space-between;
}
#app .u-jc-center {
  justify-content: center;
}
#app .u-lh-1 {
  line-height: 1;
}
#app .u-lh-1_4 {
  line-height: 1.4;
}
#app .u-lh-1_45 {
  line-height: 1.45;
}
#app .u-lh-1_5 {
  line-height: 1.5;
}
#app .u-mb-0 {
  margin-bottom: 0;
}
#app .u-mb-10 {
  margin-bottom: 10px;
}
#app .u-mb-12 {
  margin-bottom: 12px;
}
#app .u-mb-14 {
  margin-bottom: 14px;
}
#app .u-mb-16 {
  margin-bottom: 16px;
}
#app .u-mb-18 {
  margin-bottom: 18px;
}
#app .u-mb-2 {
  margin-bottom: 2px;
}
#app .u-mb-20 {
  margin-bottom: 20px;
}
#app .u-mb-24 {
  margin-bottom: 24px;
}
#app .u-mb-26 {
  margin-bottom: 26px;
}
#app .u-mb-36 {
  margin-bottom: 36px;
}
#app .u-mb-4 {
  margin-bottom: 4px;
}
#app .u-mb-6 {
  margin-bottom: 6px;
}
#app .u-mb-8 {
  margin-bottom: 8px;
}
#app .u-ml-0 {
  margin-left: 0;
}
#app .u-ml-10 {
  margin-left: 10px;
}
#app .u-ml-12 {
  margin-left: 12px;
}
#app .u-ml-4 {
  margin-left: 4px;
}
#app .u-ml-6 {
  margin-left: 6px;
}
#app .u-ml-n8 {
  margin-left: -8px;
}
#app .u-mt-0 {
  margin-top: 0;
}
#app .u-mt-1 {
  margin-top: 1px;
}
#app .u-mt-10 {
  margin-top: 10px;
}
#app .u-mt-12 {
  margin-top: 12px;
}
#app .u-mt-14 {
  margin-top: 14px;
}
#app .u-mt-16 {
  margin-top: 16px;
}
#app .u-mt-18 {
  margin-top: 18px;
}
#app .u-mt-2 {
  margin-top: 2px;
}
#app .u-mt-20 {
  margin-top: 20px;
}
#app .u-mt-22 {
  margin-top: 22px;
}
#app .u-mt-24 {
  margin-top: 24px;
}
#app .u-mt-26 {
  margin-top: 26px;
}
#app .u-mt-3 {
  margin-top: 3px;
}
#app .u-mt-32 {
  margin-top: 32px;
}
#app .u-mt-4 {
  margin-top: 4px;
}
#app .u-mt-6 {
  margin-top: 6px;
}
#app .u-mt-8 {
  margin-top: 8px;
}
#app .u-mt-n2 {
  margin-top: -2px;
}
#app .u-maxh-220 {
  max-height: 220px;
}
#app .u-maxh-280 {
  max-height: 280px;
}
#app .u-maxw-150 {
  max-width: 150px;
}
#app .u-maxw-260 {
  max-width: 260px;
}
#app .u-maxw-300 {
  max-width: 300px;
}
#app .u-minh-64 {
  min-height: 64px;
}
#app .u-minw-0 {
  min-width: 0;
}
#app .u-fit-cover {
  object-fit: cover;
}
#app .u-ovy-auto {
  overflow-y: auto;
}
#app .u-pb-20 {
  padding-bottom: 20px;
}
#app .u-pt-14 {
  padding-top: 14px;
}
#app .u-pt-20 {
  padding-top: 20px;
}
#app .u-pt-4 {
  padding-top: 4px;
}
#app .u-ta-center {
  text-align: center;
}
#app .u-ta-left {
  text-align: left;
}
#app .u-ta-right {
  text-align: right;
}
#app .u-td-none {
  text-decoration: none;
}
#app .u-tfo-right-center {
  transform-origin: right center;
}
#app .u-va-middle {
  vertical-align: middle;
}
#app .u-ws-nowrap {
  white-space: nowrap;
}
#app .u-bbc-6d3fd1 {
  border-bottom-color: #6d3fd1;
}
#app .u-cols-2 {
  grid-template-columns: 1fr 1fr;
}
#app .u-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Logros (DEF 11.3): resumen del perfil, hoja «Logros» y perfil de otro jugador (web/js/stats.js) */
#app .ach-more {
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
#app .ach-count {
  font-size: 13.5px;
  color: var(--ink);
}
#app .ach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#app .ach-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
#app .ach-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
#app .ach-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 19px;
  background: var(--blue-soft);
}
#app .ach-row.off .ach-icon {
  background: var(--line-soft);
  filter: grayscale(1);
}
#app .ach-when,
#app .ach-progress-text {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}
#app .ach-row:not(.off) .ach-when {
  color: var(--blue-text);
  font-weight: 600;
}
#app .ach-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
#app .ach-progress-text {
  margin-top: 0;
  flex-shrink: 0;
}