/* =============================================================================
   Illuvi Radar — inteligencia de mercado de Illuvium

   Color: v7 abandona el petróleo apagado por una base violeta-noche mucho
   más saturada, con un juego de acentos vivos (ámbar, cian, violeta, magenta)
   en vez de un único dorado discreto. El color sigue sin decorar porque no
   se toca su SIGNIFICADO: los tonos de acabado siguen codificando el factor
   que más manda en el precio (un DarkHolo se vende por 25x la mediana de un
   Colour) — lo único que cambia es que cada uno de esos tonos es ahora más
   intenso. El dorado (--gold) sigue reservado al deal score, al CTA principal
   y al estado activo de la navegación.

   Tipografía: Archivo para texto, IBM Plex Mono solo para cifras. La mono no
   es un gesto estético: las columnas de precio deben alinearse dígito con
   dígito para poder compararse de un vistazo.

   v7 — REDISEÑO TOTAL: paleta primero, disposición de menú lateral después
   (ver v8 más abajo). Se mantienen intactos todos los nombres de variable,
   clase e id que usa app.js/extras.js — esta hoja sigue cambiando CÓMO se ve
   cada cosa, nunca CUÁL elemento la lleva.

   v8 — el menú vuelve a ir arriba, centrado, con los filtros de Market como
   columna vertical a la izquierda (ver `.market-layout` y la cabecera de
   navegación más abajo). `.top` es un grid de tres columnas
   (`.top-left` / `#nav` / `.top-right`); en móvil `#nav` es el que se
   convierte en desplegable, no la cabecera entera — ver
   `.side-toggle`/`.side-overlay` y `initSidebar()` en app.js.
   ========================================================================== */

:root {
  --ink:        #0b0a18;
  --surface:    #14122a;
  --surface-2:  #1b1836;
  --surface-3:  #242047;
  --line:       #332f5c;
  --line-soft:  #262244;

  --text:       #f3eefb;
  --text-dim:   #aca3d1;
  --text-faint: #756c9c;

  --gold:       #ffb020;
  --gold-soft:  color-mix(in srgb, var(--gold) 18%, transparent);
  --up:         #2fe6a7;
  --down:       #ff5c8a;
  --accent:     #22d3ee;

  --colour:     #7c8fff;
  --holo:       #b478ff;
  --darkholo:   #ff64c8;

  /* v7: degradado de marca — nav activo, CTA principal, brillo de tarjetas.
     Un único color plano ya no encaja con "más colorido"; un degradado de
     dos-tres acentos sí, y como es un token nuevo (no reemplaza ninguno que
     app.js lea) no hay riesgo de romper nada. */
  --brand-grad: linear-gradient(135deg, var(--gold) 0%, #ff7a4d 45%, var(--darkholo) 100%);

  /* radio: escala corta, de chip a superficie grande. --r se conserva por
     compatibilidad — lo usan decenas de selectores — pero ahora es el peldaño
     "pequeño" de la escala en vez de un valor suelto de 3px. */
  --r-xs:  5px;
  --r:     7px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-full: 999px;

  /* espaciado: no se reescribe todo el fichero con esto, pero gobierna cada
     componente nuevo o retocado a fondo (cabecera, tarjetas, home). */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* movimiento: una sola curva y tres duraciones para todo el sitio, así el
     ritmo de una tarjeta y el de un modal se sienten de la misma familia. */
  --ease:   cubic-bezier(.16, .84, .44, 1);
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --dur-1:  120ms;
  --dur-2:  220ms;
  --dur-3:  420ms;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 10px 28px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 56px -18px rgba(0,0,0,.6);
  --shadow-gold: 0 0 0 1px rgba(255,176,32,.4), 0 14px 36px -14px rgba(255,176,32,.35);

  --glass: color-mix(in srgb, var(--ink) 78%, transparent);

  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Archivo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/*
 * FONDO "AURORA". Reemplaza la vieja rejilla de puntos que reaccionaba al
 * ratón por un resplandor que respira (pulso), tres manchas de color grandes
 * y borrosas que flotan despacio, y un campo de estrellas que titilan. Todo
 * con CSS puro (gradientes + `filter:blur()` + `@keyframes`); app.js solo
 * inserta los `div` una vez (ver `iniciarFondo()`), sin canvas ni bucle de
 * dibujo. Los tonos de las manchas son los mismos acentos de marca que ya
 * usa el resto del sitio (--holo/--darkholo/--colour) — no se inventan
 * colores nuevos. Fijo, detrás de todo por orden en el DOM (va antes que la
 * cabecera en index.html), sin capturar el ratón ni el foco.
 *
 * `z-index:-1` EXPLÍCITO — no alcanza con el orden del DOM. Se encontró en
 * §16 (el abanico de Opportunities) que con muchas tarjetas `.fan-card` con
 * `will-change:transform` en pantalla a la vez, el navegador (comprobado en
 * el Chromium sin aceleración por GPU de este entorno de pruebas) podía
 * pintar el fondo POR ENCIMA de contenido normal sin transformar (el título
 * de la sección, las flechas y los puntos del carrusel) aunque
 * `getComputedStyle` dijera que todo estaba bien y el orden del DOM fuera
 * correcto — un capa compuesta calculada mal, no un error de CSS. Fijar
 * `z-index:-1` saca a `#fondo` de cualquier ambigüedad de una vez.
 *
 * §18: a pedido del usuario, el fondo pasa a un negro mucho más marcado (en
 * vez de `var(--ink)` a secas, que era la base pero quedaba tapada casi del
 * todo por el resplandor y las manchas a máxima opacidad) y el movimiento se
 * hace notar de un vistazo en vez de solo con la mirada fija: las manchas
 * ahora también crecen y se achican (antes dos de las tres solo se
 * desplazaban/giraban) con ciclos más cortos, y las estrellas pasan de un
 * titileo tenue (opacidad .1↔.9, nunca invisibles del todo) a aparecer y
 * desaparecer de verdad (0 → su brillo → 0). Para que el oscurecido de la
 * base en verdad se note (y no quede otra vez tapado), el resplandor y las
 * manchas bajan su opacidad de techo — siguen siendo las mismas franjas de
 * color de marca, solo que pintadas más tenues sobre un fondo más negro, en
 * vez de a máxima intensidad sobre uno más claro. No se toca el token
 * `--ink` en sí (lo usan botones y otros bloques con su propio contraste ya
 * calculado) — se oscurece solo el fondo de `#fondo` mezclándolo con negro.
 */
#fondo {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1;
  pointer-events: none; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 60%, black);
}

.aurora-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 40%,
    color-mix(in srgb, var(--holo) 34%, transparent) 0%,
    color-mix(in srgb, var(--colour) 20%, transparent) 38%,
    transparent 70%);
  animation: aurora-pulso 8s var(--ease) infinite;
}

.aurora-blob {
  position: absolute;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  min-width: 320px; min-height: 320px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .38;
  will-change: transform;
}
.aurora-blob.a1 { top: -8%; left: -8%; background: var(--holo); animation: aurora-deriva-1 15s ease-in-out infinite; }
.aurora-blob.a2 { bottom: -12%; right: -6%; background: var(--darkholo); animation: aurora-deriva-2 18s ease-in-out infinite; }
.aurora-blob.a3 { top: 30%; left: 50%; background: var(--colour); transform: translate(-50%, 0) scale(1); animation: aurora-deriva-3 21s ease-in-out infinite; }

.aurora-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
  animation: aurora-titilar var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
}

@keyframes aurora-pulso {
  0%, 100% { opacity: .32; transform: scale(1); }
  50%      { opacity: .62; transform: scale(1.14); }
}
/* Las tres manchas ya no solo se desplazan (y, para a1/a2, giran): ahora
   también crecen y se achican dentro del mismo ciclo, como pidió el
   usuario ("los círculos de fondo se mueven, crecen un poco y se achican"). */
@keyframes aurora-deriva-1 {
  0%, 100% { transform: translate(0, 0)       rotate(0deg)   scale(1);    }
  50%      { transform: translate(8vw, 10vh)  rotate(22deg)  scale(1.22); }
}
@keyframes aurora-deriva-2 {
  0%, 100% { transform: translate(0, 0)        rotate(0deg)   scale(1);    }
  50%      { transform: translate(-9vw, -8vh)  rotate(-18deg) scale(1.28); }
}
@keyframes aurora-deriva-3 {
  0%, 100% { transform: translate(-50%, 0)   scale(1);    }
  50%      { transform: translate(-50%, 7vh) scale(1.24); }
}
/* Titileo real: de invisible a su brillo propio (`--pico`, distinto por
   estrella, ver `iniciarFondo()` en app.js) y de vuelta a invisible — antes
   el mínimo era opacidad .1, así que ninguna estrella llegaba a
   desaparecer del todo. */
@keyframes aurora-titilar {
  0%, 100% { opacity: 0; }
  50%      { opacity: var(--pico, .8); }
}

@media (prefers-reduced-motion: reduce) {
  #fondo { opacity: .6; }
  .aurora-glow, .aurora-blob { animation: none !important; }
  .aurora-star { animation: none !important; opacity: var(--pico, .5) !important; }
}

/* ---------------------------------------------------------------------------
   `hidden` TIENE QUE GANAR SIEMPRE. Ver histórico: el indicador de frescura
   nacía oculto y una regla de `display` en su clase lo des-ocultaba sin querer.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* -------------------------------------------------------------- navegación
   REDISEÑO (v8): el menú lateral de v7 vuelve a ser una barra de arriba, con
   el menú principal centrado en el medio — `.top` sigue siendo el mismo
   elemento con los mismos hijos e ids que usa app.js (`#colWrap`, `#nav`,
   `#ppBtn`, `#frescBtn`, `#topMeta`), solo que ahora se agrupan en dos
   envoltorios nuevos (`.top-left`, `.top-right`) que no rompen nada porque
   nada fuera de esta hoja los consulta. Un grid de tres columnas
   (`1fr auto 1fr`) centra el menú de verdad, sin importar cuánto pesen los
   grupos de los lados.

   En vez del recorte silencioso de v6 (`overflow-x:auto` escondiendo
   enlaces sin avisar, ver la trampa documentada en §4), aquí el menú
   colapsa a un cajón desplegable en móvil: mismo mecanismo de v7
   (`#sideToggle`/`#sideOverlay`/`initSidebar()`), pero ahora es `#nav` el
   que se abre y cierra, no la cabecera entera. */

.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--sp-4);
  /*
   * clamp() en vez de var(--sp-5) fijo: en pantallas anchas 24px se ve
   * pegado al borde (se pidió arreglarlo); en móvil 24px sigue siendo lo
   * mínimo cómodo. El mismo clamp se usa en `.view` (más abajo) para que el
   * borde del contenido y el borde de la cabecera queden alineados en vez
   * de sentirse como dos anchos distintos.
   */
  padding: 0 clamp(24px, 3vw, 56px); height: 64px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  position: sticky; top: 0; z-index: 40;
}

/*
 * min-width: 0 EN LOS DOS LADOS, NO SOLO A LA IZQUIERDA. Con `1fr auto 1fr`
 * cada columna 1fr tiene por defecto un mínimo igual al ancho de su
 * contenido (min-content); si un lado pesa más que el otro, esa columna se
 * queda más ancha para no recortar su contenido y el nav del medio deja de
 * quedar centrado de verdad, aunque las dos columnas digan "1fr". Poniendo
 * min-width:0 en AMBOS lados, las dos columnas se reparten el espacio
 * sobrante en partes iguales de verdad, y el contenido que no entre se
 * encoge (flex) en vez de forzar la columna a crecer.
 */
/*
 * justify-self: stretch (el valor por defecto — no se toca aquí a propósito).
 * Con `start`/`end` el propio recuadro de `.top-left`/`.top-right` se ajusta
 * a su CONTENIDO (fit-content) en vez de al ancho real de su columna, así
 * que cuando el contenido no entraba se desbordaba POR ENCIMA del nav en vez
 * de encogerse — el recuadro nunca tenía un ancho fijo contra el que encoger.
 * Estirando el recuadro a la columna entera y alineando el contenido por
 * dentro con `justify-content`, ahora sí hay un límite real: lo que no
 * quepa se encoge (`#topMeta` corta con "…") en vez de invadir el nav.
 */
.top-left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; justify-content: flex-start; }
.top-right { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; justify-content: flex-end; }

.brand { display: flex; align-items: center; gap: 10px; flex: none; transition: opacity var(--dur-1) var(--ease); }
.brand:hover { opacity: .82; }
.brand-mark { width: 30px; height: 30px; flex: none; overflow: visible; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 45%, transparent)); transition: transform var(--dur-2) var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
/* «Illuvi» con el degradado de la marca, «Radar» en blanco (2026-09-29). */
.brand-name-2 { color: var(--text); -webkit-text-fill-color: var(--text); }
.brand-name {
  font-weight: 700; letter-spacing: -0.02em; font-size: 16.5px;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav { display: flex; align-items: center; gap: 2px; min-width: 0; justify-self: center; }
.nav a {
  padding: 7px 12px; color: var(--text-dim); font-size: 13px; font-weight: 600;
  border-radius: var(--r-full); white-space: nowrap; position: relative;
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.on { color: var(--ink); background: var(--brand-grad); font-weight: 700; box-shadow: var(--shadow-gold); }

.nav-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--line); flex: none; }
.nav-secondary a { font-weight: 500; color: var(--text-faint); }
.nav-secondary a:hover { color: var(--text); }
.nav-secondary a.on { color: var(--ink); background: var(--brand-grad); font-weight: 700; }

.top-meta { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* Botón para abrir/cerrar el menú en móvil, y la capa oscura que se pone
   detrás cuando está abierto. Ambos nacen en el DOM siempre, y `initSidebar()`
   en app.js es lo único que los mueve. Ocultos por completo en escritorio
   (el menú va centrado y siempre a la vista) vía el breakpoint de más abajo. */
.side-toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.side-toggle svg { width: 18px; height: 18px; }
.side-overlay {
  display: none; position: fixed; inset: 0; z-index: 37;
  background: rgba(6,4,16,.6); backdrop-filter: blur(2px);
}

/*
 * SIN max-width: se pidió que el contenido ocupe toda la pantalla, no una
 * columna centrada con márgenes enormes en monitores anchos. El padding
 * lateral es el mismo clamp() que `.top`, así que el borde del contenido
 * queda alineado con el borde de la cabecera en vez de verse descuadrado.
 */
.view { padding: var(--sp-6) clamp(24px, 3vw, 56px) 72px; }

/* Cargando: un anillo giratorio en vez de un texto suelto. Discreto y elegante
   en cualquier tamaño de contenedor, sin necesitar markup nuevo. */
.loading {
  color: var(--text-dim); padding: 48px 0 48px 30px; font-size: 14px;
  position: relative;
}
.loading::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold);
  animation: vault-spin .75s linear infinite;
}
@keyframes vault-spin { to { transform: rotate(360deg); } }

.empty { color: var(--text-dim); padding: 44px 28px; font-size: 15px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.empty strong { display: block; color: var(--text); font-size: 17px; margin-bottom: 6px; letter-spacing: -.01em; }

/* -------------------------------------------------------------- revelado --
   Las secciones y tarjetas aparecen con un leve ascenso al entrar en pantalla.
   `activarRevelado()` en app.js añade `.reveal` a los candidatos y `.in`
   cuando cruzan el umbral; sin JS (o con movimiento reducido) el contenido
   sigue ahí, simplemente sin la animación.                                 */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------- héroe */

.hero { margin-bottom: var(--sp-7); }
.hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }
.hero h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.hero-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 20px; max-width: 62ch; }
.hero-figure { display: flex; align-items: baseline; gap: 14px; }
.hero-figure .now { font-family: var(--mono); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

.delta { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.delta.neg { color: var(--down); }
.delta.pos { color: var(--up); }

.chart { width: 100%; height: 190px; display: block; margin-top: 14px; border-bottom: 1px solid var(--line); }
.chart-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--text-faint); padding-top: 6px; }

/* ------------------------------------------------------------------ cifras */

.figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden;
  margin-bottom: var(--sp-7);
}
.fig { background: var(--ink); padding: 15px 16px; transition: background-color var(--dur-2) var(--ease); }
.fig:hover { background: var(--surface); }
.fig dt { color: var(--text-faint); font-size: 11.5px; margin-bottom: 5px; }
.fig dd { margin: 0; font-family: var(--mono); font-size: 19px; font-weight: 600; }
.fig dd .usd, .fig dd .sub { font-size: 11.5px; }

/*
 * VERSIÓN CHICA — pedida el 2026-09-19 para la ficha de wallet ("todo más
 * chico y comprimido"): mismo grid, celdas más angostas y bajas. No se
 * borran las cifras (son análisis propios de Illuvi Radar, ver el comentario
 * grande en `routeWallet()`), solo ocupan menos.
 */
.figures-chicas { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: var(--sp-5); }
.figures-chicas .fig { padding: 10px 12px; }
.figures-chicas .fig dt { font-size: 10.5px; margin-bottom: 3px; }
.figures-chicas .fig dd { font-size: 15px; }

/* ------------------------------------------------------------------ bloque */

.block { margin-bottom: var(--sp-7); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.block h2 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.block-note { color: var(--text-dim); font-size: 13.5px; margin: 0 0 18px; max-width: 68ch; }

/* -------------------------------------------------------------- precios
   El DÓLAR es la cifra grande y el ETH va debajo en pequeño: 0,000147 ETH no
   se sitúa de un vistazo y "$0.46" sí. El ETH nunca desaparece porque es el
   dato real; el dólar es un derivado de la cotización del momento.         */

.usd, .sub {
  display: block; color: var(--text-faint); font-size: 11.5px;
  font-family: var(--mono); font-weight: 400; margin-top: 2px;
}

/* -------------------------------------------------------- tarjeta de deal --
   Análisis, no vitrina: sin imagen a propósito. Lo que vende esta pantalla es
   la distribución de comparables, no una miniatura.                        */

.deal {
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  background: var(--surface); border-radius: var(--r-md);
  padding: 18px 20px; margin-bottom: 12px;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.deal:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.deal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.deal-id { min-width: 0; }
.deal-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; display: block; margin-bottom: 5px; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-xs); }
.tag.f-Colour   { color: var(--colour);   border-color: color-mix(in srgb, var(--colour) 40%, transparent); }
.tag.f-Holo     { color: var(--holo);     border-color: color-mix(in srgb, var(--holo) 40%, transparent); }
.tag.f-DarkHolo { color: var(--darkholo); border-color: color-mix(in srgb, var(--darkholo) 45%, transparent); }

