/* Crypto Atalaya · PWA de noticias
   Tema unico oscuro: la paleta sale del logo (noche azul-negra + haz dorado).
   Todo pensado primero para el iPhone en pantalla completa. */

:root {
  --fondo: #070b14;
  --fondo-2: #0b1120;
  --superficie: #111a2b;
  --superficie-2: #16213a;
  --borde: rgba(255, 255, 255, .07);
  --borde-vivo: rgba(245, 182, 10, .35);
  --texto: #eef2f8;
  --texto-2: #97a3b8;
  /* Subido desde #64748b: sobre la superficie daba 4,0:1, por debajo del
     4,5:1 que necesita el texto pequeño. Ahora ronda 5,9:1. */
  --texto-3: #8d9aae;
  --oro: #f5b60a;
  --oro-claro: #ffd45e;

  /* Un color por categoria principal (las de la barra de navegacion).
     Bitcoin y Ethereum llevan el suyo propio, que el lector ya reconoce.
     El rojo se reserva para Seguridad: hackeos y robos son lo unico
     realmente urgente que publicamos. */
  --c-btc: #f7931a;
  --c-eth: #8b9dff;
  --c-cripto: #60a5fa;
  --c-regulacion: #c084fc;
  --c-mercados: #34d399;
  --c-macro: #f5b60a;
  --c-seguridad: #f87171;

  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --alto-cabecera: 56px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* El atributo hidden manda SIEMPRE. Sin esta línea, cualquier regla nuestra
   con display (el buscador tenía display:flex) le gana al display:none del
   navegador, y el elemento se queda en pantalla tapando la app aunque el
   código lo haya ocultado. Pasó de verdad el 13/08/2026: la barra de búsqueda
   cubría el feed entero con fondo opaco. */
[hidden] { display: none !important; }

html {
  background: var(--fondo);
  /* Nada se desplaza a lo ancho: sin esto, cualquier elemento que se pase de
     largo hace que la pagina entera se pueda arrastrar de lado. */
  overflow-x: hidden;
}

/* Sin barras de desplazamiento a la vista, en toda la app. El contenido sigue
   desplazandose igual; lo unico que desaparece es la barra. */
html, body, .ficha, .buscador-cuerpo, .historico { scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.ficha::-webkit-scrollbar,
.buscador-cuerpo::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  /* El haz del faro: un resplandor dorado muy tenue arriba del todo. */
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(245, 182, 10, .13), transparent 60%),
    radial-gradient(80% 40% at 80% 5%, rgba(96, 165, 250, .08), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow-x: hidden;
  /* Solo se permite el desplazamiento vertical: al arrastrar en diagonal, la
     pagina ya no se va de lado. */
  touch-action: pan-y;
}

body.bloqueado { overflow: hidden; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: calc(var(--seguro-arriba) + 8px) 16px 8px;
  background: rgba(7, 11, 20, .72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--borde);
}

.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-icono { border-radius: 8px; flex: none; }
.marca-texto { display: flex; flex-direction: column; min-width: 0; }
.marca-texto strong {
  font-size: 14px; letter-spacing: .14em; font-weight: 700;
  background: linear-gradient(92deg, var(--oro-claro), var(--oro) 60%, #b98707);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.estado {
  font-size: 11px; color: var(--texto-3);
  display: flex; align-items: center; gap: 5px; margin-top: 1px;
}
.punto {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-mercado);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
  animation: latido 2.6s infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.punto-espera { background: var(--oro); animation: none; opacity: .6; }
.punto-error { background: var(--c-seguridad); animation: none; }

/* El aviso flotante hace dos papeles: noticias nuevas (oro) y error (rojo).
   Es el mismo hueco en pantalla, y nunca aparecen los dos a la vez. */
.aviso-nuevas.es-error {
  border-color: rgba(248, 113, 113, .4);
  background: rgba(248, 113, 113, .16);
  color: #fca5a5;
}

.acciones-cabecera { display: flex; gap: 8px; flex: none; }
.boton-cabecera {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto-2); display: grid; place-items: center;
  transition: transform .5s, color .2s;
}
.boton-cabecera:active { transform: scale(.92); color: var(--oro); }
.boton-cabecera.girando svg { animation: giro .9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* Aviso flotante de noticias nuevas */
.aviso-nuevas {
  position: fixed; z-index: 45;
  top: calc(var(--seguro-arriba) + var(--alto-cabecera) + 10px);
  left: 50%; transform: translateX(-50%);
  border: 1px solid var(--borde-vivo); border-radius: 999px;
  background: rgba(245, 182, 10, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--oro-claro); font-size: 13px; font-weight: 600;
  padding: 8px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  animation: baja .35s ease;
}
@keyframes baja { from { opacity: 0; transform: translate(-50%, -14px); } }

/* ---------- Buscador ---------- */
.buscador {
  position: fixed; inset: 0; z-index: 70;
  background: var(--fondo);
  display: flex; flex-direction: column;
  padding-top: var(--seguro-arriba);
}
.buscador-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--borde);
}
.buscador-barra input {
  flex: 1; min-width: 0;
  font-size: 16px;            /* 16px o menos hace que iOS haga zoom al enfocar */
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px;
  padding: 11px 14px; outline: none;
  -webkit-appearance: none;
}
.buscador-barra input:focus { border-color: var(--borde-vivo); }
.buscador-barra input::placeholder { color: var(--texto-3); }
.buscador-barra button {
  flex: none; border: 0; background: none; color: var(--oro);
  font-size: 15px; padding: 6px;
}
.buscador-cuerpo {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 16px calc(24px + var(--seguro-abajo));
}
.pista { color: var(--texto-3); font-size: 13px; margin: 14px 0 10px; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; }
.resultado {
  display: block; width: 100%; text-align: left;
  padding: 13px 0; border: 0; border-bottom: 1px solid var(--borde);
  background: none; color: inherit;
}
.resultado:active { opacity: .6; }
.resultado b { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; }
.resultado i { display: block; margin-top: 4px; font-style: normal;
               font-size: 11.5px; color: var(--texto-3); }

