/* =====================================================
   VARIABLES GENERALES
   ===================================================== */

:root {
    --socialhot-primary: #6f42c1;
    --socialhot-primary-dark: #59339d;
    --socialhot-primary-light: rgba(111, 66, 193, 0.08);
    --socialhot-border: #e5e7eb;
    --socialhot-text: #212529;
    --socialhot-muted: #6c757d;
    --socialhot-background: #f8f9fa;
}


/* =====================================================
   ESTRUCTURA GENERAL
   ===================================================== */

html,
body {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;

    min-height: 100vh;

    margin: 0;

    color: var(--socialhot-text);
    background-color: var(--socialhot-background);
}

body>main.container {
    flex: 1 0 auto;
}

.card {
    border: none;
    border-radius: 12px;
}

textarea.form-control {
    resize: none;
}

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


/* =====================================================
   NAVBAR
   ===================================================== */

.navbar {
    min-height: 74px;

    background-color: #ffffff !important;
}

.navbar.border-bottom {
    border-color: #eceff2 !important;
}

.navbar.shadow-sm {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05) !important;
}


/* =====================================================
   LOGOTIPO SOCIALHOT
   ===================================================== */

.navbar-brand {
    font-weight: 700;
}

.socialhot-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 5px 0;

    line-height: 1;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.socialhot-brand:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.socialhot-brand:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.25);
    outline-offset: 4px;

    border-radius: 6px;
}

.socialhot-logo {
    display: block;

    width: auto;
    height: 42px;
    max-width: 240px;

    object-fit: contain;
}


/* =====================================================
   BOTONES PRINCIPALES
   ===================================================== */

.btn-primary {
    --bs-btn-bg: var(--socialhot-primary);
    --bs-btn-border-color: var(--socialhot-primary);

    --bs-btn-hover-bg: var(--socialhot-primary-dark);
    --bs-btn-hover-border-color: var(--socialhot-primary-dark);

    --bs-btn-active-bg: var(--socialhot-primary-dark);
    --bs-btn-active-border-color: var(--socialhot-primary-dark);

    --bs-btn-disabled-bg: var(--socialhot-primary);
    --bs-btn-disabled-border-color: var(--socialhot-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--socialhot-primary);
    --bs-btn-border-color: var(--socialhot-primary);

    --bs-btn-hover-bg: var(--socialhot-primary);
    --bs-btn-hover-border-color: var(--socialhot-primary);

    --bs-btn-active-bg: var(--socialhot-primary);
    --bs-btn-active-border-color: var(--socialhot-primary);
}


/* =====================================================
   AVATARES DEL FEED
   ===================================================== */

.feed-avatar {
    display: block;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border: 2px solid rgba(111, 66, 193, 0.18);
    border-radius: 50%;

    background-color: #ffffff;

    object-fit: cover;
}

.feed-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background-color: var(--socialhot-primary);

    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estado-contenido {
    color: var(--socialhot-text);

    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: normal;
}


/* =====================================================
   REGISTRO: PREFERENCIAS
   ===================================================== */

.register-preference {
    display: flex;
    align-items: center;

    min-height: 48px;

    padding: 12px 14px 12px 42px;

    border: 1px solid #dee2e6;
    border-radius: 10px;

    background-color: #ffffff;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.register-preference:hover {
    border-color: rgba(111, 66, 193, 0.5);
    background-color: rgba(111, 66, 193, 0.04);
}

.register-preference:focus-within {
    border-color: rgba(111, 66, 193, 0.65);

    box-shadow:
        0 0 0 3px rgba(111, 66, 193, 0.12);
}

.register-preference .form-check-input {
    margin-top: 0;
}

.register-preference .form-check-input:checked {
    background-color: var(--socialhot-primary);
    border-color: var(--socialhot-primary);
}

.register-preference .form-check-label {
    width: 100%;

    cursor: pointer;

    font-weight: 500;
}


/* =====================================================
   MENÚ DE USUARIO SOBRE NAV BLANCO
   ===================================================== */

.user-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 5px 10px 5px 5px;

    color: var(--socialhot-text);
    background-color: transparent;

    border: 1px solid #dee2e6;
    border-radius: 50rem;

    line-height: 1;
    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.user-menu-button:hover,
.user-menu-button:focus,
.user-menu-button.show {
    color: var(--socialhot-text);
    background-color: #f8f9fa;
    border-color: #c7ccd1;
}

.user-menu-button:focus {
    box-shadow: none;
}

.user-menu-button:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.22);
    outline-offset: 3px;
}

.user-menu-avatar-wrapper {
    display: inline-flex;
    flex-shrink: 0;
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 2px solid rgba(111, 66, 193, 0.22);
    border-radius: 50%;

    background-color: #ffffff;

    object-fit: cover;
}

.user-menu-avatar-initial {
    color: #ffffff;
    background-color: var(--socialhot-primary);

    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
}

.user-menu-name {
    display: inline-block;

    max-width: 170px;

    overflow: hidden;

    color: var(--socialhot-text);

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

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

.user-menu-button.dropdown-toggle::after {
    margin-left: 2px;

    color: var(--socialhot-muted);
}


/* =====================================================
   MENÚ DESPLEGABLE DEL USUARIO
   ===================================================== */

.user-dropdown-menu {
    width: 270px;

    margin-top: 10px;
    padding: 8px;

    border: 1px solid var(--socialhot-border);
    border-radius: 14px;

    background-color: #ffffff;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.14);
}

.user-dropdown-header {
    padding: 10px 10px 8px;
}

.user-dropdown-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 46px;
    height: 46px;

    border: 2px solid rgba(111, 66, 193, 0.18);
    border-radius: 50%;

    background-color: #ffffff;

    object-fit: cover;
}

.user-dropdown-avatar-initial {
    color: #ffffff;
    background-color: var(--socialhot-primary);

    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
}

.user-dropdown-menu .dropdown-divider {
    margin: 6px 4px;

    border-color: #edf0f2;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 10px 12px;

    border-radius: 9px;

    color: var(--socialhot-text);

    font-size: 0.95rem;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.user-dropdown-item:hover,
.user-dropdown-item:focus {
    color: var(--socialhot-primary-dark);
    background-color: var(--socialhot-primary-light);
}

.user-dropdown-item.text-danger:hover,
.user-dropdown-item.text-danger:focus {
    color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.08);
}

.user-menu-icon {
    display: inline-block;
    flex-shrink: 0;

    width: 20px;
    height: 20px;

    color: currentColor;
}


/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {
    margin-top: auto;

    color: var(--socialhot-muted);
    background-color: #ffffff;

    border-top: 1px solid #e9ecef;
}

.site-footer-brand {
    margin-bottom: 4px;

    color: var(--socialhot-text);

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

.site-footer-copy {
    font-size: 0.875rem;
}

.site-footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.site-footer-nav a {
    color: var(--socialhot-muted);

    font-size: 0.9rem;
    text-decoration: none;

    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

.site-footer-nav a:hover {
    color: var(--socialhot-primary);

    text-decoration: underline;
}

.site-footer-nav a:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.25);
    outline-offset: 3px;

    border-radius: 4px;
}


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

@media (max-width: 767.98px) {
    .socialhot-brand {
        padding: 4px 0;
    }

    .socialhot-logo {
        height: 34px;
        max-width: 180px;
    }

    .site-footer-nav {
        gap: 14px;
    }
}


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

@media (max-width: 575.98px) {
    .navbar {
        min-height: 66px;
    }

    .user-menu-name {
        display: none;
    }

    .user-menu-button {
        gap: 4px;

        padding-right: 8px;
    }

    .user-menu-avatar {
        width: 34px;
        height: 34px;
    }

    .user-dropdown-menu {
        width: min(270px, calc(100vw - 24px));
    }

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


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

@media (max-width: 399.98px) {
    .socialhot-logo {
        height: 30px;
        max-width: 145px;
    }

    .navbar .container {
        gap: 8px;
    }
}

/* =====================================================
   PERFIL DE USUARIO
   ===================================================== */

.profile-card {
    overflow: hidden;
    background-color: #ffffff;
}

.profile-cover {
    min-height: 150px;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(255, 255, 255, 0.28),
            transparent 28%),
        linear-gradient(135deg,
            var(--socialhot-primary),
            var(--socialhot-primary-dark));
}

.profile-card-body {
    padding: 0 32px 32px;
}

.profile-main-header {
    display: flex;
    align-items: flex-end;
    gap: 22px;

    margin-top: -58px;
}

.profile-avatar-container {
    flex-shrink: 0;
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 126px;
    height: 126px;

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

    background-color: #ffffff;

    object-fit: cover;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.16);
}

.profile-avatar-initial {
    color: #ffffff;
    background-color: var(--socialhot-primary);

    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-heading {
    min-width: 0;
    flex: 1;

    padding-bottom: 10px;
}

.profile-username {
    margin: 0 0 5px;

    overflow-wrap: anywhere;

    color: var(--socialhot-text);

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

.profile-subtitle {
    margin: 0;

    color: var(--socialhot-muted);

    font-size: 0.95rem;
}

.profile-actions {
    padding-bottom: 12px;
}

.profile-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    white-space: nowrap;
}

.profile-divider {
    margin: 30px 0;

    border-color: #e9ecef;
    opacity: 1;
}

.profile-section {
    height: 100%;

    padding: 22px;

    border: 1px solid var(--socialhot-border);
    border-radius: 14px;

    background-color: #ffffff;
}

.profile-section-title {
    margin-bottom: 20px;

    color: var(--socialhot-text);

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

.profile-details {
    margin: 0;
}

.profile-detail-row {
    display: grid;
    grid-template-columns: minmax(130px, 42%) 1fr;
    gap: 16px;

    padding: 13px 0;

    border-bottom: 1px solid #f0f1f2;
}

.profile-detail-row:first-child {
    padding-top: 0;
}

.profile-detail-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.profile-detail-row dt {
    color: var(--socialhot-muted);

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

.profile-detail-row dd {
    margin: 0;

    color: var(--socialhot-text);

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

    overflow-wrap: anywhere;
}

.profile-email {
    word-break: break-word;
}

.profile-locked-badge {
    display: inline-flex;
    align-items: center;

    margin-left: 6px;
    padding: 3px 7px;

    border-radius: 50rem;

    color: #6c757d;
    background-color: #f1f3f5;

    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

.profile-preferences {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-preference-badge {
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    border: 1px solid rgba(111, 66, 193, 0.18);
    border-radius: 50rem;

    color: var(--socialhot-primary-dark);
    background-color: var(--socialhot-primary-light);

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

.profile-section-help {
    margin: 18px 0 0;

    color: var(--socialhot-muted);

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

.profile-empty-state {
    padding: 20px;

    border: 1px dashed #ced4da;
    border-radius: 12px;

    color: var(--socialhot-muted);
    background-color: #f8f9fa;

    text-align: center;
}


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

@media (max-width: 767.98px) {
    .profile-cover {
        min-height: 120px;
    }

    .profile-card-body {
        padding: 0 20px 24px;
    }

    .profile-main-header {
        align-items: center;
        flex-direction: column;
        gap: 14px;

        margin-top: -52px;

        text-align: center;
    }

    .profile-avatar {
        width: 108px;
        height: 108px;
    }

    .profile-avatar-initial {
        font-size: 2.5rem;
    }

    .profile-heading {
        padding-bottom: 0;
    }

    .profile-actions {
        width: 100%;
        padding-bottom: 0;
    }

    .profile-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .profile-divider {
        margin: 24px 0;
    }

    .profile-section {
        padding: 18px;
    }
}

@media (max-width: 575.98px) {
    .profile-detail-row {
        display: block;
    }

    .profile-detail-row dt {
        margin-bottom: 5px;
    }
}

/* =====================================================
   EDICIÓN DEL PERFIL
   ===================================================== */

.profile-edit-card {
    border: 1px solid var(--socialhot-border);
    background-color: #ffffff;
}

.profile-edit-avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 190px;
    margin-bottom: 24px;
}

.profile-edit-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 170px;
    height: 170px;

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

    background-color: #ffffff;

    object-fit: cover;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.14);
}

.profile-edit-avatar-initial {
    color: #ffffff;
    background-color: var(--socialhot-primary);

    font-size: 4rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-edit-card .form-control:disabled {
    color: #6c757d;
    background-color: #f1f3f5;

    cursor: not-allowed;
}

.profile-edit-card fieldset {
    min-width: 0;
}

.profile-edit-card legend {
    float: none;
    width: auto;
}


/* =====================================================
   EDICIÓN DEL PERFIL RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {
    .profile-edit-avatar-wrapper {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .profile-edit-avatar {
        width: 140px;
        height: 140px;
    }

    .profile-edit-avatar-initial {
        font-size: 3.25rem;
    }
}

/* =====================================================
   ENLACES DEL FEED
   ===================================================== */

.feed-avatar-link {
    display: inline-flex;
    flex-shrink: 0;

    border-radius: 50%;

    text-decoration: none;
}

.feed-avatar-link:hover .feed-avatar {
    border-color: rgba(111, 66, 193, 0.55);
}

.feed-avatar-link:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.25);
    outline-offset: 3px;
}

.feed-user-link {
    color: var(--socialhot-text);

    text-decoration: none;
}

.feed-user-link:hover {
    color: var(--socialhot-primary);

    text-decoration: underline;
}

.feed-user-link:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.22);
    outline-offset: 3px;

    border-radius: 4px;
}

/* =====================================================
   ACCIONES DE PUBLICACIONES
   ===================================================== */

.estado-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 0;
    padding-top: 14px;

    border-top: 1px solid #edf0f2;
}

.estado-like-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border: 0;
    border-radius: 8px;

    color: #6c757d;
    background-color: transparent;

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.estado-like-button:hover {
    color: var(--socialhot-primary);
    background-color: var(--socialhot-primary-light);
}

.estado-like-button:active {
    transform: scale(0.97);
}

.estado-like-button:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.22);
    outline-offset: 2px;
}

.estado-like-button.is-liked {
    color: var(--socialhot-primary);
    background-color: var(--socialhot-primary-light);
}

.estado-like-icon {
    display: block;
    flex-shrink: 0;

    width: 19px;
    height: 19px;
}

.estado-like-count {
    color: var(--socialhot-muted);

    font-size: 0.86rem;
}

/* =====================================================
   ME GUSTA MEDIANTE AJAX
   ===================================================== */

.estado-like-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.estado-like-button.is-loading .estado-like-icon {
    animation: socialhot-like-pulse 0.8s ease-in-out infinite;
}

.estado-like-feedback {
    display: block;

    width: auto;
    margin: 0.65rem 1rem 0.9rem;
    padding: 0.65rem 0.8rem;

    color: var(--socialhot-primary);
    background-color: rgba(111, 66, 193, 0.08);

    border: 1px solid rgba(111, 66, 193, 0.14);
    border-radius: 0.75rem;

    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;

    opacity: 0;

    transform: translateY(3px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.estado-like-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.estado-like-error {
    display: block;

    width: auto;
    margin: 0.65rem 1rem 0.9rem;
    padding: 0.65rem 0.8rem;

    color: #842029;
    background-color: #f8d7da;

    border: 1px solid #f5c2c7;
    border-radius: 0.75rem;

    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 767.98px) {

    .estado-like-feedback,
    .estado-like-error {
        margin-right: 0.8rem;
        margin-bottom: 0.75rem;
        margin-left: 0.8rem;
        padding: 0.6rem 0.7rem;
    }
}

@keyframes socialhot-like-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .estado-like-button.is-loading .estado-like-icon {
        animation: none;
    }

    .estado-like-feedback {
        transform: none;
        transition: opacity 0.2s ease;
    }
}

/* =====================================================
   COMENTARIOS
   ===================================================== */

.estado-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border: 0;
    border-radius: 8px;

    color: var(--socialhot-muted);
    background-color: transparent;

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.estado-comment-toggle:hover,
.estado-comment-toggle[aria-expanded="true"] {
    color: var(--socialhot-primary);
    background-color: var(--socialhot-primary-light);
}

.estado-comment-toggle:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.22);
    outline-offset: 2px;
}

.estado-comment-toggle svg {
    width: 19px;
    height: 19px;
}

.estado-comment-count {
    color: var(--socialhot-muted);

    font-size: 0.86rem;
}

.estado-comments {
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid #edf0f2;
}

.estado-comments.is-collapsed {
    display: none;
}

.estado-comments-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.estado-comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.estado-comment-avatar-link {
    display: inline-flex;
    flex-shrink: 0;

    border-radius: 50%;

    text-decoration: none;
}

.estado-comment-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    border: 1px solid rgba(111, 66, 193, 0.2);
    border-radius: 50%;

    background-color: #ffffff;

    object-fit: cover;
}

.estado-comment-avatar-initial {
    color: #ffffff;
    background-color: var(--socialhot-primary);

    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estado-comment-body {
    min-width: 0;
    flex: 1;

    padding: 10px 12px;

    border-radius: 12px;

    background-color: #f4f5f7;

    text-align: left;
}

.estado-comment-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 5px;
}

.estado-comment-author {
    overflow: hidden;

    color: var(--socialhot-text);

    font-size: 0.88rem;
    font-weight: 700;

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

.estado-comment-author:hover {
    color: var(--socialhot-primary);

    text-decoration: underline;
}

.estado-comment-date {
    flex-shrink: 0;

    color: var(--socialhot-muted);

    font-size: 0.72rem;
}

.estado-comment-content {
    display: block;
    width: 100%;

    margin: 0;

    color: var(--socialhot-text);

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

    text-align: left;
    overflow-wrap: anywhere;
    white-space: normal;
}

.estado-comment-form {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 18px;
}

.estado-comment-current-avatar {
    flex-shrink: 0;
}

.estado-comment-form-content {
    min-width: 0;
    flex: 1;
}

.estado-comment-input {
    min-height: 66px;

    font-size: 0.9rem;
}

.estado-comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 8px;
}

.estado-comment-form-message {
    color: var(--socialhot-muted);

    font-size: 0.8rem;
}

.estado-comment-form-message.is-error {
    color: #dc3545;
}

.estado-comment-form-message.is-success {
    color: var(--socialhot-primary);
}

.estado-comment-form button.is-loading {
    cursor: wait;
    opacity: 0.75;
}


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

@media (max-width: 575.98px) {
    .estado-comment-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .estado-comment-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .estado-comment-form-footer .btn {
        width: 100%;
    }
}

/* =====================================================
   PÁGINA INDIVIDUAL DE PUBLICACIÓN
   ===================================================== */

.post-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--socialhot-muted);

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

    text-decoration: none;
}

.post-back-link:hover {
    color: var(--socialhot-primary);
}

.post-back-link svg {
    width: 19px;
    height: 19px;
}

.post-detail-card {
    overflow: visible;
}

.post-detail-avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;

    font-size: 1.1rem;
}

.post-detail-author {
    font-size: 1.05rem;
}

.post-detail-content {
    margin-top: 24px;

    font-size: 1.05rem;
    line-height: 1.75;
}

.post-comment-link {
    text-decoration: none;
}

.post-comments {
    margin-top: 24px;
}

.post-comments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 20px;
}

.post-comments-empty {
    padding: 22px;

    border: 1px dashed #d9dde2;
    border-radius: 12px;

    color: var(--socialhot-muted);
    background-color: #fafafa;

    font-size: 0.9rem;
    text-align: center;
}

.post-comment-form {
    margin-top: 24px;
    padding-top: 22px;

    border-top: 1px solid #edf0f2;

    scroll-margin-top: 100px;
}

.estado-comment-user-data {
    display: flex;
    align-items: baseline;
    gap: 10px;

    min-width: 0;
}

.estado-comment-own-label {
    flex-shrink: 0;

    padding: 2px 7px;

    border-radius: 999px;

    color: var(--socialhot-primary);
    background-color: var(--socialhot-primary-light);

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



.post-comments .estado-comment,
.post-comments .estado-comment-body,
.post-comments .estado-comment-content {
    text-align: left;
}

/* =====================================================
   PÁGINA INDIVIDUAL RESPONSIVE
   ===================================================== */

@media (max-width: 575.98px) {
    .post-detail-avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .post-detail-content {
        font-size: 1rem;
    }

    .estado-comment-user-data {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

/* =====================================================
   FEED RESUMIDO
   ===================================================== */

.feed-post-date-link {
    text-decoration: none;
}

.feed-post-date-link:hover time {
    color: var(--socialhot-primary) !important;
}

.feed-post-content-link {
    display: block;

    color: inherit;

    text-decoration: none;
}

.feed-post-content-link:hover {
    color: inherit;
}

.feed-comment-link {
    text-decoration: none;
}

.estado-comment-count-link {
    text-decoration: none;
}

.estado-comment-count-link:hover {
    color: var(--socialhot-primary);

    text-decoration: underline;
}


/* =====================================================
   ÚLTIMO COMENTARIO DEL FEED
   ===================================================== */

.feed-latest-comment {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;

    width: 100%;
    margin-top: 16px;
    margin-right: 0;
    margin-left: 0;
    padding: 12px;

    border: 1px solid #edf0f2;
    border-radius: 12px;

    background-color: #f8f9fa;

    text-align: left;
}

.feed-latest-comment-body {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;

    text-align: left;
}

.feed-latest-comment-header {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 12px;

    width: 100%;
    margin-bottom: 4px;

    text-align: left;
}

.feed-latest-comment-content {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;

    color: var(--socialhot-text);

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

    text-align: left;
    text-decoration: none;
    overflow-wrap: anywhere;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.feed-latest-comment-content:hover {
    color: var(--socialhot-text);
    text-decoration: none;
}

.feed-view-comments {
    width: 100%;
    margin-top: 9px;
    padding-left: 0;

    font-size: 0.84rem;
    text-align: left;
}

.feed-view-comments a {
    color: var(--socialhot-primary);

    font-weight: 600;
    text-decoration: none;
}

.feed-view-comments a:hover {
    text-decoration: underline;
}


/* =====================================================
   COMENTARIO DESTACADO POR ANCLA
   ===================================================== */

.estado-comment {
    scroll-margin-top: 100px;
}

.estado-comment:target .estado-comment-body {
    outline: 2px solid rgba(111, 66, 193, 0.24);
    outline-offset: 3px;

    background-color: var(--socialhot-primary-light);
}


/* =====================================================
   FEED RESUMIDO RESPONSIVE
   ===================================================== */

@media (max-width: 575.98px) {
    .feed-latest-comment-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .feed-view-comments {
        padding-left: 0;
    }
}

/* =====================================================
   ELIMINACIÓN DE COMENTARIOS
   ===================================================== */

.estado-comment-options {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 7px;
}

.estado-comment-delete-form {
    display: inline-flex;

    margin: 0;
}

.estado-comment-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 8px;

    color: var(--socialhot-muted);
    background-color: transparent;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.estado-comment-delete-button:hover {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.08);
}

.estado-comment-delete-button:active {
    transform: scale(0.95);
}

.estado-comment-delete-button:focus-visible {
    outline: 3px solid rgba(220, 53, 69, 0.2);
    outline-offset: 2px;
}

.estado-comment-delete-button svg {
    width: 17px;
    height: 17px;
}

.estado-comment.is-removing {
    opacity: 0;
    transform: translateY(-6px);

    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}


/* =====================================================
   MODAL DE ELIMINACIÓN
   ===================================================== */

.comment-delete-modal {
    overflow: hidden;

    border: 0;
    border-radius: 16px;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.2);
}

.comment-delete-modal .modal-header {
    border-bottom-color: #edf0f2;
}

.comment-delete-modal .modal-footer {
    border-top-color: #edf0f2;
}

#confirmCommentDeleteButton.is-loading {
    cursor: wait;
    opacity: 0.75;
}


/* =====================================================
   MENSAJE DE ELIMINACIÓN
   ===================================================== */

.comment-delete-feedback {
    margin-left: auto;

    color: var(--socialhot-primary);

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

    opacity: 0;
    transform: translateY(3px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.comment-delete-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =====================================================
   ELIMINACIÓN RESPONSIVE
   ===================================================== */

@media (max-width: 575.98px) {
    .estado-comment-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .estado-comment-options {
        align-self: flex-start;
    }

    .comment-delete-feedback {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .estado-comment.is-removing {
        transition: none;
    }

    .comment-delete-feedback {
        transform: none;
        transition: opacity 0.2s ease;
    }
}

/* =====================================================
   ELIMINACIÓN DE PUBLICACIONES
   ===================================================== */

.post-author-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.post-delete-form {
    display: inline-flex;

    margin: 0;
}

.post-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    padding: 0;

    border: 0;
    border-radius: 8px;

    color: var(--socialhot-muted);
    background-color: transparent;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.post-delete-button:hover {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.08);
}

.post-delete-button:active {
    transform: scale(0.95);
}

.post-delete-button:focus-visible {
    outline: 3px solid rgba(220, 53, 69, 0.2);
    outline-offset: 2px;
}

.post-delete-button svg {
    width: 18px;
    height: 18px;
}

.estado-card.is-removing {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* =====================================================
   MODAL DE PUBLICACIÓN
   ===================================================== */

.post-delete-modal {
    overflow: hidden;

    border: 0;
    border-radius: 16px;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.2);
}

.post-delete-modal .modal-header {
    border-bottom-color: #edf0f2;
}

.post-delete-modal .modal-footer {
    border-top-color: #edf0f2;
}

#confirmPostDeleteButton.is-loading {
    cursor: wait;
    opacity: 0.75;
}


/* =====================================================
   AVISO DE PUBLICACIÓN ELIMINADA
   ===================================================== */

.post-delete-feedback {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1090;

    width: min(360px, calc(100vw - 48px));
    margin: 0;

    opacity: 0;
    transform: translateY(12px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.16);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.post-delete-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =====================================================
   ELIMINACIÓN RESPONSIVE
   ===================================================== */

@media (max-width: 575.98px) {
    .post-delete-feedback {
        right: 12px;
        bottom: 12px;

        width: calc(100vw - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .estado-card.is-removing,
    .post-delete-feedback {
        transition: none;
    }
}

/* =====================================================
   SELECTOR DE FOTOGRAFÍAS
   ===================================================== */

.post-image-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.post-image-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 40px;
    padding: 8px 14px;

    border: 1px solid #ddd5f2;
    border-radius: 10px;

    color: var(--socialhot-primary);
    background-color: #f8f5ff;

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

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.post-image-picker-button:hover {
    border-color: var(--socialhot-primary);
    background-color: #f1ebff;
}

.post-image-picker-button:active {
    transform: scale(0.98);
}

.post-image-picker-button:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.2);
    outline-offset: 2px;
}

.post-image-picker-button svg {
    width: 19px;
    height: 19px;
}

.post-image-picker-help {
    color: var(--socialhot-muted);

    font-size: 0.82rem;
}

.post-image-form-message {
    min-height: 22px;
    margin-top: 8px;

    font-size: 0.84rem;
}

.post-image-form-message.is-error {
    color: #dc3545;
}


/* =====================================================
   PREVISUALIZACIÓN ANTES DE PUBLICAR
   ===================================================== */

.post-image-preview {
    display: grid;
    gap: 6px;

    margin-top: 14px;

    overflow: hidden;
    border-radius: 14px;
}

.post-image-preview-1 {
    grid-template-columns: 1fr;
}

.post-image-preview-2,
.post-image-preview-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-image-preview-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-image-preview-item {
    position: relative;

    min-height: 150px;
    overflow: hidden;

    border-radius: 10px;
    background-color: #edf0f2;
}

.post-image-preview-1 .post-image-preview-item {
    min-height: 280px;
}

.post-image-preview-3 .post-image-preview-item:first-child {
    grid-column: 1 / -1;
    min-height: 220px;
}

.post-image-preview-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.post-image-preview-remove {
    position: absolute;
    top: 9px;
    right: 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #ffffff;
    background-color: rgba(20, 20, 20, 0.75);

    cursor: pointer;

    backdrop-filter: blur(4px);

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.post-image-preview-remove:hover {
    background-color: #dc3545;
}

.post-image-preview-remove:active {
    transform: scale(0.94);
}

.post-image-preview-remove svg {
    width: 16px;
    height: 16px;
}


/* =====================================================
   GALERÍA DE PUBLICACIONES
   ===================================================== */

.post-image-gallery {
    display: grid;
    gap: 4px;

    margin-top: 14px;
    overflow: hidden;

    border: 1px solid #edf0f2;
    border-radius: 14px;

    background-color: #edf0f2;
}

.post-image-gallery-1 {
    grid-template-columns: 1fr;
}

.post-image-gallery-2,
.post-image-gallery-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-image-gallery-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-image-gallery-item {
    position: relative;

    display: block;

    width: 100%;
    min-height: 180px;
    padding: 0;

    overflow: hidden;

    border: 0;

    background-color: #e8eaed;

    cursor: zoom-in;
}

.post-image-gallery-1 .post-image-gallery-item {
    min-height: 360px;
    max-height: 580px;
}

.post-image-gallery-3 .post-image-gallery-item:first-child {
    grid-column: 1 / -1;
    min-height: 280px;
}

.post-image-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.post-image-gallery-item:hover img {
    transform: scale(1.015);
    filter: brightness(0.95);
}

.post-image-gallery-item:focus-visible {
    z-index: 1;

    outline: 3px solid var(--socialhot-primary);
    outline-offset: -3px;
}


/* =====================================================
   VISOR DE FOTOGRAFÍAS
   ===================================================== */

.post-image-lightbox .modal-content {
    overflow: hidden;

    border: 0;
    border-radius: 14px;

    background-color: #111111;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45);
}

.post-image-lightbox .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);

    color: #ffffff;
    background-color: #111111;
}

.post-image-lightbox .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 300px;
    padding: 0;

    background-color: #090909;
}

.post-image-lightbox-image {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 150px);

    object-fit: contain;
}


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

