/* ============================================================
   CHAT
   ============================================================ */

.cabecera-chat {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
}

.cabecera-chat h1 {
    margin: 0.2rem 0 0.3rem;
}

.cabecera-chat p {
    margin: 0;

    color: var(--bs-secondary-color);
}


.panel-chat-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
    padding: 1rem;
}


.chat-sala-datos h2 {
    margin: 0.45rem 0 0.3rem;

    font-size: 1.25rem;
}


.chat-sala-datos p {
    margin: 0;

    color: var(--bs-secondary-color);
}


.meta-sala-chat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;

    margin-top: 0.65rem;

    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}


.meta-sala-chat span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}


.acciones-sala-chat {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}


.estado-participacion-chat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    color: var(--bs-success);
    font-size: 0.82rem;
    font-weight: 600;
}


.panel-chat {
    overflow: hidden;

    padding: 0;
}


.cabecera-seccion-chat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.9rem 1rem;

    border-bottom: 1px solid var(--bs-border-color);

    background: var(--bs-tertiary-bg);
}


.cabecera-seccion-chat h2 {
    margin: 0;

    font-size: 1rem;
}


.contador-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 28px;
    height: 28px;

    padding: 0 0.45rem;

    border-radius: 999px;

    background: var(--bs-body-bg);

    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 600;
}


.lista-mensajes-chat {
    max-height: 560px;

    overflow-y: auto;

    padding: 1rem;
}


.mensaje-chat {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;

    margin-bottom: 0.9rem;
}


.mensaje-chat:last-child {
    margin-bottom: 0;
}


.avatar-mensaje-chat,
.avatar-participante-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: var(--bs-primary);
    color: #fff;

    font-weight: 700;
}


.avatar-mensaje-chat {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    font-size: 0.75rem;
}


.avatar-mensaje-chat img,
.avatar-participante-chat img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.cuerpo-mensaje-chat {
    flex: 1 1 auto;

    min-width: 0;
}


.cabecera-mensaje-chat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;

    margin-bottom: 0.2rem;
}


.cabecera-mensaje-chat > div:first-child {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}


.autor-mensaje-chat {
    color: var(--bs-body-color);
    text-decoration: none;

    font-size: 0.85rem;
    font-weight: 700;
}


.autor-mensaje-chat:hover {
    color: var(--bs-primary);
}


.cabecera-mensaje-chat time,
.mensaje-editado-chat {
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
}


.acciones-mensaje-chat {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}


.acciones-mensaje-chat form {
    margin: 0;
}


.texto-mensaje-chat {
    display: inline-block;

    max-width: 85%;

    padding: 0.55rem 0.7rem;

    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;

    background: var(--bs-tertiary-bg);

    font-size: 0.9rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


.mensaje-chat-propio
.texto-mensaje-chat {
    background: rgba(
        var(--bs-primary-rgb),
        0.08
    );

    border-color: rgba(
        var(--bs-primary-rgb),
        0.2
    );
}


.mensaje-chat-eliminado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.5rem 0.65rem;

    border-radius: 0.65rem;

    background: var(--bs-tertiary-bg);

    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    font-style: italic;
}


.editor-mensaje-chat {
    margin-top: 0.5rem;
}


.acciones-editor-chat {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;

    margin-top: 0.4rem;
}


.zona-escribir-chat {
    padding: 0.8rem 1rem;

    border-top: 1px solid var(--bs-border-color);

    background: var(--bs-body-bg);
}


.formulario-enviar-chat {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}


.formulario-enviar-chat textarea {
    flex: 1 1 auto;

    min-height: 48px;
    max-height: 150px;

    resize: vertical;

    padding: 0.6rem 0.7rem;

    border: 1px solid var(--bs-border-color);
    border-radius: 0.7rem;

    background: var(--bs-body-bg);
    color: var(--bs-body-color);

    outline: none;
}


.formulario-enviar-chat textarea:focus {
    border-color: var(--bs-primary);

    box-shadow:
        0 0 0 0.2rem
        rgba(
            var(--bs-primary-rgb),
            0.1
        );
}


.aviso-unirse-chat {
    display: flex;
    align-items: center;
    gap: 0.45rem;

    padding: 0.8rem 1rem;

    border-top: 1px solid var(--bs-border-color);

    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}


.panel-participantes-chat {
    margin-top: 1rem;
}


.lista-participantes-chat {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin-top: 0.75rem;
}


.participante-chat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    padding: 0.3rem 0.55rem;

    border: 1px solid var(--bs-border-color);
    border-radius: 999px;

    color: var(--bs-body-color);
    text-decoration: none;

    font-size: 0.8rem;
}


.participante-chat:hover {
    background: var(--bs-tertiary-bg);
}


.avatar-participante-chat {
    width: 26px;
    height: 26px;

    font-size: 0.58rem;
}


.panel-chat-sin-sala {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 2rem;

    text-align: center;
}


.icono-chat-sin-sala {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin-bottom: 0.9rem;

    border-radius: 1rem;

    background: rgba(
        var(--bs-primary-rgb),
        0.08
    );

    color: var(--bs-primary);

    font-size: 1.6rem;
}


.panel-chat-sin-sala h2 {
    margin: 0.25rem 0 0.35rem;
}


.panel-chat-sin-sala p {
    max-width: 600px;

    margin: 0 auto;

    color: var(--bs-secondary-color);
}


.bloque-abrir-sala-chat {
    width: min(100%, 650px);

    margin: 1.4rem auto 1rem;
    padding: 1rem;

    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;

    text-align: left;
}


.bloque-abrir-sala-chat h3 {
    margin-bottom: 0.8rem;

    font-size: 1rem;
}


.formulario-abrir-chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


.formulario-abrir-chat label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    font-size: 0.82rem;
    font-weight: 600;
}


.formulario-abrir-chat label small {
    color: var(--bs-secondary-color);

    font-weight: 400;
}


.formulario-abrir-chat input,
.formulario-abrir-chat textarea {
    width: 100%;

    padding: 0.55rem 0.65rem;

    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;

    background: var(--bs-body-bg);
    color: var(--bs-body-color);

    font-weight: 400;

    outline: none;
}


.formulario-abrir-chat input:focus,
.formulario-abrir-chat textarea:focus {
    border-color: var(--bs-primary);

    box-shadow:
        0 0 0 0.2rem
        rgba(
            var(--bs-primary-rgb),
            0.1
        );
}


@media (max-width: 767.98px) {
    .cabecera-chat {
        align-items: flex-start;
        flex-direction: column;
    }

    .panel-chat-cabecera {
        flex-direction: column;
    }

    .acciones-sala-chat {
        justify-content: flex-start;
    }

    .lista-mensajes-chat {
        max-height: 65vh;

        padding: 0.75rem;
    }

    .texto-mensaje-chat {
        max-width: 100%;
    }

    .formulario-enviar-chat {
        flex-direction: column;
        align-items: stretch;
    }

    .formulario-enviar-chat
    .btn {
        width: 100%;
    }

    .cabecera-mensaje-chat {
        align-items: flex-start;
    }

    .panel-chat-sin-sala {
        padding: 1.25rem;
    }
}



