.lv-social-shell,
.lv-social-shell * {
    box-sizing: border-box;
}

.lv-social-shell {
    --lv-social-text: #101828;
    --lv-social-muted: #667085;
    --lv-social-border: #d0d5dd;
    --lv-social-soft: #f8fafc;
    --lv-social-primary: #155eef;
    --lv-social-accent: #087443;
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 1120px;
    margin: 24px auto 48px;
    padding: 0 16px;
    color: var(--lv-social-text);
    overflow-x: clip;
}

/* Título de sección (Muro / Siguiendo / Mensajes / Avisos). Sustituye a la tarjeta
   lv-social-top. Usa --lv-social-text, que el tema oscuro ya redefine → auto-temático. */
.lv-social-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--lv-social-text);
}

.lv-social-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
}

.lv-social-top__me {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lv-social-top__me img,
.lv-social-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2f6;
    flex: 0 0 auto;
}

.lv-social-top__me strong,
.lv-social-author strong {
    display: block;
    font-size: 15px;
    line-height: 1.2;
}

.lv-social-top__me span,
.lv-social-author span,
.lv-social-meta {
    display: block;
    color: var(--lv-social-muted);
    font-size: 12px;
    line-height: 1.35;
}

.lv-social-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.lv-social-tabs button,
.lv-social-compose button,
.lv-social-card button,
.lv-social-new-message button,
.lv-social-reply button,
.lv-social-comment-form button,
.lv-social-thread__head button,
.lv-social-message__actions button,
.lv-social-message-edit button,
.lv-social-notifications-head button,
.lv-social-following-search button,
.lv-social-following-filter__clear,
.lv-social-user-card button {
    min-height: 38px;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lv-social-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.lv-social-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 11px;
}

.lv-social-tabs button.is-active,
.lv-social-compose button,
.lv-social-new-message button,
.lv-social-reply button,
.lv-social-comment-form button,
.lv-social-following-search button,
.lv-social-user-card button.is-active {
    background: var(--lv-social-primary);
    border-color: var(--lv-social-primary);
    color: #fff;
}

.lv-social-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f04438;
    color: #fff;
    font-size: 11px;
}

.lv-social-panel {
    display: none;
    min-width: 0;
}

.lv-social-panel.is-active {
    display: grid;
    gap: 16px;
}

/* La cabecera pertenece a cada pestaña, incluida Siguiendo. Esta regla vive en
   el módulo social para que no dependa de estilos antiguos de su título. */
.lv-social-panel.is-active > .lv-social-hero {
    display: grid;
    width: 100%;
    margin: 0;
}

.lv-social-compose,
.lv-social-card,
.lv-social-empty,
.lv-social-notification,
.lv-social-new-message,
.lv-social-conversation,
.lv-social-following__section,
.lv-social-user-card {
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
}

.lv-social-compose {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.lv-social-compose textarea,
.lv-social-comment-form input,
.lv-social-new-message input,
.lv-social-following-search input,
.lv-social-following-filter input,
.lv-social-new-message textarea,
.lv-social-message-edit textarea,
.lv-social-reply textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lv-social-text);
    font-size: 14px;
    line-height: 1.35;
}

.lv-social-compose textarea,
.lv-social-new-message textarea,
.lv-social-message-edit textarea,
.lv-social-reply textarea {
    resize: vertical;
    padding: 11px 12px;
}

.lv-social-compose__bar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.lv-social-compose select {
    min-height: 38px;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    padding: 0 10px;
    background: #fff;
}

.lv-social-compose button,
.lv-social-new-message button,
.lv-social-reply button {
    padding: 0 14px;
}

.lv-social-feed,
.lv-social-notifications,
.lv-social-user-list,
[data-lv-conversations] {
    display: grid;
    gap: 12px;
}

.lv-social-following {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 14px;
}

.lv-social-following__section {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    min-width: 0;
}

.lv-social-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.lv-social-following-search {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.lv-social-following-search input {
    min-height: 40px;
    padding: 0 11px;
}

.lv-social-following-search button,
.lv-social-user-card button {
    flex: 0 0 auto;
    padding: 0 11px;
}

/* Cada botón llena su mitad de la fila de acciones (ver .lv-social-user-card__actions). */
.lv-social-user-card__actions button {
    width: 100%;
}

/* Buscador acotado a quienes ya sigues. El desplegable de sugerencias es el mismo
   del mapa (.lv-sug, livesic-search-suggest.css): cuelga de este formulario, al que
   el JS le pone la clase .lv-sug-anchor (position:relative). */
.lv-social-following-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lv-social-following-filter input {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0 11px;
}

.lv-social-following-filter__clear {
    flex: 0 0 auto;
    padding: 0 12px;
}

/* Cuántos se ven de cuántos sigues; solo estorba si grita, así que va discreto. */
.lv-social-section-count {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lv-social-muted);
}

/* Tarjeta de "Siguiendo": la ficha arriba y los dos botones debajo, ocupando
   SIEMPRE el ancho de la tarjeta a partes iguales. Antes compartían fila con el
   nombre y cada botón medía lo que medía su texto ("Seguir" / "Siguiendo" /
   "Dejar de seguir"), así que unas entradas salían con botones más anchos que
   otras; de paso el nombre deja de quedarse con las migajas del ancho. Es la
   misma forma que ya tenía en móvil (@media max-width: 560px), ahora en todas. */
.lv-social-user-card {
    display: grid;
    gap: 12px;
    padding: 12px;
    min-width: 0;
}

