/* ─────────────────────────────────────────────────────────────────────────────
   Sellers Unidos — expediente sobrio.

   Estilo: burocrático-terminal ("Papers, Please") pero RELAJADO. La idea es que
   parezca un sistema serio y bien hecho, no un juego ni una terminal agresiva:

   1. MONOESPACIADA en todo. Es lo que da el carácter de expediente y hace que
      las cifras se alineen solas. Se usa una fuente de sistema legible, no una
      de máquina de escribir.
   2. OSCURA Y CALMADA. Fondo carbón (no negro puro, que cansa la vista) y un
      acento ámbar de sello. Nada de neón ni de saturación alta.
   3. CAJAS DEFINIDAS. Bordes finos y esquinas casi rectas: cada bloque se lee
      como un campo de un formulario oficial.
   4. DISCRETA. Nada en pantalla delata qué se vende. Sin imágenes, sin nombres
      explícitos en títulos ni en la pestaña.
   5. EL PULGAR MANDA. Primero teléfono: acciones abajo y objetivos grandes.

   Nota: el tema ya NO se hereda de Telegram. Antes los colores los ponía la app
   del usuario y la identidad se perdía —cada quien veía una web distinta—; hoy
   el diseño es el mismo en todas partes. De Telegram solo se respetan las áreas
   seguras (notch y barra inferior).
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Superficies ── */
  --papel:        #0d0f12;   /* fondo general: carbón, no negro puro */
  --superficie:   #14171c;   /* tarjetas y barras */
  --superficie-2: #1a1e25;   /* zonas hundidas, campos */
  --borde:        #262b34;
  --borde-fuerte: #333a45;

  /* ── Tinta ── */
  --tinta:        #dfe3ea;
  --tinta-suave:  #98a0ad;
  --tinta-tenue:  #6b7481;

  /* ── Acento: ámbar de sello ── */
  --acento:        #d9a441;
  --acento-tinta:  #1a1408;   /* texto sobre el ámbar */
  --acento-suave:  #2a2113;

  /* ── Estados, todos desaturados ── */
  --exito:        #7aa96b;
  --exito-suave:  #1a241a;
  --alerta:       #c99a4a;
  --alerta-suave: #262013;
  --error:        #c26a5f;
  --error-suave:  #271918;

  /* ── Forma ── */
  --radio:     6px;
  --radio-sm:  4px;
  --radio-lg:  8px;
  --hueco:     0.9rem;
  --ancho:     760px;
  --transicion: 140ms cubic-bezier(.4, 0, .2, 1);

  /* Área segura del teléfono (notch y barra inferior). */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code",
          "Roboto Mono", Consolas, "Liberation Mono", monospace;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

/* Tema claro: expediente en papel. Se mantiene por si alguien lo prefiere, con
   el mismo lenguaje de sello ámbar. */
:root[data-tema="light"] {
  --papel: #edeae3; --superficie: #f7f5f0; --superficie-2: #e9e5dc;
  --borde: #d6d0c4; --borde-fuerte: #bdb5a5;
  --tinta: #211d16; --tinta-suave: #5f584c; --tinta-tenue: #857d6e;
  --acento: #9a6b16; --acento-tinta: #fdfaf4; --acento-suave: #f0e6d2;
  --exito: #4d7a3f; --exito-suave: #e6efe1;
  --alerta: #966c1f; --alerta-suave: #f4ead6;
  --error: #a2453a; --error-suave: #f6e3e0;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--mono), var(--emoji);
  font-size: 15px;                 /* la monoespaciada se ve más grande */
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  /* Trama muy tenue: da textura de papel/pantalla sin ensuciar la lectura. */
  background-image:
    repeating-linear-gradient(
      0deg, transparent, transparent 3px,
      rgba(255, 255, 255, .012) 3px, rgba(255, 255, 255, .012) 4px);
  -webkit-font-smoothing: antialiased;
}
:root[data-tema="light"] body { background-image: none; }