/* ============================================================
   CHAT · DISTRIBUCIÓN EN DOS COLUMNAS
   Participantes a la izquierda en escritorio
   ============================================================ */

.layout-chat {
    display: grid;
    grid-template-columns:
        minmax(220px, 250px)
        minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
}

.layout-chat .panel-participantes-chat {
    display: flex;
    min-width: 0;
    max-height: 650px;
    flex-direction: column;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
}

.layout-chat .panel-chat {
    min-width: 0;
}

.panel-participantes-chat .panel-titulo-compacto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.panel-participantes-chat .panel-titulo-compacto h2 {
    margin: 0;
    font-size: 1rem;
}

.panel-participantes-chat .lista-participantes-chat {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0.45rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.panel-participantes-chat .participante-chat {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0.6rem;
    font-size: 0.82rem;
}

.panel-participantes-chat .participante-chat:hover {
    background: var(--bs-tertiary-bg);
}

.panel-participantes-chat .avatar-participante-chat {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 0.65rem;
}

.panel-participantes-chat .participante-chat > span:last-child {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las dos columnas mantienen una altura visual similar. */
@media (min-width: 768px) {
    .layout-chat .lista-mensajes-chat {
        max-height: 500px;
    }
}

/* En móvil, participantes arriba en una tira horizontal. */
@media (max-width: 767.98px) {
    .layout-chat {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .layout-chat .panel-participantes-chat {
        order: 1;
        max-height: none;
    }

    .layout-chat .panel-chat {
        order: 2;
    }

    .panel-participantes-chat .lista-participantes-chat {
        flex-direction: row;
        gap: 0.4rem;
        padding: 0.55rem;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .panel-participantes-chat .participante-chat {
        width: auto;
        flex: 0 0 auto;
        padding: 0.35rem 0.5rem;
        border: 1px solid var(--bs-border-color);
        border-radius: 999px;
    }

    .panel-participantes-chat .avatar-participante-chat {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .panel-participantes-chat .participante-chat > span:last-child {
        max-width: 125px;
    }
}

.lista-historico-chat {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tarjeta-historico-chat {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.9rem 1rem;

    color: var(--bs-body-color);
    text-decoration: none;
}

.tarjeta-historico-chat:hover {
    background: var(--bs-tertiary-bg);
}

.icono-historico-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border-radius: 0.7rem;

    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);

    font-size: 1rem;
}

.contenido-historico-chat {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
}

.cabecera-tarjeta-historico {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;

    margin-bottom: 0.15rem;
}

.descripcion-historico-chat {
    overflow: hidden;

    margin-bottom: 0.35rem;

    color: var(--bs-secondary-color);
    font-size: 0.82rem;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.meta-historico-chat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;

    color: var(--bs-secondary-color);
    font-size: 0.73rem;
}

.meta-historico-chat span {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
}

@media (max-width: 767.98px) {
    .tarjeta-historico-chat {
        align-items: flex-start;
        padding: 0.75rem;
    }

    .descripcion-historico-chat {
        white-space: normal;

        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .meta-historico-chat {
        gap: 0.35rem 0.6rem;
    }
}

.indicador-sala-chat-activa {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-left: 0.3rem;

    border-radius: 50%;

    background: var(--bs-success);
}

.estado-escritura-chat {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    min-height: 28px;

    padding: 0.25rem 1rem;

    border-top: 1px solid var(--bs-border-color);

    color: var(--bs-secondary-color);
    font-size: 0.76rem;
}

.estado-escritura-chat[hidden] {
    display: none;
}


.puntos-escritura-chat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}


.puntos-escritura-chat span {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: currentColor;

    animation:
        punto-escribiendo-chat
        1.2s
        infinite
        ease-in-out;
}


.puntos-escritura-chat span:nth-child(2) {
    animation-delay: 0.15s;
}


.puntos-escritura-chat span:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes punto-escribiendo-chat {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.datos-participante-chat {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.08rem;
}


.nombre-participante-chat {
    overflow: hidden;

    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.estado-participante-chat[hidden] {
    display: none;
}


.puntos-participante-chat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}


.puntos-participante-chat span {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: currentColor;

    animation:
        punto-participante-chat
        1.2s
        infinite
        ease-in-out;
}


.puntos-participante-chat span:nth-child(2) {
    animation-delay: 0.15s;
}


.puntos-participante-chat span:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes punto-participante-chat {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.aviso-chat-cerrado-tiempo-real {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    width: 100%;

    padding: 0.75rem 1rem;

    color: var(--bs-secondary-color);
    font-size: 0.84rem;
    font-weight: 600;

    background: var(--bs-tertiary-bg);

    border-radius: 0.65rem;
}


.aviso-chat-cerrado-tiempo-real i {
    color: var(--bs-danger);
}

.estado-participante-chat {
    display: flex;
    min-height: 16px;
    align-items: center;
    gap: 0.28rem;

    color: var(--bs-secondary-color);

    font-size: 0.67rem;
    font-weight: 500;
}


.punto-presencia-chat {
    display: inline-block;

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--bs-secondary-color);

    opacity: 0.45;
}


.estado-participante-online {
    color: var(--bs-success);
}


.estado-participante-online
.punto-presencia-chat {
    background: var(--bs-success);
    opacity: 1;
}


.estado-participante-offline {
    color: var(--bs-secondary-color);
}


.estado-participante-offline
.punto-presencia-chat {
    background: var(--bs-secondary-color);
    opacity: 0.4;
}


.estado-participante-escribiendo {
    color: var(--bs-success);
    font-weight: 600;
}


.estado-participante-escribiendo
.punto-presencia-chat {
    background: var(--bs-success);

    opacity: 1;

    box-shadow:
        0 0 0 3px
        rgba(
            var(--bs-success-rgb),
            0.12
        );
}

.input-adjuntos-chat {
    display: none;
}

.boton-adjuntar-chat {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--bs-secondary-color);
    font-size: 1.2rem;

    background: transparent;

    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.boton-adjuntar-chat:hover {
    color: var(--bs-primary);
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-primary);
}

.campo-mensaje-chat {
    min-width: 0;
    flex: 1 1 auto;
}

.campo-mensaje-chat textarea {
    width: 100%;
}

.lista-adjuntos-seleccionados {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    margin-top: 0.5rem;
}

.lista-adjuntos-seleccionados[hidden] {
    display: none;
}


.adjunto-seleccionado-chat {
    display: flex;
    width: min(100%, 280px);
    min-width: 0;

    align-items: center;
    gap: 0.5rem;

    padding: 0.4rem;

    background: var(--bs-tertiary-bg);

    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
}

.miniatura-adjunto-chat {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    object-fit: cover;

    border-radius: 0.45rem;
}

.icono-adjunto-seleccionado-chat {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    align-items: center;
    justify-content: center;

    color: var(--bs-primary);
    font-size: 1.15rem;

    background: var(--bs-body-bg);

    border-radius: 0.45rem;
}

.datos-adjunto-seleccionado-chat {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;

    flex-direction: column;
}


.nombre-adjunto-seleccionado-chat {
    overflow: hidden;

    font-size: 0.76rem;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.tamano-adjunto-seleccionado-chat {
    color: var(--bs-secondary-color);

    font-size: 0.67rem;
}


.quitar-adjunto-chat {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;

    align-items: center;
    justify-content: center;

    padding: 0;

    color: var(--bs-secondary-color);

    background: transparent;

    border: 0;
    border-radius: 50%;
}


.quitar-adjunto-chat:hover {
    color: var(--bs-danger);
    background: var(--bs-body-bg);
}

.adjunto-seleccionado-chat span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   CHAT · ADJUNTOS
   ============================================================ */

.adjuntos-mensaje-chat {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 0.45rem;

    width: min(
        100%,
        520px
    );

    margin-top: 0.55rem;
}


.imagen-adjunta-chat {
    display: block;
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    background: var(--bs-tertiary-bg);

    border: 1px solid var(--bs-border-color);
    border-radius: 0.7rem;
}


.imagen-adjunta-chat img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.2s ease;
}


.imagen-adjunta-chat:hover img {
    transform: scale(1.025);
}


/* Una sola imagen */
.adjuntos-mensaje-chat
.imagen-adjunta-chat:only-child {
    grid-column: 1 / -1;

    max-width: 420px;

    aspect-ratio: auto;
}


.adjuntos-mensaje-chat
.imagen-adjunta-chat:only-child img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 360px;

    object-fit: contain;
}


/* Si hay un número impar de imágenes,
   la última ocupa toda la fila. */
.adjuntos-mensaje-chat
.imagen-adjunta-chat:last-child:nth-child(odd) {
    grid-column: 1 / -1;

    max-height: 280px;
}


.adjuntos-mensaje-chat
.imagen-adjunta-chat:last-child:nth-child(odd) img {
    max-height: 240px;

    object-fit: cover;
}

/* Documentos */
.archivo-adjunto-chat {
    grid-column: 1 / -1;

    display: flex;
    width: 100%;

    align-items: center;
    gap: 0.65rem;

    padding: 0.6rem 0.7rem;

    color: var(--bs-body-color);
    text-decoration: none;

    background: var(--bs-tertiary-bg);

    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
}


.archivo-adjunto-chat:hover {
    border-color: var(--bs-primary);
}


.icono-archivo-chat {
    display: flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    align-items: center;
    justify-content: center;

    color: var(--bs-primary);
    font-size: 1.1rem;

    background: var(--bs-body-bg);

    border-radius: 0.5rem;
}


.datos-archivo-chat {
    display: flex;
    min-width: 0;

    flex-direction: column;
}


.nombre-archivo-chat {
    overflow: hidden;

    font-size: 0.8rem;
    font-weight: 600;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.meta-archivo-chat {
    color: var(--bs-secondary-color);

    font-size: 0.68rem;
}


/* Móvil */
@media (max-width: 575.98px) {
    .adjuntos-mensaje-chat {
        width: 100%;
        gap: 0.35rem;
    }

    .imagen-adjunta-chat {
        border-radius: 0.55rem;
    }
}


.control-con-ayuda {
    position: relative;
}

.control-con-ayuda .control {
    padding-right: 2.75rem;
}

.btn-ayuda-campo {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: help;
}

.btn-ayuda-campo:hover,
.btn-ayuda-campo:focus {
    opacity: 1;
}

/* ============================================================
   SUBNEXO934 · CHAT · REDISEÑO VISUAL
   ============================================================ */

.pagina-chat-visual {
    display: grid;
    gap: 16px;
}


/* ============================================================
   CABECERA
   ============================================================ */

.cabecera-chat-visual {
    position: relative;

    display: flex;
    min-height: 125px;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--foro-azul-950),
            var(--foro-azul-800)
        );

    border:
        1px solid
        rgb(255 255 255 / 8%);

    border-radius: 18px;

    box-shadow:
        0 14px 34px
        rgb(15 23 42 / 13%);
}


.cabecera-chat-visual::after {
    position: absolute;

    top: -85px;
    right: -55px;

    width: 260px;
    height: 260px;

    content: "";

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgb(255 255 255 / 10%),
            transparent 68%
        );

    border-radius: 50%;
}


.cabecera-chat-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


.cabecera-chat-visual .eyebrow {
    color:
        rgb(255 255 255 / 66%);
}


.cabecera-chat-visual h1 {
    margin: 5px 0 6px;

    color: #ffffff;

    font-size:
        clamp(
            1.55rem,
            3vw,
            2rem
        );

    font-weight: 780;
}


.cabecera-chat-visual p {
    max-width: 690px;

    margin: 0;

    color:
        rgb(255 255 255 / 74%);

    font-size: 0.88rem;

    line-height: 1.5;
}


.acciones-cabecera-chat {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


/* ============================================================
   SALAS ABIERTAS
   ============================================================ */

.panel-salas-chat-visual {
    padding: 13px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f4f7fb
        );

    border:
        1px solid
        #dfe7f0;

    box-shadow:
        0 8px 24px
        rgb(15 23 42 / 5%);
}


.cabecera-panel-salas-chat {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;

    padding:
        2px
        3px
        11px;

    border-bottom:
        1px solid
        var(--foro-borde);
}


.cabecera-panel-salas-chat h2 {
    margin: 3px 0 2px;

    color: var(--foro-texto);

    font-size: 0.98rem;

    font-weight: 750;
}


.cabecera-panel-salas-chat p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.66rem;
}