.deal-price { text-align: right; }
.deal-price .p { font-family: var(--mono); font-size: 21px; font-weight: 600; }
.deal-price .u { color: var(--text-faint); font-size: 12px; font-family: var(--mono); line-height: 1.4; }

.score { font-family: var(--mono); font-size: 27px; font-weight: 700; color: var(--gold); line-height: 1; }
.score-label { font-size: 11px; color: var(--text-faint); text-align: right; }

/* --------------------------------------------------- tira de distribución -- */

.strip { margin-top: 16px; }
.strip-bar { position: relative; height: 22px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 100%); border-radius: 4px; overflow: visible; }
.strip-box { position: absolute; top: 0; bottom: 0; background: var(--surface-3); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.strip-median { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--text-dim); }
.strip-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--gold); }
.strip-mark::after { content: ''; position: absolute; left: -3px; top: -4px; border: 4px solid transparent; border-top-color: var(--gold); }
.strip-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 6px; }

.receipt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--text-dim); font-size: 13px; }
.receipt b { color: var(--text); font-weight: 600; font-family: var(--mono); }

/* ------------------------------------------------- abanico de Opportunities
   `.fan-wrap` es el marco de todo el carrusel; `.fan-layout` es donde viven
   las tarjetas superpuestas en posición absoluta (JS les pone `transform`,
   ver `iniciarCarrusel()` en app.js); cada `.fan-card` envuelve la MISMA
   `.card` que pinta Market (`marketCard()`) — misma imagen, mismos datos,
   mismo enlace, mismo botón de copiar — solo que aquí vive en un marco de
   ancho fijo para que el abanico quede parejo. La tarjeta no necesita un
   desvanecido ni recorte de texto propios: `.card` ya trae su propio
   `overflow:hidden` y su alto sale solo de la imagen cuadrada más el
   cuerpo, igual que en Market. */
.fan-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-5) 0 var(--sp-3); }
/*
 * La altura tiene que sobrar para la tarjeta MÁS el desplazamiento vertical
 * que le suma el abanico a las de los extremos (hasta 7.3rem, ver
 * `CARR_FAN`/`carrSlot` en app.js) — si no, las tarjetas de los bordes
 * sobresalen por abajo y tapan las flechas/puntos de paginación. Medida con
 * la tarjeta de Market real (imagen cuadrada + cuerpo + acciones), que es
 * más alta que la `.deal` que se usaba antes aquí.
 */
.fan-layout {
  position: relative; width: 100%; max-width: 1100px;
  height: clamp(630px, 46vw, 680px);
}
.fan-card {
  position: absolute; top: 0; left: 50%;
  width: clamp(210px, 24vw, 280px);
  margin-left: calc(clamp(210px, 24vw, 280px) / -2);
  opacity: 0; will-change: transform;
}
.fan-card .card { margin-bottom: 0; cursor: default; }

.fan-nav { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.fan-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-full); flex: none;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim);
  cursor: pointer; transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.fan-arrow svg { width: 18px; height: 18px; }
.fan-arrow:hover { border-color: var(--gold); color: var(--gold); }
.fan-dots { display: flex; align-items: center; gap: 7px; }
.fan-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.fan-dot.on { background: var(--gold); transform: scale(1.4); }

/*
 * Por debajo de 875px de ventana, `.fan-card` ya está en su ancho mínimo
 * (210px, ver el `clamp` de arriba), así que la altura mínima del abanico
 * (630px) alcanza sin necesitar una regla aparte para móvil.
 */

/* ============================================================== MERCADO ===
   Cuadrícula de tarjetas: exploración y descubrimiento. La imagen manda
   porque es lo que identifica la pieza; la jerarquía de la ficha debajo va
   nombre → características → precio (con la oportunidad al lado, que es lo
   segundo que más importa) → estimado → info adicional → acciones.
   ========================================================================= */

.market-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 18px;
}
.mb { background: var(--ink); padding: 12px 15px; transition: background-color var(--dur-2) var(--ease); }
.mb:hover { background: var(--surface); }
.mb dt { color: var(--text-faint); font-size: 11px; margin-bottom: 3px; }
.mb dd { margin: 0; font-family: var(--mono); font-size: 16px; font-weight: 600; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }

select, input[type="text"], input[type="number"] {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: 7px 10px; border-radius: var(--r);
  font-family: var(--sans); font-size: 13.5px;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
select:hover, input[type="text"]:hover, input[type="number"]:hover { border-color: var(--text-faint); }
select:focus-visible, input[type="text"]:focus-visible, input[type="number"]:focus-visible {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
input[type="number"] { width: 92px; font-family: var(--mono); }
input[type="text"] { width: 190px; }

button {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: 7px 14px; border-radius: var(--r);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
button:hover { border-color: var(--text-faint); }
button:active { transform: translateY(1px); }
button.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }

.viewtoggle { margin-left: auto; display: flex; gap: 4px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

/* --------------------------------------------------------- tarjeta v9 ---
   "Diferente a lo normal": marco más redondeado, franja de degradado en el
   borde superior, insignia de id a dos líneas, el hexágono de rasgos en un
   medallón circular, y el deal score como anillo de progreso en vez de una
   cifra suelta — pero es EXACTAMENTE la misma información que antes, solo
   reorganizada y con más peso visual. Nada de esto inventa un dato: el
   anillo es `deal_score` (0–100) y el "+19%" es (estimado − precio) / precio,
   la misma cuenta que ya hacía `estEtiqueta()`. */
.card {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-grad); z-index: 2;
}
.card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-gold), var(--shadow-md); }

.card-media { position: relative; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.055); }
.card-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6,4,16,.5) 100%);
}

.card-id {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.85);
  background: rgba(8,12,14,.6); padding: 4px 8px; border-radius: var(--r-xs);
  backdrop-filter: blur(3px); line-height: 1.3;
}
.card-id i {
  display: block; font-style: normal; font-size: 7.5px;
  letter-spacing: .08em; opacity: .65; margin-top: 1px;
}

.card-hexbadge {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 46px; height: 46px; padding: 5px; border-radius: 50%;
  background: rgba(8,12,14,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.card-hexbadge .card-hex { width: 100%; height: 100%; opacity: .95; }
.card-tpi {
  position: absolute; top: 58px; right: 8px; z-index: 1;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--gold);
  background: rgba(8,12,14,.6); padding: 2px 6px; border-radius: var(--r-xs);
  backdrop-filter: blur(3px); letter-spacing: .01em;
}

.card-body { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-name {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pastillas de rasgo con un puntito de color delante, en vez de solo texto
   con borde — el mismo dato (`.tag`/`.tag.f-*` siguen siendo los mismos),
   solo que aquí, en la tarjeta, se ven un poco más cuidadas. Va con el
   selector de la tarjeta delante a propósito, para no tocar cómo se ven
   estas mismas etiquetas en la tabla o en la ficha del NFT. */
.card .tag {
  border-radius: var(--r-full); padding: 3px 9px 3px 7px;
  background: var(--surface-2); display: inline-flex; align-items: center; gap: 5px;
}
.card .tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .6; flex: none;
}

/* Precio, estimado y el anillo del deal score, los tres a la misma altura —
   la misma idea de siempre (nada tapa a nada), solo con una tercera cifra
   sumada porque ahora hay sitio para las tres sin amontonarlas. */
.card-stats {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 4px;
}
.card-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-stat-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-stat-value {
  font-family: var(--mono); font-weight: 700; font-size: 13.5px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-stat-value .sub {
  display: block; font-size: 9.5px; font-weight: 400; color: var(--text-faint); margin-top: 1px;
}
.card-stat-value.up { color: var(--up); }
/* El rango ocupa más que un número: se achica un punto y puede partir en dos
   líneas en vez de cortarse con «…» (un rango cortado a la mitad miente). */
.card-stat-value.card-stat-rango { font-size: 11.5px; white-space: normal; overflow: visible; }

/*
 * EL PRECIO EN USD, MÁS GRANDE que el resto de las cifras de la card — es lo
 * primero que se mira al comparar piezas, así que se pidió que pesara más
 * que "Est. value"/el anillo de deal score. Solo la cifra de Price crece
 * (`.card-stat-price`, puesta a propósito solo en ese `.card-stat` de
 * marketCard()); Est. value se queda en el tamaño de siempre.
 */
.card-stat-price .card-stat-value { font-size: 19px; }
.card-stat-price .card-stat-value .sub { font-size: 10.5px; }

.card-ring {
  --pct: 0;
  position: relative; flex: none; margin-left: auto;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--gold) calc(var(--pct) * 3.6deg), var(--line-soft) 0deg);
}
.card-ring::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface);
}
.card-ring-num {
  position: relative; z-index: 1; font-family: var(--mono); font-weight: 700; font-size: 13px;
  color: var(--text); line-height: 1;
}
.card-ring-sub { position: relative; z-index: 1; font-size: 8px; font-weight: 600; line-height: 1; margin-top: 2px; }
.card-ring-sub.pos { color: var(--up); }
.card-ring-sub.neg { color: var(--down); }

.card-score.none {
  margin-left: auto; flex: none;
  color: var(--text-faint); background: var(--surface-2); font-weight: 400; font-size: 11px;
  border-radius: var(--r-xs); padding: 3px 8px;
}

.card-info {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-size: 11px; color: var(--text-faint); line-height: 1.4;
}

.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 2px; }
.card-meta { text-align: right; font-size: 11px; color: var(--text-faint); line-height: 1.35; }

/*
 * PIEZA DEL CENSO SIN METADATA (2026-09-19, ver marketCard() en app.js):
 * existe de verdad, pero nunca pasó por una orden ni una venta, así que no
 * tenemos su foto ni sus rasgos. Se pinta más apagada que una tarjeta real
 * —igual que `.alert.off`, mismo patrón de opacidad reducida que ya usa
 * este archivo para "esto está aquí pero no es lo principal"— y con un
 * aviso propio en vez de un hueco vacío, para que nunca se confunda con un
 * error de carga.
 */
.card.sinmeta { opacity: .64; }
.card.sinmeta:hover { opacity: 1; }
.card.sinmeta .card-media { background: var(--surface-2); min-height: 120px; display: flex; align-items: flex-start; }
.card.sinmeta .card-info { justify-content: flex-start; margin-top: 4px; }
.card-sinmeta-tag {
  display: inline-block; font-size: 11px; line-height: 1.4; color: var(--text-faint);
  background: var(--surface-2); border-radius: var(--r-xs); padding: 3px 8px;
}

/* Placeholder mientras carga: mismas proporciones que la tarjeta real, para
   que la cuadrícula no salte cuando llegan los datos. */
.card.skel, .wcard.skel { pointer-events: none; }
.card.skel:hover, .wcard.skel:hover { transform: none; box-shadow: none; border-color: var(--line); }
.skel-block {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 45%, var(--surface-2) 60%);
  background-size: 250% 100%;
  animation: vault-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-xs);
}
@keyframes vault-shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
.card.skel .card-media { background: var(--surface-2); }
.card.skel .card-media.skel-block { border-radius: 0; }
.card.skel .skel-line { height: 11px; margin: 3px 0; }
.card.skel .skel-line.w60 { width: 60%; }
.card.skel .skel-line.w40 { width: 40%; }
.card.skel .skel-line.w80 { width: 80%; }

/* ------------------------------------------------------------------ tabla */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

th {
  text-align: left; font-weight: 600; color: var(--text-faint); font-size: 11.5px;
  letter-spacing: .01em;
  padding: 10px 13px; border-bottom: 1px solid var(--line);
  background: var(--surface); white-space: nowrap;
}
td { padding: 10px 13px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: top; }
tbody tr { transition: background-color var(--dur-1) var(--ease); }
tbody tr:hover { background: var(--surface); cursor: pointer; }
tbody tr:last-child td { border-bottom: 0; }

.num { font-family: var(--mono); text-align: right; }
.dim { color: var(--text-dim); }

.bar { display: inline-block; height: 3px; background: var(--gold); vertical-align: middle; margin-left: 7px; opacity: .7; border-radius: 2px; }

/* ------------------------------------------------------------------ ficha */

/*
 * 300px -> 380px (pedido el 2026-09-19, "que se vea la imagen en grande") ->
 * columna única, el mismo día ("quiero que la imagen ocupe toda la
 * pagina") -> DE VUELTA A DOS COLUMNAS, un turno después ("no me gusto
 * mejor devuelvelo como estaba antes"). `.detail` vuelve a ser un grid de
 * dos columnas lado a lado — la primera, fija en 380px, con la foto
 * (`.detail-media`, `width:100%` dentro de ese ancho) y su hexágono de
 * esquina; la segunda, `1fr`, con el resto de la ficha (nombre, tags,
 * precio/listing, historial, comparables). El mismo turno pidió además
 * "reorganices todo y se mas conpacto": el `gap` entre columnas baja de
 * 32px a 22px, y los `margin-top` sueltos de cada bloque dentro de la
 * ficha (deal, historial, distribución de precio) se ajustan junto a
 * `routeNft()` en app.js — ver el comentario ahí. La regla de móvil que ya
 * achicaba `.detail` a una columna por debajo de 720px (más abajo, en el
 * breakpoint) sigue siendo la que corta a una columna en pantallas chicas.
 */
.detail { display: grid; grid-template-columns: 380px 1fr; gap: 22px; }
.detail img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); display: block; }

/*
 * El hexágono flotando en la esquina de la foto, no en una tarjeta aparte
 * debajo — pedido el 2026-09-19 con una captura de referencia exacta.
 * `.detail-media` es el ancla de posición (mismo patrón que `.ppwrap` de la
 * cabecera, §21 del traspaso); `.detail-hexcorner` es el hexágono en sí,
 * armado por `hexRadar(..., {conPie:false})` — ver ese comentario en app.js.
 * El `drop-shadow` reemplaza al fondo sólido de `.hexwrap` (que acá no se
 * usa, ver `conPie`) para que el hexágono se siga leyendo sobre CUALQUIER
 * foto, clara u oscura, sin taparla con un panel.
 */
.detail-media { position: relative; }
.detail-hexcorner {
  position: absolute; top: 16px; right: 22px; width: 34%; max-width: 118px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(0,0,0,.4));
}
.detail-hexcorner svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ------------------------------------------- el arte animado (HLS) ------
   El vídeo se pone ENCIMA de la foto, ocupando exactamente su sitio, y la
   foto se queda debajo: mientras el stream arranca se sigue viendo la pieza
   en vez de un rectángulo negro. Si el vídeo se quita, la foto ya está ahí.  */
.detail-media .media-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; background: transparent; display: block;
}
.detail-media .media-play {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(12,10,22,.62); color: #f0e6d2;
  font-size: 13px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  opacity: .72; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.detail-media .media-play:hover { opacity: 1; transform: scale(1.06); }
.detail-media .media-play:disabled { cursor: default; opacity: .45; transform: none; }
.detail-media img { border-radius: inherit; }
/*
 * SIN FOTO NO HAY NADA QUE SUPERPONER. Visto en pruebas: si la imagen no
 * carga, el `onerror` la quita, la caja se queda con altura cero y el
 * hexágono y el botón de play salen flotando encima del resto de la página.
 * Se esconden, y lo que queda es la ficha de datos, que es lo que de verdad
 * describe la pieza.
 */
.detail-media.sin-foto .detail-hexcorner,
.detail-media.sin-foto .media-play { display: none; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 13.5px; margin-top: 18px; }
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; font-family: var(--mono); }

.back {
  color: var(--text-dim); font-size: 13.5px; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.back:hover { color: var(--text); transform: translateX(-2px); }

/* --------------------------------------------------------------- hexágono */

.hexwrap { margin-top: 18px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 8px 6px 0; overflow: hidden; }
.hex { width: 100%; height: auto; display: block; overflow: visible; }
.hexfoot {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--line-soft); padding: 10px 13px;
  font-size: 12px; color: var(--text-faint);
}
.hexfoot b { color: var(--text); font-family: var(--mono); font-weight: 600; }

/* ------------------------------------------------------------------- pie */

.foot { border-top: 1px solid var(--line-soft); padding: 24px var(--sp-5) 44px; max-width: 1320px; margin: 0 auto; }
.foot p { color: var(--text-faint); font-size: 12.5px; margin: 0; max-width: 76ch; }

/* ------------------------------------------------------------------ móvil
   Por debajo de 880px el menú (`#nav`, no la cabecera entera) deja de caber
   centrado y pasa a ser un desplegable que baja desde debajo de la cabecera
   (`transform`+`opacity`, no `display`, para poder animarlo): `#nav.open` lo
   saca, `#sideToggle` lo abre y cierra, `#sideOverlay` lo cierra al tocar
   fuera. Por encima de 880px esos dos elementos ni se ven — el menú ya está
   siempre a la vista, centrado en la cabecera. */

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}



@media (max-width: 880px) {
  .top { grid-template-columns: auto 1fr auto; height: 56px; padding: 0 var(--sp-4); }
  .top-left .colsel { display: none; }
  .top-right .top-meta { display: none; }

  .nav {
    position: fixed; top: 56px; left: 0; right: 0; z-index: 38;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--line-soft);
    padding: var(--sp-3);
    max-height: calc(100vh - 56px); overflow-y: auto;
    transform: translateY(-6px); opacity: 0; visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-3);
  }
  .nav.open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease); }
  .nav a { padding: 10px 14px; }
  .nav-sep { width: 100%; height: 1px; margin: var(--sp-2) 0; }

  .side-toggle { display: flex; }
  .side-overlay:not([hidden]) { display: block; }
}

@media (max-width: 720px) {
  .detail { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .card-hex { width: 48px; height: 48px; }
  .hero-figure .now { font-size: 28px; }
  input[type="text"] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
   Alertas y modal de referido
   ========================================================================== */

.form { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 20px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.form-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-faint); flex: 1; min-width: 130px; }
.form-row input, .form-row select { width: 100%; }

.checks { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 5px; }
.chk { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--text-dim) !important; font-size: 13px !important; }
.chk input { width: auto !important; accent-color: var(--gold); }
.chk-wide { align-self: flex-end; padding-bottom: 7px; }

