/* =========================================================================
   sniper.cards — interfaz
   =========================================================================

   Los colores son los de `design/tokens.css`, sacados de la ilustración de
   Mega Charizard X, y su semántica manda sobre cualquier decisión estética:

     ÁMBAR = OPORTUNIDAD. El dinero. El "actúa ya".
     CIAN  = EVIDENCIA.   La confianza, el porqué, la traza.

   REGLA QUE GOBIERNA TODA ESTA HOJA: el ámbar se reserva CASI EN EXCLUSIVA
   para las oportunidades. Si el ámbar está también en los botones, en los
   enlaces y en los bordes de foco, deja de significar "chollo" y pasa a
   significar "interfaz".

   Por eso las MEJORES OFERTAS no llevan ni una gota de ámbar. Son inventario,
   no aviso, y tienen que verse distintas de un vistazo y sin leer.
   ========================================================================= */

:root {
  --bg:            oklch(0.14 0.012 265);
  --surface:       oklch(0.185 0.018 260);
  --surface-2:     oklch(0.225 0.020 258);
  --border:        oklch(0.30 0.020 258);
  --border-strong: oklch(0.40 0.022 255);

  --text:   oklch(0.96 0.006 250);
  --muted:  oklch(0.72 0.012 252);
  --faint:  oklch(0.55 0.014 254);

  --amber:        oklch(0.74 0.17 55);
  --amber-bright: oklch(0.85 0.15 78);
  --amber-wash:   oklch(0.26 0.055 55);

  --cyan:        oklch(0.75 0.13 225);
  --cyan-bright: oklch(0.88 0.11 208);
  --cyan-wash:   oklch(0.24 0.045 232);

  --danger:  oklch(0.64 0.18 28);
  --success: oklch(0.72 0.15 150);

  --conf-HIGH:         oklch(0.88 0.11 208);
  --conf-MEDIUM:       oklch(0.70 0.10 225);
  --conf-LOW:          oklch(0.52 0.07 232);
  --conf-INSUFFICIENT: oklch(0.45 0.015 255);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--cyan-bright); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { width: min(100% - 2rem, 64rem); margin-inline: auto; }
.oculto { display: none !important; }

/* --- Cabecera ----------------------------------------------------------- */
header.top {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(10px);
}
header.top .wrap {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0;
}
.marca {
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  letter-spacing: -0.02em;
}
.marca span { color: var(--amber); }

nav.pestanas { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
nav.pestanas button {
  background: none; border: none; cursor: pointer;
  color: var(--faint);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase;
  padding: .5rem .7rem; border-radius: 4px;
}
nav.pestanas button:hover { color: var(--text); background: var(--surface); }
nav.pestanas button[aria-current="page"] { color: var(--text); background: var(--surface-2); }
nav.pestanas .cuenta {
  font-size: .68rem; margin-left: .3rem;
  color: var(--faint);
}
nav.pestanas button[aria-current="page"] .cuenta { color: var(--cyan); }

.salir {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--faint); cursor: pointer;
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; padding: .4rem .6rem;
}
.salir:hover { color: var(--text); border-color: var(--border-strong); }

main { padding: 2rem 0 5rem; }
section.vista { display: flex; flex-direction: column; gap: 1.25rem; }

.titulo-vista { display: flex; flex-direction: column; gap: .35rem; }
.titulo-vista h2 { font-size: 1.4rem; }
.titulo-vista p { color: var(--muted); max-width: 44rem; }

/* --- Entrar ------------------------------------------------------------- */
.entrar {
  width: min(100% - 2rem, 24rem); margin: 4rem auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.entrar h1 { font-size: 1.8rem; }
.entrar h1 span { color: var(--amber); }
.entrar p.lema { color: var(--muted); }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
input[type="email"], input[type="password"], input[type="search"], select {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .6rem .7rem; font: inherit; font-size: .95rem; width: 100%;
}
input::placeholder { color: var(--faint); }

.boton {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .6rem .9rem; cursor: pointer; font-weight: 600; font-size: .92rem;
}
.boton:hover { background: color-mix(in oklch, var(--surface-2) 70%, var(--border)); }
.boton[disabled] { opacity: .5; cursor: default; }
.boton.secundario {
  background: none; font-weight: 500; color: var(--muted);
  border-color: var(--border);
}

.aviso {
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .6rem .75rem; font-size: .88rem; color: var(--muted);
  background: var(--surface);
}
.aviso.malo { border-color: color-mix(in oklch, var(--danger) 55%, transparent); color: var(--danger); }
.aviso.bueno { border-color: color-mix(in oklch, var(--success) 45%, transparent); color: var(--success); }

/* --- Tarjeta de OPORTUNIDAD --------------------------------------------
   Ámbar, y es lo único que lo lleva. */
.oportunidad {
  border: 1px solid color-mix(in oklch, var(--amber) 35%, var(--border));
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(100deg, var(--amber-wash) 0%, var(--surface) 45%);
  padding: 1.1rem 1.25rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem;
}
@media (max-width: 44rem) { .oportunidad { grid-template-columns: 1fr; } }

.oportunidad .titulo { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.oportunidad .carta { font-family: var(--mono); font-size: .74rem; color: var(--muted); margin-top: .2rem; }
.oportunidad .cifra { text-align: right; }
.oportunidad .cifra b {
  font-family: var(--mono); font-size: 2.1rem; font-weight: 700;
  color: var(--amber-bright); line-height: 1; display: block;
}
.oportunidad .cifra span {
  font-family: var(--mono); font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}

/* --- Tarjeta de MEJOR OFERTA -------------------------------------------
   Ni una gota de ámbar. Tiene que verse distinta sin leerla. */
.oferta {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  padding: 1rem 1.15rem;
  display: grid; grid-template-columns: 1fr auto; gap: .8rem 1.5rem;
}
@media (max-width: 44rem) { .oferta { grid-template-columns: 1fr; } }
.oferta .titulo { font-size: .93rem; font-weight: 600; line-height: 1.35; }
.oferta .carta { font-family: var(--mono); font-size: .72rem; color: var(--faint); margin-top: .2rem; }
.oferta .cifra { text-align: right; }
.oferta .cifra b {
  font-family: var(--mono); font-size: 1.4rem; font-weight: 700;
  color: var(--text); line-height: 1; display: block;
}
.oferta .cifra span {
  font-family: var(--mono); font-size: .66rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .07em;
}
.no-es-oportunidad {
  grid-column: 1 / -1;
  font-size: .82rem; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: .6rem;
}
.no-es-oportunidad b { color: var(--text); }

/* --- Desglose común ----------------------------------------------------- */
.desglose {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border); padding-top: .75rem;
  display: grid; gap: .1rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.linea { display: flex; justify-content: space-between; gap: .6rem; font-size: .84rem; }
.linea dt { color: var(--faint); }
.linea dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.linea.total dt, .linea.total dd { font-weight: 700; color: var(--text); }
.linea.estimado dd { color: var(--muted); }

.acciones { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acciones a.ir {
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .45rem .8rem; text-decoration: none; font-size: .88rem; font-weight: 600;
}
.oportunidad .acciones a.ir {
  border-color: color-mix(in oklch, var(--amber) 50%, transparent);
  color: var(--amber-bright);
}

.pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 3px;
  border: 1px solid var(--border-strong); color: var(--muted);
}
.pill.conf { border-color: color-mix(in oklch, var(--c) 45%, transparent); color: var(--c); }

details.porque { grid-column: 1 / -1; }
details.porque summary {
  cursor: pointer; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cyan);
  padding: .3rem 0;
}
details.porque ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .86rem; }
details.porque li { margin-bottom: .2rem; }