/* Los campos a 16px o iOS hace zoom al enfocarlos. */
input, select, textarea, button { font-family: inherit; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

header.barra {
  position: sticky; top: 0; z-index: 40;
  background: var(--papel);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  padding-top: var(--safe-top);
}
header.barra .interior {
  max-width: var(--ancho); margin: 0 auto;
  padding: .7rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}
header.barra .marca {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .82rem; color: var(--tinta); text-decoration: none;
  border-left: 3px solid var(--acento); padding-left: .55rem;
  display: inline-flex; align-items: center; gap: .45rem;
}
/* El logo de OfShopBot delante del nombre, en las dos cabeceras (la de la web
   y la de la miniapp). Fijo: en un móvil estrecho no se encoge, se recorta el
   texto si hace falta.  [marca-logo] */
.marca-logo { flex: none; display: block; }
header.barra .acciones { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

main { padding: 1.5rem 0 calc(66px + var(--safe-bottom) + 1.5rem); }

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

h1 {
  font-size: 1.15rem; line-height: 1.3; margin: 0 0 .2rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
h2 {
  font-size: .78rem; margin: 2rem 0 .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
  display: flex; align-items: center; gap: .6rem;
}
/* Línea de separación que sale del título, como una sección de formulario. */
h2::after {
  content: ""; flex: 1; height: 1px; background: var(--borde);
}
h3 { font-size: .92rem; margin: 0 0 .3rem; font-weight: 650; letter-spacing: .02em; }
p  { margin: 0 0 .75rem; }
p.guia { color: var(--tinta-suave); font-size: .87rem; }

a { color: var(--acento); }
.enlace {
  color: var(--acento); text-decoration: none;
  border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
.enlace:hover { border-bottom-style: solid; }

code, .clave {
  font-family: var(--mono);
  background: var(--superficie-2); border: 1px solid var(--borde);
  padding: .12em .4em; border-radius: var(--radio-sm); font-size: .92em;
}

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

.tarjeta, .vidrio {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
}
/* La tarjeta del saldo lleva el sello ámbar al costado. */
.tarjeta.saldo {
  border-left: 3px solid var(--acento);
  background: linear-gradient(180deg, var(--acento-suave) 0%, var(--superficie) 60%);
}

.etiqueta {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 650;
}
.cifra {
  font-size: 2rem; font-weight: 700; letter-spacing: -.01em;
  margin: .15rem 0 0; font-variant-numeric: tabular-nums;
}
.cifra.chica { font-size: 1.15rem; }
.sub { color: var(--tinta-tenue); font-size: .78rem; margin: .1rem 0 0;
       letter-spacing: .1em; text-transform: uppercase; }

.rejilla {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* ── Listas tipo expediente ───────────────────────────────────────────────── */

.lista {
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: var(--superficie);
}
.fila {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem .9rem; min-height: 54px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--borde);
  transition: background var(--transicion);
}
.lista .fila:last-child { border-bottom: none; }
a.fila:hover { background: var(--superficie-2); }
.fila .icono {
  font-size: 1.1rem; width: 1.7rem; text-align: center; flex: none;
  font-family: var(--emoji), var(--mono);
}
.fila .cuerpo { flex: 1; min-width: 0; }
.fila .titulo { font-weight: 620; font-size: .92rem; }
.fila .detalle { color: var(--tinta-tenue); font-size: .78rem; }
.fila .valor { color: var(--tinta-suave); font-size: .85rem;
               font-variant-numeric: tabular-nums; }
.fila .flecha { color: var(--tinta-tenue); flex: none; }

/* Los pasos numerados de la portada van en cajita, como el folio de un trámite.
   Es lo único decorativo de la página, y ni siquiera insinúa qué se vende. */
.fila .icono.num {
  font-size: .8rem; font-weight: 700; color: var(--tinta-tenue);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  width: 1.6rem; height: 1.6rem; line-height: 1.5rem;
  font-family: var(--mono);
}

/* ── Portada ──────────────────────────────────────────────────────────────── */

.portada { text-align: center; padding: 3.5rem 1rem 2.5rem; }
.portada h1 { font-size: 1.55rem; letter-spacing: .1em; margin-bottom: .6rem; }
/* Doble filete bajo el título: el gesto de "documento sellado" sin recargar. */
.portada h1::after {
  content: ""; display: block; width: 56px; height: 0; margin: .9rem auto 0;
  border-top: 1px solid var(--acento); border-bottom: 1px solid var(--acento);
  padding-top: 3px;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .8rem 1.1rem; border-radius: var(--radio);
  background: var(--acento); color: var(--acento-tinta);
  border: 1px solid var(--acento);
  font-size: .86rem; font-weight: 700; font-family: inherit;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: filter var(--transicion), transform var(--transicion);
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: translateY(1px); }
.boton.ancho { width: 100%; }
.boton.chico { padding: .45rem .7rem; font-size: .72rem; }
.boton.fantasma {
  background: transparent; color: var(--tinta);
  border: 1px solid var(--borde-fuerte);
}
.boton.fantasma:hover { background: var(--superficie-2); }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

/* Fila de filtros: en teléfono se desliza en vez de partirse en tres renglones,
   que era lo que empujaba la tabla fuera de la pantalla.  [web-filtros] */
.filtros {
  display: flex; gap: .4rem; margin-bottom: 1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: .3rem; scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtros .boton { flex: none; }

/* ── Fichas de opción ─────────────────────────────────────────────────────── */
/* Un <select> esconde las opciones detrás de un toque y no deja ver de un
   vistazo con qué se puede pagar. Estas son radios de verdad: funcionan sin
   JavaScript y el teclado las recorre solo.  [web-chips] */

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 1rem; }

.chip-in {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .85rem; border-radius: var(--radio-sm);
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--tinta-suave); cursor: pointer;
  font-size: .8rem; letter-spacing: .04em;
  transition: border-color var(--transicion), color var(--transicion);
  min-height: 44px;                 /* objetivo cómodo para el pulgar */
}
.chip:hover { color: var(--tinta); border-color: var(--tinta-tenue); }
.chip-in:checked + .chip {
  border-color: var(--acento); color: var(--acento);
  background: var(--acento-suave);
}
.chip-in:focus-visible + .chip { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Ficha que representa el valor PUESTO de un ajuste. No es un radio (cada una
   es su propio formulario, para que funcione sin JavaScript), asi que el
   estado se marca con una clase en vez de con :checked.  [ajustes-catalogo] */
.chip.puesto {
  border-color: var(--acento); color: var(--acento);
  background: var(--acento-suave); font-weight: 700;
}
table.matriz { width: 100%; border-collapse: collapse; }
table.matriz th {
  text-align: left; padding: .45rem .6rem .45rem 0;
  font-size: .8rem; white-space: nowrap; vertical-align: middle;
  color: var(--tinta-suave); font-weight: 650;
}
table.matriz td { padding: .25rem 0; }

/* ── Pantalla de pago ─────────────────────────────────────────────────────── */

.pago {
  display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .pago { grid-template-columns: 260px 1fr; }
}
/* Fondo blanco fijo: un QR sobre fondo oscuro no lo lee ningún lector, y aquí
   escanear importa más que la coherencia del tema. */
.qr {
  background: #fff; padding: .9rem; border-radius: var(--radio);
  line-height: 0; width: 100%; max-width: 260px; margin: 0 auto;
}
.qr svg { width: 100%; height: auto; display: block; }

/* ── Campos ───────────────────────────────────────────────────────────────── */

.campo { margin-bottom: .9rem; }
.campo label {
  display: block; margin-bottom: .3rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 650;
}
input, select, textarea, .entrada {
  width: 100%; padding: .75rem .8rem;
  font-family: var(--mono); font-size: 16px;   /* 16px evita el zoom de iOS */
  color: var(--tinta); background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
  transition: border-color var(--transicion);
}
input:focus, select:focus, textarea:focus, .entrada:focus {
  outline: none; border-color: var(--acento);
}
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }

/* ── Avisos: banda lateral, como un sello en el margen ────────────────────── */

.aviso {
  border: 1px solid var(--borde); border-left: 3px solid var(--tinta-tenue);
  border-radius: var(--radio-sm);
  padding: .75rem .9rem; margin: 0 0 1rem; font-size: .87rem;
  background: var(--superficie);
}
.aviso.bueno { border-left-color: var(--exito); background: var(--exito-suave); }
.aviso.malo  { border-left-color: var(--error); background: var(--error-suave); }
.aviso.ojo   { border-left-color: var(--alerta); background: var(--alerta-suave); }

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

.pildora {
  display: inline-block; padding: .18rem .5rem; border-radius: var(--radio-sm);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--borde-fuerte); color: var(--tinta-suave);
  background: var(--superficie-2);
}
.pildora.ok     { color: var(--exito);  border-color: var(--exito);  background: var(--exito-suave); }
.pildora.malo   { color: var(--error);  border-color: var(--error);  background: var(--error-suave); }
.pildora.espera { color: var(--alerta); border-color: var(--alerta); background: var(--alerta-suave); }
.pildora.info   { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); }
/* Gris neutro: «no hay nada que hacer» (skipped_drm en /portal/vaults), a
   diferencia del ámbar de `info`/`espera`. En glass repite la base, pero se
   declara aquí para que sea una clase real que lima.css pueda re-vestir. */
.pildora.neutra { color: var(--tinta-suave); border-color: var(--borde-fuerte); background: var(--superficie-2); }

/* ── Copiable ─────────────────────────────────────────────────────────────── */

.copiable {
  font-family: var(--mono); word-break: break-all; cursor: pointer;
  background: var(--superficie-2); border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-sm); padding: .6rem .7rem; display: block;
  font-size: .85rem;
}
.copiable:hover { border-color: var(--acento); }

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

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .55rem .6rem; text-align: left; vertical-align: middle; }
thead th {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 700;
  border-bottom: 1px solid var(--borde-fuerte);
}
tbody tr { border-top: 1px solid var(--borde); }
td.num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Navegación inferior: donde llega el pulgar ───────────────────────────── */