.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.form-foot .dim { font-size: 12.5px; }
.form-foot > div { display: flex; gap: 8px; }

button.ghost { background: transparent; color: var(--text-dim); border-color: var(--line); }
button.ghost:hover { color: var(--text); border-color: var(--text-faint); }

.alert {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  background: var(--surface); border-radius: var(--r-md);
  padding: 14px 18px; margin-bottom: 9px;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.alert:hover { border-color: color-mix(in srgb, var(--text-faint) 70%, var(--line)); }
.alert.off { border-left-color: var(--line); opacity: .62; }
.alert-main { flex: 1; min-width: 0; }
.alert-name { font-weight: 600; font-size: 14.5px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.alert-desc { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.alert-meta { color: var(--text-faint); font-size: 12px; margin-top: 4px; font-family: var(--mono); }
.alert-actions { display: flex; gap: 6px; flex-shrink: 0; }
.alert-new { margin-bottom: 12px; }
.alerts-sub { font-size: 13px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }

/* =============================================================================
   §26 — rediseño de Alerts: cabecera con cupo, asistente por pasos con vista
   previa en vivo, presets y tarjetas de coincidencia en vez de tabla.

   REGLA DE ESTADO: ningún botón de aquí abajo lleva una clase que este
   código tenga que ir encendiendo/apagando a mano. Un radio, un checkbox o
   un <select> YA saben si están marcados; `label:has(input:checked)` deja
   que el propio navegador pinte la pastilla activa a partir de ESO, así que
   el estado visual nunca puede desincronizarse del valor real del control
   (algo que sí podía pasar con una clase .on puesta por JS aparte).
   ========================================================================== */

.alerts-page { }
.alerts-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.alerts-head-left { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.alerts-bell {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.alerts-head-left .block-note { margin: 4px 0 0; }
.alerts-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }

.plan-chip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  font-size: 12.5px; color: var(--text-dim);
}
.plan-chip-label {
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold); background: var(--gold-soft);
  border-radius: var(--r-full); padding: 3px 9px;
}
.plan-chip-count { font-family: var(--mono); }
.plan-dots { display: flex; gap: 4px; }
.plan-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.plan-dot.on { background: var(--gold); }

/* ------------------------------------------------------------- el asistente */

.wiz { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.wiz-main { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); overflow: hidden; }

.wiz-steps { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
.wiz-step {
  flex: 1 1 160px; display: flex; align-items: center; gap: 9px; text-align: left;
  background: none; border: 0; border-radius: 0; padding: 13px 14px;
  color: var(--text-dim); border-bottom: 2px solid transparent;
}
.wiz-step:hover { color: var(--text); background: var(--surface-2); }
.wiz-step b {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3);
  color: var(--text-dim); font-size: 11.5px; display: flex; align-items: center; justify-content: center;
}
.wiz-step span { display: flex; flex-direction: column; line-height: 1.3; }
.wiz-step small { font-size: 10.5px; color: var(--text-faint); font-weight: 400; }
.wiz-step.on { color: var(--text); border-bottom-color: var(--gold); background: var(--surface-2); }
.wiz-step.on b { background: var(--gold); color: var(--ink); }

.wiz-body { padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px 16px; align-content: flex-start; }
.wiz-panel { display: flex; flex-wrap: wrap; gap: 14px 16px; width: 100%; }
.wiz-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-faint); flex: 1; min-width: 150px; }
.wiz-field-wide { flex-basis: 100%; }
.wiz-label { font-size: 12px; color: var(--text-faint); }
/* La explicación de un grupo de opciones: «Listed» y «Just listed» no se
   distinguen solas, y una etiqueta sin explicación se elige mal. */
/* Cabecera del Market: la cotización y el botón de refrescar, juntos. */
.mhead-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Cuando no hay puntuación pero sí referencia de valor: el mismo hueco que el
   anillo, sin fingir que es una puntuación (no hay aro ni número sobre 100). */
.card-ref { display: grid; place-items: center; text-align: center; line-height: 1.1; min-width: 54px; }
.card-ref-num { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.card-ref-sub { font-size: 10px; color: var(--text-faint); letter-spacing: .02em; }
.card-ref.pos .card-ref-num { color: var(--up); }
.card-ref.neg .card-ref-num { color: var(--down); }
.card-stat-label i { font-style: normal; font-size: 10px; }

.wiz-help { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-faint); max-width: 62ch; }
.wiz-field input[type="text"], .wiz-field input[type="number"], .wiz-field select { width: 100%; }

/* pastillas segmentadas: radios/checkboxes reales, escondidos con estilo */
.segrow { display: flex; gap: 8px; flex-wrap: wrap; }
.segpill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-dim); font-size: 12.5px; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.segpill:hover { border-color: var(--text-faint); }
.segpill input { position: absolute; opacity: 0; width: 0; height: 0; }
.segpill:has(input:checked) { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
/* el acabado usa su propio color, igual que `.tag.f-*` en el resto del sitio */
.segpill.f-Colour:has(input:checked)   { border-color: var(--colour);   color: var(--colour);   background: color-mix(in srgb, var(--colour) 16%, transparent); }
.segpill.f-Holo:has(input:checked)     { border-color: var(--holo);     color: var(--holo);     background: color-mix(in srgb, var(--holo) 16%, transparent); }
.segpill.f-DarkHolo:has(input:checked) { border-color: var(--darkholo); color: var(--darkholo); background: color-mix(in srgb, var(--darkholo) 18%, transparent); }

/* barra de un solo tirador (precio, score, pureza, poder) */
.mslide { flex: 1; min-width: 190px; }
.mslide-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-faint); margin-bottom: 6px; }
.mslide-val { font-family: var(--mono); color: var(--text-dim); }
.mslide.puesto .mslide-val { color: var(--gold); }
.mslide-track { position: relative; height: 20px; display: flex; align-items: center; }
.mslide-rail { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--line); }
.mslide-fill { position: absolute; height: 4px; border-radius: 2px; background: var(--gold); }
.mslide .ms-input {
  position: relative; width: 100%; height: 20px; margin: 0; background: none;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.mslide .ms-input::-webkit-slider-runnable-track { background: none; height: 20px; }
.mslide .ms-input::-moz-range-track { background: none; height: 20px; border: 0; }
.mslide .ms-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ink); margin-top: -6px;
  transition: transform .12s ease;
}
.mslide .ms-input::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); }
.mslide .ms-input:hover::-webkit-slider-thumb, .mslide .ms-input:active::-webkit-slider-thumb { transform: scale(1.15); }
.mslide .ms-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--gold-soft); }

/* vista previa, a la derecha */
.wiz-preview {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px;
}
.wiz-preview-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.wiz-preview-sentence { font-size: 13px; color: var(--text); line-height: 1.45; margin: 0; }
.wiz-preview-sample { min-height: 20px; font-size: 12.5px; }
.wiz-sample { display: flex; gap: 10px; align-items: center; }
.wiz-sample img, .wiz-sample-noimg {
  width: 52px; height: 52px; border-radius: var(--r); object-fit: cover; flex: none; background: var(--surface-2);
}
.wiz-sample-body { min-width: 0; }
.wiz-sample-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-sample-tags { display: flex; gap: 5px; margin: 3px 0; }
.wiz-sample-price { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.wiz-preview-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wiz-preview-actions button { width: 100%; }

@media (max-width: 860px) {
  .wiz { grid-template-columns: 1fr; }
  .wiz-preview { position: static; }
}

/* ---------------------------------------------------------------- presets */
.presets { margin-top: 18px; }
.presets-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.presets-head h3 { font-size: 13.5px; font-weight: 700; margin: 0; }
.presets-head small { color: var(--text-faint); font-size: 12px; }
.presets-row { display: flex; gap: 12px; flex-wrap: wrap; }
.preset-card {
  flex: 1 1 200px; text-align: left; display: flex; flex-direction: column; gap: 4px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.preset-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.preset-ic { font-size: 18px; }
.preset-t { font-weight: 600; font-size: 13.5px; }
.preset-d { color: var(--text-faint); font-size: 12px; }

/* --------------------------------------------------- tarjetas de coincidencia */
.tags { display: flex; gap: 6px; flex-wrap: wrap; }

.livechip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-faint);
  font-family: var(--mono);
}
.livechip i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex: none; }

/* ------------------------------------------------------------------ modal */

.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,10,12,.74); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: vault-fade .18s var(--ease-out);
}
@keyframes vault-fade { from { opacity: 0; } }

.modal-box {
  position: relative; width: 100%; max-width: 430px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  border-top: 2px solid var(--gold); padding: 28px 26px 22px;
  box-shadow: var(--shadow-lg);
  animation: vault-pop .22s var(--ease-out);
}
@keyframes vault-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.modal-box h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }
.modal-sub { color: var(--text-dim); font-size: 13.5px; margin: 0 0 18px; }

.modal-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: var(--text-faint);
  font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.modal-x:hover { color: var(--text); }

.codebox {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); border: 1px dashed var(--gold); border-radius: var(--r);
  padding: 14px 16px; cursor: pointer; margin-bottom: 18px;
  transition: background-color var(--dur-2) var(--ease);
}
.codebox:hover { background: var(--surface-2); }
.codebox .code { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: .12em; color: var(--gold); }
.codehint { font-size: 12px; color: var(--text-faint); font-family: var(--mono); }
.codehint.ok { color: var(--up); }

.steps { margin: 0 0 20px; padding-left: 20px; color: var(--text-dim); font-size: 13.5px; }
.steps li { margin-bottom: 5px; }

.modal-foot { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 14px; }

.reflink {
  display: block; margin-bottom: 14px; border-radius: var(--r);
  background: none; border: 1px solid var(--line); color: var(--text-dim);
  font-family: var(--mono); font-size: 12px; padding: 6px 10px;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.reflink:hover { color: var(--gold); border-color: var(--gold); }

/* ------------------------------------------------- Invite & Earn (2026-09-24)
   La invitación dejó de ser un modal que se abre solo: vive en su pantalla y
   en el menú del avatar. Estos estilos son solo eso — los accesos del menú, la
   línea de "te invitaron", los hitos y el par de cajas de copiar. Ni un color
   nuevo: todo sale de las variables que ya usa el resto del sitio. */
.ppm-links { display: flex; flex-direction: column; margin-top: 12px; }
.ppm-links-sep { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.ppm-links a {
  padding: 7px 2px; font-size: 13px; font-weight: 600; color: var(--text-dim);
  text-decoration: none; transition: color var(--dur-2) var(--ease);
}
.ppm-links a:hover { color: var(--text); }
.ppm-links a.ppm-invite { color: var(--gold); }

.refnote {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line-soft);
  border-radius: var(--r); background: var(--surface-2);
  font-size: 12.5px; color: var(--text-dim);
}
.refnote b { color: var(--gold); font-family: var(--mono); }
.refnote-x { background: none; border: 0; color: var(--text-faint); font-size: 16px; cursor: pointer; }
.refnudge { margin-top: 14px; }
.refnudge a { color: var(--gold); }

.inv-code { display: grid; gap: 10px; margin-bottom: 4px; }
.inv-link .code { font-size: 14px; letter-spacing: 0; word-break: break-all; text-align: left; }
.inv-figs { margin: 6px 0 18px; }
.inv-hitos { list-style: none; margin: 0 0 6px; padding: 0; }
.inv-hitos li {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--text-faint);
}
.inv-hitos li.on { color: var(--text-dim); }
.inv-hito-n { font-family: var(--mono); color: var(--text-dim); }
.inv-hitos li.on .inv-hito-n { color: var(--gold); }
.inv-hito-e { font-size: 12px; }
@media (max-width: 620px) {
  .inv-hitos li { grid-template-columns: 90px 1fr auto; }
}

@media (max-width: 720px) {
  .alert { flex-direction: column; align-items: flex-start; }
  .form-row label { min-width: 100%; }
}

/* ------------------------------------------------- aviso de coincidencias */

.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 300px; background: var(--surface); border-radius: var(--r-md);
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  padding: 15px 17px 13px; box-shadow: var(--shadow-lg);
  animation: vault-slide-in .28s var(--ease-out);
}
@keyframes vault-slide-in { from { opacity: 0; transform: translateY(10px); } }
.toast-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.toast-body { font-size: 13px; color: var(--text-dim); line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.toast-body strong { color: var(--text); }
.toast-img { width: 44px; height: 44px; border-radius: var(--r); object-fit: cover; flex: none; background: var(--surface-2); }
.toast-text { min-width: 0; }
.toast-go { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--gold); }
.toast-x {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: var(--text-faint);
  font-size: 18px; line-height: 1; padding: 2px 5px; cursor: pointer;
}
.toast-x:hover { color: var(--text); }

@media (max-width: 720px) {
  .toast { right: 10px; left: 10px; width: auto; bottom: 10px; }
}

/* =============================================================================
   v4 — selector de colección, avisos y sección de wallets
   ========================================================================== */

/*
 * YA NO flex-shrink: 0. Vivía junto al resto de la cabecera con espacio de
 * sobra cuando esto era una franja lateral; ahora comparte fila angosta con
 * la marca y el nav (grid `1fr auto 1fr` en `.top`), y sin encogerse
 * empujaba su `<select>` por encima del primer enlace del menú. min-width:0
 * deja que se achique de verdad en vez de desbordar; el texto elegido
 * dentro del `<select>` se recorta solo si no entra, que es justo lo que
 * hace un `<select>` nativo sin que haga falta nada más.
 */
.colsel { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; }
.colsel-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; flex: none; }
.colsel select {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  border-left: 2px solid var(--gold);
  font-size: 13px; padding: 6px 9px; max-width: 150px; min-width: 0;
}
.colsel select:hover { border-color: var(--text-faint); border-left-color: var(--gold); }

.top-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

input[type="number"].ancho { width: 132px; }

/* ------------------------------------------------- panel de filtros -------
   REDISEÑO (v8): en escritorio el panel ya no es un desplegable — es una
   columna fija a la izquierda de Market (`.market-layout`, más abajo), así
   que se pinta siempre y avisa igual de bien cuántos filtros hay puestos.
   `#fToggle` sigue existiendo para plegarlo en móvil (donde una columna fija
   no cabe): ahí SÍ empieza cerrado salvo que la URL ya traiga filtros, con
   `.fpanel-closed` en vez del atributo `hidden` — `[hidden]` es
   `display:none!important` en todo el sitio (ver más arriba), y hubiera
   ganado siempre a cualquier regla de escritorio que intentara reabrirlo. */

.fbtn { position: relative; }
.fbtn.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
@media (min-width: 881px) { #fToggle { display: none; } }

.market-layout { display: grid; grid-template-columns: 252px 1fr; align-items: start; gap: var(--sp-5); }
.market-main { min-width: 0; }

.panel {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: 16px 16px 14px;
  position: sticky; top: calc(64px + var(--sp-4));
  max-height: calc(100vh - 64px - var(--sp-6));
  overflow-y: auto; scrollbar-width: thin;
  animation: vault-drop .2s var(--ease-out);
}
@keyframes vault-drop { from { opacity: 0; transform: translateY(-6px); } }
.panel-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 14px;
}

@media (max-width: 880px) {
  .market-layout { grid-template-columns: 1fr; }
  .panel { position: static; max-height: none; margin-bottom: 18px; }
  .panel.fpanel-closed { display: none; }
}
.panel-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 12px;
}
.panel-foot .dim { font-size: 12.5px; }

.fcampo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fcampo > span { font-size: 11.5px; color: var(--text-faint); }
.fcampo select, .fcampo input { width: 100%; }
.fcampo[title] > span { cursor: help; border-bottom: 1px dotted var(--line); align-self: flex-start; }

.frange .par { display: flex; align-items: center; gap: 6px; }
.frange .par input { width: 100%; min-width: 0; text-align: center; }
.frange .par i { color: var(--text-faint); font-style: normal; }

/* ------------------------------------------------- acabado, en botones --- */

/*
 * EL FILTRO DE FINISH, EN BOTONES DE IMAGEN en vez de un <select> — mismo
 * color que ya usa `.tag.f-*`/`.segpill.f-*` en el resto del sitio, pero acá
 * además Holo y Dark Holo tienen el color moviéndose detrás de la letra,
 * como el acabado holográfico real, en vez de quedarse plano como Colour.
 * Es el mismo truco de `@property` que ya usa el borde animado de "Get Pro"
 * en Plans (`--pl-buy-angle`, más abajo), aplicado acá a un conic-gradient
 * con varios tonos en vez de a un giro de borde. `prefers-reduced-motion`
 * lo apaga con la regla global de siempre — sin ninguna regla aparte, queda
 * el primer fotograma del gradiente, fijo.
 */
.fcampo-finish { grid-column: 1 / -1; }
.finish-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.finish-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 56px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-faint); font-size: 11px; text-align: center;
}
.finish-btn:hover { color: var(--text-dim); }
.finish-btn.on { color: var(--text); }