/* --- Mi lista ----------------------------------------------------------- */
.buscador { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.buscador .campo { flex: 1 1 16rem; }

.resultados { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.carta-mini {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: .7rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); padding: .6rem; align-items: center;
}
.carta-mini img {
  width: 100%; border-radius: 3px; display: block;
  aspect-ratio: 245/342; object-fit: cover; background: var(--surface-2);
}
.carta-mini .nom { font-size: .86rem; font-weight: 600; line-height: 1.25; }
.carta-mini .sub { font-family: var(--mono); font-size: .66rem; color: var(--faint); margin-top: .1rem; }
.carta-mini .fila { display: flex; gap: .35rem; margin-top: .45rem; align-items: center; }
.carta-mini select { padding: .25rem .35rem; font-size: .75rem; flex: 1; }
.carta-mini button {
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); border-radius: 4px; cursor: pointer;
  font-size: .75rem; padding: .25rem .5rem;
}

.vigiladas { display: flex; flex-direction: column; gap: .4rem; }
.vigilada {
  display: flex; flex-direction: column; gap: .7rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); padding: .7rem .75rem;
}
/* La ficha pasó de ser una línea a tener dos alturas —la carta arriba, tu
   límite abajo— así que la fila de arriba se maqueta aparte. Se CAMBIA esta
   regla en vez de añadir otra al final: dos `.vigilada` con la misma
   especificidad peleándose por `display` es justo el tipo de colisión que se
   ve un mes después y ya nadie sabe cuál manda. */
.vigilada .cabecera {
  align-items: flex-start; display: flex; gap: .75rem; justify-content: space-between;
}
.vigilada .nom { font-size: .9rem; font-weight: 600; }
.vigilada .sub { font-family: var(--mono); font-size: .68rem; color: var(--faint); }
.vigilada .quitar {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  color: var(--faint); border-radius: 4px; cursor: pointer;
  font-size: .72rem; padding: .25rem .5rem;
}
.vigilada .quitar:hover { color: var(--danger); border-color: var(--danger); }

/* --- Estado vacío -------------------------------------------------------
   No es un cajón triste: dice qué está pasando y qué falta. */
.vacio {
  border: 1px dashed var(--border-strong); border-radius: 8px;
  padding: 1.5rem 1.35rem; color: var(--muted);
  display: flex; flex-direction: column; gap: .5rem;
}
.vacio b { color: var(--text); font-weight: 600; }
.vacio .mono { color: var(--cyan); }

.cargando { color: var(--faint); font-family: var(--mono); font-size: .8rem; }

footer.pie {
  border-top: 1px solid var(--border); margin-top: 3rem;
  padding: 1.5rem 0; color: var(--faint); font-size: .78rem;
}
footer.pie a { color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------------------
   EL MODO: colecciono / revendo
   -------------------------------------------------------------------------
   Sin ámbar. El ámbar significa «chollo» y esto es un ajuste, no un aviso:
   pintarlo de ámbar diluiría lo único que el ámbar tiene que decir. El
   seleccionado se marca con cian, que es el color de la evidencia, porque eso
   es exactamente lo que hace: decir contra qué se están midiendo las cifras
   que hay debajo. */

.modo {
  display: inline-flex; border: 1px solid var(--border); border-radius: 5px;
  overflow: hidden; margin-left: auto;
}
.modo button {
  background: none; border: 0; cursor: pointer;
  color: var(--faint); font-family: var(--mono); font-size: .68rem;
  letter-spacing: .07em; padding: .4rem .7rem; text-transform: uppercase;
}
.modo button + button { border-left: 1px solid var(--border); }
.modo button:hover { color: var(--text); }
.modo button[aria-pressed="true"] {
  background: var(--cyan-wash); color: var(--cyan-bright);
}

/* La frase que dice contra qué se compara. Sin ella el porcentaje cambia al
   pulsar el botón y parece un error. */
.explica-modo {
  color: var(--faint); font-size: .78rem;
  padding: 0 0 .7rem; margin: -.3rem 0 0;
}
.explica-modo:empty { display: none; }

/* Lo que el revendedor no vería. No se oculta sin más: se cuenta, porque
   «han desaparecido tres» es exactamente la información que explica el modo. */
.ocultas-por-modo {
  border: 1px dashed var(--border); border-radius: 6px;
  color: var(--muted); font-size: .85rem; padding: .8rem 1rem;
}

/* -------------------------------------------------------------------------
   POR DÓNDE EMPEZAR
   -------------------------------------------------------------------------
   Lo que ve alguien con la lista vacía.

   Cian, no ámbar. Esto NO es una oportunidad ni una recomendación de compra:
   es «de estas cartas sabemos el precio y hay mercado». Pintarlo de ámbar
   diría lo contrario de lo que el texto dice, y el color gana siempre a la
   letra pequeña. */

.propuesta { display: flex; flex-direction: column; gap: 1rem; }

.bandas { display: flex; flex-wrap: wrap; gap: .4rem; }
.bandas button {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); cursor: pointer;
  font-size: .78rem; padding: .35rem .8rem;
}
.bandas button:hover { border-color: var(--border-strong); color: var(--text); }
.bandas button[aria-pressed="true"] {
  background: var(--cyan-wash); border-color: var(--cyan); color: var(--cyan-bright);
}