@media (max-width: 575.98px) {
    .post-image-picker {
        align-items: flex-start;
        flex-direction: column;
    }

    .post-image-preview-item {
        min-height: 120px;
    }

    .post-image-preview-1 .post-image-preview-item {
        min-height: 220px;
    }

    .post-image-preview-3 .post-image-preview-item:first-child {
        min-height: 180px;
    }

    .post-image-gallery-item {
        min-height: 130px;
    }

    .post-image-gallery-1 .post-image-gallery-item {
        min-height: 260px;
        max-height: 420px;
    }

    .post-image-gallery-3 .post-image-gallery-item:first-child {
        min-height: 210px;
    }

    .post-image-lightbox .modal-dialog {
        margin: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .post-image-picker-button,
    .post-image-preview-remove,
    .post-image-gallery-item img {
        transition: none;
    }
}

/* =====================================================
   PREVIEW COMPACTA
   ===================================================== */

.post-image-preview {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 14px;
}

.post-image-preview-item {
    position: relative;

    width: 96px;
    height: 96px;
    min-height: 0;

    overflow: hidden;

    border: 1px solid #e0e3e7;
    border-radius: 10px;

    background-color: #edf0f2;
}

.post-image-preview-1 .post-image-preview-item,
.post-image-preview-2 .post-image-preview-item,
.post-image-preview-3 .post-image-preview-item,
.post-image-preview-4 .post-image-preview-item,
.post-image-preview-3 .post-image-preview-item:first-child {
    grid-column: auto;

    width: 96px;
    height: 96px;
    min-height: 0;
}

.post-image-preview-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.post-image-preview-remove {
    top: 5px;
    right: 5px;

    width: 25px;
    height: 25px;
}

.post-image-preview-remove svg {
    width: 13px;
    height: 13px;
}


/* =====================================================
   PROGRESO DE PUBLICACIÓN
   ===================================================== */

.post-upload-progress {
    margin-top: 14px;
    padding: 12px;

    border: 1px solid #e6e0f2;
    border-radius: 10px;

    background-color: #faf8ff;
}

.post-upload-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 8px;

    color: var(--socialhot-text);

    font-size: 0.84rem;
}

.post-upload-progress-header strong {
    flex-shrink: 0;

    color: var(--socialhot-primary);
}

.post-upload-progress .progress {
    height: 9px;

    border-radius: 999px;

    background-color: #e8e2f4;
}

.post-upload-progress .progress-bar {
    background-color: var(--socialhot-primary);
}

[data-post-submit].is-loading {
    cursor: wait;
}

[data-post-submit]:disabled,
[data-post-images-open]:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

[data-post-create-form].is-uploading .post-image-preview-remove {
    pointer-events: none;
    opacity: 0.55;
}

@media (max-width: 575.98px) {

    .post-image-preview-item,
    .post-image-preview-1 .post-image-preview-item,
    .post-image-preview-2 .post-image-preview-item,
    .post-image-preview-3 .post-image-preview-item,
    .post-image-preview-4 .post-image-preview-item,
    .post-image-preview-3 .post-image-preview-item:first-child {
        width: 82px;
        height: 82px;
    }
}

/* =====================================================
   EDICIÓN DE PUBLICACIONES
   ===================================================== */

.post-edit-existing-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-edit-existing-item {
    position: relative;

    width: 110px;
    height: 110px;

    overflow: hidden;

    border: 2px solid transparent;
    border-radius: 12px;

    background-color: #edf0f2;

    transition:
        border-color 0.2s ease,
        opacity 0.2s ease,
        filter 0.2s ease;
}

.post-edit-existing-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.post-edit-remove-label {
    position: absolute;
    right: 6px;
    bottom: 6px;
    left: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 31px;
    padding: 5px 8px;

    border-radius: 8px;

    color: #ffffff;
    background-color: rgba(20, 20, 20, 0.78);

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

    cursor: pointer;

    backdrop-filter: blur(4px);
}

.post-edit-remove-label .form-check-input {
    margin: 0;
}

.post-edit-existing-item.is-marked-for-removal {
    border-color: #dc3545;

    opacity: 0.58;
    filter: grayscale(0.75);
}

.post-edit-existing-item.is-marked-for-removal::after {
    position: absolute;
    inset: 0;

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

    content: "Se eliminará";

    color: #ffffff;
    background-color: rgba(220, 53, 69, 0.58);

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

    pointer-events: none;
}

@media (max-width: 575.98px) {
    .post-edit-existing-item {
        width: 92px;
        height: 92px;
    }
}

.post-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #6c757d;
    background-color: transparent;

    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.post-edit-button:hover {
    color: var(--socialhot-primary);
    background-color: rgba(111, 66, 193, 0.1);
}

.post-edit-button svg {
    width: 17px;
    height: 17px;
}

.post-edited-badge {
    display: inline-flex;
    align-items: center;

    margin-left: 6px;
    padding: 2px 7px;

    border-radius: 999px;

    color: #6c757d;
    background-color: #f1f3f5;

    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;

    cursor: help;
    white-space: nowrap;
}

.post-author-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* =====================================================
   FOTOGRAFÍAS MOBILE FIRST
   ===================================================== */

.post-image-gallery {
    display: grid;
    gap: 3px;

    margin-top: 12px;
    overflow: hidden;

    border-radius: 12px;

    background-color: #e9ecef;
}

.post-image-gallery-1 {
    grid-template-columns: 1fr;
}

.post-image-gallery-2,
.post-image-gallery-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-image-gallery-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-image-gallery-item {
    position: relative;

    display: block;

    width: 100%;
    height: 150px;
    min-height: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background-color: #e9ecef;

    cursor: zoom-in;

    touch-action: manipulation;
}

.post-image-gallery-1 .post-image-gallery-item {
    height: min(72vw, 430px);
}

.post-image-gallery-3 .post-image-gallery-item:first-child {
    grid-column: 1 / -1;
    height: min(58vw, 320px);
}

.post-image-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =====================================================
   VISOR PANTALLA COMPLETA
   ===================================================== */

.post-image-lightbox {
    --bs-modal-bg: #050505;
}

.post-image-lightbox .modal-dialog,
.post-image-lightbox .modal-content {
    height: 100%;
}

.post-image-lightbox .modal-content {
    border: 0;
    border-radius: 0;

    color: #ffffff;
    background-color: #050505;
}

.post-image-lightbox .modal-header {
    z-index: 5;

    min-height: 58px;
    padding:
        max(12px, env(safe-area-inset-top)) 16px 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    background-color: rgba(5, 5, 5, 0.96);
}

.post-image-lightbox-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-image-lightbox-counter {
    color: rgba(255, 255, 255, 0.72);

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

.post-image-lightbox .modal-body {
    position: relative;

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

    min-height: 0;
    padding: 0;

    overflow: hidden;

    background-color: #050505;

    touch-action: pan-y;
    user-select: none;
}

.post-image-lightbox-stage {
    position: relative;

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

    width: 100%;
    height: 100%;
}

.post-image-lightbox-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 1;

    transition: opacity 0.16s ease;
}

.post-image-lightbox-image.is-changing {
    opacity: 0.3;
}

.post-image-lightbox-navigation {
    position: absolute;
    top: 50%;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 56px;
    padding: 0;

    border: 0;
    border-radius: 12px;

    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.48);

    transform: translateY(-50%);

    backdrop-filter: blur(6px);
}

.post-image-lightbox-previous {
    left: max(8px, env(safe-area-inset-left));
}

.post-image-lightbox-next {
    right: max(8px, env(safe-area-inset-right));
}

.post-image-lightbox-navigation svg {
    width: 28px;
    height: 28px;
}

.post-image-lightbox-swipe-hint {
    position: absolute;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;

    padding: 6px 10px;

    border-radius: 999px;

    color: rgba(255, 255, 255, 0.78);
    background-color: rgba(0, 0, 0, 0.42);

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

    transform: translateX(-50%);

    pointer-events: none;

    animation: postSwipeHintFade 4s forwards;
}

@keyframes postSwipeHintFade {

    0%,
    65% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}


/* =====================================================
   TABLET Y ESCRITORIO
   ===================================================== */

@media (min-width: 576px) {
    .post-image-gallery-item {
        height: 210px;
    }

    .post-image-gallery-1 .post-image-gallery-item {
        height: min(58vw, 560px);
    }

    .post-image-lightbox-navigation {
        width: 52px;
        height: 64px;
    }

    .post-image-lightbox-swipe-hint {
        display: none;
    }
}

@media (min-width: 992px) {
    .post-image-lightbox .modal-header {
        padding-top: 12px;
    }

    .post-image-lightbox-navigation:hover {
        background-color: rgba(255, 255, 255, 0.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-image-lightbox-image {
        transition: none;
    }

    .post-image-lightbox-swipe-hint {
        animation: none;
        opacity: 0;
    }
}

/*
|--------------------------------------------------------------------------
| CARGAR MÁS PUBLICACIONES
|--------------------------------------------------------------------------
*/

.load-more-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0 2rem;
}

.load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
}

.load-more-button svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.load-more-button:disabled {
    cursor: wait;
    opacity: 0.75;
}

.load-more-message {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
}

.load-more-message.is-error {
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
}

.load-more-message.is-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
}

@media (min-width: 576px) {
    .load-more-button {
        width: auto;
        min-width: 240px;
    }
}

/*
|--------------------------------------------------------------------------
| RESULTADO DE VERIFICACIÓN DE CORREO
|--------------------------------------------------------------------------
*/

.email-verification-result {
    overflow: hidden;
    border-radius: 1.25rem;
}

.email-verification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
}

.email-verification-icon svg {
    width: 36px;
    height: 36px;
}

.email-verification-icon.is-success {
    color: #198754;
    background-color: #d1e7dd;
}

.email-verification-icon.is-error {
    color: #842029;
    background-color: #f8d7da;
}

/*
|--------------------------------------------------------------------------
| VERIFICACIÓN DE CORREO PENDIENTE
|--------------------------------------------------------------------------
*/

.verification-pending-card {
    overflow: hidden;
    border-radius: 1.25rem;
}

.verification-pending-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 1.5rem;
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.12);
    border-radius: 50%;
}

.verification-pending-icon svg {
    width: 40px;
    height: 40px;
}

.verification-pending-email {
    display: inline-block;
    padding: 0.75rem 1rem;
    color: #4d347c;
    font-weight: 700;
    word-break: break-word;
    background-color: #f5f0fb;
    border: 1px solid #e2d5f2;
    border-radius: 0.75rem;
}

.email-verification-icon.is-pending {
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.12);
}

/*
|--------------------------------------------------------------------------
| CABECERA RESPONSIVA
|--------------------------------------------------------------------------
*/

html {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background-color: #f5f4f7;
}

.socialhot-navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    min-height: 68px;
    padding: 0.55rem 0;
    box-shadow: 0 1px 8px rgba(24, 18, 31, 0.07);
}

.socialhot-navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.socialhot-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 190px;
    margin: 0;
    padding: 0;
}

.socialhot-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 42px;
    object-fit: contain;
}

.socialhot-main {
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 5rem;
}

.socialhot-header-action {
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #6b6470;
    text-decoration: none;
    border-radius: 50%;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.socialhot-header-action svg {
    width: 22px;
    height: 22px;
}

.socialhot-header-action:hover,
.socialhot-header-action.is-active {
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
}

.user-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.25rem 0.7rem 0.25rem 0.3rem;
    color: #302b35;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
}

.user-menu-button:hover,
.user-menu-button:focus,
.user-menu-button.show {
    color: #302b35;
    background-color: #f5f1fa;
    border-color: #e7ddf2;
}

.user-menu-button::after {
    margin-left: 0.1rem;
}

.user-menu-avatar-wrapper {
    display: inline-flex;
    flex-shrink: 0;
}

.user-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #ddd3e8;
}

.user-menu-avatar-initial {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    background-color: #6f42c1;
}

.user-menu-name {
    display: block;
    max-width: 150px;
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-menu {
    width: min(310px, calc(100vw - 24px));
    margin-top: 0.7rem;
    padding: 0.6rem;
    border: 1px solid #e8e2ed;
    border-radius: 1rem;
    box-shadow: 0 14px 36px rgba(34, 25, 43, 0.15);
}

.user-dropdown-header {
    padding: 0.65rem;
}

.user-dropdown-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
}

.user-dropdown-avatar-initial {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    background-color: #6f42c1;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
}

.user-dropdown-item:hover,
.user-dropdown-item:focus {
    background-color: #f5f1fa;
}

.user-menu-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

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

.socialhot-guest-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.socialhot-login-button,
.socialhot-register-button {
    min-height: 40px;
    padding: 0.48rem 0.9rem;
    font-weight: 600;
    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| VISTA MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .socialhot-navbar {
        min-height: 58px;
        padding-top: calc(0.4rem + env(safe-area-inset-top));
        padding-bottom: 0.4rem;
    }

    .socialhot-navbar-container {
        gap: 0.65rem;
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }

    .socialhot-brand {
        max-width: 140px;
    }

    .socialhot-logo {
        height: 60px;
    }

    .socialhot-main {
        max-width: 100%;
        padding-top: 0.75rem;
        padding-right: 0.65rem;
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
        padding-left: 0.65rem;
    }

    .user-menu-button {
        min-height: 42px;
        padding: 0.15rem;
        border: 0;
    }

    .user-menu-button::after {
        display: none;
    }

    .user-menu-avatar {
        width: 40px;
        height: 40px;
    }

    .user-menu-name {
        display: none;
    }

    .user-dropdown-menu {
        position: fixed !important;
        top: 64px !important;
        right: 0.65rem !important;
        left: auto !important;
        width: min(320px, calc(100vw - 1.3rem));
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        transform: none !important;
    }

    .socialhot-login-button,
    .socialhot-register-button {
        min-height: 38px;
        padding: 0.42rem 0.72rem;
        font-size: 0.84rem;
    }
}

/*
|--------------------------------------------------------------------------
| TELÉFONOS PEQUEÑOS
|--------------------------------------------------------------------------
*/

@media (max-width: 374.98px) {
    .socialhot-brand {
        max-width: 116px;
    }

    .socialhot-logo {
        height: 30px;
    }

    .socialhot-guest-actions {
        gap: 0.35rem;
    }

    .socialhot-login-button,
    .socialhot-register-button {
        padding-right: 0.6rem;
        padding-left: 0.6rem;
        font-size: 0.78rem;
    }
}

/*
|--------------------------------------------------------------------------
| NAVEGACIÓN INFERIOR MÓVIL
|--------------------------------------------------------------------------
*/

.mobile-bottom-navigation {
    display: none;
}

/*
|--------------------------------------------------------------------------
| VISTA MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    body.user-authenticated {
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    body.user-authenticated .site-footer {
        margin-bottom: 0;
    }

    .mobile-bottom-navigation {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: block;
        padding-bottom: env(safe-area-inset-bottom);
        background-color: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #e5dfea;
        box-shadow: 0 -7px 24px rgba(35, 25, 43, 0.1);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-bottom-navigation-inner {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        width: 100%;
        max-width: 560px;
        min-height: 68px;
        margin: 0 auto;
        padding: 0.35rem 0.4rem 0.25rem;
    }

    .mobile-nav-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        gap: 0.18rem;
        min-width: 0;
        min-height: 58px;
        padding: 0.35rem 0.25rem 0.2rem;
        color: #77707e;
        font-size: 0.69rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        border-radius: 0.75rem;
        -webkit-tap-highlight-color: transparent;
        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            transform 0.15s ease;
    }

    .mobile-nav-item:active {
        transform: scale(0.94);
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus {
        color: #6f42c1;
    }

    .mobile-nav-item.is-active {
        color: #6f42c1;
    }

    .mobile-nav-item.is-active::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 22px;
        height: 3px;
        background-color: #6f42c1;
        border-radius: 0 0 999px 999px;
        content: "";
        transform: translateX(-50%);
    }

    .mobile-nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
    }

    .mobile-nav-icon svg {
        width: 24px;
        height: 24px;
    }

    .mobile-nav-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
    |--------------------------------------------------------------------------
    | BOTÓN CENTRAL PUBLICAR
    |--------------------------------------------------------------------------
    */

    .mobile-nav-publish {
        justify-content: flex-end;
        overflow: visible;
        color: #6f42c1;
    }

    .mobile-nav-publish-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-top: -24px;
        color: #ffffff;
        background: linear-gradient(135deg,
                #8457d0,
                #6f42c1);
        border: 4px solid #ffffff;
        border-radius: 50%;
        box-shadow:
            0 5px 14px rgba(111, 66, 193, 0.35),
            0 0 0 1px rgba(111, 66, 193, 0.08);
        transition:
            transform 0.15s ease,
            box-shadow 0.2s ease;
    }

    .mobile-nav-publish-button svg {
        width: 25px;
        height: 25px;
    }

    .mobile-nav-publish:active .mobile-nav-publish-button {
        transform: scale(0.92);
        box-shadow:
            0 3px 10px rgba(111, 66, 193, 0.3),
            0 0 0 1px rgba(111, 66, 193, 0.08);
    }

    /*
    |--------------------------------------------------------------------------
    | AVATAR DEL PERFIL
    |--------------------------------------------------------------------------
    */

    .mobile-nav-avatar-wrapper {
        border-radius: 50%;
    }

    .mobile-nav-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 27px;
        height: 27px;
        object-fit: cover;
        border: 2px solid transparent;
        border-radius: 50%;
    }

    .mobile-nav-avatar-initial {
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 700;
        background-color: #6f42c1;
    }

    .mobile-nav-item.is-active .mobile-nav-avatar {
        border-color: #6f42c1;
    }

    /*
    |--------------------------------------------------------------------------
    | FOOTER NORMAL
    |--------------------------------------------------------------------------
    |
    | Lo dejamos visible, pero más compacto en móvil.
    |
    */

    .site-footer {
        padding-bottom: 0.5rem;
    }

    .site-footer .container {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
}

/*
|--------------------------------------------------------------------------
| TELÉFONOS PEQUEÑOS
|--------------------------------------------------------------------------
*/

@media (max-width: 374.98px) {
    .mobile-bottom-navigation-inner {
        padding-right: 0.2rem;
        padding-left: 0.2rem;
    }

    .mobile-nav-item {
        padding-right: 0.1rem;
        padding-left: 0.1rem;
        font-size: 0.63rem;
    }

    .mobile-nav-icon svg {
        width: 22px;
        height: 22px;
    }

    .mobile-nav-publish-button {
        width: 45px;
        height: 45px;
    }
}

/*
|--------------------------------------------------------------------------
| BUSCADOR DE USUARIOS
|--------------------------------------------------------------------------
*/

.user-search-page {
    width: 100%;
}

.user-search-card {
    overflow: hidden;
    border-radius: 1.15rem;
}

.user-search-input-wrapper {
    position: relative;
}

.user-search-input-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #817889;
    pointer-events: none;
    transform: translateY(-50%);
}

.user-search-input-icon svg {
    width: 21px;
    height: 21px;
}

.user-search-input {
    min-height: 52px;
    padding-right: 3rem;
    padding-left: 3rem;
    font-size: 1rem;
    background-color: #f7f5f9;
    border: 1px solid #e4dfea;
    border-radius: 999px;
}

.user-search-input:focus {
    background-color: #ffffff;
    border-color: #9e7bd7;
    box-shadow: 0 0 0 0.23rem rgba(111, 66, 193, 0.12);
}

.user-search-input::-webkit-search-cancel-button {
    display: none;
}

.user-search-clear {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #746c7b;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
}

.user-search-clear:hover,
.user-search-clear:focus {
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
}

.user-search-clear svg {
    width: 19px;
    height: 19px;
}

.user-search-status {
    min-height: 24px;
    margin-top: 0.85rem;
    padding: 0 0.35rem;
    font-size: 0.86rem;
}

.user-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.user-search-result {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.75rem;
    color: #302b35;
    text-decoration: none;
    border-radius: 0.9rem;
    transition:
        background-color 0.18s ease,
        transform 0.15s ease;
}

.user-search-result:hover,
.user-search-result:focus,
.user-search-result.is-active {
    color: #302b35;
    background-color: #f5f0fa;
    outline: none;
}

.user-search-result:active {
    transform: scale(0.985);
}

.user-search-result-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
}

.user-search-result-initial {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    background-color: #6f42c1;
}

.user-search-result-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.user-search-result-name {
    overflow: hidden;
    font-size: 0.98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-search-result-description {
    color: #867e8c;
    font-size: 0.82rem;
}

.user-search-result-arrow {
    display: inline-flex;
    flex-shrink: 0;
    color: #a097a7;
}

.user-search-result-arrow svg {
    width: 20px;
    height: 20px;
}

.user-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 100px;
    color: #746c7b;
}

.user-search-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 180px;
    padding: 2rem 1rem;
    color: #746c7b;
    text-align: center;
}

.user-search-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 0.4rem;
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 50%;
}

.user-search-empty-icon svg {
    width: 27px;
    height: 27px;
}

/*
|--------------------------------------------------------------------------
| BUSCADOR EN MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .user-search-heading {
        padding: 0 0.25rem;
    }

    .user-search-heading h1 {
        font-size: 1.4rem;
    }

    .user-search-card {
        margin-right: -0.15rem;
        margin-left: -0.15rem;
        border-radius: 1rem;
    }

    .user-search-card .card-body {
        padding: 0.85rem !important;
    }

    .user-search-input {
        min-height: 50px;
        font-size: 16px;
    }

    .user-search-result {
        min-height: 68px;
        padding: 0.65rem;
    }

    .user-search-result-avatar {
        width: 48px;
        height: 48px;
    }
}

/*
|--------------------------------------------------------------------------
| TARJETAS DEL FEED
|--------------------------------------------------------------------------
*/

.estado-card {
    width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 1.15rem;
}

.estado-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
}

.feed-avatar-link {
    display: inline-flex;
    flex-shrink: 0;
    text-decoration: none;
}

.feed-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
}

.feed-avatar-initial {
    color: #ffffff;
    font-weight: 700;
    background-color: #6f42c1;
}

.estado-card-author {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.feed-user-link {
    overflow: hidden;
    color: #29232e;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-user-link:hover {
    color: #6f42c1;
}

.estado-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    margin-top: 0.15rem;
}

.feed-post-date-link {
    color: #8a828f;
    font-size: 0.77rem;
    line-height: 1.2;
    text-decoration: none;
}

.feed-post-date-link:hover {
    color: #6f42c1;
}

.post-edited-badge {
    color: #817887;
    font-size: 0.7rem;
}

.estado-card-menu {
    flex-shrink: 0;
}

.estado-card-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #77707d;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
}

.estado-card-menu-button:hover,
.estado-card-menu-button:focus {
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
}

.estado-card-menu-button svg {
    width: 21px;
    height: 21px;
}

.estado-card-dropdown {
    min-width: 220px;
    padding: 0.45rem;
    border: 1px solid #e8e1ed;
    border-radius: 0.9rem;
    box-shadow: 0 12px 30px rgba(33, 25, 39, 0.15);
}

.estado-card-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 42px;
    border-radius: 0.65rem;
}

.estado-card-dropdown-item svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
}

.estado-card-content {
    padding: 0.1rem 1rem 1rem;
}

.feed-post-content-link {
    display: block;
    color: #332d37;
    font-size: 0.98rem;
    line-height: 1.55;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.post-image-gallery {
    margin: 0;
    border-radius: 0;
}

.estado-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 38px;
    padding: 0.55rem 1rem;
    color: #807787;
    font-size: 0.8rem;
}

.estado-like-count,
.estado-comment-count-link {
    color: #807787;
    text-decoration: none;
}

.estado-comment-count-link:hover {
    color: #6f42c1;
}

.estado-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    border-top: 1px solid #eee9f1;
    border-bottom: 1px solid #eee9f1;
}

.estado-action-form {
    display: block;
    min-width: 0;
}

.estado-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 43px;
    padding: 0.5rem 0.35rem;
    color: #706978;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: 0.7rem;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.12s ease;
}

.estado-action-button:hover,
.estado-action-button:focus {
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.08);
}

.estado-action-button:active {
    transform: scale(0.96);
}

.estado-action-button svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.estado-like-button.is-liked {
    color: #d63384;
}

.feed-latest-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.85rem 1rem 0;
}

.estado-comment-avatar-link {
    display: inline-flex;
    flex-shrink: 0;
}

.estado-comment-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
}

.estado-comment-avatar-initial {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: #6f42c1;
}

.feed-latest-comment-body {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    background-color: #f5f3f7;
    border-radius: 0.9rem;
}

.feed-latest-comment-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.estado-comment-author {
    color: #332c38;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.estado-comment-date {
    color: #978f9c;
    font-size: 0.68rem;
}