.finish-badge {
  --fc: var(--gold);
  position: relative; width: 42px; height: 42px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: color-mix(in srgb, var(--fc) 55%, var(--ink) 45%);
  border: 1px solid color-mix(in srgb, var(--fc) 50%, var(--line));
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.finish-btn:hover .finish-badge { transform: translateY(-1px); }
.finish-btn.on .finish-badge {
  border-color: var(--fc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 32%, transparent);
}
.finish-letra {
  position: relative; z-index: 1; font-weight: 700; font-size: 16px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.finish-badge--plano { background: var(--surface-3); }

@property --finish-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.finish-badge--Holo::before,
.finish-badge--DarkHolo::before {
  content: ''; position: absolute; inset: 0;
  animation: finish-girar 6s linear infinite;
}
.finish-badge--Holo::before {
  background: conic-gradient(from var(--finish-angle),
    #7c8fff, #22d3ee, #2fe6a7, #ffb020, #ff64c8, #b478ff, #7c8fff);
}
.finish-badge--DarkHolo::before {
  /* mismo giro que Holo, pero con los tonos mezclados hacia negro — un
     acabado holográfico "oscuro", no solo el mismo brillo con otro nombre */
  background: conic-gradient(from var(--finish-angle),
    color-mix(in srgb, #b478ff 65%, black),
    color-mix(in srgb, #ff64c8 60%, black),
    color-mix(in srgb, #22d3ee 50%, black),
    #07040d,
    color-mix(in srgb, #ff64c8 60%, black),
    color-mix(in srgb, #b478ff 65%, black));
}
.finish-badge--Holo::after,
.finish-badge--DarkHolo::after {
  /* vignette oscuro para que la letra blanca siga legible encima de
     cualquier tramo del gradiente, no solo de los tramos oscuros */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(4, 2, 10, .5) 0%, rgba(4, 2, 10, .12) 55%, transparent 78%);
}
@keyframes finish-girar { to { --finish-angle: 360deg; } }

@media (max-width: 380px) {
  .finish-badge { width: 38px; height: 38px; }
  .finish-btn { width: 50px; }
}

/* ------------------------------------------------- el valor estimado ----- */

.est {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  cursor: help; border-bottom: 1px dotted var(--line);
}
.est.bueno { color: var(--up); border-bottom-color: color-mix(in srgb, var(--up) 40%, transparent); }
.est.vacio { color: var(--text-faint); opacity: .75; }

@media (max-width: 720px) {
  .panel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; }
  .panel { padding: 14px 14px 10px; }
}

/* -------------------------------------------------------------- avisos -- */

.warn {
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  border-left: 2px solid var(--gold); border-radius: var(--r);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
  color: var(--text-dim);
  padding: 13px 17px; margin-bottom: 22px; font-size: 13.5px;
}
.warn strong { color: var(--text); display: block; margin-bottom: 3px; }
.warn b { color: var(--text); }
.warn.small { padding: 9px 13px; margin-bottom: 14px; font-size: 12.5px; }
.warn.small strong { display: inline; }

/* ---------------------------------------------------- notas metodológicas */

.notas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 30px;
}
.notas > div { background: var(--ink); padding: 12px 15px; }
.notas dt { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.notas dd { margin: 0; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }

/* ================================= FICHA DE WALLET: EN CONTENEDORES =======

   Pedido el 2026-09-24 con tres capturas de referencia: la misma ficha de
   wallet de siempre, pero cada bloque sobre su propia caja oscura en vez de
   flotando sobre el fondo de la página.

   Nació solo para Portfolio y ese mismo día se pidió para TODAS las wallets,
   con razón: es la misma pantalla con los mismos datos, y tener dos aspectos
   según de quién fuera la cartera era una diferencia sin motivo. La clase
   `.portafolio` se la pone `routeWallet()` a `#view` —el nombre se queda por
   no renombrar veinte selectores— y `render()` la quita al cambiar de
   pantalla, para que no se filtre a Market ni a Opportunities.

   Y es SOLO pintura: ni una sola de estas reglas cambia qué datos se piden,
   qué columnas se enseñan o qué dice una celda vacía.
   ========================================================================= */

.portafolio {
  --pf-caja:  color-mix(in srgb, var(--surface) 62%, var(--ink));
  --pf-borde: var(--line-soft);
}

.portafolio .wtop-hero,
.portafolio .figures,
.portafolio .notas,
.portafolio .tabpanel {
  background: var(--pf-caja);
  border: 1px solid var(--pf-borde);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 14px;
}

/* `.figures` y `.notas` son rejillas con 1px de hueco que YA dibujan sus
   propias divisiones con el fondo. Dentro de la caja, ese truco se ve sucio:
   se les quita el fondo-separador y se separan con aire. */
.portafolio .figures,
.portafolio .notas { gap: 10px; }
.portafolio .figures .fig,
.portafolio .notas > div {
  background: rgba(0,0,0,.22);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

/* La barra de pestañas, como en la referencia: píldoras dentro de su propia
   franja, a todo el ancho, no un grupo pegado al borde izquierdo. */
.portafolio .labtabs {
  display: flex; width: 100%; gap: 6px; padding: 8px;
  background: var(--pf-caja); border: 1px solid var(--pf-borde);
  border-radius: var(--r-lg); overflow: visible; margin-bottom: 14px;
  flex-wrap: wrap;
}
.portafolio .labtab { border-radius: var(--r-full); padding: 8px 18px; }
/* Pestañas a la izquierda, exportar a la derecha, en la misma franja. */
.wtabsrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.portafolio .wtabsrow {
  background: var(--pf-caja); border: 1px solid var(--pf-borde);
  border-radius: var(--r-lg); padding: 8px 12px 8px 8px; margin-bottom: 14px;
}
.portafolio .wtabsrow .labtabs { border: 0; background: none; padding: 0; margin: 0; width: auto; }
/* La fila de estados de «Offers sent» es la misma píldora, más chica. */
.ofestados { margin: 0 0 14px; flex-wrap: wrap; }
.ofestados .labtab { font-size: 12px; padding: 6px 12px; text-transform: capitalize; }
.portafolio .labtab + .labtab { border-left: 0; }
.portafolio .labtab.on { background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* Dentro de una caja, la tabla no necesita su propio marco grueso: se queda
   con una línea suave y la cabecera se separa con una banda más oscura, que
   es lo que hace legible una tabla de doce columnas. */
.portafolio .tablewrap { border-color: var(--line-soft); background: rgba(0,0,0,.18); }
.portafolio .tablewrap th { background: rgba(0,0,0,.30); }
.portafolio .block { margin-bottom: 14px; }
.portafolio .hero-sub { margin-bottom: 0; }
.portafolio .tumia { margin-bottom: 14px; }

@media (max-width: 720px) {
  .portafolio .wtop-hero,
  .portafolio .figures,
  .portafolio .notas,
  .portafolio .tabpanel { padding: 14px; border-radius: var(--r-md); }
  .portafolio .labtabs { padding: 6px; }
  .portafolio .labtab { padding: 8px 12px; font-size: 12.5px; }
}

/* ------------------------------------------------------------- wallets -- */

.mono { font-family: var(--mono); }
.pos { color: var(--up); }
.neg { color: var(--down); }
.flojo { color: var(--down); opacity: .85; }
.tag.dimtag { color: var(--text-faint); opacity: .8; }

.fig dd.pos { color: var(--up); }
.fig dd.neg { color: var(--down); }

.hero h1.mono { font-size: 15px; word-break: break-all; }

.hero-figure { gap: 0; align-items: stretch; }
.cifra { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px; text-align: right; }
.cifra + .cifra { border-left: 1px solid var(--line); }
.cifra:last-child { padding-right: 0; }
.cifra-pie { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.cifra-cash .now { color: var(--gold); }

tr.nolq td { color: var(--text-faint); }
tr.nolq td b { color: var(--text-dim); }

td.cash .sub { color: var(--text-faint); }
tfoot td { border-top: 1px solid var(--line); padding: 11px 13px; }

@media (max-width: 720px) {
  .hero-figure { flex-wrap: wrap; gap: 14px; }
  .cifra { padding: 0; text-align: left; }
  .cifra + .cifra { border-left: 0; }
}

/* --------------------------------------------- descomposición del poder -- */

.power { padding: 15px 15px 11px; }
.power-bar { display: flex; height: 12px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.power-bar i { display: block; height: 100%; }
.power-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.power-key dt { display: flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 11px; }
.power-key dt i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.power-key dd { margin: 2px 0 0; font-family: var(--mono); font-size: 14px; font-weight: 600; }

@media (max-width: 720px) {
  .notas { grid-template-columns: 1fr; }
  .power-key { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================================
   v5 — hexágono de filtro, acciones, tarjetas de wallet, podio y scroll
   ========================================================================== */

/* Columna vertical, no fila: `#fPanel` ahora vive en una franja de 252px
   (ver `.market-layout`), así que el hexágono y la rejilla de sliders se
   apilan en vez de competir por ancho. */
.panel-cols { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.panel-cols .panel-grid { flex: 1; min-width: 0; }

.hexfiltro {
  flex: 0 0 auto; width: 100%;
  border: 1px solid var(--line); background: var(--ink);
  padding: 11px 11px 9px; border-radius: var(--r-md);
}
.hexfiltro-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--text-faint); margin-bottom: 2px;
}
button.ghost.mini { font-size: 11px; padding: 3px 9px; }
.hexsel { width: 100%; height: auto; display: block; overflow: visible; }
.hexfiltro-pie { font-size: 11px; color: var(--text-faint); text-align: center; padding-top: 5px; line-height: 1.4; }

.hexpt { fill: rgba(255,255,255,.16); stroke: transparent; stroke-width: 9; cursor: pointer; transition: fill .12s ease, r .12s ease; }
.hexpt:hover { r: 5.5; fill: var(--accent); }
.hexpt.on { fill: var(--accent); }
.hexpt:focus-visible { outline: none; stroke: var(--gold); stroke-width: 2; }
.hexforma { pointer-events: none; transition: points .15s var(--ease); }

/* ------------------------------------------------ acciones de la tarjeta --
   "Buy" abre el marketplace oficial: Vault no procesa compras.            */

.card-link { display: flex; flex-direction: column; flex: 1; color: inherit; }

.card-acts, .ficha-acts { display: flex; border-top: 1px solid var(--line); }
.ficha-acts { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 14px; }

.act {
  flex: 1; text-align: center; padding: 9px 6px;
  font-size: 12px; color: var(--text-dim); background: var(--surface-2);
  border: 0; border-left: 1px solid var(--line);
  cursor: pointer; font-family: var(--sans); font-weight: 500; white-space: nowrap;
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.act:first-child { border-left: 0; }
.act:hover { color: var(--text); background: var(--line); }
.act.comprar { color: var(--gold); font-weight: 600; }
.act.comprar:hover { background: color-mix(in srgb, var(--gold) 16%, var(--surface-2)); }
.act.mini { flex: none; display: inline-block; padding: 4px 10px; font-size: 11.5px; border: 1px solid var(--line); border-radius: var(--r); }
.act.copiado { color: var(--up); }
.act.fallo { color: var(--down); }

/* En la tarjeta de Market, en cambio, las acciones van sueltas: pastillas
   redondeadas con hueco entre ellas en vez de un bloque de segmentos
   pegados — es lo que pide que "la info de dentro de las cards" se vea más
   prolija. `.ficha-acts` (la ficha del NFT) no se toca: sigue siendo el
   bloque de segmentos unidos de siempre. */
.card-acts {
  border-top: 1px solid var(--line-soft); gap: 6px; padding: 10px 12px 12px;
}
.card-acts .act {
  border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--surface-2);
}
.card-acts .act:first-child { border-left: 1px solid var(--line); }
.card-acts .act:hover { border-color: var(--text-faint); background: var(--line-soft); }
.card-acts .act.comprar {
  background: var(--brand-grad); color: var(--ink); font-weight: 700; border-color: transparent;
}
.card-acts .act.comprar:hover { filter: brightness(1.08); }

.fila-link { color: inherit; }
.fila-link:hover { color: var(--gold); }

/* -------------------------------------------------- copiar la dirección -- */

.wchip {
  background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r);
  font-size: 12px; padding: 4px 10px; cursor: pointer;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.wchip:hover { color: var(--text); border-color: var(--text-faint); }
.wchip .copiado { color: var(--up); }
.wchip .fallo { color: var(--down); }

.wdir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }

/* Monograma generado a partir de la dirección: ver comentario en app.js. */
.wavatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: var(--r-md); font-family: var(--mono); font-weight: 700;
  color: rgba(13,20,24,.82); box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------- rejilla de posiciones */

.hgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-top: 14px;
}
.hcard {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.hcard:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  transform: translateY(-3px); box-shadow: var(--shadow-gold), var(--shadow-md);
}
.hcard-media { position: relative; aspect-ratio: 1.3; display: flex; align-items: flex-end; }
.hcard-id {
  font-size: 11px; color: rgba(255,255,255,.85); background: rgba(8,12,14,.4);
  padding: 3px 7px; border-radius: var(--r-xs); margin: 8px; backdrop-filter: blur(3px);
}
.hcard-tag {
  position: absolute; top: 8px; right: 8px; font-size: 10px; color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.4); padding: 2px 7px; border-radius: var(--r-xs); backdrop-filter: blur(3px);
}
.hcard-tag.dimtag { color: rgba(255,255,255,.5); }
.hcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.hcard-col { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.hcard-class { font-size: 12px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard-price-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12.5px; font-family: var(--mono); }
.hcard-lbl { font-family: var(--sans); font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.hcard-liq { font-size: 10.5px; margin-top: 2px; text-transform: capitalize; }
.wdir h1.wfull { font-size: 14px; word-break: break-all; margin: 0; }

/* ------------------------------------------------- tarjetas de wallet ---- */

.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; }

.wcard {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.wcard:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-gold), var(--shadow-md); }
.wcard-link { display: flex; flex-direction: column; flex: 1; color: inherit; }

.wcard-head {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 20px 12px 6px;
}
.wav { position: relative; width: 84px; height: 84px; border-radius: var(--r-md); background: var(--surface-2); flex: none; }
.wav .wav-cara { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.wav { box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.wcard-sub {
  font-size: 11px; color: var(--text-faint); margin: -5px 0 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.pod-media .wav { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-lg); }

.wcard-media { position: relative; aspect-ratio: 1; background: var(--surface-2); overflow: hidden; }
.wcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcard-sin {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 12px; text-align: center; padding: 12px;
}
.wcard-tag {
  position: absolute; top: 8px; left: 8px;
  font-size: 10.5px; color: rgba(255,255,255,.82); background: rgba(0,0,0,.5);
  padding: 2px 7px; border-radius: var(--r-xs); backdrop-filter: blur(3px);
}
.wcard-score {
  position: absolute; bottom: 8px; right: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--gold);
  background: rgba(0,0,0,.6); padding: 3px 9px; border-radius: var(--r-xs); backdrop-filter: blur(3px);
}

.wcard-body { padding: 12px 14px 13px; flex: 1; }
.wcard-name {
  text-align: center; font-family: var(--mono); font-size: 14px; font-weight: 600;
  margin-bottom: 10px; letter-spacing: -.01em;
}
.wcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 0; }
.wcard-stats dt { color: var(--text-faint); font-size: 10.5px; }
.wcard-stats dd { margin: 1px 0 0; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.wcard-stats dd.oro { color: var(--gold); }

.wcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--line); padding: 9px 11px; font-size: 11px;
}

/* ------------------------------------------------------------- el podio -- */

.podio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  align-items: end; margin: 4px 0 28px;
}
.pod {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md);
  padding: 16px 13px 13px; text-align: center; color: inherit;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.pod:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-gold); }
.pod-1 { border-top: 2px solid var(--gold); padding-top: 24px; }
.pod-2 { border-top: 2px solid #b9c6cc; }
.pod-3 { border-top: 2px solid #c98a52; }

.pod-pos { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin-bottom: 9px; }
.pod-1 .pod-pos { color: var(--gold); font-size: 14px; }

.pod-media {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); border: 2px solid var(--line); margin-bottom: 11px;
}
.pod-1 .pod-media { width: 110px; height: 110px; border-color: var(--gold); }
.pod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pod-score { font-family: var(--mono); font-size: 27px; font-weight: 700; color: var(--gold); line-height: 1; }
.pod-1 .pod-score { font-size: 37px; }
.pod-label { font-size: 10.5px; color: var(--text-faint); margin-bottom: 9px; }
.pod-w { font-size: 11.5px; color: var(--text-dim); margin-bottom: 11px; }

.pod-stats { display: flex; gap: 14px; margin: 0; justify-content: center; flex-wrap: wrap; }
.pod-stats dt { color: var(--text-faint); font-size: 10px; }
.pod-stats dd { margin: 1px 0 0; font-family: var(--mono); font-size: 12.5px; }

/* ------------------------------------------------------ scroll infinito -- */

.cargando-mas { text-align: center; color: var(--text-faint); font-size: 13px; padding: 24px 0; position: relative; padding-left: 0; }
.empty.small { padding: 18px 0; font-size: 13.5px; background: none; border: 0; }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--ink); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

@media (max-width: 900px) {
  .panel-cols { flex-direction: column; }
  .hexfiltro { flex: none; width: 100%; max-width: 320px; align-self: center; }
}
@media (max-width: 720px) {
  .wgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; }
  .podio { grid-template-columns: 1fr; align-items: stretch; }
  .pod-1 { padding-top: 15px; }
  .pod-1 .pod-media, .pod-media { width: 72px; height: 72px; }
  .pod-1 .pod-score { font-size: 28px; }
}


/* ---------------------------------------------- barra de orden rápido ----- */
.sortbar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.sortcrit {
  background: none; border: 0; padding: 7px 9px; cursor: pointer;
  color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--r-full); white-space: nowrap; transition: color .12s ease, background .12s ease;
}
.sortcrit:hover { color: var(--text); background: var(--surface); }
.sortcrit.on { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.sortcrit i { font-style: normal; font-family: var(--mono); font-size: 12px; }
.sortsep { color: var(--text-faint); font-style: normal; opacity: .5; user-select: none; }
.sortdir {
  margin-left: 4px; padding: 6px 9px; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--text-dim); background: none; border: 1px solid var(--line);
  border-radius: var(--r); line-height: 1;
}
.sortdir:hover { color: var(--text); border-color: var(--text-faint); }
@media (max-width: 640px) { .sortbar { width: 100%; overflow-x: auto; flex-wrap: nowrap; } }

/* ------------------------------------------------------ ranking y ofertas -- */
.lb td { vertical-align: middle; }
.lb .puesto { font-family: var(--mono); color: var(--text-dim); width: 46px; }
.lb-quien { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.lb-quien .wav { width: 34px; height: 34px; border-radius: var(--r-xs); }
.lb-quien span { display: flex; flex-direction: column; line-height: 1.25; }
.lb-titulo { font-style: normal; font-size: 10.5px; color: var(--gold); opacity: .85; }
.lb td.flojo { color: var(--down); }

.contra { color: var(--text); border-bottom: 1px dotted var(--text-faint); }
.contra:hover { color: var(--gold); border-bottom-color: var(--gold); }
td.small { font-size: 11px; }

/* ---------------------------------------------------- botón de "Get Pro" -- */
/*
 * §25: sustituye a "Plans" en el menú. Relleno y no en contorno como
 * `.ppbtn` — es la llamada a la acción de la cabecera y tiene que
 * distinguirse de Connect a simple vista, no competir con él.
 *
 * 2026-09-15: el tratamiento visual completo (el efecto brillante animado)
 * vive junto con `.pl-buy` más abajo en esta hoja — los dos comparten un
 * mismo bloque desde que se corrigió al revés el pedido del 2026-09-14 (ver
 * el comentario ahí). Acá solo queda el tamaño propio de la píldora de la
 * cabecera: chica, en línea, sin estirarse a todo el ancho como el botón de
 * una tarjeta.
 */
.getprobtn { display: inline-block; flex: none; white-space: nowrap; padding: 7px 15px; font-size: 12.5px; line-height: 1.3; text-decoration: none; }

/* ------------------------------------------------------ botón de Passport -- */
.ppbtn {
  padding: 7px 13px; cursor: pointer; white-space: nowrap; text-align: center; flex: none;
  font: inherit; font-size: 12.5px; font-weight: 600; font-family: var(--mono);
  color: var(--text-dim); background: none;
  border: 1px solid var(--line); border-radius: var(--r-full);
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.ppbtn:hover:not(:disabled) { color: var(--text); border-color: var(--text-faint); }
.ppbtn.on { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.ppbtn:disabled { opacity: .55; cursor: default; }

/* --------------------------------------- tarjeta de wallet conectada (2026-09-15) --
 *
 * Pedida con una captura de referencia: avatar, nombre, red, saldo de
 * ETH/IMX/USDC y un "Disconnect" propio — no un botón que desconecta al
 * primer toque. `.ppwrap` es solo el ancla de posición para `#ppMenu`;
 * `#ppBtn` no cambia de aspecto.
 */
.ppwrap { position: relative; }
.ppmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: 280px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.ppm-head { display: flex; align-items: flex-start; gap: 12px; }
.ppm-head .wav { width: 44px; height: 44px; border-radius: var(--r); }
.ppm-who { min-width: 0; flex: 1 1 auto; }
.ppm-name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14.5px; color: var(--text); margin-bottom: 6px;
}
.ppm-check { width: 14px; height: 14px; color: var(--up); flex: none; }
.ppm-who .wchip { padding: 0; border: 0; background: none; font-size: 12px; color: var(--text-faint); }
.ppm-who .wchip:hover { color: var(--text-dim); }
.ppm-net {
  display: flex; align-items: center; gap: 7px; margin: 14px 0 10px;
  padding: 7px 10px; background: var(--surface-2); border-radius: var(--r);
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-dim);
}
.ppm-net svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.ppm-bals { display: flex; flex-direction: column; padding-top: 2px; border-top: 1px solid var(--line-soft); }
.ppm-bal { display: flex; align-items: center; justify-content: space-between; padding: 7px 2px; font-size: 13px; }
.ppm-bal + .ppm-bal { border-top: 1px solid var(--line-soft); }
.ppm-bal-izq { display: flex; align-items: center; gap: 8px; color: var(--text); }
.ppm-token {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: var(--ink);
}
.ppm-token--ETH { background: var(--colour); }
.ppm-token--IMX { background: var(--holo); }
.ppm-token--USDC { background: var(--up); }
/*
 * ILV/sILV2 sumados el 2026-09-19: la píldora de saldo del portafolio
 * (`.wpills`, más abajo) reusa esta misma pastilla para CUALQUIER token de
 * `saldos.tokens`, no solo los tres que ya traía el desplegable de la
 * cabecera — y ese saldo ya incluía ILV y sILV2 (ver `bloqueSaldo()` en el
 * traspaso, la nota "sILV2 es ILV de juego"). `.ppm-token` en general (sin
 * modificador) es el respaldo para cualquier símbolo que aparezca mañana:
 * nunca un círculo sin color.
 */
.ppm-token { background: var(--surface-3); }
.ppm-token--ILV { background: var(--gold); }
.ppm-token--sILV2 { background: color-mix(in srgb, var(--gold) 55%, var(--surface-3)); }
.ppm-bal-usd { color: var(--text-dim); font-family: var(--mono); font-size: 12.5px; }
.ppm-note { font-size: 12px; color: var(--text-dim); padding: 10px 0 2px; border-top: 1px solid var(--line-soft); margin-top: 12px; }

/* --- verificar la wallet con una firma (2026-09-28) ------------------------
   El mismo bloque en la tarjeta del avatar, en Plans y en Portfolio. En la
   cabecera, un punto ámbar en el botón dice «conectada, pero sin verificar». */
.verificar { border: 1px solid var(--gold); background: var(--gold-soft); border-radius: var(--r-md);
  padding: 14px 16px; margin: 14px 0; }
.verificar p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.verificar .verificar-estado { margin: 8px 0 0; }
.verificar .verificar-estado:empty { display: none; }
.verificar-compacto { padding: 10px 12px; margin: 12px 0 0; }
.verificar-compacto p { font-size: 12px; color: var(--text-dim); }
.verificar-compacto .fbtn { width: 100%; }
.ppm-ok { font-size: 12px; color: var(--text-dim); margin: 12px 0 0; }
.ppbtn.sinverificar { position: relative; }
.ppbtn.sinverificar::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg, #000); }
.ppm-disconnect {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px;
  padding: 10px 2px 2px; border: 0; border-top: 1px solid var(--line-soft); background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--down); cursor: pointer; text-align: left;
}
.ppm-disconnect svg { width: 16px; height: 16px; flex: none; }
.ppm-disconnect:hover { color: #ff86ab; }

/* ------------------------------------------------------ ficha de wallet, v2
   Pedida el 2026-09-19 con una captura de referencia (illuviscan.com):
   "todo más chico y comprimido". Tres piezas nuevas:

     .wtop / .wtop-who   — la cabecera compacta (avatar 44px + nombre +
                            dirección en una fila), reemplaza el avatar de
                            104px y el título grande que tenía antes.
     .wpills / .wpill    — el saldo en píldoras (ícono + cantidad + dólar),
                            reemplaza la caja grande "Wallet balance" con su
                            propia tabla.
     .pz-cell / .tpihex  — la celda de "una pieza" (foto real + nombre) y el
                            hexágono-enlace a sus stats, para las tablas de
                            Assets/Activities/Offers de más abajo.
   ------------------------------------------------------------------------- */

.wtop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wtop .wav { width: 44px; height: 44px; border-radius: var(--r); }
.wtop-who { min-width: 0; }
.wtop-who h1 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 3px; line-height: 1.2; }
.wtop-who .wchip { padding: 2px 8px; }
.wtop-hero .hero-sub { margin: 10px 0 0; }

.wpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
.wpill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface-2); padding: 5px 11px 5px 6px;
  font-size: 12.5px; color: var(--text);
}
.wpill b { font-family: var(--mono); font-weight: 600; }
.wpill-usd { color: var(--text-faint); font-family: var(--mono); font-size: 11.5px; margin-left: 2px; }
.wpill-nolq { opacity: .7; }
.wpill-total {
  border-color: color-mix(in srgb, var(--up) 45%, var(--line));
  color: var(--up); font-weight: 600; padding-left: 12px;
}
.wpill-total b { color: var(--up); }
.wpill .ppm-token { width: 16px; height: 16px; font-size: 8.5px; }

/* La foto real de la pieza, con el degradado de siempre como fondo — si la
   imagen no carga (`onerror`), el degradado se ve solo y nunca queda un
   hueco roto. */
.pz-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pz-foto { position: relative; width: 34px; height: 34px; border-radius: var(--r-xs); overflow: hidden; flex: none; }
.pz-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: normal; }
.pz-txt b { font-size: 13px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-txt .dim { font-size: 11px; }

/* El hexágono-enlace a la ficha completa de una pieza. Dos formas, la misma
   caja de 26px:

     · SIN datos (`hexStats()` sin `pieza_stats`, o colección sin radar como
       Illuvitars): el polígono vacío de siempre, `.tpihex > svg > polygon`
       — el `>` importa, es a propósito.
     · CON datos — pedido el 2026-09-19 ("que muestre las stats como en el
       market"): el MISMO SVG relleno que ya pinta `hexRadar()`/`card-hex`
       en cada tarjeta de Market, envuelto en `.tpihex-mini`. Ese SVG trae
       su propio `fill`/`stroke` por vértice (varios `<polygon>`, uno por
       anillo más la forma de datos) — si la regla de abajo fuera
       `.tpihex polygon` a secas (sin el `>`) pintaría los seis por encima
       con el mismo gris plano del ícono vacío, y "como en el market"
       dejaría de ser cierto en pantalla aunque el JS estuviera bien. Por
       eso el selector NO baja más de un nivel.
   */
.tpihex {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; color: var(--text-faint);
  transition: color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.tpihex svg { width: 100%; height: 100%; }
.tpihex > svg > polygon { fill: rgba(255,255,255,.05); stroke: currentColor; stroke-width: 1.4; }
.tpihex:hover { color: var(--accent); transform: scale(1.12); }

.tpihex-mini { display: flex; width: 100%; height: 100%; }
.tpihex-real { color: var(--text-faint); }
.tpihex-real:hover { transform: scale(1.18); }

@media (max-width: 640px) {
  .wpills { gap: 6px; }
  .wpill { padding: 4px 9px 4px 5px; font-size: 12px; }
}

.tumia {
  margin: 10px 0 -6px; font-size: 12px; color: var(--gold);
  letter-spacing: .02em; text-transform: uppercase;
}

.vias { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.via {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px;
  background: var(--surface-2); transition: border-color var(--dur-2) var(--ease);
}
.via.gana { border-color: var(--gold); }
.via-t { font-size: 11.5px; color: var(--text-dim); margin-bottom: 5px; }
.via-v { font-size: 18px; font-variant-numeric: tabular-nums; }
.via-d { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.via-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); background: var(--gold); border-radius: 3px; padding: 1px 4px;
  vertical-align: 1px;
}
@media (max-width: 520px) { .vias { grid-template-columns: 1fr; } }

.estados { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; }
.estbtn {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500; padding: 7px 13px; white-space: nowrap;
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.estbtn + .estbtn { border-left: 1px solid var(--line); }
.estbtn:hover { color: var(--text); }
.estbtn.on { background: var(--surface-2); color: var(--gold); font-weight: 600; }

.modal-nota { font-size: 11.5px; color: var(--text-faint); margin: 10px 0 0; line-height: 1.45; }

.fresc {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-full);
  color: var(--text-dim); cursor: pointer; font: inherit; font-size: 11.5px;
  padding: 5px 11px 5px 9px; white-space: nowrap;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.fresc:hover { color: var(--text); border-color: var(--text-faint); }
.fresc i, .fr-punto {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none;
}
.fresc.bien i,    .fr-punto.bien    { background: #3ddc84; }
.fresc.regular i, .fr-punto.regular { background: var(--gold); }
.fresc.mal i,     .fr-punto.mal     { background: #ff5f56; }
.fresc.mal { color: #ff8a84; border-color: rgba(255,95,86,.4); }

.modal-ancho { max-width: 720px; }
.fr td:first-child { display: flex; align-items: center; gap: 8px; }
.fr tr.fr-mal td { color: #ff8a84; }

/* ---------------------------------------------------------------------------
   EL LABORATORIO. Abrir sobres y fusionar de mentira.
   --------------------------------------------------------------------------- */
.lab-aviso {
  background: rgba(255,176,32,.08); border: 1px solid rgba(255,176,32,.28);
  border-radius: var(--r-md); padding: 11px 15px; margin: 0 0 18px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}
.lab-aviso b { color: var(--gold); }

.labtabs { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; margin-bottom: 18px; }
.labtab { background: none; border: 0; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; padding: 8px 18px; transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); }
.labtab + .labtab { border-left: 1px solid var(--line); }
.labtab:hover { color: var(--text); }
.labtab.on { background: var(--surface-2); color: var(--gold); font-weight: 600; }

.labform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; }
.labform .fcampo { min-width: 140px; }

.labcifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.labcifra { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-2); }
.labcifra dt { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.labcifra dd { margin: 0; font-size: 25px; font-variant-numeric: tabular-nums; font-family: var(--mono); font-weight: 600; }
.labcifra dd.neg { color: var(--down); }
.labcifra dd.pos { color: var(--up); }
.labcifra span.dim { font-size: 11px; display: block; margin-top: 4px; }

.labtablas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }

.fuHist { display: flex; flex-direction: column; gap: 3px; }
.fuBarra { display: grid; grid-template-columns: 34px 1fr 56px; align-items: center; gap: 8px; font-size: 11.5px; }
.fuP { font-family: var(--mono); color: var(--text-dim); text-align: right; }
.fuB { background: var(--surface-2); border-radius: 3px; height: 14px; overflow: hidden; }
.fuB i { display: block; height: 100%; background: var(--gold); opacity: .8; transition: width .4s var(--ease-out); }
.fuN { font-family: var(--mono); color: var(--text-faint); }

@media (max-width: 780px) {
  .labcifras, .labtablas { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- open packs: dos modos
   "Bulk run" (de siempre) y "Chase a piece" (nuevo) — dos tarjetas
   seleccionables en vez de un simple par de pestañas de texto, para que se
   note desde el primer vistazo que son dos herramientas distintas y no dos
   páginas de la misma. */
.packmodes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.packmode {
  flex: 1 1 220px; text-align: left; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
  color: var(--text-dim); padding: 12px 14px; cursor: pointer; font: inherit;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.packmode:hover { border-color: var(--text-faint); }
.packmode b { color: var(--text); font-size: 13.5px; }
.packmode span { font-size: 11.5px; color: var(--text-faint); }
.packmode.on { border-color: var(--gold); background: var(--gold-soft); }
.packmode.on b { color: var(--gold); }

/* ------------------------------------------------------- chase a piece ---
   Elegir una pieza exacta (tier/stage/species/finish), ver la probabilidad
   de sacarla con un presupuesto, y correrlo de verdad. Los selects de
   tier/stage/species reusan `.fcampo` (el mismo look que los filtros de
   Market); el acabado reusa `.finish-btn`/`.finish-badge` tal cual —
   mismo componente, dos pantallas distintas. */
.cazapick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.cazapick-especie { grid-column: span 2; }
.cazapick-finish { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .cazapick { grid-template-columns: 1fr 1fr; }
  .cazapick-especie { grid-column: 1 / -1; }
}

.cazabudget { margin-bottom: 22px; }
.cazabudget-label { font-size: 11.5px; color: var(--text-faint); display: block; margin-bottom: 6px; }
.cazabudget-row { display: flex; align-items: center; gap: 10px; }
.cazabudget-dollar { color: var(--text-faint); font-family: var(--mono); }
.cazabudget-row input[type="number"] { width: 100px; font-family: var(--mono); font-size: 16px; font-weight: 600; }
.cazabudget-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--gold); }
.cazachips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cazachips .chip {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim);
  border-radius: var(--r-full); padding: 5px 12px; font-size: 12px; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cazachips .chip:hover { border-color: var(--gold); color: var(--gold); }

/* El hexágono de stats de la pieza que se persigue y el mínimo de TPI,
   pedidos aparte el 2026-09-14. El hexágono es `hexCaza()` en app.js — mismo
   SVG que el de Fuse (`.fu-stat-hex`), con su propia clase porque es una
   pantalla distinta, no un tercer padre de fusión. */
.cazastats {
  border: 1px solid var(--line); background: var(--ink);
  border-radius: var(--r-md); padding: 12px 14px 10px; margin-bottom: 18px;
}
.cazastats-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--text-dim); margin-bottom: 4px;
}
.cazastats-hex { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cazastats-hex .hexsel { max-width: 168px; width: 100%; }
.cazastats-hex-pie { font-size: 10.5px; color: var(--text-faint); text-align: center; }
.cazastats-note {
  margin: 8px 0 0; text-align: center; max-width: none; font-size: 11.5px;
}

.cazatpi { margin-bottom: 22px; }
.cazatpi-label { font-size: 11.5px; color: var(--text-faint); display: block; margin-bottom: 6px; }
.cazatpi-row { display: flex; align-items: center; gap: 10px; }
.cazatpi-row input[type="number"] { width: 70px; font-family: var(--mono); font-size: 16px; font-weight: 600; }
.cazatpi-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }

/* la curva se calcula sola con la fórmula cerrada — ver cazaChart() en app.js */
.cazasvg { width: 100%; height: auto; display: block; }
.cazasvg-eje { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* la pieza que salió en la corrida real, con el mismo badge de acabado que
   Market — el "premio" de la caza, no una imagen aparte que mantener. */
.cazareveal { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cazareveal .finish-badge { width: 52px; height: 52px; flex: none; }
.cazareveal .finish-letra { font-size: 20px; }
.cazareveal-nombre { font-weight: 700; font-size: 15px; }

/* ---------------------------------------------------------------------------
   LA TABLA DE PRECIOS.
   --------------------------------------------------------------------------- */
.ciclos { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-full); overflow: hidden; margin-bottom: 18px; }
.ciclos .labtab { text-decoration: none; display: inline-block; }
.ciclos .labtab + .labtab { border-left: 1px solid var(--line); }

/*
 * LAS TARJETAS DE PLAN, ARRIBA DE LA TABLA. Cuadradas, chicas y con vidrio
 * esmerilado (backdrop-filter) en vez de vivir dentro del <thead>: así se ven
 * de un vistazo, sin desplazar la tabla de comparación de abajo. Las mismas
 * clases pl-icon/pl-nombre/pl-precio/pl-por/pl-ahorro/pl-tuyo/pl-buy que
 * antes vivían en el <th> siguen aquí sin cambiar — su CSS no está escrito
 * para una jaula en particular, así que no hizo falta tocarlo.
 */
.pl-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 14px; max-width: 560px; margin: 0 0 22px;
}
/*
 * §25: tres tarjetas (Free/Pro/Lifetime) en vez de dos. Con el mismo
 * `minmax(136px, 1fr)` de siempre ya caben las tres en una fila, pero
 * apretadas — un `max-width` mayor les da el mismo aire que tenían las dos
 * de antes, sin tocar nada del resto de `.pl-card`.
 */
.pl-cards.pl-cards-3 { max-width: 720px; }
.pl-card {
  position: relative; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px 12px; gap: 1px;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  overflow: hidden;
}
/*
 * LA CINTA ("Most popular" / "Pay once"). Una franja arriba, dentro de la
 * misma tarjeta cuadrada — no se le añade alto extra a `.pl-card`, porque
 * `aspect-ratio: 1/1` lo hace cuadrado a propósito y una cinta que empuje el
 * contenido lo rompería en las tres tarjetas a la vez, no solo en la suya.
 */
.pl-badge {
  position: absolute; top: 7px; left: 50%; translate: -50% 0;
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink); background: var(--gold); border-radius: var(--r-full);
  padding: 2px 7px; white-space: nowrap;
}
.pl-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--line-soft);
}
.pl-card.actual { border-color: color-mix(in srgb, var(--gold) 45%, var(--line-soft)); background: rgba(255,176,32,.09); }
.pl-card.pl-paid::before { background: var(--brand-grad); }
.pl-card.pl-paid {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 9%, transparent), color-mix(in srgb, var(--surface) 55%, transparent) 70%);
}
.pl-card .pl-buy { margin-top: 7px; }

