/* =====================================================================
   Enfoque — Sistema de diseño
   Minimalista, blanco y negro, con un azul distintivo.
   Las fotografías son el único color; la interfaz se mantiene monocroma.
   ===================================================================== */

:root {
    --ink:        #0a0a0a;
    --ink-2:      #3d3d3d;
    --muted:      #767676;
    --line:       #e8e8e8;
    --surface:    #f6f6f6;
    --paper:      #ffffff;
    --blue:       #1652f0;
    --blue-600:   #0f3fcc;
    --blue-tint:  #eef2ff;

    --radius:     10px;
    --radius-sm:  8px;
    --radius-pill: 999px;

    --container:  1180px;
    --gap:        24px;

    --shadow-sm:  0 1px 2px rgba(10, 10, 10, .06);
    --shadow-md:  0 6px 24px rgba(10, 10, 10, .08);
    --shadow-soft: 0 1px 3px rgba(20, 30, 60, .04), 0 8px 24px -12px rgba(20, 30, 60, .10);
    --app-bg:     #f3f5fb;

    --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Footer siempre abajo: el body ocupa toda la altura y el main crece */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}
.section { padding-block: 72px; }
.section--tight { padding-block: 40px; }
.stack > * + * { margin-top: 16px; }
.text-muted { color: var(--muted); }
.eyebrow {
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 24px;
}
.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.28rem;
    letter-spacing: -.03em;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.brand__logo { height: 28px; width: auto; display: block; }
.brand .dot { color: var(--blue); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: .95rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a.is-active { color: var(--ink); }
.nav__sep { width: 1px; height: 22px; background: var(--line); margin-inline: 6px; }

/* ---------- Botones ---------- */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
    transition: transform .05s, background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--blue { --btn-bg: var(--blue); --btn-fg: #fff; color: #fff !important; }
.btn--blue:hover { background: var(--blue-600); color: var(--ink) !important; }
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 14px; font-size: .9rem; }
.btn--lg { padding: 14px 26px; font-size: 1rem; }

/* ---------- Formularios ---------- */
.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 7px;
}
.input, .select, .textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint);
}
.input--error { border-color: #d32f2f; }
.field__error { color: #d32f2f; font-size: .84rem; margin-top: 6px; display: block; }
.textarea { min-height: 120px; resize: vertical; }
.field-hint { color: var(--muted); font-size: .84rem; margin-top: 6px; }

/* Select con chevron propio (sin la flecha nativa del sistema) */
.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'%20fill='none'%20stroke='%23767676'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 8px;
}
.select:hover { border-color: #cfcfcf; }
.select:focus {
    /* Chevron azul al enfocar */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'%20fill='none'%20stroke='%231652f0'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
.select::-ms-expand { display: none; }
/* Placeholder del select (option sin valor) en gris */
.select:has(option[value=""]:checked) { color: var(--muted); }
.select option { color: var(--ink); }

/* Selector de rol (registro) */
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-option { position: relative; }
.role-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.role-option__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 16px;
    text-align: center;
    transition: border-color .15s, background .15s;
    height: 100%;
}
.role-option__card i { font-size: 1.4rem; color: var(--ink-2); }
.role-option__card strong { display: block; margin-top: 4px; font-size: .95rem; }
.role-option__card span { display: block; color: var(--muted); font-size: .82rem; }
.role-option input:checked + .role-option__card {
    border-color: var(--blue);
    background: var(--blue-tint);
}
.role-option input:focus-visible + .role-option__card { box-shadow: 0 0 0 3px var(--blue-tint); }

/* ---------- Alertas / flash ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: .92rem;
    margin-bottom: 20px;
}
.alert i { margin-top: 3px; }
.alert--success { background: #f0f7f1; border-color: #cfe6d4; color: #1e5b2c; }
.alert--error   { background: #fdf1f1; border-color: #f2cccc; color: #a52020; }

/* ---------- Auth (split layout con mosaico) ---------- */
.auth-split {
    display: grid; grid-template-columns: 1fr 1fr;
    height: 100vh; overflow: hidden;
}

/* Mosaico izquierdo — 3 columnas verticales animadas */
.auth-mosaic {
    position: relative;
    background: var(--surface); padding: 10px;
    overflow: hidden;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.auth-col {
    position: relative;
    height: calc(100vh - 20px);
    overflow: hidden;
}
.auth-col__inner {
    display: flex; flex-direction: column; gap: 10px;
}
.auth-col--up .auth-col__inner {
    animation: authScrollUp 40s linear infinite;
}
.auth-col--down .auth-col__inner {
    animation: authScrollDown 40s linear infinite;
}
.auth-col--slow .auth-col__inner {
    animation-duration: 55s;
}
@keyframes authScrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@keyframes authScrollDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

.auth-tile {
    border-radius: 14px; overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--paper);
    flex-shrink: 0;
}
.auth-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.auth-tile--stat {
    padding: 20px; color: #fff;
    display: flex; flex-direction: column;
    justify-content: flex-end; gap: 6px;
    aspect-ratio: 4/5;
}
.auth-tile--blue { background: var(--blue); }
.auth-tile--accent { background: linear-gradient(135deg, #1652f0, #6b46e5); }
.auth-tile--dark { background: #0a0a0a; }
.auth-tile__num {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 700; letter-spacing: -.03em;
    line-height: 1;
}
.auth-tile__label {
    font-size: .8rem;
    color: rgba(255,255,255,.85);
    line-height: 1.35;
}

/* Fade sutil arriba y abajo del mosaico */
.auth-mosaic__fade {
    position: absolute; left: 0; right: 0; height: 60px;
    pointer-events: none; z-index: 2;
}
.auth-mosaic__fade--top {
    top: 0;
    background: linear-gradient(to bottom, var(--surface), transparent);
}
.auth-mosaic__fade--bottom {
    bottom: 0;
    background: linear-gradient(to top, var(--surface), transparent);
}

/* Formulario derecho */
.auth-split__form {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 32px;
    background: var(--paper);
    overflow-y: auto;
}
.auth-split__content { width: 100%; max-width: 400px; }
.auth-split__topbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 40px;
}
.auth-split__topbar .text-muted { margin-left: auto; }
.auth-split__back {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); color: var(--ink-2);
    transition: border-color .15s, color .15s;
}
.auth-split__back:hover { border-color: var(--blue); color: var(--blue); }
.auth-split__body {}
.auth-split__title {
    font-family: var(--font-display);
    font-size: 1.7rem; font-weight: 700;
    letter-spacing: -.03em; margin-bottom: 4px;
}
.input--lg { padding: 14px 16px; font-size: .95rem; }

.remember-check {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: .88rem; color: var(--ink-2);
    margin: 4px 0 4px;
}
.remember-check input[type="checkbox"] {
    width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid var(--line); cursor: pointer;
    accent-color: var(--blue);
}

/* Auth minimal (forgot/reset) */
.auth-minimal {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
}
.auth-minimal__card {
    width: 100%; max-width: 420px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 16px; padding: 36px 32px;
}
.auth-minimal__title {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -.02em; margin: 16px 0 4px;
}

/* Ocultar header/footer del layout en auth */
body:has(.auth-split) .site-header,
body:has(.auth-split) .site-footer { display: none; }
body:has(.auth-split) main { padding: 0; }

@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-mosaic { display: none; }
    .auth-split__form { height: 100vh; padding: 32px 20px; }
}

/* ---------- Hero (landing) ---------- */
.hero { padding-block: 96px 64px; border-bottom: 1px solid var(--line); }
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    max-width: 15ch;
    letter-spacing: -.035em;
}
.hero h1 .accent { color: var(--blue); }
.hero p { font-size: 1.15rem; color: var(--ink-2); max-width: 46ch; margin-top: 20px; }

/* Barra de búsqueda del hero */
.search-bar {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1.4fr 1.2fr auto;
    gap: 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-md);
    max-width: 720px;
}
.search-bar .field-inline { display: flex; align-items: center; gap: 10px; padding-inline: 8px; }
.search-bar .field-inline i { color: var(--muted); }
.search-bar .field-inline input,
.search-bar .field-inline select {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding-block: 10px;
}
/* El select de la barra usa el chevron propio, no la flecha nativa */
.search-bar .field-inline select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 26px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'%20fill='none'%20stroke='%23767676'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 11px 7px;
}
.search-bar .field-inline select::-ms-expand { display: none; }

