/* ============================================================================
   trueke · Identidad visual
   ============================================================================

   Esta hoja va DESPUÉS de estilos.css y manda sobre ella. Está aparte a
   propósito: así el rediseño se puede revisar, ajustar o quitar entero sin
   tocar una línea de lo que ya funcionaba.

   De dónde sale cada cosa:

     · El manual de marca pone el naranja #FE9E14, el negro y la Poppins.
     · El verde se queda — es lo que separa «hecho» de «por hacer» en toda la
       aplicación, y en una de trueques eso vale más que la coherencia con un
       folleto. Naranja para lo que hay que pulsar, verde para lo que ya salió
       bien.
     · El fondo negro, las esquinas muy redondeadas y los botones de cápsula
       salen de la referencia que marcó el dueño.

   Sin neón ni brillos: el verde fosforito, el rosa y el morado hacían que la
   app pareciera un juego. Los tres momentos especiales —encaje, trueque
   cerrado y nivel nuevo— se marcan con el verde de siempre, sin resplandor.
   ========================================================================== */

:root {
  /* --- marca ------------------------------------------------------------ */
  --naranja: #fe9e14;
  --naranja-vivo: #ff8c00;
  --naranja-suave: rgba(254, 158, 20, .14);

  /* El verde se queda para lo conseguido. */
  --verde: #10b981;
  --verde-claro: #10b981;
  --neon: #10b981;
  --sobre-verde: #04231c;

  /* Rojo y morado apagados: sin el rosa ni el lila de antes. */
  --rojo: #e5484d;
  --morado: #8b7fd1;

  /* --- fondo: negro de verdad, como la referencia ----------------------- */
  --fondo: #000000;
  --tarjeta: #141414;
  --tarjeta-alta: #1e1e1e;
  --borde: #262626;
  --texto: #ffffff;
  --suave: #8e8e8e;
  --ambar: #fe9e14;

  --sombra: 0 2px 10px rgba(0, 0, 0, .6), 0 12px 40px rgba(0, 0, 0, .45);
  --brillo: 0 0 0 rgba(0, 0, 0, 0);
  --brillo-magico: none;

  /* Cápsulas y esquinas generosas: es lo que más cambia la sensación. */
  --radio: 20px;
  --radio-chico: 14px;
  --capsula: 999px;

  --letra-titulo: "Poppins", "Segoe UI", system-ui, sans-serif;
  --letra-texto: "Poppins", "Segoe UI", system-ui, sans-serif;
}

/* En claro se invierte, pero el naranja no se toca: es la marca. */
:root[data-tema="claro"] {
  --fondo: #f6f6f6;
  --tarjeta: #ffffff;
  --tarjeta-alta: #ffffff;
  --borde: #e4e4e4;
  --texto: #0a0a0a;
  --suave: #6b6b6b;
  --verde: #059669;
  --verde-claro: #059669;
  --neon: #047857;
  --sobre-verde: #ffffff;
  --brillo-magico: none;
  --sombra: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 28px rgba(0, 0, 0, .07);
}

/* --- base ------------------------------------------------------------- */