.tablewrap:has(table.precios) { border-radius: var(--r-lg); }
table.precios th { text-align: center; vertical-align: bottom; padding: 18px 14px 16px; position: relative; }
table.precios th.actual { background: rgba(255,176,32,.09); }

/*
 * LA COLUMNA DE PAGO, DESTACADA. Una sola columna de pago hoy (Pro), pero la
 * regla es genérica por precio, no por nombre: si mañana hay otra, se
 * destaca sola sin tocar CSS.
 */
table.precios th.pl-paid {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%);
  box-shadow: inset 0 2px 0 var(--gold);
}
table.precios td.pl-paid { background: color-mix(in srgb, var(--gold) 3%, transparent); }

/*
 * CABECERA DE LA TABLA, YA SIN LA FICHA DEL PLAN DENTRO. Ahora solo sirve
 * para alinear columnas con la fila de arriba: el nombre nada más, chico y
 * discreto, porque la tarjeta de --pl-cards-- es la que manda visualmente.
 */
table.precios th.pl-col {
  padding: 10px 14px; font-size: 11.5px; font-weight: 600;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
}

.pl-icon { display: block; font-size: 15px; opacity: .8; margin-bottom: 2px; }
.pl-nombre { display: block; font-size: 13px; color: var(--text); font-weight: 600; }
.pl-precio { display: block; font-size: 24px; font-family: var(--mono); font-weight: 700; color: var(--gold); margin-top: 6px; letter-spacing: -.01em; }
.pl-por    { display: block; font-size: 10.5px; color: var(--text-faint); }
.pl-ahorro { display: block; font-size: 10.5px; color: var(--up); margin-top: 2px; }
.pl-tuyo {
  display: inline-block; margin-top: 9px; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink); background: var(--gold); border-radius: 3px; padding: 1px 5px;
}