/* ---------- Hero v2 (abanico de fotos) ---------- */
.hero2 {
    position: relative;
    padding: 64px 0 56px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(60% 55% at 18% 30%, rgba(22, 82, 240, .14), transparent 65%),
        radial-gradient(60% 55% at 82% 35%, rgba(240, 160, 22, .14), transparent 65%),
        #fff;
}
/* El abanico se recorta individualmente, no el hero entero */
.hero2__fan { overflow: hidden; }
.hero2__title {
    font-size: clamp(2rem, 5vw, 3.3rem);
    letter-spacing: -.03em;
    max-width: 22ch;
    margin-inline: auto;
}
.hero2__sub {
    color: var(--ink-2);
    max-width: 52ch;
    margin: 16px auto 0;
    font-size: 1.05rem;
}
.hero2__fan {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 44px;
    height: 300px;
    pointer-events: none;
}
.hero2__card {
    width: 220px;
    aspect-ratio: 3 / 4;
    background: #fff;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 18px 44px -12px rgba(10, 10, 30, .28);
    flex-shrink: 0;
    overflow: hidden;
}
.hero2__card img, .hero2__ph { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.hero2__ph { display: grid; place-items: center; color: rgba(255,255,255,.85); font-size: 1.8rem; }
.hero2__ph--1 { background: linear-gradient(135deg, #35506b, #7fa3c2); }
.hero2__ph--2 { background: linear-gradient(135deg, #7c3f58, #d98a9e); }
.hero2__ph--3 { background: linear-gradient(135deg, #1652f0, #6b46e5); }
.hero2__ph--4 { background: linear-gradient(135deg, #3f6b4a, #8fbd9a); }
.hero2__ph--5 { background: linear-gradient(135deg, #6b5a3f, #c2ab7f); }
/* posiciones del abanico */
.hero2__card:nth-child(1) { transform: rotate(-10deg) translate(46px, 44px); z-index: 1; }
.hero2__card:nth-child(2) { transform: rotate(-5deg) translate(18px, 16px);  z-index: 2; }
.hero2__card:nth-child(3) { transform: none; z-index: 3; width: 240px; }
.hero2__card:nth-child(4) { transform: rotate(5deg) translate(-18px, 16px); z-index: 2; }
.hero2__card:nth-child(5) { transform: rotate(10deg) translate(-46px, 44px); z-index: 1; }

.hero2__search {
    position: relative;
    z-index: 5;
    margin: -34px auto 0;
    max-width: 760px;
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 12px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 18px 48px -16px rgba(10, 10, 30, .22);
}
.hero2__field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border-radius: 10px;
    padding: 12px 14px;
}
.hero2__field i { color: var(--blue); }
.hero2__field input, .hero2__field select {
    border: none; outline: none; background: transparent; width: 100%;
    appearance: none; -webkit-appearance: none; cursor: pointer;
}
.hero2__field input { cursor: text; }
.hero2__field select {
    padding-right: 22px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'%20fill='none'%20stroke='%23767676'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 11px 7px;
}
.hero2__popular { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero2__popular-label { font-weight: 600; font-size: .92rem; }
.hero2__popular .chips { justify-content: center; }
.hero2__popular .chip { background: #fff; }

@media (max-width: 860px) {
    .hero2__fan { height: 220px; }
    .hero2__card { width: 150px; }
    .hero2__card:nth-child(3) { width: 165px; }
    .hero2__card:nth-child(1), .hero2__card:nth-child(5) { display: none; }
    .hero2__search { grid-template-columns: 1fr; margin-top: -20px; }
}

/* ---------- Grilla de categorías ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip i { color: var(--muted); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.is-active i { color: #fff; }
.chip__count {
    background: var(--surface); color: var(--muted);
    font-size: .72rem; font-weight: 600;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
}
.chip:hover .chip__count { background: var(--line); }

/* ---------- Tarjetas del catálogo ---------- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 5 / 6;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface);
    transition: transform .2s, box-shadow .2s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 48px -14px rgba(10, 10, 30, .28); }
.pcard__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.pcard__placeholder {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #3d3d3d, #767676);
    color: rgba(255,255,255,.3);
    font-size: 2.6rem;
}
.pcard__glass {
    position: relative;
    z-index: 2;
    display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
    padding: 14px 16px 12px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,.25);
    color: #fff;
}
.pcard__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
    display: flex; align-items: center; gap: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.pcard__verified { color: var(--blue); font-size: .82rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.pcard__desc {
    font-size: .82rem;
    color: rgba(255,255,255,.88);
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__foot {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
}
.pcard__stat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .82rem; color: rgba(255,255,255,.85);
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.pcard__stat i { font-size: .78rem; }
.pcard__cta {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(255,255,255,.88);
    color: var(--ink);
    border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s;
}
.pcard:hover .pcard__cta { background: #fff; }
.pcard__fav {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    border: none; cursor: pointer;
    background: rgba(10,10,10,.35); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; transition: transform .2s, background .15s;
    opacity: 0;
}
.pcard:hover .pcard__fav, .pcard__fav--active { opacity: 1; }
.pcard__fav:hover { transform: scale(1.15); background: rgba(10,10,10,.5); }
.pcard__fav--active { color: #e53935; opacity: 1; }
.pcard__fav--active i { animation: heartPop .35s ease; }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Tabs de favoritos */
.fav-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.fav-tab {
    border: none; background: none; cursor: pointer;
    font: inherit; font-size: .92rem; font-weight: 500;
    color: var(--muted); padding: 10px 18px;
    border-bottom: 2px solid transparent;
    display: flex; align-items: center; gap: 8px;
    transition: color .15s, border-color .15s;
}
.fav-tab:hover { color: var(--ink-2); }
.fav-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.fav-tab__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--surface);
    font-size: .72rem; font-weight: 700; color: var(--ink-2);
}
.fav-tab.is-active .fav-tab__count { background: var(--blue-tint); color: var(--blue); }
.fav-panel--hidden { display: none; }

/* Masonry compacto para favoritos */
.feed-masonry--compact { column-count: 5; column-gap: 10px; }
.feed-masonry--compact .feed-card { margin-bottom: 10px; }
.feed-masonry--compact .feed-card__meta { padding: 8px 10px; }
.feed-masonry--compact .feed-card__avatar { width: 26px; height: 26px; font-size: .68rem; }
.feed-masonry--compact .feed-card__name { font-size: .8rem; }
.feed-masonry--compact .feed-card__like { width: 30px; height: 30px; font-size: .82rem; }
@media (max-width: 1024px) { .feed-masonry--compact { column-count: 4; } }
@media (max-width: 720px)  { .feed-masonry--compact { column-count: 3; } }
@media (max-width: 480px)  { .feed-masonry--compact { column-count: 2; } }

/* ---------- Estado vacío ---------- */
.empty {
    text-align: center;
    padding: 64px 24px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
}
.empty i { font-size: 2rem; color: var(--line); }
.empty h3 { color: var(--ink); margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--line);
    padding-block: 40px;
    margin-top: 40px;
    color: var(--muted);
    font-size: .9rem;
}
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Panel (dashboard) ---------- */
.app-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; background: var(--app-bg); }
.app-side {
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    background: var(--paper);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100vh;
}
.app-side .brand { margin-bottom: 22px; padding-inline: 8px; }
.side-sep { height: 1px; background: var(--line); margin: 0 8px 16px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 4px 12px; margin-top: 8px; }
.side-nav a, .side-nav-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-weight: 500;
    font-size: .94rem;
    transition: background .15s, color .15s;
}
.side-nav a i { width: 20px; text-align: center; color: var(--muted); font-size: 1rem; }
.side-nav a:hover { background: var(--surface); color: var(--ink); }
.side-nav a:hover i { color: var(--ink-2); }
.side-nav a.is-active {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(22, 82, 240, .55);
}
.side-nav a.is-active i { color: #fff; }
.side-nav__badge {
    margin-left: auto;
    background: var(--ink); color: #fff;
    font-size: .72rem; font-weight: 700;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
}
.side-nav a.is-active .side-nav__badge { background: rgba(255,255,255,.25); }
.app-side__foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }

/* Barra superior del panel */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 32px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.topbar__actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--ink-2); border: none; cursor: pointer;
    position: relative; transition: background .15s;
}
.icon-btn:hover { background: var(--line); }
.icon-btn .dot-alert { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e24b4a; border: 2px solid var(--paper); }
.user-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--surface); border-radius: var(--radius-pill);
    padding: 5px 12px 5px 6px; color: var(--ink); font-weight: 600; font-size: .92rem;
    transition: background .15s;
}
.user-chip:hover { background: var(--line); }
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .82rem; flex-shrink: 0;
}
.user-chip i { color: var(--muted); font-size: .78rem; }

.app-main { padding: 28px 32px 48px; background: var(--app-bg); }

.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; }

/* Tarjetas del panel */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-soft);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card__title { font-size: 1.1rem; font-weight: 600; }

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-soft);
}

