/* ═══ PORTADA VIVA — capa de presentación aislada (prototipo) ═══
   Todos los selectores viven bajo .entrada-viva: ningún estilo de este
   archivo toca elementos del sitio original. Si este archivo no carga,
   el sitio queda exactamente como hoy. Sin controles de Moderación:
   la gobierna el visitante con su flecha (ver .ev-fold). */

/* Contenedor propio: hijo flex de .community-chat, ANTES del feed.
   flex:none → no roba el scroll del feed; el feed (flex:1) absorbe
   la diferencia de altura. Sin posición absoluta ni flotantes.
   PULIDO FINAL (CEO 15-oct · prioridad: evitar la saturación visual):
   el contenedor es CASI INVISIBLE — sin borde, sin tarjeta, sin fondo
   propio — para que las dos cintas se lean como una extensión natural
   del fondo oscuro estrellado del sitio; la separación entre filas
   la da el AIRE (padding), no líneas. overflow:hidden se conserva
   porque lo necesitan el bucle de las cintas y la animación de la
   flecha al recoger el bloque. */
.entrada-viva{flex:none;margin:2px 3px 0;overflow:hidden;color:#dfe5ea;
  font:400 13px/1.35 system-ui,-apple-system,sans-serif}
.entrada-viva[hidden]{display:none!important}
/* INDEPENDENCIA del menú (V187, orden CEO 19-oct — sustituye la
   ocultación conjunta del 15-oct): la portada ya NO desaparece cuando
   el visitante guarda el menú principal (body.menu-collapsed). Su
   visibilidad la gobierna SOLO su propia flecha (.ev-fold), cuyo
   control queda alcanzable con el menú abierto y con el menú guardado:
   recogida, queda visible únicamente su franja de flecha; desplegada,
   se ve completa en ambos estados del menú. */
.entrada-viva *{box-sizing:border-box}
.ev-body{overflow:hidden}

/* ── LAS DOS FLECHAS: LA CINTA RECOGIDA NO RESERVA FRANJA (CEO 19-oct) ──
   Con el menú GUARDADO, el círculo flotante del menú (#menu-collapse,
   36 px) termina en y=51 y la franja de esta flecha empezaba en y=43:
   la franja pasaba POR DEBAJO del círculo y los dos chevrons quedaban
   a 6 px borde a borde en la misma columna — se leían como un solo
   gesto pegado.
   PRIMER INTENTO (2e49fdc, revertido por el CEO el mismo día): bajar
   el bloque con margin-top separaba los chevrons pero ROBABA 24 px de
   alto útil al chat. SEGUNDO INTENTO (f650238, sustituido también por
   el CEO): la flecha saltaba al extremo izquierdo de su franja — la
   separación era total, pero la franja vacía de 26 px (margen + flecha)
   seguía reservada arriba y el chat seguía sin subir al máximo.
   FORMA FINAL (dictada por el CEO, 13:20, captura anotada): en ese
   único estado (menú guardado × cinta recogida Y ASENTADA — el cuerpo
   ya oculto, para no tocar la animación de pliegue de entrada-viva.js)
   el bloque no reserva NI UN píxel en el flujo (height:0, sin margen):
   el feed sube hasta el suelo que deja el estado sin cinta (medido a
   390 px: 67 → 41). Y la flechita FLOTA como el círculo — posición
   fija, misma columna derecha, DEBAJO de él: su chevron queda en
   x=344–360 (centro 352, idéntico al del círculo) y a 18 px borde a
   borde del chevron del menú (y 41 → 59): ni pegados como al
   principio (6 px) ni en extremos opuestos. El círculo no se mueve
   ni cambia; la flecha conserva su tamaño (44×24 de caja táctil, el
   glifo de siempre) y su mecánica: tocarla despliega la cinta, que
   vuelve a ocupar su banda normal con la flecha dentro, y tocar el
   círculo abre el menú sin tocar la cinta. Al caer sobre la primera
   burbuja asume el mismo compromiso que ya tiene el círculo: flota
   pegada al borde y el feed se desplaza bajo ella. Sin :has
   (navegadores muy viejos) la regla no engancha y la flecha queda
   en su franja, como antes.
   EXTENSIÓN V4 (CEO 19-oct 14:24, captura anotada): recogida es
   recogida, con el menú abierto o guardado. Con el menú ABIERTO la
   franja de 24 px también era una banda casi vacía «robando
   espacio por gusto» entre la fila de botones y la primera burbuja,
   así que el colapso a height:0 pasa a ser GENERAL (todo estado
   recogido y asentado) y la flechita flota también con el menú
   abierto: queda donde ya se pintaba en su franja (top:97 px, su
   chevron en y=101–117), un poquito abajo de los botones del menú
   — el panel termina en y=95 — y en la misma columna derecha de
   siempre: su chevron comparte centro X con el del menú (a 2 px) y
   queda a 42 px borde a borde del chevron de guardado, que vive en
   la propia fila de botones (y=41–59). El feed gana los mismos
   26 px (medido a 390 px: 121 → 95, el suelo exacto del estado sin
   cinta con el menú abierto). Con el menú guardado manda la
   posición de la V3 (top:55 px, debajo del círculo): ese estado
   queda píxel a píxel como el CEO lo aprobó. */
