:root {
    /*
        Nocturnas.cl — Fase II / L0B1A
        Identidad visual global.

        Importante:
        los colores de skins Premium NO viven en esta paleta.
        Se definen de forma independiente en premium_cards.css.
    */
    --brand-background: #0A0B0E;
    --brand-surface: #151922;
    --brand-primary: #6B2435;
    --brand-text: #F7F0E4;
    --brand-text-secondary: #C8BEB1;
    --brand-copper: #D19A6E;
    --brand-copper-bright: #E5B189;
    --brand-border: #2B3038;

    /*
        Estados semánticos: deliberadamente fuera de la paleta decorativa.
        Deben comunicar éxito/error de inmediato.
    */
    --semantic-success: #39FF88;
    --semantic-success-bg: rgba(57, 255, 136, 0.11);
    --semantic-success-border: rgba(57, 255, 136, 0.62);
    --semantic-danger: #FF4D5E;
    --semantic-danger-bg: rgba(255, 77, 94, 0.11);
    --semantic-danger-border: rgba(255, 77, 94, 0.64);

    --background: var(--brand-background);
    --surface: var(--brand-surface);
    --surface-hover: #1B202A;
    --surface-soft: #101319;
    --rail: #12161D;

    --border: var(--brand-border);
    --border-soft: rgba(43, 48, 56, 0.62);
    --border-strong: rgba(209, 154, 110, 0.46);

    --text: var(--brand-text);
    --text-soft: var(--brand-text-secondary);
    --text-muted: #8D867E;

    --accent: var(--brand-primary);
    --accent-soft: rgba(107, 36, 53, 0.18);
    --accent-copper: var(--brand-copper);
    --accent-copper-bright: var(--brand-copper-bright);

    --font-display:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    --font-ui:
        "Source Sans 3",
        "Segoe UI",
        Arial,
        sans-serif;

    --radius-lg: 24px;
    --radius-md: 17px;

    --page-width: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--background);
}