nav.abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: var(--superficie);
  background: color-mix(in srgb, var(--superficie) 96%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--borde);
  padding-bottom: var(--safe-bottom);
}
nav.abajo a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .6rem .25rem .55rem; text-decoration: none;
  color: var(--tinta-tenue); font-size: .62rem; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  border-top: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
nav.abajo a .ic { font-size: 1.15rem; line-height: 1; font-family: var(--emoji); }
nav.abajo a[aria-current="page"] {
  color: var(--acento); border-top-color: var(--acento);
}

nav.arriba { display: none; }
nav.arriba a {
  text-decoration: none; color: var(--tinta-suave);
  font-size: .72rem; font-weight: 650; padding: .35rem .55rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--radio-sm); transition: color var(--transicion);
}
nav.arriba a:hover { color: var(--tinta); }
nav.arriba a[aria-current="page"] { color: var(--acento); }

@media (min-width: 760px) {
  nav.abajo { display: none; }
  nav.arriba { display: flex; gap: .1rem; align-items: center; }
  main { padding-bottom: 3rem; }
}
@media (max-width: 759px) {
  header.barra .acciones .solo-escritorio { display: none; }
}

/* Dentro de Telegram la navegación NO cambia con el ancho: en Telegram de
   escritorio la ventana pasa de 760px y la misma app enseñaba botones distintos
   según el tamaño.  [webapp-nav] */
:root[data-telegram="1"] nav.abajo  { display: flex !important; }
:root[data-telegram="1"] nav.arriba { display: none  !important; }
:root[data-telegram="1"] main {
  padding-bottom: calc(66px + var(--safe-bottom) + 1.5rem) !important;
}
:root[data-telegram="1"] nav.abajo { padding-bottom: max(var(--safe-bottom), .35rem); }

/* ── Menú de la barra (engranaje) ─────────────────────────────────────────── */
/* <details> nativo: se abre sin JavaScript y el teclado lo maneja solo; el JS
   únicamente lo cierra al tocar fuera. Sustituye a la pestaña «Más» del
   rediseño del 16 ago 2026.  [web-navegacion] */