/* Insignias de icono (recuadros pastel) */
.icon-badge {
    width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
}
.icon-badge--blue   { background: #eef2ff; color: #1652f0; }
.icon-badge--green  { background: #e7f6ee; color: #12a05c; }
.icon-badge--purple { background: #f0ecfe; color: #6b46e5; }
.icon-badge--amber  { background: #fef3e2; color: #e08a0b; }
.icon-badge--rose   { background: #fdeef0; color: #d6456a; }
.icon-badge--ink    { background: var(--surface); color: var(--ink); }

/* Layout de dos columnas del dashboard */
.dash { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.dash__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.dash__aside { display: flex; flex-direction: column; gap: 24px; }

/* Banner destacado */
.promo {
    position: relative; overflow: hidden;
    border-radius: 18px; padding: 32px 34px;
    background: linear-gradient(120deg, #1652f0 0%, #3f6bff 55%, #6b46e5 130%);
    color: #fff;
}
.promo h2 { color: #fff; font-size: 1.7rem; max-width: 18ch; }
.promo p { color: rgba(255,255,255,.85); margin-top: 8px; max-width: 44ch; font-size: .95rem; }
.promo .btn { margin-top: 20px; }
.btn--white { background: #fff; color: var(--blue); }
.btn--white:hover { background: #f0f3ff; }
.promo__glow { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.10); }
.promo__glow2 { position: absolute; right: 40px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); }
.promo__icon { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); font-size: 5rem; color: rgba(255,255,255,.16); }

/* Tarjetas de estadística con icono */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.stat {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 16px; padding: 20px; box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column; gap: 14px;
}
.stat__num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.stat__label { color: var(--muted); font-size: .86rem; }

/* Tarjeta de plan (estilo tarjeta bancaria) */
.plan-card {
    position: relative; overflow: hidden;
    border-radius: 18px; padding: 22px;
    background: linear-gradient(135deg, #1652f0 0%, #0f3fcc 100%);
    color: #fff; min-height: 190px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.plan-card__top { display: flex; align-items: center; justify-content: space-between; }
.plan-card__chip { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #ffd97a, #e0a020); }
.plan-card__brand { font-family: var(--font-display); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.plan-card__label { color: rgba(255,255,255,.75); font-size: .82rem; }
.plan-card__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 2px; }
.plan-card__glow { position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.10); }

/* Acciones rápidas */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px; border-radius: 12px; text-align: center;
    color: var(--ink-2); font-size: .78rem; font-weight: 500;
    transition: background .15s;
}
.qa:hover { background: var(--surface); color: var(--ink); }
.qa .icon-badge { width: 44px; height: 44px; }
.qa--soon { opacity: .5; cursor: not-allowed; }

.plan-tag {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: var(--radius-pill);
    font-size: .8rem; font-weight: 600;
}
.plan-tag--free { background: var(--surface); color: var(--ink-2); }
.plan-tag--premium { background: var(--blue); color: #fff; }

.notice-card {
    display: flex; align-items: flex-start; gap: 14px;
    border: 1px solid var(--line);
    border-radius: 14px; padding: 16px 18px; background: var(--paper);
    box-shadow: var(--shadow-soft);
}
.notice-card > i:first-child { color: var(--blue); font-size: 1.1rem; margin-top: 2px; }
.notice-card--link { text-decoration: none; color: inherit; align-items: center; transition: border-color .15s, background .15s, box-shadow .15s; }
.notice-card--link:hover { border-color: var(--blue); box-shadow: 0 8px 22px -10px rgba(22,82,240,.4); }
.notice-card--link > div { flex: 1; }
.notice-card__arrow { color: var(--muted); font-size: .9rem; margin-top: 0; }

/* ---------- Formulario de perfil ---------- */
.profile-form { display: flex; flex-direction: column; gap: 20px; max-width: 780px; }
.form-section {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}
.form-section__title {
    font-size: 1.15rem;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* Interruptor (switch) */
.switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
    position: relative; flex-shrink: 0;
    width: 46px; height: 26px; margin-top: 2px;
    background: var(--line); border-radius: var(--radius-pill);
    transition: background .18s;
}
.switch__thumb {
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    transition: transform .18s;
}
.switch input:checked + .switch__track { background: var(--blue); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--blue-tint); }
.switch__text { display: flex; flex-direction: column; gap: 2px; }
.switch__text strong { font-size: .95rem; }
.switch__text .text-muted { font-size: .85rem; }

/* Especialidades como casillas tipo chip */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.check-chip { position: relative; cursor: pointer; }
.check-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check-chip__box {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: .92rem;
    transition: border-color .15s, background .15s;
}
.check-chip__box > i:first-child { color: var(--muted); width: 18px; text-align: center; }
.check-chip__box > span { flex: 1; }
.check-chip__tick { color: var(--blue); opacity: 0; transition: opacity .15s; }
.check-chip input:checked + .check-chip__box { border-color: var(--blue); background: var(--blue-tint); }
.check-chip input:checked + .check-chip__box > i:first-child { color: var(--blue); }
.check-chip input:checked + .check-chip__box .check-chip__tick { opacity: 1; }
.check-chip input:focus-visible + .check-chip__box { box-shadow: 0 0 0 3px var(--blue-tint); }

.profile-form__actions { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; }

/* ---------- Material (galería) ---------- */
.uploader {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 30px 20px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--line); border-radius: 14px;
    background: var(--surface);
    transition: border-color .15s, background .15s;
}
.uploader:hover, .uploader.is-drag { border-color: var(--blue); background: var(--blue-tint); }
.uploader.is-drag { border-style: solid; }
.uploader > i { font-size: 1.8rem; color: var(--blue); }
.uploader strong { font-size: .98rem; }
.uploader span { font-size: .84rem; }
.uploader__foot { margin-top: 12px; }
.uploader__previews { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.uploader__previews img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.uploader__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .9rem; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.media-item {
    position: relative;
    border-radius: 12px; overflow: visible; background: var(--paper);
    border: 1px solid var(--line);
}
.media-item img, .media-item .lazy {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    display: block; border-radius: 11px 11px 0 0;
}
.media-item__ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 2rem; }
.media-item__actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.media-item__actions button {
    width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
    border: none; background: rgba(10,10,10,.6); color: #fff; font-size: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s, background .15s;
}
.media-item:hover .media-item__actions button { opacity: 1; }
.media-item__actions .del-form button:hover { background: #d32f2f; }
.media-item__actions .card-form button:hover { background: var(--blue); }
.media-item--card { outline: 2px solid var(--blue); outline-offset: -2px; }
.media-item.is-dragging { opacity: .35; }
.media-item--placeholder { border: 2px dashed var(--blue); background: var(--blue-tint); border-radius: 12px; }
.media-item[draggable="true"] { cursor: grab; }
.media-item[draggable="true"]:active { cursor: grabbing; }
.media-item__card-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 3px 8px; border-radius: 6px;
    background: var(--blue); color: #fff;
    font-size: .66rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 4px;
}
.media-item__cat-badge {
    position: absolute; bottom: 6px; right: 6px;
    padding: 3px 8px; border-radius: 6px;
    background: rgba(10,10,10,.6); color: #fff;
    font-size: .68rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* Dropdown de categoría con íconos */
.cat-drop { position: relative; }
.cat-drop__trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 8px 12px;
    border: none; border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    background: var(--paper); font: inherit; font-size: .78rem;
    color: var(--ink-2); cursor: pointer; text-align: left;
    transition: background .15s;
}
.cat-drop__trigger:hover { background: var(--surface); }
.cat-drop__trigger i:first-child { font-size: .85rem; width: 18px; text-align: center; flex-shrink: 0; }
.cat-drop__trigger span { flex: 1; }
.cat-drop__arrow { font-size: .6rem; color: var(--muted); transition: transform .2s; margin-left: auto; }
.cat-drop.is-open .cat-drop__arrow { transform: rotate(180deg); }

.cat-drop__menu {
    display: none; position: absolute; top: 100%; left: 0;
    z-index: 55; margin-top: 2px;
    min-width: 200px; width: max-content;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 12px; padding: 5px;
    box-shadow: 0 10px 32px -8px rgba(10,10,30,.2);
    max-height: 240px; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.1) transparent;
}
.cat-drop__menu::-webkit-scrollbar { width: 4px; }
.cat-drop__menu::-webkit-scrollbar-track { background: transparent; }
.cat-drop__menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }
.cat-drop__menu::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }
.cat-drop.is-open .cat-drop__menu { display: block; }

.cat-drop__opt {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px;
    border: none; background: none; cursor: pointer;
    font: inherit; font-size: .85rem; color: var(--ink-2);
    border-radius: 8px; text-align: left;
    white-space: nowrap;
    transition: background .1s;
}
.cat-drop__opt:hover { background: var(--surface); }
.cat-drop__opt--active { color: var(--blue); font-weight: 600; background: var(--blue-tint); }
.cat-drop__opt i { font-size: .9rem; width: 20px; text-align: center; flex-shrink: 0; }
.media-item__del { position: absolute; top: 6px; right: 6px; }
.media-item__play {
    position: absolute; inset: 0; margin: auto;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(10,10,10,.55); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.media-item__tag {
    position: absolute; bottom: 8px; left: 8px;
    width: 26px; height: 26px; border-radius: 7px;
    background: rgba(255,255,255,.92); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; font-size: .8rem;
}
.video-form__row { display: flex; gap: 10px; }
.video-form__row .input { flex: 1; }

/* Imágenes de perfil (portada + avatar) */
.field-label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 7px; }
.cover-upload { display: block; cursor: pointer; }
.cover-upload__preview { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/6; background: var(--surface); }
.cover-upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-upload__empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.cover-upload__btn { position: absolute; right: 12px; bottom: 12px; background: rgba(10,10,10,.65); color: #fff; padding: 7px 12px; border-radius: 8px; font-size: .82rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; transition: background .15s; }
.cover-upload:hover .cover-upload__btn { background: var(--blue); }

.avatar-upload { display: flex; align-items: center; gap: 16px; }
.avatar-upload__pic { position: relative; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid var(--line); background: var(--surface); flex-shrink: 0; display: block; }
.avatar-upload__pic img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload__empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.3rem; }
.avatar-upload__cam { position: absolute; right: 4px; bottom: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .72rem; border: 2px solid var(--paper); }

.tips { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.tips li { display: flex; gap: 11px; font-size: .9rem; color: var(--ink-2); }
.tips li i { color: var(--blue); margin-top: 3px; width: 18px; text-align: center; }

/* Portafolio en el perfil público */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.portfolio-item { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface); border: 1px solid var(--line); }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.portfolio-item:hover img { transform: scale(1.04); }

/* Filtros de portafolio */
.portfolio-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.portfolio-filters .chip { cursor: pointer; border: none; font: inherit; transition: background .15s, color .15s; }
.portfolio-item[hidden], .sc-feed__item[hidden] { display: none; }

/* ---------- Destacados (historias) ---------- */
.hl-form__row { display: flex; align-items: flex-start; gap: 16px; }
.hl-form__upload { cursor: pointer; flex-shrink: 0; }
.hl-form__preview {
    width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
    border: 2px dashed var(--line); background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 1.2rem;
    transition: border-color .15s;
}
.hl-form__upload:hover .hl-form__preview { border-color: var(--blue); }
.hl-form__preview img { width: 100%; height: 100%; object-fit: cover; }
.hl-form__fields { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }

.hl-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.hl-item { position: relative; text-align: center; width: 80px; }
.hl-item__ring {
    width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--line); background: var(--surface);
    margin: 0 auto 6px;
}
.hl-item__ring img { width: 100%; height: 100%; object-fit: cover; }
.hl-item__title { font-size: .76rem; color: var(--ink-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-item__del {
    position: absolute; top: -4px; right: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    border: none; background: #e53935; color: #fff;
    font-size: .65rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
}
.hl-item:hover .hl-item__del { opacity: 1; }

/* Círculos en el perfil público */
.hl-circles {
    display: flex; gap: 18px; overflow-x: auto;
    padding: 4px 0 12px; margin-bottom: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.hl-circles::-webkit-scrollbar { display: none; }
.hl-circle {
    border: none; background: none; cursor: pointer; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex-shrink: 0; width: 76px; scroll-snap-align: start;
}
.hl-circle__ring {
    width: 68px; height: 68px; border-radius: 50%; overflow: hidden;
    padding: 3px;
    background: linear-gradient(135deg, var(--blue), #6b46e5, #e53935);
}
.hl-circle__ring img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 50%; border: 2px solid var(--paper);
}
.hl-circle__label { font-size: .72rem; color: var(--ink-2); max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-circle:hover .hl-circle__ring { transform: scale(1.08); }
.hl-circle__ring { transition: transform .2s; }

/* Visor de historia (pantalla completa) */
.story-viewer {
    position: fixed; inset: 0; z-index: 1000;
    background: #000;
    display: none;
    flex-direction: column;
    align-items: center; justify-content: center;
}
.story-viewer.is-open {
    display: flex;
}
.story-viewer__bars {
    position: absolute; top: 12px; left: 16px; right: 16px;
    display: flex; gap: 4px; z-index: 3;
}
.story-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.story-bar__fill { height: 100%; width: 0; background: #fff; border-radius: 3px; }
.story-viewer__close {
    position: absolute; top: 28px; right: 16px; z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.15); color: #fff;
    font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.story-viewer__close:hover { background: rgba(255,255,255,.3); }
.story-viewer__profile {
    position: absolute; top: 28px; left: 16px; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none;
    padding: 6px 14px 6px 6px; border-radius: 999px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background .15s;
}
.story-viewer__profile:hover { background: rgba(255,255,255,.28); }
.story-viewer__profile-name { font-weight: 600; font-size: .88rem; }
.story-viewer__profile-link { font-size: .75rem; color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 4px; }
.story-viewer__img-wrap {
    position: relative; max-width: 420px; width: 100%;
    max-height: calc(100vh - 80px); cursor: pointer;
}
.story-viewer__img {
    width: 100%; height: auto; max-height: calc(100vh - 80px);
    object-fit: contain; border-radius: 12px;
    animation: storyFadeIn .25s ease;
}
@keyframes storyFadeIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.story-viewer__title {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 32px 20px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    color: #fff; font-weight: 600; font-size: 1rem;
    border-radius: 0 0 12px 12px;
}
.story-viewer__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff;
    font-size: 1rem; cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center;
}
.story-viewer__nav:hover { background: rgba(255,255,255,.25); }
.story-viewer__prev { left: 16px; }
.story-viewer__next { right: 16px; }

@media (max-width: 640px) {
    .story-viewer__img-wrap { max-width: 100%; }
    .story-viewer__nav { display: none; }
}

/* ---------- Feed público ---------- */
.feed-page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.feed-hero {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    margin-bottom: 28px; flex-wrap: wrap;
}
.feed-hero__title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.feed-hero__sub { color: var(--muted); font-size: .95rem; margin-top: 4px; }
.feed-hero__sorts { display: flex; gap: 8px; }
.feed-hero__sorts .chip { text-decoration: none; }

/* Historias */
.feed-stories {
    background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
    padding: 20px; margin-bottom: 28px;
}
.feed-stories__head { display: flex; align-items: center; margin-bottom: 14px; }
.feed-stories__title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.feed-stories__title i { color: #f5a623; }
.feed-stories__scroll {
    display: flex; gap: 16px; overflow-x: auto;
    padding: 4px 0 6px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.feed-stories__scroll::-webkit-scrollbar { display: none; }
.feed-story {
    border: none; background: none; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex-shrink: 0; width: 72px; scroll-snap-align: start;
}
.feed-story__ring {
    display: block; width: 66px; height: 66px; border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(135deg, var(--blue), #6b46e5, #e53935);
    transition: transform .2s;
}
.feed-story:hover .feed-story__ring { transform: scale(1.06); }
.feed-story__ring img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 50%; border: 2px solid var(--paper);
    display: block;
}
.feed-story__initial {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--paper); background: var(--surface);
    font-weight: 700; color: var(--ink-2);
}
.feed-story__label {
    font-size: .72rem; color: var(--ink-2);
    max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Masonry */
.feed-masonry {
    column-count: 4;
    column-gap: 14px;
}
@media (max-width: 1024px) { .feed-masonry { column-count: 3; } }
@media (max-width: 720px)  { .feed-masonry { column-count: 2; } }
@media (max-width: 480px)  { .feed-masonry { column-count: 1; } }

.feed-card {
    break-inside: avoid;
    margin-bottom: 14px;
    border-radius: 14px; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line);
    transition: transform .2s, box-shadow .2s;
    opacity: 0; transform: translateY(20px);
}
.feed-card.is-visible {
    opacity: 1; transform: none;
    transition: opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1);
}
.feed-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feed-card__img { display: block; position: relative; overflow: hidden; }
.feed-card__img > a { display: block; }
.feed-card__img img {
    width: 100%; height: auto; display: block;
    transition: transform .35s;
    cursor: zoom-in;
}
.feed-card__img:hover img { transform: scale(1.03); }
.feed-card__cat {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(10,10,10,.6); color: #fff;
    font-size: .7rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}
.feed-card__like {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    border: none; cursor: pointer;
    background: rgba(255,255,255,.9); color: var(--muted);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; transition: transform .2s, color .15s;
    opacity: 0;
}
.feed-card:hover .feed-card__like, .feed-card__like--active { opacity: 1; }
.feed-card__like:hover { transform: scale(1.12); color: #e53935; }
.feed-card__like--active { color: #e53935; background: rgba(255,255,255,.95); }
.feed-card__like--active i { animation: heartPop .35s ease; }
.feed-card__likes {
    display: flex; align-items: center; gap: 4px;
    font-size: .78rem; color: #e53935; margin-left: auto; flex-shrink: 0;
}
.feed-card__likes i { font-size: .7rem; }
.feed-card__meta {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    color: var(--ink-2);
}
.feed-card__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem; color: var(--ink-2);
    flex-shrink: 0;
}
.feed-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.feed-card__name {
    flex: 1; font-weight: 600; font-size: .88rem;
    display: flex; align-items: center; gap: 5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Planes / suscripción ---------- */
.plans-page { max-width: 820px; }
.plans-active {
    text-align: center; padding: 32px; margin-bottom: 32px;
    background: linear-gradient(135deg, var(--blue-tint), rgba(107,70,229,.08));
    border-radius: 16px;
}
.plans-active__icon { font-size: 2rem; color: #f5a623; margin-bottom: 12px; }
.plans-active h2 { font-size: 1.3rem; }

.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plan-box {
    position: relative;
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 18px;
    padding: 28px 24px; background: var(--paper);
    transition: border-color .15s, box-shadow .15s;
}
.plan-box--premium { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow-md); }
.plan-box--current { background: var(--surface); }
.plan-box__badge {
    position: absolute; top: -10px; left: 24px;
    padding: 4px 14px; border-radius: 999px;
    font-size: .76rem; font-weight: 600;
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--line);
}
.plan-box__badge--rec { background: var(--blue); color: #fff; border-color: var(--blue); }
.plan-box__head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan-box__name { font-size: 1.1rem; margin-bottom: 8px; }
.plan-box__amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; }
.plan-box__period { color: var(--muted); font-size: .92rem; margin-left: 2px; }
.plan-box__features { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.plan-box__features li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45; }
.plan-box__features li i { margin-top: 3px; font-size: .8rem; color: #12a05c; flex-shrink: 0; }
.plan-box__feat--no { color: var(--muted); }
.plan-box__feat--no i { color: var(--muted); }

@media (max-width: 640px) { .plans-grid { grid-template-columns: 1fr; } }
.video-embed { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Estrellas y reseñas ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; color: #f5a623; }
.stars--sm { font-size: .72rem; }
.stars--sm .stars__avg, .stars--sm .stars__count { font-size: .72rem; }
.stars--md { font-size: .95rem; }
.stars__avg { color: var(--ink); font-weight: 600; margin-left: 4px; }
.stars__count { color: var(--muted); margin-left: 2px; }
/* estrellas dentro de tarjetas glass */
.pcard__foot .stars { filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.pcard__foot .stars__avg { color: #fff; }
.pcard__foot .stars__count { color: rgba(255,255,255,.7); }

.reviews-section { margin-top: 40px; }
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.reviews-summary { display: flex; align-items: center; gap: 8px; }
.reviews-summary__text { color: var(--muted); font-size: .9rem; }

.reviews-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.review-card {
    border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; background: var(--paper);
}
.review-card--new { animation: fadeSlideIn .3s ease; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.review-card__head { display: flex; align-items: center; gap: 12px; }
.review-card__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--surface); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.review-card__name { font-weight: 600; font-size: .95rem; display: block; }
.review-card__date { color: var(--muted); font-size: .8rem; }
.review-card__stars { margin-left: auto; color: #f5a623; font-size: .85rem; }
.review-card__comment { color: var(--ink-2); font-size: .92rem; line-height: 1.65; margin-top: 10px; }

.review-form-wrap { margin-top: 24px; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.review-stars-input { display: flex; align-items: center; gap: 12px; }
.review-stars-input span { font-size: .9rem; font-weight: 500; }
.star-picker { display: inline-flex; gap: 4px; }
.star-btn {
    border: none; background: none; cursor: pointer; padding: 4px;
    color: #ddd; font-size: 1.3rem; transition: color .1s, transform .1s;
}
.star-btn i.fa-solid { color: #f5a623; }
.star-btn--hover { transform: scale(1.15); }
.star-btn:hover i { color: #f5a623; }

/* ---------- Dashboard hero banner ---------- */
.dash-hero {
    position: relative;
    border-radius: 20px;
    padding: 28px 32px 24px;
    margin-bottom: 28px;
    color: #fff;
    overflow: hidden;
}
.dash-hero--premium {
    background: linear-gradient(135deg, #0a0a1f 0%, #1652f0 60%, #6b46e5 100%);
}
.dash-hero--free {
    background: linear-gradient(135deg, #0a0a1f 0%, #16213e 60%, #1652f0 100%);
}
.dash-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }

.dash-hero__top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.dash-hero__plan-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
    font-size: .78rem; font-weight: 600; margin-bottom: 10px;
}
.dash-hero--premium .dash-hero__plan-tag { background: rgba(245,166,35,.25); color: #ffd991; }
.dash-hero__plan-tag i { font-size: .65rem; }
.dash-hero__title {
    font-family: var(--font-display);
    font-size: 1.8rem; font-weight: 700;
    letter-spacing: -.03em; margin: 0 0 4px;
    color: #fff !important;
}
.dash-hero__sub { color: rgba(255,255,255,.7); font-size: .95rem; }

.dash-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero__cta {
    background: #fff !important; color: #0a0a1f !important;
    border: none; padding: 10px 18px !important; font-size: .88rem !important;
}
.dash-hero__cta:hover { background: #ffd991 !important; color: #0a0a1f !important; }
.dash-hero__ghost {
    background: rgba(255,255,255,.1) !important; color: #fff !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    padding: 10px 18px !important; font-size: .88rem !important;
    backdrop-filter: blur(6px);
}
.dash-hero__ghost:hover { background: rgba(255,255,255,.2) !important; color: #fff !important; }

.dash-hero__stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.dash-hero__stat {
    position: relative;
    padding: 18px 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    display: block;
    transition: background .15s, transform .15s;
}
a.dash-hero__stat:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.dash-hero__stat-label { display: block; font-size: .76rem; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.dash-hero__stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 700;
    letter-spacing: -.03em; line-height: 1;
}
.dash-hero__stat-icon {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: .88rem;
}

@media (max-width: 900px) {
    .dash-hero { padding: 22px 20px 20px; }
    .dash-hero__title { font-size: 1.4rem; }
    .dash-hero__stats { grid-template-columns: repeat(2, 1fr); }
    .dash-hero__stat-num { font-size: 1.6rem; }
}
@media (max-width: 480px) {
    .dash-hero__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .dash-hero__stat { padding: 14px 16px; }
    .dash-hero__stat-num { font-size: 1.4rem; }
}

/* ---------- Dashboard hero banner ---------- */
.dash-hero {
    position: relative;
    border-radius: 16px;
    padding: 24px 28px 20px;
    margin-bottom: 24px;
    color: #fff;
    overflow: hidden;
    background: #1652f0;
}
.dash-hero--premium { background: linear-gradient(135deg, #1652f0, #4a3acd); }
.dash-hero--free { background: #1652f0; }

/* Arcos decorativos */
.dash-hero::before, .dash-hero::after {
    content: '';
    position: absolute; pointer-events: none;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.15);
}
.dash-hero::before {
    width: 320px; height: 320px;
    right: -60px; top: -100px;
}
.dash-hero::after {
    width: 480px; height: 480px;
    right: -120px; top: -160px;
    border-color: rgba(255,255,255,.08);
}
.dash-hero > * { position: relative; z-index: 1; }

.dash-hero__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.dash-hero__plan-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,.12);
    font-size: .75rem; font-weight: 600; margin-bottom: 6px;
}
.dash-hero--premium .dash-hero__plan-tag { background: rgba(245,166,35,.2); color: #ffd991; }
.dash-hero__plan-tag i { font-size: .6rem; }
.dash-hero__title {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -.02em; margin: 0;
    color: #fff !important;
}

.dash-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-hero__cta {
    background: #fff !important; color: var(--blue) !important;
    border: none; padding: 8px 16px !important; font-size: .85rem !important;
}
.dash-hero__cta:hover { background: rgba(255,255,255,.9) !important; color: var(--blue) !important; }
.dash-hero__ghost {
    background: rgba(255,255,255,.12) !important; color: #fff !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    padding: 8px 16px !important; font-size: .85rem !important;
}
.dash-hero__ghost:hover { background: rgba(255,255,255,.22) !important; color: #fff !important; }

.dash-hero__stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.dash-hero__stat {
    position: relative;
    padding: 14px 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    color: #fff; text-decoration: none; display: block;
    transition: background .15s;
}
a.dash-hero__stat:hover { background: rgba(255,255,255,.12); }
.dash-hero__stat-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,.1); font-size: .8rem; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.dash-hero__stat-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 700;
    letter-spacing: -.03em; line-height: 1;
}
.dash-hero__stat-label { display: block; font-size: .72rem; color: rgba(255,255,255,.5); margin-top: 4px; }

@media (max-width: 900px) {
    .dash-hero { padding: 20px; }
    .dash-hero__title { font-size: 1.3rem; }
    .dash-hero__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .dash-hero__stats { gap: 8px; }
    .dash-hero__stat { padding: 12px 14px; }
    .dash-hero__stat-num { font-size: 1.3rem; }
}

/* Top fotos */
.dash-top-photos { display: flex; flex-direction: column; gap: 2px; }
.dash-top-photo {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid var(--line);
}
.dash-top-photo:last-child { border-bottom: none; }
.dash-top-photo__rank {
    width: 24px; height: 24px; border-radius: 6px;
    background: var(--surface); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.dash-top-photo:first-child .dash-top-photo__rank { background: var(--blue-tint); color: var(--blue); }
.dash-top-photo__img {
    width: 48px; height: 48px; border-radius: 8px;
    overflow: hidden; flex-shrink: 0;
}
.dash-top-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-top-photo__info { flex: 1; min-width: 0; }
.dash-top-photo__title {
    display: block; font-size: .88rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-top-photo__cat { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.dash-top-photo__likes {
    font-size: .85rem; font-weight: 600; color: #e53935;
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.dash-top-photo__likes i { font-size: .75rem; }

/* ---------- Dashboard stats ---------- */
.dash-stats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 28px;
}
.dash-stat {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 16px; border-radius: 14px;
    background: var(--paper); border: 1px solid var(--line);
}
.dash-stat--clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; text-decoration: none; }
.dash-stat--clickable:hover { border-color: var(--blue); box-shadow: var(--shadow-soft); }
.dash-stat__icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.dash-stat__icon--blue   { background: rgba(22,82,240,.1); color: var(--blue); }
.dash-stat__icon--purple { background: rgba(107,70,229,.1); color: #6b46e5; }
.dash-stat__icon--red    { background: rgba(229,57,53,.1);  color: #e53935; }
.dash-stat__icon--amber  { background: rgba(245,166,35,.1); color: #f5a623; }
.dash-stat__icon--green  { background: rgba(18,160,92,.1);  color: #12a05c; }
.dash-stat__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; display: block; line-height: 1.1; }
.dash-stat__label { font-size: .78rem; color: var(--muted); display: block; margin-top: 2px; }

.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
@media (max-width: 768px) { .dash-charts { grid-template-columns: 1fr; } }
.dash-chart {
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
    padding: 20px;
}
.dash-chart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dash-chart__head h3 { font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.dash-chart__period { font-size: .78rem; color: var(--muted); }
.dash-chart__bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.dash-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.dash-chart__bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; transition: height .4s cubic-bezier(.2,.7,.3,1); }
.dash-chart__bar--blue { background: var(--blue); }
.dash-chart__bar--red  { background: #e53935; }
.dash-chart__day { position: absolute; bottom: -18px; font-size: .65rem; color: var(--muted); }
.dash-chart__total { margin-top: 24px; font-size: .85rem; color: var(--muted); text-align: right; }

.dash-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dash-quick__item {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: 12px;
    background: var(--paper); border: 1px solid var(--line);
    font-size: .88rem; font-weight: 500; color: var(--ink-2);
    transition: border-color .15s, color .15s;
}
.dash-quick__item:hover { border-color: var(--blue); color: var(--blue); }
.dash-quick__item i { font-size: .9rem; }
.dash-quick__badge {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: #e53935; color: #fff;
    font-size: .7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Invitaciones de reseña */
.invite-form__row { display: flex; gap: 10px; }
.invite-form__row .input { flex: 1; }
.invite-list { display: flex; flex-direction: column; gap: 8px; }
.invite-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap;
}
.invite-row--used { opacity: .6; }
.invite-code {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    letter-spacing: .12em; color: var(--blue);
}
.invite-label { color: var(--ink-2); font-size: .88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-status { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.invite-status--used { color: #12a05c; }
.invite-actions { display: flex; gap: 4px; margin-left: auto; }

/* ---------- Mensajería (split view) ---------- */
.msg-split {
    display: grid; grid-template-columns: 340px 1fr;
    border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; background: var(--paper);
    height: calc(100vh - 130px);
}
/* Quitar padding del app-main cuando tiene el chat */
.app-main:has(.msg-split) { padding-bottom: 0; overflow: hidden; }

/* Panel izquierdo: lista */
.msg-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.msg-list__head { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.msg-list__title { font-size: 1.2rem; }
.msg-list__items { flex: 1; overflow-y: auto; min-height: 0; }
.msg-list__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); padding: 32px; }
.msg-list__empty i { font-size: 2rem; color: var(--line); }

.msg-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-bottom: 1px solid var(--line);
    transition: background .1s;
}
.msg-item:hover { background: var(--surface); }
.msg-item--active { background: var(--blue-tint); border-left: 3px solid var(--blue); }
.msg-item__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--surface); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; color: var(--ink-2); overflow: hidden;
}
.msg-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-item--active .msg-item__avatar { background: var(--blue); color: #fff; }
.msg-item__body { flex: 1; min-width: 0; }
.msg-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.msg-item__name { font-weight: 600; font-size: .92rem; }
.msg-item__time { color: var(--muted); font-size: .76rem; flex-shrink: 0; }
.msg-item__bottom { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.msg-item__preview { color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.msg-item--unread .msg-item__name { color: var(--ink); }
.msg-item--unread .msg-item__preview { color: var(--ink); font-weight: 500; }
.msg-item__badge {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--blue); color: #fff;
    font-size: .7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Panel derecho: chat */
.msg-chat { display: flex; flex-direction: column; background: var(--app-bg); min-height: 0; overflow: hidden; }
.msg-chat__header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 24px; background: var(--paper);
    border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.msg-chat__avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem; flex-shrink: 0; overflow: hidden;
}
.msg-chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-chat__name { font-weight: 600; font-size: 1.05rem; }
.msg-chat__info { display: flex; flex-direction: column; }
.msg-chat__status { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); }

.msg-chat__body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }

.msg-date-sep { text-align: center; margin: 16px 0 8px; }
.msg-date-sep span {
    display: inline-block; padding: 5px 14px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600; color: var(--muted);
}

.msg-bubble-row { display: flex; gap: 10px; align-items: flex-start; max-width: 80%; }
.msg-bubble-row--mine { margin-left: auto; flex-direction: row-reverse; }
.msg-bubble-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--surface); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem; color: var(--ink-2); margin-top: 18px; overflow: hidden;
}
.msg-bubble-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-bubble-wrap { display: flex; flex-direction: column; gap: 2px; }
.msg-bubble-sender { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.msg-bubble-sender--mine { justify-content: flex-end; }
.msg-bubble-time { font-size: .72rem; color: var(--muted); }
.msg-bubble {
    padding: 12px 16px; border-radius: 14px;
    font-size: .92rem; line-height: 1.6;
    background: var(--paper); border: 1px solid var(--line);
    border-top-left-radius: 4px;
}
.msg-bubble--mine {
    background: var(--blue); color: #fff; border-color: var(--blue);
    border-top-left-radius: 14px; border-top-right-radius: 4px;
}
/* Animaciones de mensajes */
.msg-bubble-row { animation: msgSlideIn .3s ease; }
.msg-bubble-row--mine { animation: msgSlideInRight .3s ease; }
@keyframes msgSlideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes msgSlideInRight { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
/* Pulso sutil en el badge de no leídos */
.msg-item__badge { animation: badgePulse 2s infinite; }
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
/* Toast de notificación global */
.msg-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 1001;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: 14px;
    background: var(--paper); border: 1px solid var(--line);
    box-shadow: 0 12px 40px -8px rgba(10,10,30,.22);
    font-size: .92rem; cursor: pointer;
    opacity: 0; transform: translateY(16px) scale(.96);
    transition: opacity .3s, transform .3s;
    max-width: 380px;
}
.msg-toast.is-show { opacity: 1; transform: none; }
.msg-toast__avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
}
.msg-toast__body { flex: 1; min-width: 0; }
.msg-toast__name { font-weight: 600; display: block; font-size: .9rem; }
.msg-toast__text { color: var(--muted); font-size: .84rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-chat__footer { padding: 14px 24px; background: var(--paper); border-top: 1px solid var(--line); flex-shrink: 0; }
.msg-chat__form { display: flex; gap: 10px; align-items: flex-end; }
.msg-chat__input {
    flex: 1; padding: 10px 16px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); font: inherit; outline: none;
    transition: border-color .15s;
    resize: none; overflow-y: auto;
    min-height: 42px; max-height: 96px;
    line-height: 1.5;
    scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.msg-chat__input:hover { scrollbar-color: rgba(0,0,0,.15) transparent; }
.msg-chat__input::-webkit-scrollbar { width: 4px; }
.msg-chat__input::-webkit-scrollbar-track { background: transparent; }
.msg-chat__input::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.msg-chat__input:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }

/* Scrollbars discretos en el chat y lista */
.msg-chat__body, .msg-list__items {
    scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.1) transparent;
}
.msg-chat__body::-webkit-scrollbar, .msg-list__items::-webkit-scrollbar { width: 5px; }
.msg-chat__body::-webkit-scrollbar-track, .msg-list__items::-webkit-scrollbar-track { background: transparent; }
.msg-chat__body::-webkit-scrollbar-thumb, .msg-list__items::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 5px; }
.msg-chat__body::-webkit-scrollbar-thumb:hover, .msg-list__items::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); }
.msg-chat__input:focus { border-color: var(--blue); background: var(--paper); }
.msg-chat__send { border-radius: 12px; white-space: nowrap; align-self: flex-end; }

.msg-chat__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); padding: 48px; }
.msg-chat__empty i { font-size: 3rem; color: var(--line); }
.msg-chat__empty h3 { color: var(--ink); }

@media (max-width: 768px) {
    .msg-split { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 130px); }
    .msg-list { max-height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
    .msg-chat__body { min-height: 300px; }
    .msg-bubble-row { max-width: 90%; }
    .msg-toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

/* ---------- Utilidades ---------- */
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.section-title h2 { font-size: 1.7rem; }
.link-blue { color: var(--blue); font-weight: 600; }

/* Menú móvil */
.nav-toggle { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 8px; }

/* User dropdown */
.user-drop { position: relative; }

/* Notificaciones dropdown */
.notif-drop { position: relative; }
.notif-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #e53935; color: #fff;
    font-size: .6rem; font-weight: 700; line-height: 16px;
    text-align: center; pointer-events: none;
}
.notif-drop__menu {
    display: none; position: absolute; top: calc(100% + 8px); right: -40px;
    width: 340px; z-index: 60;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 38px -8px rgba(10,10,30,.2);
    overflow: hidden;
}
.notif-drop.is-open .notif-drop__menu { display: block; }
.notif-drop__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; border-bottom: 1px solid var(--line);
    font-size: .92rem;
}
.notif-drop__list { max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.notif-drop__empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: .88rem; }

.notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    transition: background .1s;
    text-decoration: none; color: var(--ink-2);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface); }
.notif-item--unread { background: rgba(22,82,240,.03); }
.notif-item--unread .notif-item__title { font-weight: 600; color: var(--ink); }
.notif-item__icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0; margin-top: 2px;
}
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__title { display: block; font-size: .85rem; line-height: 1.3; }
.notif-item__text {
    display: block; font-size: .78rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.notif-item__time { font-size: .72rem; color: var(--muted); flex-shrink: 0; margin-top: 3px; }

@media (max-width: 480px) {
    .notif-drop__menu { width: calc(100vw - 24px); right: -60px; }
}

.user-chip { border: none; background: none; cursor: pointer; font: inherit; display: flex; align-items: center; gap: 8px; }
.user-drop__arrow { transition: transform .2s; font-size: .7rem; color: var(--muted); }
.user-drop.is-open .user-drop__arrow { transform: rotate(180deg); }
.user-drop__menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 200px; z-index: 60;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 12px; padding: 6px;
    box-shadow: 0 10px 32px -8px rgba(10,10,30,.18);
}
.user-drop.is-open .user-drop__menu { display: block; }
.user-drop__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 14px;
    border: none; background: none; cursor: pointer;
    font: inherit; font-size: .88rem; color: var(--ink-2);
    border-radius: 8px; text-align: left; text-decoration: none;
    transition: background .1s;
}
.user-drop__item:hover { background: var(--surface); }
.user-drop__item i { width: 18px; text-align: center; font-size: .9rem; }
.user-drop__item--danger { color: #e53935; }
.user-drop__item--danger:hover { background: rgba(229,57,53,.06); }
.user-drop__sep { height: 1px; background: var(--line); margin: 4px 10px; }

/* Burger drawer (oculto en desktop) */
.topbar__burger {
    display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); font-size: 1.1rem; cursor: pointer;
    transition: background .15s; flex-shrink: 0;
}
.topbar__burger:hover { background: var(--surface); }
.drawer-overlay { display: none; }

/* ---------- Admin panel ---------- */
.admin-shell {
    display: grid; grid-template-columns: 240px 1fr;
    min-height: 100vh;
}
.admin-side {
    background: var(--paper); border-right: 1px solid var(--line);
    padding: 20px 14px; position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.admin-body { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.admin-body .app-main { flex: 1; }

.admin-toolbar {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 20px;
}
.admin-search-form { display: flex; gap: 6px; }
.admin-search-form .input { width: 240px; }
.admin-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.admin-table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%; border-collapse: collapse;
    font-size: .88rem;
}
.admin-table th {
    text-align: left; padding: 10px 14px;
    font-weight: 600; font-size: .78rem;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.admin-table td {
    padding: 12px 14px; border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface); }

.admin-badge {
    display: inline-block; padding: 2px 10px;
    border-radius: 999px; font-size: .75rem; font-weight: 600;
}
.admin-badge--photographer { background: rgba(107,70,229,.1); color: #6b46e5; }
.admin-badge--client { background: rgba(18,160,92,.1); color: #12a05c; }
.admin-badge--admin { background: rgba(22,82,240,.1); color: var(--blue); }
.admin-badge--premium { background: rgba(245,166,35,.15); color: #c97e00; }
.admin-badge--free { background: var(--surface); color: var(--muted); }
.admin-badge--active { background: rgba(18,160,92,.1); color: #12a05c; }
.admin-badge--suspended { background: rgba(229,57,53,.1); color: #e53935; }

.admin-actions { display: flex; gap: 6px; justify-content: flex-end; }
.admin-act-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--paper);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .82rem; color: var(--ink-2);
    transition: background .1s, border-color .1s;
}
.admin-act-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
.admin-act-btn--danger:hover { border-color: #e53935; color: #e53935; background: rgba(229,57,53,.06); }

/* Menú contextual */
.ctx-menu {
    display: none; position: fixed; z-index: 200;
    min-width: 200px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 12px; padding: 5px;
    box-shadow: 0 10px 38px -8px rgba(10,10,30,.22);
}
.ctx-menu.is-open { display: block; }
.ctx-menu__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 14px;
    border: none; background: none; cursor: pointer;
    font: inherit; font-size: .88rem; color: var(--ink-2);
    border-radius: 8px; text-align: left;
    transition: background .1s;
}
.ctx-menu__item:hover { background: var(--surface); }
.ctx-menu__item i { width: 18px; text-align: center; font-size: .85rem; color: var(--muted); }
.ctx-menu__item:hover i { color: var(--ink-2); }
.ctx-menu__item--danger { color: #e53935; }
.ctx-menu__item--danger i { color: #e53935; }
.ctx-menu__item--danger:hover { background: rgba(229,57,53,.06); }
.ctx-menu__sep { height: 1px; background: var(--line); margin: 4px 8px; }

/* Fila con contexto */
.ctx-row { cursor: context-menu; }
.ctx-row:hover td { background: var(--surface); }

/* Moderación de contenido */
.mod-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.mod-card {
    position: relative; border-radius: 12px; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line);
    transition: box-shadow .15s;
}
.mod-card:hover { box-shadow: var(--shadow-soft); }
.mod-card__img { aspect-ratio: 1; overflow: hidden; }
.mod-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-card__info { padding: 10px 12px; }
.mod-card__name { display: block; font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-card__date { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.mod-card__del {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 8px;
    border: none; cursor: pointer;
    background: rgba(0,0,0,.6); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; opacity: 0; transition: opacity .15s;
}
.mod-card:hover .mod-card__del { opacity: 1; }
.mod-card__del:hover { background: #e53935; }

.admin-pagination {
    display: flex; gap: 4px; justify-content: center;
    padding: 16px 0 8px;
}
.admin-page-btn {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 600; color: var(--ink-2);
    border: 1px solid var(--line); background: var(--paper);
    cursor: pointer; transition: background .1s;
}
.admin-page-btn:hover { background: var(--surface); }
.admin-page-btn.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 260px; z-index: 100;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    .admin-side.is-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(10,10,30,.15);
    }
    .admin-search-form .input { width: 160px; }
}

/* ---------- Reservas split layout ---------- */
.bk-split { display: flex; gap: 0; position: relative; }
.bk-split__main { flex: 1; min-width: 0; }

.bk-split__side {
    width: 440px; flex-shrink: 0;
    background: var(--paper);
    border-left: 1px solid var(--line);
    border-radius: 0 16px 16px 0;
    position: fixed; top: 0; right: 0; bottom: 0;
    z-index: 90;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(10,10,30,.08);
}
.bk-split__side.is-open { transform: translateX(0); }

.bk-split__overlay {
    display: none; position: fixed; inset: 0; z-index: 89;
    background: rgba(10,10,30,.25);
    backdrop-filter: blur(2px);
}
.bk-split__overlay.is-show { display: block; }

/* Panel lateral content */
.bkside__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.bkside__title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.bkside__close {
    width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--paper);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .88rem; color: var(--muted);
    transition: background .1s;
}
.bkside__close:hover { background: var(--surface); color: var(--ink); }
.bkside__body { padding: 22px 24px; }
.bkside__section { margin-bottom: 24px; }

/* Toggle switch */
.bk-toggle {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 14px 16px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface);
    transition: border-color .15s;
}
.bk-toggle:has(input:checked) { border-color: var(--blue); background: rgba(22,82,240,.03); }
.bk-toggle input[type="checkbox"] {
    position: absolute; width: 0; height: 0; opacity: 0;
    pointer-events: none; margin: 0; padding: 0;
}
.bk-toggle__track {
    width: 44px; height: 24px; border-radius: 999px;
    background: #ccc; position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.bk-toggle__track::after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform .2s;
}
.bk-toggle input:checked ~ .bk-toggle__track { background: var(--blue); }
.bk-toggle input:checked ~ .bk-toggle__track::after { transform: translateX(20px); }
.bk-toggle__label { font-size: .9rem; font-weight: 500; color: var(--ink); }

/* Custom select */
.bk-select { position: relative; }
.bk-select__trigger {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper); cursor: pointer;
    font: inherit; font-size: .88rem; color: var(--ink);
    transition: border-color .15s;
}
.bk-select__trigger:hover { border-color: var(--ink-2); }
.bk-select.is-open .bk-select__trigger { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,82,240,.08); }
.bk-select__arrow { font-size: .7rem; color: var(--muted); transition: transform .2s; }
.bk-select.is-open .bk-select__arrow { transform: rotate(180deg); }
.bk-select__dropdown {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    z-index: 10; background: var(--paper);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 8px 32px -6px rgba(10,10,30,.18);
    padding: 5px; max-height: 220px; overflow-y: auto;
}
.bk-select.is-open .bk-select__dropdown { display: block; }
.bk-select__option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 8px;
    font-size: .88rem; cursor: pointer; color: var(--ink-2);
    transition: background .1s;
}
.bk-select__option:hover { background: var(--surface); }
.bk-select__option.is-active { color: var(--blue); font-weight: 600; }
.bk-select__option .fa-check { font-size: .75rem; color: var(--blue); }
.bkside__placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; text-align: center;
}

/* Días en panel lateral */
.bkside-day {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px; margin-bottom: 6px;
    border: 1.5px solid var(--line); border-radius: 10px;
    transition: border-color .15s, background .15s;
}
.bkside-day.is-active { border-color: rgba(22,82,240,.3); background: rgba(22,82,240,.02); }
.bkside-day__check {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 500; cursor: pointer;
    min-width: 50px;
}
.bkside-day__check input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 6px;
    border: 2px solid var(--line); background: var(--paper);
    cursor: pointer; flex-shrink: 0; position: relative;
    transition: background .15s, border-color .15s;
}
.bkside-day__check input[type="checkbox"]:checked {
    background: var(--blue); border-color: var(--blue);
}
.bkside-day__check input[type="checkbox"]:checked::after {
    content: ''; position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bkside-day__times {
    display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.bkside-day__times .input { width: 88px; text-align: center; font-size: .82rem; padding: 7px 8px; }
.bkside-day__break {
    display: flex; align-items: center; gap: 4px;
    width: 100%; padding-top: 4px;
}
.bkside-day__break .input { width: 88px; text-align: center; font-size: .82rem; padding: 7px 8px; }

/* Fechas bloqueadas en panel lateral */
.bkside-blocked {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid var(--line);
    font-size: .82rem;
}
.bkside-blocked:last-child { border-bottom: none; }
.bkside-blocked span { font-weight: 500; }
.bkside-blocked__del {
    border: none; background: none; color: var(--muted);
    cursor: pointer; font-size: .78rem; padding: 4px;
}
.bkside-blocked__del:hover { color: #e53935; }

/* ---------- Reservas ---------- */
.bk-week { display: flex; flex-direction: column; gap: 6px; padding: 0 20px 20px; }
.bk-day {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: 10px;
}
.bk-day__check { display: flex; align-items: center; gap: 8px; font-size: .9rem; min-width: 110px; cursor: pointer; }
.bk-day__check input { accent-color: var(--blue); width: 18px; height: 18px; }
.bk-day__times { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bk-day__times .input { width: 100px; text-align: center; }
.bk-day__break {
    display: flex; align-items: center; gap: 6px; margin-left: 8px;
    padding-left: 10px; border-left: 1px solid var(--line);
}
.bk-day__break-label { color: var(--muted); font-size: .85rem; width: 18px; text-align: center; }
.bk-day__break .input { width: 90px; text-align: center; }

.bk-blocked {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--line);
    font-size: .88rem;
}
.bk-blocked:last-child { border-bottom: none; }
.bk-blocked span:first-child { font-weight: 600; }
.bk-blocked__del {
    margin-left: auto; border: none; background: none;
    color: var(--muted); cursor: pointer; font-size: .85rem;
}
.bk-blocked__del:hover { color: #e53935; }

/* Botón de reserva en perfil público */
.bk-btn-wrap { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Modal de reserva */
.bk-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(10,10,30,.4); backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 20px;
}
.bk-modal-overlay.is-open { display: flex; }
.bk-modal {
    width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto;
    background: var(--paper); border-radius: 16px;
    box-shadow: 0 20px 60px -12px rgba(10,10,30,.3);
    padding: 24px;
    animation: bkModalIn .25s ease;
}
@keyframes bkModalIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bk-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.bk-modal__title { font-size: 1.1rem; font-weight: 700; }
.bk-modal__close { border: none; background: none; cursor: pointer; font-size: 1.1rem; color: var(--muted); padding: 4px; }

.bk-modal__body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bk-modal__left { min-width: 0; }
.bk-modal__right { min-width: 0; display: flex; flex-direction: column; }

.bk-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--muted); gap: 8px;
    padding: 32px 16px; flex: 1;
}
.bk-placeholder i { font-size: 2rem; }
.bk-placeholder p { font-size: .88rem; }

@media (max-width: 600px) {
    .bk-modal__body { grid-template-columns: 1fr; gap: 16px; }
    .bk-modal { max-width: 100%; padding: 20px 16px; }
}

.bk-cal { margin-bottom: 16px; }
.bk-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-cal__nav button { border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--ink-2); padding: 6px; }
.bk-cal__month { font-weight: 600; font-size: .95rem; }
.bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.bk-cal__dow { font-size: .7rem; color: var(--muted); font-weight: 600; padding: 4px 0; }
.bk-cal__day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: .85rem; cursor: pointer;
    border: 1px solid transparent; transition: background .1s;
}
.bk-cal__day:hover { background: var(--surface); }
.bk-cal__day--empty { cursor: default; }
.bk-cal__day--disabled { color: var(--muted); opacity: .4; cursor: default; pointer-events: none; }
.bk-cal__day--blocked { color: #e53935; text-decoration: line-through; opacity: .5; cursor: default; pointer-events: none; }
.bk-cal__day--selected { background: var(--blue); color: #fff !important; border-color: var(--blue); }
.bk-cal__day--today { border-color: var(--blue); font-weight: 700; }

.bk-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.bk-slot {
    padding: 6px 14px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--paper);
    font-size: .85rem; cursor: pointer; transition: background .1s, border-color .1s;
}
.bk-slot:hover { border-color: var(--blue); }
.bk-slot--taken { opacity: .3; pointer-events: none; text-decoration: line-through; }
.bk-slot--selected { background: var(--blue); color: #fff; border-color: var(--blue); }

@media (max-width: 600px) {
    .bk-day { flex-wrap: wrap; }
    .bk-day__times { margin-left: 0; width: 100%; }
    .bk-day__break { margin-left: 0; padding-left: 0; border-left: none; width: 100%; margin-top: 6px; }
}

/* Calendario del fotógrafo */
.bkcal-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 24px;
}
.bkcal-nav__title {
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.2rem;
    letter-spacing: -.01em;
}
.bkcal-nav__ctrls { display: flex; align-items: center; gap: 4px; }
.bkcal-nav__btn {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem; color: var(--ink-2);
    transition: background .12s, border-color .12s;
}
.bkcal-nav__btn:hover { background: var(--surface); border-color: var(--ink-2); }
.bkcal-nav__today {
    padding: 0 14px; height: 36px;
    border-radius: 10px; border: 1px solid var(--line);
    background: var(--paper);
    font-size: .82rem; font-weight: 600; color: var(--ink-2);
    cursor: pointer; margin-right: 8px;
    transition: background .12s;
}
.bkcal-nav__today:hover { background: var(--surface); }

.bkcal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: var(--line);
    gap: 1px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.bkcal-dow {
    padding: 12px 16px 14px;
    font-size: .68rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .1em;
    background: var(--paper);
}
.bkcal-dow__short { display: none; }
@media (max-width: 900px) {
    .bkcal-dow__full { display: none; }
    .bkcal-dow__short { display: inline; }
}
.bkcal-cell {
    min-height: 130px; padding: 10px 12px;
    background: var(--paper);
    font-size: .82rem;
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
}
.bkcal-cell--empty { background: var(--paper); }

/* Días inactivos con patrón diagonal */
.bkcal-cell--off,
.bkcal-cell--blocked {
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 8px,
        rgba(0,0,0,.025) 8px,
        rgba(0,0,0,.025) 9px
    );
}
.bkcal-cell--off .bkcal-cell__num,
.bkcal-cell--blocked .bkcal-cell__num { color: rgba(120,120,140,.5); }

.bkcal-cell--today .bkcal-cell__num {
    color: var(--blue); font-weight: 700;
}
.bkcal-cell--today .bkcal-cell__num::after {
    content: ''; display: block;
    width: 20px; height: 2px; background: var(--blue);
    border-radius: 2px; margin-top: 2px;
}

.bkcal-cell__num {
    font-weight: 500; font-size: .78rem;
    color: var(--muted); margin-bottom: 6px;
    letter-spacing: .02em;
}

.bkcal-cell__tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .66rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(229,57,53,.1); color: #e53935;
    align-self: flex-start; font-weight: 600;
}

/* Eventos como tarjetas flotantes */
.bkcal-event {
    padding: 8px 10px 8px 12px;
    border-radius: 8px; background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(10,10,30,.04), 0 2px 8px -2px rgba(10,10,30,.06);
    line-height: 1.35;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.bkcal-event:hover {
    box-shadow: 0 2px 4px rgba(10,10,30,.06), 0 4px 14px -2px rgba(10,10,30,.1);
    transform: translateY(-1px);
}
.bkcal-event::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px;
    background: var(--_c, #999);
}
.bkcal-event--pending { --_c: #f5a623; }
.bkcal-event--confirmed { --_c: #12a05c; }

.bkcal-event__time {
    font-weight: 600; font-size: .7rem;
    color: var(--muted);
    display: block;
}
.bkcal-event__name {
    font-size: .82rem; font-weight: 500;
    color: var(--ink);
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bkcal-event__service {
    font-size: .7rem; color: var(--muted);
    display: block; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bkcal-legend {
    display: flex; gap: 20px; flex-wrap: wrap;
    padding: 16px 4px; font-size: .78rem; color: var(--muted);
    margin-top: 8px;
}
.bkcal-legend span { display: flex; align-items: center; gap: 6px; }
.bkcal-legend__dot {
    width: 8px; height: 8px; border-radius: 999px;
    display: inline-block;
}

/* Modal detalle de reserva */
.bkcal-overlay {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(10,10,30,.35); backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 20px;
}
.bkcal-overlay.is-open { display: flex; }
.bkcal-detail {
    width: 100%; max-width: 400px;
    background: var(--paper); border-radius: 16px;
    box-shadow: 0 20px 60px -12px rgba(10,10,30,.28);
    padding: 0;
    animation: bkModalIn .25s ease;
    overflow: hidden;
}
.bkcal-detail__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--line);
}
.bkcal-detail__title { font-weight: 700; font-size: .95rem; }
.bkcal-detail__close {
    border: none; background: none; cursor: pointer;
    font-size: 1rem; color: var(--muted); padding: 4px;
    border-radius: 6px; transition: background .1s;
}
.bkcal-detail__close:hover { background: var(--surface); }

.bkcal-detail__status {
    display: inline-block;
    margin: 18px 22px 0;
    padding: 4px 14px; border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    border: 1.5px solid currentColor;
    text-transform: uppercase; letter-spacing: .04em;
}

.bkcal-detail__rows { padding: 16px 22px 6px; }
.bkcal-detail__row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.bkcal-detail__row:last-child { border-bottom: none; }
.bkcal-detail__label {
    min-width: 90px; font-size: .8rem; font-weight: 600;
    color: var(--muted); display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.bkcal-detail__label i { width: 16px; text-align: center; font-size: .78rem; }
.bkcal-detail__value {
    font-size: .88rem; color: var(--ink); line-height: 1.4;
    word-break: break-word;
}

.bkcal-detail__actions {
    padding: 14px 22px 20px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
}
.bkcal-detail__notes-field { margin-bottom: 4px; }
.bkcal-detail__btns { display: flex; gap: 10px; }
.bkcal-detail__btns .btn { flex: 1; }

@media (max-width: 900px) {
    .bkcal-cell { min-height: 80px; padding: 6px 5px; }
    .bkcal-event { padding: 4px 6px 4px 9px; }
    .bkcal-event__name, .bkcal-event__service { display: none; }
    .bkcal-nav__title { font-size: 1rem; }
    .bkcal-dow { padding: 8px 4px; font-size: .6rem; letter-spacing: .04em; }
}
@media (max-width: 600px) {
    .bkcal-cell { min-height: 60px; padding: 4px 3px; }
    .bkcal-cell__num { font-size: .7rem; margin-bottom: 2px; }
    .bkcal-event { padding: 3px 5px 3px 8px; }
    .bkcal-event__time { font-size: .65rem; }
    .bkcal-cell__tag { font-size: .55rem; padding: 1px 4px; }
    .bkcal-nav { padding: 14px 16px 16px; }
}

.bk-list-email { display: block; font-size: .75rem; color: var(--muted); }

@media (max-width: 600px) {
    .admin-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .admin-filters { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .admin-table th:nth-child(4),
    .admin-table td:nth-child(4) { display: none; }
    .bk-list-email { display: none; }
}

/* ---------- Páginas legales ---------- */
.legal { max-width: 720px; padding-bottom: 60px; }
.legal h1 {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 700;
    letter-spacing: -.03em; margin: 20px 0 4px;
}
.legal__updated { font-size: .85rem; color: var(--muted); margin-bottom: 32px; }
.legal h2 {
    font-size: 1.1rem; font-weight: 700;
    margin: 28px 0 8px; color: var(--ink);
}
.legal h3 {
    font-size: .95rem; font-weight: 600;
    margin: 20px 0 6px; color: var(--ink-2);
}
.legal p { color: var(--ink-2); line-height: 1.7; margin: 0 0 12px; }
.legal a { color: var(--blue); }
.legal__nav {
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--line);
}
.legal__nav a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    background: var(--surface); color: var(--ink-2);
    font-size: .88rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.legal__nav a:hover { background: var(--blue-tint); color: var(--blue); }

/* Banner de cookies */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 24px rgba(10,10,30,.08);
    padding: 16px 24px;
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    animation: cookieSlideUp .4s ease;
}
.cookie-banner__text {
    flex: 1; min-width: 240px;
    font-size: .88rem; color: var(--ink-2); line-height: 1.5;
}
.cookie-banner__text a { color: var(--blue); }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
@keyframes cookieSlideUp {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* ---------- Tarjeta de precios y viaje ---------- */
.price-card { padding: 20px; }
.price-card__range { margin-bottom: 14px; }
.price-card__label {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 6px;
}
.price-card__label i { font-size: .72rem; }
.price-card__value {
    font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 700; color: var(--ink);
    letter-spacing: -.01em;
}
.price-card__travel {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: rgba(22,82,240,.04);
    font-size: .88rem; color: var(--ink-2);
}
.price-card__travel > i { color: var(--blue); margin-top: 2px; font-size: .85rem; }
.price-card__travel strong { font-size: .85rem; display: block; }
.price-card__travel-note {
    display: block; font-size: .8rem; color: var(--muted);
    margin-top: 2px; line-height: 1.4;
}

/* Input con prefijo ($) */
.input-icon-wrap {
    position: relative; display: flex; align-items: center;
}
.input-icon-prefix {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: .9rem; font-weight: 600; color: var(--muted);
    pointer-events: none;
}
.input--icon-left { padding-left: 32px; }

/* ---------- Home gallery ---------- */
.home-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.home-gallery__item {
    position: relative; border-radius: 14px; overflow: hidden;
    aspect-ratio: 1; display: block;
    background: var(--surface);
}
.home-gallery__item img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.home-gallery__item:hover img { transform: scale(1.06); }

.home-gallery__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 50%);
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 14px 16px;
    opacity: 0; transition: opacity .25s;
}
.home-gallery__item:hover .home-gallery__overlay { opacity: 1; }

.home-gallery__author {
    display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
.home-gallery__avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.5);
}
.home-gallery__avatar--ph {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.2); color: #fff;
    font-size: .7rem; font-weight: 700;
}
.home-gallery__name {
    font-size: .8rem; color: #fff; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-gallery__likes {
    font-size: .78rem; color: #fff; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.home-gallery__likes i { font-size: .7rem; color: #e53935; }

@media (max-width: 768px) {
    .home-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .home-gallery__overlay { opacity: 1; padding: 10px 12px; }
    .home-gallery__name { font-size: .72rem; }
}
@media (max-width: 480px) {
    .home-gallery { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .home-gallery__item { border-radius: 10px; }
}

/* ---------- Toasts ---------- */
.toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    max-width: 400px; width: calc(100% - 40px);
}
.toast {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 8px 30px -6px rgba(10,10,30,.15);
    animation: toastIn .35s cubic-bezier(.2,.7,.3,1);
    font-size: .9rem;
}
.toast--out { animation: toastOut .3s ease forwards; }
.toast__icon { font-size: 1.1rem; flex-shrink: 0; }
.toast--success .toast__icon { color: #12a05c; }
.toast--error .toast__icon { color: #e53935; }
.toast__text { flex: 1; line-height: 1.4; color: var(--ink-2); }
.toast__close {
    border: none; background: none; cursor: pointer;
    color: var(--muted); font-size: .85rem; padding: 4px;
    border-radius: 6px; transition: background .1s; flex-shrink: 0;
}
.toast__close:hover { background: var(--surface); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px); } }
@media (max-width: 480px) {
    .toast-container { top: 12px; right: 12px; width: calc(100% - 24px); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
    .dash { grid-template-columns: 1fr; }
    .app-shell { grid-template-columns: 216px 1fr; }
}
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }

    /* Sidebar como drawer lateral */
    .app-side {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 280px; z-index: 100;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        border-right: 1px solid var(--line);
        box-shadow: none;
    }
    .app-side.is-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(10,10,30,.15);
    }

    .drawer-overlay {
        display: none; position: fixed; inset: 0; z-index: 99;
        background: rgba(10,10,30,.35);
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    .drawer-overlay.is-show { display: block; }

    .topbar__burger { display: flex; }

    .app-main { padding: 20px 16px; }
    .topbar { padding: 14px 16px; }
    .user-chip span.name-full { display: none; }
}

@media (max-width: 720px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        position: absolute; top: 68px; left: 0; right: 0;
        flex-direction: column; align-items: stretch;
        background: var(--paper); border-bottom: 1px solid var(--line);
        padding: 12px; gap: 4px;
        display: none;
    }
    .nav.is-open { display: flex; }
    .nav__sep { display: none; }
    .search-bar { grid-template-columns: 1fr; }
    .hero { padding-block: 56px 40px; }
    .section { padding-block: 48px; }
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    .form-section { padding: 20px; }
}

/* ---------- SmartSelect ---------- */
.ss { position: relative; }
.ss__trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 12px 14px; font: inherit; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
}
.ss__value {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss__trigger:hover { border-color: #cfcfcf; }
.ss--open .ss__trigger { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.ss--placeholder .ss__value { color: var(--muted); }
.ss__arrow { color: var(--muted); font-size: .75rem; transition: transform .15s; }
.ss--open .ss__arrow { transform: rotate(180deg); }
.ss__dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 36px -8px rgba(10,10,30,.18);
    display: none; overflow: hidden;
}
.ss--open .ss__dropdown { display: block; }
.ss__search-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.ss__search-wrap i { color: var(--muted); font-size: .9rem; }
.ss__search {
    border: none; outline: none; background: transparent; width: 100%;
    font: inherit; font-size: .92rem;
}
.ss__list {
    list-style: none; margin: 0; padding: 4px;
    max-height: 260px; overflow-y: auto;
    scrollbar-width: thin;
}
.ss__item {
    padding: 9px 12px; border-radius: 8px; cursor: pointer;
    font-size: .92rem; transition: background .1s;
}
.ss__item:hover, .ss__item--hl { background: var(--surface); }
.ss__item--active { color: var(--blue); font-weight: 600; }
.ss__item--clear { color: var(--muted); font-size: .85rem; border-bottom: 1px solid var(--line); border-radius: 0; }
.ss__item--clear i { font-size: .75rem; }
.ss__group {
    padding: 8px 12px 4px; font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); pointer-events: none;
}
.ss__empty { padding: 16px 12px; text-align: center; color: var(--muted); font-size: .9rem; }
.ss__geo {
    width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--surface); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
    transition: background .15s, color .15s;
}
.ss__geo:hover { background: var(--blue); color: #fff; }
.ss__geo-msg {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 59;
    padding: 8px 12px; border-radius: 8px;
    font-size: .82rem; text-align: center;
    background: var(--blue-tint); color: var(--blue);
}
.ss__geo-msg--err { background: #fdf1f1; color: #a52020; }

/* SmartSelect dentro del hero (sin borde, fondo transparente) */
.hero2__field .ss,
.hero2__field + .ss {
    flex: 1; min-width: 0;
}
.hero2__field .ss__trigger,
.hero2__field + .ss .ss__trigger {
    border: none; background: transparent; padding: 0;
    box-shadow: none;
}
.hero2__field + .ss .ss__dropdown,
.hero2__field .ss__dropdown { min-width: 300px; }

/* SmartSelect dentro de search-bar / field-inline */
.field-inline .ss,
.field-inline + .ss {
    flex: 1; min-width: 0;
}
.search-bar .ss__trigger,
.field-inline .ss__trigger,
.field-inline + .ss .ss__trigger {
    border: none; background: transparent; padding: 0; box-shadow: none;
}
.search-bar .ss__dropdown,
.field-inline .ss__dropdown,
.field-inline + .ss .ss__dropdown { min-width: 300px; }

/* ---------- AJAX: toast, progreso ---------- */
.ajax-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: 1000; padding: 13px 22px; border-radius: 12px;
    font-size: .94rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 0 10px 36px rgba(10,10,10,.18);
    opacity: 0; transition: opacity .25s, transform .25s;
    pointer-events: none; white-space: nowrap;
}
.ajax-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ajax-toast--success { background: #0d7a3e; color: #fff; }
.ajax-toast--error   { background: #c72d2d; color: #fff; }
.ajax-toast i { font-size: 1.1rem; }

.upload-progress {
    margin-top: 12px; height: 8px; border-radius: 8px;
    background: var(--line); position: relative; overflow: hidden;
}
.upload-progress__fill {
    height: 100%; border-radius: 8px;
    background: var(--blue);
    transition: width .15s;
    width: 0%;
}
.upload-progress__text {
    position: absolute; right: 0; top: -22px;
    font-size: .78rem; font-weight: 600; color: var(--blue);
}

/* ---------- Lazy load ---------- */
img.lazy {
    opacity: 0;
    transition: opacity .35s ease;
    background: var(--surface);
}
img.lazy--loaded { opacity: 1; }
img.lazy--error { opacity: .4; }

/* ---------- Lightbox ---------- */
.lb {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0, 0, 0, .92);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility .2s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__img {
    max-width: 90vw; max-height: 86vh;
    object-fit: contain; border-radius: 6px; user-select: none;
    display: block; will-change: top, left, width, height;
}
.lb__close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff;
    font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.lb__close:hover { background: rgba(255,255,255,.25); }
.lb__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    border: none; background: rgba(255,255,255,.12); color: #fff;
    font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.lb__arrow:hover { background: rgba(255,255,255,.25); }
.lb__prev { left: 16px; }
.lb__next { right: 16px; }
.lb__counter {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.7); font-size: .88rem; font-weight: 500;
}
.lb__profile {
    position: absolute; bottom: 18px; right: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
    color: #fff; font-size: .85rem; font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.lb__profile:hover { background: rgba(255,255,255,.25); }
.lb__profile i { font-size: .8rem; }
@media (max-width: 600px) {
    .lb__profile { bottom: 14px; right: 14px; padding: 8px 14px; font-size: .8rem; }
}

/* Accesibilidad */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}