/* ---------- Carrusel ---------- */
.destacadas { padding-top: 14px; }

.carrusel {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 16px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel::-webkit-scrollbar { display: none; }

.tarjeta-grande {
  position: relative; flex: 0 0 86%; scroll-snap-align: center;
  /* Misma proporción 2:1 que las fotos del feed y de la ficha: la tarjeta
     entera es la imagen, así que su forma es la de la foto. */
  aspect-ratio: 2 / 1; min-height: 0;   /* 0 para que la proporción mande
                                           siempre, también en pantallas
                                           estrechas */
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--borde);
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie) 55%, var(--fondo-2));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; text-align: left; color: inherit;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .18s ease;
}
.tarjeta-grande:active { transform: scale(.985); }

/* Barra de color de la categoria */
.tarjeta-grande::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--color-cat);
  box-shadow: 0 0 18px var(--color-cat);
}
/* Resplandor de categoria en la esquina */
.tarjeta-grande::after {
  content: ""; position: absolute; inset: -40% 40% 55% -30%;
  background: radial-gradient(circle, var(--color-cat), transparent 70%);
  opacity: .16; pointer-events: none;
}

.tarjeta-grande .foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .5;
}
.tarjeta-grande .velo-foto {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 11, 20, .96) 22%, rgba(7, 11, 20, .55) 60%, rgba(7, 11, 20, .3));
}

/* Sin foto: el logo de la cripto hace de sello, grande y tenue detras del
   titular. Da cuerpo a la tarjeta sin competir con el texto. */
.tarjeta-grande .sello {
  position: absolute; top: -14px; right: -18px;
  width: 148px; height: 148px; object-fit: contain;
  opacity: .17; filter: saturate(120%);
  pointer-events: none;
}

.tarjeta-grande h2 {
  position: relative; margin: 9px 0 0;
  font-size: 18px; line-height: 1.26; font-weight: 700; letter-spacing: -.01em;
  /* Tres líneas, no cuatro: con la tarjeta en 2:1 hay menos alto disponible
     y el titular tiene que caber sin empujar al pie. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta-grande .pie {
  position: relative; margin-top: 10px;
  font-size: 11.5px; color: var(--texto-3);
  display: flex; align-items: center; gap: 8px;
}

.etiqueta {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  color: var(--color-cat);
  background: color-mix(in srgb, var(--color-cat) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-cat) 30%, transparent);
}

.puntos { display: flex; justify-content: center; gap: 6px; padding: 12px 0 4px; }
.puntos i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); transition: all .25s;
}
.puntos i.activo { width: 18px; border-radius: 3px; background: var(--oro); }

/* ---------- Filtros ---------- */
.filtros {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 6px 16px 14px; scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--texto-2);
  font-size: 13px; font-weight: 600; padding: 8px 14px;
  transition: all .18s;
}
.filtro.activo {
  color: var(--fondo); background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  border-color: transparent; font-weight: 700;
}