.menu-acciones { position: relative; }
.menu-acciones > summary { list-style: none; cursor: pointer; }
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones .panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  min-width: 250px; padding: .35rem;
}
.menu-acciones .fila { min-height: 44px; padding: .55rem .7rem; }

/* Tarjetas de panel con píldora de estado en el título («en el bot»): el
   flex evita que la píldora baile respecto al emoji y el texto.  [owner-panel] */
.rejilla .vidrio h3 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ── Velo modal ───────────────────────────────────────────────────────────── */
/* Para el popup de contraseña de respaldo. Uno solo por pantalla y siempre
   cerrable: bloquear del todo deja fuera al que viene con prisa.
     [identity-backup-auth] */

.velo {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0, 0, 0, .65);
}

/* ── Accesibilidad ────────────────────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Las islas de la barra de dos modos son del tema «lima» y aquí no existen:
   `display: contents` las saca del layout y los enlaces vuelven a ser hijos
   directos del flex, o sea la barra de siempre, byte a byte igual en pantalla.
   Sin esto, un <span> sin estilo convierte los enlaces en texto en línea.
     [dos-modos][tema-lima] */
nav.abajo .lima-isla { display: contents; }

/* ── Galería: el vault y el foro con la MISMA familia de piezas ─────────────
   [vault-galeria]
   Las dos pantallas enseñan lo mismo —modelos y su contenido— desde dos lados:
   el foro lo de todos (borroso), el vault lo tuyo (nítido). Por eso comparten
   tarjeta de modelo (`.portada`) y casilla (`.tesela`): quien pasa de una a
   otra reconoce el sitio. Van aquí y no en lima.css porque la web fuera de
   Telegram también las pinta; el tema solo cambia los tokens.

   Todo con `aspect-ratio`: el hueco existe ANTES de que llegue la imagen, así
   que la rejilla no salta mientras carga (CLS). El fondo de cada caja hace de
   esqueleto mientras tanto y de respaldo si la miniatura no llega. */

.portadas {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 1.2rem;
}
/* `.portada` es también la cabecera de la landing (centrada y con relleno,
   arriba): sin este reset la tarjeta de modelo heredaba el nombre centrado. Va
   acotado a `.portadas >` y no en la regla de abajo, que comparte selector con
   la de la landing y, al ir después, le quitaría su relleno.  [vault-galeria] */
.portadas > .portada { text-align: left; padding: 0; }
/* En el vault las portadas van en UNA fila que se desliza: en rejilla, con
   veinte modelos, había que bajar dos mil píxeles de tarjetas antes de ver un
   solo archivo. El 42% deja asomar la tercera, que es la pista de que la fila
   sigue. El foro conserva la rejilla: ahí las modelos SON el contenido.
     [vault-galeria] */
.portadas-fila {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
}
.portadas-fila::-webkit-scrollbar { display: none; }
.portadas-fila > .portada { scroll-snap-align: start; }
/* «Tus modelos» como botón de ancho completo: el nombre a la izquierda y la
   flecha a la derecha, para que se lea que ABRE algo.  [vault-galeria] */
.vault-btn-modelos {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: 0 0 1.1rem;
}
.portada {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--radio-lg);
  color: var(--tinta); text-decoration: none;
  background:
    radial-gradient(120% 80% at 15% 10%, var(--acento-suave) 0%, transparent 60%),
    radial-gradient(90% 80% at 90% 95%, var(--superficie-2) 0%, transparent 65%),
    var(--superficie);
  transition: transform var(--transicion);
}
.portada:active { transform: scale(.98); }
.portada > img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* El velo de abajo: el nombre va ENCIMA de la foto y tiene que leerse sobre
   una foto clara igual que sobre una oscura. */
.portada::after {
  content: ""; position: absolute; top: 45%; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  pointer-events: none;
}
.portada-txt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .8rem .75rem;
}
.portada-nombre {
  font-weight: 750; font-size: 1rem; line-height: 1.2; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portada-sub { font-size: .76rem; color: rgba(255,255,255,.78); }
.portada-marca {
  position: absolute; top: .55rem; left: .55rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .64rem; font-weight: 750; letter-spacing: .03em;
  padding: .28rem .55rem; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.portada-marca svg, .tesela-tipo svg, .filtro svg, .visor-acciones svg {
  width: 14px; height: 14px; flex: none;
}

/* Los filtros de tipo: enlaces, no botones — funcionan sin JS y la URL dice
   qué se está viendo. 44px de alto: es lo que se toca con el pulgar. */
.filtros { display: flex; gap: .45rem; margin: 0 0 .8rem; overflow-x: auto; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  min-height: 44px; padding: 0 .9rem; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  color: var(--tinta-suave); font-size: .85rem; font-weight: 650; text-decoration: none;
}
.filtro b { font-weight: 650; color: var(--tinta-tenue); }
.filtro[aria-current="page"] {
  background: var(--acento-suave); color: var(--acento); border-color: transparent;
}
.filtro[aria-current="page"] b { color: inherit; opacity: .8; }
/* Los filtros por clase de la ficha de un modelo se parten en dos renglones en
   vez de deslizarse: PPV y «Por mensaje» —lo de pago— caen siempre al final y
   a 390px no asomaban ni un píxel, así que no se descubrían nunca. La `.filtros`
   genérica sigue deslizándose a propósito ([web-filtros], las tablas).  [foro] */
.filtros-parte { flex-wrap: wrap; overflow: visible; }

.galeria {
  display: grid; gap: 3px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--radio); overflow: hidden;
}
.tesela {
  position: relative; display: block; aspect-ratio: 1;
  overflow: hidden; background: var(--superficie-2);
}
.tesela > img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--transicion);
}
.tesela:active > img { transform: scale(1.04); }
/* El icono de respaldo, debajo de la imagen: solo se ve si no llega. */
.tesela-icono {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;
  color: var(--tinta-tenue);
}
.tesela-icono svg { width: 26px; height: 26px; }
.tesela-tipo {
  position: absolute; left: .35rem; bottom: .35rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .72rem; font-weight: 700; color: #fff;
  padding: .18rem .4rem; border-radius: 6px; background: rgba(0,0,0,.6);
}