.feed-latest-comment-content {
    display: block;
    color: #504957;
    font-size: 0.84rem;
    line-height: 1.45;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.feed-view-comments {
    padding: 0.7rem 1rem 1rem 3.95rem;
}

.feed-view-comments a {
    color: #6f42c1;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| TARJETAS DEL FEED EN MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .estado-card {
        margin-right: -0.15rem;
        margin-bottom: 0.75rem;
        margin-left: -0.15rem;
        border-radius: 0.95rem;
        box-shadow: 0 3px 12px rgba(33, 25, 39, 0.08) !important;
    }

    .estado-card-header {
        gap: 0.65rem;
        padding: 0.8rem 0.8rem 0.65rem;
    }

    .feed-avatar {
        width: 42px;
        height: 42px;
    }

    .feed-user-link {
        font-size: 0.94rem;
    }

    .feed-post-date-link {
        font-size: 0.7rem;
    }

    .estado-card-menu-button {
        width: 38px;
        height: 38px;
    }

    .estado-card-content {
        padding: 0.1rem 0.8rem 0.8rem;
    }

    .feed-post-content-link {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .post-image-gallery {
        width: 100%;
    }

    .estado-card-summary {
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }

    .estado-actions {
        gap: 0.15rem;
        padding-right: 0.35rem;
        padding-left: 0.35rem;
    }

    .estado-action-button {
        min-height: 46px;
        gap: 0.35rem;
        font-size: 0.78rem;
    }

    .estado-action-button svg {
        width: 19px;
        height: 19px;
    }

    .feed-latest-comment {
        margin-right: 0.8rem;
        margin-left: 0.8rem;
    }

    .feed-latest-comment-body {
        padding: 0.55rem 0.65rem;
    }

    .feed-view-comments {
        padding-right: 0.8rem;
        padding-bottom: 0.85rem;
        padding-left: 3.55rem;
    }
}

/*
|--------------------------------------------------------------------------
| TELÉFONOS MUY PEQUEÑOS
|--------------------------------------------------------------------------
*/

@media (max-width: 374.98px) {
    .estado-action-button {
        font-size: 0.72rem;
    }

    .estado-action-button svg {
        width: 18px;
        height: 18px;
    }

    .estado-card-summary {
        font-size: 0.74rem;
    }
}

/*
|--------------------------------------------------------------------------
| CREAR PUBLICACIÓN
|--------------------------------------------------------------------------
*/

.create-post-card {
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 1.15rem;
}

.create-post-body {
    padding: 1.1rem;
}

.create-post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.create-post-avatar {
    width: 44px;
    height: 44px;
}

.create-post-user {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.create-post-subtitle {
    overflow: hidden;
    color: #8a828f;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.create-post-textarea-wrapper {
    position: relative;
}

.create-post-textarea {
    min-height: 118px;
    padding: 0.9rem 0.9rem 2rem;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    background-color: #f7f5f9;
    border: 1px solid #e4dfea;
    border-radius: 0.95rem;
}

.create-post-textarea:focus {
    background-color: #ffffff;
    border-color: #9e7bd7;
    box-shadow: 0 0 0 0.22rem rgba(111, 66, 193, 0.12);
}

.create-post-character-counter {
    position: absolute;
    right: 0.8rem;
    bottom: 0.55rem;
    color: #978f9c;
    font-size: 0.72rem;
    pointer-events: none;
}

.create-post-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.post-image-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-width: 0;
}

.post-image-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    color: #6f42c1;
    font-size: 0.85rem;
    font-weight: 600;
    background-color: rgba(111, 66, 193, 0.09);
    border: 0;
    border-radius: 0.75rem;
}

.post-image-picker-button:hover,
.post-image-picker-button:focus {
    background-color: rgba(111, 66, 193, 0.15);
}

.post-image-picker-button svg {
    width: 20px;
    height: 20px;
}

.post-image-picker-help {
    color: #8a828f;
    font-size: 0.75rem;
}

.create-post-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;
    min-width: 108px;
    min-height: 42px;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 999px;
}

.feed-posts {
    display: flex;
    flex-direction: column;
}

.feed-empty-card {
    overflow: hidden;
    border-radius: 1.15rem;
}

.feed-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 50%;
}

.feed-empty-icon svg {
    width: 29px;
    height: 29px;
}

/*
|--------------------------------------------------------------------------
| CREAR PUBLICACIÓN EN MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    #crear-publicacion {
        scroll-margin-top: 76px;
    }

    .create-post-card {
        margin-right: -0.15rem;
        margin-bottom: 0.75rem;
        margin-left: -0.15rem;
        border-radius: 0.95rem;
        box-shadow: 0 3px 12px rgba(33, 25, 39, 0.08) !important;
    }

    .create-post-body {
        padding: 0.8rem;
    }

    .create-post-header {
        gap: 0.65rem;
        margin-bottom: 0.7rem;
    }

    .create-post-avatar {
        width: 40px;
        height: 40px;
    }

    .create-post-subtitle {
        font-size: 0.72rem;
    }

    .create-post-textarea {
        min-height: 104px;
        padding: 0.75rem 0.75rem 1.85rem;
        font-size: 16px;
        border-radius: 0.8rem;
    }

    .create-post-character-counter {
        right: 0.65rem;
        bottom: 0.45rem;
    }

    .create-post-toolbar {
        align-items: stretch;
        gap: 0.55rem;
        margin-top: 0.7rem;
    }

    .post-image-picker {
        flex: 1;
    }

    .post-image-picker-button {
        min-height: 44px;
        padding-right: 0.9rem;
        padding-left: 0.9rem;
    }

    .post-image-picker-help {
        display: none;
    }

    .create-post-submit {
        min-width: 100px;
        min-height: 44px;
    }

    .post-image-preview {
        margin-top: 0.7rem;
    }

    .load-more-button {
        width: 100%;
        min-height: 48px;
    }

    .post-delete-modal {
        border-radius: 1rem;
    }
}

@media (max-width: 374.98px) {
    .create-post-submit {
        min-width: 92px;
        padding-right: 0.8rem;
        padding-left: 0.8rem;
    }

    .post-image-picker-button {
        padding-right: 0.7rem;
        padding-left: 0.7rem;
    }
}

/*
|--------------------------------------------------------------------------
| DETALLE DE PUBLICACIÓN
|--------------------------------------------------------------------------
*/

.post-detail-topbar {
    margin-bottom: 0.8rem;
}

.post-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.45rem 0.65rem;
    color: #6f42c1;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.7rem;
}

.post-back-link:hover,
.post-back-link:focus {
    color: #5a32a3;
    background-color: rgba(111, 66, 193, 0.09);
}

.post-back-link svg {
    width: 20px;
    height: 20px;
}

.post-detail-card {
    overflow: hidden;
    border-radius: 1.15rem;
}

.post-detail-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.15rem 1.15rem 0.8rem;
}

.post-detail-avatar {
    width: 50px;
    height: 50px;
}

.post-detail-author-data {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.post-detail-author {
    font-size: 1rem;
}

.post-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.18rem;
    color: #8c8491;
    font-size: 0.76rem;
}

.post-detail-options {
    flex-shrink: 0;
}

.post-detail-content {
    padding: 0.25rem 1.15rem 1rem;
    color: #332d37;
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.post-detail-image-gallery {
    margin: 0;
    border-radius: 0;
}

.post-detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 40px;
    padding: 0.6rem 1rem;
    color: #7f7785;
    font-size: 0.82rem;
}

.post-detail-summary a {
    color: inherit;
    text-decoration: none;
}

.post-detail-summary a:hover {
    color: #6f42c1;
}

.post-detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
|--------------------------------------------------------------------------
| COMENTARIOS
|--------------------------------------------------------------------------
*/

.post-comments {
    padding: 1.1rem;
    scroll-margin-top: 86px;
}

.post-comments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.post-comments-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.55rem;
    color: #6f42c1;
    font-size: 0.8rem;
    font-weight: 700;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 999px;
}

.estado-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.estado-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    scroll-margin-top: 90px;
}

.estado-comment-body {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    background-color: #f5f3f7;
    border-radius: 0.95rem;
}

.estado-comment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.estado-comment-user-data {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.estado-comment-content {
    color: #4d4652;
    font-size: 0.88rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.estado-comment-options {
    flex-shrink: 0;
}

.estado-comment-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #8a828f;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
}

.estado-comment-menu-button:hover,
.estado-comment-menu-button:focus {
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.09);
}

.estado-comment-menu-button svg {
    width: 17px;
    height: 17px;
}

.estado-comment-dropdown {
    min-width: 205px;
    padding: 0.4rem;
    border: 1px solid #e8e1ed;
    border-radius: 0.8rem;
    box-shadow: 0 12px 28px rgba(33, 25, 39, 0.14);
}

.estado-comment-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 40px;
    border-radius: 0.6rem;
}

.estado-comment-dropdown-item svg {
    width: 18px;
    height: 18px;
}

.post-comments-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 180px;
    padding: 1.5rem;
    color: #7d7583;
    text-align: center;
    background-color: #faf9fb;
    border: 1px dashed #ddd5e3;
    border-radius: 0.95rem;
}

.post-comments-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 0.35rem;
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 50%;
}

.post-comments-empty-icon svg {
    width: 26px;
    height: 26px;
}

/*
|--------------------------------------------------------------------------
| FORMULARIO DE COMENTARIO
|--------------------------------------------------------------------------
*/

.post-comment-form {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #ece7ef;
    scroll-margin-top: 86px;
}

.post-comment-current-user {
    flex-shrink: 0;
}

.post-comment-form-content {
    flex: 1;
    min-width: 0;
}

.estado-comment-input {
    min-height: 76px;
    padding: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.45;
    resize: vertical;
    background-color: #f7f5f9;
    border: 1px solid #e2dce7;
    border-radius: 0.85rem;
}

.estado-comment-input:focus {
    background-color: #ffffff;
    border-color: #9e7bd7;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.11);
}

.post-comment-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: 0.55rem;
}

.estado-comment-form-message {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
}

.post-comment-form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.post-comment-character-count {
    color: #958d9a;
    font-size: 0.72rem;
}

.post-comment-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding-right: 0.9rem;
    padding-left: 0.9rem;
    border-radius: 999px;
}

.post-comment-submit svg {
    width: 17px;
    height: 17px;
}

.post-not-found-card {
    overflow: hidden;
    border-radius: 1.15rem;
}

.post-not-found-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 1rem;
    color: #842029;
    background-color: #f8d7da;
    border-radius: 50%;
}

.post-not-found-icon svg {
    width: 32px;
    height: 32px;
}

/*
|--------------------------------------------------------------------------
| DETALLE EN MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .post-detail-topbar {
        margin-bottom: 0.45rem;
    }

    .post-back-link {
        min-height: 38px;
        padding-right: 0.45rem;
        padding-left: 0.45rem;
        font-size: 0.8rem;
    }

    .post-detail-card {
        margin-right: -0.15rem;
        margin-left: -0.15rem;
        border-radius: 0.95rem;
        box-shadow: 0 3px 12px rgba(33, 25, 39, 0.08) !important;
    }

    .post-detail-header {
        gap: 0.65rem;
        padding: 0.8rem 0.8rem 0.65rem;
    }

    .post-detail-avatar {
        width: 42px;
        height: 42px;
    }

    .post-detail-author {
        font-size: 0.94rem;
    }

    .post-detail-meta {
        font-size: 0.69rem;
    }

    .post-detail-content {
        padding: 0.1rem 0.8rem 0.8rem;
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .post-detail-summary {
        padding-right: 0.8rem;
        padding-left: 0.8rem;
        font-size: 0.77rem;
    }

    .post-comments {
        padding: 0.85rem 0.8rem;
    }

    .post-comments-heading {
        margin-bottom: 0.8rem;
    }

    .estado-comments-list {
        gap: 0.65rem;
    }

    .estado-comment {
        gap: 0.5rem;
    }

    .estado-comment-avatar {
        width: 32px;
        height: 32px;
    }

    .estado-comment-body {
        padding: 0.6rem 0.65rem;
    }

    .estado-comment-author {
        font-size: 0.8rem;
    }

    .estado-comment-date {
        font-size: 0.64rem;
    }

    .estado-comment-content {
        font-size: 0.82rem;
    }

    .post-comment-form {
        gap: 0.5rem;
        margin-top: 0.9rem;
        padding-top: 0.85rem;
    }

    .estado-comment-input {
        min-height: 70px;
        font-size: 16px;
    }

    .post-comment-form-bottom {
        align-items: flex-end;
        flex-direction: column;
    }

    .estado-comment-form-message {
        width: 100%;
    }

    .post-comment-form-actions {
        justify-content: space-between;
        width: 100%;
    }

    .post-comment-submit {
        min-height: 42px;
    }

    .comment-delete-modal,
    .post-delete-modal {
        border-radius: 1rem;
    }
}

/*
|--------------------------------------------------------------------------
| PERFIL
|--------------------------------------------------------------------------
*/

.profile-card {
    overflow: hidden;
    border-radius: 1.25rem;
}

.profile-cover {
    position: relative;
    height: 170px;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            #8b5cf6 0%,
            #6f42c1 55%,
            #533092 100%);
}

.profile-cover-decoration {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
}

.profile-cover-decoration-one {
    top: -65px;
    right: -35px;
    width: 190px;
    height: 190px;
}

.profile-cover-decoration-two {
    bottom: -85px;
    left: 12%;
    width: 210px;
    height: 210px;
}

.profile-card-body {
    padding: 0 2rem 2rem;
}

.profile-main-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
    margin-top: -58px;
}

.profile-avatar-container {
    position: relative;
    z-index: 1;
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    object-fit: cover;
    border: 5px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 7px 24px rgba(35, 25, 43, 0.18);
}

.profile-avatar-initial {
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 700;
    background-color: #6f42c1;
}

.profile-heading {
    min-width: 0;
    padding-bottom: 0.65rem;
}

.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.profile-username {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #2e2833;
    font-size: 1.7rem;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-subtitle {
    margin: 0.4rem 0 0;
    color: #827a88;
    font-size: 0.85rem;
}

.profile-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 27px;
    padding: 0.25rem 0.55rem;
    color: #198754;
    font-size: 0.72rem;
    font-weight: 700;
    background-color: #dff3e8;
    border-radius: 999px;
}

.profile-verified-badge svg {
    width: 14px;
    height: 14px;
}

.profile-actions {
    padding-bottom: 0.65rem;
}

.profile-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 43px;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 999px;
}

.profile-edit-button svg {
    width: 18px;
    height: 18px;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.profile-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 0;
    min-height: 80px;
    padding: 0.75rem;
    color: #716978;
    text-align: center;
    text-decoration: none;
    background-color: #f7f4fa;
    border: 1px solid #ebe4f0;
    border-radius: 0.9rem;
}

a.profile-stat:hover,
a.profile-stat:focus {
    color: #6f42c1;
    background-color: #f2ebf9;
}

.profile-stat strong {
    color: #332d38;
    font-size: 1.3rem;
    line-height: 1.1;
}

.profile-stat span {
    margin-top: 0.25rem;
    font-size: 0.77rem;
}

.profile-divider {
    margin: 1.5rem 0;
    border-color: #ece6ef;
    opacity: 1;
}

.profile-section {
    height: 100%;
    padding: 1rem;
    background-color: #faf9fb;
    border: 1px solid #ece6f0;
    border-radius: 1rem;
}

.profile-section-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.profile-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 50%;
}

.profile-section-icon svg {
    width: 18px;
    height: 18px;
}

.profile-section-title {
    margin: 0;
    color: #38313d;
    font-size: 1rem;
    font-weight: 700;
}

.profile-details {
    margin: 0;
}

.profile-detail-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid #ebe6ee;
}

.profile-detail-row:first-child {
    padding-top: 0;
}

.profile-detail-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-detail-row dt {
    margin-bottom: 0.3rem;
    color: #8a828f;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-detail-row dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
    margin: 0;
    color: #3d3642;
    font-size: 0.88rem;
}

.profile-detail-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-email {
    word-break: break-word;
}

.profile-locked-badge,
.profile-email-status {
    display: inline-flex;
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
}

.profile-locked-badge {
    color: #766e7c;
    background-color: #ece8ef;
}

.profile-email-status.is-verified {
    color: #146c43;
    background-color: #d1e7dd;
}

.profile-email-status.is-pending {
    color: #997404;
    background-color: #fff3cd;
}

.profile-preferences {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.profile-preference-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.4rem 0.7rem;
    color: #5b349f;
    font-size: 0.8rem;
    font-weight: 650;
    background-color: #efe6fa;
    border: 1px solid #dfcff1;
    border-radius: 999px;
}

.profile-section-help {
    margin: 1rem 0 0;
    color: #847c8a;
    font-size: 0.78rem;
    line-height: 1.5;
}

.profile-section-link {
    display: inline-block;
    margin-top: 0.6rem;
    color: #6f42c1;
    font-size: 0.8rem;
    font-weight: 650;
    text-decoration: none;
}

.profile-empty-state {
    padding: 1rem;
    color: #766e7c;
    text-align: center;
    background-color: #ffffff;
    border: 1px dashed #dcd3e2;
    border-radius: 0.85rem;
}

.profile-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.7rem;
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 50%;
}

.profile-empty-icon svg {
    width: 23px;
    height: 23px;
}

.profile-public-link-wrapper {
    margin-top: 1.25rem;
}

.profile-public-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.75rem 1rem;
    color: #6f42c1;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    background-color: rgba(111, 66, 193, 0.08);
    border-radius: 0.85rem;
}

.profile-public-link:hover,
.profile-public-link:focus {
    color: #56319c;
    background-color: rgba(111, 66, 193, 0.13);
}

.profile-public-link svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/*
|--------------------------------------------------------------------------
| PERFIL EN MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .profile-card {
        margin-right: -0.15rem;
        margin-left: -0.15rem;
        border-radius: 0.95rem;
        box-shadow: 0 3px 12px rgba(33, 25, 39, 0.08) !important;
    }

    .profile-cover {
        height: 125px;
    }

    .profile-card-body {
        padding: 0 0.8rem 1rem;
    }

    .profile-main-header {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        gap: 0.75rem;
        margin-top: -43px;
    }

    .profile-avatar {
        width: 92px;
        height: 92px;
        border-width: 4px;
    }

    .profile-avatar-initial {
        font-size: 1.9rem;
    }

    .profile-heading {
        padding-bottom: 0.3rem;
    }

    .profile-username {
        font-size: 1.25rem;
    }

    .profile-subtitle {
        margin-top: 0.25rem;
        font-size: 0.7rem;
    }

    .profile-verified-badge {
        min-height: 23px;
        padding: 0.2rem 0.4rem;
        font-size: 0.62rem;
    }

    .profile-actions {
        grid-column: 1 / -1;
        width: 100%;
        padding: 0.65rem 0 0;
    }

    .profile-edit-button {
        width: 100%;
        min-height: 44px;
    }

    .profile-stats {
        gap: 0.4rem;
        margin-top: 0.85rem;
    }

    .profile-stat {
        min-height: 70px;
        padding: 0.55rem 0.25rem;
    }

    .profile-stat strong {
        font-size: 1.1rem;
    }

    .profile-stat span {
        font-size: 0.67rem;
    }

    .profile-divider {
        margin: 1rem 0;
    }

    .profile-section {
        padding: 0.85rem;
        border-radius: 0.85rem;
    }

    .profile-section-header {
        margin-bottom: 0.8rem;
    }

    .profile-detail-row {
        padding: 0.65rem 0;
    }

    .profile-public-link {
        min-height: 50px;
        font-size: 0.8rem;
    }
}

@media (max-width: 374.98px) {
    .profile-avatar {
        width: 82px;
        height: 82px;
    }

    .profile-username {
        font-size: 1.12rem;
    }

    .profile-verified-badge span {
        display: none;
    }
}

/*
|--------------------------------------------------------------------------
| PERFIL PÚBLICO
|--------------------------------------------------------------------------
*/

.public-profile-topbar {
    margin-bottom: 0.7rem;
}

.public-profile-card {
    margin-bottom: 1.25rem;
}

.public-profile-posts {
    scroll-margin-top: 82px;
}

.public-profile-posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    padding: 0 0.25rem;
}

.public-profile-post-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 0.65rem;
    color: #6f42c1;
    font-size: 0.82rem;
    font-weight: 700;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 999px;
}

.public-profile-empty-posts {
    overflow: hidden;
    border-radius: 1.15rem;
}

.user-not-found-card {
    overflow: hidden;
    border-radius: 1.15rem;
}

.user-not-found-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 1rem;
    color: #842029;
    background-color: #f8d7da;
    border-radius: 50%;
}

.user-not-found-icon svg {
    width: 31px;
    height: 31px;
}

/*
|--------------------------------------------------------------------------
| PERFIL PÚBLICO EN MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .public-profile-topbar {
        margin-bottom: 0.4rem;
    }

    .public-profile-card {
        margin-bottom: 0.85rem;
    }

    .public-profile-posts-header {
        margin-bottom: 0.65rem;
        padding-right: 0.15rem;
        padding-left: 0.15rem;
    }

    .public-profile-posts-header h2 {
        font-size: 1.25rem;
    }

    .public-profile-post-count {
        min-width: 34px;
        height: 34px;
        font-size: 0.76rem;
    }

    .public-profile-empty-posts {
        margin-right: -0.15rem;
        margin-left: -0.15rem;
        border-radius: 0.95rem;
    }
}

/*
|--------------------------------------------------------------------------
| EDICIÓN DEL PERFIL
|--------------------------------------------------------------------------
*/

.profile-edit-page-header {
    margin-bottom: 1rem;
}

.profile-edit-back-link {
    margin-bottom: 0.55rem;
}

.profile-edit-page-title {
    margin: 0;
    color: #302a35;
    font-size: 1.8rem;
    font-weight: 750;
    line-height: 1.2;
}

.profile-edit-page-subtitle {
    margin: 0.35rem 0 0;
    color: #817987;
    font-size: 0.9rem;
}

.profile-edit-errors {
    border: 0;
    border-radius: 0.95rem;
}

.profile-edit-errors-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

.profile-edit-errors-header svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.profile-edit-form {
    width: 100%;
}

.profile-edit-card {
    height: 100%;
    overflow: hidden;
    border-radius: 1.15rem;
}

.profile-edit-card-body {
    padding: 1.25rem;
}

.profile-edit-information-body {
    padding: 1.4rem;
}

.profile-edit-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.profile-edit-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.1);
    border-radius: 50%;
}

.profile-edit-section-icon svg {
    width: 20px;
    height: 20px;
}

.profile-edit-section-title {
    margin: 0;
    color: #38313d;
    font-size: 1.05rem;
    font-weight: 700;
}

.profile-edit-section-description {
    margin: 0.25rem 0 0;
    color: #89818f;
    font-size: 0.78rem;
    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| FOTOGRAFÍA DEL PERFIL
|--------------------------------------------------------------------------
*/

.profile-edit-avatar-wrapper {
    display: flex;
    justify-content: center;
    margin: 0.4rem 0 1.25rem;
}

.profile-edit-avatar-frame {
    position: relative;
}

.profile-edit-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 156px;
    object-fit: cover;
    border: 5px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px #e4dce9,
        0 10px 28px rgba(44, 32, 51, 0.16);
    transition:
        opacity 0.2s ease,
        filter 0.2s ease;
}

.profile-edit-avatar-initial {
    color: #ffffff;
    font-size: 3rem;
    font-weight: 700;
    background:
        linear-gradient(135deg,
            #8b5cf6,
            #6f42c1);
}

.profile-edit-avatar.is-marked-for-removal {
    opacity: 0.38;
    filter: grayscale(1);
}

.profile-edit-photo-status {
    position: absolute;
    right: 2px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0.25rem 0.55rem;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    background-color: #198754;
    border: 3px solid #ffffff;
    border-radius: 999px;
}

.profile-edit-photo-status.is-removing {
    background-color: #dc3545;
}

.profile-photo-controls {
    text-align: center;
}

.profile-photo-select-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 44px;
    border-radius: 0.75rem;
}

.profile-photo-select-button svg {
    width: 19px;
    height: 19px;
}

.profile-photo-file-name {
    margin: 0.65rem 0 0;
    overflow: hidden;
    color: #5f5765;
    font-size: 0.77rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-photo-help {
    margin: 0.3rem 0 0;
    color: #908895;
    font-size: 0.72rem;
}

.profile-photo-message {
    min-height: 20px;
    margin-top: 0.55rem;
    font-size: 0.74rem;
    line-height: 1.4;
}

.profile-photo-message.is-error {
    color: #b02a37;
}

.profile-photo-message.is-success {
    color: #146c43;
}

.profile-photo-remove {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    color: #6c626f;
    font-size: 0.8rem;
    background-color: #faf8fb;
    border: 1px solid #e9e3ec;
    border-radius: 0.75rem;
}

.profile-photo-remove .form-check-input {
    flex-shrink: 0;
    margin-top: 0.16rem;
}

/*
|--------------------------------------------------------------------------
| CAMPOS DEL PERFIL
|--------------------------------------------------------------------------
*/

.profile-edit-field {
    margin-bottom: 1.2rem;
}

.profile-edit-field .form-label,
.profile-edit-preferences>.form-label {
    color: #3d3642;
    font-size: 0.87rem;
    font-weight: 700;
}

.profile-edit-field .form-control,
.profile-edit-field .form-select {
    min-height: 46px;
    border-color: #ddd5e2;
    border-radius: 0.75rem;
}

.profile-edit-field .form-control:focus,
.profile-edit-field .form-select:focus {
    border-color: #9e7bd7;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.11);
}

.profile-edit-field .form-control:disabled {
    color: #716a76;
    background-color: #f3f1f5;
    opacity: 1;
}

.profile-edit-locked-field {
    position: relative;
}

.profile-edit-locked-field .form-control {
    padding-right: 2.7rem;
}

.profile-edit-lock-icon {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    display: inline-flex;
    color: #948b99;
    transform: translateY(-50%);
    pointer-events: none;
}

.profile-edit-lock-icon svg {
    width: 18px;
    height: 18px;
}

.profile-edit-inline-error {
    min-height: 18px;
    margin-top: 0.3rem;
    color: #b02a37;
    font-size: 0.75rem;
}

/*
|--------------------------------------------------------------------------
| PREFERENCIAS
|--------------------------------------------------------------------------
*/

.profile-edit-preferences {
    margin: 0;
    padding: 0;
    border: 0;
}

.profile-edit-preferences-help {
    margin: -0.15rem 0 0.75rem;
    color: #87808c;
    font-size: 0.78rem;
}

.profile-edit-preference-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.profile-edit-preference-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    min-height: 64px;
    padding: 0.75rem;
    color: #514858;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
    background-color: #faf9fb;
    border: 1px solid #e6dfea;
    border-radius: 0.85rem;
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.12s ease;
}

.profile-edit-preference-option:hover {
    color: #6f42c1;
    border-color: #cbb7e5;
    background-color: #f5effb;
}

.profile-edit-preference-option:active {
    transform: scale(0.98);
}

.profile-edit-preference-option:has(.form-check-input:checked) {
    color: #5c349f;
    background-color: #efe6fa;
    border-color: #b99cdd;
}

.profile-edit-preference-option.is-invalid {
    border-color: #dc3545;
}

.profile-edit-preference-option .form-check-input {
    flex-shrink: 0;
    margin: 0;
}

.profile-edit-preference-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #6f42c1;
}

.profile-edit-preference-icon svg {
    width: 21px;
    height: 21px;
}

/*
|--------------------------------------------------------------------------
| ACCIONES
|--------------------------------------------------------------------------
*/

.profile-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid #ece6ef;
}

.profile-edit-cancel-button,
.profile-edit-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 0.75rem;
}

.profile-edit-submit-button {
    gap: 0.45rem;
    min-width: 155px;
}

