/* =========================================================
   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;
}

/* 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 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 span {
    margin-top: 1px;
    font-size: 0.64rem;
    line-height: 1.4;
}

.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;
}

/* 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) {
    
    .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) {
    
    .acciones-principales-usuario {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .acciones-principales-usuario form,
    .acciones-principales-usuario .btn {
        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;
    }

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

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

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



/* ============================================================
   SUBNEXO934 · GESTIÓN DE USUARIOS · REDISEÑO VISUAL
   ============================================================ */

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


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

.cabecera-usuarios-admin-visual {
    position: relative;
    display: flex;
    min-height: 125px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 20px 24px;
    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-usuarios-admin-visual::after {
    position: absolute;
    top: -90px;
    right: -55px;
    width: 270px;
    height: 270px;
    content: "";
    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-usuarios-admin-contenido {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}


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


.cabecera-usuarios-admin-visual h1 {
    margin: 5px 0 6px;
    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-usuarios-admin-visual p {
    max-width: 720px;
    margin: 0;

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

    font-size: 0.88rem;
    line-height: 1.5;
}


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

.resumen-usuarios-admin-visual {
    position: relative;
    z-index: 1;

    display: grid;

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

    gap: 8px;

    flex: 0 0 auto;
}


.dato-resumen-usuarios-admin {
    display: grid;
    min-width: 120px;
    padding: 12px 14px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;

    backdrop-filter:
        blur(4px);
}


.dato-resumen-usuarios-admin strong {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}


.dato-resumen-usuarios-admin span {
    margin-top: 5px;

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

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


.dato-resumen-admin-alerta {
    background-color:
        rgb(185 28 28 / 22%);

    border-color:
        rgb(254 202 202 / 25%);
}


/* ============================================================
   BARRA DE ACCIONES
   ============================================================ */

.barra-acciones-usuarios-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px;
}


.barra-acciones-usuarios-admin-texto {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


.barra-acciones-usuarios-admin-texto i {
    color: var(--foro-azul-800);
}


/* ============================================================
   PANEL
   ============================================================ */

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

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

    border:
        1px solid
        #dfe7f0;

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


/* ============================================================
   LISTA
   ============================================================ */

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


/* ============================================================
   TARJETA USUARIO
   ============================================================ */

.tarjeta-usuario-admin {
    position: relative;
    overflow: hidden;

    background-color: #ffffff;

    border:
        1px solid
        #d8e2ed;

    border-radius: 15px;

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

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


.tarjeta-usuario-admin::before {
    position: absolute;
    z-index: 2;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;

    content: "";

    opacity: 0;

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

    border-radius:
        0 999px 999px 0;
}


.tarjeta-usuario-admin:hover {
    border-color: #becddd;

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


.tarjeta-usuario-admin:hover::before {
    opacity: 1;
}


.tarjeta-usuario-propio {
    border-color: #ccdaea;
}


.tarjeta-usuario-propio::before {
    opacity: 1;
}


/* ============================================================
   BLOQUEADO / INACTIVO
   ============================================================ */

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

    background:
        linear-gradient(
            90deg,
            rgb(254 242 242 / 65%),
            #ffffff 30%
        );
}


.tarjeta-usuario-bloqueado::before {
    opacity: 1;
    background-color: #dc2626;
}


.tarjeta-usuario-inactivo {
    opacity: 0.72;

    background-color: #f8fafc;
}


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

.cabecera-usuario-admin {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 13px 15px;

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

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


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


/* ============================================================
   AVATAR
   ============================================================ */

.avatar-usuario-admin {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    place-items: center;

    color: #ffffff;

    font-size: 0.75rem;
    font-weight: 800;

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

    border: 2px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 0 0 1px #d7e1eb,
        0 5px 12px rgb(15 23 42 / 10%);
}


.avatar-usuario-admin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.enlace-avatar-usuario-admin:hover
.avatar-usuario-admin {
    box-shadow:
        0 0 0 3px
        rgb(32 70 111 / 12%),
        0 5px 13px
        rgb(15 23 42 / 12%);
}


/* ============================================================
   IDENTIDAD
   ============================================================ */

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


.nombre-usuario-admin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}


.nombre-usuario-admin > a {
    color: var(--foro-texto);

    font-size: 0.9rem;
    font-weight: 760;

    text-decoration: none;
}


.nombre-usuario-admin > a:hover {
    color: var(--foro-azul-800);
    text-decoration: underline;
    text-underline-offset: 2px;
}


.meta-identidad-admin {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 14px;

    margin-top: 5px;

    color: var(--foro-secundario);

    font-size: 0.67rem;
}


.meta-identidad-admin span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
}


/* ============================================================
   ESTADO
   ============================================================ */

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


.estado-principal-usuario .etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


.etiqueta-estado-bloqueado {
    color: #991b1b;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
}


/* ============================================================
   CUERPO
   ============================================================ */

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


/* ============================================================
   RESUMEN DE DATOS
   ============================================================ */

.resumen-usuario-admin {
    display: grid;

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

    gap: 9px;
}


.dato-resumen-admin {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 9px;

    padding: 10px;

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

    border:
        1px solid
        #e0e7ef;

    border-radius: 11px;
}


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


.dato-resumen-admin small {
    color: #8490a0;
    font-size: 0.61rem;
}


.dato-resumen-admin strong {
    margin-top: 1px;

    color: var(--foro-texto);

    font-size: 0.73rem;
    font-weight: 720;
}


.dato-resumen-admin > div > span {
    margin-top: 2px;

    color: var(--foro-secundario);

    font-size: 0.62rem;
    line-height: 1.35;
}


.texto-estado-advertencia {
    color: #a16207 !important;
}


/* ============================================================
   AVISOS
   ============================================================ */

.avisos-usuario-admin {
    display: grid;
    gap: 7px;

    margin-top: 11px;
}


.aviso-usuario-admin {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 9px 11px;

    border: 1px solid;
    border-radius: 9px;
}


.aviso-usuario-admin > i {
    margin-top: 1px;
}


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


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


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


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


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


.aviso-admin-temporal {
    color: #166534;
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}


.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 15px;

    background-color: #fafbfd;

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


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


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


.boton-mas-acciones {
    border:
        1px solid
        #dce4ed;
}


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

.panel-acciones-avanzadas {
    padding: 13px 15px;

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

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


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


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


.accion-no-disponible {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 9px;

    color: var(--foro-secundario);

    font-size: 0.68rem;

    background-color: #ffffff;

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

    border-radius: 8px;
}


/* ============================================================
   FORMULARIO ADMINISTRACIÓN TEMPORAL
   ============================================================ */

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


.form-admin-temporal-nuevo {
    display: grid;

    grid-template-columns:
        130px
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        auto;

    align-items: end;

    gap: 10px;

    padding: 12px;

    background-color: #ffffff;

    border:
        1px solid
        #d9e3ed;

    border-radius: 11px;

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


.form-admin-temporal-nuevo .campo {
    margin: 0;
}


.form-admin-temporal-nuevo label {
    margin-bottom: 4px;

    font-size: 0.68rem;

    font-weight: 650;
}


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

.estado-vacio-admin-usuarios {
    display: grid;
    justify-items: center;

    padding: 44px 22px;

    text-align: center;
}


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

    width: 58px;
    height: 58px;

    margin-bottom: 12px;

    place-items: center;

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

    font-size: 1.4rem;

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

    border-radius: 16px;
}


.estado-vacio-admin-usuarios h2 {
    margin: 0 0 5px;

    font-size: 1.05rem;
    font-weight: 750;
}


.estado-vacio-admin-usuarios p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.78rem;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .resumen-usuario-admin {
        grid-template-columns: 1fr;
    }


    .form-admin-temporal-nuevo {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 767px) {

    .cabecera-usuarios-admin-visual {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding: 18px;
    }


    .resumen-usuarios-admin-visual {
        width: 100%;
    }


    .barra-acciones-usuarios-admin {
        align-items: stretch;
        flex-direction: column;
    }


    .barra-acciones-usuarios-admin > .btn {
        width: 100%;
    }


    .cabecera-usuario-admin {
        align-items: flex-start;
    }


    .estado-principal-usuario {
        margin-left: auto;
    }


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


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


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


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


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


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


/* ============================================================
   MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 520px) {

    .cabecera-usuarios-admin-visual {
        padding: 17px;
        border-radius: 15px;
    }


    .resumen-usuarios-admin-visual {
        grid-template-columns: 1fr 1fr;
    }


    .dato-resumen-usuarios-admin {
        min-width: 0;
        padding: 10px;
    }


    .panel-usuarios-admin-visual {
        padding: 7px;
    }


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


    .identidad-usuario-admin {
        width: 100%;
    }


    .avatar-usuario-admin {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }


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


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


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


    .dato-resumen-admin {
        padding: 8px;
    }


    .pie-usuario-admin {
        padding: 9px 10px;
    }


    .panel-acciones-avanzadas {
        padding: 10px;
    }
}
/* ============================================================
   SUBNEXO934 · INVITACIONES · REDISEÑO VISUAL
   ============================================================ */


.pagina-invitaciones-admin {
    display: grid;
    gap: 16px;
}


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

.cabecera-invitaciones-admin {
    position: relative;

    display: flex;
    min-height: 125px;

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

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-invitaciones-admin::after {
    position: absolute;

    top: -80px;
    right: -55px;

    width: 250px;
    height: 250px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-invitaciones-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


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


.cabecera-invitaciones-admin h1 {
    margin: 5px 0 6px;

    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-invitaciones-admin p {
    max-width: 680px;

    margin: 0;

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

    font-size: 0.88rem;

    line-height: 1.5;
}


/* ============================================================
   CONTADOR
   ============================================================ */

.resumen-invitaciones-admin {
    position: relative;

    z-index: 1;

    flex: 0 0 auto;
}


.dato-resumen-invitaciones {
    display: grid;

    min-width: 125px;

    padding: 12px 14px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;

    backdrop-filter:
        blur(4px);
}


.dato-resumen-invitaciones strong {
    color: #ffffff;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1;
}


.dato-resumen-invitaciones span {
    margin-top: 5px;

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

    font-size: 0.68rem;

    font-weight: 650;
}


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

.barra-acciones-invitaciones {
    display: flex;

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

    gap: 14px;

    padding: 0 2px;
}


.barra-acciones-invitaciones-texto {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


.barra-acciones-invitaciones-texto i {
    color: var(--foro-azul-800);
}


/* ============================================================
   REJILLA
   ============================================================ */

.rejilla-invitaciones-visual {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.36fr)
        minmax(0, 1fr);

    align-items: start;

    gap: 14px;
}


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

.panel-nueva-invitacion-visual {
    position: sticky;

    top: 82px;

    padding: 18px;

    border-color: #dce5ee;

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


.cabecera-panel-invitacion {
    display: flex;

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

    gap: 14px;

    margin-bottom: 14px;

    padding-bottom: 13px;

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


.cabecera-panel-invitacion h2 {
    margin: 3px 0;

    font-size: 1.08rem;

    font-weight: 760;
}


.cabecera-panel-invitacion p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.74rem;

    line-height: 1.45;
}


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


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


.accion-crear-invitacion {
    margin-top: 2px;
}


/* ============================================================
   NOTA DE SEGURIDAD
   ============================================================ */

.nota-seguridad-invitacion-visual {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 15px;

    padding: 10px;

    color: #475569;

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

    border:
        1px solid
        #dce4ed;

    border-radius: 10px;
}


.icono-seguridad-invitacion {
    display: grid;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    place-items: center;

    color: #166534;

    background-color: #dcfce7;

    border-radius: 8px;
}


.nota-seguridad-invitacion-visual > div {
    display: grid;
}


.nota-seguridad-invitacion-visual strong {
    font-size: 0.7rem;
}


.nota-seguridad-invitacion-visual span {
    margin-top: 2px;

    color: var(--foro-secundario);

    font-size: 0.64rem;

    line-height: 1.4;
}


/* ============================================================
   HISTORIAL
   ============================================================ */

.panel-historial-invitaciones-visual {
    padding: 14px;

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

    border-color: #dce5ee;

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


.cabecera-historial-invitaciones-visual {
    display: flex;

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

    gap: 14px;

    margin-bottom: 12px;

    padding: 2px 3px 12px;

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


.cabecera-historial-invitaciones-visual h2 {
    margin: 3px 0;

    font-size: 1.08rem;

    font-weight: 760;
}


.cabecera-historial-invitaciones-visual p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.72rem;
}


.contador-historial-invitaciones {
    display: grid;

    min-width: 34px;
    height: 34px;

    padding: 0 9px;

    place-items: center;

    color: #ffffff;

    font-size: 0.74rem;

    font-weight: 800;

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

    border-radius: 999px;
}


/* ============================================================
   LISTADO
   ============================================================ */

.lista-invitaciones-visual {
    display: grid;

    gap: 9px;
}


.invitacion-visual {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 12px;

    padding: 11px 12px;

    background-color: #ffffff;

    border:
        1px solid
        #dce5ee;

    border-radius: 12px;

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

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


.invitacion-visual:hover {
    border-color: #c4d3e3;

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

    transform:
        translateY(-1px);
}


/* ============================================================
   ICONOS DE ESTADO
   ============================================================ */

.icono-estado-invitacion-visual {
    display: grid;

    width: 40px;
    height: 40px;

    place-items: center;

    border-radius: 10px;
}


.icono-estado-invitacion-pendiente {
    color: var(--foro-azul-800);

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


.icono-estado-invitacion-utilizada {
    color: #166534;

    background-color: #dcfce7;
}


.icono-estado-invitacion-revocada {
    color: #991b1b;

    background-color: #fee2e2;
}


.icono-estado-invitacion-caducada {
    color: #92400e;

    background-color: #fef3c7;
}


/* ============================================================
   ESTADOS DE TARJETA
   ============================================================ */

.invitacion-visual-revocada {
    background:
        linear-gradient(
            90deg,
            #fef2f2,
            #ffffff 32%
        );
}


.invitacion-visual-caducada {
    background:
        linear-gradient(
            90deg,
            #fffbeb,
            #ffffff 32%
        );
}


.invitacion-visual-utilizada {
    background:
        linear-gradient(
            90deg,
            #f0fdf4,
            #ffffff 32%
        );
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.contenido-invitacion-visual {
    min-width: 0;
}


.titulo-invitacion-visual {
    display: flex;

    min-width: 0;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.titulo-invitacion-visual h3 {
    overflow: hidden;

    margin: 0;

    color: var(--foro-texto);

    font-size: 0.82rem;

    font-weight: 730;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.titulo-invitacion-visual .etiqueta {
    padding: 2px 6px;

    font-size: 0.58rem;
}


.datos-invitacion-visual {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 3px 12px;

    margin-top: 5px;

    color: var(--foro-secundario);

    font-size: 0.62rem;
}


.datos-invitacion-visual span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


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

.acciones-invitacion-visual {
    display: flex;

    align-items: center;

    gap: 6px;
}


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


.estado-final-invitacion {
    display: grid;

    width: 29px;
    height: 29px;

    place-items: center;

    color: #64748b;

    background-color: #f1f5f9;

    border-radius: 8px;
}


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

.estado-vacio-invitaciones-visual {
    display: grid;

    min-height: 240px;

    align-content: center;

    justify-items: center;

    padding: 30px;

    text-align: center;
}


.icono-vacio-invitaciones {
    display: grid;

    width: 56px;
    height: 56px;

    margin-bottom: 11px;

    place-items: center;

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

    font-size: 1.35rem;

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

    border-radius: 15px;
}


.estado-vacio-invitaciones-visual h2 {
    margin: 0 0 5px;

    font-size: 1rem;

    font-weight: 750;
}


.estado-vacio-invitaciones-visual p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


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

@media (max-width: 900px) {

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


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


@media (max-width: 767px) {

    .cabecera-invitaciones-admin {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 18px;
    }


    .resumen-invitaciones-admin {
        width: 100%;
    }


    .dato-resumen-invitaciones {
        width: 100%;
    }


    .barra-acciones-invitaciones {
        align-items: stretch;

        flex-direction: column;
    }


    .barra-acciones-invitaciones .btn {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .cabecera-invitaciones-admin {
        padding: 17px;

        border-radius: 15px;
    }


    .invitacion-visual {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 9px;

        padding: 10px;
    }


    .icono-estado-invitacion-visual {
        width: 36px;
        height: 36px;
    }


    .acciones-invitacion-visual {
        grid-column:
            2 / 3;

        justify-content: flex-end;
    }


    .datos-invitacion-visual {
        display: grid;

        gap: 2px;
    }


    .titulo-invitacion-visual h3 {
        white-space: normal;
    }
}

/* ============================================================
   SUBNEXO934 · RECUPERACIONES DE CONTRASEÑA
   ============================================================ */

.pagina-recuperaciones-admin {
    display: grid;
    gap: 16px;
}


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

.cabecera-recuperaciones-admin {
    position: relative;

    display: flex;
    min-height: 125px;

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

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-recuperaciones-admin::after {
    position: absolute;

    top: -80px;
    right: -55px;

    width: 250px;
    height: 250px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-recuperaciones-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


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


.cabecera-recuperaciones-admin h1 {
    margin: 5px 0 6px;

    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-recuperaciones-admin p {
    max-width: 700px;

    margin: 0;

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

    font-size: 0.88rem;

    line-height: 1.5;
}


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

.resumen-recuperaciones-admin {
    position: relative;

    z-index: 1;

    flex: 0 0 auto;
}


.dato-resumen-recuperaciones {
    display: grid;

    min-width: 125px;

    padding: 12px 14px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;

    backdrop-filter:
        blur(4px);
}


.dato-resumen-recuperaciones strong {
    color: #ffffff;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1;
}


.dato-resumen-recuperaciones span {
    margin-top: 5px;

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

    font-size: 0.68rem;

    font-weight: 650;
}


/* ============================================================
   BARRA DE ACCIONES
   ============================================================ */

.barra-acciones-recuperaciones {
    display: flex;

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

    gap: 14px;

    padding: 0 2px;
}


.barra-acciones-recuperaciones-texto {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


.barra-acciones-recuperaciones-texto i {
    color: var(--foro-azul-800);
}


/* ============================================================
   PANEL
   ============================================================ */

.panel-recuperaciones-visual {
    padding: 12px;

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

    border:
        1px solid
        #dfe7f0;

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


/* ============================================================
   LISTA
   ============================================================ */

.lista-recuperaciones-visual {
    display: grid;

    gap: 10px;
}


/* ============================================================
   TARJETA
   ============================================================ */

.recuperacion-visual {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 12px;

    padding: 12px 13px;

    background-color: #ffffff;

    border:
        1px solid
        #dce5ee;

    border-radius: 13px;

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

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


.recuperacion-visual:hover {
    border-color: #c3d2e2;

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

    transform:
        translateY(-1px);
}


/* ============================================================
   ICONOS
   ============================================================ */

.icono-recuperacion-visual {
    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    font-size: 1rem;

    border-radius: 11px;
}


.icono-recuperacion-pendiente {
    color: var(--foro-azul-800);

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


.icono-recuperacion-utilizada {
    color: #166534;

    background-color: #dcfce7;
}


.icono-recuperacion-revocada {
    color: #991b1b;

    background-color: #fee2e2;
}


.icono-recuperacion-caducada {
    color: #92400e;

    background-color: #fef3c7;
}


/* ============================================================
   ESTADOS
   ============================================================ */

.recuperacion-utilizada {
    background:
        linear-gradient(
            90deg,
            #f0fdf4,
            #ffffff 32%
        );
}


.recuperacion-revocada {
    background:
        linear-gradient(
            90deg,
            #fef2f2,
            #ffffff 32%
        );
}


.recuperacion-caducada {
    background:
        linear-gradient(
            90deg,
            #fffbeb,
            #ffffff 32%
        );
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.contenido-recuperacion-visual {
    min-width: 0;
}


.titulo-recuperacion-visual {
    display: flex;

    min-width: 0;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.titulo-recuperacion-visual h2 {
    overflow: hidden;

    margin: 0;

    color: var(--foro-texto);

    font-size: 0.86rem;

    font-weight: 740;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.titulo-recuperacion-visual .etiqueta {
    padding: 2px 6px;

    font-size: 0.58rem;
}


.datos-recuperacion-visual {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 3px 14px;

    margin-top: 5px;

    color: var(--foro-secundario);

    font-size: 0.63rem;
}


.datos-recuperacion-visual span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


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

.acciones-recuperacion-visual {
    display: flex;

    align-items: center;
}


.acciones-recuperacion-visual form {
    margin: 0;
}


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

.estado-vacio-recuperaciones {
    display: grid;

    min-height: 230px;

    align-content: center;

    justify-items: center;

    padding: 30px;

    text-align: center;
}


.icono-vacio-recuperaciones {
    display: grid;

    width: 56px;
    height: 56px;

    margin-bottom: 11px;

    place-items: center;

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

    font-size: 1.35rem;

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

    border-radius: 15px;
}


.estado-vacio-recuperaciones h2 {
    margin: 0 0 5px;

    color: var(--foro-texto);

    font-size: 1rem;

    font-weight: 750;
}


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

    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


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

@media (max-width: 767px) {

    .cabecera-recuperaciones-admin {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 18px;
    }


    .resumen-recuperaciones-admin {
        width: 100%;
    }


    .dato-resumen-recuperaciones {
        width: 100%;
    }


    .barra-acciones-recuperaciones {
        align-items: stretch;

        flex-direction: column;
    }


    .barra-acciones-recuperaciones .btn {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .cabecera-recuperaciones-admin {
        padding: 17px;

        border-radius: 15px;
    }


    .panel-recuperaciones-visual {
        padding: 7px;
    }


    .recuperacion-visual {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 9px;

        padding: 10px;
    }


    .icono-recuperacion-visual {
        width: 36px;
        height: 36px;
    }


    .acciones-recuperacion-visual {
        grid-column:
            2 / 3;

        justify-content: flex-end;
    }


    .datos-recuperacion-visual {
        display: grid;

        gap: 2px;
    }


    .titulo-recuperacion-visual h2 {
        white-space: normal;
    }
}

/* ============================================================
   SUBNEXO934 · OPERACIONES DESTRUCTIVAS
   ============================================================ */

.pagina-operacion-destructiva {
    display: grid;

    min-height: 58vh;

    place-items: start center;

    padding: 26px 0;
}


.tarjeta-operacion-destructiva {
    width: min(
        100%,
        820px
    );

    overflow: hidden;

    background-color: #ffffff;

    border:
        1px solid
        #fecaca;

    border-radius: 18px;

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


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

.cabecera-operacion-destructiva {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 22px 24px;

    background:
        linear-gradient(
            135deg,
            #fff7f7,
            #fef2f2
        );

    border-bottom:
        1px solid
        #fecaca;
}


.icono-operacion-destructiva {
    display: grid;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    place-items: center;

    color: #b91c1c;

    font-size: 1.25rem;

    background-color: #fee2e2;

    border:
        1px solid
        #fecaca;

    border-radius: 13px;
}


.cabecera-operacion-destructiva
.eyebrow {
    color: #b91c1c;
}


.cabecera-operacion-destructiva
h1 {
    margin: 4px 0 5px;

    color: #7f1d1d;

    font-size:
        clamp(
            1.35rem,
            3vw,
            1.75rem
        );

    font-weight: 780;
}


.cabecera-operacion-destructiva
p {
    margin: 0;

    color: #7c4a4a;

    font-size: 0.8rem;

    line-height: 1.5;
}


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

.resumen-operacion-destructiva {
    display: grid;

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

    gap: 9px;

    padding: 16px 20px;

    background-color: #fafbfd;

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


.dato-operacion-destructiva {
    display: grid;

    justify-items: center;

    padding: 11px 8px;

    background-color: #ffffff;

    border:
        1px solid
        #e3e9ef;

    border-radius: 10px;
}


.dato-operacion-destructiva
strong {
    color: var(--foro-texto);

    font-size: 1.15rem;

    font-weight: 800;
}


.dato-operacion-destructiva
span {
    margin-top: 3px;

    color: var(--foro-secundario);

    font-size: 0.63rem;

    font-weight: 650;
}


/* ============================================================
   AVISO
   ============================================================ */

.aviso-operacion-destructiva {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin:
        18px
        20px
        0;

    padding: 12px 14px;

    color: #991b1b;

    background-color: #fef2f2;

    border:
        1px solid
        #fecaca;

    border-radius: 11px;
}


.aviso-operacion-destructiva
> i {
    margin-top: 1px;

    font-size: 1rem;
}


.aviso-operacion-destructiva
> div {
    display: grid;

    gap: 3px;
}


.aviso-operacion-destructiva
strong {
    font-size: 0.76rem;
}


.aviso-operacion-destructiva
span {
    font-size: 0.68rem;

    line-height: 1.45;
}


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

.formulario-operacion-destructiva {
    display: grid;

    gap: 18px;

    padding: 20px;
}


.formulario-operacion-destructiva
.campo {
    max-width: 520px;
}


.formulario-operacion-destructiva
.form-label {
    margin-bottom: 5px;

    font-size: 0.76rem;

    font-weight: 700;
}


.formulario-operacion-destructiva
.form-control {
    min-height: 42px;

    border-color: #d2dce7;

    border-radius: 9px;
}


.formulario-operacion-destructiva
.form-control:focus {
    border-color: #b91c1c;

    box-shadow:
        0 0 0 3px
        rgb(185 28 28 / 8%);
}


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

.acciones-operacion-destructiva {
    display: flex;

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

    gap: 12px;

    padding-top: 2px;
}


.acciones-operacion-destructiva
.btn {
    min-width: 145px;
}


/* ============================================================
   SIN ELEMENTOS
   ============================================================ */

.estado-sin-elementos-destructiva {
    display: grid;

    justify-items: center;

    padding: 38px 20px;

    text-align: center;
}


.icono-sin-elementos-destructiva {
    display: grid;

    width: 52px;
    height: 52px;

    margin-bottom: 11px;

    place-items: center;

    color: #166534;

    font-size: 1.25rem;

    background-color: #dcfce7;

    border-radius: 14px;
}


.estado-sin-elementos-destructiva
h2 {
    margin: 0 0 5px;

    color: var(--foro-texto);

    font-size: 1rem;

    font-weight: 750;
}


.estado-sin-elementos-destructiva
p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.75rem;
}


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

@media (max-width: 767px) {

    .pagina-operacion-destructiva {
        padding: 12px 0;
    }


    .cabecera-operacion-destructiva {
        padding: 18px;
    }


    .resumen-operacion-destructiva {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        padding: 14px;
    }


    .aviso-operacion-destructiva {
        margin:
            14px
            14px
            0;
    }


    .formulario-operacion-destructiva {
        padding: 14px;
    }
}


@media (max-width: 520px) {

    .tarjeta-operacion-destructiva {
        border-radius: 14px;
    }


    .cabecera-operacion-destructiva {
        gap: 12px;

        padding: 15px;
    }


    .icono-operacion-destructiva {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .acciones-operacion-destructiva {
        display: grid;

        grid-template-columns: 1fr;
    }


    .acciones-operacion-destructiva
    .btn {
        width: 100%;
    }
}

/* ============================================================
   SUBNEXO934 · CAMBIOS DE CORREO · REDISEÑO VISUAL
   ============================================================ */

.pagina-cambios-correo-admin {
    display: grid;
    gap: 16px;
}


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

.cabecera-cambios-correo-admin {
    position: relative;

    display: flex;
    min-height: 125px;

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

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-cambios-correo-admin::after {
    position: absolute;

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

    width: 260px;
    height: 260px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-cambios-correo-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


.cabecera-cambios-correo-admin .eyebrow {
    color:
        rgb(255 255 255 / 66%);
}


.cabecera-cambios-correo-admin h1 {
    margin: 5px 0 6px;

    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-cambios-correo-admin p {
    max-width: 720px;

    margin: 0;

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

    font-size: 0.88rem;

    line-height: 1.5;
}


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

.resumen-cambios-correo-admin {
    position: relative;

    z-index: 1;

    display: grid;

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

    gap: 8px;
}


.dato-resumen-cambio-correo {
    display: grid;

    min-width: 115px;

    padding: 12px 14px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;

    backdrop-filter:
        blur(4px);
}


.dato-resumen-cambio-correo strong {
    color: #ffffff;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1;
}


.dato-resumen-cambio-correo span {
    margin-top: 5px;

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

    font-size: 0.67rem;

    font-weight: 650;
}


/* ============================================================
   BARRA DE ACCIONES
   ============================================================ */

.barra-acciones-cambios-correo {
    display: flex;

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

    gap: 14px;

    padding: 0 2px;
}


.barra-acciones-cambios-correo-texto {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


.barra-acciones-cambios-correo-texto i {
    color: var(--foro-azul-800);
}


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

.panel-cambios-correo {
    padding: 14px;

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

    border-color: #dce5ee;

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


/* ============================================================
   CABECERA DE BLOQUE
   ============================================================ */

.cabecera-bloque-cambio-correo {
    display: flex;

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

    gap: 14px;

    margin-bottom: 12px;

    padding: 2px 3px 12px;

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


.cabecera-bloque-cambio-correo h2 {
    margin: 3px 0;

    font-size: 1.08rem;

    font-weight: 760;
}


.cabecera-bloque-cambio-correo p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.72rem;
}


.contador-bloque-cambio-correo {
    display: grid;

    min-width: 34px;
    height: 34px;

    padding: 0 9px;

    place-items: center;

    color: #ffffff;

    font-size: 0.74rem;

    font-weight: 800;

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

    border-radius: 999px;
}


.contador-bloque-pendiente {
    background:
        linear-gradient(
            135deg,
            #a16207,
            #ca8a04
        );
}


/* ============================================================
   LISTADO
   ============================================================ */

.lista-cambios-correo {
    display: grid;

    gap: 11px;
}


/* ============================================================
   TARJETA
   ============================================================ */

.tarjeta-cambio-correo {
    overflow: hidden;

    background-color: #ffffff;

    border:
        1px solid
        #dce5ee;

    border-radius: 14px;

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


.tarjeta-cambio-correo-pendiente {
    border-color: #eadba9;
}


.tarjeta-cambio-correo-revisada {
    border-color: #dde5ed;
}


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

.cabecera-tarjeta-cambio-correo {
    display: flex;

    min-height: 66px;

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

    gap: 14px;

    padding: 11px 13px;

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

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


.identidad-cambio-correo {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 10px;
}


.avatar-cambio-correo {
    display: grid;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    overflow: hidden;

    place-items: center;

    color: #ffffff;

    font-size: 0.68rem;

    font-weight: 800;

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

    border-radius: 50%;
}


.avatar-cambio-correo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.datos-cambio-correo {
    display: grid;

    min-width: 0;
}


.nombre-cambio-correo {
    color: var(--foro-texto);

    font-size: 0.83rem;

    font-weight: 740;

    text-decoration: none;
}


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


.datos-cambio-correo > span {
    margin-top: 2px;

    color: var(--foro-secundario);

    font-size: 0.64rem;
}


/* ============================================================
   CUERPO
   ============================================================ */

.cuerpo-cambio-correo {
    padding: 13px;
}


.resumen-cambio-correo {
    display: grid;

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

    gap: 8px;
}


.dato-cambio-correo {
    display: flex;

    min-width: 0;

    align-items: flex-start;

    gap: 8px;

    padding: 9px;

    background-color: #f8fafc;

    border:
        1px solid
        #e1e8ef;

    border-radius: 10px;
}


.dato-cambio-correo-nuevo {
    background-color: #eff6ff;

    border-color: #bfdbfe;
}


.icono-dato-cambio-correo {
    display: grid;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    place-items: center;

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

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

    border-radius: 8px;
}


.dato-cambio-correo > div {
    display: grid;

    min-width: 0;
}


.dato-cambio-correo small {
    color: #8490a0;

    font-size: 0.6rem;
}


.dato-cambio-correo strong {
    overflow-wrap: anywhere;

    margin-top: 2px;

    color: var(--foro-texto);

    font-size: 0.7rem;

    font-weight: 700;
}


.dato-cambio-correo span {
    margin-top: 2px;

    color: var(--foro-secundario);

    font-size: 0.61rem;
}


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

.acciones-cambio-correo {
    display: flex;

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

    gap: 12px;

    padding: 11px 13px;

    background-color: #fafbfd;

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


.form-aprobar-cambio-correo {
    display: flex;

    min-width: 0;

    flex: 1;

    align-items: flex-end;

    gap: 9px;
}


.form-aprobar-cambio-correo .campo {
    min-width: 220px;

    flex: 1;

    margin: 0;
}


.form-aprobar-cambio-correo label {
    margin-bottom: 3px;

    font-size: 0.64rem;

    font-weight: 650;
}


.acciones-secundarias-cambio-correo {
    display: flex;

    align-items: center;

    gap: 7px;
}


.acciones-secundarias-cambio-correo form {
    margin: 0;
}


/* ============================================================
   RECHAZO
   ============================================================ */

.panel-rechazo-cambio-correo {
    padding: 12px 13px;

    background-color: #fff7f7;

    border-top:
        1px solid
        #fecaca;
}


.cabecera-rechazo-cambio-correo {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-bottom: 10px;

    color: #991b1b;
}


.cabecera-rechazo-cambio-correo > div {
    display: grid;
}


.cabecera-rechazo-cambio-correo strong {
    font-size: 0.7rem;
}


.cabecera-rechazo-cambio-correo span {
    margin-top: 2px;

    font-size: 0.63rem;
}


.form-rechazo-cambio-correo {
    display: grid;

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

    align-items: end;

    gap: 10px;
}


/* ============================================================
   OBSERVACIÓN
   ============================================================ */

.observacion-cambio-correo {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 10px;

    padding: 9px 10px;

    color: #475569;

    background-color: #f8fafc;

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

    border-radius: 9px;
}


.observacion-cambio-correo > div {
    display: grid;
}


.observacion-cambio-correo strong {
    font-size: 0.67rem;
}


.observacion-cambio-correo span {
    margin-top: 2px;

    font-size: 0.63rem;
}


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

.estado-vacio-cambios-correo {
    display: grid;

    min-height: 170px;

    align-content: center;

    justify-items: center;

    padding: 26px;

    text-align: center;
}


.icono-vacio-cambios-correo {
    display: grid;

    width: 52px;
    height: 52px;

    margin-bottom: 10px;

    place-items: center;

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

    font-size: 1.2rem;

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

    border-radius: 14px;
}


.estado-vacio-cambios-correo h2 {
    margin: 0 0 4px;

    font-size: 0.98rem;

    font-weight: 750;
}


.estado-vacio-cambios-correo p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.74rem;
}


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

@media (max-width: 900px) {

    .resumen-cambio-correo {
        grid-template-columns: 1fr;
    }


    .acciones-cambio-correo {
        align-items: stretch;

        flex-direction: column;
    }


    .form-aprobar-cambio-correo {
        width: 100%;
    }
}


@media (max-width: 767px) {

    .cabecera-cambios-correo-admin {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 18px;
    }


    .resumen-cambios-correo-admin {
        width: 100%;
    }


    .barra-acciones-cambios-correo {
        align-items: stretch;

        flex-direction: column;
    }


    .barra-acciones-cambios-correo .btn {
        width: 100%;
    }


    .form-aprobar-cambio-correo {
        align-items: stretch;

        flex-direction: column;
    }


    .form-aprobar-cambio-correo .campo {
        min-width: 0;
    }


    .form-aprobar-cambio-correo .btn {
        width: 100%;
    }


    .acciones-secundarias-cambio-correo {
        width: 100%;
    }


    .acciones-secundarias-cambio-correo .btn {
        flex: 1;
    }


    .form-rechazo-cambio-correo {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 520px) {

    .cabecera-cambios-correo-admin {
        padding: 17px;

        border-radius: 15px;
    }


    .resumen-cambios-correo-admin {
        grid-template-columns: 1fr 1fr;
    }


    .panel-cambios-correo {
        padding: 8px;
    }


    .cabecera-tarjeta-cambio-correo {
        align-items: flex-start;

        flex-direction: column;
    }


    .cuerpo-cambio-correo {
        padding: 10px;
    }


    .acciones-cambio-correo {
        padding: 10px;
    }
}
/* ============================================================
   OPERACIONES DESTRUCTIVAS · 4 CONTADORES
   ============================================================ */

.resumen-operacion-destructiva-cuatro {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


@media (max-width: 767px) {

    .resumen-operacion-destructiva-cuatro {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}
/* ============================================================
   SUBNEXO934 · INVITACIÓN CREADA
   ============================================================ */

.pagina-invitacion-creada {
    display: grid;

    min-height: 58vh;

    place-items: start center;

    padding: 20px 0;
}


.resultado-invitacion-visual {
    display: grid;

    width: min(
        100%,
        850px
    );

    gap: 16px;
}


/* ============================================================
   CABECERA DE ÉXITO
   ============================================================ */

.cabecera-invitacion-creada-visual {
    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    overflow: hidden;

    padding: 21px 23px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-invitacion-creada-visual::after {
    position: absolute;

    top: -85px;
    right: -50px;

    width: 230px;
    height: 230px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.icono-invitacion-creada-visual {
    position: relative;

    z-index: 1;

    display: grid;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    place-items: center;

    color: #166534;

    font-size: 1.55rem;

    background-color: #dcfce7;

    border:
        3px solid
        rgb(255 255 255 / 85%);

    border-radius: 50%;

    box-shadow:
        0 6px 16px
        rgb(0 0 0 / 15%);
}


.cabecera-invitacion-creada-visual > div {
    position: relative;

    z-index: 1;
}


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


.cabecera-invitacion-creada-visual
h1 {
    margin: 4px 0 5px;

    color: #ffffff;

    font-size:
        clamp(
            1.4rem,
            3vw,
            1.85rem
        );

    font-weight: 780;
}


.cabecera-invitacion-creada-visual
p {
    margin: 0;

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

    font-size: 0.82rem;
}


/* ============================================================
   PANEL
   ============================================================ */

.tarjeta-invitacion-creada-visual {
    padding: 18px;

    border-color: #dce5ee;

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


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

.resumen-invitacion-creada-visual {
    display: grid;

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

    gap: 10px;

    margin-bottom: 16px;
}


.dato-invitacion-creada-visual {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 10px;

    padding: 11px;

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

    border:
        1px solid
        #dce5ee;

    border-radius: 11px;
}


.icono-dato-invitacion-visual {
    display: grid;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    place-items: center;

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

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

    border-radius: 9px;
}


.dato-invitacion-creada-visual > div {
    display: grid;

    min-width: 0;
}


.dato-invitacion-creada-visual small {
    color: var(--foro-secundario);

    font-size: 0.62rem;
}


.dato-invitacion-creada-visual strong {
    overflow-wrap: anywhere;

    margin-top: 2px;

    color: var(--foro-texto);

    font-size: 0.75rem;

    font-weight: 720;
}


/* ============================================================
   BLOQUE DEL ENLACE
   ============================================================ */

.bloque-enlace-invitacion-visual {
    padding: 14px;

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

    border:
        1px solid
        #d8e2ed;

    border-radius: 12px;
}


.cabecera-enlace-invitacion {
    display: flex;

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

    gap: 12px;

    margin-bottom: 10px;
}


.cabecera-enlace-invitacion h2 {
    margin: 2px 0 0;

    font-size: 0.96rem;

    font-weight: 750;
}


.icono-enlace-invitacion {
    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

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

    background-color: #ffffff;

    border:
        1px solid
        #dce5ee;

    border-radius: 9px;
}


.control-copiar-invitacion-visual {
    display: grid;

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

    align-items: stretch;

    gap: 9px;
}


.control-enlace-invitacion-visual {
    min-height: 86px;

    resize: none;

    padding: 10px;

    color: #334155;

    font-size: 0.72rem;

    line-height: 1.45;

    background-color: #ffffff;

    border-color: #cfd9e5;

    border-radius: 9px;
}


.control-enlace-invitacion-visual:focus {
    border-color:
        var(--foro-azul-800);

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


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


.boton-copiado-correcto {
    background-color: #15803d !important;

    border-color: #15803d !important;
}


.resultado-copia-invitacion {
    min-height: 18px;

    margin: 6px 0 0;

    color: #166534;

    font-size: 0.68rem;

    font-weight: 650;
}


/* ============================================================
   AVISO
   ============================================================ */

.aviso-enlace-unico-visual {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 15px;

    padding: 11px 12px;

    color: #854d0e;

    background-color: #fffbeb;

    border:
        1px solid
        #fde68a;

    border-radius: 10px;
}


.icono-aviso-enlace-unico {
    display: grid;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    place-items: center;

    color: #92400e;

    background-color: #fef3c7;

    border-radius: 8px;
}


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


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


.aviso-enlace-unico-visual span {
    margin-top: 2px;

    font-size: 0.64rem;

    line-height: 1.45;
}


/* ============================================================
   VOLVER
   ============================================================ */

.acciones-invitacion-creada {
    display: flex;

    justify-content: flex-start;
}


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

@media (max-width: 767px) {

    .pagina-invitacion-creada {
        padding: 10px 0;
    }


    .cabecera-invitacion-creada-visual {
        padding: 18px;
    }


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


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


    .boton-copiar-invitacion {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .cabecera-invitacion-creada-visual {
        align-items: flex-start;

        gap: 12px;

        padding: 15px;

        border-radius: 15px;
    }


    .icono-invitacion-creada-visual {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        font-size: 1.25rem;
    }


    .tarjeta-invitacion-creada-visual {
        padding: 12px;
    }


    .acciones-invitacion-creada .btn {
        width: 100%;
    }
}
/* ============================================================
   SUBNEXO934 · PROPUESTAS DE APARTADOS · ADMINISTRACIÓN
   ============================================================ */

.pagina-propuestas-admin {
    display: grid;
    gap: 16px;
}


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

.cabecera-propuestas-admin {
    position: relative;

    display: flex;
    min-height: 125px;

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

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-propuestas-admin::after {
    position: absolute;

    top: -80px;
    right: -55px;

    width: 250px;
    height: 250px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-propuestas-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


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


.cabecera-propuestas-admin h1 {
    margin: 5px 0 6px;

    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-propuestas-admin p {
    max-width: 700px;

    margin: 0;

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

    font-size: 0.88rem;

    line-height: 1.5;
}


/* ============================================================
   CONTADOR
   ============================================================ */

.resumen-propuestas-admin {
    position: relative;

    z-index: 1;

    flex: 0 0 auto;
}


.dato-resumen-propuestas {
    display: grid;

    min-width: 125px;

    padding: 12px 14px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;

    backdrop-filter:
        blur(4px);
}


.dato-resumen-propuestas strong {
    color: #ffffff;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1;
}


.dato-resumen-propuestas span {
    margin-top: 5px;

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

    font-size: 0.68rem;

    font-weight: 650;
}


/* ============================================================
   BARRA
   ============================================================ */

.barra-acciones-propuestas {
    display: flex;

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

    gap: 14px;

    padding: 0 2px;
}


.barra-acciones-propuestas-texto {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


.barra-acciones-propuestas-texto i {
    color: #ca8a04;
}


/* ============================================================
   PANEL
   ============================================================ */

.panel-propuestas-admin {
    padding: 12px;

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

    border:
        1px solid
        #dfe7f0;

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


/* ============================================================
   LISTA
   ============================================================ */

.lista-propuestas-admin {
    display: grid;

    gap: 10px;
}


/* ============================================================
   TARJETA
   ============================================================ */

.propuesta-admin-visual {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #fffbeb,
            #ffffff 32%
        );

    border:
        1px solid
        #eadba9;

    border-radius: 14px;

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

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


.propuesta-admin-visual::before {
    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 0;

    width: 3px;

    content: "";

    background-color: #ca8a04;

    border-radius:
        0 999px 999px 0;
}


.propuesta-admin-visual:hover {
    border-color: #d6be69;

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

    transform:
        translateY(-2px);
}


/* ============================================================
   ICONO
   ============================================================ */

.icono-propuesta-admin {
    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    color: #92400e;

    font-size: 1.05rem;

    background-color: #fef3c7;

    border:
        1px solid
        #fde68a;

    border-radius: 11px;
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.contenido-propuesta-admin {
    min-width: 0;
}


.titulo-propuesta-admin {
    display: flex;

    min-width: 0;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.titulo-propuesta-admin h2 {
    margin: 0;

    color: var(--foro-texto);

    font-size: 0.93rem;

    font-weight: 750;
}


.titulo-propuesta-admin .etiqueta {
    padding: 2px 7px;

    font-size: 0.59rem;
}


.descripcion-propuesta-admin {
    overflow-wrap: anywhere;

    margin: 5px 0 0;

    color: #4b5563;

    font-size: 0.73rem;

    line-height: 1.45;
}


.meta-propuesta-admin {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px 14px;

    margin-top: 7px;

    color: var(--foro-secundario);

    font-size: 0.64rem;
}


.meta-propuesta-admin span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


/* ============================================================
   ACCIÓN
   ============================================================ */

.accion-propuesta-admin {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;
}


.flecha-propuesta-admin {
    color: #94a3b8;

    font-size: 0.7rem;

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


.propuesta-admin-visual:hover
.flecha-propuesta-admin {
    color: var(--foro-azul-800);

    transform:
        translateX(2px);
}


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

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

    min-height: 210px;

    align-content: center;

    justify-items: center;

    padding: 30px;

    text-align: center;
}


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

    width: 56px;
    height: 56px;

    margin-bottom: 11px;

    place-items: center;

    color: #166534;

    font-size: 1.35rem;

    background-color: #dcfce7;

    border-radius: 15px;
}


.estado-vacio-propuestas-admin h2 {
    margin: 0 0 5px;

    color: var(--foro-texto);

    font-size: 1rem;

    font-weight: 750;
}


.estado-vacio-propuestas-admin p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


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

@media (max-width: 767px) {

    .cabecera-propuestas-admin {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 18px;
    }


    .resumen-propuestas-admin {
        width: 100%;
    }


    .dato-resumen-propuestas {
        width: 100%;
    }


    .barra-acciones-propuestas {
        align-items: stretch;

        flex-direction: column;
    }


    .barra-acciones-propuestas .btn {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .cabecera-propuestas-admin {
        padding: 17px;

        border-radius: 15px;
    }


    .panel-propuestas-admin {
        padding: 7px;
    }


    .propuesta-admin-visual {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 9px;

        padding: 11px 9px;
    }


    .icono-propuesta-admin {
        width: 36px;
        height: 36px;
    }


    .accion-propuesta-admin {
        grid-column:
            2 / 3;

        justify-content: flex-end;
    }


    .descripcion-propuesta-admin {
        font-size: 0.7rem;
    }
}
/* ============================================================
   SUBNEXO934 · REVISIÓN DE PROPUESTAS
   ============================================================ */

.pagina-revision-propuesta {
    display: grid;
    gap: 16px;
}


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

.cabecera-revision-propuesta {
    position: relative;

    display: flex;
    min-height: 125px;

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

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-revision-propuesta::after {
    position: absolute;

    top: -80px;
    right: -55px;

    width: 250px;
    height: 250px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-revision-propuesta-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


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


.cabecera-revision-propuesta h1 {
    margin: 5px 0 6px;

    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-revision-propuesta p {
    max-width: 700px;

    margin: 0;

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

    font-size: 0.88rem;

    line-height: 1.5;
}


/* ============================================================
   ESTADO
   ============================================================ */

.estado-revision-propuesta {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 150px;

    padding: 10px 12px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;
}


.icono-estado-revision-propuesta {
    display: grid;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    place-items: center;

    color: #92400e;

    background-color: #fef3c7;

    border-radius: 9px;
}


.estado-revision-propuesta > div {
    display: grid;
}


.estado-revision-propuesta strong {
    color: #ffffff;

    font-size: 0.76rem;
}


.estado-revision-propuesta span {
    color:
        rgb(255 255 255 / 65%);

    font-size: 0.62rem;
}


/* ============================================================
   REJILLA
   ============================================================ */

.rejilla-revision-propuesta {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(320px, 1.2fr);

    align-items: start;

    gap: 14px;
}


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

.panel-propuesta-recibida,
.panel-decision-propuesta {
    padding: 18px;

    border-color: #dce5ee;

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


.cabecera-panel-revision {
    display: flex;

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

    gap: 14px;

    margin-bottom: 14px;

    padding-bottom: 13px;

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


.cabecera-panel-revision h2 {
    margin: 3px 0;

    color: var(--foro-texto);

    font-size: 1.08rem;

    font-weight: 760;
}


.cabecera-panel-revision p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.72rem;
}


.icono-panel-revision {
    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;
}


/* ============================================================
   AUTOR
   ============================================================ */

.autor-propuesta-revision {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    padding: 10px;

    background-color: #f8fafc;

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

    border-radius: 10px;
}


.icono-autor-propuesta {
    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;
}


.autor-propuesta-revision > div {
    display: grid;
}


.autor-propuesta-revision small {
    color: var(--foro-secundario);

    font-size: 0.6rem;
}


.autor-propuesta-revision strong {
    margin-top: 1px;

    color: var(--foro-texto);

    font-size: 0.72rem;
}


.autor-propuesta-revision span {
    margin-top: 1px;

    color: var(--foro-secundario);

    font-size: 0.61rem;
}


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

.bloque-dato-propuesta-revision {
    padding: 12px 0;

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


.titulo-dato-propuesta-revision {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 6px;

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

    font-size: 0.7rem;
}


.titulo-dato-propuesta-revision strong {
    color: var(--foro-texto);
}


.bloque-dato-propuesta-revision p {
    margin: 0;

    color: #3f4b5d;

    font-size: 0.78rem;

    line-height: 1.55;

    white-space: pre-wrap;
}


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

.formulario-revision-propuesta {
    gap: 14px;
}


.bloque-orden-propuesta {
    max-width: 250px;
}


.observacion-revision-propuesta {
    min-height: 130px;

    resize: vertical;
}


/* ============================================================
   OPCIONES
   ============================================================ */

.opciones-revision-propuesta {
    display: grid;

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

    gap: 8px;
}


.opcion-revision {
    display: flex;

    min-width: 0;

    align-items: flex-start;

    gap: 8px;

    padding: 9px;

    border: 1px solid;

    border-radius: 10px;
}


.opcion-revision > span {
    display: grid;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    place-items: center;

    border-radius: 8px;
}


.opcion-revision > div {
    display: grid;
}


.opcion-revision strong {
    font-size: 0.67rem;
}


.opcion-revision small {
    margin-top: 2px;

    font-size: 0.6rem;

    line-height: 1.4;
}


.opcion-revision-aprobar {
    color: #166534;

    background-color: #f0fdf4;

    border-color: #bbf7d0;
}


.opcion-revision-aprobar > span {
    background-color: #dcfce7;
}


.opcion-revision-devolver {
    color: #854d0e;

    background-color: #fffbeb;

    border-color: #fde68a;
}


.opcion-revision-devolver > span {
    background-color: #fef3c7;
}


.opcion-revision-rechazar {
    color: #991b1b;

    background-color: #fef2f2;

    border-color: #fecaca;
}


.opcion-revision-rechazar > span {
    background-color: #fee2e2;
}


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

.acciones-revision-propuesta {
    display: flex;

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

    gap: 12px;

    padding-top: 14px;

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


.acciones-decision-propuesta {
    display: flex;

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

    flex-wrap: wrap;

    gap: 7px;
}


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

@media (max-width: 950px) {

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


@media (max-width: 767px) {

    .cabecera-revision-propuesta {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 16px;

        padding: 18px;
    }


    .estado-revision-propuesta {
        width: 100%;
    }


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


    .acciones-revision-propuesta {
        align-items: stretch;

        flex-direction: column-reverse;
    }


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


    .acciones-decision-propuesta {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .acciones-decision-propuesta
    .btn {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .cabecera-revision-propuesta {
        padding: 17px;

        border-radius: 15px;
    }


    .panel-propuesta-recibida,
    .panel-decision-propuesta {
        padding: 13px;
    }
}

/* ============================================================
   SUBNEXO934 · TEMAS PENDIENTES · MODERACIÓN
   ============================================================ */

.pagina-temas-pendientes-admin {
    display: grid;
    gap: 16px;
}


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

.cabecera-temas-pendientes-admin {
    position: relative;

    display: flex;
    min-height: 125px;

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

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-temas-pendientes-admin::after {
    position: absolute;

    top: -80px;
    right: -55px;

    width: 250px;
    height: 250px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-temas-pendientes-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


.cabecera-temas-pendientes-admin .eyebrow {
    color:
        rgb(255 255 255 / 66%);
}


.cabecera-temas-pendientes-admin h1 {
    margin: 5px 0 6px;

    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-temas-pendientes-admin p {
    max-width: 700px;

    margin: 0;

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

    font-size: 0.88rem;

    line-height: 1.5;
}


/* ============================================================
   CONTADOR
   ============================================================ */

.resumen-temas-pendientes {
    position: relative;

    z-index: 1;

    flex: 0 0 auto;
}


.dato-resumen-temas-pendientes {
    display: grid;

    min-width: 125px;

    padding: 12px 14px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;

    backdrop-filter:
        blur(4px);
}


.dato-resumen-temas-pendientes strong {
    color: #ffffff;

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1;
}


.dato-resumen-temas-pendientes span {
    margin-top: 5px;

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

    font-size: 0.68rem;

    font-weight: 650;
}


/* ============================================================
   BARRA DE AYUDA
   ============================================================ */

.barra-temas-pendientes {
    display: flex;

    align-items: center;

    padding: 0 2px;
}


.barra-temas-pendientes-texto {
    display: flex;

    min-width: 0;

    align-items: center;

    gap: 8px;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


.barra-temas-pendientes-texto i {
    color: #ca8a04;
}


/* ============================================================
   PANEL
   ============================================================ */

.panel-temas-pendientes {
    padding: 12px;

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

    border:
        1px solid
        #dfe7f0;

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


/* ============================================================
   LISTA
   ============================================================ */

.lista-temas-pendientes-visual {
    display: grid;

    gap: 10px;
}


/* ============================================================
   TARJETA
   ============================================================ */

.tema-pendiente-visual {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #fffbeb,
            #ffffff 32%
        );

    border:
        1px solid
        #eadba9;

    border-radius: 14px;

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

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


.tema-pendiente-visual::before {
    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 0;

    width: 3px;

    content: "";

    background-color: #ca8a04;

    border-radius:
        0 999px 999px 0;
}


.tema-pendiente-visual:hover {
    border-color: #d6be69;

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

    transform:
        translateY(-2px);
}


/* ============================================================
   ICONO
   ============================================================ */

.icono-tema-pendiente-visual {
    display: grid;

    width: 44px;
    height: 44px;

    place-items: center;

    color: #92400e;

    font-size: 1.05rem;

    background-color: #fef3c7;

    border:
        1px solid
        #fde68a;

    border-radius: 11px;
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.contenido-tema-pendiente-visual {
    min-width: 0;
}


.titulo-tema-pendiente-visual {
    display: flex;

    min-width: 0;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.titulo-tema-pendiente-visual h2 {
    overflow-wrap: anywhere;

    margin: 0;

    color: var(--foro-texto);

    font-size: 0.93rem;

    font-weight: 750;
}


.titulo-tema-pendiente-visual .etiqueta {
    padding: 2px 7px;

    font-size: 0.59rem;
}


.meta-tema-pendiente-visual {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px 14px;

    margin-top: 7px;

    color: var(--foro-secundario);

    font-size: 0.64rem;
}


.meta-tema-pendiente-visual span {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


/* ============================================================
   ACCIÓN
   ============================================================ */

.accion-tema-pendiente-visual {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 8px;
}


.flecha-tema-pendiente {
    color: #94a3b8;

    font-size: 0.7rem;

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


.tema-pendiente-visual:hover
.flecha-tema-pendiente {
    color: var(--foro-azul-800);

    transform:
        translateX(2px);
}


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

.estado-vacio-temas-pendientes {
    display: grid;

    min-height: 210px;

    align-content: center;

    justify-items: center;

    padding: 30px;

    text-align: center;
}


.icono-vacio-temas-pendientes {
    display: grid;

    width: 56px;
    height: 56px;

    margin-bottom: 11px;

    place-items: center;

    color: #166534;

    font-size: 1.35rem;

    background-color: #dcfce7;

    border-radius: 15px;
}


.estado-vacio-temas-pendientes h2 {
    margin: 0 0 5px;

    color: var(--foro-texto);

    font-size: 1rem;

    font-weight: 750;
}


.estado-vacio-temas-pendientes p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.76rem;
}


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

@media (max-width: 767px) {

    .cabecera-temas-pendientes-admin {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 18px;
    }


    .resumen-temas-pendientes {
        width: 100%;
    }


    .dato-resumen-temas-pendientes {
        width: 100%;
    }
}


@media (max-width: 520px) {

    .cabecera-temas-pendientes-admin {
        padding: 17px;

        border-radius: 15px;
    }


    .panel-temas-pendientes {
        padding: 7px;
    }


    .tema-pendiente-visual {
        grid-template-columns:
            40px
            minmax(0, 1fr);

        gap: 9px;

        padding: 11px 9px;
    }


    .icono-tema-pendiente-visual {
        width: 36px;
        height: 36px;
    }


    .accion-tema-pendiente-visual {
        grid-column:
            2 / 3;

        justify-content: flex-end;
    }


    .meta-tema-pendiente-visual {
        display: grid;

        gap: 2px;
    }
}

/* ============================================================
   SUBNEXO934 · REVISIÓN DE TEMAS
   ============================================================ */

.pagina-revision-tema-admin {
    display: grid;
    gap: 16px;
}


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

.cabecera-revision-tema-admin {
    position: relative;

    display: flex;
    min-height: 125px;

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

    gap: 24px;

    overflow: hidden;

    padding: 20px 24px;

    color: #ffffff;

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

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

    border-radius: 18px;

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


.cabecera-revision-tema-admin::after {
    position: absolute;

    top: -80px;
    right: -55px;

    width: 250px;
    height: 250px;

    content: "";

    pointer-events: none;

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

    border-radius: 50%;
}


.cabecera-revision-tema-contenido {
    position: relative;

    z-index: 1;

    min-width: 0;

    flex: 1;
}


.cabecera-revision-tema-admin .eyebrow {
    color:
        rgb(255 255 255 / 66%);
}


.cabecera-revision-tema-admin h1 {
    margin: 5px 0 6px;

    color: #ffffff;

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

    font-weight: 780;
}


.cabecera-revision-tema-admin p {
    max-width: 700px;

    margin: 0;

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

    font-size: 0.88rem;

    line-height: 1.5;
}


/* ============================================================
   ESTADO
   ============================================================ */

.estado-revision-tema-admin {
    position: relative;

    z-index: 1;

    display: flex;

    min-width: 150px;

    align-items: center;

    gap: 9px;

    padding: 10px 12px;

    background-color:
        rgb(255 255 255 / 10%);

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

    border-radius: 13px;
}


.icono-estado-revision-tema {
    display: grid;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    place-items: center;

    color: #92400e;

    background-color: #fef3c7;

    border-radius: 9px;
}


.estado-revision-tema-admin > div {
    display: grid;
}


.estado-revision-tema-admin strong {
    color: #ffffff;

    font-size: 0.76rem;
}


.estado-revision-tema-admin span {
    color:
        rgb(255 255 255 / 65%);

    font-size: 0.62rem;
}


/* ============================================================
   REJILLA
   ============================================================ */

.rejilla-revision-tema-admin {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(340px, 0.85fr);

    align-items: start;

    gap: 14px;
}


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

.panel-tema-revision,
.panel-decision-revision-tema {
    padding: 18px;

    border-color: #dce5ee;

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


.cabecera-panel-revision-tema {
    display: flex;

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

    gap: 14px;

    margin-bottom: 14px;

    padding-bottom: 13px;

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


.cabecera-panel-revision-tema h2 {
    overflow-wrap: anywhere;

    margin: 3px 0;

    color: var(--foro-texto);

    font-size: 1.08rem;

    font-weight: 760;
}


.cabecera-panel-revision-tema p {
    margin: 0;

    color: var(--foro-secundario);

    font-size: 0.72rem;
}


.icono-panel-revision-tema {
    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;
}


/* ============================================================
   METADATOS
   ============================================================ */

.meta-tema-revision-admin {
    display: grid;

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

    gap: 8px;

    margin-bottom: 14px;
}


.dato-meta-revision-tema {
    display: flex;

    min-width: 0;

    align-items: flex-start;

    gap: 8px;

    padding: 9px;

    background-color: #f8fafc;

    border:
        1px solid
        #e1e8ef;

    border-radius: 10px;
}


.dato-meta-revision-tema > span {
    display: grid;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    place-items: center;

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

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

    border-radius: 8px;
}


.dato-meta-revision-tema > div {
    display: grid;

    min-width: 0;
}


.dato-meta-revision-tema small {
    color: var(--foro-secundario);

    font-size: 0.59rem;
}


.dato-meta-revision-tema strong {
    overflow-wrap: anywhere;

    margin-top: 1px;

    color: var(--foro-texto);

    font-size: 0.68rem;

    font-weight: 700;
}


/* ============================================================
   CONTENIDO
   ============================================================ */

.contenido-tema-revision-admin {
    overflow: hidden;

    border:
        1px solid
        #dce5ee;

    border-radius: 11px;
}


.titulo-contenido-revision-tema {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 9px 11px;

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

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

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

    font-size: 0.7rem;
}


.titulo-contenido-revision-tema strong {
    color: var(--foro-texto);
}


.texto-tema-revision-admin {
    padding: 15px;

    color: #334155;

    font-size: 0.82rem;

    line-height: 1.65;

    white-space: pre-wrap;
}


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

.formulario-revision-tema-admin {
    gap: 14px;
}


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

    resize: vertical;
}


/* ============================================================
   OPCIONES
   ============================================================ */

.opciones-revision-tema {
    display: grid;

    gap: 8px;
}


.opcion-revision-tema {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding: 10px;

    border:
        1px solid;

    border-radius: 10px;
}


.opcion-revision-tema > span {
    display: grid;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    place-items: center;

    border-radius: 8px;
}


.opcion-revision-tema > div {
    display: grid;
}


.opcion-revision-tema strong {
    font-size: 0.68rem;
}


.opcion-revision-tema small {
    margin-top: 2px;

    font-size: 0.61rem;

    line-height: 1.4;
}


.opcion-tema-aprobar {
    color: #166534;

    background-color: #f0fdf4;

    border-color: #bbf7d0;
}


.opcion-tema-aprobar > span {
    background-color: #dcfce7;
}


.opcion-tema-devolver {
    color: #854d0e;

    background-color: #fffbeb;

    border-color: #fde68a;
}


.opcion-tema-devolver > span {
    background-color: #fef3c7;
}


.opcion-tema-rechazar {
    color: #991b1b;

    background-color: #fef2f2;

    border-color: #fecaca;
}


.opcion-tema-rechazar > span {
    background-color: #fee2e2;
}


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

.acciones-revision-tema-admin {
    display: flex;

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

    gap: 12px;

    padding-top: 14px;

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


.acciones-decision-tema {
    display: flex;

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

    flex-wrap: wrap;

    gap: 7px;
}


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

@media (max-width: 950px) {

    .rejilla-revision-tema-admin {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767px) {

    .cabecera-revision-tema-admin {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 16px;

        padding: 18px;
    }


    .estado-revision-tema-admin {
        width: 100%;
    }


    .meta-tema-revision-admin {
        grid-template-columns: 1fr;
    }


    .acciones-revision-tema-admin {
        align-items: stretch;

        flex-direction: column-reverse;
    }


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


    .acciones-decision-tema {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


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


@media (max-width: 520px) {

    .cabecera-revision-tema-admin {
        padding: 17px;

        border-radius: 15px;
    }


    .panel-tema-revision,
    .panel-decision-revision-tema {
        padding: 13px;
    }
}
/* ============================================================
   OPERACIÓN DESTRUCTIVA · ELIMINAR APARTADO
   ============================================================ */

.bloque-categoria-eliminar {
    padding: 18px 20px 0;
}


.cabecera-categoria-eliminar {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;
}


.icono-categoria-eliminar {
    display: grid;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    place-items: center;

    color: #b91c1c;

    background-color: #fee2e2;

    border:
        1px solid
        #fecaca;

    border-radius: 10px;
}


.cabecera-categoria-eliminar > div {
    display: grid;
}


.cabecera-categoria-eliminar small {
    color: var(--foro-secundario);

    font-size: 0.62rem;
}


.cabecera-categoria-eliminar h2 {
    overflow-wrap: anywhere;

    margin: 2px 0 0;

    color: var(--foro-texto);

    font-size: 1rem;

    font-weight: 760;
}


.resumen-operacion-destructiva-tres {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    padding: 0;

    background: transparent;

    border-bottom: 0;
}


@media (max-width: 520px) {

    .bloque-categoria-eliminar {
        padding:
            14px
            14px
            0;
    }


    .resumen-operacion-destructiva-tres {
        grid-template-columns: 1fr;
    }
}

.resumen-operacion-destructiva-dos {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


@media (max-width: 520px) {

    .resumen-operacion-destructiva-dos {
        grid-template-columns: 1fr;
    }
}