/*
 * EL BOTÓN "GET PRO"/"GET LIFETIME" — Y AHORA TAMBIÉN EL DE LA CABECERA
 * (2026-09-15, corrigiendo la ronda del 2026-09-14). Esto es una traducción
 * a CSS plano de un componente React (`shiny-button.tsx`) con `styled-jsx`:
 * el sitio no tiene React ni paso de compilación, así que el CSS-in-JS del
 * componente pasa tal cual a esta hoja, y el botón gana un `<span>` alrededor
 * de su texto — el propio efecto lo necesita para el resplandor que aparece
 * al pasar el ratón (`span::before`). `@property` es CSS estándar, no una
 * librería: los mismos navegadores que ya soportan `color-mix()`/
 * `backdrop-filter` (que el sitio ya usa) lo soportan también.
 *
 * LA RONDA ANTERIOR LO HIZO AL REVÉS. El usuario había mandado una captura
 * con una flecha marcando qué botón quería que copiara el estilo de cuál;
 * se leyó la flecha al revés y este efecto (que ya vivía en `.pl-buy`, el
 * botón de las tarjetas de plan) se BORRÓ y se reemplazó por la píldora
 * plana de la cabecera. Era lo opuesto: el efecto que el usuario quería
 * conservar era ESTE, y lo que hacía falta era llevarlo TAMBIÉN a la
 * cabecera (`.getprobtn`), no borrarlo de la tarjeta. Corregido acá: el
 * bloque de abajo es compartido por `.pl-buy` Y `.getprobtn` — mismo brillo,
 * mismo giro de borde en los dos únicos botones de "comprar" del sitio — y
 * cada uno solo se queda con su propio tamaño (la tarjeta ocupa todo el
 * ancho; la cabecera es una píldora chica en línea, ver su regla de tamaño
 * más arriba en este archivo).
 */
@property --pl-buy-angle        { syntax: '<angle>';      initial-value: 0deg; inherits: false; }
@property --pl-buy-angle-offset { syntax: '<angle>';      initial-value: 0deg; inherits: false; }
@property --pl-buy-percent      { syntax: '<percentage>'; initial-value: 5%;   inherits: false; }
@property --pl-buy-shine        { syntax: '<color>';      initial-value: #fff; inherits: false; }

.pl-buy, .getprobtn {
  --pl-buy-bg: var(--ink);
  --pl-buy-bg-subtle: var(--surface-2);
  --pl-buy-fg: var(--text);
  --pl-buy-highlight: var(--gold);
  --pl-buy-highlight-subtle: color-mix(in srgb, var(--gold) 55%, white);
  --pl-buy-anim: pl-buy-angle linear infinite;
  --pl-buy-duration: 3s;

  position: relative; isolation: isolate; overflow: hidden; cursor: pointer;
  text-align: center; font-family: var(--sans); font-weight: 700; color: var(--pl-buy-fg);
  border: 1px solid transparent; border-radius: var(--r-full); outline-offset: 3px;
  background: linear-gradient(var(--pl-buy-bg), var(--pl-buy-bg)) padding-box,
    conic-gradient(
      from calc(var(--pl-buy-angle) - var(--pl-buy-angle-offset)),
      transparent,
      var(--pl-buy-highlight) var(--pl-buy-percent),
      var(--pl-buy-shine) calc(var(--pl-buy-percent) * 2),
      var(--pl-buy-highlight) calc(var(--pl-buy-percent) * 3),
      transparent calc(var(--pl-buy-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--pl-buy-bg-subtle);
  transition: 800ms cubic-bezier(.25, 1, .5, 1);
  transition-property: --pl-buy-angle-offset, --pl-buy-percent, --pl-buy-shine, transform, box-shadow;
}

/* Tamaño propio de la tarjeta: bloque a todo lo ancho. El de la cabecera está más arriba (`.getprobtn`). */
.pl-buy { display: block; width: 100%; margin-top: 11px; padding: 9px 14px; font-size: 12.5px; line-height: 1.2; }

.pl-buy::before, .pl-buy::after, .pl-buy span::before,
.getprobtn::before, .getprobtn::after, .getprobtn span::before {
  content: ''; pointer-events: none; position: absolute;
  inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1;
}

.pl-buy:active, .getprobtn:active { translate: 0 1px; }

/* Patrón de puntos, muy tenue — el botón es chico en las dos versiones. */
.pl-buy::before, .getprobtn::before {
  --size: calc(100% - 4px); --dotpos: 2px; --space: calc(var(--dotpos) * 2);
  width: var(--size); height: var(--size);
  background: radial-gradient(circle at var(--dotpos) var(--dotpos),
    #fff calc(var(--dotpos) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space); background-repeat: space;
  mask-image: conic-gradient(from calc(var(--pl-buy-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit; opacity: .22;
}

/* Destello interno que gira. */
.pl-buy::after, .getprobtn::after {
  --pl-buy-anim: pl-buy-shimmer linear infinite;
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--pl-buy-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .5;
}

.pl-buy span, .getprobtn span { position: relative; z-index: 1; }
.pl-buy span::before, .getprobtn span::before {
  --size: calc(100% + .8rem); width: var(--size); height: var(--size);
  box-shadow: inset 0 -1ex 1.6rem 4px var(--pl-buy-highlight);
  opacity: 0; transition: opacity 800ms cubic-bezier(.25, 1, .5, 1);
  animation: pl-buy-breathe calc(var(--pl-buy-duration) * 1.5) linear infinite;
}

.pl-buy, .pl-buy::before, .pl-buy::after,
.getprobtn, .getprobtn::before, .getprobtn::after {
  animation: var(--pl-buy-anim) var(--pl-buy-duration),
    var(--pl-buy-anim) calc(var(--pl-buy-duration) / .4) reverse paused;
  animation-composition: add;
}

.pl-buy:is(:hover, :focus-visible), .getprobtn:is(:hover, :focus-visible) {
  --pl-buy-percent: 20%; --pl-buy-angle-offset: 95deg; --pl-buy-shine: var(--pl-buy-highlight-subtle);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--pl-buy-bg-subtle), var(--shadow-gold);
}
.pl-buy:is(:hover, :focus-visible), .pl-buy:is(:hover, :focus-visible)::before, .pl-buy:is(:hover, :focus-visible)::after,
.getprobtn:is(:hover, :focus-visible), .getprobtn:is(:hover, :focus-visible)::before, .getprobtn:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}
.pl-buy:is(:hover, :focus-visible) span::before, .getprobtn:is(:hover, :focus-visible) span::before { opacity: 1; }

@keyframes pl-buy-angle    { to { --pl-buy-angle: 360deg; } }
@keyframes pl-buy-shimmer  { to { rotate: 360deg; } }
@keyframes pl-buy-breathe  { from, to { scale: 1; } 50% { scale: 1.15; } }

table.precios td { padding: 9px 12px; }
table.precios td:first-child { color: var(--text-dim); font-size: 12.5px; }
.si { color: var(--up); }
.no { color: var(--text-faint); }

.ok-caja {
  background: rgba(47,230,167,.09); border: 1px solid rgba(47,230,167,.32); border-radius: var(--r-md);
  padding: 12px 15px; margin-top: 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}
.ok-caja b { color: var(--up); }

.muro {
  border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 26px;
  text-align: center; background: var(--surface-2);
}
.muro p { margin: 0 0 11px; color: var(--text-dim); font-size: 13.5px; }
.muro .fbtn { margin-top: 6px; text-decoration: none; display: inline-block; }

.modal-ancho { max-width: min(760px, 94vw); }
table.fr { width: 100%; table-layout: fixed; }
table.fr td:last-child, table.fr th:last-child { white-space: normal; word-break: break-word; }
table.fr td:nth-child(2), table.fr td:nth-child(3) { white-space: nowrap; }
.fr-salvedad {
  display: block; margin-top: 5px; padding-left: 8px;
  border-left: 2px solid var(--gold); color: var(--gold); opacity: .9; font-size: 11px;
}

/*
 * El pie del modal de frescura cuando algo va mal con la base: se queda sin
 * permiso de escritura, o han vuelto a aparecer índices que no son nuestros.
 * En dorado y con un filo a la izquierda, igual que las salvedades de arriba,
 * para que se lea como un aviso y no como una estadística más.
 */
.fr-aviso {
  margin-top: 12px; padding-left: 10px;
  border-left: 2px solid var(--gold); color: var(--gold);
}

/* Reclamar un pago que no abrió Pro solo: discreto y aparte del formulario. */
.pg-rescate { border-top: 1px solid var(--line-soft); padding-top: 14px; font-size: 12.5px; color: var(--text-dim); }
.pg-rescate summary { cursor: pointer; color: var(--text-dim); transition: color var(--dur-2) var(--ease); }
.pg-rescate summary:hover { color: var(--text); }
.pg-rescate[open] summary { color: var(--text); margin-bottom: 10px; }

/* ==========================================================================
   BARRAS DE RANGO (filtros)
   ========================================================================== */

.fslider { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 2px 0 0; }

.fslider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fslider-head > span { font-size: 11.5px; color: var(--text-faint); }
.fslider-val { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
.fslider.puesto .fslider-head > span { color: var(--text-dim); }
.fslider.puesto .fslider-val { color: var(--accent); }

.fs-fuente {
  font-style: normal; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); border: 1px solid var(--line); border-radius: 3px;
  padding: 0 3px; margin-left: 5px; cursor: help; vertical-align: 1px;
}

.fslider-track { position: relative; height: 22px; display: flex; align-items: center; }
.fslider-rail, .fslider-fill { position: absolute; height: 4px; border-radius: 2px; pointer-events: none; }
.fslider-rail { left: 0; right: 0; background: var(--line); }
.fslider-fill { background: var(--accent); opacity: .85; }

.fslider input[type="range"] {
  position: absolute; left: 0; width: 100%; margin: 0; height: 22px;
  background: none; border: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  pointer-events: none;
}
.fslider input[type="range"]:focus { outline: none; }

.fslider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--accent);
  cursor: grab; pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.fslider input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--accent);
  cursor: grab; pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.fslider input[type="range"]::-moz-range-track { background: none; border: 0; }

.fslider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.fslider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.fslider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.fslider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }

@media (max-width: 720px) {
  .fslider-track { height: 30px; }
  .fslider input[type="range"] { height: 30px; }
  .fslider input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; }
  .fslider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
  .fslider-head { flex-wrap: wrap; }
}

/* ==========================================================================
   EL ACABADO DE CADA PADRE (Lab · Fuse) — botones de imagen, 2026-09-14

   Antes esto era un hexágono propio (`.hexacs`/`.hexac`, ya retirado): el
   usuario pidió que el acabado de cada padre se vea con el MISMO botón de
   imagen que el filtro de Finish de Market (`.finish-btn`/`.finish-badge`,
   ver más arriba) en vez de un componente aparte. `finishBotonMini()` en
   app.js ya arma exactamente ese marcado — aquí solo hace falta encoger el
   grupo para que quepan tres dentro de una tarjeta de padre, que es más
   angosta que la fila de filtros de Market.
   ========================================================================== */

.fu-card-finish { gap: 6px; margin: 0 0 14px; }
.fu-card-finish .finish-btn { width: auto; flex: 1 1 0; min-width: 0; }
.fu-card-finish .finish-badge { width: 36px; height: 36px; margin: 0 auto; }
.fu-card-finish .finish-letra { font-size: 14px; }
.fu-card-finish .finish-name { font-size: 10px; }

/* ---------------------------------------------------------------------------
   §27 — FUSION SIMULATOR: cabecera, tarjetas de padre, resultados.
   --------------------------------------------------------------------------- */

.fu-hero { margin-bottom: 22px; }
.fu-hero h1 { font-size: 26px; margin: 0 0 8px; }
.fu-hero p { color: var(--text-dim); font-size: 13.5px; max-width: 720px; line-height: 1.5; margin: 0; }

.fu-step { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; }
.fu-step:first-of-type { margin-top: 0; }
.fu-step h2 { margin: 0; font-size: 15px; }
.fu-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--surface-3); color: var(--text-dim);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
}

.fu-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 6px; }
.fu-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 10px;
}
.fu-card-num { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.fu-card-art {
  /* Agrandada el 2026-09-14 (era 92px) — pedido explícito del usuario. */
  height: 200px; border-radius: var(--r-md); background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fu-card-art img { max-height: 100%; max-width: 100%; object-fit: contain; }
.fu-card-noart { font-size: 11.5px; color: var(--text-faint); text-align: center; line-height: 1.4; }
.fu-card-noart i { font-style: normal; color: var(--text-faint); opacity: .8; }
/* Cuando se muestra la foto de OTRO acabado por no tener la del elegido — ver `imagenPadre()`. */
.fu-card-art-note { font-size: 10px; color: var(--text-faint); text-align: center; line-height: 1.35; margin: -2px 0 0; }
.fu-card-id { display: flex; flex-direction: column; gap: 2px; }
.fu-card-name { font-size: 14px; }
.fu-card-sub { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

.fu-card-search { position: relative; }
.fu-search { width: 100%; box-sizing: border-box; font-size: 12.5px; }
.fu-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  max-height: 220px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface-3); box-shadow: var(--shadow-md);
}
.fu-suggest-item {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 7px 9px; border: none; background: none; color: var(--text); text-align: left;
  font-size: 12.5px; cursor: pointer;
}
.fu-suggest-item:hover, .fu-suggest-item:focus-visible { background: var(--surface-2); }
.fu-suggest-item img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; flex: none; }
.fu-suggest-noart { width: 22px; height: 22px; border-radius: 5px; background: var(--surface-2); flex: none; }

.fu-stat-hex { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 4px; }
.fu-stat-hex .hexsel { max-width: 168px; width: 100%; }
.fu-stat-hex-pie { font-size: 10.5px; color: var(--text-faint); text-align: center; }

.fu-outcomes { display: flex; flex-direction: column; gap: 6px; }
.fu-outcome { display: grid; grid-template-columns: 128px 1fr 64px; align-items: center; gap: 10px; }
.fu-outcome-tag { justify-self: start; }
.fu-outcome-bar { background: var(--surface-2); border-radius: 3px; height: 16px; overflow: hidden; }
.fu-outcome-bar i {
  display: block; height: 100%;
  background: color-mix(in srgb, var(--ac) 75%, var(--gold));
  transition: width .4s var(--ease-out);
}
.fu-outcome-pct { font-family: var(--mono); font-size: 12px; color: var(--text-dim); text-align: right; }
.fu-outcome.perfecto .fu-outcome-pct { color: var(--text-faint); }

@media (max-width: 560px) {
  .fu-outcome { grid-template-columns: 96px 1fr 52px; gap: 6px; }
  .fu-outcome-tag { font-size: 11px; }
}

.fu-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fu-money-cell { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-2); }
.fu-money-cell dt { font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.fu-money-cell dd { margin: 0; font-size: 22px; font-variant-numeric: tabular-nums; font-family: var(--mono); font-weight: 600; }
.fu-money-cell dd.neg { color: var(--down); }
.fu-money-cell dd.pos { color: var(--up); }
.fu-money-cell span.dim { font-size: 11px; display: block; margin-top: 4px; }

.fu-insights { margin-top: 18px; }
.fu-insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fu-insight { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.fu-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--text-faint); }
.fu-insight-comun .fu-dot { background: var(--accent); }
.fu-insight-favor .fu-dot { background: var(--up); }
.fu-insight-raro .fu-dot { background: var(--gold); }

@media (max-width: 780px) {
  .fu-cards, .fu-money { grid-template-columns: 1fr; }
}

/* --- las dos diferencias entre Free y Pro, arriba de la tabla de precios --- */