.sugerencias { display: flex; flex-direction: column; gap: .5rem; }

.sugerencia {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto auto;
  padding: .8rem 1rem;
}
.sugerencia .nom { font-weight: 600; }
.sugerencia .sub { color: var(--faint); font-size: .78rem; }

.sugerencia .cifras { text-align: right; }
.sugerencia .fmv {
  font-family: var(--mono); font-size: 1rem; font-variant-numeric: tabular-nums;
}
/* Las cifras que sostienen la propuesta. Van juntas al precio a propósito:
   son lo que permite juzgarla en vez de creérsela. */
.sugerencia .porque { color: var(--faint); font-size: .72rem; }

.sugerencia .vigilar-sug {
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 5px; color: var(--text); cursor: pointer;
  font-size: .8rem; padding: .4rem .9rem; white-space: nowrap;
}
.sugerencia .vigilar-sug:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.sugerencia .vigilar-sug:disabled { color: var(--faint); cursor: default; }

@media (max-width: 640px) {
  /* Una columna, no dos.
   *
   * Con `1fr auto` el nombre de la carta se quedaba en 106px y las cifras
   * se llevaban 202: al revés de lo que importa. La frase «25 ventas detrás ·
   * 67 anuncios ahora» no se encoge, así que aplasta a lo que tiene al lado.
   */
  .sugerencia {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .sugerencia .cifras { text-align: left; }
  .sugerencia .fmv { font-size: 1.05rem; }
}

/* -------------------------------------------------------------------------
   EN UN MÓVIL
   -------------------------------------------------------------------------
   Medido a 390px, que es un iPhone normal. La cabecera estaba pensada para
   una sola fila y en móvil se rompía de tres maneras a la vez:

     · el selector de modo quedaba aplastado a 19px de ancho — ilegible, y es
       el control que decide contra qué se compara TODO lo de debajo;
     · la cabecera ocupaba 218px de 844, un cuarto de la pantalla;
     · los botones medían 30-34px de alto, por debajo de los 44 que hace falta
       para acertar con un dedo.

   La solución no es encoger: es apilar en filas con un orden que signifique
   algo. Marca y salir arriba, pestañas debajo, y el modo en su propia fila
   ocupando el ancho, porque es lo que más se toca y lo que peor se leía. */

@media (max-width: 640px) {
  header.top .wrap {
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .6rem 0;
  }

  .marca { flex: 1 1 auto; }
  .salir { flex: 0 0 auto; }

  /* Las pestañas, en su fila y a lo ancho. Con scroll propio por si algún día
     hay una cuarta: la página entera no se puede mover de lado. */
  nav.pestanas {
    flex: 1 0 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  nav.pestanas::-webkit-scrollbar { display: none; }
  nav.pestanas button { flex: 1 0 auto; min-height: 44px; }

  /* El modo, fila propia y ancho completo. Era lo que peor estaba. */
  .modo {
    flex: 1 0 100%;
    margin-left: 0;
  }
  .modo button {
    flex: 1 1 50%;
    min-height: 44px;
    font-size: .72rem;
  }

  .salir { min-height: 44px; }

  /* En móvil la cabecera NO se queda pegada arriba.
   *
   * Apilada en tres filas mide 263px de los 844 de un iPhone: casi un
   * tercio de la pantalla robado de forma permanente a lo que la persona ha
   * venido a leer. En un escritorio de 1100px cabe en una fila y quedarse
   * fija sale gratis; aquí no.
   */
  header.top { position: static; }

  .explica-modo { padding-bottom: .5rem; }

  /* Área táctil en el resto de controles que se pulsan de verdad. */
  .bandas button,
  a.ir,
  .sugerencia .vigilar-sug,
  .vigilada .quitar,
  .resultados button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------
   TU LÍMITE, CARTA A CARTA
   -------------------------------------------------------------------------
   La barra que decide qué es una oportunidad PARA TI.

   El precio de referencia sale de ventas cerradas: ya es lo que la gente paga.
   Pedirle además un descuento fijo a todo el mundo era decidir por el usuario
   algo que solo él sabe — cuánto vale esa carta concreta para él.

   En cian, no en ámbar. El ámbar es la oportunidad; esto es el ajuste que
   define cuál lo es. */

.liston { display: flex; flex-direction: column; gap: .35rem; }
.liston .referencia { color: var(--muted); font-size: .8rem; }
.liston .referencia b { color: var(--text); font-family: var(--mono); }
.liston .sin-precio { color: var(--faint); font-style: italic; }

/* La frase que dice qué significa la barra, en euros. Un «-20%» abstracto
   obliga a calcular; «te aviso por debajo de 195,20 €» se lee y ya está. */
.liston .avisame {
  color: var(--cyan-bright);
  font-size: .82rem;
  min-height: 1.2em;
}

/* La altura es del CONTROL, no de la línea: el `track` de 6px sería un blanco
   de 6px para el ratón y de 6px para un dedo. Aquí la línea sigue siendo fina
   y lo que se puede agarrar mide 26. */
input.barra {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: pointer;
  display: block;
  height: 26px;
  margin: 0;
  max-width: 34rem;
  width: 100%;
}
input.barra::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--cyan-wash), var(--surface-2) 50%, var(--amber-wash));
  border-radius: 3px; height: 6px;
}
input.barra::-moz-range-track {
  background: linear-gradient(90deg, var(--cyan-wash), var(--surface-2) 50%, var(--amber-wash));
  border-radius: 3px; height: 6px;
}
input.barra::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  background: var(--cyan-bright);
  border: 2px solid var(--bg);
  border-radius: 50%;
  height: 20px; width: 20px;
  margin-top: -7px;
}
input.barra::-moz-range-thumb {
  background: var(--cyan-bright);
  border: 2px solid var(--bg);
  border-radius: 50%;
  height: 20px; width: 20px;
}
input.barra:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* La leyenda del control, una sola vez encima de la lista. */
.explica-liston {
  color: var(--muted);
  font-size: .8rem;
  margin: 0 0 .8rem;
  max-width: 62ch;
}
.explica-liston b { color: var(--text); font-weight: 600; }