body {
    position: relative;
    margin: 0;
    min-height: 100vh;

    background: var(--background);

    color: var(--text);

    font-family: var(--font-ui);

    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        linear-gradient(
            rgba(10, 11, 14, 0.20),
            rgba(10, 11, 14, 0.20)
        ),
        url("/static/catalog/images/catalog-bg-veil-red.d627428a3d2b.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;

    opacity: 0.60;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.page-shell {
    position: relative;
    z-index: 1;

    width: min(
        calc(100% - 48px),
        var(--page-width)
    );

    min-height: 100vh;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------
   Barra superior
--------------------------------------------------------- */

.topbar {
    height: 72px;

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

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

.brand-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--text);

    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.025em;

    text-decoration: none;
}

.brand-mark {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--brand-primary);

    box-shadow:
        0 0 0 1px rgba(209, 154, 110, 0.22),
        0 0 20px rgba(107, 36, 53, 0.52);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location-switch {
    padding: 8px 12px;

    display: flex;
    align-items: center;
    gap: 8px;

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

    color: var(--text-soft);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.location-switch:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.adult-badge {
    padding: 8px 12px;

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

    color: var(--text-soft);

    font-size: 12px;
    font-weight: 600;
}

.visitor-auth-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.visitor-auth-link {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}

.visitor-auth-link:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(247, 240, 228, 0.035);
}

.visitor-auth-link-primary {
    border-color: rgba(209, 154, 110, 0.42);
    background: rgba(107, 36, 53, 0.34);
    color: var(--text);
}

.visitor-auth-link-primary:hover {
    transform: translateY(-1px);
    border-color: var(--accent-copper);
    background: rgba(107, 36, 53, 0.52);
}

.visitor-auth-link:focus-visible {
    outline: 2px solid var(--accent-copper);
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   Selección de ubicación
--------------------------------------------------------- */

.location-page {
    width: 100%;
    max-width: 860px;

    margin: auto;
    padding: 72px 0 88px;
}

.intro {
    max-width: 650px;
    margin-bottom: 52px;
}

/* L0D2U — la pantalla de contexto es una búsqueda, no un onboarding. */
.context-intro {
    margin-bottom: 30px;
}

.eyebrow {
    margin-bottom: 18px;

    color: var(--accent-copper);

    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.intro h1,
.catalog-header h1 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(42px, 7vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.038em;
    font-weight: 600;
}

.intro p,
.catalog-header p {
    max-width: 520px;

    margin: 25px 0 0;

    color: var(--text-soft);

    font-size: 17px;
    line-height: 1.65;
}

.section-heading {
    margin-bottom: 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-heading h2 {
    margin: 0;

    color: var(--text-soft);

    font-size: 13px;
    font-weight: 650;
}

.section-heading > span {
    color: var(--text-muted);
    font-size: 12px;
}

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

.location-card {
    min-height: 145px;
    padding: 21px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: var(--surface);

    text-decoration: none;

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

.location-card:hover {
    transform: translateY(-2px);

    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.location-card-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.location-name {
    font-size: 21px;
    font-weight: 680;
}

.location-parent {
    color: var(--text-soft);
    font-size: 13px;
}

.location-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.arrow {
    color: var(--text);
    font-size: 19px;

    transition: transform 160ms ease;
}

.location-card:hover .arrow {
    transform: translateX(3px);
}

/* ---------------------------------------------------------
   Catálogo
--------------------------------------------------------- */

.catalog-page {
    width: 100%;
    padding: 28px 0 90px;
}

.catalog-header {
    margin-bottom: 18px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.catalog-header h1 {
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1;
}

.catalog-count {
    min-width: 110px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.catalog-count strong {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.catalog-count span {
    color: var(--text-muted);
    font-size: 12px;
}

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

.profile-card {
    min-width: 0;
    overflow: hidden;

    display: block;

    border: 1px solid rgba(78, 84, 94, 0.78);
    border-radius: 18px;

    background:
        rgba(18, 22, 29, 0.96);

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

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

/* L0D2T — la tarjeta no cambia de posición al hacer hover.
   Así el corazón de like permanece exactamente bajo el cursor.
   La respuesta visual ocurre dentro del marco: medio, borde y profundidad. */
.profile-card:hover {
    border-color: rgba(159, 162, 169, 0.84);

    background:
        rgba(21, 25, 33, 0.98);

    box-shadow:
        0 17px 40px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(209, 154, 110, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.profile-card-primary {
    display: block;
    color: inherit;
    text-decoration: none;
}

.profile-card-primary:focus-visible,
.card-footer-link:focus-visible,
.card-profile-likes:focus-visible {
    outline: 2px solid rgba(247, 240, 228, 0.70);
    outline-offset: -2px;
}

.card-footer-link {
    color: inherit;
    text-decoration: none;
}

.profile-media {
    position: relative;

    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;

    background: var(--surface-soft);
}

.profile-photo {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 350ms ease;
}

.profile-card:hover .profile-photo {
    transform: scale(1.035);
}

.profile-media-empty {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color: var(--text-muted);

    font-size: 12px;
}

/*
   Las franjas son parte del marco, no cubren la fotografía.
   Se redujeron ~25% respecto de la versión anterior.
*/

.card-rail {
    width: 100%;

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

    background:
        rgba(18, 22, 29, 0.97);
}

.card-rail-top {
    height: 40px;
    padding: 0 15px;

    border-bottom:
        1px solid rgba(58, 64, 73, 0.74);
}

.card-rail-bottom {
    height: 42px;
    padding: 0 15px;

    border-top:
        1px solid rgba(58, 64, 73, 0.74);
}

.card-name {
    min-width: 0;
    overflow: hidden;

    color: var(--text);

    font-size: 16px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.018em;

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

.card-identity {
    flex: 0 0 auto;

    margin-left: 10px;

    color: rgba(200, 190, 177, 0.66);

    font-size: 15px;
    line-height: 1;
    font-weight: 500;
}

.profile-flag {
    flex: 0 0 auto;

    width: 31px;
    height: 23px;

    object-fit: cover;

    border-radius: 2px;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12);
}

.card-age {
    flex: 0 0 auto;

    min-width: 31px;

    color: var(--text);

    font-size: 21px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.035em;

    text-align: right;
}

.catalog-empty,
.empty-state {
    padding: 38px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    border: 1px dashed var(--border);
    border-radius: var(--radius-md);

    color: var(--text-muted);

    text-align: center;
}

.catalog-empty strong {
    color: var(--text-soft);
    font-size: 15px;
}

.catalog-empty span {
    font-size: 12px;
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */

.footer {
    min-height: 70px;

    margin-top: auto;

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

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

    color: var(--text-muted);
    font-size: 11px;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */


.catalog-search input:focus,
.geo-field select:focus {
    outline: none;
    border-color: var(--accent-copper);
    box-shadow: 0 0 0 3px rgba(209, 154, 110, 0.10);
}

.location-switch:focus-visible,
.catalog-submit:focus-visible,
.catalog-clear:focus-visible,
.filter-tag:focus-visible,
.filter-clear-all:focus-visible {
    outline: 2px solid var(--accent-copper);
    outline-offset: 2px;
}

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

@media (max-width: 760px) {
    .page-shell {
        width: calc(100% - 28px);
    }

    .topbar {
        height: 66px;
    }

    .adult-badge {
        padding: 7px 9px;
    }

    .visitor-auth-links {
        gap: 4px;
    }

    .visitor-auth-link {
        min-height: 32px;
        padding: 0 8px;
        font-size: 11px;
    }

    .location-page,
    .catalog-page {
        padding: 48px 0 64px;
    }

    .intro {
        margin-bottom: 40px;
    }

    .intro h1,
    .catalog-header h1 {
        font-size: clamp(40px, 13vw, 57px);
    }

    .intro p,
    .catalog-header p {
        font-size: 15px;
    }

    .location-grid {
        grid-template-columns: 1fr;
    }

    .location-card {
        min-height: 128px;
    }

    .catalog-header {
        margin-bottom: 20px;
        align-items: flex-start;
    }

    .catalog-count {
        align-items: flex-start;
    }

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

    .profile-card {
        border-radius: 18px;
    }

    .card-rail-top {
        height: 35px;
        padding: 0 12px;
    }

    .card-rail-bottom {
        height: 38px;
        padding: 0 12px;
    }

    .card-name {
        font-size: 14px;
    }

    .card-identity {
        margin-left: 8px;

        font-size: 14px;
    }

    .profile-flag {
        width: 29px;
        height: 21.75px;
    }

    .card-age {
        min-width: 29px;

        font-size: 21px;
    }

    .footer {
        padding: 20px 0;

        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

@media (max-width: 420px) {
    .location-switch {
        max-width: 150px;

        overflow: hidden;

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

/* L6A — contexto público y catálogo canónico provisional */
.guest-overlay-shell {
    position: relative;
    z-index: 1;

    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;

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

.guest-gate {
    position: relative;
    z-index: 2;

    width: min(100%, 560px);
    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: #151922;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(247, 240, 228, 0.025);
}


.guest-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 30px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.guest-account-links {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.guest-account-links a {
    min-height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-soft);
    background: rgba(247, 240, 228, 0.025);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.guest-account-links a:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.guest-account-links .guest-account-primary {
    border-color: rgba(209, 154, 110, 0.42);
    background: rgba(107, 36, 53, 0.34);
    color: var(--text);
}
.guest-gate h1 { margin: 8px 0 14px; }
.guest-gate p { color: var(--text-soft); line-height: 1.55; }
.guest-gate-actions { display: grid; gap: 10px; margin-top: 22px; }
.guest-legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.guest-legal-links a { color: var(--text-soft); font-size: 13px; }

.context-form { display: grid; gap: 18px; }
.context-card,
.catalog-controls {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(21, 25, 34, 0.86);
    backdrop-filter: blur(6px);
    padding: 14px 16px;
}
.context-card h2 { margin: 0 0 12px; }
.context-check { display: flex; gap: 9px; align-items: flex-start; }
.context-check input { margin-top: 3px; }
.viewing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.geo-levels { display: grid; gap: 12px; }
.geo-field { display: grid; gap: 7px; }
.geo-field > span { color: var(--text-soft); font-size: 12px; }
.geo-field select,
.catalog-search input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(27, 32, 42, 0.92);
    color: var(--text);
}
.context-submit { justify-self: start; }

.catalog-header-l6a { align-items: end; }
.catalog-controls { margin-bottom: 18px; }
.catalog-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}
.catalog-search { display: grid; gap: 7px; }
.catalog-search > span { color: var(--text-soft); font-size: 12px; }
.catalog-submit,
.catalog-clear {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border-radius: 10px;
    border: 1px solid rgba(209, 154, 110, 0.46);
    background: var(--brand-primary);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}

.catalog-submit:hover {
    transform: translateY(-1px);
    border-color: var(--accent-copper-bright);
    background: #7A2A3D;
}
.catalog-clear {
    border-color: var(--border);
    background: transparent;
    color: var(--text-soft);
}
.catalog-note { color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.catalog-filters { margin-top: 10px; }
.catalog-filters summary { cursor: pointer; font-weight: 700; }
.filter-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.filter-group {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}
.filter-group legend { padding: 0 6px; color: var(--text); font-size: 12px; font-weight: 700; }
.filter-group label { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 12px; color: var(--text-soft); }
.filter-submit { margin-top: 14px; }
.card-name-wrap { min-width: 0; }

.card-identifier-tab {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;

    width: max-content;
    max-width: 52%;
    min-height: 24px;
    padding: 4px 11px 5px 12px;

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

    border-right: 1px solid rgba(78, 84, 94, .72);
    border-bottom: 1px solid rgba(78, 84, 94, .72);
    border-radius: 0 0 10px 0;

    background: rgba(12, 14, 18, .82);
    backdrop-filter: blur(5px);
    color: var(--text-soft);

    font-size: 11px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: .01em;

    box-shadow: 0 5px 16px rgba(0, 0, 0, .20);
}
.card-bottom-left { min-width: 0; display: flex; align-items: center; gap: 7px; }
.card-location { color: var(--text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 0 8px;
}

.catalog-load-more-wrap[hidden] { display: none; }

.catalog-load-more {
    min-width: 150px;
    min-height: 42px;
    padding: 9px 22px;
    border: 1px solid var(--catalog-border, #2B3038);
    border-radius: 999px;
    background: #151922;
    color: #F7F0E4;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.catalog-load-more:hover,
.catalog-load-more:focus-visible {
    border-color: #D19A6E;
}

.catalog-load-more:disabled {
    cursor: wait;
    opacity: .6;
}

@media (max-width: 720px) {
    .catalog-search-row { grid-template-columns: 1fr 1fr; }
    .catalog-search { grid-column: 1 / -1; }
    .filter-groups { grid-template-columns: 1fr; }
    .filter-submit { width: 100%; position: sticky; bottom: 10px; }
}

/* L6A — controles canónicos adicionales */
.viewing-switch {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 13px;
    text-decoration: none;
}
.viewing-switch strong { color: var(--text); font-weight: 650; }
.viewing-switch > span:last-child { color: var(--accent-copper-bright); font-size: 11px; }
.catalog-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.filter-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.filter-tag,
.filter-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    background: rgba(247, 240, 228, 0.035);
    font-size: 11px;
    text-decoration: none;
}
.filter-clear-all { color: var(--accent-copper-bright); border-color: rgba(107, 36, 53, 0.52); }
.location-compatible-count { min-height: 18px; margin: 10px 0 0; color: var(--text-soft); font-size: 12px; }
@media (max-width: 720px) {
    .catalog-header-actions { width: 100%; justify-content: space-between; }
    .catalog-header-l6a { flex-wrap: wrap; gap: 18px; }
}

.board-novelty-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 999px;
    background: currentColor;
    vertical-align: middle;
}

/* ---------------------------------------------------------
   Fase II / L0B3 — Pizarra fija, minimizable y desplegable
--------------------------------------------------------- */

.catalog-board-widget {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;

    width: min(420px, calc(100vw - 36px));
    height: 54px;

    overflow: hidden;

    border: 1px solid rgba(209, 154, 110, 0.34);
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(18, 20, 26, 0.985),
            rgba(10, 11, 14, 0.99)
        );

    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.48),
        0 0 26px rgba(107, 36, 53, 0.12),
        inset 0 1px 0 rgba(247, 240, 228, 0.025);

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

.catalog-board-widget.is-open {
    height: min(720px, calc(100dvh - 36px));

    border-color: rgba(209, 154, 110, 0.48);

    box-shadow:
        0 26px 84px rgba(0, 0, 0, 0.56),
        0 0 34px rgba(107, 36, 53, 0.16),
        inset 0 1px 0 rgba(247, 240, 228, 0.03);
}

.catalog-board-widget-bar {
    position: relative;
    z-index: 3;

    width: 100%;
    height: 54px;
    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    border: 0;
    border-bottom: 1px solid transparent;

    background:
        linear-gradient(
            90deg,
            rgba(107, 36, 53, 0.17),
            rgba(21, 25, 34, 0.94) 42%,
            rgba(10, 11, 14, 0.97)
        );

    color: var(--text);

    cursor: pointer;

    text-align: left;

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

.catalog-board-widget.is-open .catalog-board-widget-bar {
    border-bottom-color: rgba(78, 84, 94, 0.56);

    background:
        linear-gradient(
            90deg,
            rgba(107, 36, 53, 0.20),
            rgba(21, 25, 34, 0.96) 44%,
            rgba(10, 11, 14, 0.985)
        );
}

.catalog-board-widget-bar:hover {
    background:
        linear-gradient(
            90deg,
            rgba(107, 36, 53, 0.25),
            rgba(24, 28, 37, 0.98) 44%,
            rgba(12, 13, 17, 0.99)
        );
}

.catalog-board-widget-bar:focus-visible {
    outline: 2px solid var(--accent-copper);
    outline-offset: -3px;
}

.catalog-board-widget-title {
    min-width: 0;

    display: flex;
    align-items: baseline;
    gap: 7px;
}

.catalog-board-widget-title strong {
    flex: 0 0 auto;

    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.02em;

    color: var(--text);
}

.catalog-board-widget-separator {
    flex: 0 0 auto;

    color: rgba(209, 154, 110, 0.58);

    font-size: 11px;
    line-height: 1;
}

.catalog-board-widget-location {
    min-width: 0;
    overflow: hidden;

    color: var(--accent-copper);

    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;

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

.catalog-board-widget-status {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.catalog-board-widget-count {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;

    display: inline-grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;

    background: #FF2F4F;
    color: #FFFFFF;
    box-shadow: 0 0 14px rgba(255, 47, 79, 0.46);

    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.catalog-board-widget-chevron {
    color: var(--accent-copper);

    font-size: 16px;
    line-height: 1;

    transition: transform 200ms ease;
}

.catalog-board-widget.is-open .catalog-board-widget-chevron {
    transform: rotate(180deg);
}

.catalog-board-frame-wrap {
    height: calc(100% - 54px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 140ms ease 40ms,
        visibility 0s linear 210ms;
}

.catalog-board-widget.is-open .catalog-board-frame-wrap {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 160ms ease 70ms,
        visibility 0s linear 0s;
}

.catalog-board-frame {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
    background: #0A0B0E;
}

.catalog-board-widget.has-new-posts:not(.is-open) {
    border-color: rgba(209, 154, 110, 0.52);

    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.48),
        0 0 24px rgba(107, 36, 53, 0.18),
        inset 0 1px 0 rgba(247, 240, 228, 0.025);
}

@media (max-width: 760px) {
    .catalog-board-widget {
        right: 10px;
        bottom: 10px;

        width: calc(100vw - 20px);

        border-radius: 16px;
    }

    .catalog-board-widget.is-open {
        height: min(78dvh, 720px);
    }
}

@media (max-width: 480px) {
    .catalog-board-widget {
        right: 0;
        bottom: 0;

        width: 100%;

        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
    }

    .catalog-board-widget.is-open {
        height: 82dvh;
    }
}


@media (max-width: 560px) {
    .topbar {
        height: auto;
        min-height: 66px;
        padding: 10px 0;
        gap: 10px;
    }

    .topbar-actions {
        gap: 6px;
    }

    .visitor-auth-link {
        padding: 0 7px;
    }

    .guest-account-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .brand-placeholder {
        font-size: 18px;
    }

    .visitor-auth-link {
        font-size: 10px;
        min-height: 30px;
    }

    .location-switch {
        display: none;
    }
}


.filter-chip-options { display:flex; flex-wrap:wrap; gap:7px; }
.filter-chip-choice,.filter-color-choice { position:relative; cursor:pointer; }
.filter-chip-choice input,.filter-color-choice input { position:absolute; opacity:0; pointer-events:none; }
.filter-chip-choice > .filter-chip-content { min-height:34px; padding:0 11px; display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; background:rgba(21,25,34,.72); color:var(--text-soft); font-size:11px; font-weight:650; }
.filter-chip-choice input:checked + .filter-chip-content { border-color:rgba(209,154,110,.62); background:rgba(107,36,53,.30); color:var(--text); }
.filter-color-options { display:flex; flex-wrap:wrap; gap:9px; }
.filter-color-swatch { width:31px; height:31px; display:block; border:2px solid rgba(247,240,228,.16); border-radius:50%; background:var(--filter-swatch); box-shadow:0 0 0 1px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,255,255,.08); transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease; }
.filter-color-choice:hover .filter-color-swatch { transform:scale(1.06); }
.filter-color-choice input:checked + .filter-color-swatch { border-color:var(--accent-copper-bright); box-shadow:0 0 0 2px rgba(209,154,110,.22),0 0 16px rgba(209,154,110,.18); }
.filter-color-choice input:focus-visible + .filter-color-swatch,.filter-chip-choice input:focus-visible + .filter-chip-content { outline:2px solid var(--accent-copper); outline-offset:2px; }

/* L0D2N — "Me da igual" ocupa una fila propia sobre las opciones reales. */
.filter-any-row {
    width:100%;
    margin:0 0 10px;
    display:flex;
    align-items:center;
}
.filter-any-choice {
    flex:0 0 auto;
}
.filter-any-choice > .filter-chip-content {
    min-height:31px;
    padding:0 10px;
    border-style:dashed;
    color:var(--text-muted);
    font-size:10px;
    font-weight:650;
}
.filter-any-choice input:checked + .filter-chip-content {
    border-style:solid;
    border-color:rgba(209,154,110,.46);
    background:rgba(209,154,110,.08);
    color:var(--text-soft);
}
.card-identity-icon { width:17px; height:17px; display:block; background:currentColor; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; mask-position:center; mask-repeat:no-repeat; mask-size:contain; }

.card-identity[data-identity="WOMAN"] { color:#E56F7B; }
.card-identity[data-identity="MAN"] { color:#78B9E8; }
.card-identity[data-identity="TRANS_WOMAN"],
.card-identity[data-identity="TRANS_MAN"] { color:#B98BE5; }
.card-identity[data-identity="OTHER"] { color:#F7F0E4; }


/* L0D2K — Quiero ver… / Que prefieran conocer… */
.context-viewing-choice { position:relative; align-items:stretch; }
.context-viewing-choice > input { position:absolute; opacity:0; pointer-events:none; }
.context-viewing-content { min-height:42px; padding:0 12px; display:flex; align-items:center; gap:9px; border:1px solid var(--border); border-radius:11px; background:rgba(27,32,42,.72); color:var(--text-soft); cursor:pointer; }
.context-viewing-choice > input:checked + .context-viewing-content { border-color:rgba(209,154,110,.58); background:rgba(107,36,53,.28); color:var(--text); }
.context-viewing-choice > input:focus-visible + .context-viewing-content { outline:2px solid var(--accent-copper); outline-offset:2px; }
.context-viewing-symbols,.filter-meeting-symbols { min-width:19px; display:inline-flex; align-items:center; justify-content:center; gap:2px; }
.context-viewing-symbol,.filter-meeting-symbol { display:none; width:17px; height:17px; background:currentColor; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; mask-position:center; mask-repeat:no-repeat; mask-size:contain; }
.context-viewing-women,.filter-meeting-women { -webkit-mask-image:url("/static/profiles/icons/identity-female.89e20e1020f0.svg"); mask-image:url("/static/profiles/icons/identity-female.89e20e1020f0.svg"); }
.context-viewing-men,.filter-meeting-men { -webkit-mask-image:url("/static/profiles/icons/identity-male.79390b9a8e2f.svg"); mask-image:url("/static/profiles/icons/identity-male.79390b9a8e2f.svg"); }
.context-viewing-trans,.filter-meeting-trans { -webkit-mask-image:url("/static/profiles/icons/identity-trans.ef59dc9ac133.svg"); mask-image:url("/static/profiles/icons/identity-trans.ef59dc9ac133.svg"); }
.context-viewing-choice input[data-code="WOMEN"] + .context-viewing-content .context-viewing-women,
.context-viewing-choice input[data-code="MEN"] + .context-viewing-content .context-viewing-men,
.context-viewing-choice input[data-code="TRANS"] + .context-viewing-content .context-viewing-trans,
.context-viewing-choice input[data-code="ALL"] + .context-viewing-content .context-viewing-women,
.context-viewing-choice input[data-code="ALL"] + .context-viewing-content .context-viewing-men,
.context-viewing-choice input[data-code="ALL"] + .context-viewing-content .context-viewing-trans,
.filter-meeting-choice input[data-code="WOMEN"] + .filter-chip-content .filter-meeting-women,
.filter-meeting-choice input[data-code="MEN"] + .filter-chip-content .filter-meeting-men,
.filter-meeting-choice input[data-code="TRANS"] + .filter-chip-content .filter-meeting-trans,
.filter-meeting-choice input[data-code="ALL"] + .filter-chip-content .filter-meeting-women,
.filter-meeting-choice input[data-code="ALL"] + .filter-chip-content .filter-meeting-men,
.filter-meeting-choice input[data-code="ALL"] + .filter-chip-content .filter-meeting-trans { display:block; }
.context-viewing-choice input[data-code="ALL"] + .context-viewing-content .context-viewing-symbol,
.filter-meeting-choice input[data-code="ALL"] + .filter-chip-content .filter-meeting-symbol { width:13px; height:13px; }

/* L0D2R — like persistente de modelo/perfil en tarjeta.
   Corazón cobrizo/dorado, independiente de los likes del medio. El relleno
   representa el like de la identidad actual; en la tarjeta propia se muestra
   activo de forma visual pero permanece no interactuable. */
.card-profile-likes {
    flex: 0 0 auto;
    min-width: 64px;
    height: 100%;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: rgba(200, 190, 177, 0.70);
    font: inherit;
    font-variant-numeric: tabular-nums;
    appearance: none;
}

button.card-profile-likes {
    cursor: pointer;
}

.card-profile-likes.is-readonly {
    cursor: default;
}

.card-profile-like-icon {
    width: 23px;
    height: 23px;
    overflow: visible;
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 130ms ease, fill 130ms ease, stroke 130ms ease;
}

.card-profile-like-count {
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

.card-profile-likes.is-liked {
    color: var(--accent-copper-bright);
}

.card-profile-likes.is-liked .card-profile-like-icon {
    fill: currentColor;
}

.profile-card-premium .card-profile-likes.is-liked {
    color: var(--premium-gold, #E8C76A);
}

button.card-profile-likes:hover .card-profile-like-icon {
    transform: scale(1.09);
}

.card-profile-likes:disabled {
    opacity: 0.58;
    cursor: wait;
}

@media (max-width: 720px) {
    .card-profile-likes {
        min-width: 58px;
        gap: 5px;
    }

    .card-profile-like-icon {
        width: 21px;
        height: 21px;
    }

    .card-profile-like-count {
        font-size: 14px;
    }
}


/* L0D2ZF — acceso visible al reglamento para visitantes */
.visitor-rules-link {
    position: relative;
    gap: 7px;
    border-color: rgba(229,177,137,.60) !important;
    color: var(--accent-copper-bright, #E5B189) !important;
    background: linear-gradient(135deg, rgba(107,36,53,.30), rgba(21,25,34,.72));
    box-shadow: 0 0 18px rgba(209,154,110,.10);
    animation: catalog-rules-glow 2.8s ease-in-out infinite;
}
.visitor-rules-link:hover {
    border-color: rgba(229,177,137,.90) !important;
    background: linear-gradient(135deg, rgba(107,36,53,.42), rgba(27,32,42,.90));
}
.visitor-rules-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    display: inline-block;
    background: currentColor;
    -webkit-mask: url("/static/profiles/icons/scroll.c37e17b7b4bd.svg") center / contain no-repeat;
    mask: url("/static/profiles/icons/scroll.c37e17b7b4bd.svg") center / contain no-repeat;
}
@keyframes catalog-rules-glow {
    0%, 100% { box-shadow: 0 0 14px rgba(209,154,110,.07); }
    50% { box-shadow: 0 0 26px rgba(209,154,110,.17); }
}
@media (prefers-reduced-motion: reduce) { .visitor-rules-link { animation: none; } }

@media (max-width: 560px) {
    .visitor-rules-link {
        width: 32px;
        padding: 0;
    }
    .visitor-rules-link > span:last-child { display: none; }
}



/* L0D2ZP · tarjetas y Pizarra móvil más compactas. */
.card-name-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.card-rail-top .card-top-meta {
    flex: 0 0 auto;
    min-width: max-content;
}

@media (max-width: 760px) {
    .catalog-board-widget {
        right: 50%;
        bottom: 0;
        width: min(300px, calc(100vw - 36px));
        border-width: 1px 1px 0;
        border-radius: 16px 16px 0 0;
        transform: translateX(50%);
        transition:
            width 180ms ease,
            height 210ms ease,
            border-color 160ms ease,
            box-shadow 160ms ease;
    }

    .catalog-board-widget.is-open {
        right: 0;
        width: 100%;
        height: 82dvh;
        border-width: 1px 0 0;
        transform: none;
    }
}


/* Perfiles showcase: muestras globales, claramente separadas de perfiles reales. */
.showcase-media-label {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 6px 12px;
    border: 1px solid rgba(247, 240, 228, 0.58);
    border-radius: 999px;
    background: rgba(10, 11, 14, 0.78);
    color: #F7F0E4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

/* Perfiles showcase: muestras globales, claramente separadas de perfiles reales. */
.showcase-media-label {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 6px 12px;
    border: 1px solid rgba(247, 240, 228, 0.58);
    border-radius: 999px;
    background: rgba(10, 11, 14, 0.78);
    color: #F7F0E4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

/* Visual review 05 — Pizarra closed tab: wine surface on catalog and profile. */
.catalog-board-widget:not(.is-open) .catalog-board-widget-bar {
    background: #6B2435;
    border-color: rgba(209, 154, 110, 0.28);
}
.catalog-board-widget:not(.is-open) .catalog-board-widget-bar:hover,
.catalog-board-widget:not(.is-open) .catalog-board-widget-bar:focus-visible {
    background: #76283B;
    border-color: rgba(209, 154, 110, 0.44);
}