.difs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 20px; }
.dif { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 13px 15px; }
.dif h3 { margin: 0 0 9px; font-size: 13px; color: var(--text); }
.dif-par { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 3px 0; }
.dif-par b { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.dif-plan { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.dif-pro { border-top: 1px solid var(--line-soft); margin-top: 3px; padding-top: 6px; }
.dif-pro b { color: var(--gold); font-weight: 600; }

/* --- cuántas alertas caben en el plan --- */
.alert-cupo { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; }
.alert-cupo b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.alert-cupo.lleno b { color: var(--gold); }
.alert-cupo a { color: var(--gold); }

/* =============================================================================
   HOME — la puerta de entrada. Un minuto para decir qué es Vault y a dónde ir.
   Nada aquí inventa datos: las cifras vienen de /api/summary y /api/collections,
   los mismos que ya usa el resto del sitio.
   ========================================================================== */

.homehero {
  padding: var(--sp-8) 0 var(--sp-7);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
.homehero-kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
.homehero h1 {
  font-size: clamp(30px, 5vw, 46px); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.1; margin: 0; max-width: 18ch;
}
.homehero h1 em {
  font-style: normal; color: var(--gold);
}
.homehero p {
  color: var(--text-dim); font-size: 16px; line-height: 1.6; max-width: 56ch; margin: 0;
}
.homehero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.homehero-cta a {
  padding: 11px 22px; border-radius: var(--r-full); font-size: 14px; font-weight: 600;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  border: 1px solid var(--line);
}
.homehero-cta a.primary { background: var(--brand-grad); color: var(--ink); border-color: transparent; }
.homehero-cta a.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.homehero-cta a.ghost { color: var(--text-dim); background: var(--surface); }
.homehero-cta a.ghost:hover { color: var(--text); border-color: var(--text-faint); transform: translateY(-2px); }

/*
 * VENTAS RECIENTES — carrusel horizontal infinito de la portada.
 *
 * Traducción a CSS/JS plano de un componente React pegado (framer-motion +
 * react-use-measure, ver `iniciarVentasSlider()`/`salesTicker()` en app.js
 * para el porqué de no instalar ese stack — mismo criterio que el fondo
 * Aurora y el carrusel en abanico de Opportunities, TRASPASO §15/§16). La
 * pista (`.sales-ticker-track`) se pinta DOS veces seguidas por JS y estas
 * `@keyframes` la desplazan de 0 a -50%: como el contenido está duplicado,
 * ese punto es visualmente idéntico al principio y el bucle no se nota. Sin
 * `requestAnimationFrame`, sin medir anchos a mano: solo CSS.
 */
/* Mini-filtro (colección + ventana de tiempo) del carrusel de arriba. */
.sales-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.sales-filter select {
  padding: 5px 10px; font-size: 12px; height: auto;
}

.sales-ticker { overflow: hidden; }
.sales-ticker-track {
  display: flex; width: max-content; gap: var(--sp-4);
  animation: sales-scroll 38s linear infinite;
}
.sales-ticker:hover .sales-ticker-track { animation-play-state: paused; }
@keyframes sales-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sale-chip {
  flex: 0 0 auto; width: clamp(128px, 14vw, 168px);
  display: flex; flex-direction: column; gap: var(--sp-2);
  text-decoration: none; color: inherit;
}
.sale-chip-media {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
a.sale-chip:hover .sale-chip-media { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sale-chip-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sale-chip-price {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  padding: 4px 8px; border-radius: var(--r); text-align: left;
  background: var(--glass); backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--gold); line-height: 1.3;
}
.sale-chip-price .sub { display: block; font-size: 9.5px; font-weight: 600; color: var(--text-dim); }
.sale-chip-name {
  font-size: 12px; color: var(--text-dim); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 720px) {
  .sale-chip { width: 116px; }
}

.homegrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: var(--sp-8);
}
.homecard {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg);
  padding: 22px 22px 20px; color: inherit;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.homecard:hover { border-color: var(--text-faint); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.homecard-icon {
  width: 38px; height: 38px; border-radius: var(--r); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--gold);
}
.homecard h3 { margin: 4px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.homecard p { margin: 0; color: var(--text-dim); font-size: 13px; line-height: 1.55; flex: 1; }
.homecard span.go { font-size: 12.5px; color: var(--text-faint); font-weight: 600; }
.homecard:hover span.go { color: var(--gold); }

.homefoot {
  text-align: center; padding: var(--sp-6) 0 var(--sp-7);
  border-top: 1px solid var(--line-soft);
}
.homefoot p { color: var(--text-faint); font-size: 12.5px; max-width: 60ch; margin: 0 auto; }

@media (max-width: 720px) {
  .homehero { padding: var(--sp-7) 0 var(--sp-6); }
  .homehero p { font-size: 14.5px; }
}

.nav-invite { color: var(--text-faint); }
.nav-invite:hover, .nav-invite.on { color: var(--gold); }

/* =============================================================================
   SEGUIR CARTERAS (Pro)

   Reutiliza `.wiz-field`, `.segrow`/`.segpill`, `.alert` y `.muro`: el bloque
   entero solo necesita el contenedor que los reparte y el color de la etiqueta
   del suceso. Escribir componentes nuevos para esto habría dado una sección
   que se parece a la web pero no es la web.
   ========================================================================== */
.segwatch { display: flex; flex-wrap: wrap; gap: 14px 18px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2, transparent); }
.segwatch input[type="text"] { width: 100%; }
.segwatch-go { display: flex; align-items: center; gap: 12px; flex-basis: 100%; }

/* El "Open" de una cartera seguida es un enlace, no un botón, y `.ghost` solo
   estaba escrito para `button`: sin esto se veía como texto suelto al lado de
   dos botones de verdad. Misma pinta, mismo sitio, distinto elemento. */
.alert-actions a.ghost { display: inline-flex; align-items: center; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 12px;
  background: transparent; color: var(--text-dim); }
.alert-actions a.ghost:hover { color: var(--text); border-color: var(--text-faint); }

/* El verbo del movimiento. Cuatro colores para cuatro sucesos: comprar y
   vender son lo contrario y no pueden parecerse, listar y ofertar son
   intenciones y van en gris. El dorado sigue reservado al deal score. */
.tag-ev { font-weight: 600; letter-spacing: .02em; }
.ev-compra  { color: #46d39a; border-color: color-mix(in srgb, #46d39a 40%, transparent); }
.ev-venta   { color: #ff7a6b; border-color: color-mix(in srgb, #ff7a6b 40%, transparent); }
.ev-listado { color: var(--text); border-color: var(--line); }
.ev-oferta  { color: var(--text-faint); border-color: var(--line); }

/* --- ofertas recibidas: percentil contra ventas reales (Pro, 2026-09-28) ---
   Una barra fina con la cifra encima: se lee de un vistazo sin inventar un
   semáforo de «buena/mala oferta». El color solo dice en qué tramo cae. */
.ofpct { position: relative; display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: 64px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--surface-2);
  overflow: hidden; font-family: var(--mono); font-size: 12px; }
.ofpct i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .28; }
.ofpct b { position: relative; font-weight: 600; }
.ofpct-bajo i { background: var(--down); }
.ofpct-medio i { background: var(--gold); }
.ofpct-alto i { background: var(--up); }
.muro-chico { padding: 12px 14px; }
.muro-chico p { margin: 0 0 8px; font-size: 13px; }
.ofpct-base { display: block; margin-top: 2px; font-size: 10px; color: var(--text-faint); font-family: var(--mono); }
.ofpct-base.aviso { color: var(--gold); }

/* --- radar de salida (Pro, 2026-09-28): una píldora por señal ------------ */
.senal { display: inline-block; margin: 1px 2px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
  font-family: var(--mono); border: 1px solid var(--line); white-space: nowrap; cursor: help; }
.senal-oferta { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.senal-caida { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
.senal-liquidez { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* --- tu cartera por el Lab (Pro, 2026-09-28): miniaturas de los padres --- */
.fu-padre { display: inline-block; width: 34px; height: 34px; margin-right: 4px; border-radius: 8px;
  overflow: hidden; background: var(--surface-2); vertical-align: middle; }
.fu-padre img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* En un teléfono de 375 px «Get Pro» se montaba encima de «Illuvi Radar»: la
   cabecera no cabe entera. Por debajo de 420 px queda el logo solo y los
   botones se aprietan un poco (2026-09-28). */
@media (max-width: 420px) {
  /* Al final del archivo a propósito: tiene que ganar a `.getprobtn` de arriba. */
  .brand-name { display: none; }
  .top-right { gap: var(--sp-2, 8px); }
  .getprobtn { padding: 6px 11px; }
}

/* Pestañas de Alerts (2026-09-28): en el móvil las cuatro no caben en una
   línea; se desliza la barra, no la página. */
.alerts-tabs { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.alerts-tabs::-webkit-scrollbar { display: none; }
.alerts-tabs .labtab { white-space: nowrap; flex: none; }

/* =============================== SELECTOR DE COLECCIÓN CON IMAGEN (2026-09-29)
   Tres botones en cápsula con una pieza de cada colección. En pantallas
   estrechas quedan solo las imágenes (ver la regla de 880 px, arriba). */
.colpick {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-full); min-width: 0;
}
.colbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px;
  background: none; border: 1px solid transparent; border-radius: var(--r-full);
  color: var(--text-dim); cursor: pointer; font: inherit; flex: none;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.colbtn:hover { color: var(--text); background: var(--surface-2); }
.colbtn:hover .colbtn-img img { transform: scale(1.12); }
.colbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.colbtn.on {
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 22%, transparent), color-mix(in srgb, var(--darkholo) 18%, transparent));
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 22%, transparent);
}
.colbtn.aparcada:not(.on) { opacity: .6; }
.colbtn-img {
  position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none;
  background: radial-gradient(circle at 30% 30%, #2a2446, #120f22);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 18%, transparent);
  display: grid; place-items: center;
}
.colbtn-img::before { content: attr(data-reserva); color: var(--gold); font-size: 14px; }
.colbtn-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-2) var(--ease); }
.colbtn.on .colbtn-img { box-shadow: inset 0 0 0 2px var(--gold); }
.colbtn-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.colbtn-txt b { font-size: 13px; font-weight: 700; }
.colbtn-txt small { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
/* Fila propia bajo la cabecera, alineada con el contenido. En el teléfono se
   desliza de lado si no cabe (sin mover la página). */
.colbar { margin: 18px 0 -6px; padding: 0 clamp(24px, 3vw, 56px); }
.colbar .colpick { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.colbar .colpick::-webkit-scrollbar { display: none; }
.colbar .colbtn { padding: 4px 16px 4px 4px; }
.colbar .colbtn-img { width: 38px; height: 38px; }
@media (max-width: 880px) { .colbar { padding: 0 var(--sp-4, 16px); margin-top: 10px; } }
@media (max-width: 480px) {
  .colbar .colbtn { padding: 3px 10px 3px 3px; gap: 6px; }
  .colbar .colbtn-img { width: 30px; height: 30px; }
  .colbar .colbtn-txt small { display: none; }
}

/* ======================================================= LAB COMPACTO (2026-09-29)
   Solo visual. Paneles en rejilla, cifras con barras y anillos en vez de listas
   de números, y todo más apretado. */
.lab .lab-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.lab .lab-top h2 { margin: 0; font-size: 20px; }
.lab .lab-top-col { color: var(--text-faint); font-weight: 600; }
.lab .lab-top .labtabs { margin: 0; }
.lab .lab-sim { margin-left: auto; font-size: 11px; font-family: var(--mono); color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: var(--r-full); padding: 3px 10px; }
.lab .lab-aviso { font-size: 11.5px; padding: 7px 12px; margin: 0 0 12px; line-height: 1.45; }
.lab .packmodes { display: inline-flex; gap: 6px; margin: 0 0 12px; }
.lab .packmode { padding: 7px 14px; border-radius: var(--r-full); text-align: left; min-width: 0; }
.lab .packmode b { font-size: 13px; }
.lab .packmode span { font-size: 11px; display: block; opacity: .8; }
.lab .packmode.on span { color: var(--text-dim); }
.lab-mini { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; margin: 6px 0 0; }
.lab-mini b { color: var(--text-dim); }

.lab .lab-barra { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lab .lab-barra .fcampo { min-width: 120px; }
.lab .lab-barra .fcampo input, .lab .lab-barra .fcampo select { padding: 7px 10px; }
.lab .lab-barra .lab-mini { flex: 1 1 260px; margin: 0 0 6px; }

/* KPIs con icono o anillo */
.lab-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.lab-kpi { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 60%, transparent)); }
.lab-kpi dt { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.lab-kpi dd { margin: 2px 0; font-size: 24px; font-weight: 700; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lab-kpi dd.pos { color: var(--up); } .lab-kpi dd.neg { color: var(--down); }
.lab-kpi small { font-size: 11px; color: var(--text-faint); }
.lab-kpi-ic { font-size: 22px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--gold) 12%, transparent); }
.lab-kpi-dif.pos { border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.lab-kpi-dif.neg { border-color: color-mix(in srgb, var(--down) 40%, transparent); }
.lab-anillo { --p: 0; --c: var(--gold); width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 10%, transparent) 0); position: relative; }
.lab-anillo::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface-2); }
.lab-anillo b { position: relative; font-size: 12.5px; font-family: var(--mono); }
.lab-kpi-dif.pos .lab-anillo { --c: var(--up); } .lab-kpi-dif.neg .lab-anillo { --c: var(--down); }

/* Paneles */
.lab-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 14px 0; align-items: start; }
.lab-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.lab-panel { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; background: color-mix(in srgb, var(--surface-2) 55%, transparent); margin: 0; }
.lab-panel.block { margin: 0; }
.lab-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lab-panel-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.lab-panel-head > span { font-size: 11px; color: var(--text-faint); }
.lab-panel .block-head { margin-bottom: 10px; }
.lab-panel .block-head h2 { font-size: 14px; }

/* La regla de «si lo repitieras» */
.lab-regla { position: relative; height: 34px; margin: 26px 4px 6px; border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--down) 18%, transparent), color-mix(in srgb, var(--up) 18%, transparent)); }
.lab-regla-banda { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.lab-regla-med, .lab-regla-gasto { position: absolute; top: -4px; bottom: -4px; width: 3px; transform: translateX(-50%); border-radius: 2px; }
.lab-regla-med { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.lab-regla-gasto { background: var(--text); opacity: .8; }
.lab-regla-med span, .lab-regla-gasto span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; font-family: var(--mono); }
.lab-regla-med span { top: -20px; color: var(--gold); font-weight: 700; }
.lab-regla-gasto span { bottom: -20px; color: var(--text-dim); }
.lab-regla-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); margin: 26px 0 10px; }
.lab-regla-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lr-banda { background: color-mix(in srgb, var(--accent) 55%, transparent); } .lr-med { background: var(--gold); } .lr-gasto { background: var(--text); }
.lab-mini-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lab-mini-cifras > div { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.lab-mini-cifras > div.destacada { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.lab-mini-cifras dt { font-size: 10.5px; color: var(--text-faint); }
.lab-mini-cifras dd { margin: 2px 0 0; font-family: var(--mono); font-size: 14px; font-weight: 600; }

/* Mejor tirada y cobertura */
.lab-mejor { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 12px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, transparent), color-mix(in srgb, var(--darkholo) 10%, transparent)); }
.lab-mejor .tag { grid-row: span 2; }
.lab-mejor b { font-size: 15px; } .lab-mejor .dim { font-size: 12px; grid-column: 2; }
.lab-mejor strong { grid-column: 3; grid-row: 1; font-family: var(--mono); font-size: 18px; color: var(--gold); text-align: right; }
.lab-mejor small { grid-column: 3; grid-row: 2; font-size: 10.5px; color: var(--text-faint); text-align: right; }
.lab-cobertura { margin-top: 14px; }
.lab-cobertura-barra { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.lab-cobertura-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ff7a4d); border-radius: 6px; }

/* Barras de reparto */
.lab-barra-fila { display: grid; grid-template-columns: minmax(34px, max-content) 1fr max-content; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.lbf-k { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.lbf-k small { font-size: 10px; }
.lbf-b { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.lbf-b i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--darkholo))); }
.lbf-n { text-align: right; font-family: var(--mono); font-size: 12px; }
.lbf-n small { font-size: 10.5px; color: var(--text-faint); margin-left: 6px; }