/* En un móvil lo que se agarra tiene que caber en un dedo, no en un ratón.
   Se sube la ALTURA, no el `padding`: con `box-sizing: border-box` el padding
   se comería los 26px en vez de sumarse. */
@media (max-width: 640px) {
  input.barra { height: 44px; max-width: none; }
  input.barra::-webkit-slider-thumb { height: 26px; width: 26px; margin-top: -10px; }
  input.barra::-moz-range-thumb { height: 26px; width: 26px; }
}

/* Guardado, guardando, o no se ha podido. Una barra que vuelve a su sitio al
   recargar sin haber dicho nada es la peor forma de enterarse. */
.liston.guardando input.barra { opacity: .6; }
.liston.guardado .avisame::after { color: var(--cyan-bright); content: " ✓"; }
.liston.fallo .avisame::after {
  color: var(--danger);
  content: " · no se ha podido guardar";
}

/* Lo que la búsqueda tiene que decir antes de la lista: cuántas se pueden
   vigilar de verdad, o qué parte de lo que escribiste no existe. Sin esta
   línea, «ninguna tiene precio» parece un fallo y es una carencia de datos. */
.aviso-busqueda {
  color: var(--muted);
  font-size: .8rem;
  margin: 0 0 .5rem;
  max-width: 62ch;
}
.aviso-busqueda b { color: var(--text); font-weight: 600; }

/* Las que no se pueden vigilar todavía van detrás Y se ven distintas, para que
   la diferencia se note sin leer. */
.carta-mini.sin-precio { opacity: .62; }

/* --- La foto de la carta ------------------------------------------------
   Se reserva el hueco SIEMPRE, con foto o sin ella: si el elemento apareciera
   solo cuando hay imagen, las fichas sin foto tendrían otra anchura y la lista
   se vería como un peine. El 0,6% del catálogo sin foto no puede desmaquetar
   al 99,4% que sí la tiene.

   `aspect-ratio` es el de una carta de verdad (63×88 mm). Con la proporción
   declarada, el navegador reserva el sitio antes de que la imagen llegue y la
   lista no pega el salto de recolocarse entera cuando cargan. */
.foto {
  aspect-ratio: 245 / 342;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: block;
  object-fit: cover;
  width: 3rem;
}
.foto.vacia { opacity: .5; }

/* En la ficha de una carta vigilada: foto, nombre, y el botón al fondo. */
.vigilada .cabecera { align-items: center; }
.vigilada .cabecera .quien { flex: 1; min-width: 0; }
.vigilada .cabecera .foto { flex-shrink: 0; }

/* En la sugerencia hay una columna más: foto · nombre · cifras · botón. */
.sugerencia { grid-template-columns: 3rem 1fr auto auto; }

@media (max-width: 640px) {
  /* En el móvil la sugerencia se apila, y la foto se pone al lado del nombre
     en vez de encima: una carta encima de su propio nombre ocupa media
     pantalla para decir lo mismo. */
  .sugerencia {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "foto quien"
      "cifras cifras"
      "boton boton";
  }
  .sugerencia .foto { grid-area: foto; }
  .sugerencia .quien { grid-area: quien; min-width: 0; }
  .sugerencia .cifras { grid-area: cifras; text-align: left; }
  .sugerencia .vigilar-sug { grid-area: boton; }
}

/* =========================================================================
   LA PORTADA
   =========================================================================

   Extiende el lenguaje que ya existe, no inventa otro: ÁMBAR = OPORTUNIDAD,
   CIAN = EVIDENCIA. Por eso el único ámbar de toda la página está en la
   llamada a la acción y en el ahorro del aviso de ejemplo —las dos cosas que
   son «dinero»— y las cifras que sostienen el argumento van en cian.

   El aviso de ejemplo va arriba del todo y a tamaño real. Es lo único de esta
   página que se entiende sin leer, y es exactamente el producto: no una
   promesa de chollos, sino un desglose con el coste puesto en casa.
   ========================================================================= */

.portada {
  margin: 0 auto;
  max-width: 62rem;
  padding: 1.25rem 1.25rem 4rem;
}