.mas-pagina { display: flex; justify-content: center; gap: .6rem; margin: 1rem 0 0; }

/* La cabecera de UNA modelo en su galería del vault. */
.cabeza-modelo { display: flex; align-items: center; gap: .85rem; margin: .2rem 0 1rem; }
.cabeza-modelo .avatar {
  position: relative; flex: none; width: 58px; height: 58px; border-radius: 999px;
  overflow: hidden; background: var(--superficie-2);
  box-shadow: 0 0 0 2px var(--acento);
}
.cabeza-modelo .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cabeza-modelo h1 { margin: 0; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
.cabeza-modelo .detalle { font-size: .82rem; color: var(--tinta-suave); }

/* El puente entre el vault y el foro: una franja que se toca entera. */
.puente {
  display: flex; align-items: center; gap: .75rem;
  min-height: 56px; padding: .7rem .9rem; margin: 0 0 1rem;
  border-radius: var(--radio); text-decoration: none; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
}
.puente .puente-ic {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento-suave); color: var(--acento);
}
.puente .puente-ic svg { width: 18px; height: 18px; }
.puente .puente-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.puente .puente-txt b { font-size: .92rem; }
.puente .puente-txt span { font-size: .78rem; color: var(--tinta-suave); }
.puente .flecha { color: var(--tinta-tenue); font-size: 1.3rem; }

/* Los sets del foro: tarjeta con la miniatura borrosa arriba y el texto
   debajo. Dos columnas, igual que las portadas. */
.sets {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.set-carta {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radio); background: var(--superficie);
}
.set-img {
  position: relative; aspect-ratio: 1; overflow: hidden; background: var(--superficie-2);
}
.set-img img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.set-cuerpo { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .7rem .75rem; min-width: 0; }
.set-titulo {
  font-weight: 650; font-size: .88rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.set-cuerpo .detalle { font-size: .74rem; color: var(--tinta-tenue); }
.pildoras { display: flex; flex-wrap: wrap; gap: .3rem; }
.pildora.tuyo { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); }

/* El visor: el archivo a lo ancho, sobre negro, y los controles debajo al
   alcance del pulgar. */
.visor-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0 0 .7rem; }
/* Los enlaces de volver (el «← …» de la galería, el foro y el visor) eran una
   línea de texto de 18-24px: fuera de Telegram son la salida principal y se
   fallaban con el pulgar. `volver` es una clase explícita y no `.guia > a`:
   `:only-child` no cuenta el texto, y un enlace en mitad de un párrafo de ayuda
   se convertiría en un bloque de 44px que parte el renglón.  [vault-galeria] */
a.volver { display: inline-flex; align-items: center; min-height: 44px; }
.visor-cab a { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; overflow-wrap: anywhere; }
.visor-cab .contador { font-variant-numeric: tabular-nums; color: var(--tinta-tenue); font-size: .85rem; flex: none; }
.visor {
  display: flex; align-items: center; justify-content: center;
  background: #000; border-radius: var(--radio); overflow: hidden;
  min-height: 40vh; max-height: 72vh;
  /* El 72vh no descontaba la cabecera ni la barra de abajo: con una foto o un
     vídeo vertical a 375x667, Anterior / Descargar / Siguiente caían debajo de
     la barra. 16.5rem ≈ cabecera y enlace de volver (116px) + acciones (61) +
     barra (72) + 16 de aire, más el área segura, que es lo que sube la barra
     en un iPhone. Medido: los botones quedan 16px por encima de la barra a
     375x667 y a 390x844. La línea de arriba se queda de respaldo para un
     WebView que no entienda `min()`, y va `vh` y no `svh` por lo mismo: una
     declaración inválida se descarta ENTERA y el visor se quedaría sin tope.
       [vault-galeria] */
  max-height: min(72vh, calc(100vh - 16.5rem - var(--safe-bottom)));
}
.visor img, .visor video {
  display: block; max-width: 100%; object-fit: contain;
  max-height: 72vh; max-height: min(72vh, calc(100vh - 16.5rem - var(--safe-bottom)));
}
.visor video { width: 100%; }
.visor-acciones { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; margin: .8rem 0 .4rem; }
.visor-acciones a {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 48px; padding: 0 .9rem; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  color: var(--tinta); text-decoration: none; font-weight: 650; font-size: .88rem;
}
.visor-acciones a.principal { background: var(--acento); color: var(--acento-tinta); border-color: transparent; }
.visor-acciones .apagado { visibility: hidden; }
.visor-meta { text-align: center; color: var(--tinta-tenue); font-size: .8rem; margin: 0; }