.lista-salas-chat-visual {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 8px;
}


.sala-chat-visual {
    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr)
        16px;

    align-items: center;

    gap: 8px;

    min-width: 0;

    padding: 9px 10px;

    color: inherit;

    text-decoration: none;

    background-color: #ffffff;

    border:
        1px solid
        #d8e2ed;

    border-radius: 11px;

    box-shadow:
        0 3px 9px
        rgb(15 23 42 / 4%);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}


.sala-chat-visual:hover {
    border-color: #bccbdd;

    box-shadow:
        0 7px 17px
        rgb(15 23 42 / 7%);

    transform:
        translateY(-1px);
}


.sala-chat-visual-activa {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--foro-azul-900),
            var(--foro-azul-800)
        );

    border-color:
        var(--foro-azul-800);
}


.icono-sala-chat-visual {
    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    color: var(--foro-azul-800);

    background-color:
        var(--foro-azul-100);

    border-radius: 9px;
}


.sala-chat-visual-activa
.icono-sala-chat-visual {
    color: #ffffff;

    background-color:
        rgb(255 255 255 / 14%);
}


.contenido-sala-chat-visual {
    display: grid;

    min-width: 0;
}


.contenido-sala-chat-visual strong {
    overflow: hidden;

    font-size: 0.72rem;

    font-weight: 720;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.meta-sala-chat-visual {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 3px;

    color: var(--foro-secundario);

    font-size: 0.59rem;
}


.sala-chat-visual-activa
.meta-sala-chat-visual {
    color:
        rgb(255 255 255 / 70%);
}


.no-leidos-sala-chat-visual {
    padding: 1px 5px;

    color: #ffffff;

    font-weight: 750;

    background-color: #dc2626;

    border-radius: 999px;
}


.flecha-sala-chat-visual {
    color: #9aa7b5;

    font-size: 0.62rem;
}


.sala-chat-visual-activa
.flecha-sala-chat-visual {
    color:
        rgb(255 255 255 / 72%);
}


/* ============================================================
   ABRIR SALA
   ============================================================ */

.panel-abrir-sala-chat {
    padding: 0;

    overflow: hidden;

    border-color: #dce5ee;
}


.resumen-abrir-sala-chat {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    cursor: pointer;

    list-style: none;
}


.resumen-abrir-sala-chat::-webkit-details-marker {
    display: none;
}


.icono-abrir-sala-chat {
    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    color: var(--foro-azul-800);

    background-color:
        var(--foro-azul-100);

    border-radius: 9px;
}


.resumen-abrir-sala-chat > div {
    display: grid;
}


.resumen-abrir-sala-chat strong {
    margin-top: 2px;

    color: var(--foro-texto);

    font-size: 0.73rem;
}


.resumen-abrir-sala-chat
> i {
    color: #8996a5;

    transition:
        transform 150ms ease;
}


.panel-abrir-sala-chat
details[open]
.resumen-abrir-sala-chat
> i {
    transform:
        rotate(180deg);
}


.formulario-abrir-chat-visual {
    margin: 0;

    padding: 14px;

    background-color: #f8fafc;

    border-top:
        1px solid
        var(--foro-borde);
}


/* ============================================================
   CABECERA SALA ACTIVA
   ============================================================ */

.panel-chat-cabecera-visual {
    padding: 15px 17px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

    border-color: #dce5ee;

    box-shadow:
        0 7px 20px
        rgb(15 23 42 / 5%);
}


.estado-sala-abierta-visual {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 3px 7px;

    color: #166534;

    font-size: 0.59rem;

    font-weight: 750;

    background-color: #dcfce7;

    border-radius: 999px;
}


.panel-chat-cabecera-visual
.chat-sala-datos
h2 {
    margin: 6px 0 4px;

    color: var(--foro-texto);

    font-size: 1.12rem;

    font-weight: 760;
}


.panel-chat-cabecera-visual
.chat-sala-datos
p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.71rem;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.layout-chat-visual {
    align-items: start;

    gap: 14px;
}


/* ============================================================
   PARTICIPANTES
   ============================================================ */

.panel-participantes-chat {
    border-color: #dce5ee;

    box-shadow:
        0 7px 20px
        rgb(15 23 42 / 5%);
}


.participante-chat {
    border-radius: 9px;

    transition:
        background-color 150ms ease;
}


.participante-chat:hover {
    background-color: #f1f5f9;
}


/* ============================================================
   CHAT PRINCIPAL
   ============================================================ */

.panel-chat-visual {
    overflow: hidden;

    border-color: #dce5ee;

    box-shadow:
        0 9px 26px
        rgb(15 23 42 / 7%);
}


.panel-chat-visual
.cabecera-seccion-chat {
    background:
        linear-gradient(
            180deg,
            #fbfcfe,
            #f7f9fc
        );

    border-bottom:
        1px solid
        var(--foro-borde);
}


/* ============================================================
   MENSAJES
   ============================================================ */

.mensaje-chat {
    border-bottom:
        1px solid
        #edf1f5;
}


.mensaje-chat:last-child {
    border-bottom: 0;
}


.mensaje-chat-propio
.cuerpo-mensaje-chat {
    background-color: #f4f8fd;
}


.texto-mensaje-chat {
    line-height: 1.55;
}


/* ============================================================
   ESCRITURA
   ============================================================ */

.zona-escribir-chat {
    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f4f7fb
        );

    border-top:
        1px solid
        #dce5ee;
}