/*
|--------------------------------------------------------------------------
| EDICIÓN DEL PERFIL EN MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {
    .profile-edit-page-header {
        margin-bottom: 0.75rem;
    }

    .profile-edit-page-title {
        font-size: 1.45rem;
    }

    .profile-edit-page-subtitle {
        font-size: 0.8rem;
    }

    .profile-edit-card {
        margin-right: -0.15rem;
        margin-left: -0.15rem;
        border-radius: 0.95rem;
        box-shadow: 0 3px 12px rgba(33, 25, 39, 0.08) !important;
    }

    .profile-edit-card-body,
    .profile-edit-information-body {
        padding: 0.9rem;
    }

    .profile-edit-section-header {
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .profile-edit-section-icon {
        width: 36px;
        height: 36px;
    }

    .profile-edit-avatar {
        width: 132px;
        height: 132px;
    }

    .profile-edit-avatar-initial {
        font-size: 2.5rem;
    }

    .profile-edit-field .form-control,
    .profile-edit-field .form-select {
        min-height: 47px;
        font-size: 16px;
    }

    .profile-edit-preference-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .profile-edit-preference-option {
        min-height: 56px;
    }

    .profile-edit-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
        margin-top: 1.15rem;
    }

    .profile-edit-cancel-button,
    .profile-edit-submit-button {
        width: 100%;
        min-height: 46px;
    }

    .profile-edit-submit-button {
        min-width: 0;
    }
}

.post-comment-character-count.is-near-limit {
    color: #b02a37;
    font-weight: 700;
}

.estado-comment {
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        max-height 0.22s ease;
}

.estado-comment.is-removing {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(12px);
}

.comment-delete-feedback {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: #198754;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.comment-delete-feedback.is-visible {
    opacity: 1;
}

@media (max-width: 575.98px) {
    .comment-delete-feedback {
        width: 100%;
        margin-top: 0.35rem;
        margin-left: 0;
    }
}

[data-estado-id] {
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

[data-estado-id].is-removing {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    pointer-events: none;
}

.post-delete-feedback {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 1090;
    max-width: min(360px, calc(100vw - 2rem));
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.post-delete-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.estado-empty-card {
    padding: 3rem 1.5rem;
    border: 1px solid rgba(111, 66, 193, 0.1);
    border-radius: 1rem;
    background: #fff;
    text-align: center;
}

.estado-empty-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.estado-empty-icon svg {
    width: 1.65rem;
    height: 1.65rem;
}

.estado-empty-card h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.estado-empty-card p {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .post-delete-feedback {
        bottom: 1rem;
    }
}

.post-create-character-counter {
    color: #6c757d;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.post-create-character-counter.is-near-limit {
    color: #b26a00;
    font-weight: 600;
}

.post-create-character-counter.is-over-limit {
    color: #b02a37;
    font-weight: 700;
}

[data-post-create-form][aria-busy="true"] {
    cursor: progress;
}

[data-post-create-form][aria-busy="true"] textarea {
    opacity: 0.75;
}

[data-post-edit-images-counter].is-full {
    color: #6f42c1;
    font-weight: 600;
}

[data-post-edit-character-counter].is-near-limit,
[data-post-edit-character-count].is-near-limit {
    color: #b26a00;
    font-weight: 600;
}

[data-post-edit-character-counter].is-over-limit,
[data-post-edit-character-count].is-over-limit {
    color: #b02a37;
    font-weight: 700;
}

[data-post-edit-form][aria-busy="true"] {
    cursor: progress;
}

[data-existing-image] {
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        filter 0.2s ease;
}

[data-existing-image].is-marked-for-removal {
    opacity: 0.45;
    filter: grayscale(1);
    transform: scale(0.97);
}

.post-edit-empty-icon {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.post-edit-empty-icon svg {
    width: 1.8rem;
    height: 1.8rem;
}

[data-post-edit-character-counter] {
    transition: color 0.2s ease;
}

[data-post-edit-character-counter].is-near-limit {
    color: #b26a00;
    font-weight: 600;
}

[data-post-edit-character-counter].is-over-limit {
    color: #b02a37;
    font-weight: 700;
}

/* =========================================================
   LIGHTBOX DE PUBLICACIONES — CORRECCIÓN MÓVIL
   ========================================================= */

#postImageLightbox .modal-dialog {
    width: auto;
    max-width: min(1100px, calc(100vw - 2rem));
    margin: 1rem auto;
}

#postImageLightbox .modal-content {
    overflow: hidden;
}

#postImageLightbox .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 1rem;
    overflow: hidden;
}

#postImageLightbox img,
#postImageLightbox [data-post-lightbox-current-image] {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 8rem);
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 575.98px) {
    #postImageLightbox {
        padding: 0 !important;
    }

    #postImageLightbox .modal-dialog {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        margin: 0;
    }

    #postImageLightbox .modal-content {
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    #postImageLightbox .modal-body {
        width: 100%;
        min-height: 0;
        padding:
            0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    }

    #postImageLightbox img,
    #postImageLightbox [data-post-lightbox-current-image] {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin-right: auto;
        margin-left: auto;
        object-fit: contain;
        object-position: center center;
    }
}

/* =========================================================
   PÁGINAS LEGALES
   ========================================================= */

.legal-page {
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.75rem 2.5rem rgba(33, 37, 41, 0.07);
}

.legal-page-header {
    padding: 2.5rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.08);
    background:
        radial-gradient(circle at top right,
            rgba(111, 66, 193, 0.14),
            transparent 40%),
        linear-gradient(135deg,
            rgba(111, 66, 193, 0.06),
            rgba(255, 255, 255, 0.96));
}

.legal-page-eyebrow {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: #6f42c1;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-page-title {
    margin-bottom: 1rem;
    color: #212529;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 750;
    line-height: 1.1;
}

.legal-page-introduction {
    max-width: 720px;
    margin-bottom: 1rem;
    color: #5f6670;
    font-size: 1.05rem;
    line-height: 1.75;
}

.legal-page-updated {
    margin-bottom: 0;
    color: #7a818b;
    font-size: 0.875rem;
}

.legal-page-content {
    padding: 2.5rem;
}

.legal-page-content section+section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(33, 37, 41, 0.08);
}

.legal-page-content h2 {
    margin-bottom: 1rem;
    color: #212529;
    font-size: 1.35rem;
    font-weight: 700;
}

.legal-page-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #343a40;
    font-size: 1.05rem;
    font-weight: 700;
}

.legal-page-content p,
.legal-page-content li {
    color: #5f6670;
    line-height: 1.8;
}

.legal-page-content ul {
    margin-bottom: 1rem;
    padding-left: 1.35rem;
}

.legal-page-content li+li {
    margin-top: 0.55rem;
}

.legal-page-content a {
    color: #6f42c1;
    font-weight: 600;
    text-underline-offset: 0.2rem;
}

/* =========================================================
   CONTACTO
   ========================================================= */

.contact-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: start;
}

.contact-page-information {
    position: sticky;
    top: 6rem;
    padding: 1rem 0;
}

.contact-page-title {
    margin-bottom: 1rem;
    color: #212529;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 750;
    line-height: 1.1;
}

.contact-page-description {
    margin-bottom: 2rem;
    color: #5f6670;
    font-size: 1.05rem;
    line-height: 1.75;
}

.contact-information-list {
    display: grid;
    gap: 1rem;
}

.contact-information-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 1rem;
    background: #fff;
}

.contact-information-icon {
    display: inline-flex;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.contact-information-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.contact-information-item strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #212529;
}

.contact-information-item a,
.contact-information-item span {
    color: #6c757d;
    line-height: 1.5;
}

.contact-information-item a {
    color: #6f42c1;
    font-weight: 600;
    text-decoration: none;
}

.contact-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.contact-legal-links a {
    color: #6f42c1;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.contact-form-card {
    overflow: hidden;
    border-radius: 1.25rem;
}

.contact-form-card .card-body {
    padding: 2rem;
}

.contact-form-header {
    margin-bottom: 1.75rem;
}

.contact-form .form-label {
    color: #343a40;
    font-weight: 600;
}

.contact-form .form-control,
.contact-form .form-select {
    min-height: 3rem;
    border-color: rgba(33, 37, 41, 0.14);
    border-radius: 0.8rem;
}

.contact-form textarea.form-control {
    min-height: 10rem;
    resize: vertical;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: rgba(111, 66, 193, 0.65);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.12);
}

.contact-message-footer {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.contact-character-counter {
    flex: 0 0 auto;
    color: #7a818b;
    font-size: 0.8rem;
}

.contact-submit-button {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding-right: 1.35rem;
    padding-left: 1.35rem;
    border-radius: 0.8rem;
}

.contact-submit-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

@media (max-width: 991.98px) {
    .contact-page-grid {
        grid-template-columns: 1fr;
    }

    .contact-page-information {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .legal-page {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .legal-page-header,
    .legal-page-content {
        padding: 1.5rem;
    }

    .legal-page-content section+section {
        margin-top: 2rem;
        padding-top: 2rem;
    }

    .contact-form-card .card-body {
        padding: 1.25rem;
    }

    .contact-message-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .contact-submit-button {
        width: 100%;
    }
}

/* =========================================================
   AUTENTICACIÓN
   ========================================================= */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(100dvh - 11rem);
    padding: 2rem 0;
}

.auth-page-container {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.auth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 1.4rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgba(33, 37, 41, 0.09);
}

.auth-card-decoration {
    position: absolute;
    inset: 0 0 auto;
    height: 18rem;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            rgba(111, 66, 193, 0.14),
            rgba(111, 66, 193, 0.03));
    pointer-events: none;
}

.auth-card-decoration span {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: rgba(111, 66, 193, 0.12);
}

.auth-card-decoration span:nth-child(1) {
    top: -3rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
}

.auth-card-decoration span:nth-child(2) {
    top: 1rem;
    left: -2rem;
    width: 5rem;
    height: 5rem;
}

.auth-card-decoration span:nth-child(3) {
    top: 3.5rem;
    right: 28%;
    width: 2.5rem;
    height: 2.5rem;
}

.auth-card-content {
    position: relative;
    z-index: 1;
    padding: 2.5rem;
}

.auth-header {
    margin-bottom: 2rem;
    text-align: center;
}

.auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(111, 66, 193, 0.15);
    border-radius: 1.25rem;
    background: #fff;
    color: #6f42c1;
    box-shadow: 0 0.75rem 1.75rem rgba(111, 66, 193, 0.13);
}

.auth-icon svg {
    width: 1.8rem;
    height: 1.8rem;
}

.auth-title {
    margin-bottom: 0.5rem;
    color: #212529;
    font-size: 1.8rem;
    font-weight: 750;
    line-height: 1.2;
}

.auth-description {
    margin-bottom: 0;
    color: #6c757d;
    line-height: 1.55;
}

.auth-alert {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    border: 0;
    border-radius: 0.9rem;
    font-size: 0.9rem;
}

.auth-alert svg {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
}

.auth-form {
    display: grid;
    gap: 1.25rem;
}

.auth-field {
    min-width: 0;
}

.auth-label-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.auth-label {
    margin-bottom: 0.5rem;
    color: #343a40;
    font-size: 0.92rem;
    font-weight: 650;
}

.auth-secondary-link,
.auth-primary-link {
    color: #6f42c1;
    font-weight: 650;
    text-decoration: none;
}

.auth-secondary-link {
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}

.auth-secondary-link:hover,
.auth-primary-link:hover {
    color: #59359c;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.auth-input-wrapper {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a9099;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-input-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.auth-input {
    min-height: 3.25rem;
    padding: 0.75rem 1rem 0.75rem 2.9rem;
    border-color: rgba(33, 37, 41, 0.14);
    border-radius: 0.85rem;
    background: #fff;
    font-size: 1rem;
}

.auth-password-input {
    padding-right: 3.15rem;
}

.auth-input:focus {
    border-color: rgba(111, 66, 193, 0.65);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.12);
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: #747b85;
    transform: translateY(-50%);
}

.auth-password-toggle:hover {
    background: rgba(111, 66, 193, 0.08);
    color: #6f42c1;
}

.auth-password-toggle:focus-visible {
    outline: 3px solid rgba(111, 66, 193, 0.22);
    outline-offset: 1px;
}

.auth-password-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

.auth-submit-button {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 0.25rem;
    border-radius: 0.85rem;
    font-weight: 700;
}

.auth-submit-button svg {
    width: 1.15rem;
    height: 1.15rem;
}

.auth-footer {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.75rem;
    color: #6c757d;
    font-size: 0.92rem;
    text-align: center;
}

/* =========================================================
   AUTENTICACIÓN MÓVIL
   ========================================================= */

@media (max-width: 575.98px) {
    body.user-guest .socialhot-main {
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    .auth-page {
        align-items: flex-start;
        min-height: auto;
        padding:
            1rem 0 calc(1.5rem + env(safe-area-inset-bottom));
    }

    .auth-page-container {
        max-width: none;
    }

    .auth-card {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-card-content {
        padding: 2rem 1.25rem;
    }

    .auth-header {
        margin-bottom: 1.6rem;
    }

    .auth-icon {
        width: 3.5rem;
        height: 3.5rem;
        margin-bottom: 0.85rem;
        border-radius: 1rem;
    }

    .auth-title {
        font-size: 1.55rem;
    }

    .auth-description {
        font-size: 0.93rem;
    }

    .auth-form {
        gap: 1.1rem;
    }

    .auth-input {
        min-height: 3.35rem;
        font-size: 16px;
    }

    .auth-submit-button {
        min-height: 3.4rem;
    }

    .auth-label-row {
        align-items: flex-start;
    }

    .auth-secondary-link {
        max-width: 48%;
        text-align: right;
    }

    .auth-footer {
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }
}

@media (max-width: 359.98px) {
    .auth-card-content {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .auth-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    .auth-secondary-link {
        max-width: none;
        text-align: left;
    }
}

/* =========================================================
   REGISTRO
   ========================================================= */

.auth-register-container {
    max-width: 620px;
}

.auth-register-card .auth-card-content {
    padding: 2.5rem;
}

.auth-register-card .auth-card-decoration {
    height: 18rem;
}

.auth-help-text {
    margin-top: 0.45rem;
    color: #757c86;
    font-size: 0.8rem;
    line-height: 1.55;
}

.auth-select-wrapper {
    position: relative;
}

.auth-select {
    min-height: 3.25rem;
    padding: 0.75rem 2.75rem 0.75rem 2.9rem;
    border-color: rgba(33, 37, 41, 0.14);
    border-radius: 0.85rem;
    background-color: #fff;
    font-size: 1rem;
}

.auth-select:focus {
    border-color: rgba(111, 66, 193, 0.65);
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.12);
}

.register-preferences-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.register-preferences-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.register-preference-card {
    position: relative;
    display: block;
    min-width: 0;
    cursor: pointer;
}

.register-preference-card .form-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.register-preference-content {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.75rem;
    border: 1px solid rgba(33, 37, 41, 0.14);
    border-radius: 0.85rem;
    background: #fff;
    color: #5e6570;
    font-size: 0.9rem;
    font-weight: 650;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.register-preference-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.register-preference-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.register-preference-card:hover .register-preference-content {
    border-color: rgba(111, 66, 193, 0.4);
    background: rgba(111, 66, 193, 0.04);
    color: #6f42c1;
}

.register-preference-card.is-selected .register-preference-content {
    border-color: #6f42c1;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.08);
}

.register-preference-card:has(.form-check-input:focus-visible) .register-preference-content {
    outline: 3px solid rgba(111, 66, 193, 0.22);
    outline-offset: 2px;
}

.auth-error-list {
    align-items: flex-start;
}

.auth-error-list>svg {
    margin-top: 0.15rem;
}

.auth-error-list ul {
    padding-left: 1.15rem;
}

.auth-error-list li+li {
    margin-top: 0.3rem;
}

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

@media (max-width: 575.98px) {
    .auth-register-page {
        padding-top: 0.5rem;
    }

    .auth-register-card .auth-card-content {
        padding: 1.75rem 1.25rem 2rem;
    }

    .auth-register-card .auth-header {
        margin-bottom: 1.5rem;
    }

    .register-preferences-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .register-preference-content {
        justify-content: flex-start;
        min-height: 3.3rem;
        padding-right: 1rem;
        padding-left: 1rem;
        font-size: 0.95rem;
    }

    .auth-select {
        min-height: 3.35rem;
        font-size: 16px;
    }

    .auth-register-card .auth-submit-button {
        min-height: 3.5rem;
        margin-top: 0.25rem;
    }

    .auth-help-text {
        font-size: 0.78rem;
    }
}

@media (max-width: 359.98px) {
    .auth-register-card .auth-card-content {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* =========================================================
   MANTENER SESIÓN INICIADA
   ========================================================= */

.auth-remember-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(33, 37, 41, 0.1);
    border-radius: 0.85rem;
    background: rgba(111, 66, 193, 0.035);
    cursor: pointer;
}

.auth-remember-option .form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border-color: rgba(33, 37, 41, 0.25);
    cursor: pointer;
}

.auth-remember-option .form-check-input:checked {
    border-color: #6f42c1;
    background-color: #6f42c1;
}

.auth-remember-option .form-check-input:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.15);
}

.auth-remember-option span {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.auth-remember-option strong {
    color: #343a40;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
}

.auth-remember-option small {
    color: #747b85;
    font-size: 0.78rem;
    line-height: 1.45;
}

@media (max-width: 575.98px) {
    .auth-remember-option {
        padding: 0.9rem;
    }

    .auth-remember-option strong {
        font-size: 0.92rem;
    }

    .auth-remember-option small {
        font-size: 0.8rem;
    }
}

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

.admin-body {
    min-height: 100vh;
    margin: 0;
    background: #f5f6f8;
    color: #25282d;
}

.admin-layout {
    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: 270px;
    background: #22163a;
    color: #fff;
    box-shadow: 0.5rem 0 2rem rgba(24, 15, 41, 0.12);
}

.admin-sidebar-header {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.admin-brand {
    display: grid;
    gap: 0.15rem;
    color: #fff;
    text-decoration: none;
}

.admin-brand img {
    width: 145px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.admin-brand span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-sidebar-close {
    display: none;
    margin-left: auto;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: #fff;
}

.admin-sidebar-close svg {
    width: 1.4rem;
    height: 1.4rem;
}

.admin-navigation {
    display: grid;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
}

.admin-navigation-label {
    padding: 0 0.75rem 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-navigation-link {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.admin-navigation-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-navigation-link.is-active {
    background: #6f42c1;
    color: #fff;
    box-shadow: 0 0.6rem 1.5rem rgba(111, 66, 193, 0.3);
}

.admin-navigation-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-navigation-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.admin-back-link {
    display: block;
    padding: 0.75rem;
    border-radius: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    text-decoration: none;
}

.admin-back-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.admin-content-wrapper {
    min-height: 100vh;
    margin-left: 270px;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.08);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.admin-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: 0.75rem;
    border: 1px solid rgba(33, 37, 41, 0.1);
    border-radius: 0.75rem;
    background: #fff;
    color: #343a40;
}

.admin-sidebar-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
}

.admin-topbar-title {
    display: grid;
    line-height: 1.25;
}

.admin-topbar-title span {
    font-weight: 750;
}

.admin-topbar-title small {
    color: #747b85;
}

.admin-user-button {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin-left: auto;
    padding: 0.25rem 0.45rem;
    border: 0;
    border-radius: 0.8rem;
    background: transparent;
}

.admin-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.admin-user-initial {
    background: rgba(111, 66, 193, 0.12);
    color: #6f42c1;
    font-weight: 750;
}

.admin-user-name {
    max-width: 180px;
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-main {
    width: 100%;
    max-width: 1600px;
    min-height: calc(100vh - 130px);
    margin: 0 auto;
    padding: 2rem;
}

.admin-page-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.admin-page-eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    color: #6f42c1;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-page-header h1 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 780;
}

.admin-page-header p {
    margin: 0.45rem 0 0;
    color: #747b85;
}

.admin-page-date {
    color: #747b85;
    font-size: 0.88rem;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.admin-stat-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid rgba(33, 37, 41, 0.07);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(33, 37, 41, 0.045);
}

.admin-stat-icon {
    display: inline-flex;
    flex: 0 0 3rem;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

.admin-stat-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.admin-stat-card>div:last-child {
    display: grid;
    min-width: 0;
}

.admin-stat-label {
    color: #747b85;
    font-size: 0.8rem;
    font-weight: 650;
}

.admin-stat-card strong {
    font-size: 1.7rem;
    line-height: 1.2;
}

.admin-stat-card small {
    overflow: hidden;
    color: #8a9099;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-secondary-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.admin-secondary-stat-grid article {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
    border: 1px solid rgba(33, 37, 41, 0.07);
    border-radius: 0.85rem;
    background: #fff;
}

.admin-secondary-stat-grid span {
    color: #747b85;
    font-size: 0.76rem;
}

.admin-secondary-stat-grid strong {
    font-size: 1.15rem;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 1rem;
    margin-top: 1rem;
}

.admin-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, 0.07);
    border-radius: 1rem;
    background: #fff;
}

.admin-panel-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-panel-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 750;
}

.admin-panel-header p {
    margin: 0.25rem 0 0;
    color: #747b85;
    font-size: 0.82rem;
}

.admin-panel-header a {
    flex: 0 0 auto;
    color: #6f42c1;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.admin-table-wrapper {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.06);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: #747b85;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-table td {
    font-size: 0.83rem;
}

.admin-user-cell {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-width: 180px;
}

.admin-table-avatar {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    font-weight: 750;
}

.admin-user-cell>div {
    display: grid;
    min-width: 0;
}

.admin-user-cell small {
    max-width: 200px;
    overflow: hidden;
    color: #7a818b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-status {
    display: inline-flex;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 750;
}

.admin-status-activa {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.admin-status-suspendida {
    background: rgba(255, 193, 7, 0.16);
    color: #946f00;
}

.admin-status-bloqueada {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.admin-pending-label {
    display: block;
    margin-top: 0.25rem;
    color: #946f00;
}

.admin-recent-posts {
    display: grid;
}

.admin-recent-post {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.06);
}

.admin-recent-post:last-child {
    border-bottom: 0;
}

.admin-recent-post header {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.admin-recent-post header time {
    color: #8a9099;
    font-size: 0.72rem;
}

.admin-recent-post p {
    margin: 0.55rem 0;
    color: #5f6670;
    font-size: 0.83rem;
    line-height: 1.5;
}

.admin-recent-post footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    color: #858b94;
    font-size: 0.72rem;
}

.admin-recent-post footer a {
    margin-left: auto;
    color: #6f42c1;
    font-weight: 700;
    text-decoration: none;
}

.admin-empty-state {
    margin: 0;
    padding: 2rem;
    color: #747b85;
    text-align: center;
}

.admin-footer {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-top: 1px solid rgba(33, 37, 41, 0.07);
    color: #838992;
    font-size: 0.78rem;
}

.admin-sidebar-backdrop {
    display: none;
}

/* =========================================================
   PANEL ADMINISTRATIVO RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-secondary-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(-105%);
        transition: transform 0.22s ease;
    }

    .admin-sidebar-open {
        overflow: hidden;
    }

    .admin-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-sidebar-open .admin-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1035;
        display: block;
        background: rgba(15, 10, 24, 0.55);
    }

    .admin-sidebar-close,
    .admin-sidebar-toggle {
        display: inline-flex;
    }

    .admin-content-wrapper {
        margin-left: 0;
    }

    .admin-topbar {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .admin-main {
        padding: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .admin-sidebar {
        width: min(86vw, 300px);
    }

    .admin-user-name {
        display: none;
    }

    .admin-topbar-title span {
        font-size: 0.9rem;
    }

    .admin-main {
        padding:
            1rem 0.75rem calc(1.5rem + env(safe-area-inset-bottom));
    }

    .admin-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

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

    .admin-secondary-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-panel-header {
        padding: 1rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.8rem;
    }

    .admin-footer {
        align-items: center;
        flex-direction: column;
        gap: 0.25rem;
        padding:
            1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Alinear usuario administrador a la derecha */
.admin-topbar>.dropdown {
    margin-left: auto;
}

.admin-user-button {
    margin-left: 0;
}

/* =========================================================
   ADMINISTRACIÓN DE USUARIOS
   ========================================================= */

.admin-users-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.admin-users-summary article {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(33, 37, 41, 0.07);
    border-radius: 0.9rem;
    background: #fff;
}

.admin-users-summary span {
    color: #747b85;
    font-size: 0.76rem;
    font-weight: 650;
}

.admin-users-summary strong {
    font-size: 1.35rem;
    line-height: 1.2;
}

.admin-users-panel {
    overflow: visible;
}

.admin-users-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-users-filter-form {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.admin-users-filter-form .form-control,
.admin-users-filter-form .form-select {
    min-height: 2.75rem;
    font-size: 0.86rem;
}

.admin-users-search-field {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
}

.admin-users-search-field svg {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 2;
    width: 1rem;
    height: 1rem;
    color: #8a9099;
    transform: translateY(-50%);
    pointer-events: none;
}

.admin-users-search-field .form-control {
    padding-left: 2.55rem;
}

.admin-users-result-count {
    flex: 0 0 auto;
    color: #747b85;
    font-size: 0.8rem;
}

.admin-users-list {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.admin-user-card {
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 0.95rem;
    background: #fff;
}

.admin-user-card-main {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 1.1rem 0.8rem;
}

.admin-user-card-avatar {
    display: inline-flex;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    font-size: 1.1rem;
    font-weight: 750;
}

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

.admin-user-card-identity {
    min-width: 0;
}

.admin-user-card-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.admin-user-card-name-row h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
}

.admin-user-card-identity>a {
    display: block;
    max-width: 420px;
    overflow: hidden;
    margin-top: 0.1rem;
    color: #747b85;
    font-size: 0.82rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-card-identity>a:hover {
    color: #6f42c1;
}

.admin-current-user-label {
    display: inline-flex;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-size: 0.66rem;
    font-weight: 750;
}

.admin-user-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.admin-role-badge,
.admin-verification-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.26rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
}

.admin-role-usuario {
    background: rgba(108, 117, 125, 0.1);
    color: #61676d;
}

.admin-role-moderador {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.admin-role-administrador {
    background: rgba(111, 66, 193, 0.12);
    color: #6f42c1;
}

.admin-verification-badge.is-verified {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.admin-verification-badge.is-pending {
    background: rgba(255, 193, 7, 0.16);
    color: #8a6800;
}

.admin-user-card-data {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.055);
    border-bottom: 1px solid rgba(33, 37, 41, 0.055);
    background: rgba(248, 249, 250, 0.7);
}

.admin-user-card-data div {
    display: grid;
    gap: 0.12rem;
}

.admin-user-card-data span {
    color: #858b94;
    font-size: 0.68rem;
}

.admin-user-card-data strong {
    font-size: 0.85rem;
}

.admin-user-restriction-info {
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.055);
    background: rgba(255, 193, 7, 0.07);
    color: #6c5a19;
    font-size: 0.78rem;
}

.admin-user-restriction-info p {
    margin: 0;
}

.admin-user-restriction-info p+p {
    margin-top: 0.25rem;
}

.admin-user-card-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
}

.admin-user-card-registration {
    display: grid;
    gap: 0.1rem;
}

.admin-user-card-registration span {
    color: #858b94;
    font-size: 0.68rem;
}

.admin-user-card-registration strong {
    font-size: 0.77rem;
    font-weight: 650;
}

.admin-user-card-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-user-session-option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 0.8rem;
    background: #f8f9fa;
    cursor: pointer;
}

.admin-user-session-option .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.admin-user-session-option span {
    display: grid;
    gap: 0.12rem;
}

.admin-user-session-option strong {
    font-size: 0.84rem;
}

.admin-user-session-option small {
    color: #747b85;
    font-size: 0.75rem;
}

.admin-user-modal {
    border: 0;
    border-radius: 1rem;
}

.admin-suspension-date-field[hidden] {
    display: none !important;
}

.admin-users-pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-users-pagination>span {
    color: #747b85;
    font-size: 0.8rem;
}

.admin-users-empty {
    display: grid;
    justify-items: center;
    padding: 4rem 1rem;
    text-align: center;
}

.admin-users-empty svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: #aaaeb5;
}

.admin-users-empty h2 {
    margin: 0;
    font-size: 1.05rem;
}

.admin-users-empty p {
    margin: 0.4rem 0 0;
    color: #747b85;
    font-size: 0.85rem;
}

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

@media (max-width: 1199.98px) {
    .admin-users-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-user-card-data {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-users-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-users-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-users-filter-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-users-search-field {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .admin-users-result-count {
        text-align: right;
    }

    .admin-user-card-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-users-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-users-pagination .pagination {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .admin-users-summary {
        grid-template-columns: 1fr 1fr;
    }

    .admin-users-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-users-search-field {
        grid-column: auto;
    }

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

    .admin-users-list {
        padding: 0.65rem;
    }

    .admin-user-card-main {
        align-items: flex-start;
        padding: 0.9rem;
    }

    .admin-user-card-avatar {
        flex-basis: 3rem;
        width: 3rem;
        height: 3rem;
    }

    .admin-user-card-identity>a {
        max-width: 210px;
    }

    .admin-user-card-data {
        padding: 0.75rem 0.9rem;
    }

    .admin-user-card-footer {
        align-items: stretch;
        flex-direction: column;
        padding: 0.8rem 0.9rem;
    }

    .admin-user-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-user-card-actions .btn {
        width: 100%;
    }

    .admin-users-pagination .pagination {
        flex-wrap: wrap;
    }
}

/* =========================================================
   ADMINISTRACIÓN DE PUBLICACIONES
   ========================================================= */

.admin-posts-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.admin-posts-summary article {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(33, 37, 41, 0.07);
    border-radius: 0.9rem;
    background: #fff;
}

.admin-posts-summary span {
    color: #747b85;
    font-size: 0.76rem;
    font-weight: 650;
}

.admin-posts-summary strong {
    font-size: 1.35rem;
}

.admin-posts-panel {
    overflow: visible;
}

.admin-posts-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-posts-filter-form {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.admin-posts-search {
    flex: 1 1 300px;
}

.admin-posts-filter-form .form-control,
.admin-posts-filter-form .form-select {
    min-height: 2.75rem;
    font-size: 0.86rem;
}

.admin-posts-filter-form .form-select {
    width: auto;
    min-width: 165px;
}

.admin-posts-result-count {
    flex: 0 0 auto;
    color: #747b85;
    font-size: 0.8rem;
}

.admin-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.admin-post-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 1rem;
    background: #fff;
}

.admin-post-card-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
}

.admin-post-author {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    min-width: 0;
}

.admin-post-author>img,
.admin-post-author>span {
    display: inline-flex;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    font-weight: 750;
    object-fit: cover;
}

.admin-post-author>div {
    display: grid;
    min-width: 0;
}

.admin-post-author strong,
.admin-post-author small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-post-author small,
.admin-post-card-header time {
    color: #858b94;
    font-size: 0.7rem;
}

.admin-post-preview-image {
    position: relative;
    display: block;
    height: 190px;
    overflow: hidden;
    background: #eef0f3;
}

.admin-post-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-post-preview-image span {
    position: absolute;
    right: 0.7rem;
    bottom: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: rgba(20, 20, 25, 0.78);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 750;
}

.admin-post-card-content {
    padding: 0.9rem 1rem;
}

.admin-post-card-content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #4f565f;
    font-size: 0.85rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.admin-post-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.055);
    color: #7d838c;
    font-size: 0.72rem;
}

.admin-post-card-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: auto;
    padding: 0.8rem 1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.055);
}

