/* ═══════════════════════════════════════════════════════════════════════════
   TEMA «LIMA» — la miniapp del bot de respaldo.  [tema-lima]

   Se carga ENCIMA de glass.css, no en su lugar. Esa decisión es lo que hace
   que la tienda que ya está funcionando no cambie ni un byte: glass.css no se
   ha tocado, y quien entra por el bot de siempre no descarga siquiera este
   archivo. Aquí solo hay dos cosas: los tokens que cambian de valor y las
   piezas que cambian de FORMA.

   Se llama «lima» y no «karta» a propósito. Karta es de dónde salió la
   referencia visual —fondo casi negro, verde ácido, tarjetas muy redondeadas,
   el saldo enorme arriba— pero el nombre de un tema tiene que seguir siendo
   verdad el día que se promueva al bot principal, y para entonces «espejo»
   mentiría igual que «karta».

   El acento lima manda en la acción; el ámbar de la casa (#d9a441) se queda
   como segundo acento. Ahí está el «adaptado a este bot»: la energía de la
   referencia sin quedarse con su marca.

   La tipografía es la del sistema. No hay `@font-face` porque la CSP de la web
   es `default-src 'self'`: una fuente de Google no cargaría y caería al
   fallback EN SILENCIO, que es peor que no intentarlo. SF Pro en iOS y Roboto
   en Android son grotescas geométricas y con el tracking apretado dan el
   mismo carácter, a coste cero.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superficies: casi negro, no negro ── */
  --papel:        #0b0c0a;
  --superficie:   #161815;
  --superficie-2: #1f221e;
  --borde:        #24272200;   /* el borde desaparece: aquí separa el hueco */
  --borde-fuerte: #2e322b;

  /* ── Tinta ── */
  --tinta:        #f2f4ef;
  --tinta-suave:  #a7ada2;
  --tinta-tenue:  #8b908a;

  /* ── Acento: lima ── */
  /* Bajado de #c6f432 (saturacion 90%) a peticion del dueño: el problema no era
     el tono sino multiplicarlo por SUPERFICIE —el boton primario, una tarjeta
     entera en el inicio, los discos, los chips—. Mismo tono y misma luz, 62% de
     saturacion: se va el acido y se queda la identidad. Contraste medido contra
     --acento-tinta: 11.67:1 (hace falta 4.5:1), asi que sobra margen. Ojo: NO
     se acerca mas a --exito (#9ee06b) o se pierde el acuse copiar->copiado. */
  --acento:        #b9d95e;
  --acento-tinta:  #10140a;    /* texto sobre la lima */
  --acento-suave:  #1c2411;

  /* El ámbar de la casa sigue vivo como segundo acento. */
  --ambar:         #d9a441;

  /* ── Estados ── */
  --exito:        #9ee06b;
  --exito-suave:  #16210f;
  --alerta:       #e8c25c;
  --alerta-suave: #241d0d;
  --error:        #ef7d6e;
  --error-suave:  #2a1614;

  /* ── Forma: todo mucho más redondo ── */
  --radio:     22px;
  --radio-sm:  14px;
  --radio-lg:  28px;
  --hueco:     0.75rem;
  --transicion: 220ms cubic-bezier(.2, .8, .2, 1);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* La trama de papel de glass.css aquí sobra: este fondo es liso. */
