.lista_compacta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
}

.fila_compacta {
    display: block;
    background: var(--tarjeta_interna);
    border: 1px solid var(--borde_tarjeta_interna);
    border-radius: 0.8rem;
    padding: 0.65rem 2.1rem 0.65rem 0.9rem;
    color: inherit;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    transition: filter .15s ease;
}

.fila_compacta:hover {
    filter: brightness(0.98);
}

.fila_compacta_resumen {
    min-width: 0;
}

.fila_compacta_linea1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.fila_compacta_linea2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    font: 400 0.72rem "Ubuntu", sans-serif;
    color: var(--texto_menor_enfasis);
}

.fila_compacta_titulo {
    font: 600 0.85rem "Ubuntu", sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Variante sin truncar - para filas donde el nombre va solo en su propia
   línea (familias/linajes/tipos de conexión) y el resto de los datos
   siempre debajo, nunca al lado compitiendo por el mismo ancho, así que no
   hace falta cortarlo con "...". */
.fila_compacta_titulo_multilinea {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

/* Filas de Familias/Linajes/Tipos de Conexión: sin avatar ni acción al
   costado, así que el nombre va centrado arriba (no pegado a la izquierda
   como en una fila con ícono) y todos los datos asociados (familia/linaje
   dueño, modo, polaridad, descripción) van juntos en una sola fila debajo,
   uno al lado del otro - no una debajo de la otra. */
.fila_compacta_centrada .fila_compacta_titulo {
    display: block;
    text-align: center;
}

.fila_compacta_detalles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    font: 400 0.72rem "Ubuntu", sans-serif;
    color: var(--texto_menor_enfasis);
    text-align: center;
}

.fila_compacta_destacado {
    display: block;
    font: 700 0.8rem "Ubuntu", sans-serif;
    color: var(--base);
    white-space: nowrap;
}

/* Flecha que indica que la fila se puede expandir: centrada verticalmente,
   pegada al borde derecho gracias al position:relative de .fila_compacta y
   al padding-right que le deja el espacio. */
.fila_compacta_expandir {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    color: var(--texto_menor_enfasis);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.fila_compacta.expandida .fila_compacta_expandir {
    transform: translateY(-50%) rotate(180deg);
}

.fila_compacta_detalle {
    display: none;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--fondo);
    font-size: 0.78rem;
}

.fila_compacta.expandida .fila_compacta_detalle {
    display: block;
}

.fila_compacta_acciones {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Insignia chica (tipo de entidad, peso de una conexión, tipo de
   conexión...) - texto corto, sin acción propia. */
.pill {
    display: inline-block;
    flex-shrink: 0;
    font: 700 0.62rem "Ubuntu", sans-serif;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.pill_bien {
    background: var(--bien_fondo);
    color: var(--bien);
}

.pill_mal {
    background: var(--mal_fondo);
    color: var(--mal);
}

.pill_base {
    background: var(--base);
    color: var(--base_clara);
}

.pill_neutro {
    background: var(--fondo);
    color: var(--texto_menor_enfasis);
}

/* A esta fila la envuelve .fila_compacta (título+detalle a la izquierda,
   opcionalmente un pill/botón como hermano a la derecha) - .fila_compacta
   pasa a fila (para que ese hermano quede al lado), pero .fila_compacta_resumen
   tiene que seguir apilando sus propias líneas (linea1 arriba, linea2
   debajo) puertas adentro; si ambas reglas comparten "display:flex" sin
   flex-direction, linea1/linea2 quedan una al lado de la otra en vez de
   apiladas - por eso van separadas, con column explícito en resumen. */
@media (min-width: 601px) {
    .fila_compacta {
        display: flex;
        align-items: center;
        gap: 1.2rem;
    }

    .fila_compacta_resumen {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .fila_compacta_detalle {
        margin-top: 0.0;
        padding-top: 0.0;
        border-top: none;
    }
}

@media (max-width: 600px) {
    .fila_compacta_acciones {
        flex-direction: column;
    }
}

/* Avatar circular chico, reusado en la fila de una entidad (listado) y en el
   encabezado de un post (autor). Sin foto cargada, fila_compacta_avatar_vacio
   deja un círculo relleno en vez de un <img> roto. */
.fila_compacta_avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Placeholder cuando la entidad no tiene foto - ícono vectorial según tipo
   (ver contenidoAvatarVacio() en avatar_entidad.js), nunca una imagen. */
.avatar_vacio {
    background: var(--fondo);
    border: 1px solid var(--borde_tarjeta_interna);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto_menor_enfasis);
}

.avatar_vacio svg {
    width: 55%;
    height: 55%;
}

.avatar_vacio .avatar_hash {
    font: 700 1rem "Ubuntu", sans-serif;
}

/* Ícono de tipo de entidad en el listado (social/entidades.js) - mismo SVG
   que el placeholder de avatar de arriba (contenidoAvatarVacio()), pero del
   tamaño del texto y en el color principal, en vez de grande y gris como el
   avatar vacío. inline-flex (no flex): un flex de bloque colapsa el ancho
   del <svg> hijo a 0 por el "max-width: 100%" de reset.css - ver el mismo
   fix aplicado en calendario.css (.cal_nav_btn svg). */
.tipo_icono_entidad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--base);
}

.tipo_icono_entidad svg {
    width: 100%;
    height: 100%;
    max-width: none;
}

.tipo_icono_entidad .avatar_hash {
    font: 700 0.9rem "Ubuntu", sans-serif;
}

/* Fila de entidad: avatar + resumen en flex a cualquier ancho (a diferencia
   del fila_compacta genérico, que solo pasa a flex a partir de 601px). */
a.fila_compacta.fila_compacta_entidad {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.fila_compacta_entidad .fila_compacta_resumen {
    flex: 1;
    min-width: 0;
}

/* Tarjeta de post: header propio (foto+nombre a la izquierda, fecha a la
   derecha), el contenido va debajo a todo el ancho - no usa
   fila_compacta_resumen/linea1/linea2 como el resto de las filas. */
a.fila_compacta.fila_compacta_post {
    display: block;
}

.post_encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}

.post_encabezado_autor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

/* Las dos fechas de un post (ocurrencia y creación) siempre se muestran
   juntas, apiladas a la derecha - la de ocurrencia primero/más destacada
   (de qué habla el post), la de creación debajo y más chica (cuándo se
   posteó). */
.post_fechas {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
    text-align: right;
}

.post_fecha_creacion {
    font-size: 0.68rem;
}

.post_contenido {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.post_resaltado {
    color: var(--base);
    font-weight: 600;
}

/* Desktop: dos columnas en vez de una lista angosta centrada - para feeds
   grandes (posteos, entidades). Las listas secundarias más chicas de un
   perfil (posts propios/menciones dentro de entidad.php) quedan en una sola
   columna a propósito, no llevan esta clase. */
@media (min-width: 900px) {
    .lista_compacta.lista_compacta_ancha {
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }
}