:root {
    --red: #DF0F1C;
    --blue: #192CAD;
    --green: #18A84A;
    --black: #111111;
    --text: #445064;
    --muted: #788397;
    --line: #E8EBF0;
    --card: #FFFFFF;
    --bg: #FAFBFD;
    --shadow: 0 18px 45px rgba(29, 42, 70, 0.10);
    --soft-shadow: 0 10px 26px rgba(29, 42, 70, 0.09);
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.app-shell {
    position: relative;
    width: min(100%, 480px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 28px 20px 30px;
}

/* ===== Usuario autenticado ===== */

.app-userbar {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 13px;
}

.app-current-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #586376;
    font-size: 15px;
    font-weight: 650;
}

.app-online-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(24, 168, 74, .10);
}

.app-current-pro {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    margin: 0;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    transition: transform .15s ease, background-color .15s ease;
}

.app-current-pro:hover {
    background: #252d3a;
    transform: translateY(-1px);
}

.app-current-pro:active {
    transform: scale(.96);
}


/* ===== Logo ===== */

.app-topbar {
    display: flex;
    justify-content: center;
    margin: 10px 0 28px;
}

.app-site-logo {
    display: block;
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.app-site-logo #logo {
    font-family: "Arial Black", Verdana, sans-serif;
    font-size: 50px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: normal;
    white-space: nowrap;
    text-shadow: 5px 5px 5px #ccc;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
}

.app-site-logo #logo .red { color: var(--red); }
.app-site-logo #logo .black { color: var(--black); }
.app-site-logo #logo .blue { color: var(--blue); }

.app-site-logo > span {
    display: block;
    margin-top: 4px;
    color: var(--red) !important;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px !important;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.25;
}

.app-flash,
.app-notice {
    margin: 0 0 13px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
}

.app-flash.is-success {
    border: 1px solid #bfe8cd;
    background: #f2fff6;
    color: #116735;
}

.app-flash.is-error {
    border: 1px solid #efc2c5;
    background: #fff6f6;
    color: #8b1d25;
}

.app-notice {
    border: 1px solid #cdd6ff;
    background: #f5f7ff;
    color: #344694;
}

/* ===== Tarjeta, calcada al planteo de la portal: imagen casi a sangre ===== */