body {
  font-family: var(--sans), var(--emoji);
  font-size: 16px;
  line-height: 1.5;
  background-image: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Cabecera: se funde con el fondo ──────────────────────────────────────── */

header.barra {
  /* Plano primero: sin respaldo, en un WebView anterior a Chrome 111 la
     cabecera se queda transparente y el titulo flota sobre lo que pase por
     debajo al desplazar. */
  background: #0b0c0a;
  background: color-mix(in srgb, var(--papel) 80%, transparent);
  border-bottom: none;
}
header.barra .marca {
  border-left: none; padding-left: 0;
  letter-spacing: .02em; text-transform: none;
  font-size: .95rem; font-weight: 700;
}

/* ── Tipografía ───────────────────────────────────────────────────────────── */

h1 { letter-spacing: -.02em; text-transform: none; font-size: 1.35rem; }
h2 {
  letter-spacing: .01em; text-transform: none;
  font-size: 1rem; color: var(--tinta); font-weight: 700;
  margin: 1.6rem 0 .6rem;
}
.etiqueta {
  letter-spacing: .08em; font-size: .66rem; font-weight: 700;
  color: var(--tinta-tenue);
}
.sub { letter-spacing: .06em; }

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */

.tarjeta, .vidrio {
  border: none;
  border-radius: var(--radio);
  padding: 1.15rem;
}

/* El saldo es lo que la gente viene a mirar: centrado, enorme, y los centavos
   más pequeños para que el ojo caiga en los dólares. */
.tarjeta.saldo {
  border-left: none;
  background: var(--superficie);
  text-align: center;
  padding: 1.6rem 1.15rem 1.5rem;
}
.tarjeta.saldo .cifra {
  font-size: 3.1rem; font-weight: 700; letter-spacing: -.035em;
  line-height: 1.05; margin: .35rem 0 0;
}
/* Los centavos, media talla menos. Lo pinta lima.js partiendo el número: sin
   marcado no se puede, y meterle un <span> desde la plantilla obligaría a
   tocar la que ya está en uso. */
.tarjeta.saldo .cifra .centavos { font-size: .55em; letter-spacing: -.01em; }
.tarjeta.saldo .sub { color: var(--tinta-tenue); font-size: .7rem; }

/* ── Botones: píldora ─────────────────────────────────────────────────────── */

.boton {
  border-radius: 999px;
  padding: .95rem 1.3rem;
  font-size: .95rem; font-weight: 650;
  letter-spacing: 0; text-transform: none;
  border: none;
  font-family: var(--sans), var(--emoji);
}
.boton:active { transform: scale(.97); }
.boton.fantasma {
  background: var(--superficie-2); color: var(--tinta);
  border: none;
}
.boton.fantasma:hover { background: var(--borde-fuerte); }
.boton.chico { padding: .5rem .9rem; font-size: .8rem; }

/* ── Filas: tarjetas sueltas, no una lista con rayas ──────────────────────── */

.lista {
  border: none; background: transparent; overflow: visible;
  display: flex; flex-direction: column; gap: .55rem;
}
.fila {
  border-bottom: none;
  background: var(--superficie);
  border-radius: var(--radio-sm);
  padding: .95rem 1rem;
  min-height: 60px;
}
.tarjeta.fila { border-radius: var(--radio); }
a.fila:hover { background: var(--superficie-2); }
a.fila:active { transform: scale(.985); }
.fila .titulo { font-weight: 620; font-size: .97rem; }
.fila .detalle { font-size: .82rem; }
.fila .icono {
  width: 2.3rem; height: 2.3rem; border-radius: 999px;
  background: var(--superficie-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}

.pildora { border-radius: 999px; font-weight: 650; letter-spacing: 0; }

/* ── Barra de abajo: flotante ─────────────────────────────────────────────── */

/* Todo esto va con `:root[data-telegram="1"]` y con `!important` donde toca, y
   no es paranoia de especificidad: glass.css:442-447 declara esas mismas reglas
   con ese mismo selector y con `!important`. Un `!important` de autor gana a
   cualquier declaracion sin el, da igual el orden de carga — asi que la version
   sin prefijo de este archivo era CODIGO MUERTO SIEMPRE. No «a veces pierde»:
   nunca se aplicaba, porque lima.css solo se sirve dentro de la miniapp y ahi
   `webapp.js` pone `data-telegram="1"` antes que nada. Se veia como la barra
   flotante comiendose el final de la lista de pedidos.  [tema-lima] */
:root[data-telegram="1"] nav.abajo,
nav.abajo {
  left: .75rem; right: .75rem; bottom: calc(.75rem + var(--safe-bottom));
  border-radius: 999px;
  border-top: none;
  /* Plano primero: `color-mix` no existe antes de Chrome 111 y sin respaldo la
     barra se quedaba transparente, con el texto flotando sobre la lista. */
  background: #1a1c19;
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  overflow: hidden;
  /* glass mete aqui `max(var(--safe-bottom), .35rem)`: en un iPhone son 34px de
     relleno DENTRO de la pildora, que la estiran y la suben sobre el contenido.
     El area segura ya la respeta el `bottom` de arriba. */
  padding-bottom: 0 !important;
}
nav.abajo a {
  border-top: none; text-transform: none; letter-spacing: 0;
  font-size: .66rem; padding: .65rem .25rem;
}
nav.abajo a[aria-current="page"] {
  color: var(--acento); border-top-color: transparent;
}
/* La reserva de abajo: la pildora mide ~57px, flota 12px. 72px + area segura
   deja aire suficiente sin dejar un hueco muerto de 30px al final. */
:root[data-telegram="1"] main,
main {
  padding-bottom: calc(72px + var(--safe-bottom) + 1rem) !important;
}

/* ── Bloques propios de este tema ─────────────────────────────────────────── */

/* Las dos fichas cuadradas, como las tarjetas Visa de la referencia. */
.fichas {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  margin-top: .8rem;
}
.ficha {
  background: var(--superficie); border-radius: var(--radio);
  padding: 1rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .55rem; min-height: 118px;
  transition: background var(--transicion), transform var(--transicion);
}
.ficha:active { transform: scale(.98); }
.ficha .marca-ficha {
  width: 40px; height: 26px; border-radius: 6px;
  background: var(--superficie-2);
}
.ficha.viva .marca-ficha { background: var(--acento); }
.ficha .nombre { font-weight: 650; font-size: .92rem; margin-top: auto; }
.ficha .pie { font-size: .76rem; color: var(--tinta-tenue); }
.ficha.viva .pie { color: var(--acento); }

/* La fila de referidos, con el disco de acento a la izquierda. */
.fila .icono.disco {
  background: var(--acento); color: var(--acento-tinta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LO QUE FALTABA DE LA CAPA

   La primera versión del tema solo redefinió lo que se ve en la pantalla de
   inicio: saldo, botones, filas, fichas. Todo lo demás —formularios, avisos,
   chips, tablas, la cabecera— se quedó con glass.css, que está construido con
   otra intención: letra monoespaciada, etiquetas en mayúsculas con mucho
   tracking, bordes de un píxel, esquinas de 6px. Encima de los tokens nuevos
   eso no queda «mezclado», queda mal — y es lo que el dueño describió como
   «no salen bien las cosas».

   Nada de aquí toca glass.css ni se sirve fuera de la miniapp del respaldo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Formularios ──────────────────────────────────────────────────────────── */

/* La monoespaciada de glass es deliberada allí —da aire de expediente— y aquí
   desentona con todo lo demás. Los 16px se conservan: por debajo, iOS hace
   zoom al enfocar un campo y la pantalla salta. */
input, select, textarea, .entrada {
  font-family: var(--sans), var(--emoji);
  background: var(--superficie-2);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: .9rem 1rem;
}
input:focus, select:focus, textarea:focus, .entrada:focus {
  border-color: var(--acento);
  background: var(--superficie);
}
.campo label, .motivos legend {
  text-transform: none; letter-spacing: 0;
  font-size: .8rem; font-weight: 600;
  color: var(--tinta-suave); margin-bottom: .4rem;
}

/* ── Avisos: tarjeta con un punto de color, no una banda lateral ─────────── */

.aviso {
  border: none; border-left: none;
  border-radius: var(--radio-sm);
  padding: .9rem 1rem;
  background: var(--superficie);
}
/* El color va en un punto a la izquierda en vez de en el borde: con radios de
   22px una banda de 3px se ve cortada en las esquinas. */
.aviso.bueno { background: var(--exito-suave); color: var(--exito); }
.aviso.malo  { background: var(--error-suave); color: var(--error); }
.aviso.ojo   { background: var(--alerta-suave); color: var(--alerta); }

/* ── Chips: píldoras ──────────────────────────────────────────────────────── */

.chip {
  border-radius: 999px; border: 1px solid transparent;
  background: var(--superficie-2); color: var(--tinta-suave);
  letter-spacing: 0; font-size: .85rem; padding: .65rem 1rem;
}
.chip:hover { color: var(--tinta); border-color: transparent;
              background: var(--borde-fuerte); }
.chip-in:checked + .chip, .chip.puesto {
  background: var(--acento); color: var(--acento-tinta);
  border-color: transparent; font-weight: 650;
}

/* ── Píldoras de estado ───────────────────────────────────────────────────── */

.pildora {
  border: none; padding: .28rem .7rem;
  letter-spacing: .02em; text-transform: none; font-size: .7rem;
}
/* La píldora neutra (skipped_drm en /portal/vaults) es gris sin color de texto,
   así que recupera el borde y el fondo que la regla de arriba le quita — sin
   esto se funde con la fila (fondo casi igual) y deja de leerse como píldora. */
.pildora.neutra { border: 1px solid var(--borde-fuerte); background: var(--superficie-2); }

/* ── Tablas ───────────────────────────────────────────────────────────────── */

table.matriz th {
  text-transform: none; letter-spacing: 0;
  color: var(--tinta-tenue); font-size: .78rem;
}

/* ── Lo copiable: que se vea que se puede tocar ──────────────────────────── */

.copiable {
  background: var(--superficie-2); border: none;
  border-radius: 12px; padding: .7rem .9rem;
  font-family: var(--mono), var(--emoji);   /* aquí SÍ: es un dato que se copia */
}

/* ── El velo de los popups ────────────────────────────────────────────────── */

.velo { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }

/* ── La cabecera, descargada ──────────────────────────────────────────────── */

/* En la captura del dueño la barra llevaba pegados el @ del bot, un candado, el
   idioma con su rótulo, la moneda y un menú: cinco cosas compitiendo con el
   nombre de la tienda. La referencia tiene tres. No se puede tocar `base.html`
   —la comparten los dos temas— así que se arregla desde aquí: los botones de la
   barra pasan a ser discos de icono y el rótulo de texto se esconde.

   `nowrap` en la marca porque al encogerse los botones, un nombre largo se
   partía en dos líneas y descuadraba la barra. */
header.barra .marca { white-space: nowrap; }
header.barra .acciones .boton {
  min-width: 38px; height: 38px; padding: 0 .55rem;
  border-radius: 999px; font-size: .8rem;
  background: var(--superficie-2); color: var(--tinta);
}
header.barra .acciones .boton.fantasma { background: var(--superficie-2); }
/* Solo el icono. La barra llevaba «🌐 English» y «💱 MXN» con su texto, y entre
   los dos se comían el nombre de la tienda. El rótulo sigue en el DOM para
   quien lea con lector de pantalla; lo que se va es el pixel. */
header.barra .acciones .rotulo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Iconos de fila: discos con el acento apagado ────────────────────────── */

/* El emoji sigue siendo el del sistema —cambiar los glifos es otra tarea, y
   pasa por el catálogo de `core/services/iconos.py`, no por una hoja de
   estilo—, pero el disco de detrás hace la mitad del trabajo: los separa del
   texto y les da la misma familia visual que la referencia. */
.fila .icono {
  width: 2.5rem; height: 2.5rem; font-size: 1.15rem;
  background: var(--acento-suave);
}
.fila .icono.disco {
  background: var(--acento); color: var(--acento-tinta);
}

/* ── Enlaces sueltos ──────────────────────────────────────────────────────── */

a.enlace, .guia a { color: var(--acento); }

/* ── Separación entre secciones ───────────────────────────────────────────── */

/* glass usa un `h2` de 2rem arriba porque sus secciones van sin tarjeta; aquí
   las tarjetas ya separan y ese hueco deja la pantalla desarmada. */
h2 + .lista, h2 + .tarjeta, h2 + .fichas { margin-top: .5rem; }

/* ── «Mi código»: la pantalla de compartir y ganar ────────────────────────── */

/* Las formas van dibujadas con CSS y los pasos numerados con `data-n`, no con
   emojis. Un emoji sin declarar en `core/services/iconos.py` hace fallar al
   guardián — y la regla es buena: un icono que no significa nada concreto
   comunica peor que un número. */

.lima-hero {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.15; margin: .4rem 0 .3rem; text-wrap: balance;
}
.lima-sub {
  color: var(--tinta-suave); font-size: .95rem;
  margin: 0 0 1.2rem; max-width: 34ch;
}

/* La tarjeta central: lo que se ha ganado, o el código. */
.lima-cobro { text-align: center; padding: 1.5rem 1.15rem 1.25rem; }
.lima-cobro .cifra {
  font-size: 2.9rem; font-weight: 700; letter-spacing: -.035em;
  margin: .3rem 0 .1rem; line-height: 1.05;
}
/* Un código se lee letra a letra, así que aquí el tracking va al revés que en
   una cifra: separado en vez de apretado. */
.lima-cobro .cifra.lima-codigo {
  font-size: 2.1rem; letter-spacing: .08em;
  font-family: var(--mono), var(--emoji);
}
.lima-cobro .sub { text-transform: none; letter-spacing: 0; font-size: .85rem; }

.lima-par { display: flex; gap: .55rem; margin-top: 1.1rem; }
.lima-par .boton { flex: 1; }
.lima-pie {
  margin: .8rem 0 0; font-size: .8rem; color: var(--tinta-tenue);
}
.lima-pie b { color: var(--tinta); font-family: var(--mono), var(--emoji); }

/* Los tres pasos, en fila. En pantalla estrecha caben porque el rótulo va
   debajo y parte en dos líneas. */
.lima-pasos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; margin: 1.2rem 0 1.4rem; text-align: center;
}
.lima-paso {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--tinta-suave); line-height: 1.25;
}
.lima-disco {
  width: 3.25rem; height: 3.25rem; border-radius: 999px;
  background: var(--acento); color: var(--acento-tinta);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.25rem;
}
.lima-disco::before { content: attr(data-n); }

/* El estado vacío, con un rombo dibujado en vez de un emoji. */
.lima-vacio { text-align: center; padding: 2rem 1rem 1.75rem; }
.lima-vacio .titulo {
  font-weight: 700; font-size: 1.05rem; margin: .9rem 0 .2rem;
}
.lima-vacio .detalle { color: var(--tinta-tenue); font-size: .85rem; margin: 0; }
.lima-rombo {
  display: inline-block; width: 2.6rem; height: 2.6rem;
  background: var(--acento); opacity: .85;
  /* Un rombo de verdad, no una caja girada: así los bordes quedan limpios en
     pantallas sin subpíxel. */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── La cabecera de ajustes: foto, nombre, correo ───────────  [foto-perfil] */

.lima-perfil { text-align: center; padding: .5rem 0 1.4rem; }
.lima-cara {
  width: 88px; height: 88px; border-radius: 999px;
  object-fit: cover; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--superficie-2);
}
/* Sin foto, la inicial. No es un placeholder de relleno: un disco con una
   letra se reconoce como «tu cuenta» y un icono roto se lee como un fallo. */
.lima-inicial {
  font-size: 2.2rem; font-weight: 700; color: var(--acento);
  background: var(--acento-suave);
}
.lima-nombre {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em;
  margin: .75rem 0 .1rem;
}
/* El correo en el acento, como en la referencia. Es el unico dato de contacto
   que se enseña, y solo si esta VERIFICADO: enseñar uno sin verificar invita a
   creer que ya sirve para recuperar la cuenta. */
.lima-correo { color: var(--acento); font-size: .88rem; margin: 0; }

/* La barra de progreso de la misión: tres segmentos, uno por amigo. Se dibuja
   con `span` y no con un `<progress>` porque hace falta ver CUÁNTOS faltan, no
   un porcentaje — «2 de 3» se entiende de un vistazo y «67%» no. */
.lima-barra {
  display: flex; gap: 5px; margin: .7rem auto .1rem; max-width: 220px;
}
.lima-barra span {
  flex: 1; height: 5px; border-radius: 999px;
  background: var(--superficie-2);
}
.lima-barra span.puesto { background: var(--acento); }

/* Un código se lee letra a letra. */
.lima-mono { font-family: var(--mono), var(--emoji); letter-spacing: .06em; }

/* El «Reclamar» apagado: se ve que existe y que aún no toca. */
.lima-par .boton[aria-disabled="true"] {
  opacity: .45; pointer-events: none;
}
.lima-par form { flex: 1; }

/* La cifra a la derecha de una fila: el contador de compras. */
.fila .cifra.chica {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em;
  margin: 0; flex: none;
}

/* ── Movimiento ───────────────────────────────────────────────────────────── */

/* Todo esto cuelga de `.lima-anima`, que se pone cuando la ventana es VISIBLE:
   con la ventana ya visible al cargar, desde el <head> de base.html y antes del
   primer pintado; si no, desde lima.js al revelarse. No es un rodeo: es el
   arreglo. Puesta dos frames DESPUÉS de pintar (como estaba), la página salía
   entera, se borraba y volvía a entrar a trozos: medio segundo de Foro completo
   y luego negro, con la CPU a 4x (10 oct 2026). Por lo mismo el escalonado va
   aquí, por posición, y no en un `--i` que el JS ponía tarde.

   Antes las animaciones se disparaban al cargar el CSS, y dentro de Telegram
   Desktop eso pasa mientras la ventana todavia no se ha revelado — la pagina
   carga oculta, los 420ms se consumen ahi, y cuando por fin la ves ya termino.
   Se comprobo contra Karta, que hace lo mismo por JS y cuyas animaciones si se
   ven en el mismo cliente.

   Y por eso el estado por defecto es VISIBLE. Si el JS no corre —error,
   navegador raro, lo que sea— la pagina se ve entera y sin animar, que es un
   mal menor. Con `animation-fill-mode: both` y opacidad 0 de partida, un fallo
   del adorno dejaria la tienda en blanco.  [tema-lima] */

@view-transition { navigation: auto; }

@keyframes lima-entra {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.lima-anima main > *,
.lima-anima .lista > .fila,
.lima-anima .fichas > .ficha {
  animation: lima-entra 520ms cubic-bezier(.16, .84, .28, 1) backwards;
}
/* 55 ms por puesto y tope en el 13: en una lista larga el último no entra
   medio segundo tarde. Sin `:is()` (Chrome < 88) no hay escalonado y todo entra
   a la vez, que es un mal menor.  [compat-movil] */
.lima-anima :where(main, .lista, .fichas) > :nth-child(2)    { animation-delay: 55ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(3)    { animation-delay: 110ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(4)    { animation-delay: 165ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(5)    { animation-delay: 220ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(6)    { animation-delay: 275ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(7)    { animation-delay: 330ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(8)    { animation-delay: 385ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(9)    { animation-delay: 440ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(10)   { animation-delay: 495ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(11)   { animation-delay: 550ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(12)   { animation-delay: 605ms; }
.lima-anima :where(main, .lista, .fichas) > :nth-child(n+13) { animation-delay: 660ms; }

/* Esqueleto con brillo, para lo que tarda. */
@keyframes lima-brillo { to { background-position: 200% 0; } }
.esqueleto {
  background: linear-gradient(90deg, var(--superficie) 0%,
              var(--superficie-2) 50%, var(--superficie) 100%);
  background-size: 200% 100%;
  animation: lima-brillo 1.4s linear infinite;
  border-radius: var(--radio-sm); min-height: 60px;
}

/* ── Filas fantasma: la FORMA de un pedido antes de tener ninguno ──────────
   Un hueco vacio no dice que va a aparecer ahi. Estas barras dibujan producto,
   fecha y estado para que la seccion se entienda de un vistazo y la primera
   compra caiga en un sitio que ya resulta familiar.

   Reutilizan `lima-brillo`, la misma animacion del `.esqueleto` de carga: es
   deliberado, porque comunica lo mismo —«aqui va a haber algo»— y no anade un
   segundo lenguaje visual para una idea que ya tiene el suyo.

   Van con `aria-hidden` en la plantilla: para un lector de pantalla son ruido,
   y el texto de al lado ya dice que no hay pedidos. */
.fantasmas { pointer-events: none; }
.fantasmas .fila { opacity: .5; }
.hueso {
  display: block;
  height: .62rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--superficie-2) 0%,
              var(--linea, #2a2f26) 50%, var(--superficie-2) 100%);
  background-size: 200% 100%;
  animation: lima-brillo 1.6s linear infinite;
}
.hueso + .hueso { margin-top: .45rem; }
.hueso.chico { height: .5rem; opacity: .6; }
.hueso.pildora-hueso {
  width: 4.2rem; height: 1.35rem; flex: none; border-radius: 999px;
}

/* ── Mini iconos de los metodos de recarga ─────────────────────────────────
   La ficha «Recargar» decia «Anadir saldo» y nada mas: no se veia CON QUE se
   puede pagar sin entrar. Estos discos ensenan los tres mas usados de verdad
   —salen de los datos, no de una lista escrita a mano— y el resto se resume en
   un «+N». Son SVG en linea porque la CSP es `default-src 'self'` y un PNG de
   fuera no cargaria: se veria casi bien y nadie sabria por que casi. */
.metodos-mini { display: flex; align-items: center; gap: .25rem; margin-top: .4rem; }
.metodos-mini .mm {
  width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: var(--superficie-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.metodos-mini .mm svg { width: .85rem; height: .85rem; display: block; }
.metodos-mini .mas {
  font-size: .68rem; color: var(--tinta-tenue); font-weight: 650;
  margin-left: .1rem;
}

/* Quien pidio menos movimiento no lo pide a medias, y eso incluye la
   transicion entre pantallas.

   Aqui hubo un error mio: escribi que `@view-transition` dentro de un `@media`
   era invalido y lo saque fuera, dejando a quien tiene Reduce Motion con la
   transicion puesta. Se comprobo contra Chromium 151 con navegaciones reales
   entre documentos: la regla anidada NO solo se parsea, se aplica y respeta la
   condicion —con el media coincidiendo, `pagereveal.viewTransition` sale null—.
   Va dentro, que es donde tiene que estar.  [tema-lima] */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .lima-anima main > *,
  .lima-anima .lista > .fila,
  .lima-anima .fichas > .ficha { animation: none; }
  .esqueleto, .hueso { animation: none; }
  .boton:active, a.fila:active, .ficha:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRA, CALCADA DE PORTALS.  [dos-modos][portals]

   Medida en su miniapp (`portal-market.com`, que se pinta fuera de Telegram)
   con getComputedStyle y leyendo su hoja de estilos, no estimada a ojo. Tres
   ideas:

   1. **Piezas separadas, no una barra.** Un botón redondo que cambia de MUNDO
      a la izquierda y una pastilla con las pestañas del mundo en el que estás,
      a 12px. Dos trabajos distintos, dos objetos distintos.
   2. **Cristal casi transparente.** Negro al 12 % + `blur(8px)
      saturate(140%)`. Lo que lo convierte en una PIEZA y no en un hueco son
      cuatro filetes interiores de 1-2px que dibujan el canto (`--lima-canto`).
      En Chromium se añade un filtro SVG de distorsión: el «líquido».
   3. **Una pastilla que viaja.** La pestaña puesta no se pinta a sí misma: la
      marca un `::after` que se DESLIZA hasta ella y se APLASTA al llegar.

   **Los selectores llevan `nav.abajo` delante a propósito.** glass.css declara
   `nav.abajo .lima-isla { display: contents }` para que la web sin tema siga
   viendo la barra de siempre, y eso pesa (dos clases + un elemento) más que un
   `.lima-isla` a secas: sin el prefijo, el `display:flex` de aquí NO se
   aplicaba y las islas se descolgaban en dos columnas con los rótulos
   cortados. Cargar después no basta cuando el otro pesa más. El bloque de la
   propia nav lleva además `:root[data-telegram="1"]` por lo mismo: la barra
   flotante de más arriba lo lleva, y sin él ganaría ella.

   La pulsación nunca mueve el LAYOUT: cambia la opacidad, y el icono crece con
   `scale`, que no empuja a nadie. Cada pestaña mide 54px de alto, por encima
   de los 44 mínimos para acertar con el pulgar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-telegram="1"] nav.abajo,
nav.abajo {
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 0; border-radius: 0;
  overflow: visible;
  display: flex; align-items: stretch; justify-content: center;
  gap: 12px;
  left: 1rem; right: 1rem;
  bottom: calc(10px + var(--safe-bottom));
  max-width: 512px; margin: 0 auto;
  padding: 0 !important;

  /* En qué mundo estás lo dice ESTE color, no un botón: tiñe la pestaña
     puesta. Lima en Market; en Comunidad el celeste de OnlyFans, decisión del
     dueño (Portals pone ahí el violeta de sus juegos, `#af51de`). */
  --lima-celeste: #00aff0;
  --lima-tab:     var(--acento);
  --lima-alto:    62px;
  /* El canto del vidrio: su `--glass-shadow`, tal cual. */
  --lima-canto:
    inset 1.8px 3px 0 -2px rgba(255, 255, 255, .06),
    inset 2px 2px 0 -2px rgba(255, 255, 255, .09),
    inset -2px -2px 2px -2px rgba(255, 255, 255, .09),
    inset -1.8px -3px 0 -2px rgba(255, 255, 255, .06);
}
/* Con el mismo `:root[data-telegram]` delante que el bloque de arriba: sin él
   este selector pesa menos, pierde, y la pestaña de Comunidad salía en lima.
   Medido con getComputedStyle, no a ojo. */
:root[data-telegram="1"] nav.abajo.lima-modo-comunidad,
nav.abajo.lima-modo-comunidad { --lima-tab: var(--lima-celeste); }

nav.abajo .lima-isla {
  display: flex; align-items: stretch;
  height: var(--lima-alto);
  box-sizing: border-box;
  border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: var(--lima-canto);
}

/* ── El botón de modo ─────────────────────────────────────────────────────── */
/* Enseña el mundo al que VAS. Su icono lleva el color de ese mundo —en Portals
   va gris, como el rótulo—: es la pista de que al pulsarlo cambia todo, y el
   dueño pidió que se notara que se puede cambiar. */
nav.abajo .lima-isla-modo { flex: 0 0 58px; }
nav.abajo .lima-isla-modo a.lima-cambio {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 4px;
  border-radius: 999px; border-top: 0;
  text-transform: none; letter-spacing: -.4px;
  font-size: 10px; font-weight: 700; line-height: 1.2;
  color: rgba(255, 255, 255, .55);
  transition: color .16s;
}
nav.abajo .lima-isla-modo .ic { color: var(--lima-celeste); }
nav.abajo.lima-modo-comunidad .lima-isla-modo .ic { color: var(--acento); }
nav.abajo .lima-isla-modo a.lima-cambio:active { color: rgba(255, 255, 255, .85); }

/* ── La pastilla de pestañas ──────────────────────────────────────────────── */
nav.abajo .lima-isla-nav {
  flex: 1; min-width: 0;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(var(--lima-pestanas, 3), 1fr);
  padding: 4px;
}
/* El «líquido», solo donde se pinta. `lima.js` pone la clase en Chromium
   —Android y Telegram de escritorio—. En WebKit (iOS, macOS) `url(#…)` dentro
   de `backdrop-filter` no se pinta, y no está comprobado qué hace con el resto
   de la declaración: por eso por defecto va sin él. */
:root.lima-cristal-svg nav.abajo .lima-isla-nav {
  backdrop-filter: blur(8px) url(#lima-distorsion) saturate(140%);
}

/* La pastilla que marca la pestaña puesta. Sale de `--lima-activa`, que pone
   la plantilla, así que está en su sitio en el primer pintado aunque no corra
   ningún JS. Si `lima.js` sabe de qué pestaña se viene pone `--lima-desde`, la
   pastilla arranca AHÍ, y al entrar `.lima-viaja` viaja a la suya. Su clase
   propia: `.lima-anima` ya viene puesta desde el <head>, antes de pintar. */
nav.abajo .lima-isla-nav::after {
  content: "";
  position: absolute; left: 4px; top: 4px; bottom: 4px; z-index: -1;
  width: calc((100% - 8px) / var(--lima-pestanas, 3));
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    inset 2px 1px 0 -1px rgba(255, 255, 255, .27),
    inset -1.5px -1px 0 -1px rgba(255, 255, 255, .24),
    inset -2px -6px 1px -5px rgba(255, 255, 255, .18),
    inset -1px 2px 3px -1px rgba(0, 0, 0, .4),
    inset 0 -4px 1px -2px rgba(0, 0, 0, .2),
    0 3px 6px rgba(0, 0, 0, .16);
  transform-origin: var(--lima-origen, center);
  translate: calc(var(--lima-desde, var(--lima-activa, 0)) * 100%) 0;
}
nav.abajo .lima-isla-nav[data-activa="-1"]::after { display: none; }

/* La curva arranca seca y frena suave, y a mitad de viaje la pastilla se
   aplasta: es lo que la hace parecer una gota y no un rectángulo que se
   desplaza. Las dos cifras son las de Portals. */
@keyframes lima-aplasta {
  50% { scale: 1.05 1.1; }
}
.lima-viaja nav.abajo .lima-isla-nav::after {
  translate: calc(var(--lima-activa, 0) * 100%) 0;
  transition: translate .25s cubic-bezier(1, 0, .4, 1);
  animation: lima-aplasta .44s ease;
}

/* ── Las pestañas ─────────────────────────────────────────────────────────── */
nav.abajo .lima-isla-nav a {
  position: relative; z-index: 1;
  min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0 4px;
  border-radius: 999px; border-top: 0;
  text-transform: none; letter-spacing: 0;
  font-size: 10px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; overflow: hidden;
  /* Portals las deja al 40 %. Aquí al 55: con rótulos de 10px sobre casi negro,
     el 40 % se queda por debajo del contraste que se lee. */
  color: var(--tinta); opacity: .55;
  transition: opacity .16s, color .16s;
}
nav.abajo .lima-isla-nav a[aria-current="page"] {
  color: var(--lima-tab); opacity: 1;
  background: none; border-top-color: transparent;
}
nav.abajo .lima-isla-nav a:active { opacity: .8; }

/* ── Los iconos ───────────────────────────────────────────────────────────── */
/* SVG que heredan `currentColor`: el estado del enlace los tiñe solo. 24 en
   las pestañas y 20 en el botón de modo, las dos medidas de Portals. */
nav.abajo .ic { display: flex; align-items: center; justify-content: center; }
nav.abajo .ic svg { width: 24px; height: 24px; display: block; }
nav.abajo .lima-isla-modo .ic svg { width: 20px; height: 20px; }
nav.abajo a .ic { transition: scale .2s cubic-bezier(.5, 0, 0, 1); }
nav.abajo a:active .ic { scale: 1.1; }

/* La lista no puede quedar debajo de la barra: 62px de pieza + 10px que flota
   + el área segura del teléfono. */
:root[data-telegram="1"] main,
main {
  padding-bottom: calc(62px + 10px + var(--safe-bottom) + 1.25rem) !important;
}

/* ── Movimiento ───────────────────────────────────────────────────────────── */
/* Entra desde abajo al cargar. `backwards` y no `both`: con `both` el último
   fotograma se queda fijado y los estados posteriores dejan de pintarse. */
@keyframes lima-sube {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
nav.abajo .lima-isla { animation: lima-sube 380ms var(--transicion) backwards; }
nav.abajo .lima-isla-nav { animation-delay: 70ms; }

/* El `* { animation: none }` de glass.css no alcanza a los pseudoelementos:
   la pastilla hay que pararla por su nombre. */
@media (prefers-reduced-motion: reduce) {
  nav.abajo .lima-isla,
  nav.abajo .lima-isla-nav::after { animation: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKET: tarjetas con ARTE, no rectángulos.  [dos-modos]

   Las fichas tenían un cuadrito gris de 40×26 arriba a la izquierda
   (`marca-ficha`) que hacía de «marca». En pantalla no se lee como una marca:
   se lee como una imagen que no cargó. Aquí ese mismo elemento pasa a ser la
   capa de ARTE a sangre de la tarjeta — el patrón de la referencia, donde cada
   pieza tiene color propio y el texto va encima.

   El arte es CSS y no imágenes: la CSP es `default-src 'self'`, cada PNG sería
   una petición más, y un degradado escala a cualquier pantalla sin pesar nada.
   Se distinguen por posición (`:nth-child`) y no por una clase nueva: así no
   hay que tocar ninguna de las 20 plantillas.

   Y ningún estado de pulsación mueve el layout: `transform: scale` en una
   tarjeta empuja lo que tiene al lado y produce tiritones. Cambia el color.
   ═══════════════════════════════════════════════════════════════════════════ */

.fichas { gap: .7rem; }
.ficha {
  position: relative; overflow: hidden;
  min-height: 132px;
  padding: .95rem 1rem 1rem;
  justify-content: flex-end;
  background: #161815;
  background: var(--superficie);
  transition: background var(--transicion);
}
/* El arte: a sangre, detrás de todo, y con el degradado que lo funde con el
   fondo para que el texto se lea sin una caja encima. */
.ficha .marca-ficha {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: auto; height: auto; border-radius: 0;
  background: radial-gradient(105% 78% at 12% 0%, #2c3a18 0%, transparent 62%),
              radial-gradient(88% 72% at 96% 8%, #1d2b3a 0%, transparent 60%);
}
.fichas .ficha:nth-child(2) .marca-ficha {
  background: radial-gradient(105% 78% at 88% 0%, #3a2f14 0%, transparent 62%),
              radial-gradient(88% 72% at 4% 10%, #2a1c2f 0%, transparent 60%);
}
.ficha.viva .marca-ficha {
  background: radial-gradient(105% 80% at 14% 0%, #3d4f16 0%, transparent 64%),
              radial-gradient(80% 70% at 92% 6%, #24331a 0%, transparent 58%);
}
/* Un velo abajo: sin él, un arte claro se come el título. */
.ficha .marca-ficha::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(11,12,10,0) 28%, rgba(11,12,10,.86) 100%);
}
/* El arte de la ficha lleva un velo `::after` absoluto encima, así que TODO lo
   que tenga que verse necesita salir de debajo. Un hijo nuevo sin esto se pinta
   bajo el degradado y no se ve, sin ningún error: parece que el cambio no hizo
   nada. Por eso la píldora de estado está en esta lista. */
.ficha .nombre, .ficha .pie, .ficha .metodos-mini, .ficha .lima-ficha-estado, .ficha .lima-ficha-ic {
  position: relative; z-index: 1;
}
/* `align-self` para que no se estire a todo el ancho, y pequeña porque la caja
   tiene `min-height` fijo y `overflow:hidden`: una línea de más no la estira,
   la recorta por arriba. La etiqueta más larga de los dos idiomas es
   «Awaiting payment». */
.ficha .lima-ficha-estado {
  align-self: flex-start; margin-top: .4rem; font-size: .62rem;
}
.ficha .nombre { font-size: 1rem; letter-spacing: -.01em; }
.ficha:active { background: var(--superficie-2); transform: none; }

/* ── El acceso rápido del inicio ────────────────────────  [acceso-rapido] ──
   La primera ficha nace VACÍA (decisión del dueño): solo un «+» en un hueco
   punteado, que al tocarlo ofrece ponerlo. No lleva arte ni velo. */
.ficha.lima-ficha-vacia {
  background: transparent; border: 1.5px dashed var(--borde-fuerte, rgba(255, 255, 255, .18));
  align-items: center; justify-content: center;
}
.ficha.lima-ficha-vacia:active { background: var(--superficie); }
.lima-ficha-mas { font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--tinta-tenue); }
.lima-acceso-cambiar { margin: .45rem 0 0; font-size: .78rem; text-align: right; }
.lima-acceso-cambiar a { color: var(--tinta-tenue); }
/* Cada opción es un botón de un formulario con forma de fila: se le quita lo
   que el navegador le pone a un <button>. */
.fila.lima-acceso-opcion {
  width: 100%; border: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.fila.lima-acceso-opcion:active { background: var(--superficie-2); }
/* Los iconos son los SVG de la barra (`_iconos_nav.html`), no emojis: el emoji
   cambia de dibujo con cada sistema y no se tiñe del tema. Arriba de la ficha,
   en su baldosa; en la lista, dentro del disco de siempre. */
.ficha .lima-ficha-ic {
  margin-bottom: auto;
  width: 2.25rem; height: 2.25rem; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); color: var(--tinta-suave);
}
.ficha.viva .lima-ficha-ic { color: var(--acento); }
/* Los métodos de Recargar ocupan el sitio del dibujo, arriba. */
.ficha .metodos-mini { margin: 0 0 auto; min-height: 2.25rem; }
.lima-ficha-ic svg { width: 1.3rem; height: 1.3rem; }
.fila.lima-acceso-opcion .icono { color: var(--acento); }
.fila.lima-acceso-opcion .icono svg { width: 1.3rem; height: 1.3rem; }
.lima-acceso-puesto { color: var(--acento); font-weight: 700; }

/* ── El saldo: una pieza, no un rectángulo ────────────────────────────────── */
.tarjeta.saldo {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(185,217,94,.16) 0%, transparent 62%),
    var(--superficie);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── La fila de referidos: con su propio color ────────────────────────────── */
a.fila:has(.icono.disco) {
  background:
    radial-gradient(90% 140% at 0% 50%, rgba(185,217,94,.13) 0%, transparent 60%),
    var(--superficie);
}
a.fila:active { background: var(--superficie-2); transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMUNIDAD: la cabecera con video y las tres tarjetas.  [dos-modos]

   RESCATADO del respaldo del servidor. Estas reglas vivian en el mismo bloque
   que las de la barra vieja, y al quitar aquellas me lleve estas por delante:
   la pantalla de Comunidad quedo sin tarjetas —tres enlaces subrayados— y asi
   se desplegó. La aserción que use comprobaba lo que yo SOSPECHABA que habia en
   el bloque (`lima-isla`), no lo que habia de verdad.

   Al volver, dos cambios: ni una regla de `nav.abajo` —esas eran las que
   peleaban con la barra nueva— y la entrada cuelga de `.lima-anima`, como todo
   el movimiento de este tema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera con vídeo ───────────────────────────────────────────────────── */
/* El vídeo es un archivo PROPIO bajo /static: la CSP es `default-src 'self'`
   sin `media-src`, así que uno de un CDN se bloquearía en silencio y quedaría
   un rectángulo negro. Va mudo, en bucle y sin controles: es textura, no
   contenido. `preload="none"` para no gastarle datos a quien solo pasa. */
.lima-cabecera {
  position: relative; overflow: hidden;
  border-radius: var(--radio-lg);
  min-height: 128px;
  margin: .2rem 0 1rem;
  display: flex; align-items: flex-end;
  background: #161815;
  background: var(--superficie);
}

.lima-video {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5; pointer-events: none;
}

/* El degradado es lo que hace legible el título encima del vídeo. Sin él, el
   texto blanco sobre un fotograma claro desaparece. */
.lima-cabecera::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(11,12,10,.15) 0%, rgba(11,12,10,.92) 100%);
}

.lima-cabecera-txt { position: relative; z-index: 1; padding: 1rem 1.1rem; }

.lima-cabecera-txt h1 {
  margin: .25rem 0 0; font-size: 1.15rem; line-height: 1.25;
  letter-spacing: -.01em; max-width: 22ch;
}

/* ── Las tres tarjetas ────────────────────────────────────────────────────── */
.lima-rejilla { display: grid; gap: .7rem; }

.lima-carta {
  position: relative; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--radio);
  min-height: 116px;
  background: #161815;
  background: var(--superficie);
  transition: transform var(--transicion);
}

.lima-carta:active { transform: scale(.985); }

/* El «arte» es CSS y no una imagen: cada PNG serían kilobytes por tarjeta, y
   la CSP no deja traerlos de fuera. Dos radiales por tarjeta bastan para dar
   color de lejos, que es lo que hace que se lean como piezas distintas. */
.lima-arte { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .85; }

.lima-carta.lima-foro  .lima-arte { background: radial-gradient(120% 90% at 12% 10%, #2b3a17 0%, transparent 60%),
                                         radial-gradient(90% 80% at 95% 90%, #1d2a3a 0%, transparent 62%); }

.lima-carta.lima-vault .lima-arte { background: radial-gradient(120% 90% at 88% 8%, #3a2f14 0%, transparent 60%),
                                         radial-gradient(90% 80% at 5% 95%, #2a1c2f 0%, transparent 62%); }

.lima-carta.lima-inv   .lima-arte { background: radial-gradient(120% 90% at 50% 0%, #22301c 0%, transparent 62%),
                                         radial-gradient(90% 80% at 10% 100%, #14212a 0%, transparent 60%); }

.lima-cuerpo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: .12rem;
  padding: 1rem 1.05rem;
}

.lima-icono { font-size: 1.5rem; line-height: 1.1; font-family: var(--emoji); }

.lima-nombre { font-size: 1.08rem; font-weight: 750; letter-spacing: -.01em; }

.lima-sub { font-size: .82rem; color: var(--tinta-suave); }

.lima-pildora {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding: .28rem .55rem; border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: var(--tinta-suave);
  border: 1px solid var(--borde-fuerte);
}

.lima-pildora.viva {
  background: #1c2411; background: var(--acento-suave);
  color: var(--acento); border-color: transparent;
}

/* ── Pantalla de «todavía no», maquetada como las de Portals ──────────────── */
/* Como su «Convert Stars»: el sticker animado arriba y grande, el título en
   negrita, una línea gris que explica y el estado debajo. Sin tarjeta: flota
   sobre el fondo, con las estrellas subiendo por detrás.  [portals] */
.lima-pronto {
  position: relative; z-index: 1;
  text-align: center; padding: 2.5rem 1.2rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
}

.lima-pronto .lima-pildora { position: static; margin-top: .35rem; }

.lima-pronto-icono { font-size: 3rem; line-height: 1; font-family: var(--emoji); }

.lima-pronto h1 {
  margin: .9rem 0 0;
  font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em;
}

.lima-pronto .guia {
  max-width: 30ch; margin: 0;
  color: var(--tinta-tenue); font-size: .95rem; line-height: 1.4;
}

.lima-pronto .boton { margin-top: 1.4rem; }

/* Las estrellas ya van en `z-index: -1` y pasan detrás de todo lo que está en
   flujo, así que esto ya no hace falta para ellas. Se queda porque
   `.lima-cabecera` tiene hijos absolutos que cuelgan de su `position`. */
.lima-cabecera, .lima-rejilla { position: relative; z-index: 1; }

/* ── Stickers animados ────────────────────────────────────────────────────── */
/* La caja tiene su tamaño ANTES de que llegue la animación: si no, al aparecer
   el SVG empujaría el título hacia abajo. El emoji de respaldo va centrado en
   esa misma caja y se va cuando el sticker ya se ve.  [portals] */
.lima-sticker {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
}
.lima-sticker > svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.lima-sticker-respaldo { font-size: 2.2rem; line-height: 1; font-family: var(--emoji); }
.lima-sticker-vivo .lima-sticker-respaldo { display: none; }
/* El primer cuadro del propio sticker mientras arranca, en vez del emoji: ocupa
   la caja igual que el SVG de la animación, así que el relevo no se ve. Se va
   con su `.lima-sticker-respaldo` cuando la animación ya está.  [precarga-stickers] */
.lima-sticker-poster {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; object-fit: contain;
}

.lima-pronto-arte { width: 150px; height: 150px; }
.lima-pronto-arte .lima-sticker-respaldo { font-size: 4.5rem; }

/* En las tarjetas de Comunidad el sticker ocupa el sitio del emoji. */
.lima-carta .lima-icono.lima-sticker { width: 52px; height: 52px; margin: -.35rem 0 .1rem -.35rem; }
.lima-carta .lima-icono .lima-sticker-respaldo { font-size: 1.5rem; }

/* ── Estrellas que suben ──────────────────────────────────────────────────── */
/* El fondo de su pantalla de Stars: estrellas doradas y apagadas que suben
   despacio girando un poco. Capa FIJA detrás de todo y sin eventos. Cada una
   trae de la plantilla su columna (--x), tamaño (--s), duración (--t) y
   desfase (--d). El desfase va en NEGATIVO para que al entrar ya estén
   repartidas por la pantalla, y no salgan todas desde abajo a la vez. Se anima
   `transform`, que va por GPU.
   `z-index: -1` y no 0: una capa posicionada con 0 se pinta DESPUÉS de todo
   bloque sin posición, así que las estrellas cruzaban por encima de títulos,
   filtros y tarjetas del foro y del vault. Con -1 caen en el contexto raíz
   detrás del contenido y siguen viéndose sobre el fondo, porque `html` no
   tiene fondo propio y el de `body` pasa al lienzo. Si algún día `html`
   estrena fondo, `body` pintaría el suyo ENCIMA de las estrellas y
   desaparecerían sin error.  [portals] */
.lima-estrellas {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.lima-estrellas i {
  position: absolute; left: var(--x); bottom: -2rem;
  width: var(--s); height: var(--s);
  background: #b08a2e;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
}
.lima-anima .lima-estrellas i {
  animation: lima-estrella var(--t) linear calc(var(--d) * -1) infinite;
}
@keyframes lima-estrella {
  0%   { transform: translateY(0) rotate(0deg);        opacity: 0; }
  15%  { opacity: .55; }
  85%  { opacity: .35; }
  100% { transform: translateY(-110vh) rotate(140deg); opacity: 0; }
}

/* ── El botón de ajustes: el «perfil» de Portals ──────────────────────────── */
/* Redondo, del alto de la barra y más opaco que las otras dos piezas (su
   `_profile`: #282727 al 95 %): es un botón, no una superficie a través de la
   que se ve. Dentro va el menú ⚙️ de siempre, que se abre HACIA ARRIBA.
     [portals] */
nav.abajo .menu-acciones { position: relative; flex: 0 0 var(--lima-alto); }
nav.abajo .menu-acciones > summary.boton {
  width: var(--lima-alto); height: var(--lima-alto); min-width: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: rgba(40, 39, 39, .95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--lima-canto);
  color: rgba(255, 255, 255, .7);
  animation: lima-sube 380ms var(--transicion) 140ms backwards;
}
nav.abajo .menu-acciones[open] > summary.boton { color: var(--lima-tab); }
nav.abajo .menu-acciones > summary .ic svg {
  width: 24px; height: 24px;
  transition: rotate .35s var(--transicion);
}
nav.abajo .menu-acciones[open] > summary .ic svg { rotate: 60deg; }

nav.abajo .menu-acciones .panel {
  top: auto; bottom: calc(100% + 12px); right: 0;
  max-height: calc(100vh - var(--lima-alto) - 40px); overflow-y: auto;
}
/* Las reglas de `nav.abajo a` (columna, rótulo de 10px, `flex: 1`) son para
   las pestañas y PESAN MÁS que `.fila`: sin deshacerlas aquí, cada fila del
   menú se pintaba como si fuera una pestaña más. */
nav.abajo .menu-acciones a.fila {
  flex: none; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: .75rem; padding: .95rem 1rem; min-height: 54px;
  font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none;
  color: var(--tinta); border-top: 0; text-align: left;
}

/* ── La cara de quien mira, en el botón ───────────────────────────────────── */
/* Como el perfil de Portals: la foto, no un engranaje. El aro lleva los dos
   colores de la casa —lima y el celeste de Comunidad— y gira mientras el menú
   está abierto: es la señal de «esto está desplegado» sin tapar la foto. El
   aro es un ::before y no el fondo del botón porque, si girara el botón, giraría
   la cara con él.  [portals][foto-perfil] */
nav.abajo .menu-acciones > summary.boton:has(.lima-avatar) {
  position: relative; isolation: isolate;
  padding: 3px; background: transparent;
}
nav.abajo .menu-acciones > summary.boton:has(.lima-avatar)::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  border-radius: 999px;
  background: conic-gradient(var(--acento), var(--lima-celeste), var(--acento));
}
.lima-anima nav.abajo .menu-acciones[open] > summary.boton:has(.lima-avatar)::before {
  animation: lima-gira 2.4s linear infinite;
}
@keyframes lima-gira { to { rotate: 360deg; } }
nav.abajo .menu-acciones .lima-avatar {
  display: block; width: 100%; height: 100%;
  border-radius: 999px; object-fit: cover;
  border: 2px solid #0b0c0a;
}

/* ── El menú: cristal, y entra como los de Portals ────────────────────────── */
/* Sube, crece y se enfoca a la vez (su `enter`: opacidad + escala + desenfoque),
   y las filas detrás, escalonadas. Cada vez que se abre, no solo la primera. */
nav.abajo .menu-acciones .panel {
  background: rgba(22, 24, 21, .9);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--lima-canto), 0 18px 40px rgba(0, 0, 0, .55);
  transform-origin: bottom right;
}
@keyframes lima-despliega {
  from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(4px); }
}
.lima-anima nav.abajo .menu-acciones[open] .panel {
  animation: lima-despliega .26s cubic-bezier(.2, .8, .2, 1) backwards;
}
.lima-anima nav.abajo .menu-acciones[open] .fila {
  animation: lima-despliega .32s cubic-bezier(.2, .8, .2, 1) backwards;
}
.lima-anima nav.abajo .menu-acciones[open] .fila:nth-child(2) { animation-delay: 35ms; }
.lima-anima nav.abajo .menu-acciones[open] .fila:nth-child(3) { animation-delay: 70ms; }
.lima-anima nav.abajo .menu-acciones[open] .fila:nth-child(4) { animation-delay: 105ms; }
.lima-anima nav.abajo .menu-acciones[open] .fila:nth-child(5) { animation-delay: 140ms; }
.lima-anima nav.abajo .menu-acciones[open] .fila:nth-child(6) { animation-delay: 175ms; }

/* Cada fila lleva su emoji ANIMADO de Telegram en una baldosa de cristal, en
   vez del emoji plano. La caja tiene su tamaño antes de que llegue la
   animación; lottie pinta el SVG con width/height en línea, y por eso el
   `!important` para dejarle un margen dentro de la baldosa. */
nav.abajo .menu-acciones .fila .icono.lima-sticker {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 14px;
  background: radial-gradient(120% 120% at 30% 15%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 60%);
  box-shadow: var(--lima-canto);
}
nav.abajo .menu-acciones .fila .icono.lima-sticker > svg {
  top: 5px; right: 5px; bottom: 5px; left: 5px; width: calc(100% - 10px) !important; height: calc(100% - 10px) !important;
}
nav.abajo .menu-acciones .fila .icono .lima-sticker-respaldo { font-size: 1.2rem; }
nav.abajo .menu-acciones .fila .icono.lima-sticker .lima-sticker-poster {
  top: 5px; right: 5px; bottom: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px);
}

@media (prefers-reduced-motion: reduce) {
  nav.abajo .menu-acciones > summary.boton::before,
  nav.abajo .menu-acciones .panel,
  nav.abajo .menu-acciones .fila { animation: none !important; }
}

/* La miniapp a veces se abre en un navegador ancho (el mismo enlace fuera de
   Telegram). glass.css esconde la barra de abajo desde 760px, y con el ⚙️
   viviendo en ella eso dejaba la página SIN menú y sin «Salir». En este tema
   la barra se queda siempre. */
@media (min-width: 760px) {
  nav.abajo { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .lima-estrellas { display: none; }
}

.lima-anima .lima-cabecera,
.lima-anima .lima-carta { animation: lima-entra 420ms var(--transicion) backwards; }

.lima-anima .lima-carta:nth-child(1) { animation-delay: 60ms; }

.lima-anima .lima-carta:nth-child(2) { animation-delay: 130ms; }

.lima-anima .lima-carta:nth-child(3) { animation-delay: 200ms; }

/* Quien pide menos movimiento no ve NINGUNO, y el vídeo se va del todo: no
   basta con parar la animación si detrás sigue corriendo un bucle.
   glass.css ya apaga las animaciones en general; esto se lleva también el
   vídeo, que no es una animación CSS y se le escaparía. */
@media (prefers-reduced-motion: reduce) {
  .lima-video { display: none; }
  .lima-cabecera, .lima-carta { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LA TIENDA: una pieza por grada.  [dos-modos]

   Reutiliza `lima-carta`/`lima-arte`/`lima-cuerpo` de Comunidad a propósito:
   dos pantallas con el mismo lenguaje y ni una clase de más. Lo único propio
   es el color de cada grada y cómo cae el precio.
   ═══════════════════════════════════════════════════════════════════════════ */

.lima-tienda { display: grid; gap: .7rem; margin-top: 1rem; }
.lima-carta.lima-prod { min-height: 0; }
.lima-carta.lima-prod .lima-cuerpo { gap: .5rem; }

/* Una familia de color por posición: se distinguen de un vistazo sin leer.
   Las usan la TIENDA (una por grada) y las PORTADAS de modelo del foro y del
   vault cuando no hay miniatura (una por modelo). Van juntas y no
   duplicadas a propósito: son el mismo lenguaje visual, y separarlas garantiza
   que el día que se retoque una paleta las dos pantallas dejen de parecerse sin
   que nadie lo decida. Sin esto, una rejilla de modelos sale en gris: `.lima-arte`
   es una capa vacía hasta que alguien le pone fondo.  [foro][dos-modos] */
.lima-tienda .lima-prod:nth-child(4n+1) .lima-arte,
.portada:nth-child(4n+1) {
  background: radial-gradient(100% 80% at 8% 0%, #2d3b18 0%, transparent 62%),
              radial-gradient(85% 70% at 96% 10%, #1b2b3a 0%, transparent 58%); }
.lima-tienda .lima-prod:nth-child(4n+2) .lima-arte,
.portada:nth-child(4n+2) {
  background: radial-gradient(100% 80% at 92% 0%, #3a2f14 0%, transparent 62%),
              radial-gradient(85% 70% at 4% 12%, #2a1c2f 0%, transparent 58%); }
.lima-tienda .lima-prod:nth-child(4n+3) .lima-arte,
.portada:nth-child(4n+3) {
  background: radial-gradient(100% 80% at 50% 0%, #14323a 0%, transparent 62%),
              radial-gradient(85% 70% at 6% 100%, #222a16 0%, transparent 58%); }
.lima-tienda .lima-prod:nth-child(4n+4) .lima-arte,
.portada:nth-child(4n+4) {
  background: radial-gradient(100% 80% at 10% 0%, #33184a 0%, transparent 62%),
              radial-gradient(85% 70% at 92% 8%, #133a2f 0%, transparent 58%); }

/* El precio, donde cae el ojo: grande, y el de lista tachado al lado. */
.lima-precios { display: flex; align-items: baseline; gap: .5rem; }
.lima-precio {
  font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em;
  color: var(--acento);
}
.lima-antes {
  font-size: .9rem; color: var(--tinta-tenue); text-decoration: line-through;
}
.lima-carta.lima-prod .boton { margin-top: .15rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   RECARGAR: la pantalla de depósito, con el look de Portals.  [portals]

   Dos caras: ENTRADA (monto grande + método en fichas con icono del sprite) y
   PAGO (monto exacto, datos por partes, QR, reloj). Los iconos son SVG del
   sprite `_iconos.html`, no emojis, así que se ven igual en todos los
   teléfonos y llevan su color de marca.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El atributo `hidden` vale `display:none` por defecto, pero una clase con
   `display:flex` (las de aquí abajo) lo gana por especificidad y el bloque
   oculto se queda a la vista. El navegador quiere justo esto; lo hacemos
   explícito para que mostrar/ocultar con `.hidden` funcione siempre. */
[hidden] { display: none !important; }

.lima-rc { position: relative; z-index: 1; }
.lima-rc-error { margin-bottom: 1rem; }
/* El enlace al historial, al pie de la cara de entrada. */
.lima-rc-historial { margin-top: 1.4rem; text-align: center; }

/* ── El héroe: sticker + título ───────────────────────────────────────────── */
.lima-rc-hero { text-align: center; padding: .5rem 0 1.4rem; }
.lima-rc-arte { width: 108px; height: 108px; margin: 0 auto; }
.lima-rc-arte .lima-sticker-respaldo { font-size: 3.2rem; }
.lima-rc-hero h1 { margin: .6rem 0 .2rem; font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; }
.lima-rc-hero .guia { max-width: 30ch; margin: 0 auto .8rem; color: var(--tinta-tenue); }
/* `.lima-pildora` nace ABSOLUTA (la esquina de una tarjeta de Comunidad), así
   que aquí se despegaba del héroe y se iba a la esquina de `.lima-rc` —el único
   ancestro posicionado— justo encima del aviso de error: el saldo tapaba el
   mensaje que explica por qué falló la recarga. Es el cuarto reset de lo mismo;
   los otros tres están en `.lima-pronto`, `.chica` y `.lima-pago-cab`. */
.lima-rc-hero .lima-pildora { position: static; display: inline-block; }

/* ── El monto: una cifra grande, como el «10 GRAM» de la referencia ───────── */
.lima-rc-monto { margin: .6rem 0 1.4rem; }
/* El «Mínimo $1 · máximo $10,000» quedaba pegado a las fichas de monto: se leía
   como si fuera parte de la última. Regla sobre clases que YA existen —`.guia`
   es de glass— así que no hay clase nueva que declarar. */
.lima-rc-monto .guia { margin-top: .75rem; }
.lima-monto {
  display: flex; align-items: center; justify-content: center; gap: .1rem;
  background: var(--superficie); border-radius: var(--radio);
  padding: 1rem 1.2rem; margin: .5rem 0;
  border: 1px solid var(--borde-fuerte);
}
.lima-monto-sig { font-size: 2rem; font-weight: 700; color: var(--tinta-tenue); }
.lima-monto input {
  width: 100%; min-width: 0; border: 0; background: none; outline: none;
  color: var(--tinta); font-size: 2.6rem; font-weight: 750; letter-spacing: -.02em;
  text-align: center; font-family: var(--sans);
}
.lima-monto input.malo { color: var(--error); }
.lima-monto input::placeholder { color: var(--tinta-tenue); }

.lima-chips-monto { display: flex; gap: .5rem; }
.lima-chip-monto {
  flex: 1; min-height: 44px; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--tinta-suave); font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.lima-chip-monto:active, .lima-chip-monto.lima-on {
  background: var(--acento-suave); color: var(--acento); border-color: transparent;
}

/* ── Las fichas de método ─────────────────────────────────────────────────── */
.lima-metodos { display: grid; gap: .6rem; margin: .5rem 0 1.4rem; }
.lima-metodo-in { position: absolute; opacity: 0; width: 0; height: 0; }
.lima-metodo {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem; border-radius: var(--radio-sm);
  background: var(--superficie); border: 1.5px solid var(--borde-fuerte);
  cursor: pointer; transition: border-color var(--transicion), background var(--transicion);
}
.lima-metodo-in:checked + .lima-metodo {
  border-color: var(--acento); background: var(--acento-suave);
}
.lima-metodo-in:focus-visible + .lima-metodo { outline: 2px solid var(--acento); outline-offset: 2px; }
.lima-metodo-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 15%, rgba(255,255,255,.1), rgba(255,255,255,.03) 60%);
  box-shadow: var(--lima-canto);
}
.lima-metodo-ico svg { width: 26px; height: 26px; display: block; }
.lima-metodo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.lima-metodo-txt b { font-size: .98rem; font-weight: 700; }
.lima-metodo-txt small { font-size: .78rem; color: var(--tinta-tenue); }
.lima-pildora.chica { position: static; flex: none; font-size: .58rem; padding: .24rem .5rem; }

/* ── Cripto: chips, buscador, píldoras de red ─────────────────────────────── */
.lima-rc-cry, .lima-rc-tar { margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.lima-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Los tres controles de abajo se tocan con el pulgar en una pantalla de pago:
   44px es el suelo. Iban en 33-40 y el de montos (`.lima-chip-monto`) ya lo
   cumplía, así que era un olvido, no un criterio distinto. */
.lima-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px;
  padding: .4rem .7rem; border-radius: 999px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  color: var(--tinta-suave); font-size: .85rem; font-weight: 650;
}
.lima-chip.lima-on { background: var(--acento-suave); color: var(--acento); border-color: transparent; }
.lima-chip .ci, .lima-sel-ico img, .lima-sel-ico.lima-letras {
  width: 20px; height: 20px; border-radius: 999px; object-fit: cover; flex: none;
}
.lima-chip .ci.lima-letras, .lima-sel-ico.lima-letras {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .5rem; font-weight: 700; color: #0b0c0a;
}
.lima-in {
  width: 100%; min-width: 0; box-sizing: border-box;
  background: var(--superficie); border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm); padding: .8rem 1rem;
  color: var(--tinta); font-size: 1rem; font-family: var(--sans); outline: none;
  transition: border-color var(--transicion);
}
.lima-in:focus { border-color: var(--acento); }
.lima-in.malo { border-color: var(--error); animation: lima-tiembla .3s; }
@keyframes lima-tiembla { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.lima-buscar { position: relative; }
.lima-lista {
  list-style: none; margin: .3rem 0 0; padding: .3rem;
  position: absolute; left: 0; right: 0; z-index: 5;
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm); box-shadow: 0 12px 30px rgba(0,0,0,.5);
  max-height: 240px; overflow-y: auto;
}
.lima-lista li {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px;
  padding: .5rem .6rem; border-radius: 10px; cursor: pointer;
}
.lima-lista li:hover { background: var(--acento-suave); }
.lima-sel {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border-radius: var(--radio-sm); background: var(--superficie);
}
.lima-sel-ico.lima-grande, .lima-sel-ico img { width: 30px; height: 30px; }
.lima-sel-txt { display: flex; flex-direction: column; }
.lima-sel-txt small { color: var(--tinta-tenue); font-size: .8rem; }
.lima-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.lima-pill {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; min-height: 44px;
  padding: .45rem .7rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); color: var(--tinta-suave);
  font-size: .82rem; font-weight: 650;
}
.lima-pill small { font-size: .68rem; color: var(--tinta-tenue); font-weight: 500; }
.lima-pill.lima-on { background: var(--acento-suave); color: var(--acento); border-color: transparent; }
.lima-pill.mas { justify-content: center; align-items: center; color: var(--tinta-tenue); }

/* ── Tarjeta ──────────────────────────────────────────────────────────────── */
.lima-tj-num { position: relative; }
.lima-tj-marca { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                 width: 34px; height: 22px; opacity: 0; transition: opacity var(--transicion); }
.lima-tj-marca.lima-on { opacity: 1; }
.lima-tj-marca svg, .lima-tj-marca use { width: 34px; height: 22px; }
.lima-fila2 { display: flex; gap: .6rem; }
.lima-fila2 .lima-in { flex: 1; }
.lima-tj-valor { color: var(--acento); font-weight: 700; font-size: .95rem; }

/* ── La pantalla de pago ──────────────────────────────────────────────────── */
.lima-pago {
  background: var(--superficie); border-radius: var(--radio); padding: 1.4rem;
  border: 1px solid var(--borde-fuerte);
}
.lima-pago-cab { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.lima-pago-cab b { display: block; font-size: 1.05rem; }
.lima-pago-cab .lima-pildora { position: static; margin-top: .25rem; }
.lima-pago-espera { text-align: center; padding: 1rem 0; }
.lima-pago-arte { width: 120px; height: 120px; margin: 0 auto .6rem; }
.lima-pago-arte .lima-sticker-respaldo { font-size: 3.5rem; }
.lima-pago-espera h2 { margin: .3rem 0; font-size: 1.3rem; }
.lima-pago-espera .guia { max-width: 32ch; margin: 0 auto 1rem; color: var(--tinta-tenue); }
.lima-pago-monto { text-align: center; margin-bottom: 1.2rem; }
.lima-pago-cifra {
  display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
  margin: .3rem 0;
}
.lima-pago-cifra b { font-size: 1.8rem; font-weight: 750; letter-spacing: -.01em; }
.lima-mon { width: 30px; height: 30px; }
.lima-campo-pago {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem .9rem; margin: .4rem 0; border-radius: var(--radio-sm);
  background: var(--superficie-2);
}
.lima-campo-pago.lima-vertical { flex-direction: column; align-items: stretch; }
.lima-campo-pago .lima-lb { color: var(--tinta-tenue); font-size: .82rem; }
.lima-campo-pago .val { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.lima-campo-pago code { word-break: break-all; font-size: .92rem; }
.lima-copiar {
  /* 44px de alto: es el botón que copia el MONTO EXACTO, y el monto exacto es
     lo único que identifica el pago. Fallarlo en un móvil cuesta un pago que
     no casa. Se queda en 24px de aspecto con el padding y crece por dentro. */
  flex: none; border: 0; border-radius: 999px; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: .3rem .9rem; font-size: .72rem; font-weight: 700;
  background: var(--acento); color: var(--acento-tinta);
}
.lima-copiar.lima-hecho { background: var(--exito); }
.lima-qr {
  margin: 1rem auto; width: 200px; max-width: 70%; padding: .7rem;
  background: #fff; border-radius: var(--radio-sm);
}
.lima-qr svg { width: 100%; height: auto; display: block; }
.lima-reloj { text-align: center; margin: 1rem 0 .3rem; color: var(--tinta-suave); }
.lima-reloj b { color: var(--acento); font-variant-numeric: tabular-nums; }
.lima-subir { margin-top: 1.2rem; border-top: 1px solid var(--borde-fuerte); padding-top: 1.2rem; }
.lima-adj { display: block; margin-bottom: .5rem; font-weight: 650; }
.lima-rc-cancelar { margin-top: 1rem; text-align: center; }

/* El sticker del héroe entra desde abajo con las otras piezas. */
.lima-anima .lima-rc-hero, .lima-anima .lima-rc-monto,
.lima-anima .lima-metodos, .lima-anima .lima-pago {
  animation: lima-entra 420ms var(--transicion) backwards;
}
.lima-anima .lima-rc-monto { animation-delay: 60ms; }
.lima-anima .lima-metodos { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .lima-anima .lima-rc-hero, .lima-anima .lima-rc-monto,
  .lima-anima .lima-metodos, .lima-anima .lima-pago,
  .lima-in.malo { animation: none; }
}

/* El sticker que acompaña a un TÍTULO, y no a una tarjeta ni a un cartel.
   `.lima-sticker` nace en 64px —medida de héroe— y al lado de un <h1> el dibujo
   acaba siendo más grande que la palabra: medido a 400px, dejaba la línea del
   título en 69px con «Foro» empujado hacia abajo. Las otras dos medidas que ya
   existen no valen aquí: `.lima-pronto-arte` son 150px (un cartel a pantalla
   completa) y la de 52px solo aplica dentro de `.lima-carta`.

   El respaldo encoge con la caja: el emoji de 2.2rem del tamaño base no cabe en
   34px, y se vería recortado justo en los segundos que tarda la animación en
   arrancar — o para siempre en un móvil que no pueda reproducirla. */
.lima-sticker-titulo {
  width: 34px; height: 34px;
  margin-right: .15rem; vertical-align: -.35rem;
}
.lima-sticker-titulo .lima-sticker-respaldo { font-size: 1.35rem; }

/* ── Foro: la ficha de una modelo, como perfil ─────────────────  [foro-perfil]
   La cabecera es la tarjeta de la rejilla en grande: la MISMA portada (foto
   del feed gratis o miniatura borrosa) bajo un velo, con el nombre encima en
   blanco. Debajo de la foto va el tono de su avatar (`.lima-modelo-arte`): sin
   foto, o si no llega, es lo que se ve. Lo absoluto va con top/right/bottom/
   left y no `inset`, que no existe antes de Chrome 87.
     [compat-movil] */
.lima-modelo-cab {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem;
  min-height: 11.5rem; padding: 1rem; margin: 0 0 1rem;
  border-radius: var(--radio-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--acento-suave) 0%, transparent 60%),
    radial-gradient(90% 80% at 100% 100%, var(--superficie-2) 0%, transparent 65%),
    var(--superficie);
}
/* La capa de identidad, DEBAJO de la foto: el color de su avatar (lo pone
   `foro-av-N`), al 22 % y apagándose hacia la esquina contraria. Sin ella, la
   tarjeta sin foto se quedaba a 1,01–1,13:1 de la página, sin silueta; con
   ella, medido en los seis tonos, 1,7–2,05:1 arriba a la izquierda y 1,26–1,4:1
   arriba a la derecha. */
.lima-modelo-arte {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: .22;
  background-image: radial-gradient(120% 100% at 0% 0%, transparent 0%, rgba(0, 0, 0, .55) 100%);
}
/* Una foto vertical recortada a lo ancho: el tercio de arriba, que es donde
   suele estar la cara, y no el centro. */
.lima-modelo-cab > img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  display: block;
}
/* El velo: fuerte abajo, donde van el nombre y las cifras, y nada en el sexto
   de arriba, donde se ve el color cuando no hay foto. No empieza al 45 % como
   el de `.portada`: aquí el nombre va más alto (la inicial mide 56 px), y
   sobre una foto blanca ese velo lo dejaba a 1,35–1,6:1. Con éste, 4,5–5,2:1
   (el de antes: 3,7–4,3:1). */
.lima-modelo-cab::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 85%);
  pointer-events: none;
}
.lima-modelo-fila, .lima-modelo-cifras { position: relative; z-index: 1; }
.lima-modelo-fila { display: flex; align-items: center; gap: .75rem; }
.lima-modelo-av {
  width: 56px; height: 56px; font-size: 1.45rem;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.lima-modelo-av img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
/* La foto de perfil que LLENA una tarjeta del foro. Las que se guardan son los
   originales, y muchas son verticales de teléfono (1170×2532): centradas, la
   tarjeta de 4:5 se quedaba con el torso y cortaba la cara. Encuadrada hacia
   arriba, que es donde va la cara en un retrato; a una cuadrada no le cambia
   nada (solo se le recortan los lados).  [foro-perfil] */
.portada > img.lima-portada-cara { object-position: center 20%; }
/* La foto de perfil en círculo, encima del banner. Solo sale cuando las dos
   llegaron: si no hay banner, la foto ya llena la tarjeta. */
.portada > .lima-portada-avatar {
  position: absolute; top: .55rem; left: .55rem; z-index: 1;
  width: 44px; height: 44px; border-radius: 999px; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45);
}
.portada > .lima-portada-avatar img {
  position: static; width: 100%; height: 100%; object-fit: cover; display: block;
}
.lima-modelo-cab > img.lima-portada-cara { object-position: center 20%; }

/* ── Cuántos sets de cada tipo tiene una modelo ───────────  [pildoras-tipo]
   Píldoras en la esquina de ARRIBA de la tarjeta: «5 PPV · 14 Feed · 10 Chat»
   en el vault, «5 PPVs» en el foro. Arriba y no bajo el nombre: el bloque de
   texto va anclado abajo, y una fila más en solo algunas tarjetas dejaba los
   nombres de una misma fila a distinta altura. El PPV, en el acento, como en
   las casillas del vault (`.tesela-origen-paid`); los demás, neutros. */
.lima-pildoras {
  position: absolute; top: .45rem; left: .45rem; right: .45rem; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .25rem; pointer-events: none;
}
.lima-pildoras-der { justify-content: flex-end; }
.lima-tipo {
  font-size: .68rem; font-weight: 800; line-height: 1.25; white-space: nowrap;
  padding: .16rem .46rem; border-radius: 999px;
  color: #fff; background: rgba(0, 0, 0, .6);
}
.lima-tipo-paid { background: var(--acento); color: var(--acento-tinta); }

/* ── El tutorial de la extensión ─────────────────────  [descargas-extension]
   Pasos numerados, uno por tarjeta, con su vídeo debajo cuando lo tiene. El
   número en un disco del acento: se sigue con el dedo aunque no se lea. */
.lima-tutorial { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .7rem; }
.lima-tutorial-paso { padding: 1.1rem 1.2rem; }
.lima-tutorial-paso h3 {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .4rem; font-size: 1rem; line-height: 1.25;
}
.lima-tutorial-n {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento); color: var(--acento-tinta);
  font-size: .85rem; font-weight: 800;
}
.lima-tutorial-paso .guia { margin: 0; overflow-wrap: anywhere; }
.lima-tutorial-paso video {
  display: block; width: 100%; margin-top: .8rem;
  border-radius: var(--radio-sm); background: #000;
}
.lima-modelo-nombre { flex: 1; min-width: 0; }
.lima-modelo-nombre h1 {
  margin: 0; font-size: 1.45rem; line-height: 1.15; color: #fff;
  overflow-wrap: anywhere;
}
.lima-modelo-nombre p {
  margin: .15rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .78);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Las cifras bajo el nombre, no bajo la inicial; cada una entera en su renglón. */
.lima-modelo-cifras {
  margin: 0; padding-left: calc(56px + .75rem);
  font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .78);
}
.lima-modelo-cifras span { white-space: nowrap; }
.lima-modelo-cifras b { color: #fff; font-weight: 750; }
/* El ♥ sobre la foto: el gris de `.corazon` se perdía sobre una foto clara. */
.lima-modelo-cab .corazon { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .22); color: #fff; }
.lima-modelo-cab .tema-cifra { color: #fff; }
.lima-modelo-cab .corazon-on { color: #ff5d7a; border-color: rgba(255, 93, 122, .6); }
@media (min-width: 760px) {
  .lima-modelo-cab { min-height: 13.5rem; padding: 1.25rem; }
}

/* Las secciones de Inicio: el título y su «Ver todos», un toque de 44 px que no
   mueve el renglón. */
.lima-modelo-sec {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: 1.4rem 0 .45rem;
}
.lima-modelo-sec h2 { margin: 0; flex: 1; min-width: 0; }
.lima-modelo-sec a {
  flex: none; display: inline-flex; align-items: center; gap: .25rem;
  min-height: 44px; padding: 0 .35rem; margin-right: -.35rem;
  font-size: .85rem; font-weight: 650; text-decoration: none;
}
/* Lo que sigue a una lista —el «Nuevo tema» de Inicio, la nota de apodos, la
   del blur bajo los sets— quedaba pegado a la última fila: se vio en la
   captura, no en el código. */
.temas + .nuevo-tema, .temas + .aviso, .temas + .guia,
.sets + .guia, .lima-modelo-sets + .guia { margin-top: .9rem; }
/* El principio de la apertura, en la tarjeta del Tema general. */
.lima-tema-extracto {
  font-size: .82rem; line-height: 1.35; color: var(--tinta-suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Ocho miniaturas: cuatro por fila en el teléfono, dos filas justas (en la web
   ancha, una sola: web.css). Son las `.tesela` del vault y de la ficha de un
   set, la misma familia; el candado baja a su esquina y encoge con la casilla. */
.lima-modelo-sets {
  display: grid; gap: 3px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: var(--radio); overflow: hidden;
}
.lima-modelo-sets .set-candado { top: auto; bottom: .3rem; right: .3rem; width: 22px; height: 22px; }
.lima-modelo-sets .set-candado svg { width: 12px; height: 12px; }
/* El foco de cada casilla, DENTRO de ella: la rejilla recorta lo de fuera
   (`overflow: hidden`, 3 px de hueco) y la <img> absoluta tapa lo que la casilla
   pinte en su caja, así que un `outline-offset` negativo o un `box-shadow`
   inset en la `.tesela` dejaban 0 px de anillo (medido). Un ::after por encima
   de la imagen sí se ve en los cuatro lados. En ::after porque ::before es el
   respaldo de `aspect-ratio` (glass.css); sin `inset:` abreviado (Chrome 87). */
.lima-modelo-sets .tesela:focus-visible::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
  pointer-events: none; box-shadow: inset 0 0 0 2px var(--acento);
}

/* ── Mi Cuenta ────────────────────────────────────────────────────────────────
   La misma página en la web y en la miniapp, así que vive aquí y no en web.css.
   Casi todo son piezas de la casa (tarjeta, lista, fila, chips, píldoras); lo
   propio es la cabecera «Así te ven en el foro» —el avatar del foro, más
   grande— y el aire entre una tarjeta y la lista que la sigue.  [cuenta] */
.lima-cuenta-sec { scroll-margin-top: 5rem; }
.lima-cuenta-quien { display: flex; align-items: center; gap: .85rem; margin-top: .7rem; }
.lima-cuenta-quien .foro-av { width: 52px; height: 52px; font-size: 1.35rem; }
.lima-cuenta-quien b { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.lima-cuenta-quien .detalle {
  display: block; margin-top: .1rem;
  color: var(--tinta-tenue); font-size: .82rem;
}
.lima-cuenta-foto { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 0; }
.lima-cuenta-foto img {
  width: 32px; height: 32px; flex: none;
  border-radius: 999px; object-fit: cover;
}
.lima-cuenta-lista { margin-top: .55rem; }
.lima-cuenta-chips { margin: .5rem 0 .3rem; }
/* Los idiomas son enlaces (la ruta `/idioma` de la cabecera): sin esto el chip
   salía subrayado como un enlace suelto. */
.lima-cuenta-chips a.chip { text-decoration: none; }
/* «Cambiar correo»: medía 26 px de alto y su punteado cruzaba la tarjeta
   entera. Sin `display:flex`, como `.fallos`: así conserva el triángulo que
   dice que se despliega, y los 44 px los da el relleno. */
.lima-cuenta-plegable > summary {
  cursor: pointer; min-height: 44px; padding: .7rem 0 .5rem;
  color: var(--acento); font-weight: 650; font-size: .9rem;
}
/* «¿Olvidaste tu contraseña?» medía 20 px en la miniapp. Los 44 px con el
   punteado pegado al TEXTO, como el enlace suelto de web.css: con el
   `border-bottom` de `.enlace` quedaría al pie de la caja.  [cuenta]
   «Vincula tu Telegram para participar», bajo el apodo, medía 21 px y salía
   gris: `.lima-cuenta-quien .detalle` (0,2,0) le ganaba a `a.enlace`. Este
   selector pesa (0,2,1) y le devuelve el tamaño y el color de enlace. */
.lima-cuenta-olvide a, .lima-cuenta-quien a.enlace {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 0; padding-bottom: 0; color: var(--acento);
  text-decoration: underline dotted; text-underline-offset: 3px;
}

/* ── Desbloquear un set con puntos, en su ficha ──────────  [foro-perfil][puntos]
   La tarjeta con el precio y sus dos formas de pagar, en las DOS superficies.
   Los botones comparten fila si caben y se apilan en el móvil; el de la llave
   lleva debajo lo que cubre y lo que queda. 48px de alto: con dos líneas, 44
   las apretaba. */
.lima-dbq { margin: 0 0 1rem; }
.lima-dbq h2 {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .35rem; font-size: 1.05rem; line-height: 1.25;
}
.lima-dbq h2 svg, .lima-dbq-no svg { width: 18px; height: 18px; flex: none; color: var(--acento); }
.lima-dbq .guia { margin: 0 0 .35rem; font-size: .84rem; }
.lima-dbq-saldo { margin: 0 0 .8rem; font-size: .86rem; font-weight: 650; color: var(--tinta-suave); }
.lima-dbq-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.lima-dbq-botones form { flex: 1 1 13rem; display: flex; margin: 0; }
.lima-dbq-botones .boton {
  flex: 1; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
}
.lima-dbq-botones .boton small { font-size: .74rem; font-weight: 600; opacity: .85; }
.lima-dbq-falta { margin: 0 0 .6rem; font-weight: 750; }
.lima-dbq-no { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 1rem; }

/* El «sí» antes de gastar puntos: un aviso propio, no `confirm()`, que dentro
   de Telegram sale feo o no sale. La misma forma que el del Inventario
   (`.pts-dialogo`, que vive en el <style> de su pantalla). */
.lima-dialogo {
  border: none; border-radius: 22px; padding: 0;
  max-width: 340px; width: calc(100% - 2rem);
  background: var(--superficie); color: var(--tinta); text-align: center;
}
.lima-dialogo::backdrop { background: rgba(0, 0, 0, .6); }
/* Va suelto dentro de <main>: sin esto hereda la entrada escalonada de la página
   (`.lima-anima main > *`), que arranca al ABRIRLO, y el aviso salía con opacidad
   0 mientras el fondo ya estaba oscuro. Medido con getComputedStyle. */
.lima-anima main > .lima-dialogo { animation: none; }
.lima-dialogo-caja { padding: 1.3rem 1.2rem 1.1rem; }
.lima-dialogo-emoji { font-size: 3rem; line-height: 1; margin-bottom: .4rem; }
.lima-dialogo-titulo { margin: .2rem 0 .5rem; font-size: 1.05rem; font-weight: 800; }
.lima-dialogo .guia { margin: 0 0 .5rem; font-size: .84rem; }
.lima-dialogo-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }

/* ── El perfil del foro: marco, regalo, color del nombre, título y rango ──────
   [foro-perfil] Spec 2026-10-09 §5.1. Lo pintan las macros `avatar` y `nombre`
   de `_foro.html` con lo que `datos.pinta_perfil` deja ver a quien mira, en
   las DOS superficies: por eso vive aquí y no en web.css.

   Los colores del nombre se midieron contra las tarjetas donde se escriben:
   --superficie (#161815: la respuesta, la apertura, la fila de un tema) y
   --superficie-2 (#1f221e: la fila con el ratón encima, en la web). Hace falta
   4.5:1 y el que menos tiene es el coral, 8.0 y 7.2. Del oro y del arcoíris
   cuenta CADA parada del degradado: ≥ 9.6/8.7 y ≥ 7.9/7.1. Los lee de aquí y
   los vuelve a medir `test_foro_perfiles.py`. */
.lima-nombre-lima     { color: #b9d95e; }
.lima-nombre-celeste  { color: #5cc8ff; }
.lima-nombre-rosa     { color: #ff9ec4; }
.lima-nombre-coral    { color: #ff8f73; }
.lima-nombre-violeta  { color: #c3a6ff; }
.lima-nombre-menta    { color: #6fe0c4; }
/* El oro y el arcoíris van en degradado recortado al texto. Donde el navegador
   no sabe recortarlo se quedan en su color liso: sin la guarda, el texto sería
   transparente sobre un rectángulo pintado. */
.lima-nombre-oro      { color: #f2c14e; }
.lima-nombre-arcoiris { color: #ffc75a; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lima-nombre-oro, .lima-nombre-arcoiris {
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .lima-nombre-oro { background-image: linear-gradient(90deg, #ffe08a, #f0b43c 55%, #ffd36b); }
  .lima-nombre-arcoiris {
    background-image: linear-gradient(90deg, #ff8a8a, #ffc75a, #b9d95e, #6fe0c4, #7cc6ff, #c3a6ff, #ff8a8a);
    background-size: 200% 100%;
    animation: lima-arcoiris 6s linear infinite;
  }
}
@keyframes lima-arcoiris { to { background-position: 200% 0; } }

/* El avatar con su marco y su regalo. La caja es la del avatar de siempre; el
   anillo va POR FUERA (un ::before 4 px mayor, detrás) y entre los dos queda un
   filete del color de la tarjeta. Sin `inset:` abreviado: no existe antes de
   Chrome 87.  [compat-movil] */
.lima-av { position: relative; flex: none; display: inline-flex; border-radius: 999px; }
/* `.respuesta` estira a sus hijos (fila flex sin `align-items`): el avatar de
   siempre se libraba por su alto fijo, pero la caja de aquí no lo tiene, y el
   anillo salía como una cápsula de toda la altura de la respuesta. Se vio en la
   captura. */
.respuesta > .lima-av { align-self: flex-start; }
.lima-av > .foro-av { position: relative; }
.lima-av[class*="lima-marco-"] > .foro-av { box-shadow: 0 0 0 2px var(--superficie); }
.lima-av[class*="lima-marco-"]::before {
  content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px;
  border-radius: 999px; background: var(--lima-marco, #b9d95e);
}
.lima-marco-lima     { --lima-marco: #b9d95e; }
.lima-marco-oro      { --lima-marco: linear-gradient(135deg, #fff0a8, #e3a92b 45%, #ffd567 70%, #b8801c); }
/* El diamante brilla sin moverse: destellos blancos en el giro y un halo. */
.lima-marco-diamante {
  --lima-marco: conic-gradient(from 200deg, #e9fbff, #8fd8ff, #ffffff, #a9b8ff, #e9fbff,
                               #8fd8ff, #ffffff, #a9b8ff, #e9fbff);
}
.lima-marco-diamante::before { box-shadow: 0 0 6px rgba(190, 232, 255, .55); }
/* El neón gira, y es el único marco que se mueve. */
.lima-marco-neon     { --lima-marco: conic-gradient(#ff3df2, #3dfcff, #b9ff3d, #ff3df2); }
.lima-marco-neon::before {
  box-shadow: 0 0 9px rgba(61, 252, 255, .55);
  animation: lima-neon 2.6s linear infinite;
}
@keyframes lima-neon { to { transform: rotate(360deg); } }

/* El regalo, en la esquina de abajo a la derecha, sobre un disco del color de
   la tarjeta. El especial es un sticker de Telegram (`data-tgs-toque`) que
   lima.js pinta quieto y mueve al tocarlo o al pasar el ratón; mientras se
   mueve, crece. Por encima del nombre de al lado: va posicionado y después. */
.lima-av-regalo {
  position: absolute; right: -7px; bottom: -7px;
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--superficie-2); box-shadow: 0 0 0 2px var(--superficie);
  font-family: var(--emoji); font-size: .78rem; line-height: 1;
}
.lima-av-regalo.lima-sticker {
  width: 22px; height: 22px; right: -8px; bottom: -8px;
  background: none; box-shadow: none;
  transition: transform var(--transicion);
}
.lima-av-regalo .lima-sticker-respaldo { font-size: .95rem; }
.lima-av-regalo.lima-juega { transform: scale(1.7); }

/* El nombre: el visible con su color, el rango al lado y el título debajo. Las
   píldoras son las de la casa: el rango gris (`neutra`, 7.0:1), «tú» en lima
   (`tuyo`, 10.0:1) y el título en violeta (9.9:1). */
.lima-autor { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .2rem; min-width: 0; }
.lima-autor-linea { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-width: 0; }
.lima-autor-nombre { overflow-wrap: anywhere; }
/* La fecha, a la altura del NOMBRE y no a media altura entre el nombre y el
   título (la cabecera centra a sus hijos). */
.respuesta-cab > .lima-autor, .respuesta-cab > .lima-autor + .detalle { align-self: baseline; }
.lima-autor .pildora { padding: .14rem .5rem; font-size: .68rem; }
.lima-titulo { color: #d8c3ff; background: #251f38; }
/* En una línea de detalle (la fila de un tema, quién tiene un set), seguido. */
.lima-autor-compacto, .lima-autor-compacto .lima-autor-linea { display: inline; }
.lima-autor-compacto .pildora { margin-left: .25rem; padding: .04rem .4rem; }
/* Quién tiene un set: el avatar a la medida de su fila. */
.set-ficha dd .foro-av { width: 24px; height: 24px; font-size: .72rem; }

@media (prefers-reduced-motion: reduce) {
  .lima-nombre-arcoiris, .lima-marco-neon::before { animation: none; }
  .lima-av-regalo.lima-juega { transform: none; }
}

/* ── Mi Cuenta: el perfil del foro ─────────────────────────────  [foro-perfil]
   Spec 2026-10-09 §4.2, en las DOS superficies. Una rejilla por clase, y cada
   casilla dice su estado: en uso (filete lima), tuya (toda la casilla es el
   botón), se gana (su requisito) o con puntos (su precio, y «Comprar» si
   alcanza). Las casillas miden lo mismo pase lo que pase dentro: la muestra
   tiene alto fijo (el sticker, al cargar, no empuja nada), el filete existe
   siempre (transparente si no está en uso) y el ratón solo cambia el fondo. */
.lima-pf-saldo { margin: .9rem 0 0; font-weight: 650; }
.lima-pf-h { margin: 1.3rem 0 .55rem; font-size: .95rem; }
.lima-pf-nombre { margin-top: 1rem; }
.lima-pf-nombre .lima-pf-h { margin-top: 0; }
.lima-pf-reglas {
  margin: .5rem 0 .9rem; padding-left: 1.1rem;
  color: var(--tinta-suave); font-size: .84rem; line-height: 1.45;
}
.lima-pf-reglas li + li { margin-top: .25rem; }
.lima-pf-nombre form + form { margin-top: .5rem; }
.lima-pf-rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: .5rem;
}
.lima-pf-op, .lima-pf-op > form { display: flex; min-width: 0; margin: 0; }
.lima-pf-op > form { flex: 1; }
.lima-pf-caja {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .45rem .6rem;
  border: 1px solid transparent; border-radius: var(--radio-sm);
  background: var(--superficie); color: var(--tinta);
  font: inherit; text-align: center;
}
button.lima-pf-caja { cursor: pointer; transition: background var(--transicion); }
button.lima-pf-caja:hover { background: var(--superficie-2); }
.lima-pf-puesta > .lima-pf-caja { border-color: var(--acento); }
.lima-pf-muestra {
  display: flex; align-items: center; justify-content: center;
  height: 48px; max-width: 100%;
}
.lima-pf-color {
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .92rem;
}
.lima-pf-emoji { font-family: var(--emoji); font-size: 1.9rem; line-height: 1; }
.lima-pf-regalo .lima-sticker { width: 44px; height: 44px; }
.lima-pf-regalo .lima-sticker-respaldo { font-size: 1.9rem; }
/* El título, en dos líneas si no cabe: glass le pone `nowrap`, y «Cazador de
   PPV» se salía de la casilla en el móvil. */
.lima-pf-muestra .pildora { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.lima-pf-guia { margin: -.25rem 0 .55rem; font-size: .82rem; }
.lima-pf-nom { font-size: .8rem; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.lima-pf-estado { margin-top: auto; color: var(--tinta-tenue); font-size: .74rem; font-weight: 650; }
.lima-pf-puesta .lima-pf-estado, .lima-pf-tuya .lima-pf-estado { color: var(--acento); }
/* Lo que todavía no es tuyo, apagado como en el Inventario: a todo color, solo
   el candado de la última línea lo distinguía de lo que sí se pone. */
.lima-pf-se_gana .lima-pf-muestra { filter: grayscale(1); opacity: .5; }
.lima-pf-caja > form { width: 100%; margin: 0; }
.lima-pf-caja .boton { width: 100%; min-height: 44px; padding: .4rem .5rem; }
/* La colección entera, en el Inventario, debajo de la rejilla del regalo. El
   interruptor del rango que vivía aquí se fue: el nivel sale siempre. */
.lima-pf-coleccion { margin-top: .6rem; }

/* ─── Solicitudes del foro (21 oct 2026)  [foro-solicitudes] ──────────────────
   Tres bloques en el orden en que se usan: la semana, pedir y el ranking. El
   ranking es una carrera: la barra de cada fila mide sus votos contra los de la
   que va primera. Todo control táctil mide 44px como mínimo. */
.lima-sol-semana, .lima-sol-pedir { margin-bottom: 1rem; }
.lima-sol-semana h2, .lima-sol-pedir h2 { margin: 0; font-size: 1.05rem; }
.lima-sol-semana-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.lima-sol-reloj {
  display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap;
  padding: .35rem .75rem; border-radius: 999px; font-size: .82rem;
  background: var(--acento-suave); color: var(--acento);
}
.lima-sol-reloj b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.lima-sol-bajada { margin: .55rem 0 0; color: var(--tinta-suave); font-size: .9rem; line-height: 1.5; }
.lima-sol-votos {
  display: flex; align-items: center; gap: .6rem; margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--borde-fuerte); font-size: .88rem; color: var(--tinta-suave);
}
.lima-sol-votos b { color: var(--tinta); }
.lima-sol-corazones { display: inline-flex; gap: .2rem; }
.lima-sol-corazones svg { width: 20px; height: 20px; display: block; }
.lima-sol-lleno { color: #ff5d7a; }
.lima-sol-gastado { color: var(--tinta-tenue); opacity: .55; }

.lima-sol-nota { display: block; color: var(--tinta-suave); font-size: .82rem; line-height: 1.45; margin: .2rem 0 0; }
.lima-sol-etiqueta { display: block; margin: .55rem 0 .5rem; color: var(--tinta-suave); font-size: .88rem; line-height: 1.45; }
.lima-sol-fila-form { display: flex; gap: .5rem; align-items: stretch; }
.lima-sol-arroba { position: relative; flex: 1; min-width: 0; }
.lima-sol-arroba > span {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--tinta-tenue); font-weight: 700; pointer-events: none;
}
.lima-sol-arroba .lima-in { padding-left: 2rem; min-height: 48px; }
.lima-sol-fila-form .boton { min-height: 48px; padding: 0 1.3rem; flex: 0 0 auto; }
.lima-sol-fila-form .boton[disabled] { opacity: .6; }

.lima-sol-vista {
  display: flex; align-items: center; gap: .7rem; margin-top: .7rem;
  padding: .6rem .7rem; border-radius: var(--radio-sm); background: var(--superficie-2);
}
.lima-sol-vista[hidden] { display: none; }
.lima-sol-vista img, .lima-sol-vista [data-inicial] {
  flex: 0 0 2.8rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--borde-fuerte); font-weight: 700;
}
.lima-sol-vista [hidden] { display: none; }
.lima-sol-vista-txt { min-width: 0; overflow-wrap: anywhere; }
.lima-sol-vista-txt [data-nombre] { color: var(--tinta-suave); }

.lima-sol-adjuntar {
  display: flex; align-items: center; gap: .75rem; margin-top: .7rem; min-height: 56px;
  padding: .6rem .9rem; border-radius: var(--radio-sm); cursor: pointer;
  border: 1.5px dashed var(--borde-fuerte); color: var(--tinta);
  transition: border-color var(--transicion), background var(--transicion);
}
.lima-sol-adjuntar:hover, .lima-sol-adjuntar:focus-within { border-color: var(--acento); background: var(--acento-suave); }
.lima-sol-adjuntar > svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--acento); }
.lima-sol-adjuntar #sol-foto-nombre { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.lima-sol-foto-vista { display: block; max-width: 100%; max-height: 200px; margin-top: .6rem; border-radius: var(--radio-sm); object-fit: cover; }
.lima-sol-foto-vista[hidden] { display: none; }

.lima-sol-hecho { display: flex; gap: .8rem; align-items: flex-start; }
.lima-sol-hecho-ic {
  flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800;
  background: var(--exito-suave); color: var(--exito);
}

.lima-sol-ranking-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 1.4rem 0 .6rem; }
.lima-sol-ranking-cab h2 { margin: 0; }
.lima-sol-ranking, .lima-sol-ganadas { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.lima-sol-fila, .lima-sol-ganada {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem;
  margin-bottom: .5rem; padding: .75rem .85rem;
}
.lima-sol-fila.lima-sol-lider { box-shadow: inset 0 0 0 1.5px var(--acento); }
.lima-sol-pos {
  flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .8rem; font-weight: 800;
  background: var(--superficie-2); color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}
.lima-sol-p1 { background: #e9c25a; color: #2a2006; }
.lima-sol-p2 { background: #c9ced6; color: #1d2026; }
.lima-sol-p3 { background: #d39361; color: #2a1607; }
.lima-sol-cara {
  flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--borde-fuerte); font-weight: 700;
}
.lima-sol-cara img { width: 100%; height: 100%; object-fit: cover; }
.lima-sol-cuerpo { flex: 1 1 7rem; min-width: 0; }
.lima-sol-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; }
.lima-sol-nombre b, .lima-sol-ganada b { overflow-wrap: anywhere; }
.lima-sol-chip {
  display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
  background: var(--superficie-2); color: var(--tinta-suave);
}
.lima-sol-chip-lider { background: var(--acento); color: var(--acento-tinta); }
.lima-sol-chip-camino { background: var(--alerta-suave); color: var(--alerta); }
a.lima-sol-chip-ok { background: var(--acento-suave); color: var(--acento); min-height: 44px; padding: .3rem .8rem; text-decoration: none; }
.lima-sol-barra { margin-top: .45rem; height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.lima-sol-barra > span { display: block; height: 100%; border-radius: inherit; background: #ff5d7a; transition: width .4s ease; }
.lima-sol-lider .lima-sol-barra > span { background: var(--acento); }
/* La captura: miniatura con un «+» que la abre grande en la misma tarjeta. */
.lima-sol-foto { flex: 0 0 auto; }
.lima-sol-foto > summary {
  list-style: none; cursor: pointer; position: relative; display: block;
  width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
}
.lima-sol-foto > summary::-webkit-details-marker { display: none; }
.lima-sol-foto > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lima-sol-foto > summary > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lima-sol-foto-mas {
  position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--acento); color: var(--acento-tinta);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; line-height: 1;
}
.lima-sol-foto-mas::before { content: "+"; }
.lima-sol-foto[open] { flex: 1 0 100%; order: 20; }
.lima-sol-foto[open] > summary { width: auto; height: auto; overflow: visible; display: inline-flex;
  align-items: center; gap: .4rem; min-height: 44px; color: var(--tinta-suave); font-size: .82rem; }
.lima-sol-foto[open] > summary > img { display: none; }
.lima-sol-foto[open] .lima-sol-foto-mas { position: static; }
.lima-sol-foto[open] .lima-sol-foto-mas::before { content: "\2212"; }
.lima-sol-foto[open] > summary::after { content: attr(data-cerrar); }
.lima-sol-foto-grande {
  display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain;
  border-radius: var(--radio-sm); background: #000; margin-top: .2rem;
}
.lima-sol-voto { min-width: 56px; min-height: 44px; justify-content: center; font-variant-numeric: tabular-nums; }
.lima-sol-voto[disabled] { opacity: .45; cursor: not-allowed; }
.lima-sol-dueno { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.lima-sol-dueno form { margin: 0; }
.lima-sol-dueno .boton { min-height: 40px; padding: .4rem .9rem; font-size: .82rem; }
.lima-sol-vacio { display: flex; align-items: center; gap: .8rem; color: var(--tinta-suave); }
.lima-sol-vacio span { font-size: 1.8rem; }
.lima-sol-vacio p { margin: 0; }
.lima-sol-sub { margin: 1.4rem 0 .6rem; }
@media (prefers-reduced-motion: reduce) { .lima-sol-barra > span { transition: none; } }

/* ─── El foro por categorías (21 oct 2026)  [foro-hilos] ──────────────────────
   Índice de secciones plegables, lista de hilos, hilo y Top. Miniapp primero:
   todo lo que se toca mide 44px o más y nada se sale a 400px. En escritorio
   (la web) las cifras y la última actividad van en columnas, como un foro
   clásico. */
.lima-fh-dia { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.lima-fh-dia > span { font-size: 1.7rem; line-height: 1; }
.lima-fh-dia p { margin: 0; flex: 1; min-width: 0; font-weight: 650; }
.lima-fh-dia form { margin: 0; }
.lima-fh-buscar { margin: 0 0 1rem; }
.lima-fh-buscar .lima-in { min-height: 48px; }
.lima-fh-sub { margin: 1.2rem 0 .6rem; font-size: 1rem; }
.lima-fh-tenue { color: var(--tinta-tenue); font-weight: 400; }

.lima-fh-seccion { background: var(--superficie); border-radius: var(--radio); margin-bottom: 1rem; overflow: hidden; }
.lima-fh-seccion > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: .7rem 1.1rem; font-weight: 700; font-size: .95rem;
  background: linear-gradient(90deg, var(--acento-suave), transparent);
  border-bottom: 1px solid var(--borde-fuerte);
}
.lima-fh-seccion > summary::-webkit-details-marker { display: none; }
.lima-fh-seccion > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.lima-fh-chev { width: 10px; height: 10px; border-right: 2px solid var(--acento); border-bottom: 2px solid var(--acento);
  transform: rotate(45deg); transition: transform var(--transicion); margin-right: .2rem; }
.lima-fh-seccion:not([open]) .lima-fh-chev { transform: rotate(-45deg); }

.lima-fh-cat {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .25rem .85rem; align-items: center;
  padding: .9rem 1.1rem; border-top: 1px solid var(--borde-fuerte); color: inherit; text-decoration: none;
  min-height: 64px;
}
.lima-fh-seccion > summary + .lima-fh-cat { border-top: 0; }
.lima-fh-cat:hover, .lima-fh-cat:focus-visible { background: var(--superficie-2); }
.lima-fh-ic {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; color: #fff; grid-row: span 3; align-self: start;
}
.lima-fh-ic-top { background: var(--alerta-suave); font-size: 1.3rem; }
.lima-fh-ic-sol { background: var(--acento); font-size: 1.3rem; }
.lima-fh-cat-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lima-fh-cat-txt b { font-size: 1rem; }
.lima-fh-frase { color: var(--tinta-suave); font-size: .8rem; line-height: 1.4; }
.lima-fh-num { color: var(--tinta-suave); font-size: .8rem; }
.lima-fh-num b { color: var(--tinta); }
.lima-fh-num i { font-style: normal; }
.lima-fh-ult { display: flex; align-items: center; gap: .55rem; min-width: 0; font-size: .8rem; }
.lima-fh-ult:empty { display: none; }
.lima-fh-mini {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem;
}
.lima-fh-mini img, .lima-fh-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lima-fh-ult-txt { display: flex; flex-direction: column; min-width: 0; }
.lima-fh-ult-txt b, .lima-fh-ult-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lima-fh-pide { color: var(--acento); font-weight: 600; }

.lima-fh-volver {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2rem; margin-bottom: .2rem;
  color: var(--tinta-suave); font-weight: 600; text-decoration: none;
}
.lima-fh-cab { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.lima-fh-cab .lima-fh-ic { flex: 0 0 52px; width: 52px; height: 52px; }
.lima-fh-cab h1 { margin: 0; }
.lima-fh-cab .guia { margin: .2rem 0 0; }

.lima-fh-abrir { margin-bottom: 1rem; }
.lima-fh-abrir > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  min-height: 44px; font-weight: 700;
}
.lima-fh-abrir > summary::-webkit-details-marker { display: none; }
.lima-fh-mas {
  width: 28px; height: 28px; border-radius: 50%; background: var(--acento); color: var(--acento-tinta);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
  transition: transform var(--transicion);
}
.lima-fh-abrir[open] .lima-fh-mas { transform: rotate(45deg); }
.lima-fh-texto { min-height: 96px; resize: vertical; font-family: var(--sans); line-height: 1.45; }
.lima-fh-enviar { width: 100%; min-height: 48px; margin-top: .7rem; }

.lima-fh-lista { padding: 0; overflow: hidden; }
.lima-fh-fila {
  display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; min-height: 64px;
  border-top: 1px solid var(--borde-fuerte); color: inherit; text-decoration: none;
}
.lima-fh-fila:first-child { border-top: 0; }
.lima-fh-fila:hover, .lima-fh-fila:focus-visible { background: var(--superficie-2); }
.lima-fh-fijada { box-shadow: inset 3px 0 0 var(--acento); }
.lima-fh-puesto {
  flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: .8rem; font-weight: 800; background: var(--superficie-2); color: var(--tinta-suave);
}
.lima-fh-puesto.lima-sol-p1 { background: #e9c25a; color: #2a2006; }
.lima-fh-puesto.lima-sol-p2 { background: #c9ced6; color: #1d2026; }
.lima-fh-puesto.lima-sol-p3 { background: #d39361; color: #2a1607; }
.lima-fh-cara {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem;
}
.lima-fh-cara-xl { flex-basis: 72px; width: 72px; height: 72px; font-size: 1.6rem; }
.lima-fh-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.lima-fh-titulo { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.lima-fh-titulo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lima-fh-etiqueta {
  flex: 0 0 auto; display: inline-flex; align-items: center; padding: .1rem .45rem; border-radius: 6px;
  font-size: .68rem; font-weight: 700; color: #fff;
}
.lima-fh-pin { flex: 0 0 auto; font-size: .8rem; }
.lima-fh-meta { color: var(--tinta-tenue); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lima-fh-cifras { display: flex; gap: .8rem; color: var(--tinta-suave); font-size: .76rem; }
.lima-fh-cifras > span { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.lima-fh-cifras svg { width: 14px; height: 14px; }
.lima-fh-cifras .corazon-on { color: #ff5d7a; }
.lima-fh-ultimo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  font-size: .74rem; color: var(--tinta-suave); text-align: right; max-width: 6.5rem; }
.lima-fh-ultimo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lima-fh-vacia { text-align: center; color: var(--tinta-suave); }
.lima-fh-vacia p { margin: 0 0 .8rem; }
.lima-fh-vacia .boton { min-height: 44px; }
.lima-fh-paginas { display: flex; justify-content: space-between; gap: .5rem; margin: .8rem 0 1.2rem; }
.lima-fh-paginas .boton { min-height: 44px; }

.lima-fh-hilo-cab { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1rem; }
.lima-fh-hilo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.lima-fh-hilo-txt .lima-fh-etiqueta { align-self: flex-start; }
.lima-fh-hilo-txt h1 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.lima-fh-ver-of { display: flex; align-items: center; min-height: 48px; margin-bottom: 1rem;
  color: var(--acento); font-weight: 650; text-decoration: none; }
.lima-fh-dueno { margin-bottom: 1rem; }
.lima-fh-dueno .boton { min-height: 44px; }
.lima-fh-foto-dueno { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.lima-fh-foto-dueno input[type=file] { max-width: 100%; font-size: .8rem; }
.lima-fh-resp { list-style: none; padding: 0; margin: 0 0 1rem; }
.lima-fh-resp > li { margin-bottom: .5rem; }
.lima-fh-resp-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.lima-fh-resp-cab > .lima-fh-tenue { margin-left: auto; font-size: .76rem; }
.lima-fh-resp-txt { margin: .5rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.lima-fh-responder { margin-bottom: 1rem; }

@media (min-width: 760px) {
  .lima-fh-cat { grid-template-columns: 44px minmax(0, 1fr) 190px 260px; }
  .lima-fh-ic { grid-row: auto; }
  .lima-fh-num { display: flex; justify-content: center; gap: 1.2rem; text-align: center;
    border-left: 1px solid var(--borde-fuerte); border-right: 1px solid var(--borde-fuerte); padding: 0 .6rem; }
  .lima-fh-num > span { display: flex; flex-direction: column; font-size: .72rem; }
  .lima-fh-num > span > b { font-size: 1rem; }
  .lima-fh-num i { display: none; }
  .lima-fh-ultimo { max-width: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lima-fh-chev, .lima-fh-mas { transition: none; }
}

/* Solicitudes: «Pide una modelo» plegado y la plataforma como botones.
   [foro-solicitudes][foro-hilos] */
.lima-sol-plegable > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  min-height: 44px; font-weight: 700; font-size: 1.05rem;
}
.lima-sol-plegable > summary::-webkit-details-marker { display: none; }
.lima-sol-plegable[open] .lima-fh-mas { transform: rotate(45deg); }
.lima-sol-plats { border: 0; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lima-sol-plats legend { padding: 0; margin-bottom: .5rem; }
.lima-sol-plat { position: relative; cursor: pointer; }
.lima-sol-plat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lima-sol-plat span {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .3rem .8rem;
  border-radius: 12px; background: var(--superficie-2); color: var(--tinta-suave);
  font-size: .85rem; font-weight: 600; border: 1.5px solid transparent;
}
.lima-sol-plat span i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lima-sol-plat input:checked + span { border-color: var(--acento); color: var(--tinta); background: var(--acento-suave); }
.lima-sol-plat input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.lima-sol-nombre .lima-fh-etiqueta, .lima-sol-ganada .lima-fh-etiqueta { margin-right: .1rem; }

/* Logos de las plataformas y la ficha de cada modelo en su fila.  [foro-hilos]
   El logo ya trae su fondo; la caja solo lo recorta. */
.lima-fh-ic-logo { overflow: hidden; padding: 0; }
.lima-fh-ic-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lima-sol-plat span img { width: 18px; height: 18px; border-radius: 5px; display: block; }
.lima-fh-titulo { flex-wrap: wrap; row-gap: .25rem; }
.lima-fh-arroba { color: var(--tinta-tenue); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lima-fh-stats { display: flex; flex-wrap: wrap; gap: .3rem; }
.lima-fh-stat {
  display: inline-flex; align-items: center; padding: .08rem .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; white-space: nowrap;
  background: var(--superficie-2); color: var(--tinta-suave);
}
.lima-fh-stat-ppv { background: var(--acento-suave); color: var(--acento); }

/* Lo que no es público se ve BORROSO, no negro: la casilla y el visor.
   [foro-borroso] */
.lima-tesela-borrosa img { filter: saturate(.85); }
.lima-visor-borroso { position: relative; display: flex; align-items: center; justify-content: center;
  /* A todo el ancho del visor: sin esto la caja medía lo que la miniatura
     borrosa (pequeña) y la foto se veía diminuta.  [desbloqueos] */
  width: 100%; align-self: stretch; }
.lima-visor-borroso img { width: 100%; max-height: 75vh; object-fit: contain; filter: blur(2px); transform: scale(1.02); }
.lima-visor-borroso { overflow: hidden; border-radius: var(--radio, 14px); }
.lima-visor-candado {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.lima-visor-candado svg { width: 16px; height: 16px; }

/* Top PPVs: el puesto va en la esquina de la portada.  [foro-top-ppv] */
.lima-top-ppv .set-img { position: relative; }
.lima-top-ppv-puesto { position: absolute; top: .45rem; left: .45rem; z-index: 2; }
.lima-top-ppv .lima-fh-cifras { margin-top: .2rem; }

/* Filtros de orden de una categoría del foro: una fila que se desliza.  [foro-filtros] */
.lima-fh-filtros { margin: -.2rem 0 1rem; }

/* «Contenido nuevo» en la fila: lo que la puso arriba.  [foro-filtros] */
.lima-fh-nuevo { color: var(--acento); font-weight: 700; }

/* Vistas previas de enlaces en el hilo del foro.  [foro-enlaces] */
.lima-fh-resp-txt a { color: var(--acento); text-decoration: underline; overflow-wrap: anywhere; }
/* Cada medio va en el flujo, bajo su descripción (como el foro de origen), no
   en una rejilla.  [foro-enlaces] */
.lima-fh-prev { display: block; margin: .35rem 0 .7rem; border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); color: inherit; }
.lima-fh-prev-play { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: .95rem; pointer-events: none; }

/* Vídeo/RedGIFs incrustado. */
.lima-fh-prev-video { max-width: 640px; }
.lima-fh-prev-video iframe, .lima-fh-prev-video video { width: 100%; height: 360px; border: 0; display: block; background: #000; }

/* Una foto: ENTERA (sin recortar), grande y ampliable al tocarla. */
.lima-fh-prev-foto { background: #000; max-width: 540px; }
.lima-fh-prev-foto .lima-fh-zoom { width: 100%; }
.lima-fh-prev-foto .lima-fh-zoom img { width: 100%; max-height: 420px; object-fit: contain; display: block; }

/* Varias fotos: filas de ALTO fijo, cada foto con su propia forma, que se
   acomodan solas (como el foro de origen). Sin texto ni enlaces encima. */
.lima-fh-galeria { display: flex; flex-wrap: wrap; gap: 6px; margin: .35rem 0 .7rem; }
.lima-fh-tile { flex: 0 0 auto; height: 200px; margin: 0; border: 0; border-radius: 6px; background: #000; }
.lima-fh-tile .lima-fh-zoom { width: auto; height: 100%; }
.lima-fh-tile .lima-fh-zoom img { width: auto; height: 100%; max-width: 100%; object-fit: cover; }
@media (max-width: 560px) { .lima-fh-tile { height: 130px; } }

/* Acciones de un post, colocadas como el foro de origen: compartir y guardar
   arriba junto al número; abajo Reportar a la izquierda y Reaccionar · Citar ·
   Responder a la derecha; debajo, separada, la línea de reacciones.
   [foro-enlaces][foro-reacciones] */
.lima-fh-post-meta { display: flex; align-items: center; gap: .5rem; }
.lima-fh-meta-acc { display: inline-flex; align-items: center; gap: .1rem; margin-left: auto; }
.lima-fh-meta-acc .lima-fh-postnum { margin-left: .35rem; }
.lima-fh-ico-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; padding: 0;
  border-radius: 8px; background: none; color: var(--tinta-tenue, #9aa); cursor: pointer; }
.lima-fh-ico-btn:hover { color: inherit; background: rgba(255,255,255,.06); }
.lima-fh-ico-btn.lima-on { color: var(--acento, #bee05f); }
.lima-fh-guardar.lima-on .lima-fh-svg-relleno { fill: currentColor; }
.lima-fh-svg { flex: none; display: block; }
.lima-fh-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .3rem .9rem; margin-top: .8rem; position: relative; }
.lima-fh-acc-der { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; margin-left: auto; }
.lima-fh-accion { color: var(--tinta-tenue, #9aa); font-size: .85rem; text-decoration: none; min-height: 32px;
  display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; padding: .2rem 0;
  cursor: pointer; font-family: inherit; }
.lima-fh-accion:hover { color: inherit; }
/* Una regla general da margen al último enlace de una tarjeta: aquí descuadraba Responder. */
.lima-fh-post .lima-fh-acciones .lima-fh-accion { margin: 0; }
.lima-fh-accion.lima-on { color: #ff5a7a; }
.lima-fh-reportar { color: #e5534b; }
.lima-fh-reportar:hover { color: #ff7a72; }
.lima-fh-accion:disabled { opacity: .6; cursor: default; }
/* En el móvil la barra cabe en una línea: Reportar queda en su icono. */
@media (max-width: 560px) { .lima-fh-reportar span { display: none; } .lima-fh-acc-der { gap: .2rem .8rem; } }
.lima-fh-reac-resumen { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid rgba(255,255,255,.08); }
.lima-fh-reac-resumen[hidden], .lima-fh-reac-mia[hidden], .lima-fh-reac-ico[hidden] { display: none; }
.lima-fh-reac-propias { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.lima-fh-reac-chip { font-size: .8rem; padding: .1rem .5rem; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.lima-fh-reac-chip.lima-mia { border-color: #ff5a7a; }
.lima-fh-reac-fuera { opacity: .75; }
/* La paleta se ancla a la fila, no al botón: pegada a él se salía del móvil. */
.lima-fh-reac { position: static; }
.lima-fh-reac summary { list-style: none; }
.lima-fh-reac summary::-webkit-details-marker { display: none; }
.lima-fh-reac-paleta { position: absolute; bottom: calc(100% + 4px); right: 0; max-width: 100%; z-index: 5; display: flex; gap: .2rem;
  padding: .3rem; border-radius: 999px; background: #1f2326; border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.lima-fh-reac-btn { border: 0; background: none; font-size: 1.35rem; line-height: 1; padding: .3rem;
  min-width: 40px; min-height: 40px; border-radius: 999px; cursor: pointer; transition: transform .1s; }
.lima-fh-reac-btn:hover { transform: scale(1.2); }
.lima-fh-reac-btn.lima-on { background: rgba(255,90,122,.2); }
/* Una cita, como el foro de origen: franja con «Fulano dijo: ↑» (lleva al
   post citado) y el texto citado debajo, en su caja.  [foro-reacciones][foro-citas] */
.lima-fh-cita { margin: .5rem 0 .7rem; border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid var(--acento, #bee05f); border-radius: 6px; background: rgba(255,255,255,.035);
  overflow: hidden; font-size: .92rem; }
.lima-fh-cita-tit { padding: .45rem .75rem; background: rgba(255,255,255,.04); font-size: .85rem;
  color: var(--acento, #bee05f); }
.lima-fh-cita-tit a { color: inherit; text-decoration: none; }
.lima-fh-cita-tit a:hover { text-decoration: underline; }
.lima-fh-cita-ir { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: .2rem;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .7rem; line-height: 1; }
/* Lo citado con fotos: miniaturas pequeñas dentro de la caja, ampliables
   con el visor; las fotos grandes son del post.  [foro-citas] */
.lima-fh-cita-fotos { display: flex; flex-wrap: wrap; gap: 6px; padding: .55rem .75rem 0; }
.lima-fh-cita-foto { display: block; height: 120px; padding: 0; border: 0; border-radius: 6px;
  overflow: hidden; background: #000; cursor: zoom-in; }
.lima-fh-cita-foto img { display: block; height: 100%; width: auto; max-width: 220px; object-fit: cover; }
.lima-fh-cita-enlaces { padding: .45rem .75rem 0; }
.lima-fh-cita > :last-child { padding-bottom: .55rem; }
.lima-fh-cita-txt { padding: .55rem .75rem; white-space: pre-line; overflow-wrap: anywhere; }

/* Subir fotos y vídeos a una respuesta.  [foro-subidas] */
.lima-fh-subir { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.lima-fh-subir .boton.lima-sec { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: inherit; padding: .4rem .8rem; font-size: .85rem; min-height: 40px; }
.lima-fh-subidas { list-style: none; margin: .2rem 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.lima-fh-subida { font-size: .8rem; opacity: .85; overflow-wrap: anywhere; }
.lima-fh-previa { margin: .5rem 0; padding: .6rem; border-radius: 10px; border: 1px dashed rgba(255,255,255,.18); }

/* Una tanda de enlaces sueltos: chips compactos. */
.lima-fh-enlaces { display: flex; flex-wrap: wrap; gap: 6px; margin: .35rem 0 .7rem; }
.lima-fh-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; min-height: 32px;
  border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-size: .8rem; color: inherit; text-decoration: none; }

/* El botón de ampliar es transparente; hereda el cursor. */
.lima-fh-zoom { position: relative; display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.lima-fh-zoom img { display: block; }
.lima-fh-zoom-ico { position: absolute; top: .4rem; right: .4rem; width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: .9rem; pointer-events: none; }

/* Tarjeta compacta de un enlace de archivo: miniatura a la izquierda, nombre y
   host a la derecha, como en el foro de origen. Una por fila. */
.lima-fh-prev-card { display: flex; align-items: stretch; gap: .55rem; padding: .5rem; max-width: 560px; }
.lima-fh-th { position: relative; flex: 0 0 auto; width: 74px; height: 74px; border-radius: 9px; overflow: hidden;
  display: block; padding: 0; border: 0; background: #000; cursor: pointer; }
.lima-fh-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lima-fh-th.lima-fh-zoom { cursor: zoom-in; }
.lima-fh-th .lima-fh-zoom-ico { top: 2px; right: 2px; width: 20px; height: 20px; font-size: .7rem; border-radius: 6px; }
.lima-fh-th .lima-fh-prev-play { width: 28px; height: 28px; font-size: .8rem; }
.lima-fh-prev-ph { display: grid; place-items: center;
  background: #23262b;  /* respaldo si no hay color-mix (WebView viejo) */
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento, #b6e24a) 32%, #1b1e22), #15171a); }
.lima-fh-prev-ph::after { content: attr(data-ini); font-size: 1.9rem; font-weight: 800;
  color: #cfe88a;
  color: color-mix(in srgb, var(--acento, #b6e24a) 70%, #fff); }
.lima-fh-card-info { display: flex; flex-direction: column; justify-content: center; gap: .25rem; min-width: 0; }
.lima-fh-card-nombre { font-weight: 700; font-size: .9rem; line-height: 1.25; text-decoration: none;
  color: var(--acento, #b6e24a);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lima-fh-card-host { display: flex; align-items: center; gap: .35rem; font-size: .76rem; opacity: .75; }
.lima-fh-card-badge { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px;
  background: rgba(255,255,255,.14); font-size: .62rem; font-weight: 800; }
.lima-fh-marcas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }

/* Visor de fotos y vídeos: zoom, arrastre y pantalla completa. */
.lima-fh-lb { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; background: rgba(0,0,0,.94); }
.lima-fh-lb-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center;
  overflow: hidden; touch-action: none; }
.lima-fh-lb-media { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.lima-fh-lb-stage img.lima-fh-lb-media { transform-origin: center; will-change: transform; -webkit-user-select: none; user-select: none; }
.lima-fh-lb-barra { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; display: flex; gap: .4rem; z-index: 2; }
.lima-fh-lb-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem; cursor: pointer; text-decoration: none; }
.lima-fh-lb-btn:hover { background: rgba(255,255,255,.24); }
.lima-fh-lb-x { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 14px; width: 42px; height: 42px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.1rem; cursor: pointer; }

/* El hilo como un foro: posts numerados y páginas.  [foro-hilos-look] */
.lima-fh-post { padding: 1rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "autor meta" "cuerpo cuerpo"; align-items: center; column-gap: .6rem; }
.lima-fh-post-autor { grid-area: autor; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.lima-fh-post-meta { grid-area: meta; font-size: .76rem; color: var(--tinta-tenue); white-space: nowrap; }
.lima-fh-post-cuerpo { grid-area: cuerpo; min-width: 0; margin-top: .55rem; padding-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.06); }
.lima-fh-post-cuerpo .lima-fh-resp-txt { margin-top: 0; }
/* Computadora: el autor es una columna, como en Simpcity.  [foro-hilos-look] */
@media (min-width: 860px) {
  .lima-fh-post { padding: 0; grid-template-columns: 180px minmax(0, 1fr);
    grid-template-areas: "autor meta" "autor cuerpo"; align-items: stretch; column-gap: 0; overflow: hidden; }
  .lima-fh-post-autor { flex-direction: column; justify-content: flex-start; text-align: center; gap: .6rem;
    padding: 1.2rem .8rem; background: rgba(255,255,255,.025); border-right: 1px solid rgba(255,255,255,.06); }
  .lima-fh-post-autor .foro-av { width: 72px; height: 72px; font-size: 1.9rem; }
  .lima-fh-post-autor .lima-autor-linea { justify-content: center; flex-wrap: wrap; }
  .lima-fh-post-meta { justify-self: stretch; padding: .75rem 1.2rem 0; display: flex; justify-content: space-between; }
  .lima-fh-post-cuerpo { margin: 0; padding: .7rem 1.2rem 1.2rem; border-top: 0; font-size: .95rem; }
  .lima-fh-post-cuerpo .lima-fh-prevs { grid-template-columns: repeat(auto-fill, minmax(190px, 230px)); }
  .lima-fh-post-cuerpo .lima-fh-prev-mini img { height: 150px; }
}
.lima-fh-post-op { border-color: rgba(190,224,95,.45); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.lima-fh-postnum { margin-left: .6rem; color: var(--tinta-tenue); text-decoration: none; font-variant-numeric: tabular-nums; }
.lima-fh-postnum:hover { color: var(--acento); }
/* «N respuestas» de un post y la foto caída que deja su ficha.
   [foro-respuestas][foro-enlaces] */
.lima-fh-citado { margin-top: .5rem; }
.lima-fh-citado[hidden] { display: none; }
.lima-fh-ver-resp.lima-on { color: var(--acento, #bee05f); }
.lima-fh-post.lima-fh-resaltado { box-shadow: 0 0 0 2px var(--acento, #bee05f); transition: box-shadow .3s; }
.lima-fh-citado > summary { cursor: pointer; font-size: .85rem; color: var(--acento, #bee05f);
  list-style: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; }
.lima-fh-citado > summary::-webkit-details-marker { display: none; }
.lima-fh-citado-lista { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lima-fh-citado-lista li { display: flex; flex-direction: column; gap: .2rem; padding: .55rem .75rem;
  border-radius: 8px; background: rgba(255,255,255,.035); border-left: 3px solid var(--acento, #bee05f); }
.lima-fh-citado-cab { font-size: .85rem; }
.lima-fh-citado-txt { font-size: .88rem; color: var(--tinta-tenue, #9aa); overflow-wrap: anywhere; }
.lima-fh-citado-ir { align-self: flex-end; font-size: .85rem; color: var(--acento, #bee05f); text-decoration: none; }
.lima-fh-galeria > .lima-fh-caida { flex: 1 1 260px; max-width: 460px; }

/* Sets armados con los posts del hilo: la casilla de cada post, la barra
   flotante y la lista de archivos del set.  [foro-sets-propios] */
.lima-fh-sel { display: inline-grid; place-items: center; width: 32px; height: 32px; cursor: pointer; }
.lima-fh-sel input { width: 18px; height: 18px; accent-color: var(--acento, #bee05f); cursor: pointer; }
.lima-fh-setbar { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .9rem; margin: .8rem 0;
  border-radius: 14px; background: #1f2326; border: 1px solid rgba(190,224,95,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.lima-fh-setbar[hidden] { display: none; }
.lima-fh-setbar .lima-in { width: auto; min-width: 0; flex: 1 1 150px; min-height: 40px; }
.lima-fh-setbar .lima-in[hidden] { display: none; }
.lima-fh-setbar .boton { min-height: 40px; }
.lima-fh-setbar-n { font-size: .9rem; white-space: nowrap; }
.lima-fh-setbar-msg { flex-basis: 100%; font-size: .85rem; color: var(--tinta-tenue, #9aa); }
.lima-fh-setbar-msg:empty { display: none; }
.lima-fh-setbar-msg a { color: var(--acento, #bee05f); }
.lima-fs-items { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.lima-fs-item { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06); }
.lima-fs-item-prev { flex: 1; min-width: 0; }
/* Un botón con doble confirmación, ya armado: el segundo toque pregunta. */
.lima-armado { background: rgba(229,83,75,.18) !important; color: #ff8a82 !important;
  border-color: rgba(229,83,75,.6) !important; }

/* Las etiquetas de la cabecera del perfil salen de DEBAJO de su fondo
   (`.lima-modelo-arte` y la portada son capas absolutas): tapadas se veían
   apagadas y no se podían tocar.  [foro-etiquetas] */
.lima-modelo-cab .lima-fh-tags { position: relative; z-index: 2; }
.lima-modelo-cab .lima-fh-tag { color: #fff; background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .2); }
.lima-modelo-cab .lima-fh-tag:hover { border-color: var(--acento, #bee05f); color: var(--acento, #bee05f); }

/* El perfil estándar: Temas y Sets plegables en Inicio, con su flecha.
   [foro-estandar] */
.lima-fh-bloque { margin: .9rem 0; }
.lima-fh-bloque > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; }
.lima-fh-bloque > summary::-webkit-details-marker { display: none; }
.lima-fh-bloque > summary::before { content: "\25B8"; color: var(--acento, #bee05f); font-size: .9rem;
  transition: transform .15s; }
.lima-fh-bloque[open] > summary::before { transform: rotate(90deg); }
.lima-fh-bloque > summary h2 { margin: 0; font-size: 1.05rem; }
.lima-fh-bloque > summary + * { margin-top: .6rem; }
.lima-fh-ver-todo { margin: .5rem 0 0; text-align: right; font-size: .88rem; }
.lima-fh-ver-todo a { color: var(--acento, #bee05f); text-decoration: none; }

/* Un hilo en varias categorías: sus chips (la actual resaltada) y los temas
   aparte de la categoría.  [foro-multicat] */
.lima-fh-en-cats { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.lima-fh-etiqueta-otra { opacity: .55; text-decoration: none; }
.lima-fh-etiqueta-otra:hover { opacity: 1; }
.lima-fh-temas { margin-bottom: .4rem; }
.lima-fh-lista-temas { padding: .2rem 0; }
.lima-fh-tema-fila { display: flex; flex-direction: column; gap: .15rem; padding: .65rem 1rem;
  text-decoration: none; color: inherit; border-bottom: 1px solid rgba(255,255,255,.06); }
.lima-fh-tema-fila:last-child { border-bottom: 0; }
.lima-fh-tema-fila:hover { background: rgba(255,255,255,.03); }
.lima-fh-tema-tit { font-weight: 600; }
.lima-fh-nuevo-tema { padding: .7rem 1rem; margin-top: .5rem; }
.lima-fh-nuevo-tema summary { cursor: pointer; color: var(--acento, #bee05f); font-weight: 600; }
.lima-fh-nuevo-tema form { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }

/* Encima de los posts: páginas a la izquierda y el orden a la derecha, como
   el foro de origen («Sort by date / reaction score»).  [foro-reacciones] */
.lima-fh-barra-hilo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; margin: .2rem 0 .7rem; }
.lima-fh-barra-hilo .lima-fh-pags { margin: 0; }
.lima-fh-ordenar { display: inline-flex; margin-left: auto; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.lima-fh-ordenar a { padding: .45rem .8rem; font-size: .85rem; color: var(--tinta-tenue, #9aa);
  text-decoration: none; border-bottom: 2px solid transparent; min-height: 36px; display: inline-flex; align-items: center; }
.lima-fh-ordenar a:hover { color: inherit; }
.lima-fh-ordenar a.lima-on { color: inherit; background: rgba(255,255,255,.06); border-bottom-color: var(--acento, #bee05f); }
.lima-fh-pags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .2rem 0 .7rem; }
.lima-fh-pag { min-width: 36px; min-height: 36px; padding: 0 .55rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255,255,255,.05); color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.lima-fh-pag[aria-current] { background: var(--acento); color: #111; font-weight: 700; }
.lima-fh-pag-salto { color: var(--tinta-tenue); padding: 0 .2rem; }

/* Etiquetas de Simpcity en el foro.  [foro-etiquetas] */
.lima-fh-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .35rem 0 0; }
.lima-fh-tag { font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; text-decoration: none;
  background: rgba(255,255,255,.06); color: var(--tinta-suave); border: 1px solid rgba(255,255,255,.08); }
a.lima-fh-tag { min-height: 28px; display: inline-flex; align-items: center; }
a.lima-fh-tag:hover { color: var(--acento); border-color: var(--acento); }
.lima-fh-tags-fila .lima-fh-tag { font-size: .68rem; padding: .05rem .45rem; }
.lima-fh-tag-activa { background: var(--acento); color: #111; font-weight: 700; }
.lima-fh-tag-quitar { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--tinta-suave); text-decoration: none; background: rgba(255,255,255,.06); }

/* «Editar hilo»: el lápiz del dueño, plegado y solo con el modo dueño.
   [foro-editar-hilo] */
.lima-fh-editar { margin-bottom: 1rem; }
.lima-fh-editar > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; list-style: none; }
.lima-fh-editar > summary::-webkit-details-marker { display: none; }
.lima-fh-editar[open] > summary { margin-bottom: .6rem; }
.lima-fh-editar-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.lima-fh-editar-rot { flex: 0 0 100%; font-size: .8rem; opacity: .75; }
.lima-fh-editar .boton { min-height: 44px; }
.lima-fh-editar-datos { display: grid; gap: .5rem; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.lima-fh-editar-datos label { display: grid; gap: .25rem; font-size: .8rem; }
.lima-fh-editar-datos input[type=text] { width: 100%; min-height: 44px; box-sizing: border-box; }

/* «Armar sets»: casillas por medio, solo con el modo encendido.
   [foro-sets-medios] */
.lima-fh-armar { min-height: 36px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.lima-fh-armar.lima-on { background: var(--acento, #bee05f); border-color: var(--acento, #bee05f); color: #111; font-weight: 700; }
.lima-fh-resp:not(.lima-fh-armando) .lima-fh-sel,
.lima-fh-resp:not(.lima-fh-armando) .lima-fh-sel-medio { display: none; }
.lima-fh-armando .lima-fh-prev[data-u] { position: relative; }
.lima-fh-sel-medio { position: absolute; top: .4rem; right: .4rem; z-index: 4; width: 26px; height: 26px; margin: 0;
  accent-color: var(--acento, #bee05f); cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.lima-fh-sel-medio.lima-fh-sel-chip { position: static; width: 22px; height: 22px; vertical-align: middle; margin-right: .2rem; filter: none; }
.lima-fh-armando .lima-fh-prev[data-u]:has(> .lima-fh-sel-medio:checked) { outline: 3px solid var(--acento, #bee05f); outline-offset: -3px; }
.lima-fh-setbar-tira { display: flex; gap: .3rem; flex-basis: 100%; overflow-x: auto; }
.lima-fh-setbar-tira:empty { display: none; }
.lima-fh-setbar-mini { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.2); background: #222; color: #fff; font-weight: 700; cursor: pointer; }
.lima-fh-setbar-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lima-fh-setbar-mas { align-self: center; font-size: .8rem; opacity: .75; }

/* Configurar un set: varios a la vez y orden.  [foro-sets-medios] */
.lima-fs-varios { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 .6rem; }
.lima-fs-varios .lima-in { width: auto; flex: 1 1 140px; min-height: 40px; }
.lima-fs-varios-ayuda { flex-basis: 100%; font-size: .8rem; opacity: .75; }
.lima-fs-item-sel { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.lima-fs-item-sel input { width: 22px; height: 22px; accent-color: var(--acento, #bee05f); }
.lima-fs-item-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.lima-fs-item-acc form { margin: 0; }
.lima-fs-item-acc .boton { min-width: 44px; min-height: 40px; }

/* La cola de aportes a los sets.  [foro-sets-medios] */
.lima-fsp-grupo { margin-bottom: 1rem; }
.lima-fsp-tit { font-size: 1rem; margin: 0 0 .4rem; }
.lima-fsp-todo { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.lima-fsp-todo form { margin: 0; }

/* ── Desbloquear un set: la tarjeta «Cómo desbloquear» ───────  [desbloqueos]
   Justo debajo de los archivos borrosos. Arriba el desbloqueo que pide (su
   emoji grande y el rango de precio), los que tiene en chips y un solo botón
   ancho; si no tiene, dónde se consigue. El color del borde sale del tamaño
   que pide: se reconoce de un vistazo. */
.lima-dbq { margin: .9rem 0 1rem; border: 1px solid var(--borde, rgba(255,255,255,.08)); }
.lima-dbq-ppv_m { border-color: rgba(182,156,255,.45); }
.lima-dbq-ppv_g { border-color: rgba(124,198,255,.55); }
.lima-dbq-cab { display: flex; align-items: center; gap: .75rem; margin: 0 0 .55rem; }
.lima-dbq-emoji {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.75rem; line-height: 1; background: var(--superficie-2);
}
.lima-dbq-cab h2 { margin: 0 0 .15rem; font-size: 1.05rem; line-height: 1.2; }
.lima-dbq-pide { margin: 0; font-size: .86rem; color: var(--tinta-suave); line-height: 1.3; }
.lima-dbq-pide b { color: var(--tinta); }
.lima-dbq-razon { display: flex; align-items: flex-start; gap: .4rem; margin: 0 0 .7rem; font-size: .82rem; }
.lima-dbq-razon svg { width: 15px; height: 15px; flex: none; margin-top: .1rem; color: var(--tinta-tenue); }
.lima-dbq-tickets { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; padding: 0; }
.lima-dbq-tickets li {
  display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; background: var(--superficie-2); color: var(--tinta-tenue);
}
.lima-dbq-tickets li.lima-on { color: var(--tinta); }
.lima-dbq-tickets li.lima-on.lima-dbq-sirve { background: var(--acento-suave); color: var(--acento); }
.lima-dbq-usar { min-height: 50px; font-size: 1rem; }
.lima-dbq-nota { margin: .45rem 0 0; font-size: .78rem; }
.lima-dbq .lima-dbq-falta { margin: 0 0 .6rem; font-size: .9rem; }
.lima-dbq-botones a.boton {
  flex: 1 1 12rem; min-height: 50px; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
}
.lima-dbq-botones a.boton small { font-size: .74rem; font-weight: 600; opacity: .85; }

/* Lo privado que no se desbloquea: una línea, no la caja 4:3 vacía. */
.lima-privado-linea { aspect-ratio: auto; margin: .9rem 0 .6rem; }
.lima-privado-linea::before { content: none; }
.lima-privado-linea .set-privado-txt {
  position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .2rem .45rem;
  justify-content: flex-start; text-align: left; padding: .75rem .9rem;
  color: var(--tinta); background: none;
}
.lima-privado-linea .set-privado-txt svg { width: 18px; height: 18px; color: var(--tinta-tenue); }

/* En la rejilla: qué desbloqueo pide cada set cerrado, en la esquina de abajo. */
.set-img .set-candado.lima-set-nivel {
  position: absolute; right: .45rem; bottom: .45rem; z-index: 1; width: auto; height: auto;
  display: inline-flex; align-items: center; gap: .2rem; padding: .18rem .45rem; border-radius: 999px;
  font-size: .66rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  background: rgba(0,0,0,.62); color: #fff;
}
.lima-set-nivel-ppv_m { box-shadow: inset 0 0 0 1px rgba(182,156,255,.7); }
.lima-set-nivel-ppv_g { box-shadow: inset 0 0 0 1px rgba(124,198,255,.8); }
.lima-modelo-sets .set-candado.lima-set-nivel-ppv, .lima-modelo-sets .set-candado.lima-set-nivel-ppv_m,
.lima-modelo-sets .set-candado.lima-set-nivel-ppv_g { font-size: .72rem; line-height: 1; }

/* El visor de lo borroso: la portada difuminada a lo ancho y, debajo, el
   camino a desbloquearlo. */
.lima-visor-dbq { margin: .8rem 0 0; min-height: 48px; }