.lv-social-user-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Tiene eventos a la vista: contorno morado de marca para localizar de un vistazo
   a quién puedes ir a ver. La clase la pone renderFollowEntity() con el MISMO
   criterio que el distintivo verde .lv-social-upcoming (upcoming_events > 0).
   El box-shadow es un segundo hilo de 1px: engorda la línea sin mover el layout. */
.lv-social-user-card--upcoming {
    border-color: #7c3aed;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.30);
}

/* Autor de la tarjeta de "Siguiendo": toda la fila del autor enlaza a su ficha. */
a.lv-social-author {
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 8px;
}

a.lv-social-author:hover strong {
    text-decoration: underline;
}

/* Autor de un comentario: enlace a su ficha con la misma pista visual que en el muro
   (hereda el color del texto y solo se subraya al pasar por encima). */
a.lv-social-comment__author {
    justify-self: start;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
}

a.lv-social-comment__author:hover strong {
    text-decoration: underline;
}

/* El tema oscuro pinta TODO <a> con el color de enlace y su selector gana al
   `color: inherit` de arriba: el nombre del autor salía azul. Se devuelve al color
   del texto (la pista de que es pulsable es el subrayado al pasar por encima). */
:root[data-lv-theme="dark"] a.lv-social-author,
:root[data-lv-theme="dark"] a.lv-social-comment__author {
    color: inherit;
}

/* "Tiene eventos a la vista": distintivo de las fichas en la lista de Siguiendo.
   Va con la especificidad de .lv-social-author porque ahí dentro TODO <span> es la
   línea gris de la meta (block, 12px, apagado) y este no lo es. */
.lv-social-author .lv-social-upcoming {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.65;
}

.lv-social-upcoming__icon {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Cuándo es el primero, dentro del mismo distintivo y un punto por detrás. */
.lv-social-author .lv-social-upcoming__when {
    display: inline;
    color: inherit;
    font-size: inherit;
    opacity: 0.78;
}

.lv-social-author .lv-social-upcoming__when::before {
    content: '·';
    margin: 0 4px 0 3px;
    opacity: 0.7;
}

.lv-social-user-card button.is-danger {
    color: #b42318;
}

.lv-social-user-card button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.lv-social-card {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.lv-social-card__head,
.lv-social-conversation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lv-social-card__head {
    justify-content: space-between;
}

.lv-social-author {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lv-social-top__me > div,
.lv-social-author > div,
.lv-social-conversation > div,
.lv-social-notification > div {
    min-width: 0;
}

.lv-social-top__me strong,
.lv-social-top__me span,
.lv-social-author strong,
.lv-social-author span,
.lv-social-conversation strong,
.lv-social-conversation span,
.lv-social-notification strong,
.lv-social-notification span {
    overflow-wrap: anywhere;
}

.lv-social-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.55;
}

.lv-social-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lv-social-card button {
    padding: 0 11px;
}

.lv-social-card button.is-active {
    color: #fff;
    background: var(--lv-social-accent);
    border-color: var(--lv-social-accent);
}

.lv-social-comments {
    display: grid;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #eaecf0;
}

.lv-social-comment {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--lv-social-soft);
}

.lv-social-comment-form {
    display: flex;
    gap: 8px;
}

.lv-social-comment-form input,
.lv-social-new-message input {
    min-height: 40px;
    padding: 0 11px;
}

.lv-social-comment-form button {
    flex: 0 0 auto;
}

.lv-social-messages {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 14px;
}

.lv-social-conversations,
.lv-social-thread {
    min-width: 0;
}

.lv-social-new-message {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.lv-social-suggestions {
    position: absolute;
    z-index: 5;
    top: 55px;
    left: 12px;
    right: 12px;
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}

.lv-social-suggestions[hidden] {
    display: none;
}

.lv-social-suggestion {
    padding: 10px;
    cursor: pointer;
}

.lv-social-suggestion:hover {
    background: var(--lv-social-soft);
}

.lv-social-message-note {
    padding: 9px 10px;
    border: 1px solid #b2ddff;
    border-radius: 8px;
    background: #eff8ff;
    color: #175cd3;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.lv-social-message-note.is-error {
    border-color: #fecdca;
    background: #fffbfa;
    color: #b42318;
}

.lv-social-message-note[hidden] {
    display: none;
}

.lv-social-conversation {
    width: 100%;
    padding: 11px;
    text-align: left;
    cursor: pointer;
}

.lv-social-conversation.is-active {
    border-color: var(--lv-social-primary);
    box-shadow: 0 0 0 2px rgba(21, 94, 239, 0.12);
}

.lv-social-thread {
    display: grid;
    grid-template-rows: auto minmax(280px, 1fr) auto;
    min-height: 480px;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
}

.lv-social-thread__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid #eaecf0;
}

.lv-social-thread__head[hidden] {
    display: none;
}

.lv-social-thread__head strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lv-social-thread__head button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    color: #b42318;
}

.lv-social-thread__messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow: auto;
    scroll-behavior: smooth;
}

.lv-social-message {
    display: grid;
    gap: 5px;
    max-width: min(78%, 560px);
    padding: 9px 11px;
    border-radius: 14px 14px 14px 4px;
    background: var(--lv-social-soft);
    overflow-wrap: anywhere;
}

.lv-social-message.is-mine {
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
    background: #eff8ff;
}

.lv-social-message__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lv-social-message__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.lv-social-message__actions button,
.lv-social-message-edit button {
    min-height: 28px;
    padding: 0 8px;
    font-size: 12px;
}