/* ---------- Historico ---------- */
.historico { padding: 0 16px calc(30px + var(--seguro-abajo)); }

.dia {
  position: sticky; top: calc(var(--seguro-arriba) + var(--alto-cabecera));
  z-index: 20;
  margin: 18px 0 10px; padding: 6px 0;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3);
  background: linear-gradient(to bottom, var(--fondo) 65%, transparent);
  display: flex; align-items: baseline; gap: 8px;
}
.dia span { color: var(--texto-3); opacity: .6; font-weight: 500; letter-spacing: .04em; }

/* La tarjeta es un <article> con un <button> dentro, no un boton entero:
   dentro hay acciones propias (compartir) y un boton no puede contener otro. */
.tarjeta {
  display: block; margin-bottom: 12px;
  border: 1px solid var(--borde); border-radius: 18px;
  background: var(--superficie); color: inherit;
  overflow: hidden;
  transition: transform .16s ease, border-color .2s;
}
.tarjeta:has(.abre:active) { transform: scale(.988); border-color: var(--borde-vivo); }

.abre {
  display: block; width: 100%; text-align: left; color: inherit;
  background: none; border: 0; padding: 12px 14px 0;
}

.tarjeta .cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 9px;
}
.tarjeta .hora { font-size: 11.5px; color: var(--texto-3); flex: none; }
.tarjeta .mini-etiqueta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-cat);
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
}
.tarjeta .mini-etiqueta::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-cat); box-shadow: 0 0 8px var(--color-cat);
}

/* --- Con foto: imagen a ancho completo, que es la que manda en el feed --- */
/* TODAS las fotos van en 2:1 horizontal, aquí y en la ficha: da un ritmo
   uniforme al feed y, como la proporción la fija el CSS, el hueco está
   reservado antes de que baje la imagen y no hay saltos. Lo que no encaja se
   recorta por el centro (object-fit: cover), nunca se deforma. */
/* El marco pone la proporción y la imagen lo rellena en absoluto. Asi la
   altura no depende de que el navegador aplique aspect-ratio a una <img> sin
   altura dentro de un <button>, que es donde falla. */
.marco {
  display: block; position: relative; overflow: hidden;
  width: calc(100% + 28px); margin: 10px -14px 0;
  aspect-ratio: 2 / 1;
  background: var(--superficie-2);
}
.marco > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block; border: 0;
}
/* Respaldo para navegadores sin aspect-ratio: la mitad del ancho de la app. */
@supports not (aspect-ratio: 2 / 1) {
  .marco { height: 50vw; max-height: 300px; }
}
.tarjeta h3 {
  margin: 12px 0 0; font-size: 17.5px; line-height: 1.3;
  font-weight: 680; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta .entradilla {
  margin: 7px 0 0; font-size: 14px; line-height: 1.45; color: var(--texto-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Sin foto: version compacta. El 93 % del historico no tiene imagen, y
   rellenar todas esas tarjetas con un bloque generado triplicaria el scroll
   sin anadir informacion. El logo va a la izquierda y la tarjeta respira. --- */
.tarjeta.solo-texto .abre { display: flex; gap: 13px; }
.tarjeta.solo-texto .emblema {
  flex: none; width: 62px; height: 62px; border-radius: 14px;
  display: grid; place-items: center; font-size: 24px;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--color-cat) 24%, transparent), transparent 70%),
    var(--superficie-2);
  border: 1px solid color-mix(in srgb, var(--color-cat) 20%, transparent);
}
.tarjeta.solo-texto .emblema img { width: 34px; height: 34px; object-fit: contain; }
.tarjeta.solo-texto .texto { min-width: 0; flex: 1; }
.tarjeta.solo-texto .cabeza { margin-bottom: 5px; }
.tarjeta.solo-texto h3 { margin-top: 0; font-size: 15.5px; -webkit-line-clamp: 3; }
.tarjeta.solo-texto .entradilla { -webkit-line-clamp: 2; font-size: 13.5px; }