.fallos { margin-top: 1.2rem; }
/* Sin `display:flex`: un <summary> flex deja de ser `list-item` y pierde el
   triángulo, así que «No se pudieron guardar (N)» parecía un pie de texto y
   nadie sabía que al tocarlo sale el motivo. El área de 44px la da el relleno.
     [vault-galeria] */
.fallos > summary {
  cursor: pointer; min-height: 44px; padding: .7rem 0;
  color: var(--tinta-suave); font-size: .88rem;
}
/* Sin miniatura, la inicial de la modelo en grande y casi transparente: la
   tarjeta sigue teniendo identidad en vez de ser un hueco oscuro. */
.portada-inicial {
  position: absolute; top: 0; right: 0; bottom: 32%; left: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; font-weight: 800; text-transform: uppercase;
  color: rgba(255, 255, 255, .16); pointer-events: none;
}

/* ── Vault: origen, favoritos y duración en la casilla ─────  [vault-galeria]
   El origen va arriba a la izquierda y en color, porque es lo primero que el
   dueño pidió ver: PPV (lo de pago) en el acento, Feed y Chat en neutros.
   A .68rem y no a .58: a 9px, en mayúsculas y sobre una foto, apenas se leía
   en el móvil. La del visor (`.visor-origen`) va a .76 para seguir siendo más
   grande que la de la casilla. */
.tesela-origen {
  position: absolute; top: .3rem; left: .3rem; z-index: 1;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .14rem .38rem; border-radius: 6px; color: #fff; background: rgba(0,0,0,.55);
}
.tesela-origen-paid { background: var(--acento); color: var(--acento-tinta); }
.tesela-origenes { position: absolute; top: .3rem; left: .3rem; z-index: 1; display: flex; gap: .25rem; flex-wrap: wrap; }
.tesela-origenes .tesela-origen { position: static; }
.tesela-fav {
  position: absolute; top: .3rem; right: .3rem; z-index: 1;
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0,0,0,.55); color: #ffd35a;
}
.tesela-fav svg { width: 13px; height: 13px; }
/* Se parte en dos renglones en vez de deslizarse: con la barra oculta, a 390px
   la última ficha salía cortada («Chat 2» por «Chat 29») y nada decía que la
   fila seguía.  [vault-galeria] */
.filtros-origen { margin-top: -.3rem; flex-wrap: wrap; overflow-x: visible; }
.filtro-fav[aria-current="page"], .filtro-fav[aria-pressed="true"] { color: #ffd35a; background: rgba(255, 211, 90, .12); }
.visor { position: relative; }
.visor-origen { top: .6rem; left: .6rem; font-size: .76rem; padding: .22rem .5rem; }
.visor-fav { display: flex; justify-content: center; margin: 0 0 .4rem; }
.visor-fav .filtro { cursor: pointer; font: inherit; font-size: .85rem; font-weight: 650; }
/* De qué perfil y de qué set sale el archivo abierto, con el atajo a verlo
   entero. Va bajo la foto: desde «Lo último» un archivo no decía de dónde
   venía.  [vault-galeria] */
.visor-set { margin: 1rem 0 .2rem; display: flex; flex-direction: column; gap: .6rem; }
.visor-set-perfil {
  display: flex; align-items: baseline; gap: .5rem; min-height: 44px;
  text-decoration: none; color: var(--tinta);
}
.visor-set-perfil .etq { color: var(--tinta-tenue); font-size: .78rem; flex: none; }
.visor-set-perfil strong { font-size: .98rem; overflow-wrap: anywhere; }

/* ── Foro: la ficha de un modelo ────────────────────────────  [foro-temas] */
.foro-hero {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem;
  padding: 1.1rem 1rem 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);
}
.foro-hero h1 { margin: 0 0 .35rem; font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; }
.foro-hero-cifras { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .82rem; color: var(--tinta-suave); }
.foro-hero-cifras b { color: var(--tinta); font-weight: 750; }
.foro-hero-acciones { display: flex; align-items: center; gap: .5rem; }
.foro-hero-acciones .boton { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.foro-hero-acciones .boton svg { width: 16px; height: 16px; }

/* Pestañas: una fila de enlaces, la actual subrayada con el acento. */
.pestanas {
  display: flex; gap: .2rem; margin: 0 0 1rem;
  border-bottom: 1px solid var(--borde-fuerte);
}
.pestanas a {
  flex: 1; text-align: center; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  color: var(--tinta-suave); text-decoration: none; font-weight: 650; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestanas a b { font-weight: 650; font-size: .75rem; color: var(--tinta-tenue); }
.pestanas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }
.pestanas a[aria-current="page"] b { color: var(--acento); }

/* El formulario de un tema nuevo, plegado. El `scroll-margin-top` (el mismo de
   `.respuesta` y `.set-carta`) es para el ancla `#nuevo`: sin él, al llegar
   desde Sets o volver con un error, el título quedaba bajo la cabecera fija. */
.nuevo-tema { margin: 0 0 1rem; border-radius: var(--radio); background: var(--superficie); scroll-margin-top: 5rem; }
.nuevo-tema > summary {
  list-style: none; cursor: pointer; min-height: 48px; padding: 0 1rem;
  display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--acento);
}
.nuevo-tema > summary::-webkit-details-marker { display: none; }
.nuevo-tema > summary svg { width: 18px; height: 18px; }
.nuevo-tema form, .responder, .muro-form { display: flex; flex-direction: column; gap: .6rem; }
.nuevo-tema form { padding: 0 1rem 1rem; }
.nuevo-tema textarea, .responder textarea, .muro-form textarea { resize: vertical; min-height: 5.5rem; }
.responder, .muro-form { margin: 1rem 0; }