.entrada-viva.is-collapsed:has(> .ev-body[hidden]){height:0;margin-top:0}
.entrada-viva.is-collapsed:has(> .ev-body[hidden]) .ev-fold{position:fixed;top:97px;right:12px;width:44px;z-index:40}
body.menu-collapsed .entrada-viva.is-collapsed:has(> .ev-body[hidden]) .ev-fold{top:55px}

/* ── Fila 1 · Cinta de las 16 cuentas (pieza 1) ──
   Reutiliza las clases reales .eco-ticker/.eco-ticker-track/.eco-ticker-set
   (sin scope en el CSS del sitio) y espeja aquí SOLO las reglas de .eco-tick
   que el sitio tiene scopeadas a .community-bio-dialog, con los mismos
   valores. */
.ev-cinta{display:flex;align-items:stretch}
.ev-cinta .eco-ticker{flex:1;min-width:0;margin:0;padding:0;border:0}
.entrada-viva .eco-ticker-set{padding:9px 17px;gap:40px}
.entrada-viva .eco-tick{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:13px;color:#dfe5ea!important;text-decoration:none!important;border-bottom:0!important}
/* Jerarquía tipográfica tranquila (solo en esta instancia; la cinta
   de la Biografía conserva su aspecto original): el NOMBRE de la
   marca va atenuado y la CIFRA — el dato — queda como elemento claro.
   Los puntos de marca pierden el brillo permanente del estilo base y
   la sigla pasa de pastilla de color pleno a tinte suave del color
   de marca: el color está, pero discreto y elegante. */
.entrada-viva .eco-tick .eco-tick-label{color:#a9b3bd}
.entrada-viva .eco-dot{box-shadow:none}
.entrada-viva .eco-sigla{background:color-mix(in srgb,var(--bc,#9aa3ad) 20%,transparent);color:#d5dbe1}
/* Fundido suave en los bordes de ambas pistas: los items aparecen y
   desaparecen con elegancia en vez de cortarse en seco — efecto
   teletipo premium sin ningún elemento adicional. */
.entrada-viva .eco-ticker,.entrada-viva .ev-news-strip{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.entrada-viva a.eco-tick{cursor:pointer}
.entrada-viva .eco-tick b{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12px;
  font-weight:600;font-variant-numeric:tabular-nums;color:#f4f7fa!important}
.entrada-viva .eco-tick .bio-delta{font-size:.84em}
.entrada-viva a.eco-tick:hover .eco-sigla{background:color-mix(in srgb,var(--bc,#9aa3ad) 45%,transparent);color:#fff}
.entrada-viva a.eco-tick:active{transform:scale(.94)}
/* Acento de actividad REAL: la cuenta subió hoy (delta_24h > 0 en
   ecosystem-health). Sobrio: un halo suave en el punto y un tinte
   algo mayor en la sigla. Sin dato positivo → sin acento. */
.entrada-viva .eco-tick--activa .eco-dot{box-shadow:0 0 6px color-mix(in srgb,var(--bc,#9aa3ad) 55%,transparent)}
.entrada-viva .eco-tick--activa .eco-sigla{background:color-mix(in srgb,var(--bc,#9aa3ad) 34%,transparent)}

/* ── Fila 2 · Teletipo de titulares (pieza 2) ──
   PULIDO FINAL (CEO 15-oct): SIN etiqueta fija — ni «NOTICIAS», ni
   recuadro, ni separador vertical. Los titulares recorren TODO el
   ancho de la fila en bucle continuo sin costuras (dos sets idénticos,
   el 2.º aria-hidden — la misma técnica que la cinta), con separación
   generosa entre titulares y fundido suave en los bordes (ver la
   regla de máscaras de la fila 1). Es un teletipo informativo, sin
   afirmar «última hora». Rotación amplia (directiva del CEO, 15-oct):
   hasta 30 titulares frescos, los «top» primero — el ciclo tarda en
   repetirse y lo importante abre. Cada titular va precedido por un
   punto separador que cicla los 4 colores del ecosistema (ver
   .ev-news-sep): el único color de la fila. Velocidad: un set completo cada 75 s con
   tope absoluto de 40 px/s (ver el motor: sin el tope, el set de hoy
   correría a ~108 px/s, ilegible). Pausa al tocar/hover y arrastre,
   como la cinta — tocar detiene, tocar el titular lo abre. Si hay
   1 solo item o el contenido no supera el ancho visible, NO hay
   duplicado ni desplazamiento: queda estático. Con movimiento
   reducido: sin motor — tira estática deslizable a mano. */
.ev-news{display:flex;align-items:stretch;min-height:37px}
.ev-news[hidden]{display:none!important}
.ev-news-strip{display:flex;align-items:center;overflow:hidden;flex:1;min-width:0}
.ev-news-track{display:flex;width:max-content;will-change:transform}
.ev-news-set{display:inline-flex;align-items:center;gap:30px;padding:8px 15px}
.ev-news-item{flex:none;display:inline-flex;align-items:baseline;gap:7px;
  color:#dfe5ea;text-decoration:none;white-space:nowrap}
/* Punto separador que precede a cada titular: ÚNICO portador de color
   de la fila (directiva del CEO, 15-oct). Su color lo pone el módulo
   en línea, ciclando los 4 colores del ecosistema (gris → azul →
   rosado → ámbar, los mismos valores --bc de la cinta de cuentas).
   Pequeño (5 px) y suave (opacidad .8): un acento, no un faro.
   Titulares, fuente y tiempo NO llevan color añadido. */
.ev-news-item .ev-news-sep{flex:none;width:5px;height:5px;border-radius:50%;
  align-self:center;opacity:.8}
.ev-news-item .ev-news-title{white-space:nowrap;font-size:12.5px;color:#edf1f5}
.ev-news-item .ev-news-meta{flex:none;font-size:10.5px;color:#7d8791;white-space:nowrap}
.ev-news-item .ev-news-newdot{flex:none;width:6px;height:6px;border-radius:50%;background:#7ee2a8;
  align-self:center}

/* ── Franja de la flecha del visitante ──
   Lenguaje visual de la flecha del menú superior (#menu-collapse del
   sitio): mismo SVG (M6 14l6-6 6 6, trazo 2.4), mismo color apagado
   #87919d, sin fondo, y rota 180° cuando el bloque está recogido.
   Es una flecha PROPIA: la del menú no se toca y sigue haciendo
   exactamente lo que hace hoy. */
.ev-fold{display:flex;align-items:center;justify-content:flex-end;width:100%;height:24px;
  padding:0 10px;background:none;border:0;
  color:#87919d;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.ev-fold .ev-chev{display:block;width:16px;height:16px;transition:transform .25s ease}
.entrada-viva.is-collapsed .ev-fold .ev-chev{transform:rotate(180deg)}
.ev-fold:focus-visible{outline:2px solid #e1e5ec;outline-offset:-2px}

/* ── Movimiento reducido: la cinta queda estática y desplazable a mano
   (mismo criterio que el sitio: .eco-ticker overflow-x:auto) y la
   flecha no anima su rotación. */
@media (prefers-reduced-motion:reduce){
  .entrada-viva .eco-ticker{overflow-x:auto}
  .ev-news-strip{overflow-x:auto;scrollbar-width:none}
  .ev-news-strip::-webkit-scrollbar{display:none}
  .ev-fold .ev-chev{transition:none}
}