.admin-posts-pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-posts-pagination>span {
    color: #747b85;
    font-size: 0.8rem;
}

@media (max-width: 1199.98px) {
    .admin-posts-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 767.98px) {
    .admin-posts-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-posts-toolbar,
    .admin-posts-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-posts-filter-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-posts-search {
        grid-column: 1 / -1;
    }

    .admin-posts-filter-form .form-select {
        width: 100%;
        min-width: 0;
    }

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

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

    .admin-posts-search {
        grid-column: auto;
    }

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

    .admin-posts-grid {
        padding: 0.65rem;
    }

    .admin-post-card-header {
        flex-direction: column;
    }

    .admin-post-card-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-post-card-footer .btn {
        width: 100%;
    }

    .admin-posts-pagination .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================
   ADMINISTRACIÓN DE COMENTARIOS
   ========================================================= */

.admin-comments-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.admin-comments-summary article {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(33, 37, 41, 0.07);
    border-radius: 0.9rem;
    background: #fff;
}

.admin-comments-summary span {
    color: #747b85;
    font-size: 0.76rem;
    font-weight: 650;
}

.admin-comments-summary strong {
    font-size: 1.35rem;
    line-height: 1.2;
}

.admin-comments-panel {
    overflow: visible;
}

.admin-comments-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-comments-filter-form {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.admin-comments-search {
    flex: 1 1 320px;
}

.admin-comments-filter-form .form-control,
.admin-comments-filter-form .form-select {
    min-height: 2.75rem;
    font-size: 0.86rem;
}

.admin-comments-filter-form .form-select {
    min-width: 220px;
}

.admin-comments-result-count {
    flex: 0 0 auto;
    color: #747b85;
    font-size: 0.8rem;
}

.admin-comments-list {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
}

.admin-comment-card {
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 1rem;
    background: #fff;
}

.admin-comment-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.1rem;
}

.admin-comment-user {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
}

.admin-comment-user>img,
.admin-comment-user>span {
    display: inline-flex;
    flex: 0 0 3rem;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    font-weight: 750;
    object-fit: cover;
}

.admin-comment-user>div {
    display: grid;
    min-width: 0;
}

.admin-comment-user-name {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.admin-comment-user-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-comment-user-name span {
    display: inline-flex;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    font-size: 0.65rem;
    font-weight: 750;
}

.admin-comment-user a {
    max-width: 300px;
    overflow: hidden;
    color: #7a818b;
    font-size: 0.76rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-comment-user a:hover {
    color: #6f42c1;
}

.admin-comment-card-header time {
    flex: 0 0 auto;
    color: #858b94;
    font-size: 0.73rem;
}

.admin-comment-content {
    padding: 0.2rem 1.1rem 1rem;
}

.admin-comment-content p {
    margin: 0;
    color: #424850;
    font-size: 0.9rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.admin-comment-post-context {
    padding: 0.85rem 1.1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.055);
    border-bottom: 1px solid rgba(33, 37, 41, 0.055);
    background: #f8f9fa;
}

.admin-comment-context-label {
    display: block;
    color: #646b74;
    font-size: 0.76rem;
}

.admin-comment-post-context p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.4rem 0;
    color: #4f565f;
    font-size: 0.8rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.admin-comment-post-context small {
    color: #8a9099;
    font-size: 0.7rem;
}

.admin-comment-card-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
}

.admin-comment-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: #858b94;
    font-size: 0.7rem;
}

.admin-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.admin-comment-delete-preview {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-left: 4px solid #6f42c1;
    border-radius: 0.35rem;
    background: #f6f3fb;
    color: #4d4558;
    font-size: 0.85rem;
    line-height: 1.55;
}

.admin-comments-pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-comments-pagination>span {
    color: #747b85;
    font-size: 0.8rem;
}

.admin-comments-empty {
    display: grid;
    justify-items: center;
    padding: 4rem 1rem;
    text-align: center;
}

.admin-comments-empty svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: #aaaeb5;
}

.admin-comments-empty h2 {
    margin: 0;
    font-size: 1.05rem;
}

.admin-comments-empty p {
    margin: 0.4rem 0 0;
    color: #747b85;
    font-size: 0.85rem;
}

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

@media (max-width: 1199.98px) {
    .admin-comments-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-comments-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-comments-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-comments-filter-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-comments-search {
        grid-column: 1 / -1;
    }

    .admin-comments-filter-form .form-select {
        width: 100%;
        min-width: 0;
    }

    .admin-comments-result-count {
        text-align: right;
    }

    .admin-comment-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-comment-actions {
        justify-content: flex-start;
    }

    .admin-comments-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-comments-pagination .pagination {
        justify-content: center;
    }
}

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

    .admin-comments-search {
        grid-column: auto;
    }

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

    .admin-comments-list {
        padding: 0.65rem;
    }

    .admin-comment-card-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 0.9rem;
    }

    .admin-comment-content {
        padding: 0 0.9rem 0.9rem;
    }

    .admin-comment-post-context,
    .admin-comment-card-footer {
        padding-right: 0.9rem;
        padding-left: 0.9rem;
    }

    .admin-comment-user a {
        max-width: 210px;
    }

    .admin-comment-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .admin-comment-actions .btn {
        width: 100%;
    }

    .admin-comment-actions .btn:last-child {
        grid-column: 1 / -1;
    }

    .admin-comments-pagination .pagination {
        flex-wrap: wrap;
    }
}

/* =========================================================
   ADMINISTRACIÓN DE SESIONES
   ========================================================= */

.admin-sessions-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.admin-sessions-summary article {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(33, 37, 41, 0.07);
    border-radius: 0.9rem;
    background: #fff;
}

.admin-sessions-summary span {
    color: #747b85;
    font-size: 0.76rem;
    font-weight: 650;
}

.admin-sessions-summary strong {
    font-size: 1.35rem;
    line-height: 1.2;
}

.admin-sessions-panel {
    overflow: visible;
}

.admin-sessions-toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-sessions-filter-form {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.admin-sessions-search {
    flex: 1 1 320px;
}

.admin-sessions-filter-form .form-control,
.admin-sessions-filter-form .form-select {
    min-height: 2.75rem;
    font-size: 0.86rem;
}

.admin-sessions-filter-form .form-select {
    min-width: 190px;
}

.admin-sessions-result-count {
    flex: 0 0 auto;
    color: #747b85;
    font-size: 0.8rem;
}

.admin-sessions-list {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.admin-session-card {
    overflow: hidden;
    border: 1px solid rgba(33, 37, 41, 0.08);
    border-radius: 1rem;
    background: #fff;
}

.admin-session-user {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 1rem 1.1rem;
}

.admin-session-avatar {
    display: inline-flex;
    flex: 0 0 3.25rem;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
    font-weight: 750;
}

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

.admin-session-user-info {
    display: grid;
    min-width: 0;
}

.admin-session-user-name {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.admin-session-user-info>a {
    max-width: 420px;
    overflow: hidden;
    color: #747b85;
    font-size: 0.8rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-session-user-info>small {
    color: #8a9099;
    font-size: 0.7rem;
}

.admin-session-state {
    display: inline-flex;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 750;
}

.admin-session-state.is-active {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.admin-session-state.is-expired {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

.admin-session-data {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.055);
    border-bottom: 1px solid rgba(33, 37, 41, 0.055);
    background: #f8f9fa;
}

.admin-session-data>div {
    display: grid;
    align-content: start;
    gap: 0.12rem;
    min-width: 0;
}

.admin-session-data span {
    color: #858b94;
    font-size: 0.68rem;
}

.admin-session-data strong {
    overflow: hidden;
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-session-data small {
    color: #6f42c1;
    font-size: 0.68rem;
}

.admin-session-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
}

.admin-session-footer>span {
    color: #858b94;
    font-size: 0.7rem;
}

.admin-session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.admin-sessions-pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid rgba(33, 37, 41, 0.07);
}

.admin-sessions-pagination>span {
    color: #747b85;
    font-size: 0.8rem;
}

.admin-sessions-empty {
    display: grid;
    justify-items: center;
    padding: 4rem 1rem;
    text-align: center;
}

.admin-sessions-empty svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    color: #aaaeb5;
}

.admin-sessions-empty h2 {
    margin: 0;
    font-size: 1.05rem;
}

.admin-sessions-empty p {
    margin: 0.4rem 0 0;
    color: #747b85;
    font-size: 0.85rem;
}

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

@media (max-width: 1199.98px) {
    .admin-sessions-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-session-data {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-sessions-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-sessions-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-sessions-filter-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .admin-sessions-search {
        grid-column: 1 / -1;
    }

    .admin-sessions-filter-form .form-select {
        width: 100%;
        min-width: 0;
    }

    .admin-sessions-result-count {
        text-align: right;
    }

    .admin-session-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-session-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-session-actions {
        justify-content: flex-start;
    }

    .admin-sessions-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-sessions-pagination .pagination {
        justify-content: center;
    }
}

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

    .admin-sessions-search {
        grid-column: auto;
    }

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

    .admin-sessions-list {
        padding: 0.65rem;
    }

    .admin-session-user {
        align-items: flex-start;
        padding: 0.9rem;
    }

    .admin-session-user-info>a {
        max-width: 210px;
    }

    .admin-session-data {
        padding: 0.8rem 0.9rem;
    }

    .admin-session-footer {
        padding: 0.8rem 0.9rem;
    }

    .admin-session-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .admin-session-actions .btn {
        width: 100%;
    }

    .admin-session-actions .btn:last-child:nth-child(3) {
        grid-column: 1 / -1;
    }

    .admin-sessions-pagination .pagination {
        flex-wrap: wrap;
    }
}

/* =========================================================
   COMENTARIO DEL FEED — AJUSTE VISUAL
   ========================================================= */

.feed-latest-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    width: auto;
    margin: 0.85rem 1rem;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.feed-latest-comment .estado-comment-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    border: 0;
    box-shadow: 0 0 0 1px rgba(111, 66, 193, 0.16);
}

.feed-latest-comment-body {
    flex: 1;
    min-width: 0;
    width: auto;

    padding: 0.7rem 0.85rem;

    border-radius: 1rem;
    background-color: #f5f3f7;
}

.feed-latest-comment-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;

    margin-bottom: 0.25rem;
}

.feed-latest-comment .estado-comment-author {
    color: #302a35;
    font-size: 0.88rem;
    font-weight: 700;
}

.feed-latest-comment .estado-comment-date {
    color: #918895;
    font-size: 0.72rem;
}

.feed-latest-comment-content {
    display: -webkit-box;

    margin: 0;
    overflow: hidden;

    color: #514a56;
    font-size: 0.88rem;
    line-height: 1.45;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.feed-view-comments {
    width: auto;
    margin: 0;
    padding: 0.55rem 1rem 0.85rem 4.4rem;
}

@media (max-width: 575.98px) {
    .feed-latest-comment {
        gap: 0.55rem;
        margin-right: 0.8rem;
        margin-left: 0.8rem;
    }

    .feed-latest-comment .estado-comment-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .feed-latest-comment-body {
        padding: 0.6rem 0.7rem;
    }

    .feed-view-comments {
        padding-left: 3.75rem;
    }
}

/* =========================================================
   CAJA DE PUBLICACIÓN — AJUSTES MÓVILES
   ========================================================= */

@media (max-width: 767.98px) {
    /*
    |--------------------------------------------------------------------------
    | CONTENEDOR DEL TEXTAREA
    |--------------------------------------------------------------------------
    */

    .create-post-textarea-wrapper {
        position: relative;
    }

    .create-post-textarea {
        min-height: 104px;
        padding:
            0.8rem 0.8rem 2.15rem;

        font-size: 16px;
    }

    /*
    |--------------------------------------------------------------------------
    | CONTADOR DE CARACTERES
    |--------------------------------------------------------------------------
    |
    | Se incluyen ambos nombres porque el CSS actual contiene
    | create-post-character-counter y post-create-character-counter.
    |
    */

    .create-post-character-counter,
    .post-create-character-counter {
        position: absolute;
        right: 0.75rem;
        bottom: 0.55rem;
        z-index: 2;

        margin: 0;

        color: #8a828f;
        font-size: 0.72rem;
        line-height: 1;

        pointer-events: none;
    }

    .create-post-character-counter.is-near-limit,
    .post-create-character-counter.is-near-limit {
        color: #b26a00;
        font-weight: 600;
    }

    .create-post-character-counter.is-over-limit,
    .post-create-character-counter.is-over-limit {
        color: #b02a37;
        font-weight: 700;
    }

    /*
    |--------------------------------------------------------------------------
    | BARRA INFERIOR
    |--------------------------------------------------------------------------
    */

    .create-post-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.65rem;

        margin-top: 0.75rem;
    }

    /*
    |--------------------------------------------------------------------------
    | SELECTOR DE FOTOS
    |--------------------------------------------------------------------------
    */

    .post-image-picker {
        display: flex;
        align-items: center;
        flex: initial;

        min-width: 0;
        width: auto;
    }

    .post-image-picker-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;

        width: auto;
        min-width: 0;
        min-height: 42px;

        padding: 0.5rem 0.75rem;

        border-radius: 0.7rem;

        font-size: 0.84rem;
        line-height: 1;
        white-space: nowrap;
    }

    .post-image-picker-button svg {
        width: 19px;
        height: 19px;
    }

    .post-image-picker-help {
        display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | BOTÓN PUBLICAR
    |--------------------------------------------------------------------------
    */

    .create-post-submit {
        width: auto;
        min-width: 96px;
        min-height: 42px;

        padding-right: 1rem;
        padding-left: 1rem;

        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 374.98px) {
    .create-post-toolbar {
        gap: 0.45rem;
    }

    .post-image-picker-button {
        padding-right: 0.65rem;
        padding-left: 0.65rem;

        font-size: 0.8rem;
    }

    .post-image-picker-button svg {
        width: 18px;
        height: 18px;
    }

    .create-post-submit {
        min-width: 88px;

        padding-right: 0.8rem;
        padding-left: 0.8rem;

        font-size: 0.85rem;
    }
}

/* =========================================================
   CAJA DE PUBLICACIÓN — AJUSTE MÓVIL FINAL
   ========================================================= */

@media (max-width: 767.98px) {
    .create-post-textarea-wrapper {
        position: relative;
    }

    .create-post-textarea {
        min-height: 104px;
        padding:
            0.8rem 0.8rem 2.15rem;

        font-size: 16px;
    }

    .post-create-character-counter {
        position: absolute;
        right: 0.75rem;
        bottom: 0.6rem;
        z-index: 2;

        margin: 0;

        color: #8a828f;
        font-size: 0.72rem;
        line-height: 1;

        pointer-events: none;
    }

    .post-create-character-counter.is-near-limit {
        color: #b26a00;
        font-weight: 600;
    }

    .post-create-character-counter.is-over-limit {
        color: #b02a37;
        font-weight: 700;
    }

    .create-post-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.65rem;

        margin-top: 0.75rem;
    }

    .post-image-picker {
        display: flex;
        align-items: center;

        min-width: 0;
        width: auto;
        flex: initial;
    }

    .post-image-picker-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;

        width: auto;
        min-width: 0;
        min-height: 42px;

        padding: 0.5rem 0.75rem;

        border-radius: 0.7rem;

        font-size: 0.84rem;
        line-height: 1;
        white-space: nowrap;
    }

    .post-image-picker-button svg {
        width: 19px;
        height: 19px;
    }

    .post-image-picker-help {
        display: none;
    }

    .create-post-submit {
        width: auto;
        min-width: 96px;
        min-height: 42px;

        padding-right: 1rem;
        padding-left: 1rem;

        font-size: 0.9rem;
        white-space: nowrap;
    }
}

@media (max-width: 374.98px) {
    .create-post-toolbar {
        gap: 0.45rem;
    }

    .post-image-picker-button {
        padding-right: 0.65rem;
        padding-left: 0.65rem;

        font-size: 0.8rem;
    }

    .post-image-picker-button svg {
        width: 18px;
        height: 18px;
    }

    .create-post-submit {
        min-width: 88px;

        padding-right: 0.8rem;
        padding-left: 0.8rem;

        font-size: 0.85rem;
    }
}

/* =========================================================
   CAJA DE PUBLICACIÓN — ESCRITORIO Y MÓVIL
   ========================================================= */

.create-post-textarea-wrapper {
    position: relative;
}

.create-post-textarea {
    min-height: 118px;
    padding:
        0.9rem 0.9rem 2.25rem;

    resize: vertical;
}

/*
|--------------------------------------------------------------------------
| CONTADOR DENTRO DEL TEXTAREA
|--------------------------------------------------------------------------
*/

.post-create-character-counter {
    position: absolute;
    right: 0.85rem;
    bottom: 0.65rem;
    z-index: 2;

    margin: 0;

    color: #8a828f;
    font-size: 0.75rem;
    line-height: 1;

    pointer-events: none;
}

.post-create-character-counter.is-near-limit {
    color: #b26a00;
    font-weight: 600;
}

.post-create-character-counter.is-over-limit {
    color: #b02a37;
    font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| BARRA DE ACCIONES
|--------------------------------------------------------------------------
*/

.create-post-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;

    margin-top: 0.9rem;
}

/*
|--------------------------------------------------------------------------
| BOTÓN FOTOS
|--------------------------------------------------------------------------
*/

.post-image-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;

    min-width: 0;
    width: auto;
}

.post-image-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    width: auto;
    min-width: 0;
    min-height: 42px;

    padding: 0.55rem 0.85rem;

    color: var(--socialhot-primary);
    background-color: rgba(111, 66, 193, 0.09);

    border: 0;
    border-radius: 0.75rem;

    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.post-image-picker-button:hover,
.post-image-picker-button:focus {
    color: var(--socialhot-primary);
    background-color: rgba(111, 66, 193, 0.15);
}

.post-image-picker-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.post-image-picker-help {
    color: #8a828f;
    font-size: 0.75rem;
}

/*
|--------------------------------------------------------------------------
| BOTÓN PUBLICAR
|--------------------------------------------------------------------------
*/

.create-post-submit {
    width: auto;
    min-width: 108px;
    min-height: 42px;

    padding-right: 1.1rem;
    padding-left: 1.1rem;

    border-radius: 999px;

    font-size: 0.95rem;
    white-space: nowrap;
}

/* =========================================================
   AJUSTES MÓVILES
   ========================================================= */

@media (max-width: 767.98px) {
    .create-post-textarea {
        min-height: 104px;
        padding:
            0.8rem 0.8rem 2.15rem;

        font-size: 16px;
    }

    .post-create-character-counter {
        right: 0.75rem;
        bottom: 0.6rem;

        font-size: 0.72rem;
    }

    .create-post-toolbar {
        gap: 0.65rem;
        margin-top: 0.75rem;
    }

    .post-image-picker {
        flex: initial;
    }

    .post-image-picker-button {
        min-height: 42px;
        padding: 0.5rem 0.75rem;

        font-size: 0.84rem;
    }

    .post-image-picker-button svg {
        width: 19px;
        height: 19px;
    }

    .post-image-picker-help {
        display: none;
    }

    .create-post-submit {
        min-width: 96px;
        min-height: 42px;

        padding-right: 1rem;
        padding-left: 1rem;

        font-size: 0.9rem;
    }
}

/* =========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 374.98px) {
    .create-post-toolbar {
        gap: 0.45rem;
    }

    .post-image-picker-button {
        padding-right: 0.65rem;
        padding-left: 0.65rem;

        font-size: 0.8rem;
    }

    .post-image-picker-button svg {
        width: 18px;
        height: 18px;
    }

    .create-post-submit {
        min-width: 88px;

        padding-right: 0.8rem;
        padding-left: 0.8rem;

        font-size: 0.85rem;
    }
}

/* =========================================================
   BOTONES DE PUBLICACIÓN — MÓVIL A TODO EL ANCHO
   ========================================================= */

@media (max-width: 767.98px) {
    .create-post-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;

        width: 100%;
        margin-top: 0.75rem;
    }

    .post-image-picker {
        display: block;

        width: 100%;
        min-width: 0;
    }

    .post-image-picker-button,
    .create-post-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;

        width: 100%;
        min-width: 0;
        min-height: 48px;

        margin: 0;
        padding: 0.65rem 0.75rem;

        border-radius: 0.85rem;

        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1;

        white-space: nowrap;
    }

    .post-image-picker-button {
        color: var(--socialhot-primary);
        background-color: rgba(111, 66, 193, 0.1);
        border: 1px solid rgba(111, 66, 193, 0.14);
    }

    .post-image-picker-button:hover,
    .post-image-picker-button:focus {
        color: var(--socialhot-primary);
        background-color: rgba(111, 66, 193, 0.16);
        border-color: rgba(111, 66, 193, 0.24);
    }

    .create-post-submit {
        color: #ffffff;
        background-color: var(--socialhot-primary);
        border: 1px solid var(--socialhot-primary);
    }

    .post-image-picker-button svg,
    .create-post-submit svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .post-image-picker-help {
        display: none;
    }
}

/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 374.98px) {
    .create-post-toolbar {
        gap: 0.45rem;
    }

    .post-image-picker-button,
    .create-post-submit {
        min-height: 46px;
        padding-right: 0.55rem;
        padding-left: 0.55rem;

        font-size: 0.84rem;
    }

    .post-image-picker-button svg,
    .create-post-submit svg {
        width: 18px;
        height: 18px;
    }
}

/* =========================================================
   PUBLIPOST EN EL FEED
   ========================================================= */

.publipost-card {
    overflow: hidden;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background: #ffffff;
    border: 1px solid rgba(111, 66, 193, 0.12) !important;
}

.publipost-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem;
}