/* --- Pie: etiquetas pulsables y acciones --- */
.pie-t {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 11px; margin-top: 2px;
}
.etiquetas { display: flex; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.cuentas {
  flex: none; font-size: 12px; color: var(--texto-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cuentas:empty { display: none; }
.etiqueta-chip {
  flex: none; max-width: 46%;
  font-size: 11.5px; font-weight: 600; color: var(--texto-2);
  /* min-height para el dedo: con 4px de padding se quedaban en 25 px de alto,
     justo en el mínimo de accesibilidad y demasiado finas en un móvil. */
  min-height: 32px; padding: 6px 11px; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--superficie-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta-chip:active { color: var(--oro); border-color: var(--borde-vivo); }
.accion-t {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: none; color: var(--texto-3);
  display: grid; place-items: center;
}
.accion-t:active { color: var(--oro); }
.accion-t.marcado { color: var(--oro); }

/* Tirar para refrescar */
.tirar {
  position: fixed; z-index: 50;
  top: calc(var(--seguro-arriba) + 4px); left: 50%; margin-left: -17px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--superficie); border: 1px solid var(--borde);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.tirar.visible { opacity: 1; }
.tirar.listo { border-color: var(--borde-vivo); }
.tirar i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18); border-top-color: var(--oro);
}
.tirar.girando i { animation: giro .8s linear infinite; }

/* ---------- Impact Score ----------
   Dice cuánto importa la noticia, NO si es buena o mala: por eso no hay verde.
   Azul hasta 39, ámbar hasta 69, rojo a partir de 70. El aro es un
   conic-gradient sobre un disco grafito: sin SVG, sin librerías y sin repintar
   nada mientras se hace scroll. */
.impacto {
  --pct: 0%;
  --tono: var(--c-general);
  flex: none; position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  /* Aro de progreso + disco interior. El borde interior y el brillo de arriba
     son lo que le dan el relieve, sin llegar a botón de videojuego. */
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .07), transparent 60%),
    conic-gradient(var(--tono) var(--pct), rgba(255, 255, 255, .09) 0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .5),
    0 0 10px -2px color-mix(in srgb, var(--tono) 45%, transparent);
}
.impacto::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: linear-gradient(180deg, #1b2437, #121a29);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .06),
              inset 0 -1px 2px rgba(0, 0, 0, .5);
}
.impacto-num {
  position: relative; z-index: 1;
  font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  color: var(--texto); font-variant-numeric: tabular-nums;
}
.impacto.n-bajo  { --tono: #5b9cf8; }
.impacto.n-medio { --tono: #f59e0b; }
.impacto.n-alto  { --tono: #ef4444; }

/* En la ficha va dentro del cuadro de análisis, abajo a la derecha y pequeño:
   está para consultarlo, no para llamar la atención. */
/* El círculo NO agranda el cuadro: va flotado al final del texto, así que el
   análisis se limita a dejarle su hueco cuadrado abajo a la derecha y el
   párrafo fluye a su alrededor. */
.analisis { position: relative; overflow: hidden; }
.impacto-ficha {
  float: right; margin: 2px 0 0 12px;
  width: 38px; height: 38px;
}
.impacto-ficha .impacto-num { font-size: 12.5px; }

@media (min-width: 620px) {
  .impacto { width: 48px; height: 48px; }
  .impacto .impacto-num { font-size: 15px; }
}

/* Aviso de que estamos dentro de una etiqueta */
.filtro-etiqueta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 0 14px; padding: 11px 14px;
  border-radius: 14px; border: 1px solid var(--borde-vivo);
  background: rgba(245, 182, 10, .09);
}
.filtro-etiqueta strong { font-size: 15px; color: var(--oro-claro); }
.filtro-etiqueta span { font-size: 12px; color: var(--texto-3); display: block; margin-top: 2px; }
.filtro-etiqueta button {
  flex: none; border: 0; background: none; color: var(--texto-2); font-size: 20px;
  width: 32px; height: 32px; border-radius: 50%;
}

/* ---------- Ficha de la noticia ---------- */
.velo {
  position: fixed; inset: 0; z-index: 60;
  touch-action: none;               /* el fondo no se mueve con la ficha abierta */
  background: rgba(3, 6, 12, .72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: aparece .2s ease;
}
@keyframes aparece { from { opacity: 0; } }

.ficha {
  position: fixed; z-index: 61; left: 0; right: 0; bottom: 0;
  max-height: 92vh; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* La ficha se desplaza sola: ni empuja la pagina de debajo al llegar al
     final (contain) ni se deja arrastrar de lado (pan-y). */
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--borde);
  background: linear-gradient(180deg, var(--superficie) 0%, var(--fondo-2) 40%);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .6);
  animation: sube .28s cubic-bezier(.22, 1, .36, 1);
  padding-bottom: calc(20px + var(--seguro-abajo));
}
@keyframes sube { from { transform: translateY(100%); } }

.ficha-asa {
  position: sticky; top: 0; z-index: 2;
  padding: 10px 0 6px; display: flex; justify-content: center;
  background: linear-gradient(to bottom, var(--superficie), transparent);
}
.ficha-asa::after {
  content: ""; width: 38px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .22);
}
.ficha-cuerpo { padding: 4px 20px 0; }
.marco-ficha {
  width: calc(100% + 40px); margin: 0 -20px 16px;   /* mismo estándar 2:1 */
}
/* Cabecera de la ficha cuando no hay foto: el logo de la cripto sobre el
   color de su categoria, ocupando el mismo sitio que ocuparia la imagen. */