.portada-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}
.portada-top .marca { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.portada-top .marca span { color: var(--amber); }
.portada-top .salta {
  border: 1px solid var(--border-strong); border-radius: 5px;
  color: var(--text); font-size: .85rem; padding: .4rem .8rem; text-decoration: none;
}
.portada-top .salta:hover { background: var(--surface-2); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  align-items: start;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.15fr .85fr;
  margin-bottom: 5rem;
}
.hero h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
/* La frase que lleva el peso del argumento. En ámbar porque es el dinero. */
.hero h1 em { color: var(--amber-bright); font-style: normal; }
.hero .lema {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.6rem;
  max-width: 34rem;
}
.hero .lema b { color: var(--text); font-weight: 600; }

.cta {
  background: var(--amber);
  border-radius: 7px;
  color: oklch(0.16 0.02 60);
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding: .8rem 1.5rem;
  text-decoration: none;
}
.cta:hover { background: var(--amber-bright); color: oklch(0.16 0.02 60); }

.letra-chica { color: var(--faint); font-size: .8rem; margin-top: .7rem; }
.letra-chica a { color: var(--cyan); }

/* --- El aviso de ejemplo ------------------------------------------------ */
.muestra {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.muestra-top {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--faint);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .09em;
  padding: .5rem .9rem;
  text-transform: uppercase;
}
.aviso-demo { display: flex; flex-direction: column; gap: .55rem; padding: 1rem .9rem; }
.ad-carta { font-size: .92rem; }
.ad-ahorro { color: var(--muted); font-size: .84rem; }
.ad-ahorro b { color: var(--amber-bright); }
/* La barra de bloques es la misma que va en Telegram. */
.ad-barra { color: var(--amber); font-family: var(--mono); font-size: .95rem; letter-spacing: .1em; }
.ad-desglose {
  background: var(--bg);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
  overflow-x: auto;
  padding: .7rem .8rem;
}
.ad-pie { color: var(--cyan-bright); font-size: .76rem; }

/* --- Secciones ---------------------------------------------------------- */
.portada section > h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -.02em;
  margin-bottom: 1.2rem;
}
/* El «no» de «Lo que no hacemos» NO va en ámbar, y es la regla de toda la
   hoja: el ámbar significa oportunidad, dinero, «actúa ya». Usarlo para negar
   lo vacía de significado, y entonces el ámbar de un chollo de verdad deja de
   distinguirse del ámbar de cualquier otra cosa. Se enfatiza con cursiva, que
   es lo que hace la tipografía cuando no hay color que gastar. */
.portada section > h2 em { color: var(--text); font-style: italic; }

.pasos, .pruebas, .honesto { margin-bottom: 4.5rem; }

/* Los pasos van NUMERADOS porque son una secuencia de verdad: no se puede
   poner el límite antes de elegir la carta. Numerar lo que no es una
   secuencia es decoración disfrazada de información. */
