/* ═══════════════════════════════════════════════════════════════════════
   FEED — rejilla de escritorio, rieles, shorts y cabecera.

   Hoja GLOBAL, no CSS dentro de la vista (owner 2026-08-14). Estaba en un
   `<style>` de `feed_base.twig` y eso tenía dos costes: el navegador no lo
   podía cachear entre páginas —viajaba en cada HTML— y las reglas de layout
   quedaban fuera del sitio donde vive el resto del panel, así que la misma
   página acababa con anchos distintos según quién la pintara.

   La carga SOLO el feed de escritorio, y aquí dentro no hay una sola regla que
   toque la caja de la página: el ancho y el margen los sigue poniendo
   `dashboard.css`, igual que en la vitrina o en los pedidos.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══ [D-FEED-1] La rejilla del feed en escritorio: 300 · centro · 320 ═══
   El centro llena lo que dejan los rieles (owner 2026-09-20, abajo); los rieles
   son pegajosos y tienen su propio scroll cuando no caben.

   La CAJA de la página no se toca: ni `.dashboard-main` ni `.wall-content`
   aparecen aquí. El feed se sirve del mismo contenedor y del mismo margen que
   la vitrina, los pedidos y el resto del panel (owner 2026-08-14). El centro es
   `minmax(0, 1fr)` justamente para eso: cuando el margen global deja menos
   sitio, encoge la columna en lugar de desbordar la página. */

/* El aviso de «no tienes dirección» va UNA sola vez. Desde 1320 lo lleva el
   riel izquierdo (D-FEED-3, bloque ámbar); enseñarlo además como banda de ancho
   completo era el mismo susto dos veces y empujaba el contenido hacia abajo.
   Por debajo de 1320 el riel no existe, así que la banda vuelve a ser el único
   sitio donde cabe. Lleva `!important` porque el banner se enseña con estilo en
   línea desde su propio JS. */
@media (min-width: 1320px) {
    .addr-banner { display: none !important; }
}

.fx-grid {
    display: grid;
    /* [owner 2026-09-20] «poner el mismo ancho del muro global que el perfil del usuario»: el centro ya no mide 600 centrados, llena la caja de la página que dejan los rieles. */
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}
.fx-main { min-width: 0; }   /* sin esto una imagen ancha estira la columna */

.fx-rail {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
}
.fx-rail::-webkit-scrollbar { width: 6px; }
.fx-rail::-webkit-scrollbar-thumb { background: var(--ib-border, rgba(0,0,0,.12)); border-radius: 3px; }

/* ── Menu minimalista del riel, patron X ──
   Sin recuadros: filas de icono + texto. El activo se marca con NEGRITA e
   icono relleno, no con una barra lateral — un borde como señal de estado no
   viaja bien a nativo (RSD) y el peso tipografico si. */
.fx-nav { display: flex; flex-direction: column; gap: 2px; }