.publipost-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: #ffffff;
    background: var(--socialhot-primary, #6f42c1);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.publipost-header-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.publipost-brand-name {
    overflow: hidden;
    color: #241b2f;
    font-size: 0.95rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publipost-sponsored-label {
    margin-top: 0.12rem;
    color: #83798c;
    font-size: 0.74rem;
    line-height: 1.2;
}

.publipost-ad-badge {
    margin-left: auto;
    padding: 0.32rem 0.58rem;
    color: #6f42c1;
    background: rgba(111, 66, 193, 0.08);
    border: 1px solid rgba(111, 66, 193, 0.13);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.publipost-content {
    padding: 0 1rem 1rem;
}

.publipost-title {
    margin: 0 0 0.45rem;
    color: #241b2f;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
}

.publipost-description {
    color: #514758;
    font-size: 0.93rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.publipost-image-link,
.publipost-image-wrapper {
    display: block;
    width: 100%;
    background: #f4f1f7;
}

.publipost-image-link {
    text-decoration: none;
}

.publipost-image {
    display: block;
    width: 100%;
    max-height: 540px;
    object-fit: cover;
}

.publipost-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #faf9fb;
    border-top: 1px solid rgba(37, 24, 48, 0.07);
}

.publipost-footer-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.publipost-footer-text>span {
    color: #423849;
    font-size: 0.82rem;
    font-weight: 600;
}

.publipost-footer-text>small {
    overflow: hidden;
    margin-top: 0.12rem;
    color: #8a818f;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publipost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;
    min-height: 42px;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

.publipost-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .publipost-card {
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .publipost-header {
        gap: 0.65rem;
        padding: 0.85rem 0.85rem 0.75rem;
    }

    .publipost-brand-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        font-size: 0.68rem;
    }

    .publipost-ad-badge {
        padding: 0.28rem 0.48rem;
        font-size: 0.62rem;
    }

    .publipost-content {
        padding: 0 0.85rem 0.85rem;
    }

    .publipost-title {
        font-size: 1rem;
    }

    .publipost-description {
        font-size: 0.9rem;
    }

    .publipost-image {
        max-height: 430px;
    }

    .publipost-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.7rem;
        padding: 0.8rem 0.85rem;
    }

    .publipost-button {
        min-height: 40px;
        padding-right: 0.85rem;
        padding-left: 0.85rem;
        font-size: 0.85rem;
    }

    .publipost-button svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 374.98px) {
    .publipost-footer {
        grid-template-columns: 1fr;
    }

    .publipost-button {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   PUBLIPOST — FEED
   ========================================================= */

.publipost-card {
    overflow: hidden;
    margin-top: 1rem;
    margin-bottom: 1rem;

    background-color: #ffffff;

    border: 1px solid rgba(111, 66, 193, 0.14) !important;
    border-radius: 1rem;

    box-shadow:
        0 0.25rem 1rem rgba(37, 24, 48, 0.07) !important;
}

.publipost-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 1rem 1rem 0.85rem;
}

.publipost-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    color: #ffffff;
    background:
        linear-gradient(135deg,
            #6f42c1,
            #8b5cf6);

    border-radius: 50%;

    box-shadow:
        0 0.25rem 0.7rem rgba(111, 66, 193, 0.24);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.publipost-header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.publipost-brand-name {
    overflow: hidden;

    color: #2c2235;

    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.2;

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

.publipost-sponsored-label {
    margin-top: 0.15rem;

    color: #847a8c;

    font-size: 0.73rem;
    line-height: 1.2;
}

.publipost-ad-badge {
    flex-shrink: 0;

    margin-left: auto;
    padding: 0.34rem 0.62rem;

    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.08);

    border: 1px solid rgba(111, 66, 193, 0.14);
    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.publipost-content {
    padding: 0 1rem 1rem;
}

.publipost-title {
    margin: 0 0 0.5rem;

    color: #2b2134;

    font-size: 1.12rem;
    font-weight: 750;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.publipost-description {
    color: #544a5c;

    font-size: 0.94rem;
    line-height: 1.58;

    overflow-wrap: anywhere;
}

.publipost-image-link,
.publipost-image-wrapper {
    display: block;

    width: 100%;
    overflow: hidden;

    background-color: #f4f1f7;
}

.publipost-image-link {
    color: inherit;
    text-decoration: none;
}

.publipost-image-link:hover {
    color: inherit;
    text-decoration: none;
}

.publipost-image {
    display: block;

    width: 100%;
    height: auto;
    max-height: 560px;

    object-fit: cover;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.publipost-image-link:hover .publipost-image {
    transform: scale(1.012);
    filter: brightness(0.98);
}

.publipost-footer {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 0.9rem 1rem;

    background-color: #faf9fb;

    border-top: 1px solid rgba(37, 24, 48, 0.07);
}

.publipost-footer-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.publipost-footer-text>span {
    color: #44394c;

    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.25;
}

.publipost-footer-text>small {
    overflow: hidden;

    margin-top: 0.15rem;

    color: #8a818f;

    font-size: 0.71rem;
    line-height: 1.25;

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

.publipost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;

    min-width: 112px;
    min-height: 42px;

    margin-left: auto;
    padding: 0.55rem 1rem;

    border-radius: 999px;

    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;
}

.publipost-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =========================================================
   PUBLIPOST — FEED MÓVIL
   ========================================================= */

@media (max-width: 767.98px) {
    .publipost-card {
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;

        border-radius: 0.9rem;
    }

    .publipost-header {
        gap: 0.65rem;

        padding: 0.85rem 0.85rem 0.75rem;
    }

    .publipost-brand-icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;

        font-size: 0.65rem;
    }

    .publipost-brand-name {
        font-size: 0.9rem;
    }

    .publipost-sponsored-label {
        font-size: 0.69rem;
    }

    .publipost-ad-badge {
        padding: 0.29rem 0.5rem;

        font-size: 0.61rem;
    }

    .publipost-content {
        padding: 0 0.85rem 0.85rem;
    }

    .publipost-title {
        margin-bottom: 0.4rem;

        font-size: 1rem;
    }

    .publipost-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .publipost-image {
        max-height: 440px;
    }

    .publipost-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.7rem;

        padding: 0.8rem 0.85rem;
    }

    .publipost-footer-text>span {
        font-size: 0.78rem;
    }

    .publipost-footer-text>small {
        font-size: 0.67rem;
    }

    .publipost-button {
        min-width: 100px;
        min-height: 40px;

        padding-right: 0.85rem;
        padding-left: 0.85rem;

        font-size: 0.83rem;
    }

    .publipost-button svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 374.98px) {
    .publipost-ad-badge {
        display: none;
    }

    .publipost-footer {
        grid-template-columns: 1fr;
    }

    .publipost-button {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   PUBLIPOST — FEED
   ========================================================= */

.publipost-card {
    overflow: hidden;
    margin-top: 1rem;
    margin-bottom: 1rem;

    background-color: #ffffff;

    border: 1px solid rgba(111, 66, 193, 0.14) !important;
    border-radius: 1rem;

    box-shadow:
        0 0.25rem 1rem rgba(37, 24, 48, 0.07) !important;
}

.publipost-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 1rem 1rem 0.85rem;
}

.publipost-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    color: #ffffff;
    background:
        linear-gradient(135deg,
            #6f42c1,
            #8b5cf6);

    border-radius: 50%;

    box-shadow:
        0 0.25rem 0.7rem rgba(111, 66, 193, 0.24);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.publipost-header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.publipost-brand-name {
    overflow: hidden;

    color: #2c2235;

    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.2;

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

.publipost-sponsored-label {
    margin-top: 0.15rem;

    color: #847a8c;

    font-size: 0.73rem;
    line-height: 1.2;
}

.publipost-ad-badge {
    flex-shrink: 0;

    margin-left: auto;
    padding: 0.34rem 0.62rem;

    color: #6f42c1;
    background-color: rgba(111, 66, 193, 0.08);

    border: 1px solid rgba(111, 66, 193, 0.14);
    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.publipost-content {
    padding: 0 1rem 1rem;
}

.publipost-title {
    margin: 0 0 0.5rem;

    color: #2b2134;

    font-size: 1.12rem;
    font-weight: 750;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.publipost-description {
    color: #544a5c;

    font-size: 0.94rem;
    line-height: 1.58;

    overflow-wrap: anywhere;
}

.publipost-image-link,
.publipost-image-wrapper {
    display: block;

    width: 100%;
    overflow: hidden;

    background-color: #f4f1f7;
}

.publipost-image-link {
    color: inherit;
    text-decoration: none;
}

.publipost-image-link:hover {
    color: inherit;
    text-decoration: none;
}

.publipost-image {
    display: block;

    width: 100%;
    height: auto;
    max-height: 560px;

    object-fit: cover;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.publipost-image-link:hover .publipost-image {
    transform: scale(1.012);
    filter: brightness(0.98);
}

.publipost-footer {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 0.9rem 1rem;

    background-color: #faf9fb;

    border-top: 1px solid rgba(37, 24, 48, 0.07);
}

.publipost-footer-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.publipost-footer-text>span {
    color: #44394c;

    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.25;
}

.publipost-footer-text>small {
    overflow: hidden;

    margin-top: 0.15rem;

    color: #8a818f;

    font-size: 0.71rem;
    line-height: 1.25;

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

.publipost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;

    min-width: 112px;
    min-height: 42px;

    margin-left: auto;
    padding: 0.55rem 1rem;

    border-radius: 999px;

    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;
}

.publipost-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* =========================================================
   PUBLIPOST — FEED MÓVIL
   ========================================================= */

@media (max-width: 767.98px) {
    .publipost-card {
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;

        border-radius: 0.9rem;
    }

    .publipost-header {
        gap: 0.65rem;

        padding: 0.85rem 0.85rem 0.75rem;
    }

    .publipost-brand-icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;

        font-size: 0.65rem;
    }

    .publipost-brand-name {
        font-size: 0.9rem;
    }

    .publipost-sponsored-label {
        font-size: 0.69rem;
    }

    .publipost-ad-badge {
        padding: 0.29rem 0.5rem;

        font-size: 0.61rem;
    }

    .publipost-content {
        padding: 0 0.85rem 0.85rem;
    }

    .publipost-title {
        margin-bottom: 0.4rem;

        font-size: 1rem;
    }

    .publipost-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .publipost-image {
        max-height: 440px;
    }

    .publipost-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.7rem;

        padding: 0.8rem 0.85rem;
    }

    .publipost-footer-text>span {
        font-size: 0.78rem;
    }

    .publipost-footer-text>small {
        font-size: 0.67rem;
    }

    .publipost-button {
        min-width: 100px;
        min-height: 40px;

        padding-right: 0.85rem;
        padding-left: 0.85rem;

        font-size: 0.83rem;
    }

    .publipost-button svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 374.98px) {
    .publipost-ad-badge {
        display: none;
    }

    .publipost-footer {
        grid-template-columns: 1fr;
    }

    .publipost-button {
        width: 100%;
        margin-left: 0;
    }
}

/* =========================================================
   PUBLIPOST CREATE / EDIT — COMPLEMENTOS
   ========================================================= */

.admin-publipost-form-panel {
    overflow: hidden;
    padding: 0;
}

.admin-publipost-form-section {
    padding: 1.35rem;
}

.admin-publipost-form-section+.admin-publipost-form-section {
    border-top: 1px solid rgba(37, 24, 48, 0.08);
}

.admin-publipost-form-section h2 {
    margin: 0 0 1rem;
    color: #302637;
    font-size: 1rem;
    font-weight: 700;
}

.admin-publipost-form-section .form-label {
    color: #413747;
    font-size: 0.82rem;
    font-weight: 650;
}

.admin-publipost-form-section .form-control,
.admin-publipost-form-section .form-select {
    min-height: 44px;
    border-color: rgba(37, 24, 48, 0.16);
    border-radius: 0.7rem;
}

.admin-publipost-form-section textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.admin-publipost-form-section .form-control:focus,
.admin-publipost-form-section .form-select:focus {
    border-color: rgba(111, 66, 193, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.12);
}

.admin-publipost-form-section .form-text {
    color: #8a818f;
    font-size: 0.72rem;
}

.admin-publipost-image-preview {
    overflow: hidden;
    width: 100%;
    max-width: 540px;
    margin-top: 1rem;
    background: #f4f1f7;
    border: 1px solid rgba(37, 24, 48, 0.1);
    border-radius: 0.85rem;
}

.admin-publipost-image-preview img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}

.admin-publipost-priority-input {
    max-width: 220px;
}

.admin-publipost-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 1rem 1.35rem;
    background: #faf9fb;
    border-top: 1px solid rgba(37, 24, 48, 0.08);
}

.admin-publipost-form-actions .btn {
    min-width: 130px;
}

.admin-publipost-preview-panel {
    overflow: hidden;
    position: sticky;
    top: 1rem;
    padding: 0;
}

.admin-publipost-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    background: #faf9fb;
    border-bottom: 1px solid rgba(37, 24, 48, 0.08);
}

.admin-publipost-preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.33rem 0.6rem;
    color: #6f42c1;
    background: rgba(111, 66, 193, 0.08);
    border: 1px solid rgba(111, 66, 193, 0.14);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.admin-publipost-preview-label {
    color: #8a818f;
    font-size: 0.72rem;
}

.admin-publipost-preview-body {
    padding: 1.1rem;
}

.admin-publipost-preview-body h2 {
    margin: 0 0 0.5rem;
    color: #302637;
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-publipost-preview-body p {
    margin: 0 0 1rem;
    color: #615766;
    font-size: 0.84rem;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.admin-publipost-preview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 650;
}

.admin-publipost-preview-note {
    margin: 0;
    padding: 0.9rem 1rem;
    color: #8a818f;
    background: #faf9fb;
    border-top: 1px solid rgba(37, 24, 48, 0.07);
    font-size: 0.7rem;
    line-height: 1.45;
}

@media (max-width: 1199.98px) {
    .admin-publipost-preview-panel {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .admin-publipost-form-section {
        padding: 1rem;
    }

    .admin-publipost-form-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 1rem;
    }

    .admin-publipost-form-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .admin-publipost-priority-input {
        max-width: 100%;
    }
}

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

/* =========================================================
   PUBLIPOST EDIT — IMAGEN Y ESTADÍSTICAS
   ========================================================= */

.admin-publipost-current-image {
    margin-bottom: 1rem;
}

.admin-publipost-image-label {
    display: block;
    margin-bottom: 0.55rem;
    color: #413747;
    font-size: 0.82rem;
    font-weight: 650;
}

.admin-publipost-image-current {
    overflow: hidden;
    width: 100%;
    max-width: 540px;
    background-color: #f4f1f7;
    border: 1px solid rgba(37, 24, 48, 0.1);
    border-radius: 0.85rem;
}

.admin-publipost-image-current img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}

.admin-publipost-image-preview {
    overflow: hidden;
    width: 100%;
    max-width: 540px;
    margin-top: 1rem;
    background-color: #f4f1f7;
    border: 1px solid rgba(37, 24, 48, 0.1);
    border-radius: 0.85rem;
}

.admin-publipost-image-preview .admin-publipost-image-label {
    margin: 0;
    padding: 0.7rem 0.85rem;
    background-color: #faf9fb;
    border-bottom: 1px solid rgba(37, 24, 48, 0.08);
}

.admin-publipost-image-preview img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}

.admin-publipost-preview-image {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f4f1f7;
    border-bottom: 1px solid rgba(37, 24, 48, 0.08);
}

.admin-publipost-preview-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-publipost-edit-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.admin-publipost-edit-stats article {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 1rem;
    background-color: #faf9fb;
    border: 1px solid rgba(37, 24, 48, 0.08);
    border-radius: 0.8rem;
}

.admin-publipost-edit-stats span {
    color: #827888;
    font-size: 0.72rem;
    font-weight: 600;
}

.admin-publipost-edit-stats strong {
    color: #302637;
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .admin-publipost-edit-stats {
        grid-template-columns: 1fr;
    }

    .admin-publipost-image-current,
    .admin-publipost-image-preview {
        max-width: 100%;
    }
}

/* =========================================================
   MENSAJERÍA PRIVADA
   ========================================================= */

.private-messages-page {
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    margin: 0 auto;
}

.private-messages-shell {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);

    width: 100%;
    min-width: 0;

    /*
     * Nunca forzamos 650px.
     * El chat se adapta al alto realmente disponible.
     */
    height: min(720px, calc(100dvh - 170px));
    min-height: 0;
    max-height: 720px;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e8e8ee;
    border-radius: 18px;

    box-shadow: 0 8px 30px rgba(18, 18, 34, 0.06);
}


/* =========================================================
   LISTADO DE CONVERSACIONES
   ========================================================= */

.private-conversations {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #ffffff;
    border-right: 1px solid #ededf3;
}

.private-conversations-header {
    flex: 0 0 auto;

    padding: 22px;

    background: #ffffff;
    border-bottom: 1px solid #ededf3;
}

.private-conversations-header h1 {
    margin: 0;

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

.private-conversation-list {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.private-conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-width: 0;

    padding: 14px 16px;

    color: #222;
    text-decoration: none;

    border-bottom: 1px solid #f2f2f6;

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

.private-conversation-item:hover,
.private-conversation-item.active {
    color: #222;
    background: #f7f4ff;
}


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

.private-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    overflow: hidden;

    color: #6f42c1;
    background: #efe9ff;

    border-radius: 50%;

    font-weight: 700;
}

.private-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   DATOS DE CONVERSACIÓN
   ========================================================= */

.private-conversation-main {
    flex: 1 1 auto;

    min-width: 0;
}

.private-conversation-top {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.private-conversation-name {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    font-weight: 650;

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

.private-conversation-time {
    flex: 0 0 auto;

    color: #8b8b98;

    font-size: 0.72rem;

    white-space: nowrap;
}

.private-conversation-preview {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
    margin-top: 3px;
}

.private-conversation-text {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    color: #777783;

    font-size: 0.86rem;

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

.private-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-width: 21px;
    height: 21px;

    padding: 0 6px;

    color: #ffffff;
    background: #6f42c1;

    border-radius: 999px;

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


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

.private-chat {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #fafafd;
}

.private-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;
    min-height: 72px;

    padding: 12px 18px;

    background: #ffffff;
    border-bottom: 1px solid #ededf3;
}

.private-chat-header-title {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    color: #222;

    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.private-chat-header-title:hover {
    color: #6f42c1;
}

.private-back {
    display: none;

    padding: 6px;

    color: #333;
    background: transparent;

    border: 0;
}


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

.private-message-stream {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;

    width: 100%;
    min-width: 0;
    min-height: 0;

    /*
     * Importante: no usar height fijo aquí.
     * Flex calcula automáticamente el espacio entre header y formulario.
     */
    height: auto;

    padding: 18px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
}

.private-message-row {
    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
}

.private-message-row.mine {
    justify-content: flex-end;
}

.private-message-bubble {
    display: inline-block;

    max-width: min(76%, 620px);
    min-width: 0;

    padding: 6px 10px 5px;

    background: #ffffff;
    border: 1px solid #e7e7ed;
    border-radius: 14px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);

    font-size: 0.93rem;
    line-height: 1.25;

    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.private-message-bubble>div:first-child {
    min-width: 0;

    margin: 0;
    padding: 0;

    line-height: inherit;

    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.private-message-row.mine .private-message-bubble {
    color: #ffffff;
    background: #6f42c1;
    border-color: #6f42c1;
}

.private-message-meta {
    margin-top: 2px;

    color: #999;

    font-size: 0.6rem;
    line-height: 1;
}

.private-message-row.mine .private-message-meta {
    color: rgba(255, 255, 255, 0.75);

    text-align: right;
}


/* =========================================================
   FORMULARIO DE MENSAJE
   ========================================================= */

.private-message-form-wrap {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    padding: 10px 14px;

    background: #ffffff;
    border-top: 1px solid #ededf3;
}

.private-message-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;

    width: 100%;
    min-width: 0;
}

.private-message-input {
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 44px;
    max-height: 120px;

    padding: 10px 14px;

    resize: none;

    background: #f6f6f9;
    border-color: #e4e4ea;
    border-radius: 22px;

    line-height: 1.35;

    overflow-y: auto;
}

.private-message-input:focus {
    background: #ffffff;
}

.private-message-send {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    padding: 0;

    border-radius: 50%;
}

.private-message-send svg {
    width: 19px;
    height: 19px;
}

.private-form-status {
    min-height: 0;

    margin: 5px 4px 0;

    font-size: 0.78rem;
}

.private-form-status:empty {
    display: none;
}


/* =========================================================
   ESTADOS VACÍOS
   ========================================================= */

.private-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    padding: 30px;

    color: #777;

    text-align: center;
}

.private-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    margin: 0 auto 15px;

    color: #6f42c1;
    background: #f0ebff;

    border-radius: 50%;
}

.private-empty-icon svg {
    width: 30px;
}

.private-no-conversations {
    padding: 28px 20px;

    color: #777;

    text-align: center;
}

.private-message-page-alert {
    margin-bottom: 15px;
}


/* =========================================================
   TABLET / NOTEBOOK DE BAJO ALTO
   ========================================================= */

@media (min-width: 768px) and (max-height: 760px) {
    .private-messages-page {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .private-messages-shell {
        height: calc(100dvh - 115px);
        max-height: none;
    }
}


/* =========================================================
   MENSAJERÍA MÓVIL
   ========================================================= */

@media (max-width: 767.98px) {

    /*
     * En esta vista la página no debe tener scroll propio.
     * Solo el listado o el stream pueden desplazarse.
     */
    html:has(body.messages-page) {
        height: 100%;
        overflow: hidden;

        overscroll-behavior: none;
    }

    body.messages-page {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;

        padding-bottom: 0 !important;

        overflow: hidden !important;

        overscroll-behavior: none;
    }

    body.messages-page .socialhot-navbar {
        position: relative;

        flex: 0 0 auto;
    }

    body.messages-page .socialhot-main {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;

        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 0;

        margin: 0;
        padding: 0 !important;

        overflow: hidden !important;
    }

    /*
     * El menú inferior compite con el campo para escribir.
     * Dentro del chat usamos todo el alto visible.
     */
    body.messages-page .mobile-bottom-navigation,
    body.messages-page .site-footer {
        display: none !important;
    }

    .private-messages-page {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;

        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 0;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden;
    }

    .private-message-page-alert {
        flex: 0 0 auto;

        margin: 8px 10px;
    }

    .private-messages-shell {
        display: block;
        flex: 1 1 0;

        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 0;
        max-height: none;

        overflow: hidden;

        background: #ffffff;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .private-conversations,
    .private-chat {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;

        overflow: hidden;

        border: 0;
    }


    /* LISTADO */

    .private-conversations {
        display: flex;
        flex-direction: column;
    }

    .private-conversations-header {
        position: relative;
        z-index: 3;

        flex: 0 0 auto;

        padding: 14px 16px;

        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    }

    .private-conversations-header h1 {
        font-size: 1.25rem;
        line-height: 1.2;
    }

    .private-conversation-list {
        flex: 1 1 0;

        min-height: 0;
        max-height: none;

        padding-bottom: max(10px, env(safe-area-inset-bottom));

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .private-conversation-item {
        gap: 11px;

        min-height: 68px;

        padding: 11px 14px;
    }

    .private-conversation-item:active {
        background: #f2edff;
    }

    .private-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .private-conversation-name {
        font-size: 0.94rem;
    }

    .private-conversation-time {
        font-size: 0.68rem;
    }

    .private-conversation-text {
        font-size: 0.82rem;
    }


    /* CHAT */

    .private-chat {
        display: flex;
        flex-direction: column;

        background: #f7f7fb;
    }

    .private-chat-header {
        position: relative;
        z-index: 5;

        flex: 0 0 auto;

        min-height: 58px;

        padding:
            7px 10px 7px;

        gap: 8px;

        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
    }

    .private-chat-header .private-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .private-chat-header-title {
        font-size: 0.96rem;
    }

    .private-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        margin-left: -3px;
        padding: 0;

        border-radius: 50%;
    }

    .private-back:active {
        background: #f1eef8;
    }


    /* MENSAJES */

    .private-message-stream {
        flex: 1 1 0;

        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;

        gap: 5px;

        padding: 9px 9px 8px;

        overflow-x: hidden;
        overflow-y: auto;

        scroll-padding-bottom: 8px;

        /*
         * Evita que el gesto de scroll "escape" hacia body.
         */
        overscroll-behavior-y: contain;

        -webkit-overflow-scrolling: touch;
    }

    .private-message-bubble {
        max-width: 86%;

        padding: 5px 8px 4px;

        border-radius: 13px;

        font-size: 0.91rem;
        line-height: 1.2;

        box-shadow: none;
    }

    .private-message-row:not(.mine) .private-message-bubble {
        border-bottom-left-radius: 4px;
    }

    .private-message-row.mine .private-message-bubble {
        border-bottom-right-radius: 4px;
    }

    .private-message-meta {
        margin-top: 2px;

        font-size: 0.56rem;
    }


    /* FORMULARIO */

    .private-message-form-wrap {
        position: relative;
        z-index: 6;

        flex: 0 0 auto;

        width: 100%;
        min-width: 0;

        padding:
            7px 9px max(7px, env(safe-area-inset-bottom));

        background: rgba(255, 255, 255, 0.99);

        border-top: 1px solid #e6e6ec;
    }

    .private-message-form {
        width: 100%;
        min-width: 0;

        gap: 7px;
    }

    .private-message-input {
        flex: 1 1 auto;

        width: 100%;
        min-width: 0;
        min-height: 42px;
        max-height: 96px;

        padding: 9px 12px;

        border-radius: 21px;

        /*
         * 16px evita zoom automático de Safari/iOS.
         */
        font-size: 16px;
        line-height: 1.35;
    }

    .private-message-send {
        flex: 0 0 42px;

        width: 42px;
        height: 42px;
    }

    .private-message-send svg {
        width: 18px;
        height: 18px;
    }

    .private-form-status {
        margin: 4px 3px 0;

        font-size: 0.74rem;
    }

    .private-empty {
        min-height: 0;

        padding: 24px;
    }


    /* CAMBIO LISTA / CHAT */

    .private-messages-shell.has-active-chat .private-conversations {
        display: none;
    }

    .private-messages-shell:not(.has-active-chat) .private-chat {
        display: none;
    }
}


/* =========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 390px) {
    .private-conversation-item {
        padding-right: 12px;
        padding-left: 12px;
    }

    .private-message-stream {
        padding-right: 8px;
        padding-left: 8px;
    }

    .private-message-bubble {
        max-width: 90%;
    }
}

/* =========================================================
   SEGUIMIENTO Y BLOQUEO DE USUARIOS
   ========================================================= */

.estado-card .estado-actions {
    margin-top: 0;
}

.public-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.public-profile-action-form {
    margin: 0;
}

.profile-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .public-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .public-profile-action-form,
    .public-profile-actions .btn {
        width: 100%;
    }

    .profile-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 374.98px) {
    .profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================
   PERFIL PÚBLICO - ACCIONES SEGUIR / MENSAJE / BLOQUEAR
   ===================================================== */

.public-profile-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.public-profile-actions form {
    margin: 0;
}

.public-profile-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    white-space: nowrap;
}

.public-profile-actions .btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/*
|--------------------------------------------------------------------------
| DESKTOP / TABLET
|--------------------------------------------------------------------------
|
| El encabezado del perfil usa margin-top negativo para que avatar y nombre
| se superpongan parcialmente sobre la portada. Las acciones no deben subir
| junto con ellos, por eso en perfil público pasan a una segunda fila.
|
*/

@media (min-width: 768px) {

    .public-profile-card .profile-main-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        column-gap: 22px;
        row-gap: 0;
    }

    .public-profile-card .profile-avatar-container {
        grid-column: 1;
        grid-row: 1;
    }

    .public-profile-card .profile-heading {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .public-profile-card .profile-actions {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;
        margin-top: 1rem;
        padding-top: 1rem;
        padding-bottom: 0;

        border-top: 1px solid #ece6ef;
    }

    .public-profile-card .public-profile-actions {
        justify-content: flex-end;
        gap: 0.85rem;
    }

    .public-profile-card .public-profile-actions .btn {
        min-width: 145px;
    }
}

/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .public-profile-card .profile-actions {
        width: 100%;
        margin-top: 0.35rem;
        padding-bottom: 0;
    }

    .public-profile-card .public-profile-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .public-profile-card .public-profile-actions form {
        width: 100%;
    }

    .public-profile-card .public-profile-actions .btn {
        width: 100%;
    }
}

/* =====================================================
   USUARIOS BLOQUEADOS
   ===================================================== */

.blocked-users-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 1rem;
}

.blocked-users-card {
    overflow: hidden;

    border: 1px solid #ece7f0 !important;
    border-radius: 18px;

    background-color: #ffffff;

    box-shadow:
        0 10px 32px rgba(33, 24, 44, 0.07) !important;
}

.blocked-users-body {
    padding: 0;
}

.blocked-users-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;

    padding: 1.5rem 1.6rem;

    border-bottom: 1px solid #eee9f1;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #fcfafd 100%);
}

.blocked-users-header h1 {
    margin: 0 0 0.4rem;

    color: var(--socialhot-text);

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

.blocked-users-header p {
    max-width: 650px;

    margin: 0;

    color: var(--socialhot-muted);

    font-size: 0.9rem;
    line-height: 1.55;
}

.blocked-users-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    min-width: 42px;
    height: 42px;
    padding: 0 0.7rem;

    border: 1px solid rgba(111, 66, 193, 0.16);
    border-radius: 999px;

    color: var(--socialhot-primary-dark);
    background-color: var(--socialhot-primary-light);

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

.blocked-users-list {
    display: flex;
    flex-direction: column;
}

.blocked-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1rem 1.6rem;

    border-bottom: 1px solid #f0edf2;

    background-color: #ffffff;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.blocked-user-item:last-child {
    border-bottom: 0;
}

.blocked-user-item:hover {
    background-color: #fcfafd;
}

.blocked-user-identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;

    min-width: 0;
}

.blocked-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    overflow: hidden;

    border: 2px solid rgba(111, 66, 193, 0.18);
    border-radius: 50%;

    background-color: #ffffff;

    object-fit: cover;
}

.blocked-user-avatar-initial {
    color: #ffffff;
    background:
        linear-gradient(135deg,
            var(--socialhot-primary),
            var(--socialhot-primary-dark));

    font-size: 1.15rem;
    font-weight: 750;
    text-transform: uppercase;
}

.blocked-user-data {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    min-width: 0;
}

.blocked-user-data strong {
    overflow: hidden;

    color: var(--socialhot-text);

    font-size: 0.98rem;
    font-weight: 700;

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

.blocked-user-data span {
    color: var(--socialhot-muted);

    font-size: 0.78rem;
}

.blocked-user-unblock-form {
    flex: 0 0 auto;

    margin: 0;
}

.blocked-user-unblock-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 120px;
    min-height: 40px;
    padding: 0.55rem 1rem;

    border-radius: 10px;

    font-size: 0.86rem;
    font-weight: 650;

    white-space: nowrap;
}

.blocked-user-unblock-button:hover,
.blocked-user-unblock-button:focus {
    color: #ffffff;
}

.blocked-users-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 330px;
    padding: 2.5rem 1.5rem;

    text-align: center;
}