.discover-card {
    padding: 11px 11px 0;
    border: 1px solid rgba(222, 226, 233, .8);
    border-radius: 28px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.discover-photo-frame {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 21px;
    background: #eef1f4;
}

.discover-photo-track {
    width: 100%;
    background: #eef1f4;
}

/* Cuadradas y horizontales: usan todo el ancho disponible de la tarjeta (~415 px en desktop). */
.discover-photo-frame:not(.is-portrait) {
    width: 100%;
}

.discover-photo-frame:not(.is-portrait) .discover-photo-track {
    height: auto;
}

.discover-photo-frame:not(.is-portrait) .discover-photo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

/* Verticales: también usan todo el ancho disponible, pero dentro de un marco cuadrado. */
.discover-photo-frame.is-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.discover-photo-frame.is-portrait .discover-photo-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discover-photo-frame.is-portrait .discover-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.discover-photo[hidden] {
    display: none !important;
}

.photo-nav {
    position: absolute;
    z-index: 5;
    top: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .46);
    box-shadow:
        0 0 0 1px rgba(34, 42, 55, .05),
        0 3px 10px rgba(0, 0, 0, .08);
    cursor: pointer;
    transform: translateY(-50%);
    transition:
        background-color .16s ease,
        box-shadow .16s ease,
        opacity .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.photo-nav[hidden] {
    display: none;
}

.photo-nav.is-prev { left: 9px; }
.photo-nav.is-next { right: 9px; }

.photo-nav img {
    display: block;
    width: 10px;
    height: 22px;
    object-fit: contain;
    opacity: .52;
    transition: opacity .16s ease;
}

/* En desktop, al entrar sobre la foto las flechas ganan presencia. */
@media (hover: hover) and (pointer: fine) {
    .discover-photo-frame:hover .photo-nav {
        background: rgba(255, 255, 255, .94);
        box-shadow:
            0 0 0 1px rgba(34, 42, 55, .08),
            0 4px 13px rgba(0, 0, 0, .12);
    }

    .discover-photo-frame:hover .photo-nav img {
        opacity: .82;
    }

    .photo-nav:hover {
        background: #fff;
        box-shadow:
            0 0 0 1px rgba(34, 42, 55, .10),
            0 5px 15px rgba(0, 0, 0, .15);
    }

    .photo-nav:hover img {
        opacity: 1;
    }
}

.photo-nav:active {
    transform: translateY(-50%) scale(.94);
}

.discover-info {
    padding: 16px 11px 17px;
}

.discover-primary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.discover-name-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.discover-name-row h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #222A37;
    font-size: 21px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-name-row h2 span {
    font-weight: 600;
}

.verified-icon {
    display: block;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

.profile-pro {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    margin: 0;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1;
    transition: transform .15s ease, background-color .15s ease;
}

.profile-pro:hover {
    background: #252d3a;
    transform: translateY(-1px);
}

.profile-pro:active {
    transform: scale(.96);
}

.discover-ranking {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    background: #F2F4F7;
    color: #596579;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.discover-location {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.discover-location-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .72;
}

.discover-description {
    margin: 13px 0 0;
    color: #596579;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ===== Botones afuera, igual que la portal ===== */

.vote-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start;
    margin: 24px 8px 0;
}

.vote-cell,
.vote-cell form {
    min-width: 0;
    margin: 0;
}

.vote-btn {
    appearance: none;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .vote-btn:hover {
        transform: translateY(-2px);
    }
}

.vote-btn:active {
    transform: scale(.93);
}

.vote-circle {
    width: clamp(76px, 22vw, 98px);
    height: clamp(76px, 22vw, 98px);
    margin: 0 auto 9px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(231, 234, 240, .9);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--soft-shadow);
    font-size: 0;
}

.vote-icon {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.vote-no .vote-icon {
    transform: scale(1.08);
    filter:
        drop-shadow(1px 0 0 #192CAD)
        drop-shadow(-1px 0 0 #192CAD)
        drop-shadow(0 1px 0 #192CAD)
        drop-shadow(0 -1px 0 #192CAD);
}

.vote-yes .vote-icon {
    transform: scale(1.08);
    filter:
        drop-shadow(1px 0 0 #18A84A)
        drop-shadow(-1px 0 0 #18A84A)
        drop-shadow(0 1px 0 #18A84A)
        drop-shadow(0 -1px 0 #18A84A);
}

.vote-meet .vote-icon {
    width: 64px;
    height: 64px;
    transform: scale(1.05);
    filter:
        drop-shadow(.8px 0 0 #DF0F1C)
        drop-shadow(-.8px 0 0 #DF0F1C)
        drop-shadow(0 .8px 0 #DF0F1C)
        drop-shadow(0 -.8px 0 #DF0F1C);
}

.vote-label {
    display: block;
    font-size: clamp(13px, 3.7vw, 17px);
    font-weight: 900;
    letter-spacing: -.2px;
}

.vote-no .vote-label { color: var(--blue); }
.vote-yes .vote-label { color: var(--green); }
.vote-meet .vote-label { color: var(--red); }

.vote-cell-meet {
    text-align: center;
}

.heart-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    margin: 7px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.undo-row {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.undo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #596579;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.undo-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(.72);
    opacity: .88;
}

/* ===== Pie con iconos ===== */

.app-footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
    color: #596579;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.app-footer-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #596579;
    white-space: nowrap;
}

.app-footer-item img {
    display: block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    object-fit: contain;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: grayscale(1) saturate(0) opacity(.72);
    opacity: .88;
}

.footer-separator {
    color: #9AA3B1;
    opacity: .75;
}

.app-footer-logout {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.app-footer-item {
    margin: 0;
    border: 0;
    line-height: 1;
    font-family: inherit;
    font-size: inherit;
    vertical-align: middle;
}

.app-footer-logout button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.app-footer-logout button:hover {
    color: var(--red);
}

.app-footer-logout img {
    filter: grayscale(1) saturate(0) brightness(1.48) opacity(.62);
    opacity: .78;
}

/* ===== Estado sin perfiles ===== */

.empty-card {
    padding: 48px 24px;
    border: 1px solid rgba(222, 226, 233, .8);
    border-radius: 28px;
    background: #fff;
    text-align: center;
    box-shadow: var(--shadow);
}

.empty-heart {
    color: var(--red);
    font-size: 50px;
}

.empty-card h1 {
    margin: 12px 0 8px;
    color: #222A37;
    font-size: 20px;
}

.empty-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

/* ===== Modal corazones ===== */

.heart-dialog {
    width: min(calc(100% - 28px), 430px);
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: transparent;
}

.heart-dialog::backdrop {
    background: rgba(12, 18, 31, .52);
    backdrop-filter: blur(2px);
}

.heart-dialog-card {
    position: relative;
    padding: 25px 20px 21px;
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0,0,0,.24);
}

.dialog-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #505968;
    cursor: pointer;
    font-size: 24px;
}

.dialog-heart {
    color: var(--red);
    font-size: 42px;
}

.heart-dialog h2 { margin: 5px 0; }

.heart-dialog p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.heart-packs {
    display: grid;
    gap: 9px;
    margin: 18px 0 13px;
}

.heart-packs button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 15px;
    border: 1px solid #e2e6ed;
    border-radius: 13px;
    background: #fafbfc;
    color: #222c3d;
    opacity: .8;
}

.heart-packs span {
    color: var(--red);
    font-weight: 900;
}

.payment-pending { margin-bottom: 4px !important; }
.payment-paypal-brand { white-space: nowrap; }
.payment-pending .payment-paypal-logo {
    display: inline-block;
    width: 56px;
    height: 15px;
    vertical-align: -3px;
}

.free-tomorrow { margin-top: 0 !important; }

@media (max-width: 620px) {
    .app-shell {
        padding-top: 18px;
    }

    .vote-row {
        gap: 8px;
        margin-left: 0;
        margin-right: 0;
    }

    .vote-icon {
        width: 56px;
        height: 56px;
    }

    .vote-meet .vote-icon {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 390px) {
    .app-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .app-current-user {
        font-size: 14px;
    }

    .discover-info {
        padding-left: 5px;
        padding-right: 5px;
    }

    .app-footer-nav {
        gap: 7px;
        font-size: 11px;
    }

    .app-footer-item {
        gap: 4px;
    }

    .app-footer-item img {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }
}

@media (max-width: 360px) {
    .app-shell {
        padding-left: 10px;
        padding-right: 10px;
    }

    .app-site-logo #logo {
        font-size: 46px;
    }

    .discover-primary-row {
        gap: 6px;
    }

    .discover-name-row {
        gap: 4px;
    }

    .discover-name-row h2 {
        font-size: 19px;
    }

    .verified-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .vote-row {
        gap: 4px;
    }

    .vote-circle {
        width: 74px;
        height: 74px;
    }

    .vote-icon {
        width: 50px;
        height: 50px;
    }

    .vote-meet .vote-icon {
        width: 54px;
        height: 54px;
    }

    .heart-balance {
        font-size: 10px;
    }

    .app-footer-nav {
        gap: 5px;
        font-size: 10.5px;
    }

    .app-footer-item img {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }
}


/* ===== Mobile: navegación inferior sólo con iconos ===== */

@media (max-width: 620px) {
    .app-footer-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: min(100%, 330px);
        margin: 24px auto 0;
        gap: 4px;
    }

    .app-footer-nav .footer-separator {
        display: none;
    }

    .app-footer-item {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 0;
    }

    .app-footer-item .app-footer-label {
        display: none;
    }

    .app-footer-item img {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .app-footer-logout {
        display: block;
        width: 100%;
    }

    .app-footer-logout button {
        width: 100%;
        min-height: 42px;
    }
}

@media (max-width: 360px) {
    .app-footer-nav {
        width: min(100%, 300px);
    }

    .app-footer-item img {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* ===== Información de CONOCER ===== */

.heart-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 7px;
}

.heart-meta .heart-balance {
    margin: 0;
}

.meet-info-button {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.meet-info-button img {
    display: block;
    width: 15px;
    height: 15px;
    object-fit: contain;
}


/* ===== Bandera sobre la foto ===== */

.photo-country-flag {
    position: absolute;
    z-index: 4;
    top: 11px;
    left: 11px;
    width: 28px;
    height: 19px;
    object-fit: cover;
    border-radius: 3px;
    background: transparent;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, .14);
}

@media (max-width: 390px) {
    .photo-country-flag {
        width: 27px;
        height: 18px;
        top: 10px;
        left: 10px;
    }
}

/* ===== Reportar perfil: círculo compacto V3 ===== */

.app-v2 .report-photo-button {
    position: absolute;
    z-index: 4;
    top: 5px;
    right: 11px;
    cursor: pointer;
}

/* Ajuste visual del botón Reportar perfil en Descubrir.
   Solo cambia el círculo visible; el área táctil sigue siendo amplia. */
.app-v2 .report-photo-button {
    appearance: none;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    line-height: 0;
    background: rgba(242, 244, 248, .95);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .11);
}
.app-v2 .report-photo-button img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* El dibujo sigue compacto, sin achicar el blanco táctil a menos de 44 px. */
.app-v2 .report-photo-button::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: transparent;
}

.report-photo-button.is-reported {
    opacity: .42;
    cursor: default;
}

/* ===== Modales secundarios ===== */

.app-dialog {
    width: min(calc(100% - 28px), 430px);
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: transparent;
}

.app-dialog::backdrop {
    background: rgba(12, 18, 31, .52);
    backdrop-filter: blur(2px);
}

.app-dialog-card {
    position: relative;
    padding: 26px 22px 22px;
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .24);
}

.app-dialog-card h2 {
    margin: 8px 0 7px;
    color: #222A37;
    font-size: 20px;
}

.app-dialog-card > p,
.app-dialog-card form > p {
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
}

.dialog-info-icon {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    object-fit: contain;
}

.report-dialog-symbol {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: #FFF2F3;
}

.report-dialog-symbol img {
    display: block;
    width: 23px;
    height: 23px;
    object-fit: contain;
}


.report-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 18px;
}

.report-actions button {
    min-height: 44px;
    border-radius: 13px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
}

.report-cancel {
    border: 1px solid #E0E4EA;
    background: #F8F9FB;
    color: #596579;
}

.report-confirm {
    border: 1px solid var(--red);
    background: var(--red);
    color: #fff;
}

.report-confirm:disabled {
    opacity: .55;
    cursor: default;
}

.report-feedback {
    margin: 13px 0 0 !important;
    font-weight: 700;
}

.report-feedback.is-success {
    color: #18864b;
}

.report-feedback.is-error {
    color: #b42318;
}

@media (max-width: 620px) {
.meet-info-button {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

    .meet-info-button img {
        width: 16px;
        height: 16px;
    }
}


/* ===== Información PRO ===== */

.dialog-pro-badge {
    width: 58px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
}

.pro-benefits {
    display: grid;
    gap: 11px;
    margin-top: 18px;
    text-align: left;
}

.pro-benefit {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 12px 13px;
    border: 1px solid #E7EAF0;
    border-radius: 14px;
    background: #FAFBFD;
}

.pro-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ECFDF3;
    color: var(--green);
    font-size: 14px;
    font-weight: 900;
}

.pro-benefit p {
    margin: 0 !important;
    color: #596579 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.pro-benefit strong {
    display: block;
    margin-bottom: 2px;
    color: #344054;
}

.pro-info-note {
    margin: 14px 0 0 !important;
    color: #596579 !important;
    font-size: 12.5px !important;
}

.pro-info-footnote {
    margin: 8px 0 0 !important;
    color: #8A94A6 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
}


.profile-pro-intro {
    margin: 12px 0 0 !important;
    color: #596579 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}

.profile-pro-how {
    margin: 14px 0 0 !important;
    padding: 11px 13px;
    border-radius: 13px;
    background: #F2F4F7;
    color: #475467 !important;
    font-size: 12.5px !important;
    font-weight: 700;
    line-height: 1.5 !important;
}

/* ===== Mensajes: listado de conversaciones ===== */

.app-footer-nav a.app-footer-item {
    text-decoration: none;
}

.app-footer-nav a.app-footer-item:hover {
    color: var(--blue);
}

.app-footer-item.is-active {
    color: var(--blue);
    font-weight: 850;
}

.app-footer-item.is-active img {
    opacity: 1;
}

.messages-section {
    width: 100%;
}

.messages-heading {
    margin: 0 4px 13px;
    color: #222A37;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.25px;
}

.conversation-list {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .8);
    border-radius: 28px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.conversation-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 88px;
    padding: 11px 14px;
    background: #fff;
}

.conversation-row + .conversation-row {
    border-top: 1px solid var(--line);
}

.conversation-row.is-unread {
    background: #FBFCFF;
}

.conversation-avatar {
    width: 64px;
    height: 64px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #EEF1F5;
    color: #687386;
    font-size: 23px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(31, 42, 61, .05);
}

.conversation-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.conversation-name {
    min-width: 0;
    overflow: hidden;
    color: #222A37;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-age {
    font-weight: 650;
}

.conversation-preview {
    display: block;
    min-width: 0;
    margin: 6px 0 0;
    overflow: hidden;
    color: #788397;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-row.is-unread .conversation-name,
.conversation-row.is-unread .conversation-preview {
    color: #344054;
    font-weight: 800;
}

.conversation-you {
    margin-right: 3px;
    color: #596579;
    font-weight: 750;
}

.conversation-no-messages {
    color: #929CAA;
    font-style: italic;
    font-weight: 500;
}

.conversation-meta {
    min-width: 43px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    color: #8A94A6;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.conversation-unread {
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.messages-empty {
    padding-top: 42px;
    padding-bottom: 42px;
}

.messages-empty-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #F2F4F7;
}

.messages-empty-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(.72);
}

.messages-empty h2 {
    margin: 12px 0 8px;
    color: #222A37;
    font-size: 20px;
}

@media (max-width: 620px) {
    .messages-heading {
        margin-left: 3px;
        margin-right: 3px;
    }

    .conversation-row {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        gap: 11px;
        min-height: 82px;
        padding: 11px 12px;
    }

    .conversation-avatar {
        width: 58px;
        height: 58px;
        font-size: 21px;
    }

    .conversation-name {
        font-size: 14.5px;
    }

    .conversation-preview {
        font-size: 12.5px;
    }

    .conversation-meta {
        min-width: 39px;
        font-size: 10.5px;
    }
}

@media (max-width: 360px) {
    .conversation-row {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 9px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .conversation-avatar {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .conversation-meta {
        min-width: 36px;
    }
}


/* ===== Chat privado ===== */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a.conversation-row {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

a.conversation-row:hover { background: #F8FAFD; }
a.conversation-row:active { background: #F3F6FA; }

.chat-section { width: 100%; }

.chat-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 4px 12px;
    color: #596579;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.chat-back > span {
    margin-top: -1px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.chat-back:hover { color: var(--blue); }

.chat-card {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .8);
    border-radius: 28px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.chat-person {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.chat-avatar {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #EEF1F5;
    color: #687386;
    font-size: 19px;
    font-weight: 900;
}

.chat-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-person-text { min-width: 0; }

.chat-person h1 {
    margin: 0;
    overflow: hidden;
    color: #222A37;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-person h1 span { font-weight: 650; }

.chat-flash {
    margin: 10px 12px 0;
    padding: 9px 11px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.4;
}

.chat-flash.is-error {
    border: 1px solid #EFC2C5;
    background: #FFF6F6;
    color: #8B1D25;
}

.chat-history {
    height: min(52vh, 460px);
    min-height: 300px;
    overflow-y: auto;
    padding: 16px 14px 18px;
    background: linear-gradient(180deg, #FCFDFE 0%, #F8FAFC 100%);
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.chat-empty {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    color: #8A94A6;
    text-align: center;
}

.chat-empty p {
    margin: 2px 0;
    font-size: 13px;
    line-height: 1.45;
}

.chat-empty strong { color: #667085; }

.chat-day {
    display: flex;
    justify-content: center;
    margin: 4px 0 14px;
}

.chat-day span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #EEF1F5;
    color: #7B8595;
    font-size: 10.5px;
    font-weight: 800;
}

.chat-message-row {
    display: flex;
    margin: 8px 0;
}

.chat-message-row.is-mine { justify-content: flex-end; }
.chat-message-row.is-theirs { justify-content: flex-start; }

.chat-bubble {
    max-width: 78%;
    padding: 9px 11px 6px;
    border-radius: 17px;
    box-shadow: 0 2px 8px rgba(29, 42, 70, .05);
}

.chat-message-row.is-theirs .chat-bubble {
    border: 1px solid #E6E9EF;
    border-bottom-left-radius: 6px;
    background: #fff;
    color: #3F4959;
}

.chat-message-row.is-mine .chat-bubble {
    border: 1px solid rgba(25, 44, 173, .08);
    border-bottom-right-radius: 6px;
    background: #EEF1FF;
    color: #28346C;
}

.chat-bubble p {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 13.5px;
    line-height: 1.45;
}

.chat-message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #8993A3;
    font-size: 9.5px;
    line-height: 1;
}

.chat-message-row.is-mine .chat-message-meta { color: #6976A8; }
.chat-message-status { font-weight: 750; }

.chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: end;
    padding: 11px 12px 12px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.chat-composer textarea {
    width: 100%;
    min-height: 43px;
    max-height: 120px;
    resize: none;
    overflow-y: auto;
    padding: 11px 13px;
    border: 1px solid #DDE2E9;
    border-radius: 15px;
    outline: none;
    background: #FAFBFC;
    color: #344054;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.chat-composer textarea:focus {
    border-color: rgba(25, 44, 173, .48);
    box-shadow: 0 0 0 3px rgba(25, 44, 173, .08);
    background: #fff;
}

.chat-composer textarea::placeholder { color: #98A2B3; }

.chat-send-button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    transition: transform .14s ease, opacity .14s ease;
}

.chat-send-button:hover { transform: translateY(-1px); }
.chat-send-button:active { transform: scale(.97); }

.chat-send-arrow {
    display: inline-block;
    font-size: 12px;
    transform: rotate(-6deg);
}

.chat-closed {
    padding: 13px 14px;
    border-top: 1px solid var(--line);
    background: #FAFBFC;
    color: #7B8595;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 620px) {
    .chat-history {
        height: min(54vh, 470px);
        min-height: 320px;
        padding-left: 11px;
        padding-right: 11px;
    }

    .chat-bubble { max-width: 84%; }

    .chat-composer {
        gap: 7px;
        padding: 9px 10px 10px;
    }

    .chat-send-button {
        width: 44px;
        padding: 0;
        border-radius: 50%;
    }

    .chat-send-button > span:first-child { display: none; }
    .chat-send-arrow { font-size: 15px; }
}

@media (max-width: 360px) {
    .chat-person {
        padding-left: 11px;
        padding-right: 11px;
    }

    .chat-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .chat-person h1 { font-size: 16px; }
    .chat-bubble { max-width: 88%; }
}


/* ===== Chat v2.8: país, emojis y "está escribiendo" ===== */

.chat-person-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.chat-person-title-row h1 {
    min-width: 0;
}

.chat-country-flag {
    display: block;
    width: 23px;
    height: 16px;
    flex: 0 0 23px;
    object-fit: cover;
    border: 0;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
}

.chat-typing {
    display: flex;
    justify-content: center;
    margin: 10px 0 4px;
}

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

.chat-typing span {
    min-width: 35px;
    padding: 5px 10px 6px;
    border-radius: 999px;
    background: #EEF1F5;
    color: #7B8595;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    letter-spacing: 2px;
}

.chat-composer {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.chat-emoji-wrap {
    position: relative;
    align-self: end;
}

.chat-emoji-button {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #DDE2E9;
    border-radius: 14px;
    background: #FAFBFC;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.chat-emoji-button:hover {
    border-color: #CDD3DD;
    background: #fff;
}

.chat-emoji-button:active {
    transform: scale(.96);
}

.chat-emoji-picker {
    position: absolute;
    z-index: 20;
    left: 0;
    bottom: calc(100% + 9px);
    width: 256px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    padding: 9px;
    border: 1px solid #E0E4EA;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(29, 42, 70, .16);
}

.chat-emoji-picker[hidden] {
    display: none;
}

.chat-emoji-picker button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
}

.chat-emoji-picker button:hover {
    background: #F2F4F7;
}

.chat-send-button {
    min-width: 70px;
}

/*
 * La versión anterior convertía Enviar en un botón circular y ocultaba
 * el texto en móvil. Desde v2.8 queda siempre "Enviar".
 */
@media (max-width: 620px) {
    .chat-send-button {
        width: auto;
        min-width: 67px;
        padding: 0 12px;
        border-radius: 14px;
    }

    .chat-send-button > span:first-child {
        display: inline;
    }

    .chat-emoji-button {
        width: 43px;
        height: 43px;
    }

    .chat-emoji-picker {
        width: 248px;
        grid-template-columns: repeat(6, 1fr);
    }

    .chat-emoji-picker button {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .chat-composer {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .chat-emoji-button {
        width: 40px;
        height: 43px;
        font-size: 19px;
    }

    .chat-send-button {
        min-width: 62px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .chat-emoji-picker {
        width: 238px;
    }
}


/* ===== Bandera en listado de Mensajes ===== */

.conversation-name-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.conversation-name-row .conversation-name {
    min-width: 0;
}

.conversation-country-flag {
    display: block;
    width: 23px;
    height: 16px;
    flex: 0 0 23px;
    object-fit: cover;
    border: 0;
    border-radius: 2px;
    background: transparent;
    box-shadow: none;
    clip-path: inset(0 round 2px);
}


/* ===== Flags: render consistente Chrome / Safari ===== */

.chat-country-flag,
.conversation-country-flag {
    clip-path: inset(0 round 2px);
}


/* ===== Perfil rápido desde el chat ===== */

.chat-profile-trigger {
    appearance: none;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: transform .14s ease, opacity .14s ease;
}

.chat-profile-trigger:hover {
    transform: scale(1.035);
}

.chat-profile-trigger:active {
    transform: scale(.97);
}

.chat-profile-name-trigger {
    appearance: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.chat-profile-name-trigger:hover .chat-person-name {
    color: var(--blue);
}

.chat-person-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #222A37;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .14s ease;
}

.chat-person-name > span {
    font-weight: 650;
}

.chat-profile-dialog {
    width: min(calc(100% - 28px), 420px);
}

.chat-profile-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .24);
}

.chat-profile-card .dialog-close {
    z-index: 4;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .10);
}

.chat-profile-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #EEF1F5;
    color: #687386;
    font-size: 62px;
    font-weight: 900;
}

.chat-profile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-profile-info {
    padding: 17px 18px 20px;
}

.chat-profile-primary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chat-profile-name {
    min-width: 0;
    overflow: hidden;
    color: #222A37;
    font-size: 20px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-profile-name strong {
    font-weight: 850;
}

.chat-profile-name span {
    font-weight: 650;
}

.chat-profile-ranking {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    background: #F2F4F7;
    color: #596579;
    font-size: 11.5px;
    font-weight: 900;
    white-space: nowrap;
}

.chat-profile-location {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    color: #788397;
    font-size: 12.5px;
}

.chat-profile-location > img:first-child {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    opacity: .72;
}

.chat-profile-flag {
    display: block;
    width: 22px;
    height: 15px;
    flex: 0 0 22px;
    object-fit: cover;
    border-radius: 2px;
    clip-path: inset(0 round 2px);
}

.chat-profile-description {
    margin: 14px 0 0;
    color: #596579;
    font-size: 13.5px;
    line-height: 1.5;
}

@media (max-width: 620px) {
    .chat-person-name {
        font-size: 16px;
    }

    .chat-profile-info {
        padding: 15px 16px 18px;
    }

    .chat-profile-name {
        font-size: 19px;
    }
}


/* ===== Footer EN: mantener navegación en una sola línea ===== */

@media (min-width: 621px) {
    html[lang="en"] .app-footer-nav {
        flex-wrap: nowrap;
        gap: 6px;
        font-size: 12px;
    }

    html[lang="en"] .app-footer-item {
        gap: 6px;
    }
}


/* ===== Navegación inferior: sección activa + no leídos ===== */

.app-userbar.has-back {
    justify-content: space-between;
}

.app-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #596579;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: color .15s ease, transform .15s ease;
}

.app-back-link:hover {
    color: #333D4D;
    transform: translateX(-1px);
}

.app-footer-item {
    position: relative;
}

.app-footer-item.is-active {
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    background: #F2F4F7;
    color: #596579;
    font-weight: 900;
}

.app-footer-item.is-active img {
    opacity: .88;
}

.footer-separator.is-adjacent-active {
    display: none;
}

/*
 * El contador no ocupa ancho dentro del footer.
 * Queda superpuesto sobre Mensajes, por lo que no empuja Salir
 * a una segunda línea.
 */
.app-footer-unread {
    position: static;
    z-index: 3;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 8.5px;
    font-weight: 900;
    line-height: 1;
    box-shadow: none;
}

.app-footer-item.is-active .app-footer-unread {
    position: absolute;
    top: -8px;
    right: -8px;
    margin-left: 0;
    min-width: 18px;
    height: 18px;
    font-size: 9px;
    box-shadow: 0 0 0 2px #fff;
}

.app-footer-unread[hidden] {
    display: none;
}

.self-profile-section {
    width: 100%;
}

.self-profile-card {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .8);
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--shadow);
}

.self-profile-photo {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #EEF1F5;
}

/* Sin foto, Mi Perfil conserva el marco cuadrado para mostrar la inicial. */
.self-profile-photo.is-empty {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

/* Compatibilidad con versiones anteriores de la vista. */
.self-profile-photo-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.self-profile-initial {
    color: #687386;
    font-size: 70px;
    font-weight: 900;
}

.self-profile-info {
    padding: 16px 22px 19px;
}

@media (min-width: 621px) {
    .app-footer-nav {
        flex-wrap: nowrap;
    }
}

@media (max-width: 620px) {
    .app-footer-item.is-active {
        width: 42px;
        min-width: 42px;
        min-height: 36px;
        margin: 3px auto;
        padding: 0;
    }

    .app-footer-unread,
    .app-footer-item.is-active .app-footer-unread {
        position: absolute;
        top: 1px;
        right: 1px;
        margin-left: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 8px;
        box-shadow: 0 0 0 2px #fff;
    }

    .self-profile-info {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ===== V3.4 — Volver consistente + Chat heading + footer ===== */

.chat-page-heading {
    margin-bottom: 13px;
}

/*
 * Con pastilla activa y badge de no leídos, 8px de gap dejaba
 * la navegación demasiado justa. En desktop bajamos apenas el espacio
 * manteniendo tipografía y tamaño de iconos.
 */
@media (min-width: 621px) {
    .app-footer-nav {
        gap: 6px;
    }

    .app-footer-item {
        gap: 5px;
    }


}


/* ===== V3.5 — rutas y contador del footer ===== */

@media (min-width: 621px) {
    .app-footer-nav {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .app-footer-item {
        gap: 4px;
    }

    html[lang="en"] .app-footer-nav {
        gap: 4px;
    }

    html[lang="en"] .app-footer-item {
        gap: 4px;
    }
}


/* ===== V3.7 — indicador único de mensajes sin leer ===== */

/*
 * En TODAS las pantallas el aviso de no leídos es un punto rojo.
 * Se ubica arriba a la derecha de Mensajes, sin ocupar ancho del footer.
 */
.app-footer-unread,
.app-footer-item.is-active .app-footer-unread,
.app-footer-item:not(.is-active) .app-footer-unread {
    position: absolute;
    z-index: 3;
    top: -7px;
    right: -7px;
    width: 9px;
    min-width: 9px;
    height: 9px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--red);
    color: transparent;
    font-size: 0;
    line-height: 0;
    box-shadow: 0 0 0 2px #fff;
}

.app-footer-unread[hidden] {
    display: none;
}

@media (max-width: 620px) {
    .app-footer-unread,
    .app-footer-item.is-active .app-footer-unread,
    .app-footer-item:not(.is-active) .app-footer-unread {
        top: 3px;
        right: 4px;
        width: 8px;
        min-width: 8px;
        height: 8px;
        box-shadow: 0 0 0 2px #fff;
    }
}


/* ===== V3.8 — menú inferior: iconos arriba + línea activa ===== */

/*
 * Diseño elegido:
 * - icono arriba;
 * - texto abajo;
 * - separadores verticales siempre visibles;
 * - activo sin globo, con texto/icono más oscuro + línea azul;
 * - no leídos = punto rojo sobre Mensajes.
 */

@media (min-width: 621px) {
    .app-footer-nav {
        display: flex;
        width: 100%;
        align-items: stretch;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 0;
        margin-top: 28px;
        color: #677286;
        font-size: 11.5px;
        line-height: 1;
        text-align: center;
    }

    .app-footer-item,
    .app-footer-logout button {
        position: relative;
        min-width: 0;
        min-height: 57px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        margin: 0;
        padding: 2px 9px 8px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #677286;
        font-family: inherit;
        font-size: inherit;
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }

    .app-footer-item img,
    .app-footer-logout img {
        width: 23px;
        height: 23px;
        flex: 0 0 23px;
        margin: 0;
        object-fit: contain;
        filter: grayscale(1) saturate(0) opacity(.68);
        opacity: 1;
    }

    .app-footer-label {
        display: block;
        line-height: 1.05;
    }

    .app-footer-item.is-active {
        min-height: 57px;
        padding: 2px 9px 8px;
        border-radius: 0;
        background: transparent;
        color: #263A5B;
        font-weight: 850;
    }

    .app-footer-item.is-active img {
        filter: grayscale(1) saturate(0) brightness(.62);
        opacity: 1;
    }

    .app-footer-item.is-active::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 0;
        height: 3px;
        border-radius: 999px;
        background: #0A67E8;
    }

    /*
     * El diseño elegido conserva separadores incluso al lado
     * de la opción activa.
     */
    .footer-separator,
    .footer-separator.is-adjacent-active {
        width: 1px;
        height: 39px;
        display: block;
        align-self: flex-start;
        margin: 4px 1px 0;
        overflow: hidden;
        background: #D9DEE7;
        color: transparent;
        font-size: 0;
        opacity: 1;
    }

    .app-footer-logout {
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .app-footer-logout button {
        cursor: pointer;
    }

    .app-footer-logout button:hover,
    .app-footer-nav a.app-footer-item:hover {
        color: #263A5B;
    }

    /*
     * Punto rojo: siempre sobre el icono de Mensajes,
     * independientemente de si Mensajes está activo.
     */
    .app-footer-unread,
    .app-footer-item.is-active .app-footer-unread,
    .app-footer-item:not(.is-active) .app-footer-unread {
        position: absolute;
        z-index: 4;
        top: -2px;
        left: calc(50% + 7px);
        right: auto;
        width: 9px;
        min-width: 9px;
        height: 9px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background: var(--red);
        color: transparent;
        font-size: 0;
        line-height: 0;
        box-shadow: 0 0 0 2px #fff;
        transform: none;
    }

    .app-footer-unread[hidden] {
        display: none;
    }

    /*
     * El ancho de cada opción queda contenido para que ES/EN/IT
     * entren en una sola línea dentro de los 480px del shell.
     */
    .app-footer-nav > .app-footer-item:nth-of-type(1) {
        padding-left: 8px;
        padding-right: 8px;
    }

    html[lang="en"] .app-footer-nav,
    html[lang="it"] .app-footer-nav {
        font-size: 11px;
    }

    html[lang="en"] .app-footer-item,
    html[lang="en"] .app-footer-logout button,
    html[lang="it"] .app-footer-item,
    html[lang="it"] .app-footer-logout button {
        padding-left: 7px;
        padding-right: 7px;
    }
}

/*
 * Mobile conserva el esquema de cinco iconos, pero adopta
 * la misma lógica visual: activo más oscuro + línea azul + punto rojo.
 */
@media (max-width: 620px) {
    .app-footer-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: min(100%, 330px);
        margin: 24px auto 0;
        gap: 4px;
    }

    .app-footer-nav .footer-separator,
    .app-footer-nav .footer-separator.is-adjacent-active {
        display: none;
    }

    .app-footer-item,
    .app-footer-item.is-active,
    .app-footer-logout button {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        margin: 0;
        padding: 0 0 7px;
        border-radius: 0;
        background: transparent;
    }

    .app-footer-item img,
    .app-footer-item.is-active img,
    .app-footer-logout img {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }

    .app-footer-item.is-active {
        color: #263A5B;
    }

    .app-footer-item.is-active img {
        filter: grayscale(1) saturate(0) brightness(.62);
        opacity: 1;
    }

    .app-footer-item.is-active::after {
        content: "";
        position: absolute;
        left: 25%;
        right: 25%;
        bottom: 0;
        height: 3px;
        border-radius: 999px;
        background: #0A67E8;
    }

    .app-footer-unread,
    .app-footer-item.is-active .app-footer-unread,
    .app-footer-item:not(.is-active) .app-footer-unread {
        position: absolute;
        z-index: 4;
        top: 3px;
        left: calc(50% + 7px);
        right: auto;
        width: 8px;
        min-width: 8px;
        height: 8px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background: var(--red);
        color: transparent;
        font-size: 0;
        line-height: 0;
        box-shadow: 0 0 0 2px #fff;
    }

    .app-footer-unread[hidden] {
        display: none;
    }
}


/* ===== V3.8.1 — footer más abierto en desktop ===== */

@media (min-width: 621px) {
    .app-footer-nav {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        justify-content: space-between;
    }

    .app-footer-item,
    .app-footer-logout {
        flex: 1 1 0;
    }

    /*
     * Notificaciones necesita apenas más espacio por ser la etiqueta
     * más larga. El resto conserva el ancho y proporciones originales.
     */
    .app-footer-nav > .app-footer-item-notifications {
        flex: 1.28 1 0;
    }

    .app-footer-logout {
        display: flex;
        align-items: stretch;
        justify-content: center;
    }

    .app-footer-logout button {
        width: 100%;
    }

    .app-footer-item,
    .app-footer-logout button {
        padding-left: 12px;
        padding-right: 12px;
    }

    .footer-separator,
    .footer-separator.is-adjacent-active {
        margin-left: 0;
        margin-right: 0;
    }

    html[lang="en"] .app-footer-item,
    html[lang="en"] .app-footer-logout button,
    html[lang="it"] .app-footer-item,
    html[lang="it"] .app-footer-logout button {
        padding-left: 10px;
        padding-right: 10px;
    }
}



/* ===== V3.9 — aclarar icono Salir ===== */

.app-footer-logout img,
.app-footer-logout button img {
    filter: grayscale(1) saturate(0) brightness(1.48) opacity(.62) !important;
    opacity: .78 !important;
}


/* ===== V4.0 — bloqueo de usuarios en Chat ===== */

.chat-block-notice {
    margin: 0;
    padding: 10px 13px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.chat-block-notice[hidden] {
    display: none;
}

.chat-block-notice.is-blocked-by-me {
    background: #FFF8E8;
    color: #8A5A00;
}

.chat-block-notice.is-blocked-me {
    background: #FFF3F4;
    color: #9B1C25;
}

.chat-composer.is-blocked {
    opacity: .68;
}

.chat-composer textarea:disabled,
.chat-emoji-button:disabled,
.chat-send-button:disabled {
    cursor: not-allowed;
}

.chat-composer textarea:disabled {
    background: #F2F4F7;
    color: #8A94A6;
}

.chat-send-button:disabled {
    opacity: .55;
    transform: none;
}

.chat-emoji-button:disabled {
    opacity: .5;
}

.chat-profile-actions {
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #ECEFF3;
}

.chat-profile-actions form {
    margin: 0;
}

.chat-block-button {
    appearance: none;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 13px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 850;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.chat-block-button:active {
    transform: scale(.985);
}

.chat-block-button.is-block {
    border: 1px solid #F1C4C8;
    background: #FFF7F7;
    color: #B4232C;
}

.chat-block-button.is-block:hover {
    border-color: #E69DA4;
    background: #FFF0F1;
}

.chat-block-button.is-unblock {
    border: 1px solid #DDE2E9;
    background: #F7F8FA;
    color: #596579;
}

.chat-block-button.is-unblock:hover {
    border-color: #CBD2DC;
    background: #F0F2F5;
}

@media (max-width: 620px) {
    .chat-block-notice {
        padding-left: 11px;
        padding-right: 11px;
        font-size: 11.5px;
    }

    .chat-profile-actions {
        margin-top: 15px;
        padding-top: 13px;
    }
}


/* ===== V4.2 — historial largo del Chat ===== */

.chat-history-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 0 15px;
    text-align: center;
}

.chat-history-load-button {
    appearance: none;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #DEE3EA;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #667085;
    cursor: pointer;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(29, 42, 70, .05);
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.chat-history-load-button:hover {
    border-color: #CDD4DE;
    background: #fff;
    color: #455268;
}

.chat-history-load-button:active {
    transform: scale(.98);
}

.chat-history-load-button:disabled {
    cursor: wait;
    opacity: .62;
    transform: none;
}

.chat-history-load-error {
    max-width: 290px;
    margin: 0;
    color: #B4232C;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.35;
}

.chat-history-load-error[hidden] {
    display: none;
}


/* ===== V4.3 — iOS: evitar zoom al enfocar el chat ===== */

/*
 * Safari en iPhone hace zoom automático al enfocar inputs/textarea
 * con tipografía menor a 16px. Mantener 16px evita el zoom y conserva
 * el viewport/ancho normal del sitio mientras aparece el teclado.
 */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 620px) {
        .chat-composer textarea {
            font-size: 16px;
        }
    }
}


/* ===== V4.4 — centro de Notificaciones ===== */

.notifications-section {
    width: 100%;
}

.notifications-list {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .8);
    border-radius: 28px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.notification-row {
    position: relative;
    width: 100%;
    min-height: 78px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 10px;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 11px 15px;
    border: 0;
    background: #fff;
    color: inherit;
    font-family: inherit;
    text-align: left;
}

button.notification-row {
    appearance: none;
    cursor: pointer;
}

.notification-row + .notification-row {
    border-top: 1px solid var(--line);
}

.notification-row.is-new {
    background: #FBFCFF;
}

button.notification-row:hover {
    background: #F8FAFD;
}

button.notification-row:active {
    background: #F3F6FA;
}

.notification-avatar,
.notification-symbol {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #EEF1F5;
    color: #687386;
    box-shadow: inset 0 0 0 1px rgba(31, 42, 61, .05);
}

.notification-avatar {
    font-size: 19px;
    font-weight: 900;
}

.notification-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-symbol {
    color: #596579;
    font-size: 23px;
    font-weight: 900;
}

.notification-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notification-main strong {
    overflow-wrap: anywhere;
    color: #344054;
    font-size: 14px;
    font-weight: 780;
    line-height: 1.35;
}

.notification-row.is-new .notification-main strong {
    color: #222A37;
    font-weight: 880;
}

.notification-time {
    color: #8A94A6;
    font-size: 11px;
    line-height: 1;
}

.notification-new-dot {
    width: 8px;
    height: 8px;
    justify-self: end;
    border-radius: 50%;
    background: var(--red);
}

.notifications-empty {
    padding-top: 42px;
    padding-bottom: 42px;
}

.notifications-empty-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #F2F4F7;
}

.notifications-empty-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: grayscale(1) saturate(0) opacity(.72);
}

.notifications-empty h2 {
    margin: 12px 0 8px;
    color: #222A37;
    font-size: 20px;
}

.notifications-history-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    text-align: center;
}

.notifications-history-button {
    appearance: none;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid #DEE3EA;
    border-radius: 999px;
    background: #fff;
    color: #667085;
    cursor: pointer;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(29, 42, 70, .05);
}

.notifications-history-button:hover {
    border-color: #CDD4DE;
    color: #455268;
}

.notifications-history-button:disabled {
    cursor: wait;
    opacity: .62;
}

.notifications-history-error {
    max-width: 310px;
    margin: 0;
    color: #B4232C;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.35;
}

/*
 * El badge PRO dentro del popup de perfil rápido comparte la estética
 * existente, pero queda integrado en la misma línea del nombre.
 */
.chat-profile-name .profile-pro {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 5px;
}

.chat-profile-name .profile-pro[hidden] {
    display: none;
}

@media (max-width: 620px) {
    .notification-row {
        min-height: 74px;
        grid-template-columns: 48px minmax(0, 1fr) 9px;
        gap: 11px;
        padding: 10px 12px;
    }

    .notification-avatar,
    .notification-symbol {
        width: 48px;
        height: 48px;
    }

    .notification-avatar {
        font-size: 18px;
    }

    .notification-symbol {
        font-size: 21px;
    }

    .notification-main strong {
        font-size: 13.5px;
    }
}

@media (max-width: 360px) {
    .notification-row {
        grid-template-columns: 45px minmax(0, 1fr) 8px;
        gap: 9px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .notification-avatar,
    .notification-symbol {
        width: 45px;
        height: 45px;
    }
}


/* ===== V4.5 — responder CONOCER desde Notificaciones ===== */

.notification-profile-actions {
    display: grid;
    gap: 9px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #ECEFF3;
}

.notification-profile-actions form {
    margin: 0;
}

.notification-meet-action,
.notification-chat-action,
.notification-buy-action {
    width: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 14px;
    border-radius: 13px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    transition:
        transform .14s ease,
        opacity .14s ease,
        background-color .14s ease;
}

.notification-meet-action {
    border: 1px solid var(--red);
    background: var(--red);
    color: #fff;
}

.notification-chat-action {
    border: 1px solid var(--blue);
    background: var(--blue);
    color: #fff;
}

.notification-buy-action {
    border: 1px solid #E0E4EA;
    background: #F7F8FA;
    color: #596579;
}

.notification-meet-action:hover,
.notification-chat-action:hover,
.notification-buy-action:hover {
    transform: translateY(-1px);
}

.notification-meet-action:active,
.notification-chat-action:active,
.notification-buy-action:active {
    transform: scale(.985);
}

.notification-meet-action:disabled {
    cursor: wait;
    opacity: .62;
    transform: none;
}

.notification-profile-action-status {
    margin: 0 !important;
    padding: 9px 11px;
    border-radius: 11px;
    font-size: 12px !important;
    font-weight: 750;
    line-height: 1.4 !important;
    text-align: center;
}

.notification-profile-action-status.is-success {
    border: 1px solid #BFE8CD;
    background: #F2FFF6;
    color: #116735 !important;
}

.notification-profile-action-status.is-error {
    border: 1px solid #EFC2C5;
    background: #FFF6F6;
    color: #8B1D25 !important;
}

.notification-heart-balance {
    display: block;
    color: var(--red);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.notification-profile-actions [hidden] {
    display: none !important;
}

@media (max-width: 620px) {
    .notification-profile-actions {
        margin-top: 15px;
        padding-top: 13px;
    }
}

/* ===== V4.5.3 — footer móvil más ancho ===== */

/*
 * Hasta 620px damos un poco más de aire al menú para que
 * "Notificaciones" activa entre mejor en negrita.
 */
@media (max-width: 620px) {
    .app-footer-nav {
        width: min(100%, 370px);
    }
}

/*
 * En pantallas muy angostas mantenemos un tope menor.
 */
@media (max-width: 360px) {
    .app-footer-nav {
        width: min(100%, 330px);
    }
}

/* ===== V4.5.5 — Notificaciones con ancho propio en desktop ===== */

/* ===== V4.6 — Perfil editable ===== */

/*
 * Mi Perfil conserva la foto grande, pero adopta el mismo lenguaje
 * visual de Discovery: margen interno y esquinas redondeadas.
 */
.self-profile-card {
    padding: 11px 11px 0;
}

.self-profile-photo {
    border-radius: 21px;
}

.self-profile-info {
    padding: 16px 11px 18px;
}

.profile-pending-photo {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 13px;
    padding: 11px 12px;
    border: 1px solid #E0E6F4;
    border-radius: 16px;
    background: #F7F9FF;
}

.profile-pending-photo > img {
    width: 62px;
    height: 62px;
    display: block;
    object-fit: cover;
    border-radius: 13px;
}

.profile-pending-photo strong {
    display: block;
    margin-bottom: 4px;
    color: #344054;
    font-size: 12.5px;
}

.profile-pending-photo p {
    margin: 0;
    color: #788397;
    font-size: 11.5px;
    line-height: 1.45;
}

.profile-edit-toggle {
    appearance: none;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    border: 1px solid #DCE2EC;
    border-radius: 14px;
    background: #FFFFFF;
    color: #344054;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 850;
    box-shadow: 0 5px 15px rgba(29, 42, 70, .05);
    transition:
        border-color .15s ease,
        color .15s ease,
        transform .15s ease,
        background-color .15s ease;
}

.profile-edit-toggle:hover {
    border-color: #C9D2E0;
    background: #FBFCFE;
    color: var(--blue);
}

.profile-edit-toggle:active {
    transform: scale(.99);
}

.profile-editor {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(222, 226, 233, .9);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--soft-shadow);
    scroll-margin-top: 15px;
}

.profile-editor[hidden] {
    display: none;
}

.profile-editor > h2 {
    margin: 0 0 16px;
    color: #222A37;
    font-size: 18px;
    letter-spacing: -.2px;
}

.profile-edit-errors {
    margin-bottom: 15px;
    padding: 12px 13px;
    border: 1px solid #EFC2C5;
    border-radius: 13px;
    background: #FFF6F6;
    color: #8B1D25;
    font-size: 12px;
    line-height: 1.45;
}

.profile-edit-errors > strong {
    display: block;
}

.profile-edit-errors ul {
    margin: 7px 0 0;
    padding-left: 18px;
}

.profile-edit-errors small {
    display: block;
    margin-top: 8px;
    opacity: .75;
    overflow-wrap: anywhere;
}

.profile-edit-form {
    display: grid;
    gap: 18px;
}

.profile-edit-grid {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 13px 12px;
}

.profile-field {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.profile-field-wide {
    grid-column: 1 / -1;
}

.profile-field > span,
.profile-photo-editor-heading > strong {
    color: #475467;
    font-size: 11.5px;
    font-weight: 850;
}

.profile-field input,
.profile-field select,
.profile-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #DDE2E9;
    border-radius: 12px;
    outline: none;
    background: #FAFBFC;
    color: #344054;
    font-family: inherit;
    font-size: 13.5px;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.profile-field input,
.profile-field select {
    min-height: 43px;
    padding: 0 12px;
}

.profile-field textarea {
    min-height: 92px;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.45;
}

.profile-field input:focus,
.profile-field select:focus,
.profile-field textarea:focus {
    border-color: rgba(25, 44, 173, .48);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(25, 44, 173, .08);
}

.profile-character-count {
    justify-self: end;
    margin-top: -2px;
    color: #98A2B3;
    font-size: 10px;
}

.profile-photo-editor {
    padding-top: 16px;
    border-top: 1px solid #ECEFF3;
}

.profile-photo-editor-heading {
    margin-bottom: 11px;
}

.profile-photo-editor-heading p {
    margin: 5px 0 0;
    color: #788397;
    font-size: 11.5px;
    line-height: 1.45;
}

.profile-photo-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px dashed #CCD4DF;
    border-radius: 14px;
    background: #FAFBFC;
}

.profile-photo-preview {
    width: 76px;
    height: auto;
    overflow: hidden;
    border-radius: 13px;
    background: #EEF1F5;
}

.profile-photo-preview[hidden] {
    display: none;
}

.profile-photo-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Preview de una foto vertical: marco cuadrado, imagen completa y laterales grises. */
.profile-photo-preview.is-portrait {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo-preview.is-portrait img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.profile-photo-picker-copy {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 7px;
}

.profile-photo-select {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--red);
    border-radius: 11px;
    background: #fff;
    color: var(--red);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 850;
}

#profile-photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.profile-photo-file-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #8A94A6;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 9px;
}

.profile-edit-cancel,
.profile-edit-save {
    min-height: 44px;
    border-radius: 13px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
}

.profile-edit-cancel {
    border: 1px solid #DDE2E9;
    background: #F8F9FB;
    color: #596579;
}

.profile-edit-save {
    border: 1px solid var(--red);
    background: var(--red);
    color: #fff;
}

.profile-edit-save:disabled {
    opacity: .6;
    cursor: wait;
}

@media (max-width: 620px) {
    .self-profile-card {
        padding: 10px 10px 0;
    }

    .self-profile-photo {
        border-radius: 20px;
    }

    .self-profile-info {
        padding: 15px 7px 17px;
    }

    .profile-editor {
        padding: 15px;
    }

    .profile-edit-grid {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 12px 10px;
    }

    .profile-photo-picker {
        grid-template-columns: 1fr;
    }

    .profile-photo-preview {
        width: 96px;
        height: 96px;
        justify-self: center;
    }

    .profile-photo-picker-copy {
        justify-items: center;
        text-align: center;
    }

    .profile-photo-file-name {
        width: 100%;
        text-align: center;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 620px) {
        .profile-field input,
        .profile-field select,
        .profile-field textarea {
            font-size: 16px;
        }
    }
}

@media (max-width: 360px) {
    .profile-editor {
        padding: 13px;
    }

    .profile-edit-grid {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .profile-edit-actions {
        grid-template-columns: 1fr;
    }

    .profile-edit-save {
        grid-row: 1;
    }
}

/* ===== V4.7 — Perfil: galería de hasta 6 fotos ===== */

.profile-pending-summary {
    grid-template-columns: 76px minmax(0, 1fr);
}

.profile-pending-stack {
    position: relative;
    width: 76px;
    height: 62px;
}

.profile-pending-stack img {
    position: absolute;
    top: 0;
    left: calc(var(--pending-index, 0) * 7px);
    width: 62px;
    height: 62px;
    display: block;
    object-fit: cover;
    border: 2px solid #fff;
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(29, 42, 70, .10);
}

.profile-photo-manager {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #ECEFF3;
}

.profile-photo-manager-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.profile-photo-manager-heading h3 {
    margin: 0;
    color: #222A37;
    font-size: 16px;
}

.profile-photo-manager-heading p {
    margin: 5px 0 0;
    color: #788397;
    font-size: 11.5px;
    line-height: 1.45;
}

.profile-photo-manager-heading > span {
    flex: 0 0 auto;
    min-width: 47px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #F2F4F7;
    color: #667085;
    font-size: 10.5px;
    font-weight: 850;
    text-align: center;
}

.profile-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.profile-photo-tile,
.profile-photo-add-tile {
    min-width: 0;
    border: 1px solid #E2E6ED;
    border-radius: 15px;
    background: #FAFBFC;
}

.profile-photo-tile {
    overflow: hidden;
}

.profile-photo-tile.is-pending {
    border-style: dashed;
    background: #F7F9FF;
}

.profile-photo-tile-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #EEF1F5;
}

/* Cuadradas y horizontales: ancho completo y alto proporcional. */
.profile-photo-tile-image > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Verticales: marco cuadrado, foto completa de arriba a abajo y laterales grises. */
.profile-photo-tile-image.is-portrait {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo-tile-image.is-portrait > img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.profile-photo-status,
.profile-photo-position {
    position: absolute;
    z-index: 2;
    top: 8px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

.profile-photo-status {
    right: 8px;
}

.profile-photo-position {
    left: 8px;
    background: rgba(255,255,255,.93);
    color: #475467;
}

.profile-photo-status.is-approved {
    background: rgba(236, 253, 243, .95);
    color: #147A42;
}

.profile-photo-status.is-pending {
    background: rgba(255, 248, 232, .96);
    color: #8A5A00;
}

.profile-photo-change-pending {
    margin: 0;
    padding: 7px 9px 0;
    color: #8A5A00;
    font-size: 9.5px;
    font-weight: 800;
    text-align: center;
}

.profile-photo-tile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 9px;
}

.profile-photo-tile-actions form {
    margin: 0;
}

.profile-photo-action {
    appearance: none;
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid #DDE2E9;
    border-radius: 10px;
    background: #fff;
    color: #596579;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 850;
}

.profile-photo-action:hover {
    border-color: #C8D0DC;
    color: #344054;
}

.profile-photo-action.is-danger {
    border-color: #F0CDD0;
    background: #FFF8F8;
    color: #B4232C;
}

.profile-photo-action.is-muted {
    color: #788397;
}

.profile-photo-add-tile {
    min-height: 170px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 15px;
    border-style: dashed;
    color: #667085;
    cursor: pointer;
    font-family: inherit;
}

.profile-photo-add-tile > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #EEF1F5;
    color: #475467;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
}

.profile-photo-add-tile > strong {
    font-size: 11px;
}

.profile-photo-add-tile:hover {
    border-color: #C9D2E0;
    background: #F8FAFD;
}

.profile-photo-limit-note {
    margin: 10px 0 0;
    color: #8A94A6;
    font-size: 10.5px;
    text-align: center;
}

.profile-photo-upload-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid #E0E6F0;
    border-radius: 15px;
    background: #F9FAFC;
}

.profile-photo-upload-form[hidden] {
    display: none;
}

.profile-photo-upload-heading strong {
    color: #344054;
    font-size: 12.5px;
}

.profile-photo-upload-heading p {
    margin: 4px 0 0;
    color: #788397;
    font-size: 10.5px;
    line-height: 1.4;
}

.profile-photo-upload-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 8px;
}

@media (max-width: 390px) {
    .profile-photo-grid {
        gap: 8px;
    }

    .profile-photo-tile-actions {
        grid-template-columns: 1fr;
    }

    .profile-photo-add-tile {
        min-height: 150px;
    }
}

/* ===== V4.8 — Perfil: cancelar reemplazo + ordenar fotos ===== */

.profile-photo-cancel-replacement {
    margin: 0;
    padding: 7px 9px 0;
}

.profile-photo-cancel-replacement .profile-photo-action {
    min-height: 31px;
    border-color: #E4D8B9;
    background: #FFFDF7;
    color: #8A5A00;
}

.profile-photo-cancel-replacement .profile-photo-action:hover {
    border-color: #D7C38F;
    background: #FFF9EA;
    color: #744B00;
}

.profile-photo-order-actions {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    align-items: stretch;
    margin: 8px 9px 0;
    padding: 7px;
    border: 1px solid #E5E9F0;
    border-radius: 11px;
    background: #F5F7FA;
}

.profile-photo-order-actions form {
    min-width: 0;
    margin: 0;
}

.profile-photo-order-arrow,
.profile-photo-order-primary {
    appearance: none;
    width: 100%;
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    border: 1px solid #DCE2EA;
    border-radius: 9px;
    background: #fff;
    color: #596579;
    font-family: inherit;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
}

.profile-photo-order-arrow {
    cursor: pointer;
    font-size: 16px;
    font-weight: 650;
}

.profile-photo-order-arrow:hover:not(:disabled),
.profile-photo-order-primary.is-button:hover {
    border-color: #C8D0DC;
    background: #fff;
    color: var(--blue);
}

.profile-photo-order-arrow:disabled {
    cursor: default;
    opacity: .28;
}

.profile-photo-order-primary {
    border-color: transparent;
    background: transparent;
    color: #667085;
}

button.profile-photo-order-primary.is-button {
    border-color: #DCE2EA;
    background: #fff;
    color: #475467;
    cursor: pointer;
}

.profile-photo-tile-actions > .profile-photo-action:only-child,
.profile-photo-tile-actions > form:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 390px) {
    .profile-photo-order-actions {
        grid-template-columns: 31px minmax(0, 1fr) 31px;
        gap: 5px;
        margin-left: 8px;
        margin-right: 8px;
        padding: 6px;
    }

    .profile-photo-order-arrow,
    .profile-photo-order-primary {
        min-height: 30px;
        font-size: 9.5px;
    }

    .profile-photo-order-arrow {
        font-size: 15px;
    }
}

/* ===== V4.9 — Perfil: foto rechazada conserva su slot ===== */

.profile-photo-tile.is-rejected {
    border-style: dashed;
    border-color: #F0CDD0;
    background: #FFF9F9;
}

.profile-photo-status.is-rejected {
    background: rgba(255, 238, 239, .96);
    color: #B4232C;
}

.profile-photo-tile.is-rejected .profile-photo-tile-actions {
    grid-template-columns: 1fr;
}



/* ===== V4.10 — color de respuesta al votar ===== */

/*
 * Igual que en la portal:
 * NO = azul, SÍ = verde, CONOCER = rojo.
 *
 * La versión autenticada envía el voto mediante formulario. Usamos
 * :active para que el color aparezca inmediatamente al presionar,
 * antes de que cargue el siguiente perfil, sin alterar el envío.
 */
.vote-circle {
    transition:
        background-color .12s ease,
        box-shadow .12s ease;
}

.vote-no:active .vote-circle {
    background: rgba(25, 44, 173, .16);
    box-shadow:
        0 0 0 8px rgba(25, 44, 173, .10),
        0 10px 26px rgba(25, 44, 173, .18);
}

.vote-yes:active .vote-circle {
    background: rgba(24, 168, 74, .16);
    box-shadow:
        0 0 0 8px rgba(24, 168, 74, .10),
        0 10px 26px rgba(24, 168, 74, .18);
}

.vote-meet:active .vote-circle {
    background: rgba(223, 15, 28, .16);
    box-shadow:
        0 0 0 8px rgba(223, 15, 28, .10),
        0 10px 26px rgba(223, 15, 28, .18);
}

/* ===== V5.0 — correcciones administrativas de Perfil ===== */

.profile-correction-summary {
    margin-top: 13px;
    padding: 13px 14px;
    border: 1px solid #F0C7CA;
    border-radius: 16px;
    background: #FFF7F7;
    color: #7E252B;
}

.profile-correction-summary > strong {
    display: block;
    color: #9B1C25;
    font-size: 13px;
}

.profile-correction-summary > p {
    margin: 5px 0 0;
    color: #7E5256;
    font-size: 11.5px;
    line-height: 1.45;
}

.profile-correction-summary ul {
    margin: 9px 0 0;
    padding-left: 18px;
}

.profile-correction-summary li,
.profile-correction-photo-line {
    margin-top: 5px;
    color: #703B3F;
    font-size: 11px;
    line-height: 1.45;
}

.profile-field.is-correction > span {
    color: #A62931;
}

.profile-field.is-correction input,
.profile-field.is-correction select,
.profile-field.is-correction textarea {
    border-color: #E3A7AC;
    background: #FFF9F9;
}

.profile-field.is-correction input:focus,
.profile-field.is-correction select:focus,
.profile-field.is-correction textarea:focus {
    border-color: #D26D75;
    box-shadow: 0 0 0 3px rgba(223, 15, 28, .08);
}

.profile-correction-reason {
    display: block;
    margin-top: 1px;
    color: #A12B33;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
}

/* Con Sexo + Mostrar, el editor queda equilibrado en dos columnas. */
.profile-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-photo-tile.is-blocked {
    border-style: dashed;
    border-color: #E6C18B;
    background: #FFFCF5;
}

.profile-photo-status.is-blocked {
    background: rgba(255, 247, 226, .97);
    color: #8A5A00;
}

.profile-photo-tile.is-blocked .profile-photo-tile-actions,
.profile-photo-tile.is-rejected .profile-photo-tile-actions {
    grid-template-columns: 1fr;
}

.profile-photo-moderation-reason {
    margin: 0;
    padding: 8px 10px 0;
    color: #8B3A40;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.profile-photo-tile.is-blocked .profile-photo-moderation-reason {
    color: #805B1C;
}

/* Notificaciones administrativas: toda la fila abre Mi Perfil. */
a.notification-row {
    color: inherit;
    text-decoration: none;
}

.notification-reason {
    display: block;
    color: #7B4A4E;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
}

.notification-profile-correction .notification-symbol,
.notification-photo-blocked .notification-symbol {
    background: #FFF4F4;
    color: var(--red);
}

@media (max-width: 620px) {
    .profile-edit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    .profile-edit-grid {
        grid-template-columns: 1fr;
    }

    .profile-field-wide {
        grid-column: auto;
    }
}

/* ===== V5.1 — Perfil: restaurar controles + girar fotos visibles ===== */

.profile-photo-rotate-actions {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    align-items: stretch;
    margin: 8px 9px 0;
    padding: 7px;
    border: 1px solid #E5E9F0;
    border-radius: 11px;
    background: #F5F7FA;
}

.profile-photo-rotate-actions form {
    min-width: 0;
    margin: 0;
}

.profile-photo-rotate-button,
.profile-photo-rotate-label {
    width: 100%;
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    border: 1px solid #DCE2EA;
    border-radius: 9px;
    background: #fff;
    color: #596579;
    font-family: inherit;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
}

.profile-photo-rotate-button {
    cursor: pointer;
    font-size: 17px;
    font-weight: 650;
}

.profile-photo-rotate-button:hover {
    border-color: #C8D0DC;
    color: var(--blue);
}

.profile-photo-rotate-button:active {
    transform: scale(.96);
}

.profile-photo-rotate-label {
    border-color: transparent;
    background: transparent;
    color: #667085;
}

@media (max-width: 390px) {
    .profile-photo-rotate-actions {
        grid-template-columns: 31px minmax(0, 1fr) 31px;
        gap: 5px;
        margin-left: 8px;
        margin-right: 8px;
        padding: 6px;
    }

    .profile-photo-rotate-button,
    .profile-photo-rotate-label {
        min-height: 30px;
        font-size: 9.5px;
    }

    .profile-photo-rotate-button {
        font-size: 16px;
    }
}



/* ===== V5.2 — Perfil: altura uniforme de campos ===== */

/*
 * Safari/macOS puede renderizar los <select> nativos más bajos aunque
 * tengan el mismo min-height que los inputs. Fijamos la altura real
 * para que Edad, Sexo, País y Mostrar queden visualmente iguales.
 */
.profile-field input,
.profile-field select {
    height: 43px;
    min-height: 43px;
}

/* ===== V5.2.2 — Perfil: selects con borde uniforme + flecha desplegable ===== */

/*
 * Safari/macOS aplica su apariencia nativa a los <select> y puede reducir
 * visualmente el radio de las esquinas. Quitamos esa apariencia y dibujamos
 * un único chevron hacia abajo para distinguirlos del campo numérico Edad.
 */
.profile-field select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 12px;
    padding-right: 34px;
    background-color: #FAFBFC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23596579' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}

.profile-field select:focus {
    background-color: #fff;
}


/* ===== V5.3 — cuentas desactivadas en Mensajes / Chat ===== */

.conversation-row.is-user-inactive .conversation-avatar {
    filter: grayscale(1);
    opacity: .72;
}

.conversation-user-inactive {
    color: #8A94A6 !important;
    font-style: italic;
    font-weight: 700 !important;
}

.chat-availability-notice {
    margin: 0;
    padding: 10px 13px;
    border-top: 1px solid var(--line);
    background: #F4F6F8;
    color: #667085;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    text-align: center;
}

.chat-availability-notice[hidden] {
    display: none;
}

.chat-availability-notice.is-deactivated {
    background: #F4F6F8;
    color: #596579;
}

.chat-composer.is-unavailable {
    opacity: .68;
}

@media (max-width: 620px) {
    .chat-availability-notice {
        padding-left: 11px;
        padding-right: 11px;
        font-size: 11.5px;
    }
}

/* ===== V5.4 — Opciones ===== */

.options-section {
    width: 100%;
}

.options-intro {
    margin: -3px 4px 20px;
    color: #788397;
    font-size: 13px;
    line-height: 1.5;
}

.options-group-heading {
    margin: 0 4px 9px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.options-account-heading {
    margin-top: 22px;
}

.options-card {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .85);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.options-card + .options-card {
    margin-top: 14px;
}

.options-item {
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
}

.options-item + .options-item {
    border-top: 1px solid var(--line);
}

.options-item-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #F2F4F7;
    color: #596579;
}

.options-item-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.options-item-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.options-item-copy strong {
    color: #344054;
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.25;
}

.options-item-copy small {
    color: #8A94A6;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
}

.options-danger-card {
    margin-top: 14px;
    border-color: #F0D6D8;
    box-shadow: 0 10px 26px rgba(120, 31, 39, .05);
}

.options-item-danger .options-item-icon {
    background: #FFF3F4;
    color: #B4232C;
}

.options-item-danger .options-item-copy strong {
    color: #9B1C25;
}

.options-item-delete .options-item-copy strong {
    color: var(--red);
}

@media (max-width: 620px) {
    .options-intro {
        margin-left: 3px;
        margin-right: 3px;
    }

    .options-group-heading {
        margin-left: 3px;
        margin-right: 3px;
    }

    .options-card {
        border-radius: 20px;
    }

    .options-item {
        min-height: 68px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 11px;
        padding: 11px 13px;
    }

    .options-item-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .options-item-icon svg {
        width: 21px;
        height: 21px;
    }

    .options-item-copy strong {
        font-size: 13px;
    }

    .options-item-copy small {
        font-size: 11px;
    }
}

/* ===== V5.5 — Opciones > Filtros ===== */

.options-item-link {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.options-item-link:hover {
    background: #F8FAFD;
}

.options-item-link:active {
    background: #F3F6FA;
}

.options-item-chevron {
    color: #A1A9B6;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
}

.filters-section {
    width: 100%;
}

.filters-feedback {
    margin: 0 0 13px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.filters-feedback.is-success {
    border: 1px solid #BFE8CD;
    background: #F2FFF6;
    color: #116735;
}

.filters-feedback.is-error {
    border: 1px solid #EFC2C5;
    background: #FFF6F6;
    color: #8B1D25;
}

.filters-card {
    display: grid;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(222, 226, 233, .85);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.filters-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.filters-fieldset legend,
.filters-control > span {
    display: block;
    margin: 0 0 7px;
    color: #475467;
    font-size: 11.5px;
    font-weight: 850;
}

.filters-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.filters-segmented label {
    position: relative;
    min-width: 0;
}

.filters-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.filters-segmented span {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid #DDE2E9;
    border-radius: 12px;
    background: #FAFBFC;
    color: #596579;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    transition:
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.filters-segmented input:checked + span {
    border-color: rgba(25, 44, 173, .32);
    background: #F1F3FF;
    color: var(--blue);
    box-shadow: 0 0 0 2px rgba(25, 44, 173, .05);
}

.filters-age-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.filters-control {
    min-width: 0;
    display: block;
}

.filters-control input,
.filters-control select {
    width: 100%;
    height: 43px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid #DDE2E9;
    border-radius: 12px;
    outline: none;
    background: #FAFBFC;
    color: #344054;
    font-family: inherit;
    font-size: 13.5px;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.filters-control select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23596579' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}

.filters-control input:focus,
.filters-control select:focus {
    border-color: rgba(25, 44, 173, .48);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(25, 44, 173, .08);
}

.filters-save {
    min-height: 44px;
    border: 1px solid var(--blue);
    border-radius: 13px;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    transition: transform .14s ease, opacity .14s ease;
}

.filters-save:hover {
    transform: translateY(-1px);
}

.filters-save:active {
    transform: scale(.99);
}

.filters-revisit-card {
    display: grid;
    gap: 11px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #E1E5EC;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(29, 42, 70, .05);
}

.filters-revisit-card strong {
    color: #344054;
    font-size: 13.5px;
}

.filters-revisit-card p {
    margin: 5px 0 0;
    color: #788397;
    font-size: 11.5px;
    line-height: 1.45;
}

.filters-revisit-card button {
    min-height: 42px;
    border: 1px solid #DDE2E9;
    border-radius: 12px;
    background: #F5F6F8;
    color: #8A94A6;
    cursor: not-allowed;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 850;
}

.filters-revisit-card small {
    color: #98A2B3;
    font-size: 10.5px;
    line-height: 1.4;
    text-align: center;
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 620px) {
        .filters-control input,
        .filters-control select {
            font-size: 16px;
        }
    }
}

@media (max-width: 620px) {
    .options-item-link {
        grid-template-columns: 40px minmax(0, 1fr) 17px;
    }

    .filters-card {
        padding: 15px;
        border-radius: 20px;
    }

    .filters-revisit-card {
        padding: 15px;
    }
}

@media (max-width: 360px) {
    .filters-age-grid {
        gap: 8px;
    }

    .filters-segmented {
        gap: 5px;
    }

    .filters-segmented span {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 11px;
    }
}

/* ===== V5.6 — Volver a mostrar perfiles vistos ===== */

.filters-revisit-card form {
    margin: 0;
}

.filters-revisit-card button {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(25, 44, 173, .28);
    border-radius: 12px;
    background: #F4F6FF;
    color: var(--blue);
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 900;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.filters-revisit-card button:hover {
    border-color: rgba(25, 44, 173, .42);
    background: #EEF1FF;
}

.filters-revisit-card button:active {
    transform: scale(.99);
}

/* ===== V5.7 — Opciones > Usuarios bloqueados ===== */

.blocked-section {
    width: 100%;
}

.blocked-list {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .85);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.blocked-row {
    min-height: 86px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: #fff;
}

.blocked-row + .blocked-row {
    border-top: 1px solid var(--line);
}

.blocked-avatar {
    width: 58px;
    height: 58px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #EEF1F5;
    color: #687386;
    font-size: 20px;
    font-weight: 900;
}

.blocked-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.blocked-name {
    min-width: 0;
    overflow: hidden;
    color: #344054;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blocked-name span {
    font-weight: 650;
}

.blocked-location,
.blocked-date,
.blocked-status {
    margin-top: 5px;
    color: #8A94A6;
    font-size: 10.5px;
    line-height: 1.3;
}

.blocked-status {
    color: #8A5A00;
    font-weight: 750;
}

.blocked-action {
    margin: 0;
}

.blocked-action button {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #DDE2E9;
    border-radius: 11px;
    background: #F8F9FB;
    color: #596579;
    cursor: pointer;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 850;
    white-space: nowrap;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.blocked-action button:hover {
    border-color: #CBD2DC;
    background: #F0F2F5;
    color: #344054;
}

.blocked-action button:active {
    transform: scale(.98);
}

.blocked-empty {
    padding-top: 42px;
    padding-bottom: 42px;
}

.blocked-empty-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #F2F4F7;
    color: #667085;
}

.blocked-empty-icon svg {
    width: 25px;
    height: 25px;
}

.blocked-empty h2 {
    margin: 12px 0 8px;
    color: #222A37;
    font-size: 20px;
}

@media (max-width: 620px) {
    .blocked-list {
        border-radius: 20px;
    }

    .blocked-row {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 10px 11px;
        min-height: 80px;
        padding: 11px 12px;
    }

    .blocked-avatar {
        width: 52px;
        height: 52px;
        font-size: 18px;
    }

    .blocked-action {
        grid-column: 2;
        justify-self: start;
        margin-top: -2px;
    }

    .blocked-action button {
        min-height: 33px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 360px) {
    .blocked-row {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 9px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .blocked-avatar {
        width: 48px;
        height: 48px;
    }
}

/* ===== V5.8 — Opciones > Notificaciones por email ===== */

.email-notifications-section {
    width: 100%;
}

.email-notifications-form {
    display: grid;
    gap: 14px;
}

.email-notifications-card {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .85);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.email-notification-row {
    min-height: 78px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 46px;
    gap: 12px;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    background: #fff;
}

.email-notification-row + .email-notification-row {
    border-top: 1px solid var(--line);
}

.email-notification-row:hover {
    background: #FBFCFE;
}

.email-notification-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #F2F4F7;
    color: #596579;
}

.email-notification-icon svg {
    width: 22px;
    height: 22px;
}

.email-symbol-heart {
    color: var(--red);
    font-size: 21px;
    line-height: 1;
}

.email-notification-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.email-notification-copy strong {
    color: #344054;
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.25;
}

.email-notification-copy small {
    color: #8A94A6;
    font-size: 11.5px;
    line-height: 1.4;
}

.email-switch {
    position: relative;
    width: 44px;
    height: 26px;
    justify-self: end;
}

.email-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.email-switch > span {
    position: absolute;
    inset: 0;
    border: 1px solid #D6DCE5;
    border-radius: 999px;
    background: #E9ECF1;
    transition:
        background-color .16s ease,
        border-color .16s ease;
}

.email-switch > span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(29, 42, 70, .18);
    transition: transform .16s ease;
}

.email-switch input:checked + span {
    border-color: var(--green);
    background: var(--green);
}

.email-switch input:checked + span::after {
    transform: translateX(18px);
}

.email-switch input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(25, 44, 173, .12);
}

.email-important-note {
    margin-top: 15px;
    padding: 14px 16px;
    border: 1px solid #E3E7ED;
    border-radius: 17px;
    background: #F8F9FB;
}

.email-important-note strong {
    color: #475467;
    font-size: 12px;
    font-weight: 850;
}

.email-important-note p {
    margin: 5px 0 0;
    color: #8A94A6;
    font-size: 10.8px;
    line-height: 1.45;
}

@media (max-width: 620px) {
    .email-notifications-card {
        border-radius: 20px;
    }

    .email-notification-row {
        min-height: 74px;
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        gap: 11px;
        padding: 11px 13px;
    }

    .email-notification-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .email-notification-icon svg {
        width: 21px;
        height: 21px;
    }

    .email-notification-copy strong {
        font-size: 13px;
    }

    .email-notification-copy small {
        font-size: 11px;
    }

    .email-switch {
        width: 42px;
        height: 25px;
    }

    .email-switch > span::after {
        width: 17px;
        height: 17px;
    }

    .email-switch input:checked + span::after {
        transform: translateX(17px);
    }
}

@media (max-width: 360px) {
    .email-notification-row {
        grid-template-columns: 38px minmax(0, 1fr) 42px;
        gap: 9px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .email-notification-icon {
        width: 38px;
        height: 38px;
    }
}

/* ===== V5.9 — Opciones > Idioma ===== */

.language-section {
    width: 100%;
}

.language-form {
    display: grid;
    gap: 14px;
}

.language-card {
    overflow: hidden;
    border: 1px solid rgba(222, 226, 233, .85);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--soft-shadow);
}

.language-row {
    position: relative;
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: 12px;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    background: #fff;
    transition: background-color .15s ease;
}

.language-row + .language-row {
    border-top: 1px solid var(--line);
}

.language-row:hover {
    background: #FBFCFE;
}

.language-row > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.language-flag {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #F2F4F7;
    font-size: 23px;
    line-height: 1;
}

.language-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.language-copy strong {
    color: #344054;
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.25;
}

.language-copy small {
    color: #8A94A6;
    font-size: 11.5px;
    line-height: 1.35;
}

.language-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    justify-self: end;
    border: 1.5px solid #CBD2DC;
    border-radius: 50%;
    background: #fff;
    transition:
        border-color .15s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}

.language-check > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background-color .15s ease;
}

.language-row > input:checked ~ .language-check {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(25, 44, 173, .07);
}

.language-row > input:checked ~ .language-check > span {
    background: var(--blue);
}

.language-row:has(> input:checked) {
    background: #FAFBFF;
}

.language-row > input:focus-visible ~ .language-check {
    box-shadow: 0 0 0 3px rgba(25, 44, 173, .12);
}

.language-note {
    margin-top: 15px;
}

@media (max-width: 620px) {
    .language-card {
        border-radius: 20px;
    }

    .language-row {
        min-height: 68px;
        grid-template-columns: 40px minmax(0, 1fr) 26px;
        gap: 11px;
        padding: 11px 13px;
    }

    .language-flag {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 22px;
    }

    .language-copy strong {
        font-size: 13px;
    }

    .language-copy small {
        font-size: 11px;
    }

    .language-check {
        width: 21px;
        height: 21px;
    }
}

/* ===== V6.0 — Opciones > Cambiar contraseña ===== */

.password-options-section {
    width: 100%;
}

.password-options-form {
    display: grid;
    gap: 14px;
}

.password-options-card {
    display: grid;
    gap: 15px;
    padding: 17px;
    border: 1px solid rgba(222, 226, 233, .85);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
}

.password-options-field {
    display: grid;
    gap: 7px;
}

.password-options-field > span {
    color: #344054;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
}

.password-options-field input {
    width: 100%;
    min-height: 47px;
    box-sizing: border-box;
    border: 1px solid #D2D8E2;
    border-radius: 12px;
    background: #fff;
    color: #202939;
    font: inherit;
    font-size: 16px;
    padding: 10px 12px;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.password-options-field input:focus {
    border-color: #7C89E5;
    box-shadow: 0 0 0 3px rgba(25, 44, 173, .08);
}

.password-options-help {
    margin: -3px 0 0;
    color: #8A94A6;
    font-size: 11.5px;
    line-height: 1.45;
}

.password-options-note {
    margin-top: 15px;
}

@media (max-width: 620px) {
    .password-options-card {
        gap: 14px;
        padding: 15px;
        border-radius: 20px;
    }

    .password-options-field input {
        min-height: 46px;
    }
}


/* ===== V5.9 — Opciones > Desactivar cuenta ===== */

.options-item-danger.options-item-link .options-item-chevron {
    color: #D18A90;
}

.deactivate-section {
    width: 100%;
}

.deactivate-card {
    padding: 22px 20px 20px;
    border: 1px solid #F0D6D8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(120, 31, 39, .06);
}

.deactivate-symbol {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 15px;
    background: #FFF3F4;
    color: #B4232C;
}

.deactivate-symbol svg {
    width: 25px;
    height: 25px;
}

.deactivate-card h2 {
    margin: 0;
    color: #344054;
    font-size: 17px;
    line-height: 1.3;
}

.deactivate-details {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.deactivate-details > div {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 11px 12px;
    border: 1px solid #ECEFF3;
    border-radius: 13px;
    background: #FAFBFD;
}

.deactivate-details span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #F2F4F7;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
}

.deactivate-details p {
    margin: 1px 0 0;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.5;
}

.deactivate-form {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid #ECEFF3;
}

.deactivate-actions {
    display: grid;
    grid-template-columns: .9fr 1.35fr;
    gap: 9px;
}

.deactivate-cancel,
.deactivate-confirm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 13px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.deactivate-cancel {
    border: 1px solid #DDE2E9;
    background: #F8F9FB;
    color: #596579;
}

.deactivate-cancel:hover {
    border-color: #CBD2DC;
    background: #F2F4F7;
}

.deactivate-confirm {
    border: 1px solid var(--red);
    background: var(--red);
    color: #fff;
    cursor: pointer;
}

.deactivate-confirm:hover {
    background: #C90D18;
    border-color: #C90D18;
}

.deactivate-cancel:active,
.deactivate-confirm:active {
    transform: scale(.985);
}

@media (max-width: 620px) {
    .deactivate-card {
        padding: 18px 15px 16px;
        border-radius: 20px;
    }

    .deactivate-details > div {
        padding: 10px 11px;
    }

    .deactivate-actions {
        grid-template-columns: 1fr;
    }

    .deactivate-confirm {
        grid-row: 1;
    }
}


/* ===== V6.1 — Reportar Chat: botón y modal ===== */
.chat-profile-actions { display: grid; gap: 9px; }
.chat-report-open {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #d8dde7;
    border-radius: 13px;
    background: #fafbfd;
    color: #4c586d;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    transition: background-color .14s ease, transform .14s ease;
}
.chat-report-open:hover { background: #f1f4f8; }
.chat-report-open:active { transform: scale(.985); }
.chat-report-dialog .app-dialog-card { max-height: min(90dvh, 800px); overflow-y: auto; }
.chat-report-dialog .app-dialog-card > p { margin: 10px 0 16px; }
.chat-report-reasons {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}
.chat-report-reasons legend,
.chat-report-details > span {
    margin-bottom: 8px;
    color: #394355;
    font-size: 12px;
    font-weight: 850;
}
.chat-report-reasons label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 37px;
    padding: 8px 10px;
    border: 1px solid #e0e5ee;
    border-radius: 11px;
    background: #fafbfd;
    color: #4e5a6b;
    font-size: 12px;
    cursor: pointer;
}
.chat-report-reasons input { flex: 0 0 auto; margin: 0; accent-color: #df0f1c; }
.chat-report-reasons label:has(input:checked) { border-color: #e8acb0; background: #fff7f8; color: #91252c; }
.chat-report-details { display: grid; gap: 6px; margin-top: 17px; text-align: left; }
.chat-report-details textarea {
    display: block;
    width: 100%;
    min-height: 80px;
    padding: 11px 12px;
    border: 1px solid #d6dee9;
    border-radius: 12px;
    resize: vertical;
    background: #fff;
    color: #344054;
    font: inherit;
    font-size: 16px; /* iOS: sin zoom */
    line-height: 1.4;
}
.chat-report-details textarea:focus { outline: 2px solid #eeb9bc; outline-offset: 1px; }
.chat-report-privacy { margin: 10px 0 0 !important; font-size: 11px !important; line-height: 1.45 !important; text-align: left; }
.chat-report-dialog .report-actions { margin-top: 17px; }
.chat-report-dialog .report-feedback { margin-top: 12px !important; }
.chat-flash.is-success { background: #f2fff6; border: 1px solid #bfe8cd; color: #116735; }
@media (max-width: 620px) {
    .chat-report-dialog .app-dialog-card { padding: 22px 15px 18px; }
    .chat-report-dialog .chat-report-reasons label { font-size: 12px; }
}

/* ===== V5.8 — compartir perfiles por permalink ===== */

.discover-profile-tools {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-share-wrap {
    position: relative;
    flex: 0 0 auto;
}

.profile-share-button {
    appearance: none;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F2F4F7;
    color: #596579;
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease,
        transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.profile-share-icon {
    width: 17px;
    height: 17px;
    display: block;
}

.profile-share-button:hover {
    background: #E9EDF3;
    color: #344054;
}

.profile-share-button:active {
    transform: scale(.94);
}

.profile-share-feedback {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    min-width: max-content;
    padding: 6px 9px;
    border: 1px solid #E1E5EB;
    border-radius: 9px;
    background: #fff;
    color: #596579;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(29, 42, 70, .14);
}

.profile-share-feedback[hidden] {
    display: none;
}

.shared-profile-voted {
    margin: 18px 8px 0;
    padding: 11px 13px;
    border: 1px solid #DEE3EA;
    border-radius: 13px;
    background: #F7F8FA;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 390px) {
    .discover-profile-tools {
        gap: 5px;
    }

    .discover-ranking {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 11px;
    }

    .profile-share-button {
        width: 26px;
        height: 26px;
    }

    .profile-share-icon {
        width: 16px;
        height: 16px;
    }
}


/* ===== V5.9 — compartir el perfil propio ===== */

.self-profile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.self-profile-actions .profile-edit-toggle {
    min-width: 0;
    margin-top: 0;
}

.self-profile-share-wrap {
    position: relative;
    min-width: 0;
}

.self-profile-share-button {
    appearance: none;
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #DCE2EC;
    border-radius: 14px;
    background: #FFFFFF;
    color: #344054;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1.1;
    box-shadow: 0 5px 15px rgba(29, 42, 70, .05);
    transition:
        border-color .15s ease,
        color .15s ease,
        transform .15s ease,
        background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.self-profile-share-button img {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
}

.self-profile-share-button:hover {
    border-color: #C9D2E0;
    background: #FBFCFE;
    color: var(--blue);
}

.self-profile-share-button:active {
    transform: scale(.99);
}

.self-profile-share-button:disabled {
    opacity: .5;
    cursor: default;
}

.self-profile-share-wrap .profile-share-feedback {
    top: calc(100% + 8px);
    right: 0;
}

@media (max-width: 360px) {
    .self-profile-actions {
        gap: 8px;
    }

    .self-profile-share-button,
    .self-profile-actions .profile-edit-toggle {
        font-size: 12px;
    }

    .self-profile-share-button {
        gap: 5px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .self-profile-share-button img {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }
}

/* ===== Footer público — mismo estilo que la portal ===== */

.public-site-footer {
    width: min(100%, 480px);
    margin: 18px auto 30px;
    padding: 0 20px;
    text-align: center;
    color: #687488;
    font-size: 12.5px;
    font-weight: 500;
}

.public-site-footer nav {
    margin-bottom: 8px;
    font-size: .85em;
}

.public-site-footer a,
.public-site-footer a:visited {
    color: inherit;
    text-decoration: none;
}

.public-site-footer p {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

@media (max-width: 390px) {
    .public-site-footer {
        font-size: 12px;
    }
}