.ficha-sello {
  width: calc(100% + 40px); margin: 0 -20px 4px;
  padding: 30px 20px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background:
    radial-gradient(70% 100% at 50% 0%, color-mix(in srgb, var(--color-cat) 24%, transparent), transparent 70%),
    linear-gradient(180deg, var(--superficie-2), transparent);
  border-bottom: 1px solid var(--borde);
}
.ficha-sello img { width: 76px; height: 76px; object-fit: contain; }
.ficha-sello span {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-2);
}

.ficha h2 {
  margin: 12px 0 0; font-size: 23px; line-height: 1.24; letter-spacing: -.015em;
}
.ficha .fecha { margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.ficha p.cuerpo {
  margin: 16px 0 0; font-size: 16px; line-height: 1.62; color: #d6dced;
  white-space: pre-wrap;
}
.analisis {
  margin-top: 18px; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--borde);
  border-left: 3px solid var(--oro);
  background: linear-gradient(100deg, rgba(245, 182, 10, .09), rgba(245, 182, 10, .02));
  font-size: 15px; line-height: 1.58; color: #e7ddc4;
  white-space: pre-wrap;
}
.analisis strong {
  display: block; margin-bottom: 6px; color: var(--oro);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
/* Reacciones: solo icono y número, sin etiquetas de texto. Un contador a 0 no
   se pinta (§15): mejor nada que un cero. */
.barra-reacciones {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borde);
}
.reaccion {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--borde); background: var(--superficie-2);
  color: var(--texto-2); font-size: 16px; line-height: 1;
  transition: transform .16s ease, border-color .2s, background .2s;
}
.reaccion b { font-size: 13px; font-weight: 700; color: var(--texto); }
.reaccion:active { transform: scale(.94); }
.reaccion.activa {
  border-color: var(--borde-vivo);
  background: rgba(245, 182, 10, .12);
}
.vistas {
  margin-left: auto; font-size: 12.5px; color: var(--texto-3);
  white-space: nowrap;
}

.etiquetas-ficha {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px;
}
.etiquetas-ficha:empty { display: none; }

/* Iconos sueltos repartidos a lo ancho: caben en cualquier pantalla porque se
   reparten el espacio en partes iguales, haya dos botones o cuatro. */
.acciones {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px; margin-top: 18px;
}
.accion {
  display: flex; align-items: center; justify-content: center;
  height: 48px; border-radius: 14px;
  border: 1px solid var(--borde); background: var(--superficie-2);
  color: var(--texto-2); text-decoration: none;
}
.accion.marcado {
  color: var(--oro); border-color: var(--borde-vivo);
  background: rgba(245, 182, 10, .1);
}
.accion.primaria {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  color: #1a1204; border-color: transparent;
}
.accion:active { transform: scale(.97); }