.blocked-users-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;
    margin-bottom: 1rem;

    border: 1px solid rgba(111, 66, 193, 0.12);
    border-radius: 50%;

    color: var(--socialhot-primary);
    background-color: var(--socialhot-primary-light);
}

.blocked-users-empty-icon svg {
    width: 32px;
    height: 32px;
}

.blocked-users-empty h2 {
    margin: 0 0 0.5rem;

    color: var(--socialhot-text);

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

.blocked-users-empty p {
    max-width: 480px;

    margin: 0;

    color: var(--socialhot-muted);

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


/* =====================================================
   USUARIOS BLOQUEADOS - RESPONSIVE
   ===================================================== */

@media (max-width: 767.98px) {

    .blocked-users-card {
        border-radius: 15px;
    }

    .blocked-users-header {
        padding: 1.25rem 1rem;
    }

    .blocked-user-item {
        align-items: flex-start;
        flex-direction: column;

        padding: 1rem;
    }

    .blocked-user-identity {
        width: 100%;
    }

    .blocked-user-unblock-form {
        width: 100%;
    }

    .blocked-user-unblock-button {
        width: 100%;
    }

    .blocked-users-empty {
        min-height: 280px;
        padding: 2rem 1rem;
    }
}

@media (max-width: 575.98px) {

    .blocked-users-header {
        align-items: flex-start;
    }

    .blocked-users-header h1 {
        font-size: 1.18rem;
    }

    .blocked-users-count {
        min-width: 38px;
        height: 38px;
    }

    .blocked-user-avatar {
        flex-basis: 48px;

        width: 48px;
        height: 48px;
    }
}

/* =====================================================
   PERFIL PÚBLICO - SEPARACIÓN ANTES DE INFORMACIÓN
   ===================================================== */

.public-profile-card .profile-main-header {
    margin-bottom: 1.75rem;
}

/* =====================================================
   NOTIFICACIONES
   ===================================================== */

.notifications-dropdown {
    position: relative;
}

.notifications-toggle {
    border: 0;
    background: transparent;
}

.notifications-menu {
    width: min(390px, calc(100vw - 24px));
    margin-top: 0.7rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e9e4ed;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(25, 18, 32, 0.16);
}

.notifications-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid #f0edf2;
}

.notifications-menu-header strong {
    font-size: 1rem;
}

.notifications-menu-header span {
    color: var(--socialhot-primary);
    font-size: 0.76rem;
    font-weight: 700;
}

.notifications-menu-list {
    max-height: min(420px, 60vh);
    overflow-y: auto;
}

.notifications-menu-item,
.notification-page-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: inherit;
    text-decoration: none;
}

.notifications-menu-item {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f4f1f5;
}

.notifications-menu-item:hover,
.notification-page-item:hover {
    color: inherit;
    background: #faf8fc;
}

.notifications-menu-item.is-unread,
.notification-page-item.is-unread {
    background: rgba(111, 66, 193, 0.065);
}

.notifications-menu-avatar,
.notification-page-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 50%;
    color: #ffffff;
    background: var(--socialhot-primary);
    font-weight: 700;
    text-transform: uppercase;
}

.notifications-menu-avatar {
    width: 42px;
    height: 42px;
}

.notification-page-avatar {
    width: 50px;
    height: 50px;
}

.notifications-menu-avatar img,
.notification-page-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notifications-menu-content,
.notification-page-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.notifications-menu-text,
.notification-page-text {
    color: #302c33;
    font-weight: 600;
    line-height: 1.35;
}

.notifications-menu-text {
    font-size: 0.82rem;
}

.notification-page-text {
    font-size: 0.92rem;
}

.notifications-menu-date,
.notification-page-date {
    color: #8a838d;
    font-size: 0.72rem;
}

.notifications-menu-empty {
    padding: 1.4rem 1rem;
    color: #7d7681;
    font-size: 0.85rem;
    text-align: center;
}

.notifications-menu-footer {
    display: block;
    padding: 0.85rem 1rem;
    color: var(--socialhot-primary);
    background: #fcfafd;
    border-top: 1px solid #eee9f1;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.notifications-menu-footer:hover {
    color: var(--socialhot-primary-dark);
    background: #f7f2fb;
}

.notifications-page-topbar {
    margin-bottom: 1rem;
}

.notifications-page-card {
    overflow: hidden;
    border: 1px solid #ece7f0 !important;
    border-radius: 18px;
}

.notifications-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    border-bottom: 1px solid #eee9f1;
}

.notifications-page-header h1 {
    margin: 0 0 0.3rem;
    font-size: 1.35rem;
    font-weight: 750;
}

.notifications-page-header p {
    margin: 0;
    color: var(--socialhot-muted);
    font-size: 0.88rem;
}

.notifications-page-list {
    display: flex;
    flex-direction: column;
}

.notification-page-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1edf3;
}

.notification-page-item:last-child {
    border-bottom: 0;
}

.notification-unread-dot {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--socialhot-primary);
}

.notifications-page-empty {
    display: flex;
    min-height: 320px;
    padding: 2.5rem 1.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.notifications-page-empty-icon {
    display: inline-flex;
    width: 68px;
    height: 68px;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--socialhot-primary);
    background: var(--socialhot-primary-light);
}

.notifications-page-empty-icon svg {
    width: 30px;
    height: 30px;
}

.notifications-page-empty h2 {
    margin: 0 0 0.45rem;
    font-size: 1.08rem;
}

.notifications-page-empty p {
    max-width: 480px;
    margin: 0;
    color: var(--socialhot-muted);
    font-size: 0.87rem;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .notifications-page-header {
        flex-direction: column;
        padding: 1.1rem;
    }

    .notifications-page-header form,
    .notifications-page-header .btn {
        width: 100%;
    }

    .notification-page-item {
        padding: 0.9rem 1rem;
    }
}

/* =====================================================
   NOTIFICACIONES - CORRECCIÓN MÓVIL
   ===================================================== */

@media (max-width: 575.98px) {

    .notifications-dropdown {
        position: static;
    }

    /*
    |--------------------------------------------------------------------------
    | PANEL DENTRO DEL ÁREA DISPONIBLE
    |--------------------------------------------------------------------------
    |
    | El panel queda contenido entre el navbar superior y la navegación
    | inferior móvil. La zona restante conserva el fondo opaco.
    |
    */

    .notifications-menu {
        position: fixed !important;

        top: 79px !important;
        right: 12px !important;
        bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        left: 12px !important;

        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        display: none;
        flex-direction: column;

        overflow: hidden;

        transform: none !important;

        border-radius: 14px;

        z-index: 1060;
    }

    .notifications-menu.show {
        display: flex;
    }

    .notifications-menu-header {
        flex: 0 0 auto;
        padding: 0.85rem;
    }

    .notifications-menu-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;

        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .notifications-menu-footer {
        flex: 0 0 auto;
        padding: 0.8rem 0.85rem;
    }

    .notifications-menu-item {
        align-items: flex-start;
        gap: 0.7rem;

        padding: 0.75rem 0.85rem;
    }

    .notifications-menu-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .notifications-menu-content {
        min-width: 0;
        width: 100%;
    }

    .notifications-menu-text {
        display: block;

        width: 100%;

        overflow-wrap: anywhere;
        word-break: break-word;

        white-space: normal;
    }
}

/* =====================================================
   DROPDOWNS HEADER - ALINEACIÓN Y FONDO MÓVIL
   ===================================================== */

@media (max-width: 575.98px) {

    /*
    |--------------------------------------------------------------------------
    | MISMA ALTURA PARA ALERTAS Y PERFIL
    |--------------------------------------------------------------------------
    */

    .notifications-menu,
    .user-dropdown-menu {
        position: fixed !important;
        top: 79px !important;

        margin-top: 0 !important;

        transform: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | ALERTAS
    |--------------------------------------------------------------------------
    */

    .notifications-menu {
        right: 12px !important;
        left: 12px !important;

        width: auto !important;
        max-width: none !important;

        z-index: 1060;
    }

    /*
    |--------------------------------------------------------------------------
    | PERFIL
    |--------------------------------------------------------------------------
    */

    .user-dropdown-menu {
        right: 12px !important;
        left: auto !important;

        width: min(270px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;

        z-index: 1060;
    }

    /*
    |--------------------------------------------------------------------------
    | FONDO OSCURO AL ABRIR CUALQUIER DROPDOWN
    |--------------------------------------------------------------------------
    */

    body:has(.notifications-menu.show)::before,
    body:has(.user-dropdown-menu.show)::before {
        position: fixed;
        inset: 0;

        z-index: 1025;

        content: "";

        background: rgba(18, 14, 22, 0.48);

        pointer-events: none;
    }

    /*
    |--------------------------------------------------------------------------
    | NAVBAR Y DROPDOWNS SOBRE EL FONDO
    |--------------------------------------------------------------------------
    */

    .socialhot-navbar {
        z-index: 1050;
    }

    .notifications-dropdown,
    .user-menu-button,
    .notifications-toggle {
        position: relative;
        z-index: 1061;
    }
}


/* =====================================================
   PERFIL PÚBLICO - COMPARTIR PERFIL
   ===================================================== */

.profile-share-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.profile-share-button:disabled {
    cursor: default;
    opacity: 0.75;
}


/* =====================================================
   PERFIL PÚBLICO - DISEÑO SIN PORTADA
   ===================================================== */

/*
|--------------------------------------------------------------------------
| TARJETA PRINCIPAL
|--------------------------------------------------------------------------
*/

.public-profile-card {
    overflow: hidden;

    border: 1px solid #ece7f0 !important;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 34px rgba(33, 24, 44, 0.07) !important;
}

.public-profile-card .profile-card-body {
    padding: 2rem;
}

/*
|--------------------------------------------------------------------------
| CABECERA
|--------------------------------------------------------------------------
*/

.public-profile-card .profile-main-header {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 1.25rem;

    margin: 0 0 2rem;
}

.public-profile-card .profile-avatar-container {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.public-profile-card .profile-avatar {
    width: 132px;
    height: 132px;

    border: 4px solid #ffffff;

    box-shadow:
        0 0 0 1px #ebe6ef,
        0 10px 28px rgba(35, 25, 43, 0.13);
}

.public-profile-card .profile-heading {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;
    padding: 0;
}

.public-profile-card .profile-username {
    margin: 0;

    color: #28212d;

    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 760;
    line-height: 1.15;
}

.public-profile-card .profile-subtitle {
    margin-top: 0.5rem;

    color: #837a89;

    font-size: 0.87rem;
}

/*
|--------------------------------------------------------------------------
| ACCIONES
|--------------------------------------------------------------------------
*/

.public-profile-card .profile-actions {
    grid-column: 1 / -1;
    grid-row: 2;

    width: 100%;
    margin: 0;
    padding: 1.2rem 0 0;

    border-top: 1px solid #f0edf2;
}

.public-profile-card .public-profile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    width: 100%;

    gap: 0.7rem;
}

.public-profile-card .public-profile-action-form {
    margin: 0;
}

.public-profile-card .public-profile-actions .btn,
.public-profile-card .profile-actions>.btn {
    min-width: 138px;
    min-height: 44px;

    padding-right: 1.05rem;
    padding-left: 1.05rem;

    border-radius: 999px;

    font-size: 0.88rem;
    font-weight: 650;

    white-space: nowrap;
}

.public-profile-card .public-profile-actions .btn svg,
.public-profile-card .profile-actions>.btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/*
|--------------------------------------------------------------------------
| INFORMACIÓN
|--------------------------------------------------------------------------
*/

.public-profile-card .profile-main-header+.row {
    margin-top: 0;
}

.public-profile-card .profile-section {
    height: 100%;

    border: 1px solid #eee9f1;
    border-radius: 16px;

    background: #fbfafc;
}

.public-profile-card .profile-section-title {
    color: #302936;
}

.public-profile-card .profile-section-icon {
    color: #6f42c1;
    background: rgba(111, 66, 193, 0.09);
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) and (max-width: 991.98px) {

    .public-profile-card .profile-card-body {
        padding: 1.6rem;
    }

    .public-profile-card .profile-main-header {
        grid-template-columns: 116px minmax(0, 1fr);
        column-gap: 1.25rem;
    }

    .public-profile-card .profile-avatar {
        width: 116px;
        height: 116px;
    }

    .public-profile-card .public-profile-actions .btn {
        min-width: 125px;
    }
}

/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .public-profile-card {
        margin-right: 0;
        margin-left: 0;

        border-radius: 17px;
    }

    .public-profile-card .profile-card-body {
        padding: 1.1rem 1rem 1.15rem;
    }

    .public-profile-card .profile-main-header {
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;

        column-gap: 0.9rem;
        row-gap: 1rem;

        margin: 0 0 1.25rem;
    }

    .public-profile-card .profile-avatar {
        width: 92px;
        height: 92px;

        border-width: 3px;

        box-shadow:
            0 0 0 1px #ebe6ef,
            0 7px 20px rgba(35, 25, 43, 0.11);
    }

    .public-profile-card .profile-avatar-initial {
        font-size: 1.85rem;
    }

    .public-profile-card .profile-heading {
        min-width: 0;
    }

    .public-profile-card .profile-username {
        overflow: hidden;

        font-size: 1.35rem;

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

    .public-profile-card .profile-subtitle {
        margin-top: 0.35rem;

        font-size: 0.72rem;
        line-height: 1.4;
    }

    .public-profile-card .profile-actions {
        padding-top: 1rem;
    }

    /*
    | La primera acción es Seguir / Dejar de seguir.
    | Se mantiene como botón principal a todo el ancho.
    */

    .public-profile-card .public-profile-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0.65rem;
    }

    .public-profile-card .public-profile-actions> :first-child {
        grid-column: 1 / -1;
    }

    .public-profile-card .public-profile-actions> :last-child {
        grid-column: 1 / -1;
    }

    .public-profile-card .public-profile-action-form,
    .public-profile-card .public-profile-actions .btn {
        width: 100%;
    }

    .public-profile-card .public-profile-actions .btn {
        min-width: 0;
        min-height: 45px;

        padding-right: 0.75rem;
        padding-left: 0.75rem;

        font-size: 0.81rem;
    }

    .public-profile-card .public-profile-actions .btn svg {
        width: 17px;
        height: 17px;
    }

    /*
    | Perfil propio: Editar perfil ocupa todo el ancho.
    */

    .public-profile-card .profile-actions>.profile-edit-button {
        width: 100%;
        min-width: 0;
    }

    /*
    | Información pública
    */

    .public-profile-card .profile-section {
        padding: 0.95rem;

        border-radius: 14px;
    }
}

/*
|--------------------------------------------------------------------------
| MÓVILES PEQUEÑOS
|--------------------------------------------------------------------------
*/

@media (max-width: 374.98px) {

    .public-profile-card .profile-card-body {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .public-profile-card .profile-main-header {
        grid-template-columns: 78px minmax(0, 1fr);

        column-gap: 0.75rem;
    }

    .public-profile-card .profile-avatar {
        width: 78px;
        height: 78px;
    }

    .public-profile-card .profile-username {
        font-size: 1.18rem;
    }

    .public-profile-card .profile-subtitle {
        font-size: 0.67rem;
    }

    .public-profile-card .public-profile-actions {
        grid-template-columns: 1fr;
    }

    .public-profile-card .public-profile-actions>* {
        grid-column: 1 !important;
    }
}


/* =====================================================
   PERFIL PÚBLICO - MOCKUP FIEL SIN PORTADA
   ===================================================== */

.public-profile-card {
    border: 1px solid #e9e5ed !important;
    border-radius: 20px !important;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(30, 22, 40, .07) !important;
}

.public-profile-card .profile-card-body {
    padding: 0 !important;
}

.public-profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(390px, .9fr);
    gap: 2rem;
    align-items: center;
    padding: 2rem 2.2rem 1.8rem;
}

.public-profile-identity {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    min-width: 0;
}

.public-profile-card .profile-avatar-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.public-profile-card .profile-avatar {
    width: 150px !important;
    height: 150px !important;
    border: 5px solid #fff !important;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 0 0 1px #e7e1eb,
        0 10px 28px rgba(26, 18, 34, .14) !important;
}

.public-profile-card .profile-avatar-initial {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3eff8;
    color: #6f42c1;
    font-size: 2.6rem;
    font-weight: 800;
}

.public-profile-card .profile-heading {
    min-width: 0;
    padding: 0 !important;
}

.public-profile-card .profile-username {
    margin: 0;
    color: #17141a;
    font-size: clamp(1.75rem, 2.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.public-profile-handle {
    margin: .45rem 0 0;
    color: #6f42c1;
    font-size: 1rem;
    font-weight: 600;
}

.public-profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    color: #746c7c;
    font-size: .92rem;
}

.public-profile-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
    min-width: 0;
}

.public-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.public-profile-stat {
    min-width: 0;
    text-align: center;
}

.public-profile-stat strong {
    display: block;
    color: #6f42c1;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.05;
}

.public-profile-stat span {
    display: block;
    margin-top: .35rem;
    color: #4f4856;
    font-size: .82rem;
    white-space: nowrap;
}

.public-profile-card .profile-actions {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.public-profile-card .public-profile-actions {
    display: grid !important;
    grid-template-columns: minmax(150px, 1.45fr) repeat(3, minmax(54px, auto));
    align-items: stretch;
    gap: .65rem !important;
    width: 100%;
}

.public-profile-card .public-profile-action-form {
    margin: 0;
}

.public-profile-card .public-profile-actions .btn,
.public-profile-card .profile-actions>.btn {
    width: 100%;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0;
    padding: .72rem .9rem !important;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .85rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

.public-profile-card .public-profile-actions svg,
.public-profile-card .profile-actions>.btn svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
}

.public-profile-follow-form {
    min-width: 0;
}

.public-profile-icon-action {
    min-width: 0;
}

.public-profile-more-action {
    min-width: 0;
}

.public-profile-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #ece8ef;
    border-bottom: 1px solid #ece8ef;
    background: #fff;
}

.public-profile-tab {
    position: relative;
    min-height: 58px;
    padding: .85rem .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: #665f6e;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 650;
}

.public-profile-tab:hover,
.public-profile-tab:focus {
    color: #6f42c1;
    background: #fbf9fd;
}

.public-profile-tab.active {
    color: #6f42c1;
}

.public-profile-tab.active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #6f42c1;
}

.public-profile-tab svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}

.public-profile-info-grid {
    padding: 1.5rem 1.6rem 0;
    scroll-margin-top: 92px;
}

#public-profile-posts,
#public-profile-information,
#public-profile-preferences {
    scroll-margin-top: 92px;
}

.public-profile-card .profile-section {
    height: 100%;
    border: 1px solid #ebe7ee !important;
    border-radius: 16px !important;
    background: #fbfafc !important;
    box-shadow: none !important;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1099.98px) {
    .public-profile-hero {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        padding: 1.7rem;
    }

    .public-profile-side {
        display: grid;
        grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: 1rem;
    }

    .public-profile-card .public-profile-actions {
        grid-template-columns: minmax(140px, 1.4fr) repeat(3, minmax(48px, auto));
    }
}

/* MÓVIL - fiel al mockup */
@media (max-width: 767.98px) {
    .public-profile-card {
        border-radius: 17px !important;
    }

    .public-profile-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.35rem;
        padding: 1.2rem 1rem 1rem;
    }

    .public-profile-identity {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 1rem;
        align-items: center;
    }

    .public-profile-card .profile-avatar {
        width: 104px !important;
        height: 104px !important;
        border-width: 4px !important;
    }

    .public-profile-card .profile-username {
        overflow: hidden;
        font-size: 1.6rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .public-profile-handle {
        margin-top: .28rem;
        font-size: .9rem;
    }

    .public-profile-meta {
        gap: .35rem .5rem;
        margin-top: .7rem;
        font-size: .74rem;
        line-height: 1.35;
    }

    .public-profile-side {
        gap: 1rem;
    }

    .public-profile-stats {
        gap: 0;
        padding: .15rem 0;
    }

    .public-profile-stat {
        position: relative;
        padding: 0 .35rem;
    }

    .public-profile-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 20%;
        right: 0;
        width: 1px;
        height: 60%;
        background: #e7e2ea;
    }

    .public-profile-stat strong {
        font-size: 1.35rem;
    }

    .public-profile-stat span {
        margin-top: .28rem;
        font-size: .74rem;
        white-space: normal;
    }

    .public-profile-card .public-profile-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) 52px !important;
        gap: .55rem !important;
    }

    .public-profile-card .public-profile-actions> :first-child {
        grid-column: auto !important;
    }

    .public-profile-card .public-profile-actions> :last-child {
        grid-column: auto !important;
    }

    .public-profile-card .public-profile-action-form,
    .public-profile-card .public-profile-actions .btn {
        width: 100% !important;
    }

    .public-profile-card .public-profile-actions .btn {
        min-height: 48px !important;
        padding: .7rem .65rem !important;
        border-radius: 11px !important;
        font-size: .8rem !important;
    }

    .public-profile-card .public-profile-actions .btn-primary {
        box-shadow: 0 7px 16px rgba(111, 66, 193, .18);
    }

    .public-profile-card .public-profile-more-action {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .public-profile-card .public-profile-more-action .public-profile-action-text {
        display: none;
    }

    .public-profile-card .public-profile-actions>.public-profile-icon-action:nth-of-type(2) {
        /* el botón compartir ocupa la segunda columna si existe */
    }

    .public-profile-tabs {
        overflow-x: auto;
        grid-template-columns: repeat(3, minmax(118px, 1fr));
        scrollbar-width: none;
    }

    .public-profile-tabs::-webkit-scrollbar {
        display: none;
    }

    .public-profile-tab {
        min-height: 56px;
        padding: .8rem .5rem;
        font-size: .79rem;
        gap: .4rem;
        white-space: nowrap;
    }

    .public-profile-tab svg {
        width: 17px;
        height: 17px;
    }

    .public-profile-tab.active::after {
        left: 12%;
        right: 12%;
    }

    .public-profile-info-grid {
        padding: 1rem 1rem 0;
    }

    .public-profile-card .profile-section {
        border-radius: 14px !important;
    }
}

/* móvil angosto */
@media (max-width: 430px) {
    .public-profile-hero {
        padding-right: .9rem;
        padding-left: .9rem;
    }

    .public-profile-identity {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: .85rem;
    }

    .public-profile-card .profile-avatar {
        width: 90px !important;
        height: 90px !important;
    }

    .public-profile-card .profile-username {
        font-size: 1.35rem;
    }

    .public-profile-card .public-profile-actions {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 48px !important;
    }

    .public-profile-card .public-profile-actions .public-profile-icon-action .public-profile-action-text {
        display: none;
    }

    .public-profile-card .profile-share-button .public-profile-action-text {
        display: inline;
    }

    .public-profile-card .public-profile-actions .btn {
        font-size: .76rem !important;
    }
}

@media (max-width: 360px) {
    .public-profile-identity {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .public-profile-card .profile-avatar {
        width: 78px !important;
        height: 78px !important;
    }

    .public-profile-card .profile-username {
        font-size: 1.2rem;
    }

    .public-profile-meta {
        font-size: .68rem;
    }

    .public-profile-card .public-profile-actions {
        grid-template-columns: 1fr 48px 48px !important;
    }

    .public-profile-card .profile-share-button .public-profile-action-text {
        display: none;
    }
}


/* =====================================================
   PERFIL PÚBLICO - LAYOUT 60 / 40
   ===================================================== */

.public-profile-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;

    border: 1px solid #ebe7ee !important;
    border-radius: 18px !important;

    background: #ffffff;

    box-shadow:
        0 10px 30px rgba(29, 20, 38, 0.06) !important;
}

.public-profile-card .profile-card-body {
    padding: 1.65rem !important;
}

.public-profile-header {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 1.35rem;

    align-items: center;

    min-width: 0;
}

.public-profile-avatar-column,
.public-profile-summary,
.public-profile-name-row,
.public-profile-name {
    min-width: 0;
}

.public-profile-card .profile-avatar-container {
    display: flex;

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

.public-profile-card .profile-avatar {
    width: 132px !important;
    height: 132px !important;

    max-width: 100%;

    object-fit: cover;

    border: 4px solid #ffffff !important;
    border-radius: 50%;

    box-shadow:
        0 0 0 1px #e7e2ea,
        0 8px 22px rgba(26, 18, 34, 0.12) !important;
}

.public-profile-card .profile-avatar-initial {
    display: flex;

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

    background: #f2edf8;
    color: #6f42c1;

    font-size: 2.2rem;
    font-weight: 800;
}

.public-profile-name-row {
    display: flex;

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

    gap: 1rem;
}

.public-profile-card .profile-username {
    margin: 0;

    overflow-wrap: anywhere;

    color: #201a25;

    font-size: clamp(1.55rem, 2.25vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
}

.public-profile-handle {
    margin: 0.35rem 0 0;

    color: #6f42c1;

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

    overflow-wrap: anywhere;
}

.public-profile-inline-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, auto));

    gap: 1rem;

    flex: 0 0 auto;
}

.public-profile-inline-stats>div {
    min-width: 0;

    text-align: center;
}

.public-profile-inline-stats strong {
    display: block;

    color: #6f42c1;

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.public-profile-inline-stats span {
    display: block;

    margin-top: 0.28rem;

    color: #746c7c;

    font-size: 0.68rem;

    white-space: nowrap;
}

.public-profile-basic-info {
    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem 1rem;

    margin-top: 0.9rem;
}

.public-profile-info-item {
    display: inline-flex;

    align-items: center;

    min-width: 0;

    gap: 0.4rem;

    color: #6d6574;

    font-size: 0.8rem;
}

.public-profile-info-item svg {
    width: 16px;
    height: 16px;

    flex: 0 0 16px;
}

.public-profile-preferences-inline {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.55rem;

    margin-top: 0.95rem;

    min-width: 0;
}

.public-profile-preferences-label {
    color: #49404f;

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

    white-space: nowrap;
}

.public-profile-preferences-list {
    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    min-width: 0;
}

.public-profile-card .profile-preference-badge {
    max-width: 100%;

    padding: 0.35rem 0.65rem;

    border-radius: 999px;

    font-size: 0.72rem;

    white-space: normal;
    overflow-wrap: anywhere;
}

.public-profile-no-preferences {
    color: #918997;

    font-size: 0.74rem;
}

/*
|--------------------------------------------------------------------------
| CONTENIDO 60 / 40
|--------------------------------------------------------------------------
*/

.public-profile-content-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 3fr) minmax(260px, 2fr);

    gap: 1.25rem;

    align-items: start;

    width: 100%;
    max-width: 100%;

    margin-top: 1.25rem;
}