body {
  font-family: var(--letra-texto);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo-grande, .logo {
  font-family: var(--letra-titulo);
  font-weight: 700;
  letter-spacing: -.03em;
}
h1 { font-size: 27px; }

/* El logotipo de la marca sustituye al texto «trueKe» allí donde aparecía. */
.logo-grande, .logo {
  background: url('marca/logo-blanco.png') no-repeat center / contain;
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  width: 168px;
  height: 50px;
  margin: 0 auto;
}
:root[data-tema="claro"] .logo-grande,
:root[data-tema="claro"] .logo {
  background-image: url('marca/logo-negro.png');
}
.cabecera .logo { width: 104px; height: 31px; margin: 0; }

/* --- botones: cápsula, y el naranja manda ------------------------------ */

.boton {
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
  border-radius: var(--capsula);
  min-height: 52px;
  padding: 0 24px;
  background: var(--naranja);
  color: #fff;
  border: 0;
  transition: filter .15s, transform .08s;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { transform: scale(.98); }

.boton.grande { min-height: 56px; font-size: 17px; }
.boton.auto { min-height: 46px; font-size: 15px; }

/* El secundario y el fantasma no compiten con la acción principal. */
.boton.secundario,
.boton.fantasma {
  background: var(--tarjeta-alta);
  color: var(--texto);
  border: 1px solid var(--borde);
}
.boton.secundario:hover,
.boton.fantasma:hover { background: var(--borde); filter: none; }

/* Lo ya conseguido va en verde: cerrar un trueque no es lo mismo que
   proponerlo, y el color lo dice antes que el texto. */
.boton.exito, .boton.verde { background: var(--verde); }

/* --- tarjetas ---------------------------------------------------------- */

.tarjeta, .anuncio, .escaparate-tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.anuncio img, .anuncio .foto, .miniatura {
  border-radius: var(--radio-chico);
}

/* --- chips de filtro: control segmentado ------------------------------- */

.filtros { gap: 8px; }
.chip {
  border-radius: var(--capsula);
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  color: var(--suave);
  font-family: var(--letra-titulo);
  font-weight: 500;
  font-size: 13.5px;
  padding: 9px 16px;
  min-height: 38px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.chip:hover { background: var(--tarjeta-alta); color: var(--texto); }
.chip.activo {
  background: var(--tarjeta-alta);
  color: var(--texto);
  border-color: var(--borde);
  font-weight: 600;
}

/* --- campos ------------------------------------------------------------ */

input, textarea, select, .campo {
  background: var(--tarjeta) !important;
  border: 1px solid var(--borde) !important;
  border-radius: var(--radio-chico) !important;
  color: var(--texto) !important;
  font-family: var(--letra-texto) !important;
  font-size: 16px;
  padding: 14px 16px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--naranja) !important;
}
::placeholder { color: var(--suave); }

/* --- barra inferior: el botón de publicar, elevado y naranja ----------- */

.barra-inferior {
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.barra-inferior button {
  font-family: var(--letra-titulo);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--suave);
}
.barra-inferior button.activa { color: var(--naranja); }
.barra-inferior button.destacado span:first-child {
  background: var(--naranja);
  color: #fff;
  width: 46px;
  height: 34px;
  border-radius: var(--radio-chico);
  display: grid;
  place-items: center;
  font-size: 22px;
  margin: -4px auto 2px;
  box-shadow: 0 4px 14px rgba(254, 158, 20, .4);
}

/* --- etiquetas --------------------------------------------------------- */

.etiqueta {
  border-radius: var(--capsula);
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.etiqueta.encaje {
  background: var(--verde);
  color: var(--sobre-verde);
}

/* --- la cabecera ------------------------------------------------------- */

.cabecera {
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.icono-cabecera, .avatar-cabecera {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--capsula);
}

/* --- La Liga y los paneles: heredan la marca --------------------------- */

.eyebrow { color: var(--naranja); }
.dinero, .racha-dias, .tu-puesto, .paquete-monedas, .cifra {
  font-family: var(--letra-titulo);
  font-weight: 700;
  letter-spacing: -.03em;
}
.paquete-precio { background: var(--naranja); }
.bote, .tu-situacion, .racha-caja, .accion-semana, .categoria-premio,
.outpoint, .prediccion, .aviso-fila, .mecanismo, .hallazgo, .precio-fila,
.movimiento, .paquete, .division, .estrella-fila, .cond-paso, .embudo-paso {
  border-radius: var(--radio);
}
.trozo { background: var(--naranja-suave); color: var(--naranja); }
.chip-liga {
  background: rgba(0, 0, 0, .78);
  border-color: var(--borde);
  font-family: var(--letra-titulo);
}
.chip-liga.urgente { color: var(--naranja); border-color: var(--naranja); }

/* El primer puesto y el bote, en naranja: son lo que se persigue. */
.marcador .fuerte { color: var(--naranja); }
.bote-cifra .dinero { color: var(--naranja); }

/* --- la puerta de entrada ---------------------------------------------- */

.puerta { background: var(--fondo); }
.puerta-caja {
  background: transparent;
  border: 0;
  box-shadow: none;
  max-width: 400px;
}
.lema {
  font-family: var(--letra-titulo);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--texto);
  margin: 18px 0 8px;
}
.lema strong { color: var(--naranja); }
.pestanas { gap: 6px; }
.pestana {
  border-radius: var(--capsula);
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--borde);
  background: var(--tarjeta);
  color: var(--suave);
  min-height: 42px;
}
.pestana.activa { background: var(--tarjeta-alta); color: var(--texto); }

/* La marca de la pantalla de carga y de la puerta. */
.marca-logo {
  width: auto;
  height: 46px;
  border-radius: 0;
  box-shadow: none;
  content: url('marca/logo-blanco.png');
  margin-bottom: 4px;
}
:root[data-tema="claro"] .marca-logo { content: url('marca/logo-negro.png'); }
.pantalla-carga .logo-grande, .puerta-caja .logo-grande { display: none; }

/* ============================================================================
   La Vitrina: pantalla completa y un anuncio por gesto
   ============================================================================

   Vuelve a ser un feed a pantalla completa, con el vidêdo sonando y un
   anuncio por deslizamiento. El paso intermedio por tarjetas se probó y se
   descartó: la Vitrina ordena por cuánto aguanta la gente mirando, y eso solo
   se mide bien si cada clip ocupa la pantalla entera. En una lista de
   tarjetas pasan tres por pantalla y no hay forma de saber cuál miraban.

   Lo que SÍ se queda del rediseno, porque no dependía de la forma:

     · El naranja de la marca, las cápsulas y los iconos de línea.
     · Las tres pestanas, que filtran de verdad.
     · La línea «Busca:», que dice a cambio de qué sin tener que abrir nada.
     · El botón con su nombre escrito — ahora «Truekéalo»— en vez de un icono
       de apretón de manos que no decía qué iba a pasar al pulsarlo.
   ========================================================================== */

.vitrina-marco { position: relative; }

.vitrina {
  height: 100dvh;
  overflow-y: auto;
  /* `mandatory` y `always`: un gesto, un anuncio. Sin el `stop`, un
     deslizamiento fuerte se salta tres y la cuenta de visionado de los del
     medio queda en cero. */
  scroll-snap-type: y mandatory;
  background: var(--fondo);
  margin: 0;
  scrollbar-width: none;
}
.vitrina::-webkit-scrollbar { display: none; }

/* --- las pestanas, flotando sobre el vídeo ----------------------------- */

.vit-cabeza {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: max(10px, env(safe-area-inset-top)) 16px 0;
  /* Sin fondo: el vídeo tiene que verse entero. La legibilidad la da el
     degradado de abajo y la propia cápsula de las pestanas. */
  pointer-events: none;
}
.vit-cabeza > * { pointer-events: auto; }

.segmentado {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--capsula);
  padding: 4px;
  max-width: 340px;
  margin: 0 auto;
}
.segmentado button {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .7);
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -.01em;
  padding: 8px 4px;
  border-radius: var(--capsula);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.segmentado button:hover { color: #fff; }
.segmentado button.activo {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  text-shadow: none;
}

.vit-aviso {
  max-width: 340px;
  margin: 8px auto 0;
  padding: 10px 14px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(10px);
  border: 1px solid var(--naranja);
  color: var(--naranja);
  border-radius: var(--radio-chico);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* --- cada anuncio ------------------------------------------------------- */

.escaparate {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}
.escaparate > video, .escaparate > img.fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv-sinfoto { font-size: 96px; opacity: .45; }

/* El degradado es lo que hace legible el texto encima de cualquier foto.
   Tiene que llegar bastante arriba: el título puede ocupar dos líneas y el
   botón ya está por debajo. */
.escaparate .velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .92) 0%,
    rgba(0, 0, 0, .55) 32%,
    rgba(0, 0, 0, .12) 58%,
    transparent 76%);
  pointer-events: none;
}