/* Chase */
.caza-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.caza-izq { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.caza-izq .cazapick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.caza-izq .cazapick-especie, .caza-izq .cazapick-finish { grid-column: span 2; }
.caza-izq .cazatpi, .caza-izq .cazabudget { margin: 0; }
.caza-der .cazastats { margin: 0; height: 100%; }
.lab-veredicto { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.lab-veredicto.pos { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.lab-veredicto.neg { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.lab-versus-fila { display: grid; grid-template-columns: 170px 1fr 84px; gap: 10px; align-items: center; font-size: 12.5px; padding: 5px 0; }
.lab-versus-fila small { color: var(--text-faint); font-size: 10.5px; }
.lab-versus-fila b { text-align: right; font-family: var(--mono); }
.lab-versus-b { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.lab-versus-b i { display: block; height: 100%; border-radius: 6px; }
.lab-versus-b.coste i { background: linear-gradient(90deg, #ff7a4d, var(--down)); }
.lab-versus-b.valor i { background: linear-gradient(90deg, var(--up), var(--accent)); }
.lab-escalones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lab-escalon { padding: 8px 6px; border-radius: 10px; text-align: center; background: color-mix(in srgb, var(--text) 5%, transparent);
  display: flex; flex-direction: column; gap: 2px; }
.lab-escalon b { font-size: 11px; color: var(--text-faint); }
.lab-escalon span { font-family: var(--mono); font-weight: 700; font-size: 13.5px; }
.lab-escalon small { font-size: 10px; color: var(--text-faint); }
.lab-escalon.on { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent); }
.lab-escalon.on b { color: var(--gold); }
.lab .cazasvg { max-height: 200px; }
.lab-panel .chart { margin-top: 4px; }
.cazareal-fila { display: flex; align-items: center; gap: 14px; }
.cazareal-fila .lab-mini { margin: 0; }
.lab .cazareal { margin-top: 0; }

/* Fuse */
.lab .fu-hero h1 { font-size: 22px; margin: 4px 0 4px; }
.lab .fu-hero p { font-size: 12.5px; max-width: 900px; margin: 0 0 12px; }
.lab .fu-step { margin: 16px 0 8px; }
.lab .fu-nota { font-size: 11.5px; max-width: 980px; margin: 0 0 12px; columns: 2; column-gap: 28px; }
.lab .fu-opciones { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lab .fu-opciones .fu-step { margin: 16px 0 14px; }
.lab .fu-opciones .lab-barra { margin-bottom: 8px; }
.lab #fuSalida .block { margin-top: 12px; }
.lab #fuSalida .lab-duo .block { margin-top: 0; }

@media (max-width: 1000px) {
  .lab-kpis, .lab-tres { grid-template-columns: 1fr; }
  .lab-duo, .caza-grid { grid-template-columns: 1fr; }
  .lab .fu-nota { columns: 1; }
}
@media (max-width: 560px) {
  .lab-mini-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-escalones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-versus-fila { grid-template-columns: 1fr 70px; } .lab-versus-b { grid-column: span 2; grid-row: 2; }
  .lab .lab-sim { margin-left: 0; }
}
.lab .fu-card-art:has(.fu-card-noart) { height: 120px; }
.lab .fu-cards { gap: 12px; }
.lab-versus-fila { grid-template-columns: 200px 1fr 84px; }

/* ============================================ FUSE: cartas más estrechas (2026-09-29)
   Con tres cartas a lo ancho de 1400 px la imagen quedaba como una estampita en
   medio de un recuadro vacío. Ahora cada carta tiene un ancho de carta y la
   imagen la llena. */
.lab .fu-cards { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: start; gap: 14px; }
.lab .fu-card-art { height: auto; aspect-ratio: 1 / 1; background: #120f22; }
.lab .fu-card-art img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.lab .fu-card-art:has(.fu-card-noart) { aspect-ratio: auto; height: 110px; }
.lab .fu-card .finish-picker { gap: 6px; }
@media (max-width: 1000px) { .lab .fu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .lab .fu-cards { grid-template-columns: 1fr; } }

/* ================================================ INVITE, rediseño (2026-09-29) */
.inv { margin-bottom: 18px; }
.inv-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 20px 22px; border-radius: var(--r-md); border: 1px solid var(--line); margin-bottom: 12px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 55%),
              radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--darkholo) 14%, transparent), transparent 55%),
              color-mix(in srgb, var(--surface-2) 70%, transparent); }
.inv-hero-txt { flex: 1 1 380px; min-width: 0; }
.inv-hero-txt h2 { margin: 0 0 6px; font-size: 22px; }
.inv-hero-txt p { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 620px; }
.inv-hero-cifras { display: flex; gap: 10px; }
.inv-big { min-width: 104px; padding: 10px 14px; border-radius: 14px; text-align: center; background: color-mix(in srgb, var(--ink) 55%, transparent);
  border: 1px solid var(--line); display: flex; flex-direction: column; }
.inv-big b { font-size: 28px; font-family: var(--mono); line-height: 1.1; }
.inv-big span { font-size: 11px; color: var(--text-faint); }
.inv-big.prox b { color: var(--gold); }
.inv .inv-code { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-bottom: 12px; }
.inv .codebox { position: relative; padding: 12px 16px; text-align: left; flex-wrap: wrap; }
.inv .codelabel { width: 100%; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.inv .codebox .code { font-size: 20px; }
.inv .inv-link .code { font-size: 13px; }
.inv-panel { padding: 16px 20px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.inv-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.inv-panel-head h3 { margin: 0; font-size: 14px; }
.inv-activos { font-size: 12px; color: var(--up); }
.inv-camino { position: relative; height: 120px; margin: 34px 44px 6px 18px; }
.inv-camino-riel { position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.inv-camino-riel i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), #ff7a4d, var(--darkholo)); }
.inv-nodo { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 130px; text-align: center; }
.inv-nodo-p { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--mono);
  background: var(--surface-2); border: 2px solid var(--line); color: var(--text-faint); position: relative; z-index: 1; }
.inv-nodo.on .inv-nodo-p { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 60%, transparent); }
.inv-nodo.prox .inv-nodo-p { border-color: var(--gold); color: var(--gold); animation: inv-late 2s ease-in-out infinite; }
@keyframes inv-late { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); } }
.inv-nodo-t { margin-top: 8px; font-size: 11.5px; color: var(--text-dim); line-height: 1.35; display: flex; flex-direction: column; }
.inv-nodo-t b { font-size: 11px; color: var(--text-faint); font-family: var(--mono); font-weight: 600; }
.inv-nodo.on .inv-nodo-t b { color: var(--gold); }
.inv-nodo-t small { color: var(--up); font-size: 10.5px; }
.inv-alianza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: center;
  padding: 18px 22px; border-radius: var(--r-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.inv-alianza-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.inv-alianza h3 { margin: 4px 0 6px; font-size: 16px; }
.inv-alianza p { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.inv-alianza .codebox { display: inline-flex; gap: 16px; }
.inv-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-pasos li { counter-increment: paso; display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--text-dim);
  padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.inv-pasos li::before { content: counter(paso); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; color: var(--ink); background: var(--accent); }
.inv-alianza .modal-nota { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .inv .inv-code, .inv-alianza { grid-template-columns: 1fr; }
  .inv-hero-cifras { width: 100%; } .inv-big { flex: 1; min-width: 0; }
  .inv-camino { height: auto; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
  .inv-camino-riel { display: none; }
  .inv-nodo { position: static; transform: none; flex-direction: row; width: auto; text-align: left; gap: 10px; }
  .inv-nodo-t { margin: 0; }
}

/* ================================================= ALERTS, más compacto (2026-09-29) */
.alerts-tabs { margin-bottom: 12px; }
.alerts-page .alerts-head { padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--line); margin-bottom: 12px;
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 55%), color-mix(in srgb, var(--surface-2) 60%, transparent); }
.alerts-page .alerts-head h2 { margin: 0; font-size: 18px; }
.alerts-page .alerts-head .block-note { font-size: 12.5px; max-width: 720px; }
.alerts-head-right { flex-direction: row !important; align-items: center !important; }
[data-panel] > .block-head { margin-bottom: 6px; }
[data-panel] > .block-head + .block-note, [data-panel] > .block-note { font-size: 12.5px; max-width: 760px; }
[data-panel] .muro { padding: 14px 18px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; }
[data-panel] .muro p { margin: 0; }
[data-panel] .muro .fbtn { flex: none; }
.alerts-page ~ section[data-panel] .grid, section[data-panel] .grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
section[data-panel] .grid .card-media { aspect-ratio: 4 / 3; height: auto; }
section[data-panel] .grid .card-body { padding: 10px 12px 12px; }
section[data-panel] .grid .card-name { font-size: 13.5px; }
section[data-panel] .grid .card-stat-value { font-size: 13px; }
section[data-panel] .grid .tags { gap: 4px; }

/* Las cartas estrechas dejan sitio: las opciones van a su derecha, en columna. */
.lab .fu-fila { display: grid; grid-template-columns: max-content minmax(240px, 320px); gap: 16px; align-items: start; }
.lab .fu-fila .fu-opciones { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.lab .fu-fila .fu-opciones .fu-step { margin: 0 0 12px; }
.lab .fu-fila .lab-barra { flex-direction: column; align-items: stretch; margin: 0; }
.lab .fu-fila .lab-barra .fcampo { min-width: 0; }
.lab .fu-fila .lab-barra .lab-mini { flex: none; margin: 0; }
.inv-camino { height: 96px; }
@media (max-width: 1000px) { .lab .fu-fila { grid-template-columns: 1fr; } }

/* =============================================================================
   COLECCIONISTAS (2026-09-29) — coleccionistas.js
   Rankings por nicho, coleccionista del mes, vitrina, insignias, modo privado.
   Todo con los tokens de siempre: el dorado sigue significando «destacado».
   ========================================================================== */

.cr-mios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; font-size: 12.5px; }
.cr-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim);
  font-size: 12px; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cr-chip:hover { color: var(--text); border-color: var(--text-faint); }
.cr-chip-edit { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }

.cr-tagpro {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-xs);
  font: 700 9.5px/1.5 var(--sans); letter-spacing: .08em; color: #1a1200; background: var(--brand-grad);
}

/* --- coleccionista del mes ------------------------------------------------ */
.cr-mes {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center;
  padding: 20px; margin-bottom: var(--sp-6); border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line);
}
.cr-mes.cr-pro { border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: var(--shadow-gold); }
.cr-mes-brillo {
  position: absolute; inset: -40% -10% auto auto; width: 60%; height: 180%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 22%, transparent), transparent);
  animation: crBrillo 9s var(--ease) infinite alternate;
}
@keyframes crBrillo { from { transform: translate(0, 0) rotate(0); opacity: .7; } to { transform: translate(-30%, 10%) rotate(20deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cr-mes-brillo { animation: none; } }
.cr-mes-cara .wav { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-lg); }
.cr-mes-txt { position: relative; min-width: 0; }
.cr-mes-kicker { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cr-mes h2 { margin: 8px 0 4px; font-size: 24px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cr-mes p { margin: 0 0 12px; font-size: 13.5px; }
.cr-mes-cifras { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 12px; }
.cr-mes-cifras dt { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.cr-mes-cifras dd { margin: 2px 0 0; font: 600 18px/1.2 var(--mono); }
.cr-mes-ir { display: inline-block; margin-top: 12px; text-decoration: none; }

/* --- pestañas y lista ----------------------------------------------------- */
.cr-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: thin; }
.cr-tab {
  flex: none; font: inherit; font-size: 13px; padding: 7px 13px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-dim);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.cr-tab:hover { color: var(--text); }
.cr-tab.on { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); font-weight: 600; }

.cr-podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin: 6px 0 18px; }
.cr-pod {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0;
  padding: 14px 12px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
a.cr-pod[href]:hover { transform: translateY(-3px); border-color: var(--text-faint); }
.cr-pod .wav { width: 72%; max-width: 150px; height: auto; aspect-ratio: 1; border-radius: var(--r-md); }
.cr-pod-1 { padding-top: 20px; }
.cr-pod-1 .wav { width: 82%; }
.cr-pod-pos { font: 700 13px/1 var(--mono); color: var(--text-faint); }
.cr-pod-1 .cr-pod-pos { color: var(--gold); font-size: 16px; }
.cr-pod .cr-nombre { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-pod .cr-cifra { font-size: 14px; }

.cr-filas { display: flex; flex-direction: column; gap: 6px; }
.cr-fila {
  display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-soft);
  color: var(--text); text-decoration: none; transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
a.cr-fila[href]:hover { border-color: var(--text-faint); background: var(--surface-2); }
.cr-fila .wav { width: 40px; height: 40px; border-radius: var(--r); box-shadow: none; }
.cr-pos { font: 600 13px/1 var(--mono); color: var(--text-faint); text-align: right; }
.cr-quien { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-nombre { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-nombre.mono { font-family: var(--mono); font-size: 12.5px; }
.cr-ins { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cr-cifra { font-family: var(--mono); font-size: 13.5px; text-align: right; white-space: nowrap; }
.cr-cifra .dim { font-family: var(--sans); font-size: 12px; }
.cr-cifra .pos { color: var(--up); } .cr-cifra .neg { color: var(--down); }

/* El destacado (Pro): marco dorado. Es lo que se paga, así que se nota. */
.cr-pro { border-color: color-mix(in srgb, var(--gold) 60%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface)); }
.cr-fila.cr-pro, .cr-pod.cr-pro { box-shadow: var(--shadow-gold); }
.cr-privada .cr-nombre { color: var(--text-dim); font-style: italic; }

/* --- insignias ------------------------------------------------------------ */
.cins-fila { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.cins {
  --c1: #d08b5b; --c2: #7a4a2c;
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); cursor: default;
  font-size: 12.5px; color: var(--text);
}
.cins-ico {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--c1), var(--c2)); color: #140f22; font-size: 13px; font-weight: 700;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 2px color-mix(in srgb, var(--c1) 30%, transparent);
}
.cins-plata { --c1: #e3e8f6; --c2: #8e97b3; }
.cins-oro { --c1: #ffd36a; --c2: #c07a00; }
.cins-leyenda { --c1: #ff9ee0; --c2: #8f3dff; }
.cins-leyenda .cins-ico { background: var(--brand-grad); animation: cinsLeyenda 3.2s linear infinite; }
@keyframes cinsLeyenda { 0%, 100% { filter: hue-rotate(0deg) brightness(1); } 50% { filter: hue-rotate(35deg) brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .cins-leyenda .cins-ico { animation: none; } }
.cins-chica { padding: 0; border: 0; background: none; }
.cins-chica .cins-ico { width: 18px; height: 18px; font-size: 10px; }

/* --- perfil en la ficha de la wallet --------------------------------------- */
.colperfil { padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.cp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-head h2 { margin: 0; font-size: 17px; }
.cp-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.cp-sub { margin: 14px 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cv-pieza {
  display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--r-md); min-width: 0;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); text-decoration: none;
  font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.cv-pieza:hover { border-color: var(--text-faint); transform: translateY(-2px); }
.cv-img { display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--surface-3); }
.cv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-txt { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
.cv-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-txt .dim { font-size: 11px; }
.cv-grid-ed { max-height: 340px; overflow-y: auto; padding: 2px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.cv-elegible.on { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.cp-ed { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.cp-pin { background: none; border: 0; padding: 0; cursor: pointer; opacity: .55; transition: opacity var(--dur-2) var(--ease); }
.cp-pin.on { opacity: 1; }
.cp-pin.on .cins { border-color: var(--gold); }
.cp-privs { display: flex; flex-direction: column; gap: 8px; }
.cp-sw { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.cp-sw input { margin-top: 3px; accent-color: var(--gold); }
.cp-sw-off { cursor: not-allowed; opacity: .7; }
.cp-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.colperfil .small, .cr-hero .small { font-size: 12.5px; }

/* --- explorador: filas en modo privado ------------------------------------- */
.wchip-priv { cursor: default; font-style: italic; }
.wcard-priv .wcard-link { cursor: default; }

@media (max-width: 720px) {
  .cr-mes { grid-template-columns: 1fr; text-align: left; }
  .cr-mes-cara { max-width: 150px; }
  .cr-podio { gap: 8px; }
  .cr-pod { padding: 10px 6px 12px; }
  .cr-pod .cr-cifra { font-size: 12px; white-space: normal; }
  .cr-pod .cr-ins { display: none; }
  .cr-fila { grid-template-columns: 26px 34px minmax(0, 1fr); row-gap: 2px; }
  .cr-fila .wav { width: 34px; height: 34px; }
  .cr-fila .cr-cifra { grid-column: 3; text-align: left; }
}

/* --- 2026-09-29 (b): coleccionista del mes de pago, follow, perfil público --- */
.cr-tagmes {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-xs);
  font: 700 10px/1.5 var(--sans); letter-spacing: .04em; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: var(--gold-soft); white-space: nowrap;
}
.cr-delmes { position: relative; }
.cr-fila.cr-delmes, .cr-pod.cr-delmes {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold), 0 0 26px -6px color-mix(in srgb, var(--gold) 70%, transparent);
  animation: crLatido 3.4s var(--ease) infinite;
}
@keyframes crLatido { 0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 18px -8px color-mix(in srgb, var(--gold) 60%, transparent); }
  50% { box-shadow: 0 0 0 1px var(--gold), 0 0 34px -4px color-mix(in srgb, var(--gold) 85%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cr-fila.cr-delmes, .cr-pod.cr-delmes { animation: none; } }

.cr-mes-vendido { border-width: 2px; }
.cr-mes-corona {
  position: absolute; top: 10px; right: 16px; font-size: 42px; line-height: 1; color: var(--gold); opacity: .9;
  text-shadow: 0 0 22px color-mix(in srgb, var(--gold) 70%, transparent);
}
.cr-mes-libre { border-style: dashed; border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.cr-mes-vacio {
  display: grid; place-items: center; aspect-ratio: 1; width: 100%; border-radius: var(--r-lg);
  border: 2px dashed color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); font-size: 64px;
  background: radial-gradient(circle, var(--gold-soft), transparent 70%);
}
.cr-mes-compra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 6px 0 8px; }
.cr-mes-compra select { min-width: 170px; }

.cp-delmes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; padding: 8px 12px;
  border-radius: var(--r-md); background: var(--gold-soft); color: var(--gold); font-weight: 700; font-size: 13.5px;
}
.cp-delmes a { margin-left: auto; font-weight: 400; font-size: 12px; }
.colperfil.cr-delmes { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.cp-quien { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cp-quien .wav { width: 64px; height: 64px; }
.cp-quien h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-red {
  background: none; border: 0; padding: 2px 4px; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer;
  border-radius: var(--r-xs);
}
.cp-red:hover { color: var(--text); background: var(--surface-2); }
.cp-red b { color: var(--text); }
.cp-follow {
  font: 600 13px/1 var(--sans); padding: 8px 16px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid var(--gold); background: var(--brand-grad); color: #1a1200;
  transition: transform var(--dur-1) var(--ease), filter var(--dur-2) var(--ease);
}
.cp-follow:hover { filter: brightness(1.08); }
.cp-follow:active { transform: scale(.97); }
.cp-follow.on { background: var(--surface-2); color: var(--gold); }
.cp-follow:disabled { opacity: .6; cursor: wait; }
.cp-red-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.cp-red-fila {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); text-decoration: none; font-size: 12.5px;
  max-width: 220px;
}
.cp-red-fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-red-fila .mono { font-family: var(--mono); font-size: 11.5px; }
.cp-red-fila .wav { width: 26px; height: 26px; border-radius: 50%; box-shadow: none; }
a.cp-red-fila[href]:hover { border-color: var(--text-faint); }
.cp-privbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin-bottom: 10px;
  border-radius: var(--r-md); border: 1px dashed var(--line); font-size: 13px;
}
.cp-privbox.on { border-style: solid; border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.cp-privbox > div { flex-basis: 100%; }
@media (max-width: 720px) {
  .cr-mes-corona { font-size: 30px; }
  .cp-meta { flex-wrap: wrap; }
}
.cr-reserva {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px;
  margin: -26px 0 var(--sp-6); padding: 12px 16px; border-radius: var(--r-md);
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); background: var(--surface); font-size: 13px;
}
.cr-reserva .cr-mes-compra { margin: 0; }
.cr-reserva > #crMesEstado { flex-basis: 100%; }
.cr-mas { display: grid; place-items: center; padding: 18px 0 6px; min-height: 40px; }
.cr-wallets { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-full); border: 1px solid var(--line);
  font: 500 10.5px/1.6 var(--sans); color: var(--text-dim); }