.public-profile-feed-column,
.public-profile-actions-column {
    min-width: 0;
    max-width: 100%;
}

.public-profile-feed-column .public-profile-posts {
    margin-top: 0;
}

.public-profile-feed-column .feed-posts,
.public-profile-feed-column .estado-card,
.public-profile-feed-column img,
.public-profile-feed-column video {
    max-width: 100%;
}

.public-profile-feed-column img,
.public-profile-feed-column video {
    height: auto;
}

/*
|--------------------------------------------------------------------------
| PANEL LATERAL
|--------------------------------------------------------------------------
*/

.public-profile-actions-column {
    position: relative;
}

.public-profile-actions-card {
    width: 100%;
    max-width: 100%;

    padding: 1.15rem;

    overflow: hidden;

    border: 1px solid #ebe7ee;
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(29, 20, 38, 0.05);
}

.public-profile-actions-header {
    margin-bottom: 1rem;
}

.public-profile-actions-header h2 {
    margin: 0;

    color: #29212f;

    font-size: 1rem;
    font-weight: 800;
}

.public-profile-actions-header p {
    margin: 0.3rem 0 0;

    color: #847c89;

    font-size: 0.75rem;
    line-height: 1.45;
}

.public-profile-side-actions {
    display: grid;

    gap: 0.65rem;
}

.public-profile-action-form {
    width: 100%;
    margin: 0;
}

.public-profile-side-button {
    display: inline-flex !important;

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

    width: 100% !important;
    max-width: 100%;

    min-width: 0 !important;
    min-height: 40px !important;

    gap: 0.45rem;

    padding: 0.55rem 0.8rem !important;

    border-radius: 10px !important;

    font-size: 0.78rem !important;
    font-weight: 700 !important;

    line-height: 1.15;

    white-space: normal !important;
    overflow-wrap: anywhere;
}

.public-profile-side-button svg {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px;
}

.public-profile-side-stats {
    display: grid;

    gap: 0;

    margin-top: 1rem;

    border-top: 1px solid #eeeaf1;
}

.public-profile-side-stats>div {
    display: flex;

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

    gap: 0.75rem;

    padding: 0.7rem 0;

    border-bottom: 1px solid #f2eff4;
}

.public-profile-side-stats>div:last-child {
    border-bottom: 0;
}

.public-profile-side-stats span {
    color: #746d79;

    font-size: 0.74rem;
}

.public-profile-side-stats strong {
    color: #342b3a;

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

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) and (max-width: 991.98px) {

    .public-profile-card .profile-card-body {
        padding: 1.3rem !important;
    }

    .public-profile-header {
        grid-template-columns: 108px minmax(0, 1fr);

        gap: 1rem;
    }

    .public-profile-card .profile-avatar {
        width: 108px !important;
        height: 108px !important;
    }

    .public-profile-name-row {
        display: block;
    }

    .public-profile-inline-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        max-width: 340px;

        margin-top: 0.9rem;
    }

    .public-profile-inline-stats span {
        white-space: normal;
    }

    .public-profile-content-layout {
        grid-template-columns:
            minmax(0, 1.6fr) minmax(230px, 1fr);

        gap: 1rem;
    }
}

/*
|--------------------------------------------------------------------------
| MÓVIL
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .public-profile-card {
        border-radius: 15px !important;
    }

    .public-profile-card .profile-card-body {
        padding: 1rem !important;
    }

    .public-profile-header {
        grid-template-columns: 82px minmax(0, 1fr);

        gap: 0.85rem;

        align-items: start;
    }

    .public-profile-card .profile-avatar {
        width: 82px !important;
        height: 82px !important;

        border-width: 3px !important;
    }

    .public-profile-card .profile-avatar-initial {
        font-size: 1.55rem;
    }

    .public-profile-name-row {
        display: block;
    }

    .public-profile-card .profile-username {
        font-size: 1.28rem;
    }

    .public-profile-handle {
        margin-top: 0.22rem;

        font-size: 0.78rem;
    }

    .public-profile-inline-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 0;

        width: 100%;

        margin-top: 0.75rem;
    }

    .public-profile-inline-stats>div {
        position: relative;

        padding: 0 0.28rem;
    }

    .public-profile-inline-stats>div:not(:last-child)::after {
        position: absolute;

        top: 20%;
        right: 0;

        width: 1px;
        height: 60%;

        content: "";

        background: #e8e3eb;
    }

    .public-profile-inline-stats strong {
        font-size: 1rem;
    }

    .public-profile-inline-stats span {
        font-size: 0.6rem;

        white-space: normal;
        overflow-wrap: anywhere;
    }

    .public-profile-basic-info {
        gap: 0.4rem 0.65rem;

        margin-top: 0.65rem;
    }

    .public-profile-info-item {
        font-size: 0.68rem;
    }

    .public-profile-info-item svg {
        width: 14px;
        height: 14px;

        flex-basis: 14px;
    }

    .public-profile-preferences-inline {
        grid-column: 1 / -1;

        margin-top: 0.85rem;

        padding-top: 0.85rem;

        border-top: 1px solid #f0edf2;
    }

    .public-profile-preferences-label {
        width: 100%;

        font-size: 0.7rem;
    }

    .public-profile-card .profile-preference-badge {
        font-size: 0.67rem;
    }

    /*
    | En móvil: acciones primero y feed debajo.
    */

    .public-profile-content-layout {
        display: flex;
        flex-direction: column;

        gap: 1rem;

        margin-top: 1rem;
    }

    .public-profile-actions-column {
        order: 1;

        width: 100%;
    }

    .public-profile-feed-column {
        order: 2;

        width: 100%;
    }

    .public-profile-actions-card {
        padding: 0.9rem;

        border-radius: 14px;
    }

    .public-profile-actions-header {
        margin-bottom: 0.75rem;
    }

    .public-profile-actions-header p {
        display: none;
    }

    .public-profile-side-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0.55rem;
    }

    .public-profile-side-actions> :first-child {
        grid-column: 1 / -1;
    }

    .public-profile-side-button {
        min-height: 42px !important;

        padding: 0.55rem 0.5rem !important;

        font-size: 0.72rem !important;
    }

    .public-profile-side-stats {
        display: none;
    }

    .public-profile-posts-header {
        min-width: 0;
    }

    .public-profile-posts-header>* {
        min-width: 0;
    }
}

/*
|--------------------------------------------------------------------------
| MÓVILES PEQUEÑOS
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {

    .public-profile-header {
        grid-template-columns: 70px minmax(0, 1fr);

        gap: 0.7rem;
    }

    .public-profile-card .profile-avatar {
        width: 70px !important;
        height: 70px !important;
    }

    .public-profile-card .profile-username {
        font-size: 1.14rem;
    }

    .public-profile-inline-stats span {
        font-size: 0.56rem;
    }

    .public-profile-side-actions {
        grid-template-columns: 1fr;
    }

    .public-profile-side-actions>* {
        grid-column: 1 !important;
    }
}


/* =====================================================
   PERFIL PÚBLICO - ESTADÍSTICAS CIRCULARES
   ===================================================== */

.public-profile-inline-stats {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.9rem !important;
    flex: 0 0 auto;
}

.public-profile-inline-stats>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 74px;
    text-align: center;
}

.public-profile-inline-stats strong {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    margin: 0;

    border-radius: 50%;

    background: #6f42c1;
    color: #ffffff !important;

    box-shadow:
        0 7px 18px rgba(111, 66, 193, 0.22);

    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.public-profile-inline-stats span {
    display: block;

    margin-top: 0.42rem !important;

    color: #6e6675;

    font-size: 0.68rem !important;
    font-weight: 650;

    white-space: nowrap;
}

/* =====================================================
   PANEL DE ACCIONES
   ===================================================== */

.public-profile-actions-header {
    margin-bottom: 0.9rem !important;
}

.public-profile-actions-header h2 {
    margin: 0;

    color: #2a2230;

    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;

    overflow-wrap: anywhere;
}

.public-profile-actions-header p {
    display: none !important;
}

.public-profile-side-stats {
    display: none !important;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 991.98px) {

    .public-profile-inline-stats {
        justify-content: flex-start;
        margin-top: 0.9rem;
    }

    .public-profile-inline-stats>div {
        min-width: 68px;
    }

    .public-profile-inline-stats strong {
        width: 48px;
        height: 48px;
        font-size: 0.92rem !important;
    }
}

/* MÓVIL */
@media (max-width: 767.98px) {

    .public-profile-inline-stats {
        width: 100%;
        justify-content: flex-start;
        gap: 0.65rem !important;
        margin-top: 0.72rem;
    }

    .public-profile-inline-stats>div {
        min-width: 62px;
        padding: 0 !important;
    }

    .public-profile-inline-stats>div::after {
        display: none !important;
    }

    .public-profile-inline-stats strong {
        width: 44px;
        height: 44px;
        font-size: 0.82rem !important;
    }

    .public-profile-inline-stats span {
        max-width: 68px;
        margin-top: 0.35rem !important;
        font-size: 0.58rem !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .public-profile-actions-header h2 {
        font-size: 0.9rem;
    }
}

/* MÓVILES PEQUEÑOS */
@media (max-width: 390px) {

    .public-profile-inline-stats {
        gap: 0.45rem !important;
    }

    .public-profile-inline-stats>div {
        min-width: 56px;
    }

    .public-profile-inline-stats strong {
        width: 40px;
        height: 40px;
        font-size: 0.76rem !important;
    }

    .public-profile-inline-stats span {
        max-width: 60px;
        font-size: 0.54rem !important;
    }
}

.public-profile-preferences-inline {
    display: flex;
    margin-top: 0.85rem;
}

.public-profile-preferences-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

    max-width: 100%;

    margin: 0;

    padding: 0.5rem 0.85rem;

    border: 1px solid rgba(111, 66, 193, 0.16);
    border-radius: 999px;

    background: rgba(111, 66, 193, 0.08);
    color: #4f4856;

    font-size: 0.78rem;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.public-profile-preferences-text strong {
    color: #3f3450;
    font-weight: 700;
}

.public-profile-no-preferences {
    color: #8c8492;
}

@media (max-width: 767.98px) {
    .public-profile-preferences-text {
        width: 100%;

        padding: 0.48rem 0.75rem;

        border-radius: 14px;

        font-size: 0.72rem;
    }
}


/* =====================================================
   PERFIL PÚBLICO - MÓVIL: AVATAR SOLO ARRIBA
   ===================================================== */

@media (max-width: 767.98px) {

    .public-profile-header {
        display: block !important;
    }

    .public-profile-avatar-column {
        width: 100%;
        margin-bottom: 1rem;
    }

    .public-profile-card .profile-avatar-container {
        width: 100%;
        justify-content: center;
    }

    .public-profile-card .profile-avatar {
        width: 108px !important;
        height: 108px !important;
        margin: 0 auto;
    }

    .public-profile-summary {
        width: 100%;
        min-width: 0;
    }

    .public-profile-name-row {
        display: block !important;
        width: 100%;
    }

    .public-profile-name {
        width: 100%;
        text-align: center;
    }

    .public-profile-card .profile-username {
        text-align: center;
    }

    .public-profile-handle {
        text-align: center;
    }

    .public-profile-bio {
        margin-top: 0.8rem;
        text-align: left;
    }

    .public-profile-basic-info {
        justify-content: center;
        margin-top: 0.8rem;
    }

    .public-profile-social-summary {
        width: 100%;
        margin-top: 1rem;
    }

    .public-profile-inline-stats {
        justify-content: center !important;
        width: 100%;
        margin-top: 0 !important;
    }

    .public-profile-preferences-inline {
        justify-content: center;
        width: 100%;
        margin-top: 0.9rem;
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    .public-profile-preferences-text {
        width: auto !important;
        max-width: 100%;
        text-align: center;
    }
}

@media (max-width: 390px) {

    .public-profile-card .profile-avatar {
        width: 96px !important;
        height: 96px !important;
    }
}


/* =====================================================
   PERFIL PÚBLICO - DESKTOP 60 / 40 CORREGIDO
   ===================================================== */

@media (min-width: 768px) {

    .public-profile-header {
        display: grid !important;
        grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr) !important;
        gap: 1.5rem !important;
        align-items: center !important;
        width: 100%;
    }

    /*
    |--------------------------------------------------------------------------
    | 60% IZQUIERDA: FOTO + NOMBRE + BIO + DATOS
    |--------------------------------------------------------------------------
    */

    .public-profile-avatar-column {
        display: none !important;
    }

    .public-profile-summary {
        display: contents;
    }

    .public-profile-name-row {
        display: contents !important;
    }

    .public-profile-name {
        grid-column: 1;
        min-width: 0;
        position: relative;
        padding-left: 156px;
        min-height: 132px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .public-profile-name::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);

        width: 132px;
        height: 132px;

        border-radius: 50%;
        background: transparent;
    }

    /*
     * Volvemos a mostrar el avatar original, superpuesto en la columna izquierda.
     */
    .public-profile-card .profile-avatar-container {
        position: absolute;
        left: 1.65rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .public-profile-card .profile-card-body {
        position: relative;
    }

    .public-profile-card .profile-avatar {
        width: 132px !important;
        height: 132px !important;
    }

    .public-profile-name .profile-username,
    .public-profile-name .public-profile-handle,
    .public-profile-name .public-profile-bio,
    .public-profile-name .public-profile-basic-info {
        max-width: 100%;
    }

    /*
    |--------------------------------------------------------------------------
    | 40% DERECHA: CÍRCULOS + PREFERENCIAS
    |--------------------------------------------------------------------------
    */

    .public-profile-social-summary {
        grid-column: 2;
        min-width: 0;
        width: 100%;
        padding-left: 1.25rem;
        border-left: 1px solid #eeeaf1;
    }

    .public-profile-inline-stats {
        justify-content: center !important;
        margin: 0 !important;
    }

    .public-profile-preferences-inline {
        justify-content: center !important;
        margin-top: 1rem !important;
    }

    .public-profile-preferences-text {
        text-align: center;
    }
}

/* =====================================================
   PERFIL PÚBLICO - MÓVIL: AVATAR MÁS GRANDE
   ===================================================== */

@media (max-width: 767.98px) {

    .public-profile-card .profile-avatar {
        width: 132px !important;
        height: 132px !important;
    }
}

@media (max-width: 390px) {

    .public-profile-card .profile-avatar {
        width: 116px !important;
        height: 116px !important;
    }
}


/* =====================================================
   PERFIL PÚBLICO - CORRECCIÓN AVATAR DESKTOP
   ===================================================== */

@media (min-width: 768px) {

    /*
    | El avatar no puede estar dentro de un contenedor oculto.
    | Lo mantenemos visible y lo posicionamos dentro del 60% izquierdo.
    */

    .public-profile-avatar-column {
        display: block !important;
        position: absolute !important;

        left: 1.65rem;
        top: 50%;

        width: 132px !important;
        height: 132px !important;

        transform: translateY(-50%);

        z-index: 3;
    }

    .public-profile-card .profile-avatar-container {
        position: static !important;

        width: 132px;
        height: 132px;

        transform: none !important;
    }

    .public-profile-card .profile-avatar {
        display: block !important;

        width: 132px !important;
        height: 132px !important;

        object-fit: cover;
    }

    .public-profile-name {
        padding-left: 156px !important;
    }
}


/* =====================================================
   FEED DEL PERFIL - AVATARES SIEMPRE CIRCULARES
   ===================================================== */

.public-profile-feed-column .feed-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px;
    min-height: 46px;
    aspect-ratio: 1 / 1;

    flex: 0 0 46px;

    object-fit: cover !important;
    border-radius: 50% !important;
}

.public-profile-feed-column .estado-comment-avatar {
    aspect-ratio: 1 / 1;

    object-fit: cover !important;
    border-radius: 50% !important;
}

/*
| Evita que la regla genérica del feed convierta el alto
| fijo de los avatares en height:auto.
*/
.public-profile-feed-column img.feed-avatar,
.public-profile-feed-column img.estado-comment-avatar {
    height: revert;
}

@media (max-width: 767.98px) {

    .public-profile-feed-column .feed-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        min-height: 42px;

        flex-basis: 42px;
    }

    .public-profile-feed-column .estado-comment-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        min-height: 32px;
    }
}


/* =====================================================
   PERFIL PÚBLICO - INVITACIÓN A ESCRIBIR BIO COMO ENLACE
   ===================================================== */

.public-profile-bio-invite-link {
    display: inline;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #6f42c1;

    font: inherit;
    font-weight: 700;
    line-height: inherit;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}

.public-profile-bio-invite-link:hover,
.public-profile-bio-invite-link:focus {
    color: #56339b;
    text-decoration-thickness: 2px;
}

.public-profile-bio-invite-link:focus-visible {
    outline: 2px solid rgba(111, 66, 193, 0.32);
    outline-offset: 2px;
}


/* =====================================================
   PERFIL PÚBLICO - MÓVIL: SUMMARY Y CÍRCULOS MÁS GRANDES
   ===================================================== */

@media (max-width: 767.98px) {

    .public-profile-summary {
        font-size: 1rem;
    }

    .public-profile-card .profile-username {
        font-size: 1.48rem !important;
    }

    .public-profile-handle {
        font-size: 0.9rem !important;
    }

    .public-profile-bio,
    .public-profile-bio p,
    .public-profile-bio-empty {
        font-size: 0.82rem !important;
        line-height: 1.5;
    }

    .public-profile-info-item {
        font-size: 0.74rem !important;
    }

    .public-profile-inline-stats {
        gap: 0.8rem !important;
    }

    .public-profile-inline-stats>div {
        min-width: 72px !important;
    }

    .public-profile-inline-stats strong {
        width: 54px !important;
        height: 54px !important;

        font-size: 0.95rem !important;
    }

    .public-profile-inline-stats span {
        max-width: 78px !important;

        margin-top: 0.4rem !important;

        font-size: 0.64rem !important;
        line-height: 1.25;
    }

    .public-profile-preferences-text {
        font-size: 0.78rem !important;
        line-height: 1.45;
    }
}

@media (max-width: 390px) {

    .public-profile-card .profile-username {
        font-size: 1.34rem !important;
    }

    .public-profile-inline-stats {
        gap: 0.6rem !important;
    }

    .public-profile-inline-stats>div {
        min-width: 66px !important;
    }

    .public-profile-inline-stats strong {
        width: 50px !important;
        height: 50px !important;

        font-size: 0.9rem !important;
    }

    .public-profile-inline-stats span {
        max-width: 70px !important;

        font-size: 0.6rem !important;
    }
}


/* =====================================================
   PERFIL PÚBLICO - ACCIONES MÓVIL UNIFORMES
   ===================================================== */

@media (max-width: 767.98px) {

    .public-profile-side-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 0.6rem !important;

        width: 100%;
    }

    .public-profile-side-actions>* {
        grid-column: auto !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    .public-profile-side-actions .public-profile-action-form {
        width: 100% !important;
    }

    .public-profile-side-actions .public-profile-side-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 44px !important;

        margin: 0 !important;
        padding: 0.6rem 0.55rem !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        gap: 0.45rem;

        border-radius: 10px !important;

        font-size: 0.74rem !important;
        line-height: 1.2;

        white-space: normal !important;
        text-align: center;

        overflow-wrap: anywhere;
    }

    .public-profile-side-actions .public-profile-side-button svg {
        width: 16px !important;
        height: 16px !important;

        flex: 0 0 16px;
    }
}

@media (max-width: 390px) {

    .public-profile-side-actions {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================
   VIDEO - RESUMEN PREVIO
   ===================================================== */

.post-video-analysis {
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.95rem 1rem;

    border: 1px solid #e6e3ea;
    border-radius: 14px;

    background: #ffffff;
}

.post-video-analysis-header {
    margin-bottom: 0.75rem;

    font-size: 0.92rem;
    color: #2f2935;
}

.post-video-analysis-details {
    display: grid;
    gap: 0.42rem;
}

.post-video-analysis-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    font-size: 0.78rem;
    line-height: 1.4;
}

.post-video-analysis-row span {
    color: #8b8491;
}

.post-video-analysis-row strong {
    min-width: 0;

    color: #403947;

    font-weight: 600;
    text-align: right;

    overflow-wrap: anywhere;
}

.post-video-analysis-status {
    margin-top: 0.85rem;
    padding-top: 0.75rem;

    border-top: 1px solid #efedf1;
}

.post-video-analysis-status-title {
    display: flex;
    align-items: center;

    gap: 0.45rem;

    font-size: 0.84rem;
}

.post-video-analysis-status p {
    margin: 0.35rem 0 0;

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

    color: #69616f;
}

.post-video-analysis-reasons {
    display: grid;
    gap: 0.25rem;

    margin-top: 0.45rem;

    font-size: 0.72rem;
    line-height: 1.4;

    color: #817888;
}

.post-video-analysis.is-fast {
    border-color: rgba(25, 135, 84, 0.25);
    background: rgba(25, 135, 84, 0.035);
}

.post-video-analysis.is-fast .post-video-analysis-status-title {
    color: #157347;
}

.post-video-analysis.is-process {
    border-color: rgba(255, 193, 7, 0.35);
    background: rgba(255, 193, 7, 0.045);
}

.post-video-analysis.is-process .post-video-analysis-status-title {
    color: #8a6500;
}

.post-video-analysis.is-invalid {
    border-color: rgba(220, 53, 69, 0.28);
    background: rgba(220, 53, 69, 0.035);
}

.post-video-analysis.is-invalid .post-video-analysis-status-title {
    color: #b02a37;
}

@media (max-width: 575.98px) {

    .post-video-analysis {
        padding: 0.85rem;
    }

    .post-video-analysis-row {
        font-size: 0.75rem;
    }

    .post-video-analysis-row strong {
        max-width: 62%;
    }

    .post-video-analysis-status-title {
        font-size: 0.8rem;
    }

    .post-video-analysis-status p {
        font-size: 0.73rem;
    }
}

/* Agregar al final de style.css */
.post-video-analysis.is-background {
    border-color: rgba(13, 110, 253, 0.24);
    background: rgba(13, 110, 253, 0.035);
}

.post-video-analysis.is-background .post-video-analysis-status-title {
    color: #0a58ca;
}

.public-profile-bio {
    margin-top: 10px;
}

.public-profile-bio p {
    margin: 0;
    font-size: 12px;
}

.public-profile-bio {
    margin-top: 10px;
}

.public-profile-bio p {
    margin: 0;
    font-size: 12px;
}

@media (max-width: 767.98px) {
    .public-profile-bio {
        text-align: center;
    }
}

/*
|--------------------------------------------------------------------------
| MODO A / MODO B
|--------------------------------------------------------------------------
*/

.mobile-nav-mode-toggle {
    appearance: none;
    -webkit-appearance: none;

    border: 0;
    background: transparent;

    color: #212529;

    font-family: inherit;
    cursor: pointer;
}

.mobile-nav-mode-toggle:hover,
.mobile-nav-mode-toggle:focus,
.mobile-nav-mode-toggle.is-mode-a,
.mobile-nav-mode-toggle.is-mode-a:hover,
.mobile-nav-mode-toggle.is-mode-a:focus {
    color: #212529;
}

/*
|--------------------------------------------------------------------------
| CÍRCULO - MODO B
|--------------------------------------------------------------------------
*/

.mobile-nav-mode-dot {
    display: block;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background-color: #dc3545;

    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 3px rgba(220, 53, 69, 0.16);

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

/*
|--------------------------------------------------------------------------
| CÍRCULO - MODO A
|--------------------------------------------------------------------------
*/

.mobile-nav-mode-toggle.is-mode-a .mobile-nav-mode-dot {
    background-color: var(--socialhot-primary);

    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 3px rgba(111, 66, 193, 0.18);
}

/*
|--------------------------------------------------------------------------
| EFECTO AL PRESIONAR
|--------------------------------------------------------------------------
*/

.mobile-nav-mode-toggle:active .mobile-nav-mode-dot {
    transform: scale(0.9);
}

/* =========================================================
   MULTIMEDIA EN MENSAJES PRIVADOS
   ========================================================= */

.private-message-text {
    min-width: 0;
    margin: 0;
    padding: 0;
    line-height: inherit;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.private-message-media {
    display: grid;
    gap: 4px;
    width: min(420px, 68vw);
    max-width: 100%;
    margin-bottom: 6px;
    overflow: hidden;
    border-radius: 10px;
}

.private-message-media-1 {
    grid-template-columns: 1fr;
}

.private-message-media-2,
.private-message-media-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.private-message-media-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.private-message-media-3> :first-child {
    grid-column: 1 / -1;
}

.private-message-image-button {
    display: block;
    width: 100%;
    min-width: 0;
    height: 170px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #ececf1;
    cursor: zoom-in;
}

.private-message-media-1 .private-message-image-button {
    height: min(360px, 52vw);
}

.private-message-image-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.private-message-video {
    display: block;
    width: min(420px, 68vw);
    max-width: 100%;
    max-height: 430px;
    border-radius: 10px;
    background: #111;
}

.private-message-row.mine .private-message-media,
.private-message-row.mine .private-message-video {
    color: initial;
}

.private-message-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #6f42c1;
    background: #f1ecfa;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.private-message-attach:hover,
.private-message-attach:focus-visible {
    color: #59339d;
    background: #e8def6;
}

.private-message-attach:disabled {
    cursor: wait;
    opacity: 0.55;
}

.private-message-attach svg {
    width: 20px;
    height: 20px;
}

.private-message-media-preview {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #ece7f1;
    border-radius: 12px;
    background: #faf8fc;
}

.private-message-media-preview-item {
    position: relative;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border: 1px solid #e1dbe7;
    border-radius: 10px;
    background: #ececf1;
}

.private-message-media-preview-item img,
.private-message-media-preview-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.private-message-media-preview-item.is-video {
    width: 120px;
}

.private-message-media-preview-label {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 2px 5px;
    color: #fff;
    background: rgba(20, 20, 24, 0.75);
    border-radius: 5px;
    font-size: 0.62rem;
    font-weight: 700;
}

.private-message-media-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: #fff;
    background: rgba(20, 20, 24, 0.78);
    border: 0;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
}

.private-message-upload-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #716b78;
    font-size: 0.72rem;
    font-weight: 600;
}

.private-message-upload-progress-track {
    flex: 1;
    height: 6px;
    overflow: hidden;
    background: #ece7f2;
    border-radius: 999px;
}

.private-message-upload-progress-bar {
    width: 0;
    height: 100%;
    background: #6f42c1;
    border-radius: inherit;
    transition: width 0.12s linear;
}

.private-message-lightbox[hidden] {
    display: none !important;
}

.private-message-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(8, 8, 11, 0.92);
}

.private-message-lightbox img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 56px);
    object-fit: contain;
}

.private-message-lightbox-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 14px;
    z-index: 2001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    border-radius: 50%;
    font-size: 1.7rem;
    line-height: 1;
}

body.private-message-lightbox-open {
    overflow: hidden !important;
}

@media (max-width: 767.98px) {
    .private-message-media {
        width: min(320px, 72vw);
    }

    .private-message-image-button {
        height: 125px;
    }

    .private-message-media-1 .private-message-image-button {
        height: min(300px, 66vw);
    }

    .private-message-video {
        width: min(320px, 72vw);
        max-height: 350px;
    }

    .private-message-attach {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .private-message-media-preview {
        gap: 6px;
        margin-bottom: 6px;
        padding: 6px;
    }

    .private-message-media-preview-item {
        width: 64px;
        height: 64px;
    }

    .private-message-media-preview-item.is-video {
        width: 100px;
    }

    .private-message-lightbox {
        padding: 0;
    }

    .private-message-lightbox img {
        width: 100%;
        max-height: 100dvh;
    }
}