.tv-dur {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  right: 14px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--capsula);
}
.tv-dur:empty { display: none; }

.sin-sonido {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  left: 14px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 0;
  border-radius: var(--capsula);
  width: 38px;
  height: 38px;
  font-size: 17px;
  cursor: pointer;
  z-index: 3;
}

/* --- el bloque de abajo a la izquierda ---------------------------------- */

.escaparate .ficha {
  position: absolute;
  left: 16px;
  right: 82px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  color: #fff;
  z-index: 2;
}
.escaparate .ficha .quien {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.escaparate .ficha .quien img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .85);
}
.tv-sinfoto-mini { font-size: 20px; }
.escaparate .ficha .quien strong { font-weight: 600; }
.escaparate .ficha .quien .etiqueta {
  font-size: 9.5px;
  padding: 3px 7px;
  letter-spacing: .03em;
}

.escaparate .ficha h3 {
  font-family: var(--letra-titulo);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.22;
  margin: 8px 0 0;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}

.tv-busca {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .85);
}
.tv-busca span { color: rgba(255, 255, 255, .62); font-weight: 500; }

.tv-sitio {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* El lema verde de antes ya no se pinta: lo dice la línea «Busca:». */
.escaparate .ficha .lema { display: none; }

/* «Truekéalo»: el único botón con nombre de toda la pantalla, porque es la
   única acción que lleva a alguna parte. */
.escaparate .match-btn {
  margin-top: 12px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--capsula);
  background: var(--naranja);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--letra-titulo);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(254, 158, 20, .35);
}
.escaparate .match-btn span:first-child {
  display: block;
  font-size: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
/* Ya truekeado deja de ser la llamada: pasa a verde y deja de gritar. */
.escaparate .match-btn.activo {
  background: var(--verde);
  box-shadow: none;
  animation: none;
}

/* --- la columna de acciones, a la derecha -------------------------------- */

.acciones-vitrina {
  position: absolute;
  right: 10px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  display: grid;
  gap: 20px;
  justify-items: center;
  z-index: 2;
}
.acciones-vitrina .tv-mini {
  border: 0;
  background: none;
  color: #fff;
  display: grid;
  justify-items: center;
  gap: 3px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  padding: 0;
}
.acciones-vitrina .tv-mini span:first-child {
  display: block;
  font-size: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .7));
}
/* El corazón se rellena cuando ya lo diste: el contorno solo no lo dice. */
.acciones-vitrina .tv-mini.activo { color: var(--rojo, #ff5577); }
.acciones-vitrina .tv-mini.activo .ico { fill: currentColor; }

/* --- vacíos y carga ------------------------------------------------------ */

.escaparate.vit-vacio {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px;
  color: var(--texto);
}
.pista-vitrina {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--suave);
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}

/* --- el reloj de la liga ------------------------------------------------
   Arriba a la derecha, por debajo de la fila de pestanas para no taparlas, y
   con fondo translucido porque lo que hay detras es video. */
.chip-liga {
  top: calc(max(10px, env(safe-area-inset-top)) + 52px);
  right: 14px;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11.5px;
  padding: 6px 12px;
}
.chip-liga.urgente { color: var(--naranja); border-color: var(--naranja); }

/* La nota de quien no tiene valoraciones no puede ocupar media linea: en la
   tarjeta va de apoyo, no de titular. */
.escaparate .ficha .quien .etiqueta {
  font-size: 9.5px;
  padding: 3px 7px;
  letter-spacing: .03em;
  flex: 0 0 auto;
}

/* --- iconos de linea ----------------------------------------------------
   Heredan el color del boton, asi que el naranja de la pestana activa y el
   rojo del corazon marcado salen solos, sin una imagen por estado. */
.ico { display: block; }

.barra-inferior button span:first-child {
  display: grid;
  place-items: center;
  font-size: 0;
}
.barra-inferior button.destacado span:first-child {
  width: 50px;
  height: 36px;
}


/* --- Iconos de línea en lugar de emoji ---------------------------------
   Los dibuja publico/iconos.js. Van en línea con el texto, toman su color
   y no cambian de un sistema a otro. Donde antes había un emoji grande
   (nivel, estados vacíos, celebración) va el icono dentro de un círculo. */
.ico-linea {
  display: inline-block;
  vertical-align: -0.2em;
  flex-shrink: 0;
}
.ico-linea.apagado { opacity: .3; }

.emoji:has(> .ico-linea) {
  display: inline-grid;
  place-items: center;
  color: var(--naranja);
  font-size: inherit;
}
.emoji.circulo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--naranja-suave);
}
.emoji.circulo.grande { width: 72px; height: 72px; margin: 0 auto; }
.vacio .emoji:has(> .ico-linea) {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--tarjeta-alta);
  color: var(--suave);
}
.celebracion .emoji.circulo { width: 84px; height: 84px; margin: 0 auto 8px; animation: none; }
.nivel-cabecera .emoji:has(> .ico-linea) { color: var(--naranja); }
.mision .emoji:has(> .ico-linea),
.premio-tarjeta .emoji:has(> .ico-linea) { justify-self: center; }
.logro .emoji:has(> .ico-linea) { margin: 0 auto 4px; }

.anuncio-foto .ico-linea { color: var(--suave); opacity: .7; }

.avatar-vacio {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--tarjeta-alta);
  color: var(--suave);
}

/* Las métricas de la tarjeta: icono y número alineados. */
.etiqueta .ico-linea,
.cambio .ico-linea,
.racha-chip .ico-linea { vertical-align: -0.18em; margin-right: 2px; }