.formulario-enviar-chat {
    gap: 8px;
}


.campo-mensaje-chat textarea {
    border-color: #cfd9e5;

    border-radius: 10px;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.campo-mensaje-chat textarea:focus {
    border-color:
        var(--foro-azul-800);

    box-shadow:
        0 0 0 3px
        rgb(32 70 111 / 8%);
}


.boton-adjuntar-chat {
    border-radius: 10px;
}


.boton-enviar-chat {
    min-width: 94px;
}


/* ============================================================
   SIN SALA
   ============================================================ */

.panel-chat-sin-sala-visual {
    display: grid;

    min-height: 230px;

    align-content: center;

    justify-items: center;

    gap: 10px;

    padding: 30px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

    border:
        1px solid
        #dce5ee;

    border-radius: 15px;

    box-shadow:
        0 7px 21px
        rgb(15 23 42 / 4%);
}


.panel-chat-sin-sala-visual
.icono-chat-sin-sala {
    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

    color: var(--foro-azul-800);

    font-size: 1.3rem;

    background-color:
        var(--foro-azul-100);

    border-radius: 16px;
}


.panel-chat-sin-sala-visual h2 {
    margin: 3px 0 5px;

    font-size: 1rem;

    font-weight: 750;
}


.panel-chat-sin-sala-visual p {
    max-width: 500px;

    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.73rem;

    line-height: 1.5;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .lista-salas-chat-visual {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 767px) {

    .cabecera-chat-visual {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        padding: 18px;
    }


    .acciones-cabecera-chat {
        width: 100%;
    }


    .acciones-cabecera-chat .btn {
        flex: 1;
    }


    .lista-salas-chat-visual {
        grid-template-columns: 1fr;
    }


    .panel-chat-cabecera-visual {
        padding: 14px;
    }
}


@media (max-width: 520px) {

    .cabecera-chat-visual {
        padding: 17px;

        border-radius: 15px;
    }


    .acciones-cabecera-chat {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .acciones-cabecera-chat .btn {
        width: 100%;
    }


    .panel-salas-chat-visual {
        padding: 8px;
    }


    .sala-chat-visual {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        padding: 9px;
    }


    .flecha-sala-chat-visual {
        display: none;
    }


    .formulario-enviar-chat {
        align-items: stretch;
    }


    .boton-enviar-chat {
        min-width: auto;
    }
}

/* ============================================================
   SUBNEXO934 · CHAT · HISTÓRICO
   ============================================================ */

.pagina-historico-chat-visual {
    gap: 16px;
}


/* ============================================================
   RESUMEN
   ============================================================ */

.resumen-historico-chat-visual {
    padding: 11px 14px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #f4f7fb
        );

    border:
        1px solid
        #dce5ee;

    border-radius: 12px;

    box-shadow:
        0 5px 16px
        rgb(15 23 42 / 4%);
}


.resumen-historico-chat-visual > div {
    display: flex;

    align-items: center;

    gap: 10px;
}


.icono-resumen-historico-chat {
    display: grid;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    place-items: center;

    color: var(--foro-azul-800);

    background-color:
        var(--foro-azul-100);

    border-radius: 10px;
}


.resumen-historico-chat-visual
> div
> div {
    display: grid;

    gap: 2px;
}


.resumen-historico-chat-visual strong {
    color: var(--foro-texto);

    font-size: 0.76rem;

    font-weight: 740;
}


/* ============================================================
   LISTA DE CONVERSACIONES
   ============================================================ */

.lista-historico-chat-visual {
    display: grid;

    gap: 9px;
}


.tarjeta-historico-chat-visual {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: stretch;

    overflow: hidden;

    background-color: #ffffff;

    border:
        1px solid
        #d8e2ed;

    border-radius: 13px;

    box-shadow:
        0 4px 14px
        rgb(15 23 42 / 4%);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}


.tarjeta-historico-chat-visual:hover {
    border-color: #bccbdd;

    box-shadow:
        0 8px 21px
        rgb(15 23 42 / 7%);

    transform:
        translateY(-1px);
}


.enlace-historico-chat-visual {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 11px;

    min-width: 0;

    padding: 12px 14px;

    color: inherit;

    text-decoration: none;
}


.icono-historico-chat-visual {
    display: grid;

    width: 40px;
    height: 40px;

    place-items: center;

    color: #64748b;

    font-size: 0.9rem;

    background-color: #eef2f6;

    border-radius: 10px;
}


.contenido-historico-chat-visual {
    display: grid;

    min-width: 0;

    gap: 4px;
}


.cabecera-tarjeta-historico-visual {
    display: flex;

    min-width: 0;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.cabecera-tarjeta-historico-visual strong {
    min-width: 0;

    overflow-wrap: anywhere;

    color: var(--foro-texto);

    font-size: 0.79rem;

    font-weight: 740;
}


.estado-sala-cerrada-visual {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 2px 6px;

    color: #475569;

    font-size: 0.55rem;

    font-weight: 720;

    background-color: #e2e8f0;

    border-radius: 999px;
}


.descripcion-historico-chat-visual {
    overflow: hidden;

    color: #536173;

    font-size: 0.68rem;

    line-height: 1.45;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.meta-historico-chat-visual {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px 13px;

    margin-top: 2px;

    color: #8290a1;

    font-size: 0.59rem;
}


.meta-historico-chat-visual span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


.flecha-historico-chat-visual {
    color: #a0acb9;

    font-size: 0.68rem;

    transition:
        color 150ms ease,
        transform 150ms ease;
}


.tarjeta-historico-chat-visual:hover
.flecha-historico-chat-visual {
    color: var(--foro-azul-800);

    transform:
        translateX(2px);
}


/* ============================================================
   ELIMINAR SALA INDIVIDUAL
   ============================================================ */

.accion-eliminar-historico-chat {
    display: flex;

    align-items: center;

    padding: 0 11px;

    background-color: #fbfcfd;

    border-left:
        1px solid
        #edf1f5;
}


.accion-eliminar-historico-chat
.boton-icono {
    width: 34px;
    height: 34px;
}


/* ============================================================
   ESTADO VACÍO
   ============================================================ */

.estado-historico-chat-vacio {
    display: grid;

    min-height: 250px;

    align-content: center;

    justify-items: center;

    gap: 6px;

    padding: 32px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

    border:
        1px solid
        #dce5ee;

    border-radius: 15px;

    box-shadow:
        0 7px 21px
        rgb(15 23 42 / 4%);
}


.icono-historico-chat-vacio {
    display: grid;

    width: 58px;
    height: 58px;

    margin-bottom: 6px;

    place-items: center;

    color: var(--foro-azul-800);

    font-size: 1.25rem;

    background-color:
        var(--foro-azul-100);

    border-radius: 16px;
}


.estado-historico-chat-vacio h2 {
    margin: 2px 0 0;

    color: var(--foro-texto);

    font-size: 1rem;

    font-weight: 750;
}


.estado-historico-chat-vacio p {
    max-width: 500px;

    margin:
        0
        0
        8px;

    color: var(--foro-secundario);

    font-size: 0.73rem;

    line-height: 1.5;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    .enlace-historico-chat-visual {
        grid-template-columns:
            40px
            minmax(0, 1fr);
    }


    .flecha-historico-chat-visual {
        display: none;
    }


    .descripcion-historico-chat-visual {
        white-space: normal;

        display: -webkit-box;

        line-clamp: 2;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;
    }


    .meta-historico-chat-visual {
        display: grid;

        gap: 3px;
    }
}


@media (max-width: 520px) {

    .tarjeta-historico-chat-visual {
        grid-template-columns: 1fr;
    }


    .enlace-historico-chat-visual {
        padding: 11px;
    }


    .accion-eliminar-historico-chat {
        justify-content: flex-end;

        padding: 8px 10px;

        border-top:
            1px solid
            #edf1f5;

        border-left: 0;
    }


    .estado-historico-chat-vacio {
        min-height: 220px;

        padding: 24px 17px;
    }
}

/* ============================================================
   SUBNEXO934 · CHAT · SALA HISTÓRICA
   ============================================================ */

.pagina-sala-historica-visual {
    gap: 16px;
}


/* ============================================================
   INFORMACIÓN DE LA SALA
   ============================================================ */

.panel-sala-historica-info {
    padding: 15px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
        );

    border-color: #dce5ee;

    box-shadow:
        0 7px 20px
        rgb(15 23 42 / 5%);
}


.cabecera-sala-historica-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;

    padding-bottom: 11px;

    border-bottom:
        1px solid
        var(--foro-borde);
}


.estado-sala-cerrada-detalle {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 3px 7px;

    color: #475569;

    font-size: 0.58rem;

    font-weight: 740;

    background-color: #e2e8f0;

    border-radius: 999px;
}


.cabecera-sala-historica-info h2 {
    margin: 6px 0 0;

    color: var(--foro-texto);

    font-size: 0.94rem;

    font-weight: 750;
}


.datos-sala-historica-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.dato-sala-historica {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 9px;

    padding: 10px;

    background-color: #f8fafc;

    border:
        1px solid
        #e2e8f0;

    border-radius: 10px;
}


.icono-dato-sala-historica {
    display: grid;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    place-items: center;

    color: var(--foro-azul-800);

    background-color:
        var(--foro-azul-100);

    border-radius: 9px;
}


.dato-sala-historica > div {
    display: grid;

    min-width: 0;

    gap: 1px;
}


.dato-sala-historica span {
    color: #8190a1;

    font-size: 0.57rem;
}


.dato-sala-historica strong {
    overflow-wrap: anywhere;

    color: var(--foro-texto);

    font-size: 0.68rem;

    font-weight: 730;
}


/* ============================================================
   MENSAJES HISTÓRICOS
   ============================================================ */

.panel-chat-historico-visual {
    overflow: hidden;

    border-color: #dce5ee;

    box-shadow:
        0 8px 24px
        rgb(15 23 42 / 6%);
}


.panel-chat-historico-visual
.cabecera-seccion-chat {
    background:
        linear-gradient(
            180deg,
            #fbfcfe,
            #f7f9fc
        );

    border-bottom:
        1px solid
        var(--foro-borde);
}


.lista-mensajes-historicos {
    max-height: none;
}


.estado-vacio-historico-chat {
    margin: 16px;
}


/* ============================================================
   PARTICIPANTES HISTÓRICOS
   ============================================================ */

.panel-participantes-historico {
    padding: 13px;

    border-color: #dce5ee;

    box-shadow:
        0 7px 20px
        rgb(15 23 42 / 5%);
}


.lista-participantes-historico {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 7px;

    margin-top: 10px;
}


.participante-chat-historico {
    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr)
        14px;

    align-items: center;

    gap: 8px;

    padding: 8px 9px;

    background-color: #f8fafc;

    border:
        1px solid
        #e1e8ef;

    border-radius: 10px;

    text-decoration: none;

    transition:
        background-color 150ms ease,
        border-color 150ms ease;
}


.participante-chat-historico:hover {
    background-color: #f1f5f9;

    border-color: #cbd7e3;
}


.datos-participante-historico {
    display: grid;

    min-width: 0;

    gap: 1px;
}


.datos-participante-historico strong {
    overflow: hidden;

    color: var(--foro-texto);

    font-size: 0.68rem;

    font-weight: 720;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.datos-participante-historico span {
    color: #8794a3;

    font-size: 0.56rem;
}


.participante-chat-historico > i {
    color: #a0acb9;

    font-size: 0.58rem;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .datos-sala-historica-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 767px) {

    .lista-participantes-historico {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 520px) {

    .datos-sala-historica-grid {
        grid-template-columns: 1fr;
    }


    .panel-sala-historica-info,
    .panel-participantes-historico {
        padding: 10px;
    }
}

/* ============================================================
   SUBNEXO934 · CHAT · SOLICITAR APERTURA
   ============================================================ */

.pagina-solicitud-chat-visual {
    gap: 16px;
}


/* ============================================================
   SOLICITUD PENDIENTE
   ============================================================ */

.aviso-solicitud-chat-pendiente {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 16px;

    color: #78350f;

    background:
        linear-gradient(
            180deg,
            #fffbeb,
            #fef9c3
        );

    border:
        1px solid
        #fde68a;

    border-radius: 13px;

    box-shadow:
        0 6px 18px
        rgb(120 53 15 / 6%);
}


.icono-solicitud-chat-pendiente {
    display: grid;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    place-items: center;

    color: #92400e;

    font-size: 1rem;

    background-color: #fef3c7;

    border-radius: 11px;
}


.contenido-solicitud-chat-pendiente {
    display: grid;

    gap: 3px;
}


.contenido-solicitud-chat-pendiente
.eyebrow {
    color: #a16207;
}


.contenido-solicitud-chat-pendiente h2 {
    margin: 0;

    font-size: 0.92rem;

    font-weight: 760;
}


.contenido-solicitud-chat-pendiente strong {
    margin-top: 3px;

    font-size: 0.76rem;
}


.contenido-solicitud-chat-pendiente p {
    margin: 2px 0 0;

    color: #854d0e;

    font-size: 0.68rem;

    line-height: 1.5;
}


/* ============================================================
   FORMULARIO
   ============================================================ */

.panel-solicitud-chat-formulario {
    overflow: hidden;

    padding: 0;

    border-color: #dce5ee;

    box-shadow:
        0 8px 24px
        rgb(15 23 42 / 5%);
}


.cabecera-formulario-solicitud-chat {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 14px 16px;

    background:
        linear-gradient(
            180deg,
            #fbfcfe,
            #f6f8fb
        );

    border-bottom:
        1px solid
        var(--foro-borde);
}


.icono-formulario-solicitud-chat {
    display: grid;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    place-items: center;

    color: var(--foro-azul-800);

    font-size: 0.95rem;

    background-color:
        var(--foro-azul-100);

    border-radius: 11px;
}


.cabecera-formulario-solicitud-chat
> div {
    min-width: 0;
}


.cabecera-formulario-solicitud-chat h2 {
    margin: 3px 0 2px;

    color: var(--foro-texto);

    font-size: 0.96rem;

    font-weight: 760;
}


.cabecera-formulario-solicitud-chat p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.66rem;
}


.formulario-solicitud-chat-visual {
    display: grid;

    gap: 15px;

    padding: 17px;
}


.campo-formulario-chat {
    display: grid;

    gap: 5px;
}


.campo-formulario-chat
.form-label {
    margin: 0;

    color: var(--foro-texto);

    font-size: 0.7rem;

    font-weight: 700;
}


.campo-formulario-chat
.form-control {
    border-color: #cfd9e5;

    border-radius: 10px;

    font-size: 0.72rem;

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.campo-formulario-chat
.form-control:focus {
    border-color:
        var(--foro-azul-800);

    box-shadow:
        0 0 0 3px
        rgb(32 70 111 / 8%);
}


.campo-formulario-chat textarea {
    resize: vertical;
}


.ayuda-campo-chat {
    color: #8491a1;

    font-size: 0.59rem;

    line-height: 1.4;
}


.campo-formulario-chat
.error-campo {
    display: flex;

    align-items: center;

    gap: 4px;

    margin: 0;

    color: #b91c1c;

    font-size: 0.61rem;
}


.acciones-formulario-solicitud-chat {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    padding-top: 4px;
}


/* ============================================================
   HISTÓRICO PERSONAL
   ============================================================ */

.panel-historico-solicitudes-chat {
    padding: 13px;

    border-color: #dce5ee;

    box-shadow:
        0 7px 21px
        rgb(15 23 42 / 5%);
}


.cabecera-historico-solicitudes-chat {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        2px
        3px
        11px;

    margin-bottom: 10px;

    border-bottom:
        1px solid
        var(--foro-borde);
}


.cabecera-historico-solicitudes-chat h2 {
    margin: 3px 0 2px;

    color: var(--foro-texto);

    font-size: 0.96rem;

    font-weight: 750;
}


.cabecera-historico-solicitudes-chat p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.65rem;
}


.lista-solicitudes-chat-visual {
    display: grid;

    gap: 8px;
}


.tarjeta-solicitud-chat-visual {
    padding: 11px 12px;

    background-color: #ffffff;

    border:
        1px solid
        #dbe4ed;

    border-radius: 11px;

    box-shadow:
        0 3px 10px
        rgb(15 23 42 / 3%);
}


.cabecera-tarjeta-solicitud-chat {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}


.cabecera-tarjeta-solicitud-chat
> div {
    display: grid;

    min-width: 0;

    gap: 3px;
}


.cabecera-tarjeta-solicitud-chat strong {
    overflow-wrap: anywhere;

    color: var(--foro-texto);

    font-size: 0.75rem;

    font-weight: 730;
}


.cabecera-tarjeta-solicitud-chat
> div
> span {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #8491a1;

    font-size: 0.58rem;
}


.estado-solicitud-chat {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;

    gap: 4px;

    padding: 3px 7px;

    font-size: 0.55rem;

    font-weight: 740;

    border-radius: 999px;
}


.estado-solicitud-pendiente {
    color: #92400e;

    background-color: #fef3c7;
}


.estado-solicitud-aprobada {
    color: #166534;

    background-color: #dcfce7;
}


.estado-solicitud-rechazada {
    color: #991b1b;

    background-color: #fee2e2;
}


.meta-tarjeta-solicitud-chat {
    display: flex;

    margin-top: 7px;

    color: #768496;

    font-size: 0.59rem;
}


.meta-tarjeta-solicitud-chat span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


.observacion-solicitud-chat {
    display: flex;

    align-items: flex-start;

    gap: 6px;

    margin-top: 9px;

    padding: 8px 9px;

    color: #526173;

    font-size: 0.62rem;

    line-height: 1.45;

    background-color: #f8fafc;

    border:
        1px solid
        #e5ebf1;

    border-radius: 8px;
}


.observacion-solicitud-chat
> i {
    margin-top: 1px;

    color: var(--foro-azul-800);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    .acciones-formulario-solicitud-chat {
        align-items: stretch;

        flex-direction: column-reverse;
    }


    .acciones-formulario-solicitud-chat .btn {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .aviso-solicitud-chat-pendiente {
        padding: 13px;
    }


    .formulario-solicitud-chat-visual {
        padding: 13px;
    }


    .cabecera-tarjeta-solicitud-chat {
        flex-direction: column;
    }


    .estado-solicitud-chat {
        align-self: flex-start;
    }
}

/* ============================================================
   SUBNEXO934 · CHAT · SOLICITUDES ADMINISTRACIÓN
   ============================================================ */

.pagina-solicitudes-admin-chat {
    gap: 16px;
}


/* ============================================================
   AVISO SALAS ACTIVAS
   ============================================================ */

.aviso-salas-activas-admin-chat {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 13px 15px;

    color: #1e3a5f;

    background:
        linear-gradient(
            180deg,
            #eff6ff,
            #eaf3ff
        );

    border:
        1px solid
        #bfdbfe;

    border-radius: 12px;
}


.icono-salas-activas-admin-chat {
    display: grid;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    place-items: center;

    color: var(--foro-azul-800);

    background-color: #dbeafe;

    border-radius: 10px;
}


.aviso-salas-activas-admin-chat
> div {
    display: grid;

    gap: 2px;
}


.aviso-salas-activas-admin-chat strong {
    font-size: 0.71rem;
}


.aviso-salas-activas-admin-chat
> div
> span {
    color: #47627f;

    font-size: 0.64rem;

    line-height: 1.45;
}


/* ============================================================
   PANELES
   ============================================================ */

.panel-solicitudes-pendientes-chat,
.panel-historico-admin-chat {
    padding: 13px;

    border-color: #dce5ee;

    box-shadow:
        0 7px 21px
        rgb(15 23 42 / 5%);
}


.cabecera-panel-solicitudes-admin {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        2px
        3px
        12px;

    margin-bottom: 10px;

    border-bottom:
        1px solid
        var(--foro-borde);
}


.cabecera-panel-solicitudes-admin h2 {
    margin: 3px 0 2px;

    color: var(--foro-texto);

    font-size: 0.98rem;

    font-weight: 760;
}


.cabecera-panel-solicitudes-admin p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.65rem;
}


/* ============================================================
   SOLICITUDES PENDIENTES
   ============================================================ */

.lista-solicitudes-admin-chat {
    display: grid;

    gap: 9px;
}


.tarjeta-solicitud-admin-chat {
    padding: 13px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfd
        );

    border:
        1px solid
        #dbe4ed;

    border-radius: 12px;

    box-shadow:
        0 4px 13px
        rgb(15 23 42 / 4%);
}


.cabecera-solicitud-admin-chat {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.identificacion-solicitud-admin-chat {
    min-width: 0;
}


.estado-solicitud-admin-pendiente {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 3px 7px;

    color: #92400e;

    font-size: 0.55rem;

    font-weight: 740;

    background-color: #fef3c7;

    border-radius: 999px;
}


.identificacion-solicitud-admin-chat h3 {
    margin: 7px 0 4px;

    overflow-wrap: anywhere;

    color: var(--foro-texto);

    font-size: 0.88rem;

    font-weight: 750;
}


.meta-solicitud-admin-chat {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px 12px;

    color: #8290a1;

    font-size: 0.6rem;
}


.meta-solicitud-admin-chat span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


/* ============================================================
   DATOS SOLICITUD
   ============================================================ */

.bloque-dato-solicitud-admin {
    margin-top: 11px;

    padding: 9px 10px;

    background-color: #f8fafc;

    border:
        1px solid
        #e5ebf1;

    border-radius: 9px;
}


.bloque-dato-solicitud-admin
> span {
    display: block;

    margin-bottom: 3px;

    color: #6d7a8b;

    font-size: 0.58rem;

    font-weight: 730;

    text-transform: uppercase;

    letter-spacing: 0.03em;
}


.bloque-dato-solicitud-admin p {
    margin: 0;

    color: #425164;

    font-size: 0.67rem;

    line-height: 1.5;
}


/* ============================================================
   ACCIONES
   ============================================================ */

.acciones-solicitud-admin-chat {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 13px;

    padding-top: 12px;

    border-top:
        1px solid
        #e9eef3;
}


.formulario-rechazo-solicitud-chat {
    display: flex;

    min-width: 320px;

    flex: 1;

    align-items: flex-end;

    gap: 8px;
}


.campo-observacion-solicitud-chat {
    display: grid;

    min-width: 0;

    flex: 1;

    gap: 4px;
}


.campo-observacion-solicitud-chat label {
    display: flex;

    align-items: baseline;

    gap: 4px;

    color: var(--foro-texto);

    font-size: 0.62rem;

    font-weight: 700;
}


.campo-observacion-solicitud-chat
label
span {
    color: #8a97a5;

    font-size: 0.55rem;

    font-weight: 500;
}


.campo-observacion-solicitud-chat
.form-control {
    border-color: #cfd9e5;

    border-radius: 9px;

    font-size: 0.65rem;
}


/* ============================================================
   ESTADO VACÍO
   ============================================================ */

.estado-solicitudes-admin-vacio {
    display: grid;

    min-height: 165px;

    align-content: center;
    justify-items: center;

    padding: 24px;

    text-align: center;
}


.icono-solicitudes-admin-vacio {
    display: grid;

    width: 48px;
    height: 48px;

    margin-bottom: 8px;

    place-items: center;

    color: #166534;

    font-size: 1.1rem;

    background-color: #dcfce7;

    border-radius: 13px;
}


.estado-solicitudes-admin-vacio h3 {
    margin: 0;

    color: var(--foro-texto);

    font-size: 0.88rem;

    font-weight: 750;
}


.estado-solicitudes-admin-vacio p {
    margin: 4px 0 0;

    color: var(--foro-secundario);

    font-size: 0.66rem;
}


/* ============================================================
   HISTÓRICO ADMIN
   ============================================================ */

.lista-historico-admin-chat {
    display: grid;

    gap: 8px;
}


.tarjeta-historico-admin-chat {
    padding: 11px 12px;

    background-color: #ffffff;

    border:
        1px solid
        #dbe4ed;

    border-radius: 11px;
}


.cabecera-historico-admin-chat {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}


.cabecera-historico-admin-chat
> div {
    display: grid;

    min-width: 0;

    gap: 3px;
}


.cabecera-historico-admin-chat strong {
    overflow-wrap: anywhere;

    color: var(--foro-texto);

    font-size: 0.73rem;

    font-weight: 730;
}


.cabecera-historico-admin-chat
> div
> span {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #8793a3;

    font-size: 0.57rem;
}


.datos-historico-admin-chat {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px 18px;

    margin-top: 8px;
}


.datos-historico-admin-chat
> span {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #738093;

    font-size: 0.59rem;
}


.datos-historico-admin-chat
> span
> span {
    color: #8996a5;
}


.datos-historico-admin-chat strong {
    color: #475569;

    font-weight: 680;
}


.observacion-historico-admin-chat {
    display: flex;

    align-items: flex-start;

    gap: 6px;

    margin-top: 9px;

    padding: 8px 9px;

    color: #526173;

    font-size: 0.61rem;

    line-height: 1.45;

    background-color: #f8fafc;

    border:
        1px solid
        #e5ebf1;

    border-radius: 8px;
}


.observacion-historico-admin-chat
> i {
    margin-top: 1px;

    color: var(--foro-azul-800);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    .acciones-solicitud-admin-chat {
        align-items: stretch;

        flex-direction: column;
    }


    .formulario-rechazo-solicitud-chat {
        min-width: 0;

        width: 100%;

        align-items: stretch;

        flex-direction: column;
    }


    .acciones-solicitud-admin-chat
    > form:last-child {
        width: 100%;
    }


    .acciones-solicitud-admin-chat
    > form:last-child
    .btn,
    .formulario-rechazo-solicitud-chat
    .btn {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .cabecera-historico-admin-chat {
        flex-direction: column;
    }


    .estado-solicitud-chat {
        align-self: flex-start;
    }


    .datos-historico-admin-chat {
        display: grid;

        gap: 4px;
    }
}


/* ============================================================
   SUBNEXO934 · CHAT · CORRECCIÓN RESPONSIVE MÓVIL
   Evita que Grid/Flex propaguen anchos mínimos y provoquen
   desbordamiento horizontal en pantallas estrechas.
   ============================================================ */

.pagina-chat-visual,
.pagina-chat-visual > *,
.layout-chat,
.layout-chat > *,
.cabecera-chat-visual,
.cabecera-chat-contenido,
.acciones-cabecera-chat,
.panel-salas-chat-visual,
.cabecera-panel-salas-chat,
.lista-salas-chat-visual,
.sala-chat-visual,
.contenido-sala-chat-visual,
.panel-chat-cabecera-visual,
.chat-sala-datos,
.acciones-sala-chat,
.panel-participantes-chat,
.panel-chat-visual {
    min-width: 0;
    max-width: 100%;
}

.pagina-chat-visual {
    width: 100%;
}

.cabecera-chat-contenido h1,
.cabecera-chat-contenido p,
.chat-sala-datos h2,
.chat-sala-datos p,
.contenido-sala-chat-visual strong,
.meta-sala-chat,
.participante-chat,
.nombre-participante-chat {
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .layout-chat {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .layout-chat .panel-participantes-chat {
        order: 1;
        max-height: none;
    }

    .layout-chat .panel-chat {
        order: 2;
    }

    .panel-participantes-chat .lista-participantes-chat {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.5rem;

        width: 100%;

        padding: 0.65rem;

        overflow: visible;
    }

    .panel-participantes-chat .participante-chat {
        display: flex;

        width: 100%;
        min-width: 0;

        align-items: center;

        gap: 0.55rem;

        padding: 0.5rem 0.6rem;

        border:
            1px solid
            var(--bs-border-color);

        border-radius: 0.7rem;

        background:
            var(--bs-body-bg);
    }

    .panel-participantes-chat .avatar-participante-chat {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;
    }

    .panel-participantes-chat .datos-participante-chat {
        min-width: 0;

        overflow: hidden;
    }

    .panel-participantes-chat .nombre-participante-chat {
        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .panel-participantes-chat .estado-participante-chat {
        min-width: 0;

        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .panel-participantes-chat .lista-participantes-chat {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .cabecera-chat-visual {
        padding: 16px;
    }

    .panel-salas-chat-visual {
        padding: 8px;
    }

    .panel-chat-cabecera-visual {
        padding: 12px;
    }

    .zona-escribir-chat {
        padding: 0.7rem;
    }

    .lista-mensajes-chat {
        padding: 0.7rem;
    }

    .mensaje-chat {
        min-width: 0;
    }

    .cuerpo-mensaje-chat {
        min-width: 0;
        max-width: 100%;
    }
}