/* ---------- Noticias relacionadas ---------- */
.relacionadas { margin-top: 28px; border-top: 1px solid var(--borde); padding-top: 18px; }
.relacionadas h3 {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.relacionada {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 0; border: 0; background: none; color: inherit;
  border-bottom: 1px solid var(--borde);
}
.relacionada:last-child { border-bottom: 0; }
.relacionada:active { opacity: .6; }
/* También en 2:1, para que la lista de relacionadas siga el mismo estándar.
   El hueco del logo mantiene la misma forma aunque no haya foto, así los
   titulares quedan alineados. */
.relacionada img, .relacionada > .es-logo {
  flex: none; width: 76px; height: 38px; border-radius: 9px; object-fit: cover;
  background: var(--superficie-2);
}
.relacionada .es-logo {
  object-fit: contain; padding: 5px;
  display: grid; place-items: center; font-size: 19px;
}
.populares { margin-top: 26px; }
.populares .puesto {
  flex: none; width: 26px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--oro);
  font-variant-numeric: tabular-nums;
}
.rel-texto { min-width: 0; }
.rel-texto b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14px; line-height: 1.34; font-weight: 600;
}
.rel-texto i { display: block; margin-top: 3px; font-style: normal;
               font-size: 11.5px; color: var(--texto-3); }

/* Entrada al saltar de noticia: solo se mueve el CONTENIDO, no la hoja. Así no
   hay dos animaciones peleándose por el mismo elemento, que es lo que hacía
   que el cambio se viera a tirones. */
.ficha.entra-izq .ficha-cuerpo { animation: desde-der .22s ease-out; }
.ficha.entra-der .ficha-cuerpo { animation: desde-izq .22s ease-out; }
@keyframes desde-der { from { transform: translateX(26px); opacity: 0; } }
@keyframes desde-izq { from { transform: translateX(-26px); opacity: 0; } }

/* Pista de lo que va a pasar al soltar el gesto: discreta, arriba y al centro */
.pista-gesto {
  position: fixed; z-index: 62;
  top: calc(var(--seguro-arriba) + 14px); left: 50%;
  transform: translateX(-50%);
  padding: 7px 15px; border-radius: 999px;
  background: rgba(7, 11, 20, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  color: var(--texto-2); font-size: 12.5px; font-weight: 600;
  pointer-events: none; white-space: nowrap;
}

/* Volver arriba */
.subir {
  position: fixed; z-index: 44;
  right: 16px; bottom: calc(18px + var(--seguro-abajo));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borde);
  background: rgba(17, 26, 43, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--texto-2); display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.subir.visible { opacity: 1; transform: none; pointer-events: auto; }
.subir:active { color: var(--oro); }

/* ---------- Estados ---------- */
.cargando { display: flex; justify-content: center; gap: 6px; padding: 22px 0 34px; }
.cargando i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3);
  animation: rebote 1.1s infinite ease-in-out;
}
.cargando i:nth-child(2) { animation-delay: .15s; }
.cargando i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 0%, 80%, 100% { opacity: .25; transform: translateY(0); }
                    40% { opacity: 1; transform: translateY(-5px); } }

.fin { text-align: center; color: var(--texto-3); font-size: 12.5px;
       padding: 8px 0 34px; }

.vacio { text-align: center; padding: 56px 24px; color: var(--texto-2); }
.vacio .faro { font-size: 44px; display: block; margin-bottom: 14px; opacity: .8; }
.vacio h2 { font-size: 17px; margin: 0 0 8px; color: var(--texto); }
.vacio p { font-size: 14px; line-height: 1.55; margin: 0; color: var(--texto-3); }

/* Esqueleto mientras carga la primera vez */
/* Esqueleto de las tarjetas del histórico durante la carga inicial */
.hueso-t {
  height: 96px; border-radius: 18px; margin-bottom: 12px;
  background: linear-gradient(100deg, var(--superficie) 30%, var(--superficie-2) 50%, var(--superficie) 70%);
  background-size: 220% 100%; animation: brillo 1.4s infinite;
}

.hueso {
  border-radius: 20px; flex: 0 0 86%; min-height: 208px;
  background: linear-gradient(100deg, var(--superficie) 30%, var(--superficie-2) 50%, var(--superficie) 70%);
  background-size: 220% 100%; animation: brillo 1.4s infinite;
}
@keyframes brillo { to { background-position: -120% 0; } }

button { font: inherit; cursor: pointer; }
a { color: var(--oro); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Pantallas grandes: la app se queda centrada, como en el movil */
@media (min-width: 620px) {
  body { max-width: 600px; margin: 0 auto;
         border-inline: 1px solid var(--borde); min-height: 100vh; }
  .cabecera { max-width: 600px; margin: 0 auto; }
  .tarjeta-grande { flex-basis: 76%; }
}