:root {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #1f2937;
    background-color: #f3f4f6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.contenedor {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
}

.cabecera {
    padding: 24px 0;
    color: #ffffff;
    background-color: #1f3a5f;
}

.cabecera h1 {
    margin: 0 0 6px;
}

.cabecera p {
    margin: 0;
}

.contenido-principal {
    padding-top: 32px;
    padding-bottom: 32px;
}

.panel {
    padding: 24px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgb(0 0 0 / 8%);
}

.panel h2 {
    margin-top: 0;
}
.cabecera-interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.usuario-cabecera {
    display: flex;
    align-items: center;
    gap: 16px;
}

.usuario-cabecera form {
    margin: 0;
}

.boton-salir {
    padding: 9px 14px;
    color: #ffffff;
    font: inherit;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: 8px;
}

.boton-salir:hover {
    background-color: rgb(255 255 255 / 12%);
}

.mensajes {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.mensaje {
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.mensaje-success {
    color: #166534;
    background-color: #dcfce7;
    border-color: #86efac;
}

.mensaje-danger {
    color: #991b1b;
    background-color: #fee2e2;
    border-color: #fca5a5;
}

.mensaje-warning {
    color: #854d0e;
    background-color: #fef9c3;
    border-color: #fde047;
}

.mensaje-info {
    color: #1e40af;
    background-color: #dbeafe;
    border-color: #93c5fd;
}

.panel-login {
    width: min(460px, 100%);
    margin: 0 auto;
}

.encabezado-formulario {
    margin-bottom: 24px;
}

.encabezado-formulario h2 {
    margin-bottom: 8px;
}

.encabezado-formulario p {
    margin: 0;
    color: #64748b;
}

.formulario {
    display: grid;
    gap: 20px;
}

.campo {
    display: grid;
    gap: 8px;
}

.campo label {
    font-weight: 600;
}

.control {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: #1f2937;
    font: inherit;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.control:focus {
    border-color: #2563eb;
    outline: 3px solid rgb(37 99 235 / 15%);
}

.campo-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.boton {
    min-height: 44px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
}

.boton-principal {
    color: #ffffff;
    background-color: #1f3a5f;
}

.boton-principal:hover {
    background-color: #162d4b;
}

.error-campo {
    margin: 0;
    color: #b91c1c;
    font-size: 0.9rem;
}

.datos-usuario {
    display: grid;
    gap: 12px;
    margin: 24px 0;
}

.datos-usuario div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.datos-usuario dt {
    font-weight: 700;
}

.datos-usuario dd {
    margin: 0;
}

.texto-secundario {
    color: #64748b;
}

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

    .usuario-cabecera {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .datos-usuario div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.zona-usuario {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
}

.navegacion-principal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.navegacion-principal a {
    padding: 7px 10px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 7px;
}

.navegacion-principal a:hover {
    background-color: rgb(255 255 255 / 14%);
}

.panel-encabezado {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.panel-encabezado h2 {
    margin-bottom: 7px;
}

.panel-encabezado p {
    margin: 0;
    color: #64748b;
}

.lista-miembros {
    display: grid;
    gap: 14px;
}

.tarjeta-miembro {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.avatar-miembro {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    color: #ffffff;
    font-weight: 700;
    background-color: #1f3a5f;
    border-radius: 50%;
}

.avatar-grande {
    width: 72px;
    height: 72px;
    font-size: 1.25rem;
}

.datos-miembro {
    min-width: 0;
    flex: 1;
}

.datos-miembro h3 {
    margin: 0 0 5px;
}

.datos-miembro h3 a {
    color: #1f2937;
    text-decoration: none;
}

.datos-miembro h3 a:hover {
    text-decoration: underline;
}

.datos-miembro p {
    margin: 0 0 8px;
    color: #64748b;
}

.etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.etiqueta {
    display: inline-flex;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
}

.etiqueta-admin {
    color: #1e40af;
    background-color: #dbeafe;
}

.etiqueta-inactivo {
    color: #991b1b;
    background-color: #fee2e2;
}

.boton-secundario {
    color: #1f3a5f;
    text-decoration: none;
    background-color: #e2e8f0;
}

.boton-secundario:hover {
    background-color: #cbd5e1;
}

.perfil-cabecera {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.perfil-cabecera h2 {
    margin: 0 0 6px;
}

.perfil-cabecera p {
    margin: 0 0 10px;
    color: #64748b;
}

.datos-perfil {
    display: grid;
    gap: 0;
    margin: 24px 0;
}

.datos-perfil div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #e2e8f0;
}

.datos-perfil dt {
    font-weight: 700;
}

.datos-perfil dd {
    margin: 0;
}

.datos-perfil a {
    color: #1d4ed8;
}

.dato-privado {
    color: #64748b;
    font-style: italic;
}

.panel-formulario {
    width: min(850px, 100%);
    margin: 0 auto;
}

.rejilla-formulario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.bloque-privacidad {
    display: grid;
    gap: 14px;
    padding: 18px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.bloque-privacidad h3 {
    margin: 0;
}

.bloque-privacidad p {
    margin: 0;
    color: #64748b;
}

.acciones {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 750px) {
    .zona-usuario {
        width: 100%;
        align-items: flex-start;
    }

    .tarjeta-miembro {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tarjeta-miembro .boton {
        width: 100%;
        text-align: center;
    }

    .rejilla-formulario {
        grid-template-columns: 1fr;
    }

    .datos-perfil div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

.panel-separado {
    margin-top: 24px;
}

.formulario-invitacion {
    padding: 18px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.tabla-responsive {
    width: 100%;
    overflow-x: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
}

.tabla th,
.tabla td {
    padding: 13px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
}

.tabla th {
    color: #475569;
    font-size: 0.9rem;
    background-color: #f8fafc;
}

.tabla form {
    margin: 0;
}

.etiqueta-pendiente {
    color: #1e40af;
    background-color: #dbeafe;
}

.etiqueta-utilizada {
    color: #166534;
    background-color: #dcfce7;
}

.etiqueta-revocada {
    color: #991b1b;
    background-color: #fee2e2;
}

.etiqueta-caducada {
    color: #854d0e;
    background-color: #fef9c3;
}

.boton-peligro {
    color: #ffffff;
    background-color: #b91c1c;
}

.boton-peligro:hover {
    background-color: #991b1b;
}

.boton-pequeno {
    min-height: auto;
    padding: 7px 10px;
    font-size: 0.88rem;
}

.control-enlace {
    min-height: 100px;
    resize: vertical;
}

.aviso-seguridad {
    margin-top: 18px;
    padding: 14px 16px;
    color: #854d0e;
    background-color: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 8px;
}

.correo-invitado {
    margin-bottom: 22px;
    padding: 14px 16px;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.lista-categorias {
    display: grid;
    gap: 14px;
}

.tarjeta-categoria {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.tarjeta-categoria-inactiva {
    opacity: 0.68;
    background-color: #f8fafc;
}

.categoria-orden {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    color: #1f3a5f;
    font-weight: 700;
    background-color: #e2e8f0;
    border-radius: 10px;
}

.categoria-contenido {
    min-width: 0;
    flex: 1;
}

.categoria-titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.categoria-titulo h3 {
    margin: 0;
}

.categoria-contenido p {
    margin: 7px 0;
}

.acciones-categoria {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.acciones-categoria form {
    margin: 0;
}

.control-textarea {
    min-height: 120px;
    resize: vertical;
}

.campo-orden {
    width: min(220px, 100%);
}

.estado-vacio {
    padding: 36px 20px;
    text-align: center;
    color: #64748b;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}

.estado-vacio h3 {
    margin-top: 0;
    color: #334155;
}

@media (max-width: 750px) {
    .panel-encabezado {
        flex-direction: column;
    }

    .panel-encabezado .boton {
        width: 100%;
        text-align: center;
    }

    .tarjeta-categoria {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .categoria-contenido {
        width: calc(100% - 66px);
    }

    .acciones-categoria {
        width: 100%;
        justify-content: flex-end;
    }
}

.pagina-error {
    width: min(650px, 100%);
    margin: 40px auto;
    padding: 48px 28px;
    text-align: center;
}

.icono-error {
    display: grid;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    place-items: center;
    color: #1f3a5f;
    font-size: 2.5rem;
    background-color: #e8eef5;
    border-radius: 50%;
}

.codigo-error {
    margin-bottom: 8px;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pagina-error h2 {
    margin-bottom: 14px;
}

.pagina-error > p:not(.codigo-error) {
    max-width: 500px;
    margin-right: auto;
    margin-bottom: 24px;
    margin-left: auto;
    color: #64748b;
}

.acciones-error {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.enlace-categoria {
    color: #1f2937;
    text-decoration: none;
}

.enlace-categoria:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.lista-temas {
    display: grid;
    gap: 12px;
}

.tarjeta-tema {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.icono-tema {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    color: #1f3a5f;
    font-size: 1.2rem;
    background-color: #e8eef5;
    border-radius: 10px;
}

.contenido-tema {
    min-width: 0;
    flex: 1;
}

.titulo-tema {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.titulo-tema h3,
.contenido-tema h3 {
    margin: 0;
    font-size: 1.05rem;
}

.titulo-tema a {
    color: #1f2937;
    text-decoration: none;
}

.titulo-tema a:hover {
    text-decoration: underline;
}

.meta-tema {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.etiqueta-tema-pendiente {
    color: #854d0e;
    background-color: #fef9c3;
}

.etiqueta-tema-aprobado {
    color: #166534;
    background-color: #dcfce7;
}

.etiqueta-tema-devuelto {
    color: #9a3412;
    background-color: #ffedd5;
}

.etiqueta-tema-rechazado {
    color: #991b1b;
    background-color: #fee2e2;
}

.etiqueta-tema-cerrado {
    color: #475569;
    background-color: #e2e8f0;
}

.tema-textarea {
    min-height: 280px;
}

.cabecera-tema {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.cabecera-tema h2 {
    margin-bottom: 8px;
}

.mensaje-tema {
    margin-top: 24px;
    padding: 20px;
    line-height: 1.7;
    white-space: pre-wrap;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.revision-tema {
    padding: 20px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.revision-tema h3 {
    margin-top: 0;
}

.revision-tema .mensaje-tema {
    margin-top: 16px;
    background-color: #ffffff;
}

.revision-acciones {
    justify-content: space-between;
}

@media (max-width: 750px) {
    .tarjeta-tema {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tarjeta-tema > .btn {
        width: 100%;
    }

    .cabecera-tema {
        flex-direction: column;
    }

    .revision-acciones {
        align-items: stretch;
        flex-direction: column;
    }

    .revision-acciones .btn {
        width: 100%;
    }
}

.acciones-tema-superiores {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.acciones-tema-superiores form {
    margin: 0;
}

.publicacion-foro {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
}

.publicacion-inicial {
    margin-top: 24px;
}

.autor-publicacion {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    padding: 22px 16px;
    text-align: center;
    background-color: #f1f5f9;
    border-right: 1px solid #dbe3ec;
}

.autor-publicacion strong {
    color: #1f2937;
}

.autor-publicacion > span:not(.etiqueta) {
    color: #64748b;
    font-size: 0.88rem;
}

.cuerpo-publicacion {
    min-width: 0;
    padding: 20px;
    background-color: #ffffff;
}

.fecha-publicacion {
    margin-bottom: 16px;
    color: #64748b;
    font-size: 0.86rem;
}

.texto-publicacion {
    overflow-wrap: anywhere;
    line-height: 1.7;
    white-space: pre-wrap;
}

.lista-respuestas {
    display: grid;
    gap: 16px;
}

.cabecera-respuesta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.cabecera-respuesta .fecha-publicacion {
    margin: 0;
}

.respuesta-textarea {
    min-height: 180px;
}

.resumen-respuestas {
    margin: 7px 0 0;
    color: #475569;
    font-size: 0.88rem;
}

.resumen-respuestas i {
    margin-right: 4px;
}

@media (max-width: 750px) {
    .acciones-tema-superiores {
        width: 100%;
    }

    .acciones-tema-superiores > a,
    .acciones-tema-superiores form,
    .acciones-tema-superiores button {
        width: 100%;
    }

    .publicacion-foro {
        grid-template-columns: 1fr;
    }

    .autor-publicacion {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: left;
        border-right: 0;
        border-bottom: 1px solid #dbe3ec;
    }

    .autor-publicacion .avatar-miembro {
        margin-right: 4px;
    }

    .cabecera-respuesta {
        align-items: flex-start;
        flex-direction: column;
    }
}

.bloque-adjuntos {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.bloque-adjuntos h4 {
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.lista-adjuntos {
    display: grid;
    gap: 8px;
}

.adjunto {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.adjunto > a {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    color: #1d4ed8;
    text-decoration: none;
}

.adjunto > a:hover {
    text-decoration: underline;
}

.adjunto > span {
    color: #64748b;
    font-size: 0.82rem;
    white-space: nowrap;
}

.adjunto form {
    margin: 0;
}

@media (max-width: 600px) {
    .adjunto {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .adjunto > a {
        width: 100%;
        flex-basis: 100%;
    }
}

.boton-eliminar-adjunto {
    display: inline-grid;
    width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    padding: 0;
    place-items: center;
    line-height: 1;
    border-radius: 8px;
}

.boton-eliminar-adjunto i {
    display: block;
    font-size: 1rem;
    line-height: 1;
}

.tabla-usuarios td {
    min-width: 130px;
}

.tabla-usuarios td:first-child {
    min-width: 230px;
}

.tabla-usuarios td:last-child {
    min-width: 320px;
}

.etiqueta-admin-temporal {
    color: #6b21a8;
    background-color: #f3e8ff;
}

.dato-secundario {
    margin-top: 5px;
    color: #64748b;
    font-size: 0.8rem;
}

.acciones-usuario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.acciones-usuario form {
    margin: 0;
}

.form-admin-temporal {
    display: grid;
    grid-template-columns: 85px minmax(150px, 1fr);
    gap: 10px;
    align-items: end;
    width: 100%;
    padding: 12px;
    background-color: #f8fafc;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    box-sizing: border-box;
}

.form-admin-temporal > div {
    min-width: 0;
}

.form-admin-temporal .form-control {
    width: 100%;
    min-width: 0;
}

.form-admin-temporal > button {
    grid-column: 1 / -1;
    width: 100%;
}

.form-admin-temporal .form-label {
    margin-bottom: 4px;
    font-size: 0.8rem;
}

@media (max-width: 750px) {
    .form-admin-temporal {
        grid-template-columns: 1fr;
    }

    .form-admin-temporal .btn {
        width: 100%;
    }
}

.enlace-recuperacion {
    margin-top: 14px;
    text-align: center;
}

.enlace-recuperacion a {
    font-size: 0.9rem;
    text-decoration: none;
}

.enlace-recuperacion a:hover {
    text-decoration: underline;
}

.aviso-password {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.acciones-password {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 600px) {
    .aviso-password {
        align-items: stretch;
        flex-direction: column;
    }

    .aviso-password .btn {
        width: 100%;
    }

    .acciones-password .btn {
        width: 100%;
    }
}

.etiqueta-password-pendiente {
    color: #92400e;
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    white-space: nowrap;
}

.etiqueta-bloqueado {
    color: #991b1b;
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    white-space: nowrap;
}

.etiqueta-intentos {
    color: #854d0e;
    background-color: #fef9c3;
    border: 1px solid #fde047;
    white-space: nowrap;
}



/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 1: estructura general, cabecera e inicio
   ========================================================= */

:root {
    --foro-azul-950: #102947;
    --foro-azul-900: #17365d;
    --foro-azul-800: #20466f;
    --foro-azul-100: #e9f0f8;
    --foro-fondo: #f5f7fa;
    --foro-panel: #ffffff;
    --foro-texto: #172033;
    --foro-secundario: #64748b;
    --foro-borde: #e2e8f0;
    --foro-sombra:
        0 8px 24px rgb(15 23 42 / 6%);
    --foro-radio: 14px;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

html {
    min-height: 100%;
    background-color: var(--foro-fondo);
}

body {
    min-height: 100vh;
    color: var(--foro-texto);
    background-color: var(--foro-fondo);
    font-size: 0.94rem;
}

/* Cabecera principal */

.cabecera {
    display: none;
}

.barra-superior {
    position: sticky;
    z-index: 1020;
    top: 0;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-950),
            var(--foro-azul-900)
        );
    box-shadow:
        0 2px 12px rgb(15 23 42 / 16%);
}

.barra-superior-interior {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.marca-foro {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
}

.marca-foro:hover {
    color: #ffffff;
}

.marca-foro-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    padding: 2px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgb(15 23 42 / 18%);
}

.marca-foro-icono img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.75);
}

.marca-foro-texto {
    display: grid;
    line-height: 1.1;
}

.marca-foro-texto strong {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.marca-foro-texto small {
    margin-top: 4px;
    color: rgb(255 255 255 / 68%);
    font-size: 0.68rem;
    font-weight: 500;
}

.navegacion-escritorio {
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.navegacion-escritorio > a,
.boton-navegacion {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: rgb(255 255 255 / 82%);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 9px;
}

.navegacion-escritorio > a:hover,
.boton-navegacion:hover,
.navegacion-escritorio > a.activo,
.boton-navegacion.activo {
    color: #ffffff;
    background-color: rgb(255 255 255 / 13%);
}

.zona-cuenta {
    display: flex;
    align-items: center;
}

.boton-cuenta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
    color: #ffffff;
    font: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.boton-cuenta:hover,
.boton-cuenta[aria-expanded="true"] {
    background-color: rgb(255 255 255 / 12%);
}

.avatar-cabecera {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: var(--foro-azul-900);
    font-size: 0.76rem;
    font-weight: 800;
    background-color: #ffffff;
    border-radius: 50%;
}

.datos-cuenta-cabecera {
    display: grid;
    max-width: 140px;
    line-height: 1.1;
}

.datos-cuenta-cabecera strong,
.datos-cuenta-cabecera small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datos-cuenta-cabecera strong {
    font-size: 0.82rem;
}

.datos-cuenta-cabecera small {
    margin-top: 4px;
    color: rgb(255 255 255 / 65%);
    font-size: 0.67rem;
}

.menu-desplegable-foro {
    min-width: 230px;
    padding: 7px;
    border: 1px solid var(--foro-borde);
    border-radius: 12px;
    box-shadow:
        0 14px 34px rgb(15 23 42 / 15%);
}

.menu-desplegable-foro .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: var(--foro-texto);
    font-size: 0.87rem;
    border-radius: 8px;
}

.menu-desplegable-foro .dropdown-item:hover {
    color: var(--foro-azul-900);
    background-color: var(--foro-azul-100);
}

.menu-desplegable-foro form {
    margin: 0;
}

.cabecera-menu-cuenta {
    display: grid;
    padding: 7px 10px;
}

.cabecera-menu-cuenta strong {
    font-size: 0.88rem;
}

.cabecera-menu-cuenta small {
    margin-top: 3px;
    color: var(--foro-secundario);
    font-size: 0.72rem;
}

.dropdown-item-salir {
    width: 100%;
    color: #b91c1c !important;
    background: transparent;
    border: 0;
}

.boton-menu-movil {
    width: 40px;
    height: 40px;
    place-items: center;
    color: #ffffff;
    font-size: 1.5rem;
    background-color: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 10px;
}

/* Menú móvil */

.menu-movil {
    width: min(340px, 90vw) !important;
}

.menu-movil .offcanvas-header {
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid var(--foro-borde);
}

.menu-movil .offcanvas-title {
    margin: 0;
    color: var(--foro-azul-900);
    font-size: 1.1rem;
    font-weight: 800;
}

.menu-movil .offcanvas-header p {
    margin: 4px 0 0;
    color: var(--foro-secundario);
    font-size: 0.8rem;
}

.menu-movil .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.navegacion-movil {
    display: grid;
    gap: 3px;
}

.navegacion-movil a {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--foro-texto);
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
}

.navegacion-movil a:hover {
    color: var(--foro-azul-900);
    background-color: var(--foro-azul-100);
}

.navegacion-movil a i {
    width: 20px;
    color: var(--foro-azul-800);
    font-size: 1.05rem;
    text-align: center;
}

.separador-menu-movil {
    margin: 16px 10px 6px;
    color: var(--foro-secundario);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.formulario-salir-movil {
    margin-top: auto;
    padding-top: 22px;
}

/* Contenido y paneles */

.contenido-principal {
    padding-top: 22px;
    padding-bottom: 34px;
}

.panel {
    padding: 20px;
    border: 1px solid rgb(226 232 240 / 80%);
    border-radius: var(--foro-radio);
    box-shadow: var(--foro-sombra);
}

.panel-separado {
    margin-top: 18px;
}

.panel-encabezado {
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-encabezado h2 {
    margin-bottom: 4px;
    font-size: 1.45rem;
    font-weight: 750;
}

.panel-encabezado p {
    font-size: 0.9rem;
}

.panel-compacto {
    padding: 18px;
}

.panel-titulo-compacto {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.panel-titulo-compacto h2 {
    margin: 2px 0 0;
    font-size: 1.05rem;
    font-weight: 750;
}

.eyebrow,
.saludo-inicio {
    color: var(--foro-azul-800);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Inicio */

.inicio-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-bottom: 18px;
    padding: 22px 24px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-950),
            var(--foro-azul-800)
        );
    border-radius: 16px;
    box-shadow:
        0 12px 28px rgb(15 23 42 / 13%);
}

.inicio-cabecera .saludo-inicio {
    color: rgb(255 255 255 / 68%);
}

.inicio-cabecera h1 {
    margin: 5px 0 5px;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 760;
}

.inicio-cabecera p {
    max-width: 650px;
    margin: 0;
    color: rgb(255 255 255 / 75%);
    font-size: 0.9rem;
}

.identidad-inicio {
    display: flex;
    min-width: 230px;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background-color: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 13px;
}

.avatar-inicio {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--foro-azul-900);
    font-size: 0.82rem;
    font-weight: 800;
    background-color: #ffffff;
    border-radius: 50%;
}

.identidad-inicio > div:last-child {
    display: grid;
    min-width: 0;
}

.identidad-inicio strong,
.identidad-inicio span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identidad-inicio strong {
    font-size: 0.83rem;
}

.identidad-inicio span {
    margin-top: 3px;
    color: rgb(255 255 255 / 68%);
    font-size: 0.72rem;
}

.rejilla-accesos {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tarjeta-acceso {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 15px;
    color: var(--foro-texto);
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 13px;
    box-shadow:
        0 4px 14px rgb(15 23 42 / 4%);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.tarjeta-acceso:hover {
    color: var(--foro-texto);
    border-color: #b9c9dc;
    box-shadow:
        0 8px 20px rgb(15 23 42 / 8%);
    transform: translateY(-2px);
}

.icono-acceso {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: var(--foro-azul-800);
    font-size: 1rem;
    background-color: var(--foro-azul-100);
    border-radius: 11px;
}

.contenido-acceso {
    display: grid;
    min-width: 0;
    flex: 1;
}

.contenido-acceso strong {
    font-size: 0.9rem;
}

.contenido-acceso small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--foro-secundario);
    font-size: 0.72rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.flecha-acceso {
    color: #94a3b8;
    font-size: 0.8rem;
}

.tarjeta-acceso-destacada .icono-acceso {
    color: #854d0e;
    background-color: #fef3c7;
}

.rejilla-inicio-secundaria {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.datos-inicio {
    display: grid;
    gap: 0;
    margin: 0;
}

.datos-inicio div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--foro-borde);
}

.datos-inicio div:last-child {
    border-bottom: 0;
}

.datos-inicio dt {
    color: var(--foro-secundario);
    font-size: 0.78rem;
    font-weight: 600;
}

.datos-inicio dd {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
}

.estado-seguridad {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 700;
    background-color: #dcfce7;
    border-radius: 999px;
}

.lista-seguridad-inicio {
    display: grid;
    gap: 9px;
}

.lista-seguridad-inicio > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: var(--foro-secundario);
    font-size: 0.79rem;
}

.lista-seguridad-inicio i {
    margin-top: 1px;
    color: var(--foro-azul-800);
}

.enlace-panel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--foro-azul-800);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

/* Ajustes compactos globales iniciales */

.formulario {
    gap: 16px;
}

.encabezado-formulario {
    margin-bottom: 18px;
}

.acciones {
    gap: 9px;
    margin-top: 18px;
}

.control {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.9rem;
}

.boton {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.88rem;
}

.estado-vacio {
    padding: 28px 18px;
}

/* Responsive */

@media (max-width: 1199px) {
    .rejilla-accesos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .barra-superior-interior {
        min-height: 60px;
    }

    .marca-foro-texto small {
        display: none;
    }

    .contenido-principal {
        padding-top: 16px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 0.9rem;
    }

    .contenido-principal {
        width: 100%;
        max-width: none;
        padding-right: 12px;
        padding-bottom: 24px;
        padding-left: 12px;
    }

    .panel {
        padding: 15px;
        border-radius: 12px;
    }

    .inicio-cabecera {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 19px;
    }

    .identidad-inicio {
        width: 100%;
        min-width: 0;
    }

    .rejilla-inicio-secundaria {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .panel-titulo-compacto {
        align-items: flex-start;
    }
}

@media (max-width: 575px) {
    .marca-foro-icono {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .marca-foro-texto strong {
        font-size: 0.95rem;
    }

    .rejilla-accesos {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .tarjeta-acceso {
        padding: 12px;
    }

    .contenido-acceso small {
        -webkit-line-clamp: 1;
    }

    .datos-inicio div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }

    .panel-titulo-compacto {
        flex-wrap: wrap;
    }
}


/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 2: apartados, temas y paginación
   ========================================================= */

.cabecera-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.cabecera-pagina h1 {
    margin: 3px 0 4px;
    color: var(--foro-texto);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 760;
}

.cabecera-pagina p {
    max-width: 760px;
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.86rem;
}

.panel-listado {
    padding: 10px;
}

.lista-apartados-compacta,
.lista-temas-compacta {
    display: grid;
    gap: 7px;
}

.apartado-compacto,
.tema-compacto {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 11px;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.apartado-compacto:hover,
.tema-compacto:hover {
    background-color: #f8fafc;
    border-color: #d7e0eb;
    transform: translateY(-1px);
}

.apartado-compacto + .apartado-compacto,
.tema-compacto + .tema-compacto {
    border-top-color: #edf1f5;
}

.enlace-cubrir-tarjeta {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
}

.icono-apartado,
.icono-tema-compacto {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: var(--foro-azul-800);
    font-size: 0.95rem;
    background-color: var(--foro-azul-100);
    border-radius: 10px;
}

.contenido-apartado,
.contenido-tema-compacto {
    min-width: 0;
    flex: 1;
}

.titulo-apartado,
.titulo-tema-compacto {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.titulo-apartado h2,
.titulo-tema-compacto h2 {
    overflow: hidden;
    margin: 0;
    color: var(--foro-texto);
    font-size: 0.94rem;
    font-weight: 720;
    text-overflow: ellipsis;
}

.contenido-apartado > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 3px 0 0;
    color: var(--foro-secundario);
    font-size: 0.78rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.meta-apartado,
.meta-tema-compacta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 5px;
    color: var(--foro-secundario);
    font-size: 0.7rem;
}

.meta-apartado span,
.meta-tema-compacta span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.lateral-apartado,
.estadisticas-tema {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.acciones-apartado-compactas {
    display: flex;
    gap: 5px;
}

.acciones-apartado-compactas form {
    margin: 0;
}

.acciones-apartado-compactas .btn {
    display: inline-grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
}

.flecha-apartado,
.flecha-tema {
    color: #94a3b8;
    font-size: 0.76rem;
}

.apartado-compacto-inactivo {
    opacity: 0.65;
    background-color: #f8fafc;
}

/* Listado de temas */

.ruta-compacta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--foro-secundario);
    font-size: 0.76rem;
}

.ruta-compacta a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--foro-azul-800);
    font-weight: 650;
    text-decoration: none;
}

.ruta-compacta > i {
    font-size: 0.62rem;
}

.barra-listado-temas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: -2px 2px 8px;
    padding: 7px 8px 10px;
    color: var(--foro-secundario);
    font-size: 0.72rem;
    border-bottom: 1px solid var(--foro-borde);
}

.barra-listado-temas > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.barra-listado-temas strong {
    color: var(--foro-texto);
    font-size: 0.84rem;
}

.icono-tema-cerrado {
    color: #475569;
    background-color: #e2e8f0;
}

.icono-tema-pendiente {
    color: #854d0e;
    background-color: #fef3c7;
}

.meta-tema-compacta {
    margin-top: 4px;
}

.estadisticas-tema > span {
    display: inline-flex;
    min-width: 48px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    color: var(--foro-secundario);
    font-size: 0.72rem;
    background-color: #f1f5f9;
    border-radius: 999px;
}

.estado-vacio-compacto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 26px 18px;
    text-align: left;
}

.estado-vacio-compacto > i {
    color: var(--foro-azul-800);
    font-size: 1.7rem;
}

.estado-vacio-compacto h2 {
    margin: 0 0 3px;
    font-size: 1rem;
}

.estado-vacio-compacto p {
    margin: 0;
    font-size: 0.8rem;
}

/* Paginación */

.paginacion-foro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--foro-borde);
}

.numeros-paginacion {
    display: flex;
    align-items: center;
    gap: 4px;
}

.boton-pagina {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--foro-secundario);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 9px;
}

.boton-pagina:hover {
    color: var(--foro-azul-900);
    background-color: var(--foro-azul-100);
    border-color: #c2d1e2;
}

.boton-pagina-activo {
    color: #ffffff;
    background-color: var(--foro-azul-900);
    border-color: var(--foro-azul-900);
}

.boton-pagina-deshabilitado {
    pointer-events: none;
    opacity: 0.38;
}

.paginacion-puntos {
    padding: 0 4px;
    color: var(--foro-secundario);
}

/* Responsive */

@media (max-width: 767px) {
    .cabecera-pagina {
        align-items: stretch;
        flex-direction: column;
        gap: 11px;
    }

    .cabecera-pagina > .btn {
        width: 100%;
    }

    .panel-listado {
        padding: 7px;
    }

    .apartado-compacto,
    .tema-compacto {
        align-items: flex-start;
        gap: 10px;
        padding: 11px 9px;
    }

    .lateral-apartado {
        align-self: center;
    }

    .acciones-apartado-compactas {
        display: none;
    }

    .meta-apartado span:nth-child(2) {
        display: none;
    }

    .estadisticas-tema {
        align-self: center;
    }

    .meta-tema-compacta {
        display: grid;
        gap: 2px;
    }

    .barra-listado-temas > span {
        display: none;
    }
}

@media (max-width: 480px) {
    .icono-apartado,
    .icono-tema-compacto {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .titulo-apartado h2,
    .titulo-tema-compacto h2 {
        max-width: 100%;
        font-size: 0.88rem;
        white-space: normal;
    }

    .contenido-apartado > p {
        -webkit-line-clamp: 2;
    }

    .estadisticas-tema > span {
        min-width: auto;
        padding: 4px 7px;
    }

    .flecha-tema {
        display: none;
    }

    .numeros-paginacion .boton-pagina {
        display: none;
    }

    .numeros-paginacion .boton-pagina-activo {
        display: inline-grid;
    }
}


/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 3: detalle del tema y respuestas
   ========================================================= */

.cabecera-detalle-tema {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 14px;
}

.cabecera-detalle-contenido {
    min-width: 0;
    flex: 1;
}

.estado-detalle-tema {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 7px;
}

.contador-respuestas-cabecera {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--foro-secundario);
    font-size: 0.73rem;
    font-weight: 600;
}

.cabecera-detalle-tema h1 {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--foro-texto);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 760;
    line-height: 1.2;
}

.meta-detalle-tema {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 15px;
    margin-top: 8px;
    color: var(--foro-secundario);
    font-size: 0.75rem;
}

.meta-detalle-tema span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.acciones-detalle-tema {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.acciones-detalle-tema form {
    margin: 0;
}

.aviso-revision-compacto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 13px;
    font-size: 0.82rem;
    border: 1px solid;
    border-radius: 11px;
}

.aviso-revision-compacto > i {
    margin-top: 1px;
}

.aviso-revision-compacto strong {
    display: block;
    margin-bottom: 2px;
}

.aviso-revision-compacto p {
    margin: 0;
}

.aviso-revision-error {
    color: #991b1b;
    background-color: #fef2f2;
    border-color: #fecaca;
}

.aviso-revision-warning {
    color: #854d0e;
    background-color: #fffbeb;
    border-color: #fde68a;
}

.aviso-revision-info {
    color: #1e40af;
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.panel-conversacion {
    padding: 10px;
}

.publicacion-compacta {
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 13px;
    box-shadow:
        0 4px 14px rgb(15 23 42 / 4%);
}

.publicacion-principal {
    border-color: #cad8e8;
}

.cabecera-publicacion-compacta {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 13px;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--foro-borde);
}

.autor-horizontal {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.avatar-publicacion {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-900),
            var(--foro-azul-800)
        );
    border-radius: 50%;
}

.datos-autor-horizontal {
    display: grid;
    min-width: 0;
}

.nombre-autor-horizontal {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nombre-autor-horizontal strong {
    overflow: hidden;
    color: var(--foro-texto);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nombre-autor-horizontal .etiqueta {
    padding: 2px 6px;
    font-size: 0.62rem;
}

.datos-autor-horizontal > span {
    overflow: hidden;
    margin-top: 2px;
    color: var(--foro-secundario);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datos-publicacion-derecha {
    display: grid;
    flex: 0 0 auto;
    text-align: right;
}

.datos-publicacion-derecha span {
    color: var(--foro-texto);
    font-size: 0.7rem;
    font-weight: 700;
}

.datos-publicacion-derecha time {
    margin-top: 2px;
    color: var(--foro-secundario);
    font-size: 0.67rem;
}

.contenido-publicacion-compacta {
    padding: 15px;
}

.contenido-publicacion-compacta .texto-publicacion {
    color: #263246;
    font-size: 0.88rem;
    line-height: 1.62;
}

.accion-revisar-tema {
    display: flex;
    justify-content: flex-end;
    padding: 10px 2px 1px;
}

/* Respuestas */

.bloque-respuestas {
    margin-top: 18px;
}

.cabecera-seccion-compacta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 0 3px;
}

.cabecera-seccion-compacta h2 {
    margin: 2px 0 0;
    font-size: 1.2rem;
    font-weight: 750;
}

.contador-seccion {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    place-items: center;
    color: var(--foro-azul-900);
    font-size: 0.76rem;
    font-weight: 800;
    background-color: var(--foro-azul-100);
    border-radius: 999px;
}

.lista-respuestas-compacta {
    display: grid;
    gap: 10px;
}

.acciones-publicacion-compacta {
    display: flex;
    align-items: center;
    gap: 9px;
}

.fecha-publicacion-compacta {
    display: grid;
    text-align: right;
}

.fecha-publicacion-compacta time {
    color: var(--foro-secundario);
    font-size: 0.68rem;
}

.fecha-publicacion-compacta span {
    margin-top: 2px;
    color: #7c3aed;
    font-size: 0.62rem;
    font-weight: 700;
}

/* Botones de icono */

.boton-icono {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    place-items: center;
    color: var(--foro-secundario);
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 8px;
}

.boton-icono:hover {
    color: var(--foro-azul-900);
    background-color: var(--foro-azul-100);
}

.boton-icono-neutro {
    color: #475569;
}

.boton-icono-peligro {
    color: #b91c1c;
    background-color: transparent;
    border-color: #fecaca;
}

.boton-icono-peligro:hover {
    color: #991b1b;
    background-color: #fef2f2;
}

/* Adjuntos */

.adjuntos-compactos {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--foro-borde);
}

.titulo-adjuntos-compactos {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: var(--foro-secundario);
    font-size: 0.72rem;
}

.titulo-adjuntos-compactos strong {
    color: var(--foro-texto);
}

.titulo-adjuntos-compactos span {
    display: grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    color: var(--foro-azul-900);
    font-size: 0.62rem;
    font-weight: 800;
    background-color: var(--foro-azul-100);
    border-radius: 999px;
}

.lista-adjuntos-compacta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.adjunto-compacto {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 7px;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 9px;
}

.adjunto-compacto > a {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
    color: var(--foro-texto);
    text-decoration: none;
}

.adjunto-compacto > a:hover strong {
    color: var(--foro-azul-800);
}

.icono-adjunto {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    color: var(--foro-azul-800);
    font-size: 0.83rem;
    background-color: var(--foro-azul-100);
    border-radius: 8px;
}

.datos-adjunto {
    display: grid;
    min-width: 0;
    flex: 1;
}

.datos-adjunto strong {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datos-adjunto small {
    margin-top: 2px;
    color: var(--foro-secundario);
    font-size: 0.62rem;
}

.adjunto-compacto form {
    margin: 0;
}

.adjunto-compacto .boton-icono {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
}

/* Formulario de respuesta */

.panel-respuesta {
    margin-top: 18px;
    padding: 17px;
}

.cabecera-formulario-respuesta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
}

.cabecera-formulario-respuesta h2 {
    margin: 2px 0 2px;
    font-size: 1.08rem;
    font-weight: 750;
}

.cabecera-formulario-respuesta p {
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.77rem;
}

.icono-responder {
    color: #cbd5e1;
    font-size: 1.6rem;
}

.formulario-respuesta-compacto {
    gap: 12px;
}

.formulario-respuesta-compacto .respuesta-textarea {
    min-height: 125px;
}

.fila-adjuntos-respuesta {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.campo-adjuntos-respuesta {
    min-width: 0;
}

.accion-publicar-respuesta {
    padding-bottom: 1px;
}

.accion-publicar-respuesta .btn {
    min-width: 140px;
}

.tema-cerrado-compacto {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    color: #475569;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 10px;
}

.tema-cerrado-compacto > i {
    font-size: 1.2rem;
}

.tema-cerrado-compacto > div {
    display: grid;
}

.tema-cerrado-compacto strong {
    font-size: 0.84rem;
}

.tema-cerrado-compacto span {
    margin-top: 2px;
    color: var(--foro-secundario);
    font-size: 0.72rem;
}

/* Responsive */

@media (max-width: 767px) {
    .cabecera-detalle-tema {
        flex-direction: column;
        gap: 12px;
    }

    .acciones-detalle-tema {
        width: 100%;
    }

    .acciones-detalle-tema > a,
    .acciones-detalle-tema form {
        flex: 1;
    }

    .acciones-detalle-tema .btn {
        width: 100%;
    }

    .cabecera-publicacion-compacta {
        align-items: flex-start;
    }

    .datos-publicacion-derecha {
        min-width: max-content;
    }

    .lista-adjuntos-compacta {
        grid-template-columns: 1fr;
    }

    .fila-adjuntos-respuesta {
        grid-template-columns: 1fr;
    }

    .accion-publicar-respuesta .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .meta-detalle-tema {
        display: grid;
        gap: 3px;
    }

    .cabecera-publicacion-compacta {
        flex-direction: column;
        gap: 8px;
    }

    .datos-publicacion-derecha,
    .fecha-publicacion-compacta {
        width: 100%;
        text-align: left;
    }

    .acciones-publicacion-compacta {
        width: 100%;
        justify-content: space-between;
    }

    .contenido-publicacion-compacta {
        padding: 12px;
    }

    .contenido-publicacion-compacta
    .texto-publicacion {
        font-size: 0.84rem;
    }

    .nombre-autor-horizontal strong {
        white-space: normal;
    }

    .panel-respuesta {
        padding: 14px;
    }
}


/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 4: formularios, pendientes y revisión
   ========================================================= */

/* Formulario de temas */

.panel-formulario-tema {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 18px;
}

.formulario-tema-compacto {
    gap: 15px;
}

.tema-textarea-compacta {
    min-height: 230px;
    resize: vertical;
}

.aviso-formulario-compacto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 0.8rem;
    border: 1px solid;
    border-radius: 10px;
}

.aviso-formulario-compacto > i {
    margin-top: 1px;
    font-size: 1rem;
}

.aviso-formulario-compacto > div {
    display: grid;
}

.aviso-formulario-compacto strong {
    font-size: 0.8rem;
}

.aviso-formulario-compacto span {
    margin-top: 2px;
    font-size: 0.74rem;
}

.aviso-formulario-info {
    color: #1e40af;
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.aviso-formulario-warning {
    color: #854d0e;
    background-color: #fffbeb;
    border-color: #fde68a;
}

.bloque-adjuntar-formulario {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 11px;
}

.bloque-adjuntar-icono {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--foro-azul-800);
    background-color: var(--foro-azul-100);
    border-radius: 10px;
}

.acciones-formulario-tema {
    margin-top: 4px;
}

/* Pendientes */

.contador-pendientes {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 11px;
    color: #854d0e;
    font-size: 0.75rem;
    font-weight: 750;
    background-color: #fef3c7;
    border-radius: 999px;
}

.lista-pendientes-compacta {
    display: grid;
    gap: 7px;
}

.tema-pendiente-compacto {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 11px;
    transition:
        background-color 150ms ease,
        border-color 150ms ease;
}

.tema-pendiente-compacto:hover {
    background-color: #fffbeb;
    border-color: #fde68a;
}

.icono-pendiente {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #854d0e;
    background-color: #fef3c7;
    border-radius: 10px;
}

.contenido-pendiente {
    min-width: 0;
    flex: 1;
}

.contenido-pendiente h2 {
    overflow: hidden;
    margin: 0;
    color: var(--foro-texto);
    font-size: 0.92rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-pendiente {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 5px;
    color: var(--foro-secundario);
    font-size: 0.7rem;
}

.meta-pendiente span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.accion-pendiente {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.accion-pendiente > i {
    color: #94a3b8;
    font-size: 0.75rem;
}

/* Revisión */

.rejilla-revision-tema {
    display: grid;
    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(310px, 0.8fr);
    gap: 16px;
    align-items: start;
}

.panel-revision-contenido,
.panel-decision-revision {
    padding: 0;
    overflow: hidden;
}

.cabecera-contenido-revision {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 13px;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--foro-borde);
}

.datos-revision-derecha {
    display: grid;
    text-align: right;
}

.datos-revision-derecha span {
    color: var(--foro-texto);
    font-size: 0.7rem;
    font-weight: 700;
}

.datos-revision-derecha time {
    margin-top: 2px;
    color: var(--foro-secundario);
    font-size: 0.66rem;
}

.contenido-revision-tema {
    padding: 16px;
}

.contenido-revision-tema h2 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    font-weight: 750;
}

.texto-revision-tema {
    min-height: 120px;
    color: #263246;
    font-size: 0.87rem;
    line-height: 1.62;
}

.panel-decision-revision {
    position: sticky;
    top: 82px;
}

.cabecera-decision-revision {
    padding: 15px 16px 12px;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--foro-borde);
}

.cabecera-decision-revision h2 {
    margin: 3px 0 4px;
    font-size: 1rem;
    font-weight: 750;
}

.cabecera-decision-revision p {
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.73rem;
}

.formulario-revision {
    gap: 13px;
    padding: 15px;
}

.observacion-revision {
    min-height: 135px;
}

.acciones-revision-compactas {
    display: grid;
    gap: 8px;
}

.boton-decision-revision {
    width: 100%;
    min-height: 38px;
    font-size: 0.82rem;
}

/* Responsive */

@media (max-width: 991px) {
    .rejilla-revision-tema {
        grid-template-columns: 1fr;
    }

    .panel-decision-revision {
        position: static;
    }
}

@media (max-width: 767px) {
    .panel-formulario-tema {
        padding: 15px;
    }

    .tema-textarea-compacta {
        min-height: 190px;
    }

    .acciones-formulario-tema {
        display: grid;
        grid-template-columns: 1fr;
    }

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

    .tema-pendiente-compacto {
        align-items: flex-start;
        gap: 10px;
        padding: 11px 9px;
    }

    .contenido-pendiente h2 {
        white-space: normal;
    }

    .meta-pendiente {
        display: grid;
        gap: 2px;
    }

    .accion-pendiente {
        align-self: center;
    }

    .accion-pendiente .btn {
        display: none;
    }
}

@media (max-width: 520px) {
    .bloque-adjuntar-formulario {
        grid-template-columns: 1fr;
    }

    .bloque-adjuntar-icono {
        display: none;
    }

    .cabecera-contenido-revision {
        align-items: flex-start;
        flex-direction: column;
    }

    .datos-revision-derecha {
        text-align: left;
    }

    .contenido-revision-tema {
        padding: 13px;
    }
}


/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 5: directorio y perfiles
   ========================================================= */

.contador-directorio {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    color: var(--foro-azul-900);
    font-size: 0.75rem;
    font-weight: 750;
    background-color: var(--foro-azul-100);
    border-radius: 999px;
}

/* Directorio */

.lista-miembros-compacta {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.miembro-compacto {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 11px;
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.miembro-compacto:hover {
    background-color: #f8fafc;
    border-color: #cbd8e6;
    transform: translateY(-1px);
}

.miembro-compacto-inactivo {
    opacity: 0.66;
    background-color: #f8fafc;
}

.avatar-directorio {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-900),
            var(--foro-azul-800)
        );
    border-radius: 50%;
}

.contenido-miembro-compacto {
    min-width: 0;
    flex: 1;
}

.titulo-miembro-compacto {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.titulo-miembro-compacto h2 {
    overflow: hidden;
    margin: 0;
    color: var(--foro-texto);
    font-size: 0.88rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.titulo-miembro-compacto .etiqueta {
    padding: 2px 6px;
    font-size: 0.6rem;
}

.contenido-miembro-compacto p {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    margin: 4px 0 0;
    color: var(--foro-secundario);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lateral-miembro-compacto {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.etiqueta-perfil-propio {
    color: #5b21b6;
    background-color: #ede9fe;
}

.flecha-miembro {
    color: #94a3b8;
    font-size: 0.75rem;
}

/* Perfil */

.perfil-hero {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 22px 24px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-950),
            var(--foro-azul-800)
        );
    border-radius: 16px;
    box-shadow:
        0 10px 26px rgb(15 23 42 / 12%);
}

.perfil-identidad {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}

.avatar-perfil-nuevo {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    color: var(--foro-azul-900);
    font-size: 1.05rem;
    font-weight: 800;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow:
        0 7px 18px rgb(0 0 0 / 15%);
}

.perfil-identidad-datos {
    min-width: 0;
}

.perfil-identidad-datos .eyebrow {
    color: rgb(255 255 255 / 65%);
}

.perfil-identidad-datos h1 {
    overflow-wrap: anywhere;
    margin: 4px 0 4px;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 760;
}

.perfil-identidad-datos > p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: rgb(255 255 255 / 72%);
    font-size: 0.8rem;
}

.etiquetas-perfil {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.rejilla-perfil {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.icono-panel-perfil {
    color: #cbd5e1;
    font-size: 1.35rem;
}

.datos-perfil-compactos {
    display: grid;
    gap: 0;
    margin: 0;
}

.datos-perfil-compactos > div {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--foro-borde);
}

.datos-perfil-compactos > div:last-child {
    border-bottom: 0;
}

.datos-perfil-compactos dt {
    color: var(--foro-secundario);
    font-size: 0.74rem;
    font-weight: 600;
}

.datos-perfil-compactos dd {
    margin: 0;
    color: var(--foro-texto);
    font-size: 0.8rem;
    font-weight: 650;
}

.lista-contacto-perfil {
    display: grid;
    gap: 10px;
}

.dato-contacto-perfil {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 10px;
}

.icono-contacto-perfil {
    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-contacto-perfil > div {
    display: grid;
    min-width: 0;
}

.dato-contacto-perfil small {
    color: var(--foro-secundario);
    font-size: 0.65rem;
}

.dato-contacto-perfil a,
.dato-contacto-perfil span {
    overflow-wrap: anywhere;
    margin-top: 2px;
    color: var(--foro-texto);
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
}

.dato-contacto-perfil a:hover {
    color: var(--foro-azul-800);
}

.dato-contacto-perfil .dato-privado {
    color: var(--foro-secundario);
    font-weight: 400;
}

.acciones-perfil-inferiores {
    justify-content: flex-start;
    margin-top: 14px;
}

/* Edición de perfil */

.panel-formulario-perfil {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 18px;
}

.formulario-perfil-compacto {
    gap: 14px;
}

.grupo-formulario-perfil {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 12px;
}

.grupo-formulario-perfil legend {
    display: flex;
    width: auto;
    align-items: center;
    gap: 8px;
    float: none;
    margin: 0 0 2px;
    padding: 0;
    color: var(--foro-texto);
    font-size: 0.88rem;
    font-weight: 750;
}

.icono-grupo-formulario {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--foro-azul-800);
    font-size: 0.82rem;
    background-color: var(--foro-azul-100);
    border-radius: 8px;
}

.grupo-privacidad-perfil {
    background-color: #f8fafc;
}

.descripcion-privacidad {
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.75rem;
}

.opciones-privacidad {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.opcion-privacidad {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    cursor: pointer;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 10px;
}

.control-check-privacidad {
    padding-top: 1px;
}

.opcion-privacidad > span:last-child {
    display: grid;
}

.opcion-privacidad strong {
    font-size: 0.78rem;
}

.opcion-privacidad small {
    margin-top: 2px;
    color: var(--foro-secundario);
    font-size: 0.68rem;
    line-height: 1.4;
}

.acciones-formulario-perfil {
    margin-top: 2px;
}

/* Responsive */

@media (max-width: 767px) {
    .lista-miembros-compacta {
        grid-template-columns: 1fr;
    }

    .perfil-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        padding: 19px;
    }

    .perfil-hero > .btn {
        width: 100%;
    }

    .rejilla-perfil {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .opciones-privacidad {
        grid-template-columns: 1fr;
    }

    .acciones-formulario-perfil {
        display: grid;
        grid-template-columns: 1fr;
    }

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

@media (max-width: 520px) {
    .perfil-identidad {
        align-items: flex-start;
    }

    .avatar-perfil-nuevo {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        font-size: 0.86rem;
    }

    .perfil-identidad-datos h1 {
        font-size: 1.28rem;
    }

    .datos-perfil-compactos > div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }

    .panel-formulario-perfil {
        padding: 14px;
    }

    .grupo-formulario-perfil {
        padding: 12px;
    }

    .lateral-miembro-compacto
    .etiqueta-perfil-propio {
        display: none;
    }
}


/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 6: invitaciones y registro
   ========================================================= */

/* Administración de invitaciones */

.rejilla-invitaciones {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.72fr)
        minmax(0, 1.8fr);
    gap: 16px;
    align-items: start;
}

.panel-nueva-invitacion,
.panel-historial-invitaciones {
    padding: 17px;
}

.panel-nueva-invitacion {
    position: sticky;
    top: 82px;
}

.icono-panel-invitacion {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--foro-azul-800);
    background-color: var(--foro-azul-100);
    border-radius: 10px;
}

.descripcion-panel-invitacion {
    margin: -4px 0 15px;
    color: var(--foro-secundario);
    font-size: 0.76rem;
    line-height: 1.5;
}

.formulario-invitacion-compacto {
    gap: 13px;
}

.nota-seguridad-invitacion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 10px;
    color: var(--foro-secundario);
    font-size: 0.7rem;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 9px;
}

.nota-seguridad-invitacion i {
    color: var(--foro-azul-800);
}

.cabecera-historial-invitaciones {
    margin-bottom: 10px;
}

.cabecera-historial-invitaciones h2 {
    margin: 3px 0 3px;
    font-size: 1.05rem;
    font-weight: 750;
}

.cabecera-historial-invitaciones p {
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.74rem;
}

.lista-invitaciones-compacta {
    display: grid;
    gap: 7px;
}

.invitacion-compacta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 10px 11px;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 11px;
}

.icono-estado-invitacion {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 10px;
}

.icono-estado-pendiente {
    color: #1e40af;
    background-color: #dbeafe;
}

.icono-estado-utilizada {
    color: #166534;
    background-color: #dcfce7;
}

.icono-estado-revocada {
    color: #991b1b;
    background-color: #fee2e2;
}

.icono-estado-caducada {
    color: #854d0e;
    background-color: #fef3c7;
}

.contenido-invitacion {
    min-width: 0;
    flex: 1;
}

.cabecera-invitacion-compacta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.cabecera-invitacion-compacta h3 {
    overflow: hidden;
    margin: 0;
    color: var(--foro-texto);
    font-size: 0.82rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabecera-invitacion-compacta .etiqueta {
    padding: 2px 6px;
    font-size: 0.61rem;
}

.datos-invitacion-compacta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-top: 5px;
    color: var(--foro-secundario);
    font-size: 0.65rem;
}

.datos-invitacion-compacta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.acciones-invitacion-compacta {
    flex: 0 0 auto;
}

.acciones-invitacion-compacta form {
    margin: 0;
}

.estado-final-invitacion {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    color: #94a3b8;
    background-color: #f1f5f9;
    border-radius: 8px;
}

/* Invitación creada */

.resultado-invitacion {
    width: min(760px, 100%);
    margin: 20px auto;
    text-align: center;
}

.icono-invitacion-creada {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    place-items: center;
    color: #166534;
    font-size: 1.7rem;
    background-color: #dcfce7;
    border-radius: 50%;
}

.resultado-invitacion h1 {
    margin: 4px 0 5px;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 760;
}

.descripcion-invitacion-creada {
    margin: 0 auto 17px;
    color: var(--foro-secundario);
    font-size: 0.82rem;
}

.tarjeta-invitacion-creada {
    margin-bottom: 15px;
    padding: 18px;
    text-align: left;
}

.resumen-invitacion-creada {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.resumen-invitacion-creada > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 10px;
}

.icono-dato-invitacion {
    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;
}

.resumen-invitacion-creada > div > div {
    display: grid;
    min-width: 0;
}

.resumen-invitacion-creada small {
    color: var(--foro-secundario);
    font-size: 0.64rem;
}

.resumen-invitacion-creada strong {
    overflow-wrap: anywhere;
    margin-top: 2px;
    font-size: 0.76rem;
}

.campo-enlace-invitacion label {
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 700;
}

.control-copiar-invitacion {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.control-enlace-invitacion {
    min-height: 72px;
    resize: none;
    font-size: 0.76rem;
    line-height: 1.45;
}

.control-copiar-invitacion .btn {
    min-width: 145px;
}

.resultado-copia {
    min-height: 19px;
    margin: 5px 0 0;
    color: #166534;
    font-size: 0.7rem;
}

.aviso-enlace-unico {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 11px;
    color: #854d0e;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 9px;
}

.aviso-enlace-unico > div {
    display: grid;
}

.aviso-enlace-unico strong {
    font-size: 0.75rem;
}

.aviso-enlace-unico span {
    margin-top: 2px;
    font-size: 0.68rem;
    line-height: 1.45;
}

/* Registro mediante invitación */

.pagina-registro-invitacion {
    width: min(850px, 100%);
    margin: 0 auto;
}

.cabecera-registro-invitacion {
    margin-bottom: 15px;
    text-align: center;
}

.marca-registro-invitacion {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    place-items: center;
    color: #ffffff;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-950),
            var(--foro-azul-800)
        );
    border-radius: 13px;
}

.cabecera-registro-invitacion h1 {
    margin: 4px 0 4px;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 760;
}

.cabecera-registro-invitacion p {
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.8rem;
}

.panel-registro-invitacion {
    padding: 18px;
}

.correo-registro-invitacion {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px 11px;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}

.icono-correo-registro {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    color: #166534;
    background-color: #dcfce7;
    border-radius: 9px;
}

.correo-registro-invitacion > div {
    display: grid;
    min-width: 0;
    flex: 1;
}

.correo-registro-invitacion small {
    color: #64748b;
    font-size: 0.63rem;
}

.correo-registro-invitacion strong {
    overflow-wrap: anywhere;
    margin-top: 1px;
    font-size: 0.76rem;
}

.formulario-registro-compacto {
    gap: 14px;
}

.grupo-registro {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--foro-borde);
    border-radius: 11px;
}

.grupo-registro legend {
    display: flex;
    width: auto;
    align-items: center;
    gap: 8px;
    float: none;
    margin: 0;
    padding: 0;
    color: var(--foro-texto);
    font-size: 0.85rem;
    font-weight: 750;
}

.grupo-registro legend span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: #ffffff;
    font-size: 0.68rem;
    background-color: var(--foro-azul-900);
    border-radius: 50%;
}

.requisitos-password-registro {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--foro-secundario);
    font-size: 0.68rem;
}

.requisitos-password-registro i {
    color: #166534;
}

.btn-registro {
    min-height: 42px;
}

.invitacion-no-disponible {
    width: min(520px, 100%);
    margin: 55px auto;
    padding: 30px 24px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 16px;
    box-shadow: var(--foro-sombra);
}

.icono-invitacion-no-disponible {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 13px;
    place-items: center;
    font-size: 1.7rem;
    border-radius: 50%;
}

.icono-invitacion-utilizada {
    color: #166534;
    background-color: #dcfce7;
}

.icono-invitacion-revocada {
    color: #991b1b;
    background-color: #fee2e2;
}

.icono-invitacion-caducada {
    color: #854d0e;
    background-color: #fef3c7;
}

.invitacion-no-disponible h1 {
    margin: 4px 0 7px;
    font-size: 1.35rem;
    font-weight: 760;
}

.invitacion-no-disponible p {
    max-width: 390px;
    margin: 0 auto 18px;
    color: var(--foro-secundario);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Responsive */

@media (max-width: 991px) {
    .rejilla-invitaciones {
        grid-template-columns: 1fr;
    }

    .panel-nueva-invitacion {
        position: static;
    }
}

@media (max-width: 767px) {
    .datos-invitacion-compacta {
        display: grid;
        gap: 2px;
    }

    .resumen-invitacion-creada {
        grid-template-columns: 1fr;
    }

    .control-copiar-invitacion {
        grid-template-columns: 1fr;
    }

    .control-copiar-invitacion .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .invitacion-compacta {
        align-items: flex-start;
        padding: 10px 9px;
    }

    .cabecera-invitacion-compacta {
        display: grid;
        justify-items: start;
    }

    .cabecera-invitacion-compacta h3 {
        white-space: normal;
    }

    .panel-registro-invitacion {
        padding: 14px;
    }

    .grupo-registro {
        padding: 12px;
    }

    .correo-registro-invitacion {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .correo-registro-invitacion .etiqueta {
        margin-left: 44px;
    }
}


/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 7: gestión administrativa de usuarios
   ========================================================= */

.panel-usuarios-admin {
    padding: 12px;
}

.lista-usuarios-admin {
    display: grid;
    gap: 10px;
}

.tarjeta-usuario-admin {
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 13px;
    box-shadow:
        0 3px 12px rgb(15 23 42 / 4%);
}

.tarjeta-usuario-inactivo {
    background-color: #f8fafc;
}

.tarjeta-usuario-bloqueado {
    border-color: #fecaca;
}

/* Cabecera */

.cabecera-usuario-admin {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--foro-borde);
}

.identidad-usuario-admin {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.avatar-usuario-admin {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-950),
            var(--foro-azul-800)
        );
    border-radius: 50%;
}

.datos-identidad-admin {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.nombre-usuario-admin {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.nombre-usuario-admin a {
    overflow: hidden;
    color: var(--foro-texto);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nombre-usuario-admin a:hover {
    color: var(--foro-azul-800);
}

.nombre-usuario-admin .etiqueta {
    padding: 2px 6px;
    font-size: 0.6rem;
}

.correo-usuario-admin,
.destino-usuario-admin {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: var(--foro-secundario);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estado-principal-usuario {
    flex: 0 0 auto;
}

/* Cuerpo */

.cuerpo-usuario-admin {
    padding: 13px 14px;
}

.resumen-usuario-admin {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dato-resumen-admin {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 10px;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 10px;
}

.icono-resumen-admin {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    color: var(--foro-azul-800);
    font-size: 0.8rem;
    background-color: var(--foro-azul-100);
    border-radius: 8px;
}

.dato-resumen-admin > div {
    display: grid;
    min-width: 0;
}

.dato-resumen-admin small {
    color: var(--foro-secundario);
    font-size: 0.62rem;
}

.dato-resumen-admin strong {
    overflow-wrap: anywhere;
    margin-top: 1px;
    color: var(--foro-texto);
    font-size: 0.73rem;
    font-weight: 700;
}

.dato-resumen-admin span {
    overflow-wrap: anywhere;
    margin-top: 2px;
    color: var(--foro-secundario);
    font-size: 0.63rem;
    line-height: 1.4;
}

/* Avisos */

.avisos-usuario-admin {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.aviso-usuario-admin {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid;
    border-radius: 9px;
}

.aviso-usuario-admin > i {
    margin-top: 1px;
    font-size: 0.82rem;
}

.aviso-usuario-admin > div {
    display: grid;
}

.aviso-usuario-admin strong {
    font-size: 0.7rem;
}

.aviso-usuario-admin span {
    margin-top: 1px;
    font-size: 0.64rem;
    line-height: 1.4;
}

.aviso-admin-bloqueado {
    color: #991b1b;
    background-color: #fef2f2;
    border-color: #fecaca;
}

.aviso-admin-intentos {
    color: #854d0e;
    background-color: #fffbeb;
    border-color: #fde68a;
}

.aviso-admin-password {
    color: #5b21b6;
    background-color: #f5f3ff;
    border-color: #ddd6fe;
}

.aviso-admin-temporal {
    color: #1e40af;
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.aviso-admin-caducado {
    color: #475569;
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

/* Pie y acciones */

.pie-usuario-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background-color: #f8fafc;
    border-top: 1px solid var(--foro-borde);
}

.acciones-principales-usuario,
.acciones-avanzadas-usuario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.acciones-principales-usuario form,
.acciones-avanzadas-usuario form {
    margin: 0;
}

.boton-mas-acciones {
    flex: 0 0 auto;
}

.panel-acciones-avanzadas {
    padding: 12px 14px;
    background-color: #f8fafc;
    border-top: 1px dashed #cbd5e1;
}

.accion-no-disponible {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 9px;
    color: var(--foro-secundario);
    font-size: 0.68rem;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 7px;
}

/* Administración temporal */

.formulario-admin-temporal-contenedor {
    margin-top: 11px;
}

.form-admin-temporal-nuevo {
    display: grid;
    grid-template-columns:
        minmax(110px, 0.35fr)
        minmax(220px, 1.4fr)
        auto;
    align-items: end;
    gap: 9px;
    padding: 11px;
    background-color: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
}

.form-admin-temporal-nuevo .campo {
    gap: 4px;
}

.form-admin-temporal-nuevo label {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
}

.form-admin-temporal-nuevo .btn {
    min-height: 31px;
}

/* Responsive */

@media (max-width: 900px) {
    .resumen-usuario-admin {
        grid-template-columns: 1fr;
    }

    .form-admin-temporal-nuevo {
        grid-template-columns:
            minmax(100px, 0.4fr)
            minmax(0, 1.4fr);
    }

    .form-admin-temporal-nuevo .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .cabecera-usuario-admin {
        align-items: flex-start;
    }

    .pie-usuario-admin {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-principales-usuario {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .acciones-principales-usuario form,
    .acciones-principales-usuario .btn {
        width: 100%;
    }

    .acciones-principales-usuario form .btn {
        width: 100%;
    }

    .boton-mas-acciones {
        width: 100%;
    }

    .acciones-avanzadas-usuario {
        display: grid;
        grid-template-columns: 1fr;
    }

    .acciones-avanzadas-usuario form,
    .acciones-avanzadas-usuario .btn {
        width: 100%;
    }

    .acciones-avanzadas-usuario form .btn {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .panel-usuarios-admin {
        padding: 8px;
    }

    .cabecera-usuario-admin {
        flex-direction: column;
        gap: 9px;
        padding: 11px;
    }

    .estado-principal-usuario {
        margin-left: 53px;
    }

    .nombre-usuario-admin a {
        white-space: normal;
    }

    .correo-usuario-admin,
    .destino-usuario-admin {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .cuerpo-usuario-admin {
        padding: 10px;
    }

    .acciones-principales-usuario {
        grid-template-columns: 1fr;
    }

    .form-admin-temporal-nuevo {
        grid-template-columns: 1fr;
    }

    .form-admin-temporal-nuevo .btn {
        grid-column: auto;
    }
}



/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 8: autenticación y contraseñas
   ========================================================= */

.pagina-autenticacion {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(380px, 0.85fr);
    gap: 36px;
    width: min(980px, 100%);
    min-height: calc(100vh - 145px);
    margin: 0 auto;
    align-items: center;
}

.presentacion-autenticacion {
    padding: 24px;
}

.marca-autenticacion {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    place-items: center;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-950),
            var(--foro-azul-800)
        );
    border-radius: 16px;
    box-shadow:
        0 9px 24px rgb(15 23 42 / 16%);
}

.presentacion-autenticacion h1 {
    margin: 5px 0 8px;
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    font-weight: 780;
}

.presentacion-autenticacion > p {
    max-width: 520px;
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.93rem;
    line-height: 1.55;
}

.ventajas-autenticacion {
    display: grid;
    gap: 11px;
    margin-top: 26px;
}

.ventajas-autenticacion > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--foro-secundario);
    font-size: 0.78rem;
}

.ventajas-autenticacion i {
    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;
}

.tarjeta-autenticacion {
    width: 100%;
    padding: 22px;
}

.contenedor-autenticacion-simple {
    width: min(520px, 100%);
    margin: 24px auto;
}

.cabecera-autenticacion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.cabecera-autenticacion h1,
.cabecera-autenticacion h2 {
    margin: 3px 0 4px;
    font-size: 1.3rem;
    font-weight: 760;
}

.cabecera-autenticacion p {
    margin: 0;
    color: var(--foro-secundario);
    font-size: 0.78rem;
    line-height: 1.5;
}

.cabecera-centrada {
    display: grid;
    justify-items: center;
    text-align: center;
}

.icono-autenticacion {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--foro-azul-800);
    font-size: 1.05rem;
    background-color: var(--foro-azul-100);
    border-radius: 11px;
}

.icono-autenticacion-warning {
    color: #854d0e;
    background-color: #fef3c7;
}

.formulario-autenticacion {
    gap: 14px;
}

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

.control-con-icono > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 12px;
    color: #94a3b8;
    transform: translateY(-50%);
    pointer-events: none;
}

.control-con-icono .control {
    padding-right: 40px;
    padding-left: 38px;
}

.boton-ver-password {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    color: var(--foro-secundario);
    background: transparent;
    border: 0;
    border-radius: 7px;
    transform: translateY(-50%);
}

.boton-ver-password:hover {
    color: var(--foro-azul-800);
    background-color: var(--foro-azul-100);
}

.opciones-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.74rem;
}

.recordar-sesion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.opciones-login a {
    color: var(--foro-azul-800);
    font-weight: 650;
    text-decoration: none;
}

.opciones-login a:hover {
    text-decoration: underline;
}

.btn-acceso {
    width: 100%;
    min-height: 42px;
}

.pie-autenticacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 13px;
    color: var(--foro-secundario);
    font-size: 0.66rem;
    border-top: 1px solid var(--foro-borde);
}

.aviso-recuperacion,
.requisitos-password-autenticacion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    color: var(--foro-secundario);
    font-size: 0.69rem;
    line-height: 1.45;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 9px;
}

.aviso-recuperacion i,
.requisitos-password-autenticacion i {
    margin-top: 1px;
    color: #166534;
}

.cuenta-recuperacion {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;
    padding: 10px;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}

.cuenta-recuperacion > span {
    display: grid;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    place-items: center;
    color: #166534;
    background-color: #dcfce7;
    border-radius: 8px;
}

.cuenta-recuperacion > div {
    display: grid;
    min-width: 0;
}

.cuenta-recuperacion small {
    color: var(--foro-secundario);
    font-size: 0.62rem;
}

.cuenta-recuperacion strong {
    overflow-wrap: anywhere;
    font-size: 0.75rem;
}

.acciones-autenticacion {
    margin-top: 3px;
}

.acciones-autenticacion .btn {
    min-width: 130px;
}

.aviso-cambio-obligatorio {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 16px;
    padding: 10px 11px;
    color: #854d0e;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 9px;
}

.aviso-cambio-obligatorio > div {
    display: grid;
}

.aviso-cambio-obligatorio strong {
    font-size: 0.75rem;
}

.aviso-cambio-obligatorio span {
    margin-top: 2px;
    font-size: 0.68rem;
}

.tarjeta-cambio-obligatorio {
    border-color: #fde68a;
}

.separador-password {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--foro-secundario);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.separador-password::before,
.separador-password::after {
    height: 1px;
    flex: 1;
    content: "";
    background-color: var(--foro-borde);
}

.error-campo {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.75rem;
}

@media (max-width: 850px) {
    .pagina-autenticacion {
        grid-template-columns: 1fr;
        gap: 15px;
        min-height: auto;
    }

    .presentacion-autenticacion {
        padding: 12px 8px 4px;
        text-align: center;
    }

    .marca-autenticacion {
        margin-right: auto;
        margin-left: auto;
    }

    .presentacion-autenticacion > p {
        margin-right: auto;
        margin-left: auto;
    }

    .ventajas-autenticacion {
        display: none;
    }

    .tarjeta-autenticacion {
        width: min(520px, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    .pagina-autenticacion {
        gap: 10px;
    }

    .presentacion-autenticacion h1 {
        font-size: 1.45rem;
    }

    .presentacion-autenticacion > p {
        font-size: 0.78rem;
    }

    .tarjeta-autenticacion {
        padding: 16px;
    }

    .opciones-login {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .acciones-autenticacion {
        display: grid;
        grid-template-columns: 1fr;
    }

    .acciones-autenticacion .btn {
        width: 100%;
    }

    .acciones-password {
        display: grid;
        grid-template-columns: 1fr;
    }

    .acciones-password .btn {
        width: 100%;
    }
}



/* =========================================================
   SUBNEXO934 · REDISEÑO COMPACTO
   Fase 9: páginas de error y ajustes finales
   ========================================================= */

.pagina-error-nueva {
    display: grid;
    min-height: calc(100vh - 150px);
    place-items: center;
    padding: 28px 0;
}

.tarjeta-error {
    width: min(600px, 100%);
    padding: 34px 30px;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid var(--foro-borde);
    border-radius: 18px;
    box-shadow:
        0 14px 36px rgb(15 23 42 / 8%);
}

.ilustracion-error {
    position: relative;
    display: flex;
    width: max-content;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.circulo-error-grande {
    position: relative;
    z-index: 2;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    font-size: 1.8rem;
    border-radius: 50%;
    box-shadow:
        0 8px 20px rgb(15 23 42 / 10%);
}

.codigo-error-grande {
    margin-left: -10px;
    padding: 8px 14px 8px 19px;
    font-size: 1.12rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    border-radius: 0 999px 999px 0;
}

.ilustracion-error-403 .circulo-error-grande {
    color: #854d0e;
    background-color: #fef3c7;
}

.ilustracion-error-403 .codigo-error-grande {
    color: #854d0e;
    background-color: #fffbeb;
}

.ilustracion-error-404 .circulo-error-grande {
    color: #1e40af;
    background-color: #dbeafe;
}

.ilustracion-error-404 .codigo-error-grande {
    color: #1e40af;
    background-color: #eff6ff;
}

.ilustracion-error-413 .circulo-error-grande {
    color: #9a3412;
    background-color: #ffedd5;
}

.ilustracion-error-413 .codigo-error-grande {
    color: #9a3412;
    background-color: #fff7ed;
}

.ilustracion-error-500 .circulo-error-grande {
    color: #991b1b;
    background-color: #fee2e2;
}

.ilustracion-error-500 .codigo-error-grande {
    color: #991b1b;
    background-color: #fef2f2;
}

.tarjeta-error h1 {
    margin: 5px 0 8px;
    color: var(--foro-texto);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 780;
}

.tarjeta-error > p {
    max-width: 470px;
    margin: 0 auto;
    color: var(--foro-secundario);
    font-size: 0.84rem;
    line-height: 1.55;
}

.detalle-error {
    display: flex;
    max-width: 470px;
    align-items: flex-start;
    gap: 9px;
    margin: 20px auto 0;
    padding: 10px 12px;
    color: var(--foro-secundario);
    text-align: left;
    font-size: 0.72rem;
    line-height: 1.45;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 10px;
}

.detalle-error i {
    margin-top: 1px;
    color: var(--foro-azul-800);
    font-size: 0.9rem;
}

.acciones-error-nuevas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

/* Estados de foco accesibles */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgb(37 99 235 / 25%);
    outline-offset: 2px;
}

/* Evitar desbordamientos generales */

img,
video,
iframe {
    max-width: 100%;
}

pre,
code {
    overflow-wrap: anywhere;
}

.texto-publicacion,
.mensaje-tema,
.control-enlace-invitacion {
    overflow-wrap: anywhere;
}

/* Movimiento más suave para anclas de respuestas */

html {
    scroll-behavior: smooth;
}

.publicacion-compacta:target {
    border-color: #93b4d8;
    box-shadow:
        0 0 0 3px rgb(32 70 111 / 10%),
        0 7px 20px rgb(15 23 42 / 7%);
}

/* Mejora del aviso de contraseña de base.html */

.aviso-password {
    margin-bottom: 15px;
    padding: 10px 12px;
    border-radius: 11px;
}

.aviso-password > div {
    font-size: 0.78rem;
}

/* Ajustes móviles */

@media (max-width: 520px) {
    .pagina-error-nueva {
        min-height: calc(100vh - 110px);
        padding: 12px 0;
    }

    .tarjeta-error {
        padding: 25px 17px;
        border-radius: 14px;
    }

    .circulo-error-grande {
        width: 62px;
        height: 62px;
        font-size: 1.5rem;
    }

    .codigo-error-grande {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 0.95rem;
    }

    .acciones-error-nuevas {
        display: grid;
        grid-template-columns: 1fr;
    }

    .acciones-error-nuevas .btn {
        width: 100%;
    }
}

/* =========================================================
   SUBNEXO934 · Avatares de usuario
   ========================================================= */

.editor-avatar {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.vista-avatar-edicion {
    display: grid;
    width: 104px;
    height: 104px;
    overflow: hidden;
    place-items: center;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-900),
            var(--foro-azul-800)
        );
    border: 4px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px var(--foro-borde),
        0 8px 20px rgb(15 23 42 / 12%);
}

.vista-avatar-edicion img,
.avatar-perfil-nuevo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.opciones-avatar-edicion {
    display: grid;
    gap: 11px;
}

.opcion-eliminar-avatar {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px;
    cursor: pointer;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}

.opcion-eliminar-avatar > input {
    margin-top: 3px;
}

.opcion-eliminar-avatar > span {
    display: grid;
}

.opcion-eliminar-avatar strong {
    color: #991b1b;
    font-size: 0.76rem;
}

.opcion-eliminar-avatar small {
    margin-top: 2px;
    color: #7f1d1d;
    font-size: 0.67rem;
}

.avatar-perfil-nuevo {
    overflow: hidden;
}

@media (max-width: 520px) {
    .editor-avatar {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .opciones-avatar-edicion {
        width: 100%;
    }
}

/* =========================================================
   SUBNEXO934 · Avatares en cabecera y directorio
   ========================================================= */

.avatar-cabecera,
.avatar-menu-movil,
.avatar-directorio {
    overflow: hidden;
}

.avatar-cabecera img,
.avatar-menu-movil img,
.avatar-directorio img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Avatar del menú móvil */

.identidad-menu-movil {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.identidad-menu-movil > div {
    min-width: 0;
}

.avatar-menu-movil {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-900),
            var(--foro-azul-800)
        );
    border-radius: 50%;
}

.identidad-menu-movil .offcanvas-title,
.identidad-menu-movil p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   SUBNEXO934 · Avatares en temas y respuestas
   ========================================================= */

.avatar-publicacion,
.avatar-pendiente {
    overflow: hidden;
}

.avatar-publicacion img,
.avatar-pendiente img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.enlace-avatar-publicacion {
    display: block;
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
    border-radius: 50%;
}

.enlace-avatar-publicacion:focus-visible {
    outline: 3px solid rgb(59 130 246 / 35%);
    outline-offset: 3px;
}

.enlace-nombre-autor {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.enlace-nombre-autor:hover {
    color: var(--foro-azul-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Autor en lista de pendientes */

.avatar-pendiente {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            var(--foro-azul-900),
            var(--foro-azul-700)
        );
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px var(--foro-borde),
        0 4px 10px rgb(15 23 42 / 10%);
}

/* =========================================================
   SUBNEXO934 · Avatar en administración de usuarios
   ========================================================= */

.avatar-usuario-admin {
    overflow: hidden;
}

.avatar-usuario-admin img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.enlace-avatar-usuario-admin {
    display: block;
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
    border-radius: 50%;
}

.enlace-avatar-usuario-admin:hover .avatar-usuario-admin {
    box-shadow:
        0 0 0 3px rgb(59 130 246 / 18%),
        0 5px 14px rgb(15 23 42 / 14%);
}

.enlace-avatar-usuario-admin:focus-visible {
    outline: 3px solid rgb(59 130 246 / 35%);
    outline-offset: 3px;
}

/* =========================================================
   SUBNEXO934 · Seguimientos y avisos
   ========================================================= */

.opcion-seguimiento-formulario {
    padding: 14px;
    background-color: #f8fafc;
    border: 1px solid var(--foro-borde);
    border-radius: 12px;
}

.opcion-seguimiento-formulario label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    cursor: pointer;
}

.control-seguimiento {
    display: flex;
    padding-top: 2px;
}

.opcion-seguimiento-formulario label > span:last-child {
    display: grid;
    gap: 3px;
}

.opcion-seguimiento-formulario strong {
    color: var(--foro-texto-principal);
    font-size: 0.86rem;
}

.opcion-seguimiento-formulario small {
    color: var(--foro-texto-secundario);
    font-size: 0.74rem;
    line-height: 1.45;
}

.grupo-avisos-correo {
    background:
        linear-gradient(
            180deg,
            rgb(239 246 255 / 45%),
            rgb(255 255 255 / 100%)
        );
}

.acciones-detalle-tema form {
    margin: 0;
}

/* =========================================================
   Lecturas de temas
   ========================================================= */

.contador-lecturas-tema {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    font-weight: 500;
}

.contador-lecturas-tema:hover {
    color: var(--bs-primary);
}

.lista-lectores-tema {
    display: flex;
    flex-direction: column;
}

.lector-tema {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid
        var(--bs-border-color);
}

.lector-tema:first-child {
    padding-top: 0;
}

.lector-tema:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.lector-tema-avatar {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    overflow: hidden;
    place-items: center;
    border-radius: 50%;
    background: #e8eef5;
    color: #17365d;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.lector-tema-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lector-tema-datos {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.lector-tema-nombre {
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.lector-tema-nombre:hover {
    color: var(--bs-primary);
}

.lector-tema-datos > span {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
}

/* =========================================================
   Temas no leídos
   ========================================================= */

.tema-compacto-no-leido {
    background-color: rgba(
        var(--bs-primary-rgb),
        0.035
    );
}

.tema-compacto-no-leido
.titulo-tema-compacto h2 {
    font-weight: 700;
}

.tema-compacto-no-leido
.icono-tema-compacto {
    background-color: rgba(
        var(--bs-primary-rgb),
        0.12
    );
    color: var(--bs-primary);
}

.etiqueta-tema-no-leido {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--bs-primary);
    background-color: rgba(
        var(--bs-primary-rgb),
        0.1
    );
}

.etiqueta-tema-no-leido i {
    font-size: 0.42rem;
}

.apartado-compacto-no-leido {
    background-color: rgba(
        var(--bs-primary-rgb),
        0.045
    );
}

.apartado-compacto-no-leido
.icono-apartado {
    background-color: rgba(
        var(--bs-primary-rgb),
        0.12
    );

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

.apartado-compacto-no-leido
.titulo-apartado h2 {
    font-weight: 700;
}

.etiqueta-apartado-no-leido {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    color: var(--bs-primary);

    background-color: rgba(
        var(--bs-primary-rgb),
        0.1
    );
}

.etiqueta-apartado-no-leido i {
    font-size: 0.42rem;
}

.reacciones-publicacion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--bs-border-color);
}

.reacciones-existentes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.boton-reaccion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 31px;
    padding: 0.25rem 0.55rem;

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

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

    font-size: 0.85rem;
    line-height: 1;

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

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

.boton-reaccion-propia {
    color: var(--bs-primary);
    border-color: rgba(
        var(--bs-primary-rgb),
        0.4
    );

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

.emoji-reaccion {
    font-size: 1rem;
}

.boton-anadir-reaccion {
    color: var(--bs-secondary-color);
}

.menu-selector-reacciones {
    min-width: auto;
    padding: 0.35rem;
}

.menu-selector-reacciones form {
    display: inline-block;
}

.opcion-reaccion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;

    min-width: 42px;
    min-height: 40px;

    padding: 0.3rem;

    border: 0;
    border-radius: 0.5rem;

    background: transparent;

    font-size: 1.25rem;
}

.opcion-reaccion:hover {
    background-color: var(--bs-tertiary-bg);
}

.opcion-reaccion-activa {
    background-color: rgba(
        var(--bs-primary-rgb),
        0.1
    );
}

.opcion-reaccion-activa i {
    color: var(--bs-primary);
    font-size: 0.7rem;
}

.menu-usuarios-reaccion {
    min-width: 220px;
    padding: 0.5rem;
}

.titulo-menu-reaccion {
    padding: 0.35rem 0.55rem 0.5rem;
    margin-bottom: 0.25rem;

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

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

.usuario-reaccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    padding: 0.4rem 0.55rem;

    border-radius: 0.4rem;

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

    font-size: 0.85rem;
}

.usuario-reaccion:hover {
    background-color: var(--bs-tertiary-bg);
}

.usuario-reaccion small {
    color: var(--bs-primary);
    font-size: 0.72rem;
}

@media (max-width: 575.98px) {
    .boton-anadir-reaccion span {
        display: none;
    }
}

.form-reaccion-directa {
    display: inline-flex;
    margin: 0;
}

.icono-quitar-reaccion {
    margin-left: 0.05rem;
    font-size: 0.8rem;
    opacity: 0.65;
}

.boton-reaccion-propia:hover
.icono-quitar-reaccion {
    opacity: 1;
}

.menu-selector-reacciones.show {
    display: flex;
    align-items: center;
    gap: 0.15rem;

    padding: 0.4rem;
}

.menu-selector-reacciones form {
    display: flex;
    margin: 0;
}

.opcion-reaccion {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .reacciones-publicacion {
        gap: 0.35rem;
    }

    .boton-reaccion {
        min-height: 34px;
        padding: 0.3rem 0.55rem;
    }

    .menu-selector-reacciones.show {
        gap: 0.1rem;
    }

    .opcion-reaccion {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.35rem;
    }

    .boton-anadir-reaccion span {
        display: none;
    }
}

/* ============================================================
   ACTIVIDAD RECIENTE · INICIO
   ============================================================ */

.actividad-reciente-inicio {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.actividad-reciente-inicio
.cabecera-seccion-compacta {
    margin-bottom: 0.8rem;
}

.actividad-reciente-inicio
.cabecera-seccion-compacta p {
    margin: 0.25rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.lista-actividad-reciente {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    background: var(--bs-body-bg);
}

.actividad-reciente-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.8rem 0.95rem;

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

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

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

.actividad-reciente-item:last-child {
    border-bottom: 0;
}

.actividad-reciente-item:hover {
    background: var(--bs-tertiary-bg);
}

.actividad-reciente-no-leida {
    background: rgba(
        var(--bs-primary-rgb),
        0.055
    );
}

.actividad-reciente-no-leida::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

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

.icono-actividad-reciente {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 0.65rem;

    font-size: 1rem;
}

.icono-actividad-tema {
    color: var(--bs-primary);
    background: rgba(
        var(--bs-primary-rgb),
        0.09
    );
}

.icono-actividad-respuesta {
    color: var(--bs-success);
    background: rgba(
        var(--bs-success-rgb),
        0.09
    );
}

.contenido-actividad-reciente {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
}

.cabecera-actividad-reciente {
    display: flex;
    align-items: center;
    gap: 0.45rem;

    margin-bottom: 0.1rem;

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

.badge-actividad-nueva {
    font-size: 0.65rem;
}

.titulo-actividad-reciente {
    overflow: hidden;

    margin-bottom: 0.15rem;

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

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

.extracto-actividad-reciente {
    overflow: hidden;

    margin-bottom: 0.35rem;

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

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

.meta-actividad-reciente {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;

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

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

.flecha-actividad-reciente {
    flex: 0 0 auto;

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

@media (max-width: 767.98px) {
    .actividad-reciente-item {
        align-items: flex-start;

        gap: 0.65rem;

        padding: 0.75rem;
    }

    .icono-actividad-reciente {
        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }

    .extracto-actividad-reciente {
        white-space: normal;

        display: -webkit-box;

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

    .meta-actividad-reciente {
        gap: 0.4rem 0.65rem;
    }

    .flecha-actividad-reciente {
        display: none;
    }
}

/* ============================================================
   BÚSQUEDA GLOBAL
   ============================================================ */

.cabecera-busqueda {
    margin-bottom: 1rem;
}

.cabecera-busqueda h1 {
    margin-bottom: 0.25rem;
}

.cabecera-busqueda p {
    margin: 0;

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


.panel-busqueda {
    margin-bottom: 1.25rem;
    padding: 1rem;
}


.formulario-busqueda-global {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}


.campo-busqueda-global {
    position: relative;

    display: flex;
    align-items: center;

    flex: 1 1 auto;

    min-width: 0;
}


.campo-busqueda-global > i {
    position: absolute;
    left: 0.9rem;

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

    pointer-events: none;
}


.campo-busqueda-global input {
    width: 100%;
    min-height: 44px;

    padding:
        0.55rem
        2.7rem
        0.55rem
        2.55rem;

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

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

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.campo-busqueda-global input:focus {
    border-color: var(--bs-primary);

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


.limpiar-busqueda {
    position: absolute;
    right: 0.8rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

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


.limpiar-busqueda:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}


.resumen-busqueda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
}


.resumen-busqueda > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}


.resumen-busqueda span {
    color: var(--bs-secondary-color);
}


.contador-resultados-busqueda {
    flex: 0 0 auto;

    padding: 0.3rem 0.6rem;

    border-radius: 999px;

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

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


.grupo-resultados-busqueda {
    margin-bottom: 1.4rem;
}


.titulo-grupo-busqueda {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 0.55rem;
}


.titulo-grupo-busqueda > div {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}


.titulo-grupo-busqueda h2 {
    margin: 0;

    font-size: 1rem;
}


.titulo-grupo-busqueda > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    padding: 0 0.45rem;

    border-radius: 999px;

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

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

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


.icono-grupo-busqueda {
    color: var(--bs-primary);
}


.lista-resultados-busqueda {
    overflow: hidden;

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

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


.resultado-busqueda {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.8rem 0.95rem;

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

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

    transition:
        background-color 0.15s ease;
}


.resultado-busqueda:last-child {
    border-bottom: 0;
}


.resultado-busqueda:hover {
    background: var(--bs-tertiary-bg);
}


.icono-resultado-busqueda {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 0.65rem;
}


.icono-resultado-tema {
    color: var(--bs-primary);

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


.icono-resultado-respuesta {
    color: var(--bs-success);

    background: rgba(
        var(--bs-success-rgb),
        0.09
    );
}


.icono-resultado-apartado {
    color: var(--bs-warning-text-emphasis);

    background: var(--bs-warning-bg-subtle);
}


.contenido-resultado-busqueda {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
}


.contenido-resultado-busqueda > strong {
    margin-bottom: 0.1rem;

    font-size: 0.94rem;
}


.extracto-resultado-busqueda {
    overflow: hidden;

    margin-bottom: 0.3rem;

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

    font-size: 0.82rem;

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


.meta-resultado-busqueda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;

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

    font-size: 0.73rem;
}


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


.flecha-resultado-busqueda {
    flex: 0 0 auto;

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

    font-size: 0.8rem;
}


.avatar-resultado-busqueda {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    overflow: hidden;

    border-radius: 50%;

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

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


.avatar-resultado-busqueda img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.estado-inicial-busqueda {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 3rem 1rem;

    text-align: center;
}


.icono-busqueda-grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin-bottom: 1rem;

    border-radius: 1rem;

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

    color: var(--bs-primary);

    font-size: 1.6rem;
}


.estado-inicial-busqueda h2 {
    margin-bottom: 0.35rem;

    font-size: 1.15rem;
}


.estado-inicial-busqueda p {
    max-width: 500px;

    margin-bottom: 1rem;

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


.ayudas-busqueda {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 0.45rem;
}


.ayudas-busqueda span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;

    padding: 0.35rem 0.6rem;

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

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

    font-size: 0.78rem;
}


.aviso-busqueda {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;

    padding: 0.85rem 1rem;

    border-radius: 0.75rem;
}


.aviso-busqueda-info {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
}


.aviso-busqueda > div {
    display: flex;
    flex-direction: column;
}


.aviso-busqueda span {
    font-size: 0.85rem;
}


.estado-vacio-busqueda {
    margin-top: 1rem;
}


@media (max-width: 767.98px) {
    .formulario-busqueda-global {
        flex-direction: column;
        align-items: stretch;
    }

    .formulario-busqueda-global
    .btn {
        width: 100%;
    }

    .resultado-busqueda {
        align-items: flex-start;

        gap: 0.65rem;

        padding: 0.75rem;
    }

    .icono-resultado-busqueda,
    .avatar-resultado-busqueda {
        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }

    .extracto-resultado-busqueda {
        white-space: normal;

        display: -webkit-box;

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

    .flecha-resultado-busqueda {
        display: none;
    }

    .resumen-busqueda {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.45rem;
    }
}

.resaltado-busqueda {
    padding: 0.05em 0.18em;

    border-radius: 0.2rem;

    background: var(--bs-warning-bg-subtle);
    color: inherit;

    font-weight: inherit;
}

.titulo-resultado-busqueda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;

    margin-bottom: 0.1rem;
}

.titulo-resultado-busqueda > strong {
    font-size: 0.94rem;
}

.badge-busqueda-no-leido {
    padding: 0.28rem 0.48rem;

    border-radius: 999px;

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

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

/* ============================================================
   FILTROS · BÚSQUEDA GLOBAL
   ============================================================ */

.filtros-busqueda-global {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;

    margin-top: -0.55rem;
    margin-bottom: 1.25rem;
}

.filtro-busqueda-global {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    min-height: 34px;

    padding: 0.35rem 0.65rem;

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

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

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

    text-decoration: none;

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

.filtro-busqueda-global:hover {
    border-color: rgba(
        var(--bs-primary-rgb),
        0.4
    );

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

.filtro-busqueda-global.activo {
    border-color: var(--bs-primary);

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

.filtro-busqueda-global.activo:hover {
    background: var(--bs-primary);
    color: #fff;
}


@media (max-width: 575.98px) {
    .filtros-busqueda-global {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 0.25rem;

        scrollbar-width: none;
    }

    .filtros-busqueda-global::-webkit-scrollbar {
        display: none;
    }

    .filtro-busqueda-global {
        flex: 0 0 auto;
    }
}

/* ============================================================
   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;
        -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;
}

.adjuntos-mensaje-chat {
    display: grid;

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

    gap: 0.45rem;

    width: min(
        100%,
        460px
    );

    margin-top: 0.55rem;
}

/* ============================================================
   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;
    }
}