.lv-social-message-edit {
    display: grid;
    gap: 7px;
}

.lv-social-message-edit[hidden],
[data-lv-message-body][hidden] {
    display: none;
}

[data-lv-message-body] {
    white-space: pre-line;
    line-height: 1.45;
}

.lv-social-market-message {
    display: grid;
    gap: 10px;
    white-space: normal;
}

.lv-social-market-message__head {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lv-social-market-message__head span {
    display: block;
    color: var(--lv-social-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lv-social-market-message__head strong {
    display: block;
    margin-top: 2px;
    font-size: 16px;
}

.lv-social-market-message__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e8f1ff;
    color: #2563eb;
    flex: 0 0 auto;
}

.lv-social-market-message__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lv-social-market-message__price {
    font-size: 18px;
    font-weight: 800;
    color: #2563eb;
}

.lv-social-market-message__text {
    margin: 0;
    white-space: pre-line;
}

.lv-social-market-message__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}

.lv-social-market-message__button:hover {
    background: #1d4ed8;
    color: #fff;
}

.lv-social-invitation-message .lv-social-market-message__icon {
    background: #ecfdf5;
    color: #059669;
}

.lv-social-invitation-message .lv-social-market-message__price {
    color: #059669;
}

.lv-social-invitation-message .lv-social-market-message__button {
    background: #059669;
}

.lv-social-invitation-message .lv-social-market-message__button:hover {
    background: #047857;
}

.lv-social-message-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(37, 99, 235, .1);
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.lv-social-message-link:hover {
    background: rgba(37, 99, 235, .16);
    color: #1e40af;
}

.lv-social-market-message__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lv-social-market-message__button--secondary {
    background: #0f172a;
}

.lv-social-market-message__button--secondary:hover {
    background: #1e293b;
}

.lv-social-market-message__quote {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid #7c3aed;
    border-radius: 8px;
    background: rgba(124, 58, 237, .08);
    white-space: pre-line;
}

.lv-social-application-message .lv-social-market-message__icon {
    background: #f5f3ff;
    color: #7c3aed;
}

.lv-social-application-message .lv-social-market-message__price {
    color: #7c3aed;
}

.lv-social-application-message .lv-social-market-message__button {
    background: #7c3aed;
}

.lv-social-application-message .lv-social-market-message__button:hover {
    background: #6d28d9;
}

.lv-social-application-message .lv-social-market-message__button--secondary {
    background: #0f172a;
}

.lv-social-application-message .lv-social-market-message__button--secondary:hover {
    background: #1e293b;
}

.lv-social-message-edit > div {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.lv-social-reply {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #eaecf0;
}

.lv-social-notifications-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

.lv-social-notifications-head button {
    flex: 0 1 auto;
}

.lv-social-notification {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    min-width: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

.lv-social-notification:hover {
    text-decoration: none;
}

.lv-social-notification__content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.lv-social-notification__title,
.lv-social-notification__message,
.lv-social-notification__content .lv-social-meta {
    display: block;
}

.lv-social-notification__message {
    margin-top: 4px;
    white-space: pre-wrap;
}

.lv-social-notification__content .lv-social-meta {
    margin-top: 5px;
}

.lv-social-card.is-targeted {
    outline: 2px solid var(--lv-accent, #2563eb);
    outline-offset: 3px;
}

.lv-social-notification.is-unread {
    border-color: #84caff;
    background: #eff8ff;
}

.lv-social-empty {
    padding: 18px;
    color: var(--lv-social-muted);
}

@media (max-width: 820px) {
    .lv-social-top,
    .lv-social-messages,
    .lv-social-following {
        grid-template-columns: 1fr;
        display: grid;
    }

    .lv-social-tabs {
        justify-content: stretch;
    }

    .lv-social-tabs button {
        flex: 1 1 auto;
    }
}

@media (max-width: 560px) {
    .lv-social-shell {
        margin: 12px auto 32px;
        padding: 0 10px;
    }

    .lv-social-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .lv-social-tabs button {
        width: 100%;
    }

    .lv-social-comment-form,
    .lv-social-reply,
    .lv-social-following-search,
    .lv-social-user-card {
        display: grid;
    }

    .lv-social-user-card__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .lv-social-user-card button {
        width: 100%;
    }

    .lv-social-thread__head,
    .lv-social-message__head {
        align-items: stretch;
        display: grid;
    }

    .lv-social-message__actions {
        justify-content: flex-end;
    }

    .lv-social-message {
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Mensajes estilo WhatsApp (2026-07-03): lista y chat en paneles separados,
   burbujas con hora, separadores de día, barra de respuesta redondeada.
   Va al final del fichero para ganar en cascada a los estilos base.
   ══════════════════════════════════════════════════════════════════════ */
.lv-social-messages{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;height:calc(100vh - 265px);height:clamp(440px,calc(100dvh - 265px),760px);border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;background:#fff}
.lv-social-conversations{display:flex;flex-direction:column;gap:6px;min-width:0;overflow-y:auto;padding:10px;border-right:1px solid #e2e8f0;background:#fff}
.lv-wa-new summary{cursor:pointer;list-style:none;padding:9px 12px;border-radius:10px;background:#f0f2f5;font-size:13.5px;font-weight:600;color:#334155;user-select:none}
.lv-wa-new summary::-webkit-details-marker{display:none}
.lv-wa-new[open] summary{margin-bottom:8px}
/* "Nuevo mensaje" siempre visible (sin desplegable): título estático + formulario abierto. */
.lv-wa-new__title{padding:9px 12px;border-radius:10px;background:#f0f2f5;font-size:13.5px;font-weight:600;color:#334155;user-select:none}
.lv-wa-new--static .lv-wa-new__title{margin-bottom:8px}
.lv-social-conversation{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer}
.lv-social-conversation:hover{background:#f5f6f6}
.lv-social-conversation.is-active{background:#f0f2f5;border:0}
.lv-wa-ava{width:46px;height:46px;flex:0 0 46px;border-radius:50%;object-fit:cover;background:#e2e8f0}
.lv-wa-ava--head{width:36px;height:36px;flex-basis:36px}
.lv-wa-conv{flex:1;min-width:0}
.lv-wa-conv__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lv-wa-conv__top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.lv-wa-when{flex:none;font-size:11.5px;color:#94a3b8}
.lv-wa-when.is-unread{color:#25d366;font-weight:700}
.lv-wa-conv__bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1px}
.lv-wa-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:#64748b}
.lv-wa-pill{flex:none;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#25d366;color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center}
/* Chat */
.lv-social-thread{display:flex;flex-direction:column;min-width:0;background:#efeae2}
.lv-social-thread__head{display:flex;align-items:center;gap:10px;margin:0;padding:9px 12px;background:#f0f2f5;border-bottom:1px solid #e2e8f0}
.lv-social-thread__head strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.lv-wa-back{display:inline-block;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:#334155;padding:4px 6px}
.lv-wa-trash{border:0;background:none;font-size:16px;cursor:pointer;color:#64748b;padding:4px 6px}
.lv-wa-trash:hover{color:#dc2626}
.lv-social-thread__messages{flex:1;display:flex;flex-direction:column;gap:3px;overflow-y:auto;padding:14px 14px 10px}
.lv-wa-day{align-self:center;margin:10px 0 6px}
.lv-wa-day span{display:inline-block;padding:4px 10px;border-radius:8px;background:#fff;box-shadow:0 1px 1px rgba(15,23,42,.08);font-size:11.5px;font-weight:600;color:#54656f}
/* Burbujas */
.lv-social-message{position:relative;max-width:78%;align-self:flex-start;margin:0;padding:6px 9px 4px;border:0;border-radius:10px;border-top-left-radius:3px;background:#fff;box-shadow:0 1px 1px rgba(15,23,42,.1)}
.lv-social-message.is-mine{align-self:flex-end;background:#d9fdd3;border-top-left-radius:10px;border-top-right-radius:3px}
.lv-social-message__head{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0}
.lv-wa-sender{margin-right:auto;font-size:12px;font-weight:700;color:#e5622a}
.lv-social-message__actions{display:flex;gap:6px;opacity:0;transition:opacity .15s}
.lv-social-message:hover .lv-social-message__actions,.lv-social-message:focus-within .lv-social-message__actions{opacity:1}
.lv-social-message__actions button{border:0;background:none;padding:0;font-size:10.5px;color:#94a3b8;cursor:pointer;text-decoration:underline}
.lv-wa-msgtime{display:block;margin-top:2px;text-align:right;font-size:10.5px;color:#667781}
/* Barra de respuesta */
.lv-social-reply{display:flex;align-items:flex-end;gap:8px;margin:0;padding:8px 10px;background:#f0f2f5;border-top:1px solid #e2e8f0}
.lv-social-reply[hidden]{display:none}
.lv-social-reply textarea{flex:1;min-height:40px;max-height:110px;padding:10px 14px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;resize:none;font-size:14px;line-height:1.35}
.lv-social-reply button{flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:#25d366;color:#fff;font-size:17px;line-height:42px;text-align:center;cursor:pointer}
.lv-social-reply button:hover{background:#1fb958}
/* Móvil: un panel u otro (lista ↔ chat), como WhatsApp */
@media (max-width: 860px){
    .lv-social-messages{grid-template-columns:minmax(0,1fr);display:block;height:auto;min-height:0;border:0;border-radius:0;background:none;overflow:visible}
    .lv-social-messages .lv-social-conversations{max-height:calc(100dvh - 250px);overflow-y:auto;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
    .lv-social-messages .lv-social-thread{display:none}
    /* Chat abierto = capa fija a pantalla completa hasta el borde de la barra inferior:
       la barra de escribir y el botón de enviar quedan SIEMPRE visibles. */
    /* z-index por encima de la cabecera sticky (livesic-spotify.css la fija en 100050):
       si no, la cabecera se pinta sobre el borde superior del chat y tapa el botón ←
       y la papelera de "Eliminar conversación". Sigue por debajo de la barra inferior. */
    .lv-social-messages.is-chat-open .lv-social-thread{display:flex;position:fixed;left:0;right:0;top:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:100060;height:auto}
    .lv-social-messages.is-chat-open .lv-social-conversations{display:none}
    .lv-social-reply{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px) / 2)}
    .lv-social-conversations{border-right:0}
    .lv-wa-back{display:inline-block}
    .lv-social-message{max-width:86%}
    .lv-social-message__actions{opacity:1}
    .lv-social-thread__head{display:flex;align-items:center}
    .lv-social-message__head{display:flex}
    .lv-social-reply{display:flex}
    .lv-social-reply[hidden]{display:none}
}
/* Tema oscuro */
[data-lv-theme="dark"] .lv-social-messages{background:#111b21;border-color:#233138}
[data-lv-theme="dark"] .lv-social-conversations{background:#111b21;border-right-color:#233138}
[data-lv-theme="dark"] .lv-wa-new summary{background:#202c33;color:#cbd5e1}
[data-lv-theme="dark"] .lv-wa-new__title{background:#202c33;color:#cbd5e1}
[data-lv-theme="dark"] .lv-social-conversation:hover{background:#1c272e}
[data-lv-theme="dark"] .lv-social-conversation.is-active{background:#2a3942}
[data-lv-theme="dark"] .lv-wa-conv__top strong{color:#e9edef}
[data-lv-theme="dark"] .lv-social-thread{background:#0b141a}
[data-lv-theme="dark"] .lv-social-thread__head{background:#202c33;border-bottom-color:#233138}
[data-lv-theme="dark"] .lv-social-thread__head strong{color:#e9edef}
[data-lv-theme="dark"] .lv-wa-back{color:#cbd5e1}
[data-lv-theme="dark"] .lv-wa-day span{background:#182229;color:#8696a0;box-shadow:none}
[data-lv-theme="dark"] .lv-social-message{background:#202c33;color:#e9edef}
[data-lv-theme="dark"] .lv-social-message.is-mine{background:#005c4b}
[data-lv-theme="dark"] .lv-wa-msgtime{color:#8696a0}
[data-lv-theme="dark"] .lv-social-reply{background:#202c33;border-top-color:#233138}
[data-lv-theme="dark"] .lv-social-reply textarea{background:#2a3942;border-color:#2a3942;color:#e9edef}

/* ═══════════════════════ Muro: imagen en posts, compose con foto y novedades ═══════════════════════ */

/* Imagen adjunta a una publicación propia. */
.lv-social-card__media {
    margin: 2px 0 4px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--lv-social-border);
    background: var(--lv-social-soft);
}
.lv-social-card__media img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}

/* Compose: botón "Añadir foto" + previsualización. Control limpio con icono de
   línea (mismo lenguaje que el resto de iconos), no emoji. */
.lv-social-compose__bar { align-items: center; }
.lv-social-compose__photo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;               /* empuja select + Publicar a la derecha */
    padding: 0 14px;
    min-height: 38px;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lv-social-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lv-social-compose__photo:hover {
    border-color: var(--lv-social-primary);
    color: var(--lv-social-primary);
    background: rgba(21, 94, 239, .05);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.lv-social-compose__photo:hover .lv-social-compose__photo-icon { color: var(--lv-social-primary); }
.lv-social-compose__photo-icon {
    width: 20px;
    height: 20px;
    color: var(--lv-social-primary);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transition: color .15s ease;
}
.lv-social-compose__preview:empty { display: none; }
.lv-social-compose__preview-item {
    position: relative;
    display: inline-block;
    max-width: 240px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--lv-social-border);
}
.lv-social-compose__preview-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
}
.lv-social-compose__preview-item button[data-lv-compose-image-remove] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(16, 24, 40, .72);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.lv-social-compose__preview-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px;
    background: rgba(16, 24, 40, .6);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

/* Tarjeta de "novedad" de la plataforma (evento, lanzamiento, market, matching,
   artista, banda, sala, técnico). Enlaza a la ficha. Estilo muro profesional. */
/* Contenedor de la novedad: enlace a la ficha + barra de me gusta/comentarios. */
.lv-social-novelty-card {
    border: 1px solid var(--lv-social-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.lv-social-novelty-card:hover {
    box-shadow: 0 6px 20px rgba(16, 24, 40, .10);
    border-color: var(--lv-social-primary);
}
.lv-social-novelty {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 12px;
    text-decoration: none;
    color: inherit;
}
/* Barra de acciones y comentarios dentro de la tarjeta de novedad. */
.lv-social-novelty-card .lv-social-actions {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--lv-social-border);
}
.lv-social-novelty-card .lv-social-comments {
    margin: 0 12px 12px;
}
.lv-social-novelty__media {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--lv-social-soft);
}
.lv-social-novelty__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lv-social-novelty__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}
.lv-social-novelty__badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lv-social-primary);
    background: rgba(21, 94, 239, .08);
    border-radius: 999px;
    padding: 3px 9px;
}
.lv-social-novelty__title {
    font-size: 15px;
    line-height: 1.25;
    color: var(--lv-social-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lv-social-novelty__sub {
    font-size: 13px;
    color: var(--lv-social-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lv-social-novelty__cta {
    font-size: 12px;
    font-weight: 600;
    color: var(--lv-social-primary);
    opacity: 0;
    transition: opacity .15s ease;
}
.lv-social-novelty:hover .lv-social-novelty__cta { opacity: 1; }

/* Acentos por tipo en el chip de badge. */
.lv-social-novelty-card--event .lv-social-novelty__badge { color: #b42318; background: rgba(180, 35, 24, .08); }
.lv-social-novelty-card--release .lv-social-novelty__badge { color: #6941c6; background: rgba(105, 65, 198, .08); }
.lv-social-novelty-card--market .lv-social-novelty__badge { color: #087443; background: rgba(8, 116, 67, .08); }
.lv-social-novelty-card--band_call .lv-social-novelty__badge { color: #c4320a; background: rgba(196, 50, 10, .08); }
.lv-social-novelty-card--venue .lv-social-novelty__badge { color: #175cd3; background: rgba(23, 92, 211, .08); }
.lv-social-novelty-card--sound_tech .lv-social-novelty__badge { color: #0e7090; background: rgba(14, 112, 144, .08); }

@media (max-width: 560px) {
    .lv-social-novelty__media { flex-basis: 72px; width: 72px; height: 72px; }
    .lv-social-novelty__cta { display: none; }
}

/* ═══════════════════════ Filtro del muro (select) ═══════════════════════ */
.lv-social-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -4px 0 2px;
}
.lv-social-filter-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.lv-social-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--lv-social-muted);
    flex: 0 0 auto;
}
.lv-social-filter-select {
    min-width: 0;
    min-height: 38px;
    padding: 0 38px 0 13px;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background-color: #fff;
    color: var(--lv-social-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lv-social-filter-select:hover {
    border-color: var(--lv-social-primary);
}
.lv-social-filter-select:focus {
    outline: none;
    border-color: var(--lv-social-primary);
    box-shadow: 0 0 0 3px rgba(21, 94, 239, .15);
}
@media (max-width: 480px) {
    .lv-social-filter-field { flex: 1 1 auto; }
    .lv-social-filter-select { flex: 1 1 auto; }
}

/* ═══════════════════ Acciones (me gusta + comentarios, iconos) ═══════════════════ */
/* Autoestilado para funcionar tanto en publicaciones (.lv-social-card) como en
   las tarjetas de novedad (.lv-social-novelty-card). */
.lv-social-actions .lv-social-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lv-social-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lv-social-action__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lv-social-action__count {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.lv-social-action--like:hover {
    color: #e11d48;
    border-color: #fecdd3;
}
.lv-social-action--comment:hover {
    color: var(--lv-social-primary);
    border-color: var(--lv-social-primary);
}
/* Estado "me gusta" (corazón relleno en rojo). Prevalece sobre el verde genérico
   de .lv-social-card button.is-active gracias al ancestro .lv-social-actions. */
.lv-social-actions .lv-social-action--like.is-active {
    color: #e11d48;
    background: #fff1f2;
    border-color: #fecdd3;
}
.lv-social-actions .lv-social-action--like.is-active .lv-social-action__icon {
    fill: #e11d48;
    stroke: #e11d48;
}

/* ═══════════════════ Muro en tema oscuro (feed / siguiendo / avisos) ═══════════════════
   Las tarjetas del muro tenían fondo #fff fijo mientras el tema oscuro pinta el texto
   claro (livesic-theme.css redefine --lv-social-text) → texto ilegible sobre blanco.
   Aquí se tematizan sus superficies igual que la mensajería (bloque de más arriba). */
[data-lv-theme="dark"] .lv-social-top,
[data-lv-theme="dark"] .lv-social-compose,
[data-lv-theme="dark"] .lv-social-card,
[data-lv-theme="dark"] .lv-social-empty,
[data-lv-theme="dark"] .lv-social-notification,
[data-lv-theme="dark"] .lv-social-following__section,
[data-lv-theme="dark"] .lv-social-user-card,
[data-lv-theme="dark"] .lv-social-novelty-card {
    background: var(--lv-theme-surface);
    border-color: var(--lv-theme-border);
}

/* El morado del contorno, en su tono de oscuro. Hace falta :root para ganarle al
   `border-color` de la regla de arriba, que ya vale (0,2,0) de especificidad. */
:root[data-lv-theme="dark"] .lv-social-user-card--upcoming {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.38);
}
/* Controles neutros: acciones, tabs inactivas, botones de tarjeta/usuario/avisos,
   "Foto", inputs, select y textarea del muro. */
[data-lv-theme="dark"] .lv-social-tabs button,
[data-lv-theme="dark"] .lv-social-card button,
[data-lv-theme="dark"] .lv-social-actions .lv-social-action,
[data-lv-theme="dark"] .lv-social-user-card button,
[data-lv-theme="dark"] .lv-social-notifications-head button,
[data-lv-theme="dark"] .lv-social-compose__photo,
[data-lv-theme="dark"] .lv-social-compose textarea,
[data-lv-theme="dark"] .lv-social-compose select,
[data-lv-theme="dark"] .lv-social-comment-form input,
[data-lv-theme="dark"] .lv-social-following-filter input,
[data-lv-theme="dark"] .lv-social-following-filter__clear,
[data-lv-theme="dark"] .lv-social-following-search input {
    background: var(--lv-theme-surface-2);
    border-color: var(--lv-theme-border);
    color: var(--lv-theme-ink);
}
/* Estados primario/activo se mantienen en el azul del tema. */
[data-lv-theme="dark"] .lv-social-tabs button.is-active,
[data-lv-theme="dark"] .lv-social-compose button,
[data-lv-theme="dark"] .lv-social-comment-form button,
[data-lv-theme="dark"] .lv-social-following-search button,
[data-lv-theme="dark"] .lv-social-user-card button.is-active {
    background: var(--lv-theme-primary);
    border-color: var(--lv-theme-primary);
    color: var(--lv-theme-primary-ink);
}
/* En oscuro el verde tiene que aclararse para leerse sobre la tarjeta. */
[data-lv-theme="dark"] .lv-social-author .lv-social-upcoming {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
}
/* Select del filtro: background-color (no shorthand, para conservar el chevron)
   y flecha en tono claro. */
[data-lv-theme="dark"] .lv-social-filter-select {
    background-color: var(--lv-theme-surface-2);
    border-color: var(--lv-theme-border);
    color: var(--lv-theme-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b0c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* "Me gusta" activo: corazón rojo también en oscuro (por encima del neutro). */
[data-lv-theme="dark"] .lv-social-actions .lv-social-action--like.is-active {
    color: #fb7185;
    background: rgba(244, 63, 94, .16);
    border-color: rgba(244, 63, 94, .38);
}
[data-lv-theme="dark"] .lv-social-actions .lv-social-action--like.is-active .lv-social-action__icon {
    fill: #fb7185;
    stroke: #fb7185;
}
[data-lv-theme="dark"] .lv-social-comments,
[data-lv-theme="dark"] .lv-social-novelty-card .lv-social-actions {
    border-top-color: var(--lv-theme-border);
}
[data-lv-theme="dark"] .lv-social-suggestions {
    background: var(--lv-theme-surface);
    border-color: var(--lv-theme-border);
}
[data-lv-theme="dark"] .lv-social-notification.is-unread {
    background: var(--lv-theme-active);
    border-color: var(--lv-theme-border-strong);
}
/* Chips de "novedad": el texto oscuro heredado quedaba ilegible sobre tarjeta
   oscura; se pasan a tonos claros con fondo translúcido. */
[data-lv-theme="dark"] .lv-social-novelty__badge { color: var(--lv-theme-primary); background: rgba(96, 165, 250, .16); }
[data-lv-theme="dark"] .lv-social-novelty-card--event .lv-social-novelty__badge { color: #fda29b; background: rgba(240, 68, 56, .16); }
[data-lv-theme="dark"] .lv-social-novelty-card--release .lv-social-novelty__badge { color: #d6bbfb; background: rgba(158, 119, 237, .18); }
[data-lv-theme="dark"] .lv-social-novelty-card--market .lv-social-novelty__badge { color: #6ce9a6; background: rgba(52, 211, 153, .16); }
[data-lv-theme="dark"] .lv-social-novelty-card--band_call .lv-social-novelty__badge { color: #fdb022; background: rgba(247, 144, 9, .16); }
[data-lv-theme="dark"] .lv-social-novelty-card--venue .lv-social-novelty__badge { color: #7dd3fc; background: rgba(56, 189, 248, .16); }
[data-lv-theme="dark"] .lv-social-novelty-card--sound_tech .lv-social-novelty__badge { color: #67e8f9; background: rgba(34, 211, 238, .16); }


/* Hotfix 2026-07-09: contain message conversation previews. */
.lv-social-messages,
.lv-social-conversations,
.lv-social-conversation,
.lv-wa-conv,
.lv-wa-conv__top,
.lv-wa-conv__bottom {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lv-social-conversations {
    overflow-x: hidden;
}

.lv-social-conversation {
    min-inline-size: 0;
    overflow: hidden;
}

.lv-wa-conv {
    flex: 1 1 auto;
    overflow: hidden;
}

.lv-wa-conv__top strong,
.lv-wa-preview {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-wa-conv__bottom .lv-social-pill,
.lv-wa-when {
    flex: 0 0 auto;
}

/* ═══════════════ @nick bajo el nombre en la mensajería (2026-08-04) ═══════════════ */
/* Lista de chats: el @nick va en su propia línea, entre el nombre y la vista previa. */
.lv-wa-conv .lv-wa-nick {
    display: block;
    max-width: 100%;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cabecera del chat: nombre arriba, @nick debajo (la columna ocupa el hueco central). */
.lv-social-thread__head .lv-wa-headtext {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* El `flex:1` de `.lv-social-thread__head strong` era para cuando el nombre era hijo
   directo de la cabecera; dentro de la columna pasa a ser el eje VERTICAL y colapsaría
   su altura (flex-basis:0), así que se anula aquí. */
.lv-social-thread__head .lv-wa-headtext strong {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
}

.lv-social-thread__head .lv-wa-headnick {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-social-thread__head .lv-wa-headnick[hidden] {
    display: none;
}

/* Burbuja de un hilo de grupo: el @nick cuelga del nombre del remitente. */
.lv-wa-sender-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}

.lv-wa-sender-wrap .lv-wa-sender {
    margin-right: 0;
}

.lv-wa-sender-nick {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Avisos de CONVOCATORIAS (2026-08-16): distintivo azul junto al autor en la
   lista de Avisos, a juego con el segundo badge de la campanita. */
.lv-social-notification__kind {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #0284c7;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}


/* ═══════════════════ Acciones rápidas de las novedades (2026-08-16) ═══════════════════
   Seguir / Enviar mensaje en las fichas nuevas (artista, banda o compañía) y Guardar en
   los eventos nuevos. Comparten la base de .lv-social-action (borde, radio, tema oscuro)
   pero son CUADRADOS y sin texto: el significado lo dan title y aria-label. */
.lv-social-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.lv-social-actions .lv-social-quick__btn {
    width: 38px;
    padding: 0;
    justify-content: center;
    color: var(--lv-social-muted);
    text-decoration: none;
}
.lv-social-actions .lv-social-quick__btn:hover {
    color: var(--lv-social-primary);
    border-color: var(--lv-social-primary);
    background: rgba(21, 94, 239, .06);
}
.lv-social-actions .lv-social-quick__btn--follow.is-active,
.lv-social-actions .lv-social-quick__btn--save.is-active {
    color: var(--lv-social-primary);
    border-color: var(--lv-social-primary);
    background: rgba(21, 94, 239, .10);
}
/* Guardado = marcador relleno (mismo gesto que el corazón del me gusta). */
.lv-social-actions .lv-social-quick__btn--save.is-active .lv-social-action__icon {
    fill: currentColor;
}
[data-lv-theme="dark"] .lv-social-actions .lv-social-quick__btn:hover,
[data-lv-theme="dark"] .lv-social-actions .lv-social-quick__btn--follow.is-active,
[data-lv-theme="dark"] .lv-social-actions .lv-social-quick__btn--save.is-active {
    color: #93b4ff;
    border-color: rgba(147, 180, 255, .55);
    background: rgba(21, 94, 239, .20);
}


/* ═══════════════════════ Muro: enlaces de redes incrustados en publicaciones ═══════════════════════ */

/* Contenedor del embed (YouTube/Vimeo/Spotify/SoundCloud/TikTok van en iframe
   directo; Instagram y X usan su blockquote oficial + script). */
.lv-social-embed {
    margin: 2px 0 4px;
}
.lv-social-embed iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: var(--lv-social-soft);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
/* Vídeo apaisado (YouTube, Vimeo, vídeo de Facebook). */
.lv-social-embed--video {
    max-width: 720px;
}
.lv-social-embed--video iframe {
    aspect-ratio: 16 / 9;
    background: #000;
}
/* Vídeo vertical (Shorts). */
.lv-social-embed--vertical {
    max-width: 340px;
}
.lv-social-embed--vertical iframe {
    aspect-ratio: 9 / 16;
    background: #000;
}
/* TikTok: su player v2 lleva tarjeta propia con pie → alto fijo. */
.lv-social-embed--tiktok {
    max-width: 330px;
}
.lv-social-embed--tiktok iframe {
    height: 740px;
    background: #000;
}
/* Spotify: alturas oficiales del player (canción / episodio / álbum-lista-artista). */
.lv-social-embed--sp-track iframe,
.lv-social-embed--sp-episode iframe,
.lv-social-embed--sp-full iframe {
    background: transparent;
    box-shadow: none;
}
.lv-social-embed--sp-track iframe { height: 152px; }
.lv-social-embed--sp-episode iframe { height: 232px; }
.lv-social-embed--sp-full iframe { height: 352px; }
.lv-social-embed--soundcloud iframe {
    height: 166px;
}
/* Instagram/X: el script oficial sustituye el blockquote por su iframe a medida. */
.lv-social-embed--instagram blockquote.instagram-media,
.lv-social-embed--instagram iframe.instagram-media,
.lv-social-embed--instagram iframe.instagram-media-rendered {
    margin: 0 !important;
    max-width: 400px !important;
    min-width: 0 !important;
    border-radius: 12px !important;
}
.lv-social-embed--twitter {
    max-width: 550px;
}
.lv-social-embed--twitter .twitter-tweet {
    margin: 0 !important;
}
/* Los enlaces del cuerpo del post reutilizan la píldora de los mensajes. */
.lv-social-body .lv-social-message-link {
    font-weight: 600;
}
/* Aviso del compositor: "tu enlace se mostrará incrustado". */
.lv-social-compose__embednote {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--lv-social-muted);
    background: var(--lv-social-soft);
    border: 1px dashed var(--lv-social-border);
    border-radius: 8px;
}
[data-lv-theme="dark"] .lv-social-embed iframe {
    box-shadow: none;
}


/* ═══ Compositor del muro: botón «Enlace» + fila del enlace + vista previa incrustada ═══ */

/* Con dos botones a la izquierda, el empuje del select+Publicar pasa al último. */
.lv-social-compose__photo { margin-right: 0; }
/* «Enlace» es un <button>: hay que ganarle a la regla azul genérica
   `.lv-social-compose button` (y a su variante oscura) con más especificidad. */
.lv-social-compose button.lv-social-compose__linkbtn {
    margin-right: auto;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border-color: var(--lv-social-border);
    color: var(--lv-social-text);
}
.lv-social-compose button.lv-social-compose__linkbtn:hover {
    border-color: var(--lv-social-primary);
    color: var(--lv-social-primary);
    background: rgba(21, 94, 239, .05);
}
.lv-social-compose__linkrow {
    display: flex;
    gap: 8px;
    align-items: center;
}
.lv-social-compose__linkrow[hidden] { display: none; }
.lv-social-compose__linkrow input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lv-social-text);
    font-size: 14px;
    font-family: inherit;
    padding: 9px 12px;
}
.lv-social-compose__linkrow button[data-lv-compose-link-remove] {
    flex: 0 0 auto;
    width: 36px;
    min-height: 36px;
    padding: 0;
    border: 1px solid var(--lv-social-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lv-social-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.lv-social-compose__linkrow button[data-lv-compose-link-remove]:hover {
    color: #b42318;
    border-color: #b42318;
    background: #fff;
}
.lv-social-compose__embedpreview:empty { display: none; }
.lv-social-compose__embedpreview-cap {
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lv-social-muted);
}
/* Tema oscuro: controles neutros como el resto del compositor. */
[data-lv-theme="dark"] .lv-social-compose button.lv-social-compose__linkbtn,
[data-lv-theme="dark"] .lv-social-compose__linkrow input,
[data-lv-theme="dark"] .lv-social-compose__linkrow button[data-lv-compose-link-remove] {
    background: var(--lv-theme-surface-2);
    border-color: var(--lv-theme-border);
    color: var(--lv-theme-ink);
}
[data-lv-theme="dark"] .lv-social-compose button.lv-social-compose__linkbtn:hover {
    border-color: var(--lv-theme-primary);
    color: var(--lv-theme-primary);
}