/* La lista de temas. */
.temas { display: flex; flex-direction: column; gap: .5rem; }
.tema-fila {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .75rem .85rem; border-radius: var(--radio);
  background: var(--superficie); color: var(--tinta); text-decoration: none;
  transition: transform var(--transicion);
}
.tema-fila:active { transform: scale(.99); }
.tema-fijado { box-shadow: inset 3px 0 0 var(--acento); }
.tema-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.tema-titulo {
  font-weight: 700; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tema-cuerpo .detalle { font-size: .76rem; color: var(--tinta-tenue); }
.tema-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.tema-cifra { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; color: var(--tinta-suave); }
.tema-cifra svg { width: 14px; height: 14px; }
.tema-cifra.corazon-on { color: #ff5d7a; }
.tema-set { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }

/* Avatares: la inicial del apodo sobre uno de seis colores estables. */
.foro-av {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .95rem; color: #0b0c0a;
}
.foro-av-0 { background: #b9d95e; } .foro-av-1 { background: #7cc6ff; }
.foro-av-2 { background: #ff9bb3; } .foro-av-3 { background: #ffd35a; }
.foro-av-4 { background: #b69cff; } .foro-av-5 { background: #6fe0c4; }
.foro-av-mio { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--acento); }

/* El corazón: un botón de 44px de alto aunque se vea pequeño. */
.corazon-form { display: inline-flex; margin: 0; }
.corazon {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; min-width: 44px;
  padding: 0 .7rem; border-radius: 999px; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borde-fuerte);
  color: var(--tinta-suave); font: inherit; font-size: .85rem; font-weight: 700;
  transition: transform var(--transicion), color var(--transicion);
}
.corazon svg { width: 17px; height: 17px; }
.corazon:active { transform: scale(.92); }
.corazon-on { color: #ff5d7a; border-color: rgba(255, 93, 122, .45); background: rgba(255, 93, 122, .1); }

/* Un set compartido dentro de un mensaje. */
.set-mini {
  display: flex; align-items: center; gap: .65rem; margin: .5rem 0 0;
  padding: .45rem; border-radius: var(--radio-sm);
  background: var(--superficie-2); color: var(--tinta); text-decoration: none;
  border: 1px solid var(--borde-fuerte);
}
.set-mini-img { width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; background: var(--superficie); }
.set-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-mini-txt { display: flex; flex-direction: column; min-width: 0; font-size: .85rem; }
.set-mini-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-mini-txt .etiqueta { font-size: .62rem; }
.set-mini-txt .detalle { font-size: .72rem; color: var(--tinta-tenue); }

/* Un tema abierto y sus respuestas. */
.tema-apertura {
  padding: 1rem; border-radius: var(--radio-lg); background: var(--superficie); margin: 0 0 1rem;
}
.tema-apertura h1 { font-size: 1.3rem; line-height: 1.2; margin: .7rem 0 .4rem; overflow-wrap: anywhere; }
.tema-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .8rem; }
.tema-sub { font-size: 1rem; margin: 1.2rem 0 .6rem; color: var(--tinta-suave); }
.respuestas { display: flex; flex-direction: column; gap: .5rem; }
.respuesta { display: flex; gap: .6rem; padding: .75rem .8rem; border-radius: var(--radio); background: var(--superficie); scroll-margin-top: 5rem; }
.respuesta:target { box-shadow: inset 0 0 0 2px var(--acento); }
.respuesta-cuerpo { flex: 1; min-width: 0; }
.respuesta-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; }
.respuesta-cab .detalle { font-size: .74rem; color: var(--tinta-tenue); }
.respuesta-texto { margin: .3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.respuesta-pie { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
/* Sin `min-height` propio: manda el 44px de `.corazon`. Lo bajaban a 36 justo
   donde más se toca.  [foro] */
.respuesta-pie .corazon { padding: 0 .55rem; }
.mod { display: inline-flex; gap: .4rem; margin-left: auto; }
.mod-form { display: inline-flex; margin: 0; }
.mod-boton {
  min-height: 36px; padding: 0 .7rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px dashed var(--borde-fuerte);
  color: var(--tinta-tenue); font: inherit; font-size: .75rem; font-weight: 650;
}

/* Las acciones de cada set: su ♥ (los sets no se comentan).  [foro-contenido] */
.set-acciones { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
/* 44px de alto, como todo `.corazon`: en la rejilla queda pegado al enlace de
   la tarjeta, y a 36 un toque impreciso abría el set en vez de dar ♥.  [foro] */
.set-acciones .corazon { padding: 0 .55rem; }
.set-carta { scroll-margin-top: 5rem; }
.set-carta:target { box-shadow: inset 0 0 0 2px var(--acento); }

/* Un icono dentro de una cifra del resumen (el ♥ de los likes): a la altura
   del número, no a su tamaño natural de SVG.  [vault-galeria] */
.cifra svg { width: .8em; height: .8em; vertical-align: -.06em; color: #ff5d7a; }

/* ── Foro: sets públicos y privados ─────────────────────────  [foro-contenido]
   La clase de cada set (Feed gratis / Bloqueado / PPV / Por mensaje) en una
   etiqueta de color arriba a la izquierda, y un candado si sale borroso: se lee
   de un vistazo qué se ve y qué no, sin abrir nada. */
.set-carta { position: relative; }
.set-enlace { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.set-clase {
  position: absolute; top: .45rem; left: .45rem; z-index: 1;
  font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 6px; color: #fff; background: rgba(0,0,0,.6);
}
.set-clase-gratis { background: var(--acento); color: var(--acento-tinta); }
.set-clase-ppv { background: #b69cff; color: #140b2c; }
.set-clase-bloqueado { background: #ffd35a; color: #2a1d00; }
.set-clase-por_confirmar { background: #3a3f3a; color: #e8ece6; }
.set-clase-chat { background: #7cc6ff; color: #04203a; }
/* La plataforma de la que es la modelo, en cada set (25 oct 2026): un chip
   con las iniciales de la categoría y SU color, abajo a la izquierda (el
   candado va abajo a la derecha). Dice de un vistazo de qué red vino. */
.set-cat {
  position: absolute; bottom: .45rem; left: .45rem; z-index: 1;
  font-size: .58rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: .18rem .4rem; border-radius: 6px; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6); box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* En la miniatura chica (Inicio) no cabe un chip: un punto del color. */
.tesela-cat {
  position: absolute; top: .3rem; left: .3rem; z-index: 1;
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.set-candado {
  position: absolute; top: .45rem; right: .45rem; z-index: 1;
  width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff;
}
.set-candado svg { width: 14px; height: 14px; }
/* En la tarjeta de la rejilla el candado baja a la esquina de abajo: arriba
   compartía fila con la etiqueta y a 360px tapaba la «R» de «SIN CONFIRMAR».
   Abajo a la derecha no hay nada, y la etiqueta se lee entera en los dos
   idiomas.  [foro-contenido] */
.set-img .set-candado { top: auto; bottom: .45rem; }
.set-acciones { padding: 0 .7rem .7rem; }

/* La ficha de un set. */
.set-cabeza { position: relative; margin: 0 0 1rem; }
.set-cabeza .set-clase { position: static; display: inline-block; margin-bottom: .5rem; }
.set-cabeza h1 { margin: 0 0 .4rem; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.set-privado {
  position: relative; overflow: hidden; border-radius: var(--radio-lg);
  aspect-ratio: 4 / 3; background: var(--superficie-2); margin: 0 0 1rem;
}
.set-privado img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.set-privado-txt {
  position: absolute; top: auto; right: 0; bottom: 0; left: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.2rem 1rem 1rem; text-align: center; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.set-privado-txt svg { width: 26px; height: 26px; }
.set-privado-txt span { font-size: .82rem; opacity: .85; }
.galeria + .set-privado { margin-top: 1rem; }
/* `set-ficha` y no `ficha`: `.ficha` es la tarjeta del inicio en lima.css, que
   se carga después y, con la misma especificidad, aplastaba esta rejilla a una
   columna (y la hacía parpadear y vibrar al tocarla, como un botón).  [foro] */
.set-ficha {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  margin: 1rem 0; padding: 0;
}
.set-ficha > div { padding: .65rem .8rem; border-radius: var(--radio-sm); background: var(--superficie); }
.set-ficha dt { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-tenue); }
.set-ficha dd { margin: .2rem 0 0; font-weight: 650; display: flex; align-items: center; gap: .3rem; overflow-wrap: anywhere; }
.set-ficha dd svg { width: 15px; height: 15px; flex: none; }
.set-acciones-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 0; margin: 0 0 .5rem; }
.publicar-form { display: inline-flex; margin: 0; }
.publicar-form .boton { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.publicar-form .boton svg { width: 17px; height: 17px; }
.filtro-clase-gratis[aria-current="page"] { background: var(--acento); color: var(--acento-tinta); }

/* ── Teléfonos con WebView viejo ──────────────────────────────────────────  [compat-movil]
   Chrome < 88 no conoce `aspect-ratio`: la caja, cuyo contenido es todo
   absoluto, medía 0 y el foro y el vault se veían como tiras de 24 px (un
   set PPV, vacío). El hueco se reserva con el padding de un pseudo; en un
   motor moderno este bloque no aplica. Y `inset` (Chrome 87+) va escrito
   como top/right/bottom/left en todo el archivo por lo mismo. */
@supports not (aspect-ratio: 1) {
  .tesela::before, .set-img::before { content: ""; display: block; padding-top: 100%; }
  .portada::before { content: ""; display: block; padding-top: 125%; }
  .set-privado::before { content: ""; display: block; padding-top: 75%; }
}

/* Motivos rapidos de un reclamo: una fila por motivo, toda ella pulsable (48 px
   de alto). El input global mide 100% de ancho: aqui se devuelve a su tamano.
   [numeros-caso] */
.motivos { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.motivos legend {
  padding: 0; margin-bottom: .3rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave); font-weight: 650;
}
.motivos label {
  display: flex; align-items: center; gap: .7rem;
  min-height: 48px; padding: .3rem .1rem;
  border-bottom: 1px solid var(--borde); cursor: pointer;
}
.motivos label:last-child { border-bottom: 0; }
.motivos input {
  width: 1.25rem; height: 1.25rem; flex: none; padding: 0; margin: 0;
  accent-color: var(--acento);
}
.pedido-elegido {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .75rem .8rem; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm); background: var(--superficie-2);
}
.pedido-elegido span { color: var(--tinta-suave); font-size: .85rem; }
.pedido-elegido code { overflow-wrap: anywhere; }