.fx-item, .fx-filter {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px; border-radius: 999px;
    font-size: 16px; text-decoration: none; color: var(--ib-text-2, #1f2937);
    background: none; border: 0; width: 100%; cursor: pointer;
    font-family: inherit; text-align: left;
}
.fx-item i, .fx-filter i { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ib-text-2, #1f2937); }
.fx-item:hover, .fx-filter:hover { background: var(--ib-bg-soft, #f6f7f9); }
.fx-item span, .fx-filter span { min-width: 0; }

/* Activo: negrita, como en X. */
.fx-filter.is-on { font-weight: 800; color: var(--ib-text, #111827); }
.fx-filter.is-on i { color: var(--ib-text, #111827); stroke-width: 2.4; }

.fx-num {
    margin-left: auto; font-size: 13px; font-weight: 700;
    color: #fff; background: var(--ib-text, #111827);
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ── Mas opciones ── */
.fx-more { position: relative; }
.fx-more-menu {
    position: absolute; left: 6px; right: 6px; bottom: calc(100% + 6px);
    background: var(--ib-bg, #fff);
    border: 1px solid var(--ib-border-soft, rgba(0,0,0,.06));
    border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
    padding: 6px; z-index: 40;
}
.fx-more-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    font-size: 15px; color: var(--ib-text-2, #1f2937); text-decoration: none;
}
.fx-more-link:hover { background: var(--ib-bg-soft, #f6f7f9); }
.fx-more-link i { width: 18px; height: 18px; color: var(--ib-muted, #4b5563); }

/* ── Invitación del invitado ──
   Un solo nivel de recuadro: fondo suave, sin borde, para no repetir el marco
   que el menú de arriba justamente no tiene. */
.fx-join {
    margin: 14px 4px 0; padding: 18px 16px 16px;
    border-radius: 16px; background: var(--ib-bg-soft, #f6f7f9);
}
.fx-join-title {
    font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
    color: var(--ib-text, #111827); margin: 0 0 10px;
}
.fx-join-list { list-style: none; margin: 0 0 14px; padding: 0; }
.fx-join-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.45; color: var(--ib-text-2, #1f2937);
    padding: 5px 0;
}
.fx-join-list i { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--ib-muted, #4b5563); }
.fx-join-btn { width: 100%; justify-content: center; margin-top: 8px; }

/* ── Entregar en ── */
.fx-addr {
    display: flex; align-items: center; gap: 12px;
    margin: 6px 4px 0; padding: 12px 14px; border-radius: 14px;
    text-decoration: none; color: var(--ib-text-2, #1f2937);
    background: var(--ib-bg-soft, #f6f7f9);
}
.fx-addr > i { width: 18px; height: 18px; color: var(--ib-muted, #4b5563); flex: 0 0 auto; }
.fx-addr span { display: flex; flex-direction: column; min-width: 0; }
.fx-addr small { font-size: 13px; color: var(--ib-muted, #4b5563); }
.fx-addr b { font-size: 15px; font-weight: 700; color: var(--ib-text, #111827); }
/* Sin direccion NO es un detalle: el geo-scope no sabe que vendedores pueden
   entregar, asi que corta la compra. Verde suave y visible, con el icono en rojo. */
.fx-addr--none {
    margin: 0 0 16px;
    background: #ebf6f1;
    border-radius: 12px;
    padding: 12px 16px;
}
.fx-addr--none > i { color: #dc2626; }
.fx-addr--none b { color: #111827; }
.fx-addr--none small { color: #111827; line-height: 1.45; margin-top: 2px; }

/* ═══ [D-SHORT-1] Shorts en la cabecera del centro ═══
   El carril ES la tira horizontal de la casa desde el 2026-09-15 (D-DESIGN-9):
   `_feed_shorts.twig` envuelve esta fila en `.ib-strip` y le pone las flechas de
   los lados, que es lo que faltaba en escritorio.

   Por eso aquí ya NO se declara el desplazamiento: `overflow-x: auto` y
   `scrollbar-width: none` los pone `.ib-strip-rail` (dashboard.css), y
   declararlos otra vez dejaba dos dueños de la misma barra —el día que la tira
   de la casa cambie de mecánica, esta vista se quedaría con la vieja en
   silencio—. Lo propio de los shorts es solo el aire: separación y hueco. */
.fx-shorts {
    display: flex; gap: 10px; padding: 2px 2px 14px;
}
.fx-short {
    position: relative; flex: 0 0 auto;
    width: 104px; height: 168px; border-radius: 14px; overflow: hidden;
    background: var(--ib-bg-soft, #f6f7f9); text-decoration: none;
    border: 0; padding: 0; cursor: pointer; display: block;
}
.fx-short-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-short-img--none { display: flex; align-items: center; justify-content: center; }
.fx-short-img--none i { width: 26px; height: 26px; color: #b9c0c9; }

/* Crear el tuyo y «Ver todos»: mismo hueco, borde discontinuo. */
.fx-short--new, .fx-short--all {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 2px dashed var(--ib-border, rgba(0,0,0,.12)); background: none;
}
.fx-short--new:hover, .fx-short--all:hover { background: var(--ib-bg-soft, #f6f7f9); }
.fx-short-plus {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--ib-text, #111827); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.fx-short-plus i { width: 20px; height: 20px; }
.fx-short-newtxt { font-size: 13px; font-weight: 600; color: var(--ib-text-2, #1f2937); }

/* [D-SHORT-2] El anillo dice CUANTAS publicaciones tiene la persona: no se escribe un
   numero, se parte el anillo en tantos tramos como publicaciones (tope 10: en 34 px no se
   distinguen mas). La plantilla pone --n; una sola regla dibuja cualquier numero.
   Owner 2026-09-24: en el verde de la casa (indicador de «hay que ver»; gris quedara para
   «ya visto») y de 3 px, porque en gris y 2 px no se leia sobre el video. */
.fx-short-ring {
    position: absolute; top: 8px; left: 8px;
    width: 34px; height: 34px; border-radius: 50%; padding: 3px;
    display: flex; align-items: center; justify-content: center;
    --n: 1; color: var(--ib-accent, #2bb295); background: currentColor;
}
.fx-short-ring--multi {
    background: repeating-conic-gradient(currentColor 0 calc(360deg / var(--n) - 8deg), transparent 0 calc(360deg / var(--n)));
}
/* El latido (owner 2026-09-24, opción A): el anillo late dos veces, pum pum, y descansa, como
   un corazón; es el nombre del formato hecho movimiento. No laten a la vez: cada recuadro espera
   0,18 s más que el anterior (--i lo pone la plantilla con su posición) y el latido recorre la
   tira de izquierda a derecha. Solo se anima el tamaño, que el navegador mueve sin repintar.
   Quien pide «reducir movimiento» en su sistema ve el anillo quieto. Cuando exista el «visto»,
   el anillo visto se apaga en gris y deja de latir (SHORTS.md, D-SHORT-2). */
.fx-short-ring {
    animation: fx-latido 1.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.18s);
}
@keyframes fx-latido {
    0%       { transform: scale(1); }
    8%       { transform: scale(1.18); }
    16%      { transform: scale(1); }
    24%      { transform: scale(1.12); }
    34%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .fx-short-ring { animation: none; }
}
/* La cara del autor. Como <img> necesita `object-fit` para no deformarse: los
   logos de tienda son cuadrados y las fotos de perfil no siempre.

   SIN fondo oscuro: un logo con transparencia se pintaba sobre negro y quedaba
   un botón opaco encima del vídeo. El hueco lo tapa la propia imagen. */
img.fx-short-ava {
    width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--ib-bg, #fff);
    object-fit: cover; background: var(--ib-bg, #fff);
    display: block;
}

/* La inicial es el último recurso —autor sin logo ni foto— y ahí sí hace falta
   un fondo, si no la letra flota sobre el vídeo. */
span.fx-short-ava {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--ib-text, #111827); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; border: 2px solid var(--ib-bg, #fff);
}

/* ═══ Riel derecho ═══ */
/* Bloques con AIRE entre ellos: antes iban pegados y se leia como un muro. */
/* SIN RECUADRO (owner 2026-09-19): «siguiendo en el muro global a los bloques
   de qué se mueve hoy, a quién seguir y categorías vamos a eliminarles el borde
   y el radio. Quiero que se vea más limpio no tanto borde». Aquí vivían
   `border: 1px solid var(--ib-border-soft, rgba(0,0,0,.06))` y
   `border-radius: 16px`, y con ellos el riel eran tres cajas dentro de una
   columna: dos niveles de marco para el mismo contenido. Quitarlos BAJA el
   número de niveles de borde, no lo sube (la regla de la casa es un solo nivel
   por sección, con los sub-bloques planos).
   LO QUE SIGUE SEPARANDO LOS BLOQUES ya existe y no se toca: los 14 px de
   `gap` de `.fx-rail` (arriba) más el título de 18/800 de `.fx-box-title`. Ni
   banda nueva, ni divisor nuevo.
   EL `padding` LATERAL PASA A 0 para que los títulos queden a plomo con el
   resto del riel — con el borde fuera, 18 px de sangrado dejaban el texto
   desalineado respecto a la columna. El vertical se conserva tal cual.
   EL `background` SE CONSERVA: hoy es blanco sobre blanco y no cambia nada de
   lo que se ve, y deja el bloque preparado si mañana el riel tiene fondo.
   NO ALCANZA AL CONTENIDO, que es lo que el dictado llama «bloque» y lo que no:
   la tira de cuatro miniaturas (`.nsr-col-strip`, que además comparte con la
   portada del buscador) conserva sus esquinas, y las píldoras de categoría
   (`.fx-cat`) conservan borde y radio porque son CONTROLES, no el marco. */
.fx-box {
    background: var(--ib-bg, #fff);
    padding: 18px 0 20px;
}
.fx-box-title {
    font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
    color: var(--ib-text, #111827); margin: 0 0 10px;
}
.fx-col { margin-top: 16px; text-decoration: none; display: block; }
.fx-col:first-of-type { margin-top: 6px; }
.fx-col .nsr-col-title { font-size: 16px; margin-bottom: 8px; }
.fx-col .nsr-col-title i { width: 16px; height: 16px; }
/* La celda de la tira puede llevar VÍDEO (owner 2026-09-15: «deben ser de videos
   reproduciéndose, así en miniatura»). Un `<video>` sin esta regla mide su
   tamaño INTRÍNSECO dentro de un hueco de 3:4 y desborda la celda, que lleva
   `overflow: hidden` en la tira. NO se repite aquí la regla de la imagen: la
   forma de la celda sigue siendo la de `.nsr-col-cell` de `search.css.twig`
   —una sola definición—, y esto es solo el relleno del vídeo, que allí no
   existía. Se queda en `feed.css` porque es del RIEL: el buscador del shell
   comparte la tira y no se toca en este lote. */
.fx-col .nsr-col-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A QUIEN SEGUIR — la fila (cara, texto y boton) YA NO SE DEFINE AQUI.
   Vivia copiada byte a byte en el bloque de estilos de
   `app/Modules/Core/Templates/admin/users/user_wall.twig` con otros nombres
   (`.wf-following-*`), y esa copia era la pareja que el comprobador de
   duplicados contaba. Desde el 2026-09-16 hay UNA sola definicion, en
   `public/core/css/dashboard.css` (buscar «FILA DE "A QUIEN SEGUIR"»), que
   cargan las dos pantallas. Aqui no queda nada: el tamano del boton lo da el
   canonico `.ib-btn` y el resto la definicion unica.
   EL BOTON SIGUE MIDIENDO LO MISMO QUE ANTES (34px): llevaba aqui una caja
   propia escrita a mano (`height:34px; padding:0 16px; font-size:14px`) y esa
   medida es EXACTAMENTE la variante compacta que la casa ya tiene,
   `.ib-btn--sm` (`public/core/css/ib-confirm.css:62`). Se aplica ahora desde
   el MARCADO del riel (`_feed_rail_right.twig`), que es la doctrina de
   D-DESIGN-2 («el look vive solo en .ib-btn; la clase se pone en el markup»),
   en vez de repetir sus tres numeros aqui. */

/* Categorias: pildoras, el mismo lenguaje que los chips de la vitrina. */
.fx-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-cat {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--ib-border, rgba(0,0,0,.12));
    font-size: 14px; color: var(--ib-text-2, #1f2937); text-decoration: none;
}
.fx-cat:hover { background: var(--ib-bg-soft, #f6f7f9); }
/* [owner 2026-09-15] AQUI VIVIA `.fx-filters--head` — las pildoras de la
   cabecera del centro que enseñaban Reciente · Tendencias · Siguiendo por
   debajo de 1320 px, incluida la app movil. Su markup se retiro de
   `feed_base.twig`, y sin markup no queda nada que ocultar a 1320: los tres
   destinos viven en la barra de enlaces del movil y en la tira de la barra de
   arriba. `.fx-filter` (mas arriba) esta MUERTO: su UNICO markup es el partial
   `_feed_filters.twig`, que no incluye nadie; el riel izquierdo pinta
   `.fx-item`. */

/* ── Cortes (D-FEED-1) ── */
/* 1000–1319: cae el riel IZQUIERDO. Su contenido vive también en la topbar,
   el megamenú y la barra flotante; el derecho es el único sitio donde vive el
   descubrimiento. */
@media (max-width: 1319px) {
    .fx-grid { grid-template-columns: minmax(0, 1fr) 320px; }
    .fx-rail--left { display: none; }
}
/* Por debajo de 1000, columna única: la vista vuelve a ser la de siempre y la
   app móvil (<768) no se toca en absoluto. */
@media (max-width: 999px) {
    .fx-grid { display: block; }
    .fx-rail { display: none; }
}

/* ═══ Feed header ═══ */
.feed-header {
    margin-bottom: 20px;
}
.feed-header-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 14px;
}
.feed-header-title {
    font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
    margin: 0 0 4px 0;
}
.feed-header-subtitle {
    font-size: 13px; color: var(--text-muted); margin: 0;
}
/* .feed-algo-tabs / .feed-algo-tab: COMPONENTE GLOBAL (dashboard.css) —
   lo reutilizan este feed y los chips de categorías de la vitrina. */

/* L4 (D-LAUNCH-4): header del feed compacto en móvil. */
@media (max-width: 768px) {
    .feed-header { margin-bottom: 12px; }
    .feed-header-title { font-size: 20px; }
}

/* ═══ Estado vacío ═══ */
.feed-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 60px 20px; gap: 10px;
    color: var(--text-muted);
}
.feed-empty p { font-size: 16px; font-weight: 600; margin: 0; }
.feed-empty span { font-size: 13px; }

/* Los estilos de la tarjeta viven en el partial compartido (fuente única). */

/* ═══ Franja del MURO ACTIVO (maqueta 01b · D-MURO-3, tanda D2) ═══
   Dice qué muro se está viendo y qué entra en él, con la puerta de editarlo al
   lado. Banda PLANA sobre fondo suave: no es una tarjeta y no anida bordes con
   las publicaciones de abajo (un solo nivel de borde por sección).
   Va también en móvil, donde el rótulo activo de la barra puede quedar fuera
   de pantalla y esta franja es la única pista de dónde está la persona. */
.fx-wallbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 14px;
    border-radius: 12px;
    background: var(--ib-bg-soft, #f6f7f9);
}
.fx-wallbar-txt {
    flex: 1 1 220px; min-width: 0;
    font-size: 14px; line-height: 1.5; color: var(--ib-muted, #4b5563);
}
.fx-wallbar-txt strong { display: block; color: var(--ib-text, #111827); font-weight: 700; }
.fx-wallbar-edit { flex-shrink: 0; }
@media (max-width: 768px) {
    /* A sangre completa en modo app: nada de una tarjeta flotante de escritorio. */
    .fx-wallbar { border-radius: 0; margin: 0 -16px 12px; padding: 12px 16px; }
}