.pasos ol { display: flex; flex-direction: column; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.pasos li {
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
  line-height: 1.6;
  padding: .1rem 0 .1rem 2.6rem;
  position: relative;
}
.pasos li b { color: var(--text); display: block; font-weight: 600; }
.pasos .n {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: .85rem;
  left: 1rem;
  position: absolute;
  top: .1rem;
}

.pruebas-lema { color: var(--muted); line-height: 1.65; margin-bottom: 1.6rem; max-width: 46rem; }
.pruebas-lema b { color: var(--text); font-weight: 600; }

.cifras-grid { display: grid; gap: .75rem; grid-template-columns: repeat(4, 1fr); }
.cifras-grid > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 1rem;
}
.cifras-grid b {
  color: var(--cyan-bright);
  display: block;
  font-family: var(--mono);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.cifras-grid span { color: var(--faint); font-size: .78rem; }

.honesto ul { display: flex; flex-direction: column; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.honesto li { color: var(--muted); line-height: 1.65; max-width: 48rem; }
.honesto li b { color: var(--text); font-weight: 600; }

/* --- Entrar ------------------------------------------------------------- */
.acceso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 auto;
  max-width: 26rem;
  padding: 1.75rem;
  scroll-margin-top: 2rem;
}
.acceso h2 { margin-bottom: 1.1rem; }
.acceso form { display: flex; flex-direction: column; gap: .8rem; }
.acceso-botones { display: flex; gap: .5rem; }
.acceso-botones .boton { flex: 1; }
.boton.principal { background: var(--amber); border-color: var(--amber); color: oklch(0.16 0.02 60); }
.boton.principal:hover { background: var(--amber-bright); border-color: var(--amber-bright); }
.acceso .aviso { margin-top: .9rem; }

@media (max-width: 780px) {
  .hero { gap: 2rem; grid-template-columns: 1fr; margin-bottom: 3.5rem; }
  .portada-top { margin-bottom: 2.5rem; }
  .cifras-grid { grid-template-columns: repeat(2, 1fr); }
  .pasos, .pruebas, .honesto { margin-bottom: 3rem; }
  /* Un pulgar necesita 44px, aquí también. */
  .cta, .portada-top .salta { display: inline-flex; align-items: center; min-height: 44px; }
  .acceso { padding: 1.25rem; }
}

/* --- Conectar Telegram ---------------------------------------------------
   Va arriba de «Mi lista» y no escondido en unos ajustes: vigilar cartas sin
   tener dónde recibir el aviso es media aplicación, y quien no lo ha
   conectado tiene que tropezarse con esto.

   En CIAN, no en ámbar. El ámbar es la oportunidad; esto es el canal por el
   que llega. El único ámbar aquí es el botón, porque es la acción. */
.telegram { margin-bottom: 1rem; }
.telegram:empty { display: none; }

.tg-invita, .tg-esperando, .tg-hecho {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .9rem 1rem;
}
.tg-invita {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.tg-invita b, .tg-esperando b, .tg-hecho b { color: var(--text); }
.tg-invita p { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.tg-invita .boton { flex-shrink: 0; }

.tg-esperando { border-color: var(--cyan-wash); display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.tg-esperando p { color: var(--muted); font-size: .85rem; }
.tg-esperando code {
  background: var(--surface-2); border-radius: 4px; color: var(--cyan-bright);
  font-family: var(--mono); letter-spacing: .12em; padding: .15rem .4rem;
}
.tg-esperando-nota { color: var(--faint) !important; font-size: .78rem !important; }

.tg-hecho { border-color: var(--cyan-wash); color: var(--muted); font-size: .88rem; }
.tg-hecho .tg-solo { color: var(--faint); display: block; font-size: .8rem; margin-top: .3rem; }

@media (max-width: 640px) {
  /* Apilado: el botón a lo ancho es más fácil de acertar que uno al lado. */
  .tg-invita { align-items: stretch; flex-direction: column; gap: .8rem; }
  .tg-invita .boton, .tg-esperando .boton { min-height: 44px; text-align: center; }
}

/* --- Los datos del anuncio, tal y como vienen de eBay --------------------
   Es la mitad HECHO de la ficha: quién vende, en qué formato, desde dónde y
   cuándo lo vimos. Va separada de la mitad ESTIMACIÓN —lo que creemos que
   vale— a propósito, para que nunca se confundan. */
.datos-anuncio {
  align-items: center;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  font-size: .74rem;
  gap: .25rem .9rem;
  margin-top: .5rem;
}
.datos-anuncio .vendedor { color: var(--muted); }
.datos-anuncio .vendedor::before { content: "· "; color: var(--faint); }
.datos-anuncio > :first-child::before { content: none; }
/* Pocas valoraciones no se oculta ni bloquea aquí —de eso ya se encarga la
   puerta— pero quien mira tiene derecho a verlo sin hacer cuentas. */
.datos-anuncio .vendedor.flojo { color: var(--amber); }
.datos-anuncio .frescura { font-family: var(--mono); font-size: .7rem; }

/* La marca de eBay junto al enlace. El acuerdo de API pide atribución donde se
   enseñan sus datos, y va PEGADA al enlace y no en un pie perdido: sirve para
   que quien mira sepa que ESTO viene de eBay. */
/* La mención a eBay va en la tipografía de la aplicación, sin los colores
   de su marca. Antes esto pintaba las cuatro letras con los tonos exactos
   del logotipo, o sea que lo recreaba: las normas de marca piden usar el
   logotipo que ellos entregan y no rehacerlo, y el alta en su programa de
   afiliados —lo que estamos a punto de pedir— todavía no está concedida. */
.de-ebay { font-weight: 700; letter-spacing: -.01em; }

/* =========================================================================
   PANEL DE ADMINISTRACIÓN
   =========================================================================
   Aquí se mira la MÁQUINA, no las cartas. Por eso no hay ni una gota de
   ámbar: el ámbar significa «oportunidad, dinero» en toda la aplicación, y
   una cifra de operación no es ninguna de las dos cosas. Todo va en cian, que
   es el color de la evidencia, y el único ámbar que aparece es el de una
   cuota a punto de agotarse — que sí es algo que exige actuar.
   ========================================================================= */

.etiqueta-panel {
  background: var(--cyan-wash); border-radius: 4px; color: var(--cyan-bright);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  padding: .15rem .4rem; text-transform: uppercase; vertical-align: middle;
}
.medido { color: var(--faint); font-size: .78rem; margin-bottom: 2rem; }

.bloque-panel { margin-bottom: 2.5rem; }
.bloque-panel h2 { font-size: 1.05rem; margin-bottom: .8rem; }
.nota-panel { color: var(--muted); font-size: .82rem; margin-bottom: 1rem; max-width: 58ch; }

.rejilla-cifras {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.ficha-cifra {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 7px; padding: .85rem;
}
.ficha-cifra b {
  color: var(--cyan-bright); display: block; font-family: var(--mono);
  font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ficha-cifra span { color: var(--muted); display: block; font-size: .78rem; margin-top: .25rem; }
.ficha-cifra i { color: var(--faint); display: block; font-size: .7rem; font-style: normal; }

/* La cuota. Se ve de un vistazo cuánto queda, que es lo único que importa
   mirar deprisa: en ámbar solo cuando ya casi no queda. */
.barra-cuota { margin-bottom: .7rem; max-width: 34rem; }
.barra-cuota .etiqueta {
  color: var(--muted); display: flex; font-size: .78rem;
  justify-content: space-between; margin-bottom: .25rem;
}
.barra-cuota .canal { background: var(--surface-2); border-radius: 3px; height: 6px; overflow: hidden; }
.barra-cuota .relleno { background: var(--cyan); height: 100%; }
.barra-cuota .relleno.lleno { background: var(--amber); }

.tabla-panel { border-collapse: collapse; font-size: .82rem; width: 100%; }
.tabla-panel th {
  border-bottom: 1px solid var(--border-strong); color: var(--faint);
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; padding: .4rem .6rem; text-align: left; text-transform: uppercase;
}
.tabla-panel td { border-bottom: 1px solid var(--border); padding: .5rem .6rem; }
.tabla-panel .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.pill-estado {
  border-radius: 4px; font-family: var(--mono); font-size: .68rem; padding: .1rem .4rem;
}
.pill-estado.done { background: color-mix(in oklch, var(--success) 20%, transparent); color: var(--success); }
.pill-estado.failed { background: color-mix(in oklch, var(--danger) 20%, transparent); color: var(--danger); }
.pill-estado.running { background: var(--cyan-wash); color: var(--cyan-bright); }

@media (max-width: 640px) {
  .rejilla-cifras { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  /* Una tabla de cinco columnas no cabe en 390px: se desplaza ella, no la
     página entera. */
  .bloque-panel:has(.tabla-panel) { overflow-x: auto; }
  .tabla-panel { min-width: 30rem; }
}

/* --- La carta en grande --------------------------------------------------
   Una miniatura de tres centímetros no sirve para decidir sobre una carta
   gradeada: se compran mirando el centrado, los bordes y el brillo. La imagen
   es la MISMA que la miniatura, así que ampliarla no cuesta ni un byte. */
.foto-lupa {
  background: none; border: 0; cursor: zoom-in; display: block; padding: 0;
  border-radius: 4px;
}
.foto-lupa:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.foto-lupa:hover .foto { border-color: var(--cyan); }
.foto-lupa .foto { transition: border-color .12s; }

.lupa {
  align-items: center; background: oklch(0.08 0.01 265 / .92);
  bottom: 0; display: flex; justify-content: center; left: 0;
  padding: 1.5rem; position: fixed; right: 0; top: 0; z-index: 50;
}
.lupa figure { margin: 0; max-height: 100%; text-align: center; }
.lupa img {
  border-radius: 10px; box-shadow: 0 20px 60px oklch(0 0 0 / .5);
  display: block; margin: 0 auto;
  /* Cabe entera sin recortarse, sea cual sea la pantalla. Una carta cortada
     por abajo no sirve para mirar el borde, que es justo lo que se mira. */
  max-height: calc(100vh - 7rem); max-width: min(100%, 30rem);
  object-fit: contain; width: auto;
}
.lupa figcaption { color: var(--muted); font-size: .85rem; margin-top: .8rem; }
.cerrar-lupa {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 50%; color: var(--text); cursor: pointer;
  font-size: 1.4rem; height: 2.6rem; line-height: 1; position: absolute;
  right: 1rem; top: 1rem; width: 2.6rem;
}
.cerrar-lupa:hover { background: var(--surface-2); }
/* Con la lupa abierta, el fondo no se desplaza: en un móvil, arrastrar para
   mover la foto movería la página de detrás. */
body.con-lupa { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .foto-lupa .foto { transition: none; }
}

/* --- Entrar con Google ---------------------------------------------------
   Blanco sobre oscuro y con el logotipo oficial de Google: son sus normas de
   marca, y además es el botón que la gente reconoce sin leerlo. Va PRIMERO
   porque es el camino de un clic; el correo queda debajo para quien lo
   prefiera. */
.boton.google {
  align-items: center;
  background: #fff;
  border: 1px solid #dadce0;
  color: #1f1f1f;
  display: flex;
  gap: .6rem;
  justify-content: center;
  min-height: 44px;
  width: 100%;
}
.boton.google:hover { background: #f3f4f6; }
.boton.google svg { flex-shrink: 0; }

/* El separador. Una línea a cada lado y la palabra en medio: deja claro que
   son dos caminos al mismo sitio, no un paso después de otro. */
.o-bien {
  align-items: center;
  color: var(--faint);
  display: flex;
  font-size: .78rem;
  gap: .7rem;
  margin: 1rem 0;
}
.o-bien::before, .o-bien::after {
  background: var(--border); content: ""; flex: 1; height: 1px;
}

/* =========================================================================
   LA FICHA CON FOTO
   =========================================================================
   Oportunidades y ofertas comparten esqueleto: foto del ANUNCIO a la
   izquierda —el ejemplar que se vende, no la carta ideal del catálogo—,
   el nombre de la carta como titular y el título del vendedor debajo, en
   pequeño, como prueba de qué anuncio es.

   La foto respeta la proporción de una carta (245/342) y se recorta por
   arriba, que es donde un slab lleva la etiqueta de la casa de gradeo: si
   el recorte tiene que sacrificar algo, que sea el borde inferior. */

.ficha { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.15rem; }
.ficha .ficha-cuerpo { display: grid; gap: .8rem; min-width: 0; }
/* Y TODOS sus hijos: un hijo de grid tiene min-width:auto, que se planta en
   su min-content — y la cabecera lleva dentro un título con nowrap que medía
   474px dentro de un cuerpo de 219. Con auto, la ficha entera desbordaba a
   390px. Medido en un iframe de 375, elemento a elemento. */
.ficha .ficha-cuerpo > * { min-width: 0; }

.ficha-foto {
  aspect-ratio: 245 / 342;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: zoom-in;
  display: block;
  overflow: hidden;
  padding: 0;
  width: 5.6rem;
}
.ficha-foto img { display: block; height: 100%; object-fit: cover; object-position: top; width: 100%; }
.ficha-foto.vacia { cursor: default; }
.ficha-foto:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.ficha-cabecera { display: flex; gap: 1rem; justify-content: space-between; align-items: start; }
.ficha-cabecera > div:first-child { min-width: 0; }
.ficha-carta { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ficha-anuncio {
  color: var(--faint);
  font-size: .74rem;
  line-height: 1.35;
  margin-top: .25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La distancia al valor, dibujada. Llena = pide lo que se paga; el hueco es
   lo que te ahorras. Ámbar porque distancia-al-valor ES la oportunidad. */
.ficha-distancia { display: grid; gap: .35rem; }
.ficha-barra {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  height: .5rem;
  overflow: hidden;
}
.ficha-barra i {
  background: linear-gradient(90deg, var(--amber), var(--amber-bright));
  border-radius: 99px;
  display: block;
  height: 100%;
}
.ficha-distancia > span { color: var(--muted); font-size: .8rem; }
.ficha-distancia > span b { color: var(--text); }

.ficha-mas summary {
  color: var(--faint);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .72rem;
}
.ficha-mas summary:hover { color: var(--muted); }
.ficha-mas[open] summary { margin-bottom: .6rem; }

/* A 390px la foto no puede robar media pantalla: encoge y el cuerpo respira.
   La cabecera apila la cifra debajo del nombre en vez de comprimirlo. */
@media (max-width: 44rem) {
  .ficha { grid-template-columns: auto 1fr; gap: .8rem; }
  .ficha-foto { width: 4.2rem; }
  /* En columna, align-items:start (heredado de la fila) haría que cada hijo
     tomara su ancho de CONTENIDO: el título del anuncio lleva nowrap y medía
     474px dentro de un cuerpo de 219 — toda la ficha desbordaba a 390px.
     stretch obliga a los hijos al ancho del contenedor y la elipsis del
     título vuelve a funcionar. Medido en iframe de 375px, no adivinado. */
  .ficha-cabecera { align-items: stretch; flex-direction: column; gap: .35rem; }
  .ficha .cifra { text-align: left; }
}

/* --- La carta vigilada del héroe ----------------------------------------
   El Mega Charizard X ex asoma inclinado por detrás del aviso, como una carta
   dejada sobre la mesa. Es la escena entera del producto en una imagen: la
   carta que vigilas y el aviso que te llega por ella. */
.muestra { overflow: visible; position: relative; }
.muestra > :not(.muestra-carta):not(.muestra-valor) { position: relative; z-index: 1; }
.muestra-top { border-radius: 10px 10px 0 0; }
.muestra-carta {
  border-radius: 10px;
  box-shadow: 0 18px 45px oklch(0 0 0 / .55);
  height: auto;
  position: absolute;
  bottom: -2.8rem;
  right: -2.4rem;
  transform: rotate(8deg);
  width: 8rem;
  z-index: 2;
}
@media (max-width: 60rem) {
  /* En una columna la carta no puede tapar el aviso: encoge y sube. */
  .muestra-carta { bottom: -2rem; right: -.4rem; width: 5.2rem; }
}

/* La etiqueta de valor de la carta del héroe: pequeña, mono, ámbar — es una
   cifra de mercado, no un eslogan. Cuelga junto a la carta inclinada. */
.muestra-valor {
  background: var(--amber-wash);
  border: 1px solid var(--amber);
  border-radius: 6px;
  bottom: -4.2rem;
  color: var(--amber-bright);
  font-family: var(--mono);
  font-size: .68rem;
  padding: .3rem .55rem;
  position: absolute;
  right: -1.6rem;
  transform: rotate(8deg);
  white-space: nowrap;
  z-index: 3;
}
@media (max-width: 60rem) {
  .muestra-valor { bottom: -3.2rem; font-size: .62rem; right: -.2rem; }
}

/* La línea de mercado vivo en cada carta vigilada. Gris deliberado: es el
   mercado normal, no una oportunidad — el ámbar queda reservado para cuando
   algo SÍ merece atención. */
.mercado-ahora { color: var(--faint); display: block; font-size: .78rem; margin-top: .2rem; }
.mercado-ahora b { color: var(--muted); font-family: var(--mono); font-weight: 500; }

/* --- «Ver oportunidad / mejor oferta» desde Mi lista -------------------- */
/* Botón que parece enlace: la fila ya tiene un botón de verdad («Quitar») y
   dos botones iguales pelearían por la vista. */
.ver-ficha {
  background: none; border: 0; color: var(--cyan); cursor: pointer;
  font: inherit; font-size: .82rem; padding: 0;
}
.ver-ficha:hover { color: var(--cyan-bright); text-decoration: underline; }
.ver-ficha.oportuna { color: var(--amber-bright); font-weight: 600; }

/* El destello que señala TU ficha al llegar desde la lista. */
.ficha.resaltada { outline: 2px solid var(--amber); outline-offset: 2px; }

/* --- El chase de la portada --------------------------------------------- */
.chase {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  gap: 1.6rem;
  margin: 0 0 4.5rem;
  padding: 1.4rem 1.6rem;
}
.chase-carta {
  border-radius: 6px;
  flex-shrink: 0;
  transform: rotate(-4deg);
  width: 6.4rem;
  box-shadow: 0 8px 24px oklch(0 0 0 / .45);
}
.chase-eti {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .09em;
  margin-bottom: .4rem;
  text-transform: uppercase;
}
.chase-texto h2 { font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: .45rem; }
.chase-texto p { color: var(--muted); line-height: 1.6; max-width: 40rem; }
.chase-texto p b { color: var(--amber-bright); }
.chase-cta { color: var(--cyan); display: inline-block; font-size: .88rem; margin-top: .55rem; }
.chase-cta:hover { color: var(--cyan-bright); }
@media (max-width: 700px) {
  .chase { flex-direction: row; padding: 1.1rem 1rem; gap: 1rem; }
  .chase-carta { width: 4.6rem; }
}

/* --- El cierre de la portada -------------------------------------------- */
.cierre { margin: 5.5rem 0 3rem; text-align: center; }
.cierre h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.35; margin-bottom: 1.4rem; }
.cierre .cta { display: inline-block; }

/* --- La página de entrar (login/) --------------------------------------- */
/* La misma tarjeta de acceso de siempre, sola y centrada: una página que
   solo hace una cosa no necesita más decoración que la marca. */
.pagina-login {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding: 2rem 1rem;
}
.pagina-login .marca { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 2rem; }
.pagina-login .marca span { color: var(--amber); }
.pagina-login .marca a { color: inherit; }
.tarjeta-login {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 24rem;
  padding: 1.8rem 1.6rem;
  width: 100%;
}
.tarjeta-login h1 { font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: .35rem; }
.tarjeta-login .lema-login { color: var(--muted); font-size: .88rem; margin-bottom: 1.4rem; }
.tarjeta-login form { display: flex; flex-direction: column; gap: .8rem; }
.tarjeta-login .aviso { margin-top: .9rem; }
.pagina-login .vuelta { color: var(--faint); font-size: .8rem; margin-top: 1.4rem; }
.pagina-login .vuelta a { color: var(--cyan); }