/* ============================================================
   Novatas Web Cam — Estilo "tipo app"
   Paleta: #DC186D (brand), #0B0B0B (fondo), #FFFFFF (texto)
   ============================================================ */

:root {
    --brand: #DC186D;
    --brand-dark: #A80F51;
    --brand-soft: rgba(220, 24, 109, 0.14);
    --bg: #0B0B0B;
    --bg-2: #141414;
    --bg-3: #1C1C1C;
    --surface: #161616;
    --surface-hover: #1F1F1F;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #FFFFFF;
    --text-dim: rgba(255, 255, 255, 0.78);
    --text-mute: rgba(255, 255, 255, 0.62);
    --danger: #ff4d6d;
    --success: #23c97e;

    --sidebar-w: 240px;
    --right-w: 260px;
    --header-h: 64px;
    --bottomnav-h: 64px;
    --radius: 14px;
    --radius-sm: 10px;

    --shadow-1: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-brand: 0 6px 22px rgba(220, 24, 109, 0.35);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* ── Accesibilidad: foco visible global (WCAG 2.4.7) ── */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Tarjetas y elementos con border-radius mayor */
.card:focus-visible,
.admin-card:focus-visible,
.story:focus-visible,
.btn:focus-visible {
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
/* Dentro del story viewer el outline se ve rosa sobre fondo oscuro */
.story-viewer *:focus-visible {
    outline-color: #ff4d94;
}

/* ── Touch targets minimos 44px (WCAG 2.5.5) ── */
.btn-sm { min-height: 44px; min-width: 44px; }
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
}
html, body { overflow-x: clip; }
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--brand); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ---------- Layout ---------- */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
    align-items: start;
    min-height: 100vh;
    max-width: 1300px;
    margin: 0 auto;
}
/* Paginas de admin: ancho completo, sin columna derecha */
.app--wide {
    grid-template-columns: var(--sidebar-w) 1fr;
    max-width: 1600px;
}
.app--wide .main { border-right: none; }

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #0B0B0B 0%, #141414 100%);
    border-right: 1px solid var(--border);
    padding: 16px 14px;
    z-index: 30;
    box-sizing: border-box;
}
.sidebar .brand {
    display: block;
    flex-shrink: 0;
    padding: 2px 4px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease;
}
.sidebar .brand:hover { transform: translateY(-1px); }
.brand-img {
    display: block;
    width: 100%;
    max-width: 185px;
    height: auto;
    border-radius: 8px;
}

.nav {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Al poner overflow-y en auto, overflow-x pasa a auto tambien (asi lo
       manda la especificacion). Y el enlace en hover se desplaza 2px a la
       derecha: esos 2px desbordaban y hacian aparecer una barra de scroll
       horizontal abajo del menu cada vez que pasabas el raton. */
    overflow-x: hidden;
    padding-right: 3px;   /* hueco para que el desplazamiento no se recorte */
    scrollbar-width: thin;
}
.nav a {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-weight: 600;
    font-size: 14px;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.nav a .ico {
    width: 20px; height: 20px;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), stroke .2s ease, filter .2s ease;
}
.nav a:hover {
    background: transparent;
    color: var(--brand);
    transform: translateX(2px);
}
.nav a:hover .ico {
    transform: scale(1.12);
}
.nav a.is-active {
    color: var(--text);
    background: linear-gradient(90deg, var(--brand-soft), transparent 80%);
}
.nav a.is-active::before {
    content: '';
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 3px; border-radius: 3px;
    background: var(--brand);
    box-shadow: 0 0 10px var(--brand);
}
.nav a.is-active .ico { color: var(--brand); }
.nav-sep {
    margin: 8px 8px;
    height: 1px; background: var(--border);
    flex-shrink: 0;
}
/* Saldo junto a "Mi saldo" en el menú */
.nav-pill {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(220, 24, 109, .16);
    color: #ff8ec0;
    font-size: 11.5px;
    font-weight: 800;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}
.nav-title {
    padding: 4px 12px; font-size: 10.5px; letter-spacing: 1.3px;
    text-transform: uppercase; color: var(--text-mute); font-weight: 700;
    flex-shrink: 0;
}

.sidebar-foot {
    flex-shrink: 0;
    margin-top: auto; padding: 12px 12px 0;
    border-top: 1px solid var(--border); color: var(--text-mute);
    font-size: 11.5px;
    line-height: 1.4;
}

/* ---------- Main ---------- */
.main {
    grid-column: 2;
    min-height: 100vh;
    display: flex; flex-direction: column;
    min-width: 0;
    overflow: visible;
    border-right: 1px solid var(--border);
}
.right-col {
    grid-column: 3;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    padding: 22px 12px 20px;
    overflow-y: auto;
    box-sizing: border-box;
}
/* El ad de la columna derecha se adapta al ancho disponible */
.right-col .ad-slot {
    width: 100%;
    margin: 0;
}

.topbar {
    position: sticky; top: 0; z-index: 20;
    height: var(--header-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
}
/* La topbar solo se muestra en movil: en desktop el menu lateral ya tiene todo */
.topbar--mobile { display: none; }
.topbar-spacer { flex: 1; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .mobile-menu { display: none; }
@media (max-width: 480px) {
    .topbar .right { gap: 6px; }
    .topbar .right .btn { font-size: 12px; padding: 6px 10px; min-height: 38px; min-width: auto; white-space: nowrap; }
}
@media (max-width: 360px) {
    .topbar .right .btn { font-size: 11px; padding: 5px 8px; }
}

/* ---------- Content Area ---------- */
.content {
    padding: 22px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

/* ---------- Hero (1/4 de pantalla) ---------- */
.hero {
    position: relative;
    height: 34vh;
    min-height: 260px;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        radial-gradient(1000px 400px at 20% 120%, rgba(220,24,109,.55), transparent 60%),
        radial-gradient(900px 380px at 90% -20%, rgba(220,24,109,.35), transparent 60%),
        linear-gradient(135deg, #140307 0%, #0B0B0B 60%);
    border: 1px solid var(--border-strong);
    display: flex; align-items: center;
    padding: 28px 32px;
    box-shadow: var(--shadow-1);
    margin-bottom: 22px;
}
.hero h1 {
    font-size: clamp(22px, 3.2vw, 40px);
    margin: 0 0 8px; font-weight: 800; letter-spacing: -0.5px;
}
.hero p { color: var(--text-dim); margin: 0 0 16px; max-width: 60ch; }
.hero .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
/* Hero interno (no-slider): más espacio vertical */
.hero:not(.hero-slider) { padding: 32px 32px 36px; }
@media (max-width: 600px) {
    .hero:not(.hero-slider) { padding: 20px 16px 24px; }
    .hero:not(.hero-slider) h1 { font-size: 20px; }
    .hero:not(.hero-slider) p  { font-size: 13.5px; }
}

/* ---------- Hero Slider ---------- */
.hero-slider {
    /* Hereda todo de .hero; solo necesita que el padding lo manejen los slides. */
    padding: 0;
    display: block;
}
/* Si el hero no es slider, nunca muestra dots ni arrows */
.hero:not(.hero-slider) .hero-dots,
.hero:not(.hero-slider) .hero-arrow { display: none !important; }
/* Si el slider tiene un solo slide, ocultar controles sin esperar JS */
.hero-slider .hero-slide:only-child ~ .hero-dots,
.hero-slider .hero-slide:only-child ~ .hero-arrow { display: none !important; }
.hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 36px 32px 48px;
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.85,.2,1.05);
    pointer-events: none;
}
.hero-slide.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.hero-slide > div {
    max-width: 720px;
}

/* Flechas */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(20,20,20,.55);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: grid; place-items: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .18s, border-color .18s, transform .18s;
    z-index: 3;
}
.hero-arrow:hover {
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-50%) scale(1.06);
}
.hero-arrow--prev { left: 14px; }
.hero-arrow--next { right: 14px; }

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 7px;
    padding: 6px 10px;
    background: rgba(0,0,0,.35);
    border: 1px solid var(--border);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 3;
}
.hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.35);
    padding: 0;
    cursor: pointer;
    transition: background .2s, width .2s;
}
.hero-dot:hover { background: rgba(255,255,255,.65); }
.hero-dot.is-active {
    background: var(--brand);
    width: 22px;
    border-radius: 4px;
}

@media (max-width: 900px) {
    .hero-slider { height: auto; min-height: 240px; }
    .hero-track  { min-height: 240px; }
}
@media (max-width: 600px) {
    .hero-slider  { min-height: 220px; margin-bottom: 14px; }
    .hero-track   { min-height: 220px; }
    .hero-slide   { padding: 24px 20px 44px; }
    .hero-slide h1 { font-size: 20px; margin-bottom: 4px; }
    .hero-slide p  { font-size: 13px; margin-bottom: 10px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    .hero-slide .hero-cta .btn { padding: 8px 14px; font-size: 13px; }
    .hero-dots    { bottom: 8px; padding: 4px 8px; }
    .hero-dot     { width: 6px; height: 6px; }
    .hero-dot.is-active { width: 16px; }
}
@media (max-width: 420px) {
    .hero-slider  { min-height: 200px; }
    .hero-track   { min-height: 200px; }
    .hero-slide   { padding: 20px 16px 40px; }
    .hero-slide h1 { font-size: 18px; }
    .hero-slide p  { font-size: 12.5px; -webkit-line-clamp: 2; }
    .hero-slide .hero-cta .btn { padding: 7px 12px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity .2s ease; transform: none; }
}

/* ---------- Tarjeta seleccionable (sin checkbox visible) ---------- */
.chk--block {
    position: relative;
    display: block;
    width: 100%;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
/* El input nativo no se muestra: la tarjeta entera es el control */
.chk--block input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    margin: 0;
    pointer-events: none;
}
.chk--block::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--brand);
    transform: scaleY(0);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.chk--block:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .045);
}
.chk--block:has(input:checked) {
    border-color: rgba(220, 24, 109, .55);
    background: linear-gradient(135deg, rgba(220, 24, 109, .13), rgba(255, 255, 255, .02) 65%);
    box-shadow: 0 2px 14px rgba(220, 24, 109, .14);
}
.chk--block:has(input:checked)::before { transform: scaleY(1); }
.chk--block:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.chk-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chk--block .chk-txt {
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
    transition: color .18s ease;
}
.chk--block:has(input:checked) .chk-txt { color: #fff; }
.chk-sub {
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .32);
    transition: color .18s ease;
}
.chk--block:has(input:checked) .chk-sub { color: rgba(255, 255, 255, .5); }

/* Respaldo para navegadores sin :has() */
@supports not selector(:has(*)) {
    .chk--block::before { display: none; }
    .chk--block input:checked ~ .chk-body .chk-txt { color: #fff; }
    .chk--block input:checked ~ .chk-body .chk-sub { color: rgba(255, 255, 255, .5); }
}

/* ---------- Barra de progreso de subida (admin) ---------- */
.pf-progress {
    padding: 14px 16px;
    background: var(--bg-3);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    animation: pfpIn .22s ease;
}
.pf-progress[hidden] { display: none !important; }
@keyframes pfpIn { from { opacity: 0; transform: translateY(-5px) } to { opacity: 1; transform: none } }
.pfp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.pfp-stage { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.pfp-pct { font-size: 14px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.pfp-track { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pfp-fill {
    height: 100%; width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #DC186D, #ff4d94);
    transition: width .25s ease;
    position: relative; overflow: hidden;
}
.pfp-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: pfpShine 1.1s linear infinite;
}
@keyframes pfpShine { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.pfp-note { font-size: 11.5px; color: rgba(255, 255, 255, .4); margin-top: 7px; min-height: 14px; }

.pf-progress.is-done .pfp-fill { background: linear-gradient(90deg, #16a34a, #22c55e); }
.pf-progress.is-done .pfp-fill::after { animation: none; opacity: 0; }
.pf-progress.is-done .pfp-pct { color: #22c55e; }
.pf-progress.is-error { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .06); }
.pf-progress.is-error .pfp-fill { background: #ef4444; }
.pf-progress.is-error .pfp-fill::after { animation: none; opacity: 0; }
.pf-progress.is-error .pfp-stage { color: #ef4444; }
.pf-progress.is-error .pfp-pct { display: none; }

/* ---------- Botones circulares de accion (tablas del admin) ---------- */
.iconbtn {
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .04);
    color: var(--text-dim);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: background .16s ease, border-color .16s ease, color .16s ease,
                transform .16s ease, box-shadow .16s ease;
}
.iconbtn svg {
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.iconbtn:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    transform: translateY(-1px);
}
.iconbtn:active { transform: translateY(0) scale(.94); }
.iconbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Activo / destacado */
.iconbtn.is-on,
.iconbtn--primary {
    background: linear-gradient(135deg, var(--brand), #ff2e82);
    border-color: transparent;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(220, 24, 109, .35);
}
.iconbtn.is-on:hover,
.iconbtn--primary:hover {
    background: linear-gradient(135deg, #ff2e82, var(--brand));
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(220, 24, 109, .5);
}
.iconbtn.is-on svg { fill: rgba(255, 255, 255, .3); }

/* Destructivo */
.iconbtn--danger { color: rgba(255, 255, 255, .45); }
.iconbtn--danger:hover {
    background: rgba(239, 68, 68, .18);
    border-color: rgba(239, 68, 68, .5);
    color: #f87171;
}

/* Suspender / pausar */
.iconbtn--warn:hover {
    background: rgba(255, 200, 0, .15);
    border-color: rgba(255, 200, 0, .45);
    color: #ffc800;
}

.admin-actions,
.post-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
}
.admin-actions form,
.post-actions form { display: inline-flex; margin: 0; }

/* ============================================================
   Reacciones unificadas (historias + galeria)
   Pildora horizontal con iconos de corazon
   ============================================================ */
.rx {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, .68);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.rx-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.rx-btn:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.rx-btn:active { transform: scale(.94); }
.rx-ico {
    font-size: 22px;
    line-height: 1;
    filter: grayscale(1) opacity(.7);
    transition: filter .18s, transform .18s;
}
.rx-btn:hover .rx-ico { filter: grayscale(.3) opacity(1); transform: scale(1.06); }
.rx-n { min-width: 10px; text-align: left; }

/* Estados activos */
.rx-btn.on .rx-ico { filter: none; transform: scale(1.15); }
.rx-btn--like.on {
    background: rgba(220, 24, 109, .28);
    color: #ff8ec0;
    box-shadow: inset 0 0 0 1.5px rgba(220, 24, 109, .6), 0 0 16px rgba(220, 24, 109, .3);
}
.rx-btn--nope.on {
    background: rgba(148, 163, 184, .22);
    color: #e2e8f0;
    box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, .45);
}

/* Animacion al votar */
@keyframes rxPop {
    0%   { transform: scale(1) }
    40%  { transform: scale(1.35) }
    100% { transform: scale(1) }
}
.rx-btn.pop .rx-ico { animation: rxPop .42s cubic-bezier(.2, .9, .3, 1.4); }

@media (max-width: 600px) {
    .rx { gap: 4px; padding: 5px 6px; }
    .rx-btn { padding: 10px 16px; font-size: 15px; gap: 7px; }
    .rx-ico { font-size: 20px; }
}

/* ============================================================
   Panel de bienvenida al iniciar sesion
   ============================================================ */
.wp {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 8800;
    width: min(320px, calc(100vw - 28px));
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity .28s ease, transform .3s cubic-bezier(.2, .9, .3, 1.15);
}
.wp[hidden] { display: none !important; }
.wp.is-in { opacity: 1; transform: none; }
/* Si el aviso de cookies esta visible, el panel sube para no taparlo */
body:has(.ck:not([hidden])) .wp { bottom: 132px; }

.wp-card {
    background: linear-gradient(160deg, #1b1014 0%, #141414 55%);
    border: 1px solid rgba(220, 24, 109, .3);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03);
    overflow: hidden;
}

/* --- Cabecera --- */
.wp-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 15px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.wp-av {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--brand);
}
.wp-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wp-who strong {
    font-size: 14px;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-sub {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px;
    color: var(--text-mute);
}
.wp-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 7px rgba(34, 197, 94, .7);
    flex-shrink: 0;
}
.wp-x {
    width: 27px; height: 27px;
    flex-shrink: 0;
    border: 0; border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .45);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.wp-x:hover { background: rgba(255, 255, 255, .13); color: #fff; }

/* --- Metricas del dia --- */
.wp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.wp-stat {
    background: #141414;
    padding: 12px 8px;
    text-align: center;
    display: flex; flex-direction: column; gap: 2px;
}
.wp-n {
    font-size: 19px;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.wp-l { font-size: 10px; color: var(--text-mute); line-height: 1.3; }

/* --- Aviso de pendientes --- */
.wp-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 13px 0;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(255, 200, 0, .1);
    border: 1px solid rgba(255, 200, 0, .25);
    color: #ffc800;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.wp-alert:hover { background: rgba(255, 200, 0, .18); color: #ffc800; }
.wp-alert-n {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffc800;
    color: #2a1f00;
    font-size: 12px;
    font-weight: 800;
}

.wp-msg {
    margin: 14px 15px 0;
    font-size: 13px;
    color: var(--text-dim);
}

/* --- Acciones --- */
.wp-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 13px 14px;
}
.wp-act {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .025);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.wp-act svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wp-act:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
    transform: translateX(2px);
}
.wp-act--main {
    background: linear-gradient(135deg, var(--brand), #ff2e82);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 14px rgba(220, 24, 109, .32);
}
.wp-act--main:hover {
    background: linear-gradient(135deg, #ff2e82, var(--brand));
    border-color: transparent;
    color: #fff;
}

@media (max-width: 600px) {
    .wp {
        right: 10px; left: 10px;
        bottom: calc(var(--bottomnav-h, 60px) + 10px);
        width: auto;
    }
    .wp-stats { grid-template-columns: repeat(3, 1fr); }
    .wp-n { font-size: 17px; }
}

/* ============================================================
   Cookies
   ============================================================ */
.ck { position: fixed; inset: 0; z-index: 9500; pointer-events: none; }
.ck[hidden] { display: none !important; }
body.ck-open .ck { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); pointer-events: auto; }

/* --- Aviso inferior --- */
.ck-bar {
    position: absolute;
    left: 50%; bottom: 18px;
    transform: translateX(-50%);
    width: min(940px, calc(100vw - 28px));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 22px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .65);
    pointer-events: auto;
    animation: ckIn .26s cubic-bezier(.2, .9, .3, 1);
}
.ck-bar[hidden] { display: none !important; }
/* Visitante europeo: nada cargado todavia, se marca con acento de marca */
.ck-bar--strict { border-color: rgba(220, 24, 109, .35); }
.ck-bar--strict .ck-txt strong { color: var(--brand); }

/* Salida suave cuando se acepta solo (scroll o permanencia) */
.ck.ck-auto .ck-bar {
    animation: ckOut .26s cubic-bezier(.4, 0, 1, 1) forwards;
}
@keyframes ckOut {
    to { opacity: 0; transform: translate(-50%, 22px); }
}
@keyframes ckIn { from { opacity: 0; transform: translate(-50%, 18px) } to { opacity: 1; transform: translate(-50%, 0) } }

.ck-txt { flex: 1; min-width: 0; }
.ck-txt strong { display: block; font-size: 14.5px; color: #fff; margin-bottom: 4px; }
.ck-txt p { margin: 0; font-size: 12.8px; line-height: 1.55; color: var(--text-dim); }
.ck-txt a { color: var(--brand); text-decoration: underline; }

.ck-btns { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ck-b {
    padding: 10px 17px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .04);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.ck-b:hover { background: rgba(255, 255, 255, .09); color: #fff; transform: translateY(-1px); }
.ck-b--ok {
    background: linear-gradient(135deg, var(--brand), #ff2e82);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 14px rgba(220, 24, 109, .35);
}
.ck-b--ok:hover { background: linear-gradient(135deg, #ff2e82, var(--brand)); color: #fff; }

/* --- Panel de preferencias --- */
.ck-panel {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 28px));
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
    pointer-events: auto;
    overflow: hidden;
    animation: ckPop .22s cubic-bezier(.2, .9, .3, 1);
}
.ck-panel[hidden] { display: none !important; }
@keyframes ckPop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }

.ck-panel-head {
    display: flex; align-items: center;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ck-panel-head h3 { margin: 0; font-size: 16px; color: #fff; flex: 1; }
.ck-x {
    width: 30px; height: 30px;
    border: 0; border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .55);
    font-size: 21px; line-height: 1; cursor: pointer;
}
.ck-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ck-cats { padding: 16px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ck-cat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.ck-cat:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); }
.ck-cat input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-cat:has(input:checked) {
    border-color: rgba(220, 24, 109, .5);
    background: linear-gradient(135deg, rgba(220, 24, 109, .1), rgba(255, 255, 255, .02) 70%);
}
.ck-cat.is-locked { cursor: default; opacity: .8; }

.ck-cat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ck-cat-name { font-size: 13.5px; font-weight: 800; color: rgba(255, 255, 255, .85); }
.ck-cat:has(input:checked) .ck-cat-name { color: #fff; }
.ck-cat-sub { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .35); }

/* Interruptor */
.ck-sw {
    flex-shrink: 0;
    width: 40px; height: 23px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    position: relative;
    transition: background .18s;
}
.ck-sw i {
    position: absolute;
    top: 3px; left: 3px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: transform .2s cubic-bezier(.2, .9, .3, 1.3), background .18s;
}
.ck-cat:has(input:checked) .ck-sw { background: var(--brand); }
.ck-cat:has(input:checked) .ck-sw i { transform: translateX(17px); background: #fff; }
.ck-sw--fixed { background: rgba(220, 24, 109, .45); }
.ck-sw--fixed i { transform: translateX(17px); background: rgba(255, 255, 255, .8); }

.ck-panel-foot {
    display: flex; gap: 9px; justify-content: flex-end;
    padding: 16px 22px 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Boton flotante para reabrir */
.ck-reopen {
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 800;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(20, 20, 20, .9);
    color: rgba(255, 255, 255, .4);
    cursor: pointer;
    opacity: .45;
    transition: opacity .18s, color .18s, border-color .18s;
}
.ck-reopen:hover { opacity: 1; color: var(--brand); border-color: var(--brand); }
.ck-reopen svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }

@media (max-width: 760px) {
    .ck-bar { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 18px; bottom: 12px; }
    .ck-btns { justify-content: stretch; }
    .ck-btns .ck-b { flex: 1; text-align: center; }
    .ck-reopen { bottom: calc(var(--bottomnav-h, 60px) + 12px); left: 12px; width: 34px; height: 34px; }
}

/* ============================================================
   Reproductor de video
   El menu nativo se recorta con controlsList en el HTML
   (nodownload / noplaybackrate). Aqui solo el aspecto.
   ============================================================ */
video {
    /* Acento rosa en la barra de progreso y el volumen (WebKit) */
    accent-color: var(--brand);
}
video::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, .78));
}
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
video::-webkit-media-controls-timeline {
    padding: 0 8px;
}
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    font-weight: 600;
}
/* Ocultar el boton de descarga si el navegador ignora controlsList */
video::-internal-media-controls-download-button { display: none; }
video::-webkit-media-controls-enclosure { overflow: hidden; }

/* ============================================================
   Proteccion de contenido
   Nota: ninguna de estas reglas impide una captura de pantalla
   (eso lo hace el sistema operativo, fuera del navegador).
   Solo dificultan la copia casual y hacen rastreable el material.
   ============================================================ */

/* Nada de seleccionar ni arrastrar el contenido multimedia */
.feed-media-item img, .feed-media-item video,
.lb-media, .profile-gallery img, .story .ring img,
.sv-video, .sv-image {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: auto;
}

/* Difuminado al perder el foco.
   Sin transicion: debe aplicarse en el mismo frame o no sirve de nada. */
body.guard-blur .feed-gallery,
body.guard-blur .lb-stage,
body.guard-blur .profile-gallery,
body.guard-blur .sv-stage,
body.guard-blur .profile-cover,
body.guard-blur .profile-photo,
body.guard-blur .story .ring,
body.guard-blur .card .thumb {
    filter: blur(34px) saturate(.35) brightness(.45);
}

/* Un video externo nunca se difumina: el iframe se lleva el foco al
   pulsar play y no hay forma de distinguirlo de un cambio de ventana */
body.guard-blur .feed-media-item.is-embed,
body.guard-blur .feed-embed {
    filter: none !important;
}

/* Capa opaca por encima: si el navegador tarda en pintar el blur,
   esto ya esta cubriendo el contenido. */
body.guard-blur .lb-stage::before,
body.guard-blur .sv-stage::before {
    content: 'Contenido protegido';
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(11, 11, 11, .93);
    color: rgba(255, 255, 255, .4);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
}

/* Marca de agua RETIRADA.
   Estampaba el usuario y la fecha en diagonal sobre el contenido
   exclusivo. Se quito porque ensuciaba fotos y videos.
   La regla se queda para tapar cualquier marca que haya quedado
   pintada en un navegador con la version anterior cacheada. */
.guard-wm { display: none !important; }

/* Al imprimir no se ve nada */
@media print {
    body * { visibility: hidden !important; }
    body::before {
        content: 'Contenido protegido - Novatas Web Cam';
        visibility: visible;
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 22px;
        font-family: sans-serif;
        color: #000;
    }
}

.guard-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .88);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    animation: gtIn .2s ease;
}
@keyframes gtIn { from { opacity: 0; transform: translate(-50%, 10px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ---------- Menu flotante de fila (3 puntos) ---------- */
.rowmenu { position: relative; display: inline-flex; }

.rowmenu-btn {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.rowmenu-btn svg { width: 17px; height: 17px; fill: currentColor; pointer-events: none; }
.rowmenu-btn:hover {
    background: rgba(255, 255, 255, .07);
    border-color: var(--border);
    color: #fff;
}
.rowmenu.is-open .rowmenu-btn {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* position:fixed para que no lo recorte el overflow de la tabla */
.rowmenu-pop {
    position: fixed;
    z-index: 900;
    min-width: 186px;
    padding: 6px;
    border-radius: 12px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
    display: none;
    flex-direction: column;
    gap: 1px;
    animation: rmIn .13s ease;
}
.rowmenu.is-open .rowmenu-pop { display: flex; }
@keyframes rmIn { from { opacity: 0; transform: translateY(-5px) } to { opacity: 1; transform: none } }

.rowmenu-pop form { display: block; margin: 0; }

.rmi {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background .13s, color .13s;
}
.rmi svg {
    width: 15px; height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rmi:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.rmi--on { color: var(--brand); }
.rmi--on svg { fill: rgba(220, 24, 109, .25); }
.rmi--danger { color: #f87171; }
.rmi--danger:hover { background: rgba(239, 68, 68, .14); color: #fca5a5; }
.rmi--warn { color: #fbbf24; }
.rmi--warn:hover { background: rgba(255, 200, 0, .12); color: #ffc800; }
.rmi--ok { color: #4ade80; }
.rmi--ok:hover { background: rgba(34, 197, 94, .13); color: #86efac; }

.rowmenu-sep {
    height: 1px;
    margin: 5px 4px;
    background: rgba(255, 255, 255, .08);
}

/* ---------- Leyenda de metricas (compartida) ---------- */
.metrics-help {
    padding: 18px 22px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
}
.metrics-help h4 { margin: 0 0 12px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.metrics-help dl {
    margin: 0;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 9px 18px;
    font-size: 12.5px;
    line-height: 1.55;
}
.metrics-help dt { font-weight: 700; color: var(--brand); }
.metrics-help dd { margin: 0; color: rgba(255, 255, 255, .55); }
.metrics-help dd strong { color: rgba(255, 255, 255, .8); }
.mh-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    font-size: 12px;
    color: rgba(255, 255, 255, .35);
    line-height: 1.55;
}
@media (max-width: 700px) {
    .metrics-help dl { grid-template-columns: 1fr; gap: 3px; }
    .metrics-help dd { margin-bottom: 9px; }
}

/* ---------- Analiticas en la tabla de fichas ---------- */
.fch-table th { white-space: nowrap; }
.fch-table .c-num { width: 72px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fch-table .c-dev { width: 118px; }
.fch-ctr { font-weight: 700; font-size: 12.5px; }
.fch-ctr.good { color: #22c55e; }
.fch-ctr.mid  { color: #fbbf24; }
.fch-ctr.zero { color: rgba(255, 255, 255, .22); }
.fch-wa {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(37, 211, 102, .15);
    color: #25d366;
    font-weight: 800;
    font-size: 12.5px;
}
.fch-zero { color: rgba(255, 255, 255, .22); font-size: 12px; }
.fch-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.06); }
.fch-bar span { display: block; height: 100%; }
.fch-bar .b-m { background: #DC186D; }
.fch-bar .b-t { background: #f59e0b; }
.fch-bar .b-d { background: #38bdf8; }
.fch-devtxt { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 5px; font-size: 10px; font-weight: 700; }
.fch-devtxt .d-m { color: #DC186D; }
.fch-devtxt .d-t { color: #f59e0b; }
.fch-devtxt .d-d { color: #38bdf8; }
@media (max-width: 1400px) { .fch-table { min-width: 1240px; } }

/* ---------- Aviso de datos demo ---------- */
.demo-warn {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(255, 200, 0, .07), rgba(22, 22, 22, .9) 70%);
    border: 1px solid rgba(255, 200, 0, .28);
}
.dw-ico {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 200, 0, .16);
    color: #ffc800;
    font-size: 19px;
    font-weight: 800;
}
.dw-body { min-width: 0; }
.dw-body h3 {
    margin: 2px 0 8px;
    font-size: 15.5px;
    color: #ffc800;
}
.dw-body p {
    margin: 0 0 9px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-dim);
}
.dw-body p strong { color: rgba(255, 255, 255, .9); }
.dw-body em { color: rgba(255, 255, 255, .75); font-style: normal; background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 5px; }
@media (max-width: 600px) {
    .demo-warn { flex-direction: column; gap: 12px; padding: 16px; }
}

/* ---------- Botones de accion del admin ---------- */
.adm-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.abtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .04);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease,
                transform .16s ease, box-shadow .16s ease;
}
.abtn svg {
    width: 15px; height: 15px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.abtn:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
    transform: translateY(-1px);
}
.abtn:active { transform: translateY(0); }
/* El tamano tampoco debe heredarse del contenedor */
.section-title .abtn,
.hero .abtn,
.admin-bar .abtn { font-size: 13px; }

/* Colores fijos con !important: estos botones viven dentro de contenedores
   (.section-title, .hero, .admin-bar) que reescriben el color de los enlaces. */
.abtn--primary,
a.abtn--primary,
.abtn--primary:hover,
a.abtn--primary:hover,
.abtn--primary:visited {
    color: #fff !important;
    border-color: transparent;
}
.abtn--primary {
    background: linear-gradient(135deg, var(--brand), #ff2e82);
    box-shadow: 0 3px 14px rgba(220, 24, 109, .35);
}
.abtn--primary:hover {
    background: linear-gradient(135deg, #ff2e82, var(--brand));
    box-shadow: 0 6px 20px rgba(220, 24, 109, .48);
}
.abtn--primary:hover svg { transform: rotate(90deg); }

.abtn--danger {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .3);
    color: #f87171;
}
.abtn--danger:hover {
    background: rgba(239, 68, 68, .2);
    border-color: rgba(239, 68, 68, .55);
    color: #fca5a5;
}

@media (max-width: 600px) {
    .abtn { padding: 8px 12px; font-size: 12.5px; }
    .abtn span { display: none; }   /* en movil solo el icono */
    .abtn--primary span { display: inline; }
}

/* ---------- Barra de administracion en paginas publicas ---------- */
.admin-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 11px 16px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(220, 24, 109, .14), rgba(22, 22, 22, .9) 70%);
    border: 1px solid rgba(220, 24, 109, .3);
}
.admin-bar__tag {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--brand);
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
}
.admin-bar__txt {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}
.admin-bar__txt strong { color: rgba(255, 255, 255, .9); text-transform: capitalize; }
.admin-bar__actions {
    margin-left: auto;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
@media (max-width: 700px) {
    .admin-bar__actions { margin-left: 0; width: 100%; }
    .admin-bar__actions .btn { flex: 1; }
}

/* ---------- Stories: carrusel de 8 con flechas ---------- */
.stories-wrap {
    position: relative;
}
.stories-arrow {
    position: absolute;
    top: 34px;                 /* centrado sobre el circulo, no sobre el nombre */
    z-index: 4;
    width: 32px; height: 32px;
    display: none;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: rgba(18, 18, 18, .92);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 3px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
    transition: background .15s, transform .15s, opacity .15s;
}
.stories-wrap.has-nav .stories-arrow { display: grid; }
.stories-arrow:hover { background: var(--brand); border-color: var(--brand); transform: scale(1.08); }
.stories-arrow[hidden] { display: none !important; }
.stories-prev { left: -14px; }
.stories-next { right: -14px; }

/* Con .stories--8 el rail muestra exactamente 8 circulos por pagina */
.stories--8 .story {
    --gap: 14px;
    width: calc((100% - var(--gap) * 7) / 8);
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
}
/* El anillo deja de ser fijo de 72px y se adapta al ancho de la celda */
.stories--8 .story .ring {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}
.stories--8 .story img,
.stories--8 .story .ring > div.placeholder {
    width: calc(100% - 6px);
    height: auto;
    aspect-ratio: 1 / 1;
}

/* ---------- Stories (estilo Instagram) ---------- */
.stories {
    display: flex; gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 2px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
}
.stories::-webkit-scrollbar { display: none; }

/* Dentro del perfil de la modelo: menos padding, items alineados a la izquierda */
.stories--profile {
    padding: 8px 0 12px;
    gap: 16px;
}

.story {
    flex: 0 0 auto;
    width: 78px;
    text-align: center;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
    display: block;
}
.story .ring {
    width: 72px; height: 72px; border-radius: 50%;
    padding: 2px;
    background: linear-gradient(145deg, #FF4D94, var(--brand) 55%, #8B0F46);
    display: grid; place-items: center;
    transition: transform .2s;
}
.story:hover .ring { transform: scale(1.04); }
.story .ring.seen {
    background: linear-gradient(135deg, #333, #555);
}
.story .ring.add {
    background: var(--bg-3);
    border: 2px dashed var(--brand);
}
/* Historia destacada: mismo tono de marca con degradado al oscuro
   y un halo suave. Anillo fino, sin rotacion. */
.story .ring.featured {
    background: linear-gradient(145deg, #FF4D94 0%, var(--brand) 45%, #6E0A37 100%);
    /* inset = brillo por dentro del marco; el resto es un halo exterior tenue */
    box-shadow:
        inset 0 0 8px 1px rgba(255, 138, 186, .95),
        inset 0 0 3px rgba(255, 255, 255, .6),
        0 0 10px rgba(220, 24, 109, .3);
    transition: box-shadow .25s ease, transform .2s ease;
}
/* La foto proyecta luz hacia el marco, reforzando el brillo interno */
.story .ring.featured > img,
.story .ring.featured > div.placeholder {
    border-color: #1a040d;
    box-shadow: 0 0 9px 1px rgba(255, 77, 148, .55);
}
.story:hover .ring.featured {
    box-shadow:
        inset 0 0 11px 2px rgba(255, 158, 198, 1),
        inset 0 0 4px rgba(255, 255, 255, .8),
        0 0 16px rgba(220, 24, 109, .45);
}
.story:hover .ring.featured > img,
.story:hover .ring.featured > div.placeholder {
    box-shadow: 0 0 13px 2px rgba(255, 77, 148, .8);
}
.story .ring.featured::after {
    content: '★';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 17px; height: 17px;
    background: linear-gradient(145deg, #FF4D94, var(--brand));
    color: #fff;
    font-size: 9.5px;
    line-height: 1;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
    border: 2px solid var(--bg);
}
.story .ring { position: relative; }

/* Story como botón: que parezca un div, sin estilo default */
button.story {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.story img, .story .ring > div.placeholder {
    width: 66px; height: 66px; border-radius: 50%;
    background: #0B0B0B; border: 2px solid #0B0B0B;
    object-fit: cover;
}
.story .name {
    font-size: 11.5px; color: var(--text-dim);
    margin-top: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Historia solo para suscriptores ── */
/* Anillo dorado: se distingue del rosa (normal) y del rosa brillante (destacada) */
.story .ring.premium {
    background: linear-gradient(145deg, #ffe08a, #ffb020 55%, #8a5a00);
}
.story .ring.premium.featured {
    box-shadow:
        inset 0 0 8px 1px rgba(255, 224, 138, .95),
        inset 0 0 3px rgba(255, 255, 255, .6),
        0 0 10px rgba(255, 176, 32, .35);
}
.story .ring.premium.featured::after {
    background: linear-gradient(145deg, #ffe08a, #ffb020);
    color: #3a2400;
}
/* Sin suscripcion: la foto atenuada y un candado encima */
.story--locked .ring > img { filter: grayscale(.4) brightness(.55); }
.story--locked:hover .ring > img { filter: grayscale(.2) brightness(.7); }
.story-lock {
    position: absolute;
    inset: 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    pointer-events: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
.story-lock svg {
    width: 24px; height: 24px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .9));
}
/* El contador de historias por modelo se retiro: las barritas de arriba
   del visor ya dicen cuantas hay y por cual vas. */
/* Publicidad entre historias: ocupa el hueco de la historia */
.sv-ad {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background: #0a0a0d;
}
.sv-ad-on .sv-ad { display: flex; }
.sv-ad__tag {
    position: absolute;
    top: 52px; left: 16px;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .32);
    pointer-events: none;
}
.sv-ad__box {
    display: grid;
    place-items: center;
    max-width: 100%;
    overflow: hidden;
}
.sv-ad__box ins { max-width: 100%; }
/* Las zonas de toque siguen activas encima: se puede pasar al momento */
.sv-ad-on .sv-tap, .sv-ad-on .sv-prev, .sv-ad-on .sv-next { z-index: 5; }
/* Sin reacciones ni nombre en el anuncio */
.sv-ad-on .sv-reactions { display: none !important; }
.sv-ad-on .sv-avatar { visibility: hidden; }

/* Aviso dentro del visor cuando la historia es solo para suscriptores */
.sv-lock {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 26px;
    text-align: center;
    background: radial-gradient(80% 60% at 50% 45%, rgba(255, 200, 0, .12), rgba(8, 8, 12, .96) 70%);
}
.sv-locked .sv-lock { display: flex; }
.sv-lock svg { width: 40px; height: 40px; color: #ffd54a; }
.sv-lock strong { font-size: 17px; font-weight: 800; }
.sv-lock span {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
    max-width: 260px;
}
.sv-lock .btn { margin-top: 4px; }
/* Las zonas de toque siguen encima del aviso: se puede seguir pasando a
   la siguiente en vez de quedarse atascado aqui. (Las flechas ya van a
   z-index 6 de serie.) */
.sv-locked .sv-tap { z-index: 5; }
/* Pero el boton de suscribirse no debe quedar tapado por la zona de toque */
.sv-lock .btn { position: relative; z-index: 6; }
/* Etiqueta suave para contar historias libres */
.gal-prem-tag--soft {
    background: rgba(255, 255, 255, .08);
    color: var(--text-dim);
}

/* ---------- Tarjetas genéricas ---------- */
.section-title {
    display: flex; align-items: center; justify-content: space-between;
    margin: 10px 0 14px;
    flex-wrap: wrap; gap: 8px;
}
.section-title h2 { margin: 0; font-size: 18px; letter-spacing: -.2px; }
/* :not(.abtn) para que los botones de accion conserven su propio color.
   Sin esto el texto del boton rosa quedaba rosa sobre rosa (invisible). */
.section-title a:not(.abtn) { color: var(--text-mute); font-size: 13px; }
.section-title a:not(.abtn):hover { color: var(--brand); }

.grid-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    display: flex; flex-direction: column;
}
.card:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: var(--shadow-brand);
}
.card .thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #1a1a1a, #2a0a17);
    overflow: hidden;
}
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .live-dot {
    position: absolute; top: 10px; left: 10px;
    background: var(--brand);
    color: #fff; font-weight: 700; font-size: 11px;
    padding: 4px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.card .live-dot::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: pulse 1.2s infinite;
}
.card .badge-verified {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,.75); color: #fff;
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px;
}
.card .body { padding: 14px 16px 16px; }
.card .name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.card .meta { color: var(--text-mute); font-size: 12px; display: flex; gap: 10px; }
.card .meta .dot { opacity: .4; }

/* ---------- Ficha destacada ---------- */
@property --nwc-glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.card.is-featured {
    position: relative;
    z-index: 1;
    border-color: rgba(220, 24, 109, 0.55);
    box-shadow: 0 0 0 1px rgba(220, 24, 109, 0.25), 0 10px 28px -12px rgba(220, 24, 109, 0.45);
}
.card.is-featured::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius) + 2px);
    padding: 2px;
    background: conic-gradient(
        from var(--nwc-glow-angle, 0deg),
        transparent 0deg,
        transparent 230deg,
        rgba(220, 24, 109, 0.15) 260deg,
        rgba(255, 95, 166, 0.95) 300deg,
        #ffffff 320deg,
        rgba(255, 95, 166, 0.95) 340deg,
        rgba(220, 24, 109, 0.15) 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: nwc-card-glow 5s linear infinite;
    pointer-events: none;
    z-index: 2;
}
/* Fallback para navegadores sin @property (Safari <16.4) — degrada a un borde pulsante sutil */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .card.is-featured::before { display: none; }
    .card.is-featured {
        animation: nwc-card-pulse 5s ease-in-out infinite;
    }
}
@keyframes nwc-card-glow {
    to { --nwc-glow-angle: 360deg; }
}
@keyframes nwc-card-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(220, 24, 109, 0.25), 0 10px 28px -12px rgba(220, 24, 109, 0.45); }
    50%      { box-shadow: 0 0 0 2px rgba(220, 24, 109, 0.65), 0 14px 34px -10px rgba(255, 95, 166, 0.75); }
}
.card .badge-featured {
    position: absolute; top: 10px; left: 10px;
    background: linear-gradient(135deg, var(--brand), #ff5fa6);
    color: #fff; font-size: 12px; font-weight: 700;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(220, 24, 109, 0.55);
    z-index: 3;
}
/* Si coincide con live-dot, empuja la estrella un poco a la derecha */
.card .live-dot + .badge-verified + .badge-featured,
.card .live-dot ~ .badge-featured {
    left: auto; right: 40px; top: 10px;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
    transition: transform .15s, background .15s, border-color .15s, color .15s;
    cursor: pointer;
}
.btn-primary {
    background: var(--brand); color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost {
    background: transparent; color: var(--text); border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-dark { background: #000; color: #fff; border-color: var(--border-strong); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg { padding: 14px 24px; font-size: 15px; }

/* ---------- Formularios ---------- */
.form {
    max-width: 440px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
}
.form.wide { max-width: 720px; }
.form h1 { margin: 0 0 6px; font-size: 22px; }
.form .lead { color: var(--text-dim); margin: 0 0 22px; font-size: 14px; }

.field { margin-bottom: 14px; }
.field label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--text-dim); margin-bottom: 6px; letter-spacing: .2px;
}
/* Una casilla no es un campo de texto: sin esto el width:100% de abajo
   la estira a todo el ancho del formulario y queda enorme y descolocada.
   Era justo lo que pasaba con los interruptores de las pasarelas. */
.field input[type="checkbox"],
.field input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: var(--brand);
}
.field input, .field textarea, .field select {
    width: 100%;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: 14px;
    min-height: 44px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .hint { color: var(--text-mute); font-size: 12px; margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* En la web publica, el formulario ocupa la columna central entera, igual
   que las publicaciones: una tarjeta de 440px en medio de una columna de
   800 dejaba dos franjas vacias a los lados y cada pagina parecia tener un
   ancho distinto. El panel de admin conserva su medida. */
.app:not(.app--wide) .form {
    max-width: none;
    padding: 28px 32px 30px;
}
@media (max-width: 600px) {
    .app:not(.app--wide) .form { padding: 22px 18px 24px; }
}

/* ── Registro: contraseña con ojo, medidor y confirmación ── */
.field label .opt {
    margin-left: 6px;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-mute);
    text-transform: lowercase;
}

.pw { position: relative; }
.pw input { padding-right: 44px; }
.pw-eye {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mute);
    cursor: pointer;
}
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye:hover { color: #fff; background: rgba(255, 255, 255, .06); }
/* Ojo abierto por defecto; tachado cuando la contraseña está a la vista */
.pw-eye .eye-off { display: none; }
.pw-eye.is-on .eye-open { display: none; }
.pw-eye.is-on .eye-off { display: block; }

/* Medidor de fuerza: cuatro barritas que se van encendiendo */
.pw-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 8px;
}
.pw-meter i {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    transition: background .2s ease;
}
.pw-meter.lvl-1 i:nth-child(-n+1) { background: #ff4d6d; }
.pw-meter.lvl-2 i:nth-child(-n+2) { background: #ffb020; }
.pw-meter.lvl-3 i:nth-child(-n+3) { background: #7dd3fc; }
.pw-meter.lvl-4 i:nth-child(-n+4) { background: #23c97e; }

/* Confirmación: el aviso cambia de color con el estado del campo */
.field.is-bad input { border-color: rgba(255, 77, 109, .7) !important; }
.field.is-ok  input { border-color: rgba(35, 201, 126, .55) !important; }
.field.is-bad .pw-match { color: #ffb7c1; }
.field.is-ok  .pw-match { color: #b6f3d5; }
.pw-match:empty { display: none; }

/* Casilla de mayoría de edad y términos */
.chk--terms {
    position: relative;   /* el input oculto se ancla aquí, no al body */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-3);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dim);
    transition: border-color .15s ease;
}
.chk--terms:hover { border-color: rgba(255, 255, 255, .2); }
.chk--terms input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.chk--terms .chk-box {
    position: relative;
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 1px;
    border: 2px solid rgba(255, 255, 255, .26);
    border-radius: 5px;
    transition: background .15s ease, border-color .15s ease;
}
.chk--terms input:checked + .chk-box {
    background: var(--brand);
    border-color: var(--brand);
}
.chk--terms input:checked + .chk-box::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 4px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.chk--terms input:focus-visible + .chk-box {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.chk--terms input:user-invalid + .chk-box { border-color: rgba(255, 77, 109, .7); }
.chk--terms .chk-txt a { color: var(--brand); font-weight: 600; }

.alert { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; border: 1px solid; font-size: 14px; }
.alert-info { background: rgba(35, 201, 126, .08); border-color: rgba(35,201,126,.4); color: #b6f3d5; }
.alert-warn { background: rgba(255, 193, 7, .08); border-color: rgba(255,193,7,.4); color: #ffe39a; }
.alert-error { background: rgba(255, 77, 109, .08); border-color: rgba(255, 77, 109, .45); color: #ffb7c1; }
.alert-success { background: rgba(35, 201, 126, .12); border-color: rgba(35,201,126,.5); color: #b6f3d5; }

/* ---------- Planes de suscripción ---------- */
.plans {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.plan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    position: relative;
    transition: transform .2s, border-color .2s;
}
.plan:hover { transform: translateY(-3px); border-color: var(--brand); }
.plan .plan-name { color: var(--text-mute); text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; font-weight: 700; }
.plan .plan-price { font-size: 38px; font-weight: 800; margin: 8px 0 0; }
.plan .plan-price small { font-size: 13px; color: var(--text-mute); font-weight: 500; }
.plan .plan-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; }
.plan ul { margin: 0 0 18px; padding: 0; list-style: none; }
.plan li {
    padding: 7px 0;
    color: var(--text-dim);
    font-size: 13.5px;
    display: flex; align-items: center; gap: 8px;
}
.plan li::before { content: '✓'; color: var(--brand); font-weight: 800; }
.plan.highlight {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), var(--shadow-brand);
}
.plan.highlight::after {
    content: 'POPULAR';
    position: absolute; top: -11px; right: 20px;
    background: var(--brand); color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 999px;
}
.pay-methods {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap; margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════
   PLANES: selector tipo tarjeta (1 / 3 / 12 meses)
   ══════════════════════════════════════════════════════════ */
.sub-head { margin: 4px 0 18px; }
.sub-head h1 { margin: 8px 0 4px; font-size: 26px; }
.sub-head p  { margin: 0; color: var(--text-dim); font-size: 14px; }

.sub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
@media (max-width: 760px) {
    .sub-grid { grid-template-columns: 1fr; }
}

.sub-plans { display: flex; flex-direction: column; gap: 14px; }

.plan-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 18px 18px;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.plan-card:hover { border-color: rgba(255, 255, 255, .22); }
.plan-card input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Seleccionada: borde y brillo de marca, fondo con un punto de color */
.plan-card.is-on {
    border-color: var(--brand);
    background: linear-gradient(135deg, rgba(220, 24, 109, .14), var(--surface) 70%);
    box-shadow: 0 0 0 1px rgba(220, 24, 109, .35), 0 10px 34px rgba(220, 24, 109, .22);
}
.plan-card input:focus-visible ~ .plan-card__radio { outline: 2px solid var(--brand); outline-offset: 3px; }

.plan-card__badge {
    position: absolute;
    top: -11px; left: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #2a2a31;
    color: rgba(255, 255, 255, .8);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    transition: background .18s ease, color .18s ease;
}
.plan-card.is-on .plan-card__badge { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(220, 24, 109, .45); }

.plan-card__radio {
    width: 22px; height: 22px;
    border: 2px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: border-color .18s ease;
}
.plan-card__radio::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--brand);
    transform: scale(0);
    transition: transform .18s cubic-bezier(.2, .9, .3, 1.4);
}
.plan-card.is-on .plan-card__radio { border-color: var(--brand); }
.plan-card.is-on .plan-card__radio::after { transform: scale(1); }

.plan-card__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plan-card__txt strong { font-size: 17px; font-weight: 800; }
.plan-card__txt small  { font-size: 12.5px; color: var(--text-mute); }
.plan-card.is-on .plan-card__txt small { color: #ff8ec0; }

.plan-card__price {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
    transition: color .18s ease;
}
.plan-card.is-on .plan-card__price { color: #fff; }
.plan-card__price sup { font-size: 16px; vertical-align: top; margin-right: 1px; position: relative; top: 4px; }
.plan-card__price sub { font-size: 12px; font-weight: 600; vertical-align: baseline; margin-left: 2px; color: var(--text-mute); }

/* Lado derecho: beneficios y pago */
.sub-side { display: flex; flex-direction: column; gap: 16px; }
.sub-benefits {
    margin: 0; padding: 4px 0 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 10px;
}
.sub-benefits li {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px;
    color: var(--text-dim);
}
.sub-benefits li::before {
    content: '';
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 6px;
    background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / 13px no-repeat;
}
.sub-login { display: flex; flex-direction: column; gap: 8px; }
.sub-note { font-size: 12.5px; line-height: 1.55; margin: 0; }
.sub-note a { color: var(--brand); font-weight: 600; }

/* Caja de pago (compartida con la recarga de saldo) */
.pay-box {
    padding: 18px 18px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.pay-total {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.pay-total__lbl { font-size: 12.5px; color: var(--text-mute); }
.pay-total__usd { font-size: 22px; font-weight: 900; }
.pay-total__pen { font-size: 12.5px; color: var(--text-mute); }
/* Precio antes del cupon. Va antes del importe grande para que se lea
   "antes 29.88 / ahora 20.92" de un vistazo. */
.pay-total__was { order: -1; font-size: 15px; color: var(--text-mute); opacity: .75; }
.pay-box .pay-methods { flex-direction: column; margin: 0; gap: 8px; }

/* ── Botones de pasarela ──
   Nombre y descripcion a la izquierda, importe a la derecha. Nada va en
   posicion absoluta: el distintivo antes flotaba encima y obligaba a
   reservarle 108px de hueco, que partian el nombre en dos lineas. */
.pay-box .pay-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 12px 16px;
    /* 14px en vez del 999px de .btn: en un boton de dos lineas la forma
       de pastilla deja unos costados enormes y descuadrados. */
    border-radius: 14px;
    text-align: left;
    line-height: 1.3;
}
.pay-btn__info {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;            /* deja recortar el texto en vez de desbordar */
    flex: 1 1 auto;
}
.pay-btn__name { font-weight: 700; font-size: 14px; }
.pay-btn__sub  { font-size: 11.5px; font-weight: 500; opacity: .75; }
/* Distintivo e importe en columna, alineados a la derecha. En linea con
   el nombre no caben: la columna mide 332px y entre las dos cosas se
   pasan del ancho, asi que el distintivo bajaba a su propia linea y
   quedaba flotando entre el nombre y la descripcion. */
.pay-btn__right {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.pay-btn__amt {
    font-weight: 800; font-size: 16px;
    white-space: nowrap;      /* el importe nunca se parte */
    font-variant-numeric: tabular-nums;
}
.pay-btn__tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap;
}
/* En las que no son la recomendada el fondo es oscuro: ahi el
   distintivo blanco translucido no se leeria. */
.pay-btn.btn-ghost .pay-btn__tag {
    background: rgba(220, 24, 109, .16);
    border-color: rgba(220, 24, 109, .4);
    color: var(--brand);
}
@media (max-width: 400px) {
    .pay-box .pay-btn { padding: 11px 13px; gap: 10px; }
    .pay-btn__amt { font-size: 14.5px; }
}
.pay-foot { font-size: 12px; margin: 12px 0 0; text-align: center; line-height: 1.5; }

/* ── Cupon de descuento ── */
.pay-coupon { margin: -4px 0 14px; }
.pay-coupon__toggle {
    background: none; border: 0; padding: 0;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--brand); cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.pay-coupon__toggle:hover { opacity: .8; }
.pay-coupon__row { display: flex; gap: 8px; margin-top: 10px; }
.pay-coupon__row input {
    flex: 1 1 auto; min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text);
    font: inherit; font-size: 14px;
    text-transform: uppercase; letter-spacing: .06em;
}
.pay-coupon__row input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(220, 24, 109, .18);
}
.pay-coupon__row .btn { flex: 0 0 auto; }
.pay-coupon__ok {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 4px; padding: 9px 12px;
    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: 10px;
    background: rgba(34, 197, 94, .10);
    font-size: 13px;
}
/* [hidden] pierde contra cualquier regla de display propia */
.pay-coupon__ok[hidden], .pay-coupon__row[hidden],
.pay-coupon__toggle[hidden], .pay-total__was[hidden] { display: none !important; }
.pay-coupon__clear {
    margin-left: auto;
    background: none; border: 0; padding: 0;
    font: inherit; font-size: 12.5px;
    color: var(--text-mute); cursor: pointer; text-decoration: underline;
}
.pay-coupon__clear:hover { color: var(--text); }

/* ── Botones de PayPal ──
   PayPal dibuja sus propios botones en un iframe con ancho fijo en px.
   Sin acotarlo aqui se salen de la caja, que es lo que pasaba cuando se
   pintaban colgando de <body>. */
/* Sin fondo blanco: ahi dentro solo va el boton amarillo de PayPal, que
   se ve bien sobre oscuro. El blanco hacia falta cuando se pintaba
   tambien el formulario de tarjeta, que ya no se muestra. */
.pp-box {
    margin-top: 6px;
    max-width: 100%;
    overflow: hidden;
}
.pp-box[hidden] { display: none !important; }
/* Metodo elegido: se nota cual abrio los botones de abajo */
.pay-box .pay-btn.is-on { border-color: var(--brand); color: var(--brand); }
.pay-box .pay-btn.btn-primary.is-on { border-color: #fff; }

/* ── Cupón que cubre el total ── */
.pay-free {
    padding: 14px 16px;
    border: 1px solid rgba(34, 197, 94, .35);
    border-radius: 12px;
    background: rgba(34, 197, 94, .08);
}
.pay-free__txt {
    margin: 0 0 12px;
    font-size: 13px; line-height: 1.5;
    text-align: center;
}
/* [hidden] pierde contra cualquier regla de display propia */
.pay-free[hidden] { display: none !important; }

/* ── Tipo de cambio (admin) ── */
.rate-box {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.rate-box h3 { margin: 0 0 12px; font-size: 15px; }
.rate-opt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0 4px;
    cursor: pointer;
}
.rate-opt input { margin-top: 3px; accent-color: var(--brand); }
.rate-opt__txt { display: flex; flex-direction: column; gap: 3px; }
.rate-opt__txt strong { font-size: 14px; }
.rate-opt__txt small  { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.rate-opt__txt b { color: #fff; }
.rate-sub {
    margin: 0 0 8px 26px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border);
}
.rate-sub > label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.rate-in { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; }
.rate-in input {
    width: 90px;
    padding: 7px 9px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.rate-sub .hint { margin-top: 6px; font-size: 12px; line-height: 1.55; }
.rate-sub .hint b { color: #fff; }
.rate-chk {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 10px;
    cursor: pointer;
}
.rate-chk input { margin-top: 3px; accent-color: var(--brand); }
.rate-chk span { display: flex; flex-direction: column; gap: 3px; }
.rate-chk strong { font-size: 14px; }
.rate-chk small  { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   TRABAJA CON NOSOTROS
   ══════════════════════════════════════════════════════════ */
.tj-hero {
    position: relative;
    margin: 0 0 22px;
    padding: 40px 32px 34px;
    border: 1px solid rgba(220, 24, 109, .3);
    border-radius: 20px;
    background:
        radial-gradient(120% 100% at 15% 0%, rgba(220, 24, 109, .26), transparent 58%),
        radial-gradient(90% 90% at 100% 100%, rgba(255, 176, 32, .12), transparent 55%),
        var(--surface);
    overflow: hidden;
}
.tj-hero h1 {
    margin: 12px 0 10px;
    font-size: clamp(26px, 4.4vw, 40px);
    line-height: 1.12;
    letter-spacing: -.02em;
}
.tj-hero__sub {
    margin: 0 0 20px;
    max-width: 620px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--text-dim);
}
.tj-hero__sub strong { color: #fff; }
.tj-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.tj-hero__note {
    margin: 16px 0 0;
    font-size: 12.5px;
    color: var(--text-mute);
}
@media (max-width: 600px) {
    .tj-hero { padding: 28px 20px 24px; }
    .tj-hero__cta .btn { width: 100%; text-align: center; }
}

.tj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 0 0 26px;
}
.tj-card {
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .16s ease, transform .16s ease;
}
.tj-card:hover { border-color: rgba(220, 24, 109, .4); transform: translateY(-2px); }
.tj-ico { font-size: 24px; line-height: 1; }
.tj-card h3 { margin: 10px 0 6px; font-size: 15.5px; }
.tj-card p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

.tj-steps {
    margin: 0 0 26px;
    padding: 24px 26px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-3);
}
.tj-steps h2 { margin: 0 0 16px; font-size: 18px; }
.tj-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.tj-steps li {
    position: relative;
    counter-increment: paso;
    padding: 0 0 18px 46px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
}
.tj-steps li:last-child { padding-bottom: 0; }
.tj-steps li strong { color: #fff; }
.tj-steps li::before {
    content: counter(paso);
    position: absolute;
    left: 0; top: -2px;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}
/* Linea que une los pasos */
.tj-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 14px; top: 32px; bottom: 6px;
    width: 2px;
    background: linear-gradient(var(--brand), transparent);
    opacity: .35;
}

.form-section-note {
    margin: -6px 0 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-mute);
}
.form-section-note strong { color: var(--text-dim); }
.form-section-note code {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    font-size: 12px;
}

.tj-faq { margin: 26px 0 0; }
.tj-faq h2 { margin: 0 0 12px; font-size: 18px; }
.tj-faq details {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 8px;
    overflow: hidden;
}
.tj-faq summary {
    padding: 14px 18px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 700;
    list-style: none;
}
.tj-faq summary::-webkit-details-marker { display: none; }
.tj-faq summary::after {
    content: '+';
    float: right;
    color: var(--brand);
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
}
.tj-faq details[open] summary::after { content: '−'; }
.tj-faq details[open] summary { border-bottom: 1px solid var(--border); }
.tj-faq p {
    margin: 0;
    padding: 14px 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-dim);
}

/* ── Saldo (admin): tarjetas de totales ── */
.wallet-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}
.wallet-kpi {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.wallet-kpi span   { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); font-weight: 700; }
.wallet-kpi strong { font-size: 22px; font-weight: 900; }
/* Una linea explicando que mide cada numero: sin esto hay que adivinar
   si "saldo en circulacion" es dinero tuyo o deuda. */
.wallet-kpi em {
    margin-top: 2px;
    font-size: 11.5px; font-style: normal; line-height: 1.45;
    color: var(--text-mute);
}

/* ══════════════════════════════════════════════════════════
   TRABAJA: reel de ejemplos, confirmación de edad, panel
   ══════════════════════════════════════════════════════════ */

/* ── Reel de fotos de ejemplo ──
   Scroll horizontal con anclaje: se arrastra con el dedo y cada foto
   queda encajada, como un carrusel, pero sin JavaScript. */
.tj-reel-wrap { margin: 0 0 26px; }
.tj-reel__note { margin: -6px 0 12px; font-size: 13px; color: var(--text-mute); }
.tj-reel__note strong { color: var(--text); }
.tj-reel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.tj-reel__item {
    flex: 0 0 auto;
    width: 210px;
    margin: 0;
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
    background: #141414;
    border: 1px solid var(--border);
}
.tj-reel__item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
@media (max-width: 560px) {
    .tj-reel__item { width: 62vw; }
}

/* ── Confirmación de 18 años ──
   Caja grande, no una casilla perdida al final: es la declaración que
   sostiene todo lo demás, y tiene que verse. */
.tj-age {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 22px 0 18px;
    padding: 16px 18px;
    border: 2px solid rgba(220, 24, 109, .45);
    border-radius: 14px;
    background: rgba(220, 24, 109, .07);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.tj-age:hover { border-color: var(--brand); }
.tj-age input { position: absolute; opacity: 0; width: 0; height: 0; }
.tj-age__box {
    flex: 0 0 26px;
    width: 26px; height: 26px;
    margin-top: 1px;
    border: 2px solid var(--brand);
    border-radius: 7px;
    background: transparent;
    position: relative;
    transition: background .15s ease;
}
.tj-age__box::after {
    content: '';
    position: absolute;
    left: 8px; top: 3px;
    width: 6px; height: 12px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s cubic-bezier(.2,.85,.2,1.4);
}
.tj-age input:checked + .tj-age__box { background: var(--brand); }
.tj-age input:checked + .tj-age__box::after { transform: rotate(45deg) scale(1); }
.tj-age input:focus-visible + .tj-age__box { outline: 2px solid #fff; outline-offset: 2px; }
.tj-age__txt { display: flex; flex-direction: column; gap: 4px; }
.tj-age__txt strong { font-size: 15px; }
.tj-age__txt small  { font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
/* Al intentar enviar sin marcarla */
.tj-age.is-bad {
    border-color: #ef4444;
    background: rgba(239, 68, 68, .1);
    animation: tj-shake .35s;
}
@keyframes tj-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ── Panel de postulaciones ── */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.post-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}
.post-card--nueva      { border-color: rgba(220, 24, 109, .45); }
.post-card--aceptada   { border-color: rgba(34, 197, 94, .45); }
.post-card--descartada { opacity: .6; }

.post-card__pic { position: relative; background: #101010; }
.post-card__pic img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.post-card__nopic {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 3 / 4;
    color: var(--text-mute); font-size: 13px;
}
.post-card__estado {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    font-size: 11px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
}
.post-card__body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 10px; }
.post-card__body h3 { margin: 0; font-size: 16px; }
.post-card__meta { margin: 0; font-size: 13px; line-height: 1.5; }
.post-card__warn {
    display: inline-block; margin-top: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(245, 158, 11, .16);
    color: #f59e0b; font-size: 11px; font-weight: 700;
}
.post-card__cont { display: flex; flex-direction: column; gap: 3px; font-size: 13px; word-break: break-all; }
.post-card__cont a { color: var(--brand); text-decoration: none; }
.post-card__cont a:hover { text-decoration: underline; }
.post-card__bio {
    margin: 0; padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    font-size: 12.5px; line-height: 1.55;
    color: var(--text-mute);
}
.post-card__form { display: flex; flex-direction: column; gap: 8px; }
.post-card__form input[type="text"],
.post-card__form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
    color: var(--text);
    font: inherit; font-size: 13px;
}
.post-card__acts { display: flex; gap: 8px; }
.post-card__acts select { flex: 1 1 auto; }

/* ── Ajustes de correo (solicitudes) ── */
.mail-cfg {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.mail-cfg > summary {
    cursor: pointer;
    font-weight: 700; font-size: 14px;
    list-style: none;
}
.mail-cfg > summary::-webkit-details-marker { display: none; }
.mail-cfg > summary::before { content: '⚙ '; color: var(--brand); }
.mail-cfg .form { background: none; border: 0; padding: 0; }

/* ── Explicacion de la pestana de saldo ── */
.wal-intro {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: 0 12px 12px 0;
    background: var(--surface);
}
.wal-intro h2 { margin: 0 0 8px; font-size: 15px; }
.wal-intro p  { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--text-mute); }
.wal-intro p:last-child { margin-bottom: 0; }
.wal-intro strong { color: var(--text); }
.wal-nota {
    margin: 0 0 22px;
    font-size: 13px; line-height: 1.6;
    color: var(--text-mute);
}
.wal-nota strong { color: var(--text); }

/* ── Cupones (admin) ── */
.cup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 16px;
}
.cup-code {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(220, 24, 109, .12);
    border: 1px solid rgba(220, 24, 109, .28);
    color: var(--brand);
    font-weight: 800; letter-spacing: .06em; font-size: 13px;
}
/* Caducado, agotado o apagado: sigue legible, pero no compite con los vivos */
.cup-table tr.is-off > td { opacity: .58; }
.cup-table tr.is-off .cup-code { background: none; border-color: var(--border); color: var(--text-mute); }
.cup-actions { white-space: nowrap; }
.cup-actions > * { margin: 2px 2px 2px 0; vertical-align: middle; }
.btn-danger { color: #ef4444; border-color: rgba(239, 68, 68, .35); }
.btn-danger:hover { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .6); }

@media (max-width: 720px) {
    .cup-grid { grid-template-columns: 1fr; }
}

/* ── Saldo ── */
.wallet-hero {
    display: flex; flex-direction: column; gap: 4px;
    margin: 0 0 22px;
    padding: 22px 24px;
    border: 1px solid rgba(220, 24, 109, .35);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(220, 24, 109, .18), var(--surface) 65%);
}
.wallet-hero__lbl { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); font-weight: 700; }
.wallet-hero__amt { font-size: 40px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.wallet-h2 { margin: 0 0 12px; font-size: 16px; }

.plan-card--pack { grid-template-columns: auto 1fr; padding: 16px 18px; }
.plan-card--pack .plan-card__txt strong { font-size: 22px; }

.wallet-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}
.wallet-row {
    display: grid;
    grid-template-columns: 92px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.wallet-row:last-child { border-bottom: 0; }
.wallet-row__kind {
    font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 999px; text-align: center;
    background: rgba(255, 255, 255, .06); color: var(--text-dim);
}
.wallet-row__kind--topup  { background: rgba(35, 201, 126, .14); color: #7ee2b3; }
.wallet-row__kind--ppv    { background: rgba(125, 211, 252, .14); color: #7dd3fc; }
.wallet-row__kind--tip    { background: rgba(220, 24, 109, .18); color: #ff8ec0; }
.wallet-row__note { color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-row__date { color: var(--text-mute); font-size: 12px; white-space: nowrap; }
.wallet-row__amt  { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet-row__amt.is-pos { color: #7ee2b3; }
.wallet-row__amt.is-neg { color: #ffb7c1; }
@media (max-width: 600px) {
    .wallet-row { grid-template-columns: 1fr auto; row-gap: 4px; }
    .wallet-row__kind { grid-column: 1; justify-self: start; }
    .wallet-row__amt  { grid-column: 2; grid-row: 1; }
    .wallet-row__note { grid-column: 1 / -1; white-space: normal; }
    .wallet-row__date { grid-column: 1 / -1; }
}

/* ---------- Post card (compartido) ---------- */

.post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.post-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post-head .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.post-head .who { display: flex; flex-direction: column; }
.post-head .who .u { font-weight: 700; font-size: 14px; }
.post-head .who .t { color: var(--text-mute); font-size: 12px; }
.post-media {
    background: #000;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
}
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; }
.post-actions { display: flex; align-items: center; gap: 14px; padding: 10px 14px 4px; font-size: 20px; color: var(--text); }
.post-actions button:hover { color: var(--brand); }
.post-body { padding: 6px 14px 16px; font-size: 14.5px; }
.post-body .likes { font-weight: 700; margin-bottom: 4px; }
.post-body .caption .u { font-weight: 700; margin-right: 6px; }


/* ---------- Live/Video ---------- */
.player {
    background: #000; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 16 / 9; border: 1px solid var(--border);
}
.player video, .player iframe { width: 100%; height: 100%; display: block; border: 0; }
.live-chat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px; height: 100%; min-height: 320px;
    display: flex; flex-direction: column;
}
.live-layout {
    display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: stretch;
}

/* ---------- Mobile bottom nav ---------- */
.bottomnav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: var(--bottomnav-h);
    background: rgba(15, 15, 18, 0.92);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--border);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.bottomnav .nav-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: 100%;
}
.bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    color: var(--text-mute);
    font-size: 11px; font-weight: 600; letter-spacing: .2px;
    text-decoration: none;
    transition: color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
    position: relative;
}
.bottomnav a .ico {
    width: 24px; height: 24px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.bottomnav a span {
    line-height: 1;
}
.bottomnav a:hover, .bottomnav a:active {
    color: var(--brand);
}
.bottomnav a:hover .ico, .bottomnav a:active .ico {
    transform: translateY(-2px) scale(1.08);
}
.bottomnav a.is-active {
    color: var(--brand);
}
.bottomnav a.is-active .ico {
    transform: translateY(-2px) scale(1.08);
}
.bottomnav a.is-active::before {
    content: '';
    position: absolute; top: 4px; left: 50%;
    width: 28px; height: 3px; border-radius: 99px;
    background: var(--brand);
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--brand);
}
/* CTA: Premium / Suscripción destacado */
.bottomnav a.bn-cta {
    color: #fff;
}
.bottomnav a.bn-cta .ico {
    width: 38px; height: 38px;
    padding: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, #ff5fa6 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(220,24,109,.45), inset 0 1px 0 rgba(255,255,255,.25);
    transform: translateY(-10px);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.bottomnav a.bn-cta:hover .ico,
.bottomnav a.bn-cta.is-active .ico {
    transform: translateY(-12px) scale(1.06);
    box-shadow: 0 10px 22px rgba(220,24,109,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.bottomnav a.bn-cta span {
    font-weight: 700;
    color: var(--brand);
    margin-top: -2px;
}
.bottomnav a.bn-cta::before { display: none !important; }

/* ---------- Toasts (notificaciones AJAX) ---------- */
.nwc-toasts {
    position: fixed;
    top: 18px; right: 18px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
    max-width: calc(100vw - 36px);
}
.nwc-toast {
    pointer-events: auto;
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    min-width: 280px; max-width: 380px;
    padding: 12px 36px 12px 14px;
    background: #1a1a1f;
    color: #fff;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
    overflow: hidden;
    opacity: 0;
    transform: translateX(120%) scale(.96);
    transition: opacity .28s ease, transform .32s cubic-bezier(.2,.85,.2,1.05);
    font-size: 14px;
    line-height: 1.4;
    will-change: transform, opacity;
}
.nwc-toast.is-in {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.nwc-toast.is-out {
    opacity: 0;
    transform: translateX(120%) scale(.96);
}
.nwc-toast__icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
}
.nwc-toast__icon svg { width: 100%; height: 100%; display: block; }
.nwc-toast__msg {
    flex: 1;
    word-wrap: break-word;
    padding-top: 1px;
}
.nwc-toast__close {
    position: absolute; top: 6px; right: 8px;
    width: 24px; height: 24px;
    background: transparent; border: 0;
    color: rgba(255,255,255,.55);
    font-size: 20px; line-height: 1; cursor: pointer;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.nwc-toast__close:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}
.nwc-toast__bar {
    position: absolute; left: 0; bottom: 0;
    height: 3px; width: 100%;
    background: currentColor;
    opacity: .6;
    transform-origin: left center;
    animation: nwcToastBar linear forwards;
}
@keyframes nwcToastBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
/* Variantes por tipo */
.nwc-toast--success {
    border-left: 3px solid #2ecc71;
}
.nwc-toast--success .nwc-toast__icon { color: #2ecc71; }
.nwc-toast--success .nwc-toast__bar  { color: #2ecc71; }

.nwc-toast--error {
    border-left: 3px solid #ff4d6d;
}
.nwc-toast--error .nwc-toast__icon { color: #ff4d6d; }
.nwc-toast--error .nwc-toast__bar  { color: #ff4d6d; }

.nwc-toast--warn {
    border-left: 3px solid #ffb020;
}
.nwc-toast--warn .nwc-toast__icon { color: #ffb020; }
.nwc-toast--warn .nwc-toast__bar  { color: #ffb020; }

.nwc-toast--info {
    border-left: 3px solid var(--brand);
}
.nwc-toast--info .nwc-toast__icon { color: var(--brand); }
.nwc-toast--info .nwc-toast__bar  { color: var(--brand); }

@media (max-width: 600px) {
    .nwc-toasts {
        top: auto; bottom: calc(var(--bottomnav-h, 64px) + 14px);
        right: 12px; left: 12px;
        align-items: stretch;
    }
    .nwc-toast {
        min-width: 0; max-width: none;
        transform: translateY(140%) scale(.98);
    }
    .nwc-toast.is-in   { transform: translateY(0) scale(1); }
    .nwc-toast.is-out  { transform: translateY(140%) scale(.98); }
}

/* ---------- Empty state ---------- */
.empty {
    text-align: center; padding: 60px 20px;
    color: var(--text-mute);
}
.empty h3 { color: var(--text); margin-bottom: 6px; }

/* ---------- Utilidades ---------- */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spacer { height: 22px; }
.muted { color: var(--text-mute); }
.text-center { text-align: center; }
.chip { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

/* ---------- Lista de chicas en la columna lateral ---------- */
/* Va debajo del anuncio, ordenada por me gusta. La columna mide 260px
   menos 24 de padding: todo aqui esta pensado para caber en ~236px. */
.topgirls {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}
.topgirls__tit {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    margin: 0;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px; font-weight: 800;
    letter-spacing: .01em;
}
.topgirls__sub {
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-mute);
}
.topgirls__list { margin: 0; padding: 4px; list-style: none; counter-reset: none; }
.topgirls__item { margin: 0; }

/* Las medidas de esta fila estan ajustadas al ancho real de la columna:
   260px - 24 de padding - 2 de borde - 8 de la lista - 14 del enlace
   dejan 212px. Con puesto 14 + foto 36 + likes ~30 y tres huecos de 7,
   al nombre le quedan unos 111px, que es donde entra un nombre normal
   antes de recortarse. Si se agranda algo de aqui, se come el nombre. */
.topgirls__link {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 7px;
    border-radius: 10px;
    color: inherit; text-decoration: none;
    transition: background .15s ease;
}
.topgirls__link:hover { background: rgba(255, 255, 255, .05); }

.topgirls__pos {
    flex: 0 0 14px;
    text-align: center;
    font-size: 12px; font-weight: 800;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.topgirls__pic { position: relative; flex: 0 0 36px; line-height: 0; }
.topgirls__pic img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #222;
}
.topgirls__live {
    position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
    padding: 1px 4px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 7.5px; font-weight: 900;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* min-width:0 es lo que permite que el ellipsis funcione dentro de un
   flex: sin el, el hijo se niega a encoger y desborda la columna. */
.topgirls__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.topgirls__name {
    font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topgirls__meta {
    font-size: 10.5px; color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topgirls__likes {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 3px;
    font-size: 11px; color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}
.topgirls__likes b { font-weight: 700; }

/* La primera: fondo de marca y numero en rosa, para que se vea de un
   golpe quien manda sin cambiar el alto de la fila. */
.topgirls__item.is-first .topgirls__link {
    background: linear-gradient(90deg, rgba(220, 24, 109, .16), rgba(220, 24, 109, .04));
    box-shadow: inset 0 0 0 1px rgba(220, 24, 109, .28);
}
.topgirls__item.is-first .topgirls__pos  { color: var(--brand); font-size: 13px; }
.topgirls__item.is-first .topgirls__pic img { box-shadow: 0 0 0 2px var(--brand); }
.topgirls__item.is-first .topgirls__likes { color: var(--brand); }

.topgirls__all {
    display: block;
    padding: 9px 12px 11px;
    border-top: 1px solid var(--border);
    color: var(--brand);
    font-size: 12px; font-weight: 700;
    text-decoration: none;
}
.topgirls__all:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    :root { --right-w: 0px; }
    .app { grid-template-columns: var(--sidebar-w) 1fr; }
    .right-col { display: none; }
    .main { border-right: none; }
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    :root { --sidebar-w: 0px; --right-w: 0px; }
    .app { grid-template-columns: 1fr; }
    .right-col { display: none; }
    .topbar--mobile { display: flex; }
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .25s;
        width: 280px;
        box-shadow: 0 0 40px rgba(0,0,0,.6);
        height: 100vh;
    }
    .sidebar.open { transform: translateX(0); }
    .topbar .mobile-menu { display: inline-flex; margin-right: 8px; }
    .main { grid-column: 1; padding-bottom: calc(var(--bottomnav-h) + 16px); border-right: none; }
    .bottomnav { display: block; }
    .plans { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .live-layout { grid-template-columns: 1fr; }
    .content { padding: 14px; }
    .hero { padding: 20px; border-radius: 12px; }
    .hero:not(.hero-slider) { padding: 26px 24px 30px; }
}
@media (max-width: 768px) {
    .hero:not(.hero-slider) { padding: 22px 20px 26px; }
}
@media (max-width: 560px) {
    .content { padding: 12px; }
    .grid-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .topbar { padding: 0 14px; }
    /* Historias: mostrar ~4.5 círculos (4 completos + hint del 5º) con scroll horizontal.
       En movil no caben 8, asi que el carrusel vuelve a scroll libre con el dedo. */
    .stories { gap: 10px; padding: 2px 2px 10px; scroll-padding-left: 2px; }
    .stories-arrow { display: none !important; }
    .stories--8 .story,
    .story { width: calc((100vw - 24px - 10px * 4) / 4.5); max-width: 78px; min-width: 64px; }
    .story .ring { width: 100%; aspect-ratio: 1 / 1; height: auto; }
    .story img, .story .ring > div.placeholder { width: calc(100% - 6px); height: auto; aspect-ratio: 1 / 1; }
    .card .body { padding: 10px 10px 12px; }
    .card .name { font-size: 13px; }
    .card .meta { font-size: 11px; }
    .section-title { margin: 4px 2px 10px; }
    .section-title h2 { font-size: 16px; }
}
@media (max-width: 380px) {
    .grid-5 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .content { padding: 10px; }
    /* Mantener 4 círculos visibles + hint del 5º en pantallas muy chicas */
    .story { width: calc((100vw - 20px - 8px * 4) / 4.5); max-width: 70px; min-width: 56px; }
    .stories { gap: 8px; }
    .story .name { font-size: 11px; }
}

/* Ads: nunca desbordar el contenedor en ningún viewport */
.ad-slot { max-width: 100%; }
.ad-slot ins { max-width: 100%; }
@media (max-width: 900px) {
    .ad-slot[data-size="728x90"]  { width: 100%; min-height: 60px; }
    .ad-slot[data-size="300x250"] { width: 100%; max-width: 300px; }
}

/* Overlay para menú móvil */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 25;
}
.sidebar-backdrop.show { display: block; }

/* ============================================================
   HOME LAYOUT — columnas (legado, ya no usado en index)
   ============================================================ */
.home-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px;
    align-items: start;
    margin-top: 8px;
}
.home-feed { min-width: 0; }
.home-side .side-card {
    position: sticky;
    top: calc(var(--header-h) + 14px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}
.side-models { display: flex; flex-direction: column; gap: 8px; }
.side-model {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background .18s, transform .18s;
}
.side-model:hover { background: var(--bg-3); transform: translateX(2px); color: var(--text); }
.side-model-thumb {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 12px; overflow: hidden;
    flex-shrink: 0;
    background: #1a1a1a;
}
.side-model-thumb img { width: 100%; height: 100%; object-fit: cover; }
.side-model-thumb .live-dot {
    position: absolute; top: 4px; left: 4px;
    font-size: 8px; padding: 2px 5px; border-radius: 999px;
    background: var(--brand); color: #fff; font-weight: 800;
}
.side-model-thumb .badge-verified {
    position: absolute; bottom: 3px; right: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--brand); color: #fff;
    display: grid; place-items: center; font-size: 10px;
}
.side-model-body { min-width: 0; }
.side-model-body .name { font-weight: 700; font-size: 13.5px; }
.side-model-body .meta { color: var(--text-mute); font-size: 11.5px; }

@media (max-width: 1100px) { .home-layout { grid-template-columns: 1fr 280px; } }
@media (max-width: 900px)  {
    .home-layout { grid-template-columns: 1fr; }
    .home-side .side-card { position: static; }
}

/* ============================================================
   PROFILE / FICHA DE MODELO — modelo.php
   ============================================================ */
.profile { max-width: 920px; margin: 0 auto; }
.profile-cover {
    position: relative;
    height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #1a1a1a;
    margin-bottom: -60px;
}
.profile-cover-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .45;
}
.profile-cover-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--bg) 100%);
}

.profile-id {
    position: relative;
    display: flex; gap: 18px; align-items: flex-end;
    padding: 0 8px;
}
.profile-photo {
    position: relative;
    width: 140px; height: 140px;
    border-radius: 28px;
    overflow: hidden;
    border: 4px solid var(--bg);
    box-shadow: var(--shadow-1);
    flex-shrink: 0;
    background: #1a1a1a;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo .badge-verified {
    position: absolute; bottom: 6px; right: 6px;
    background: var(--brand); color: #fff;
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 14px; font-weight: 800;
    border: 2px solid var(--bg);
}
.profile-meta { padding-bottom: 4px; min-width: 0; }
.profile-meta h1 { margin: 0; font-size: 28px; letter-spacing: -.3px; }
.profile-actions {
    margin-top: 12px;
    display: flex; gap: 8px; flex-wrap: wrap;
}

.profile-section { margin-top: 26px; }
.profile-section h2 {
    font-size: 16px; margin: 0 0 12px;
    color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 1.4px; font-weight: 700;
}
.profile-bio {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px; margin: 0;
    line-height: 1.6;
    color: var(--text-dim);
}

/* WhatsApp button */
.btn-whatsapp {
    background: #25D366; color: #08210F;
    border-radius: 999px; padding: 10px 18px;
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
    transition: transform .15s, box-shadow .15s;
}
.btn-whatsapp:hover {
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}

/* Redes sociales — chips */
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.social-chip {
    --c: var(--brand);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px; font-weight: 600;
    transition: transform .15s, border-color .15s, background .15s, color .15s;
}
.social-chip:hover {
    transform: translateY(-1px);
    border-color: var(--c);
    color: var(--c);
}
.social-chip.social-add {
    border-style: dashed;
    color: var(--text-mute);
}

/* Historia / video corto */
.profile-story {
    background: #000;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 9 / 16;
    max-width: 360px;
    margin: 0 auto;
}
.profile-story video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Galería */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #1a1a1a;
}
.gallery-item img, .gallery-item video {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .25s;
}
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.05); }
.gallery-item .play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: #fff; font-size: 28px;
    background: rgba(0,0,0,.35);
    pointer-events: none;
}

/* Pieza que abre el visor: lupa al pasar, como en el timeline */
.gallery-item.is-openable { cursor: zoom-in; }
.gallery-item.is-openable::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .28) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.2-4.2M11 8v6M8 11h6'/></svg>") center / 26px no-repeat;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.gallery-item.is-openable:hover::after { opacity: 1; }
/* En un vídeo ya está el triángulo de play: sobra la lupa */
.gallery-item.is-openable:has(video)::after { display: none; }

/* ── Piezas de pago en la galería ── */
.gal-paid-tag {
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(220, 24, 109, .16);
    color: #ff8ec0;
    font-size: 11px;
    letter-spacing: .04em;
    vertical-align: middle;
}
.gallery-item--locked {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(220, 24, 109, .35);
    cursor: pointer;
    color: #fff;
    text-align: center;
}
/* La vista previa ya viene de 40 px; el blur remata los bordes al estirar */
.gallery-item--locked img {
    filter: blur(6px) saturate(.8);
    transform: scale(1.12);
}
.gallery-item--locked:hover img { transform: scale(1.16); }
.gallery-item__novideo {
    position: absolute; inset: 0;
    background: radial-gradient(80% 80% at 50% 40%, rgba(220, 24, 109, .28), #111 75%);
}
.gallery-lock {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    background: rgba(6, 7, 11, .38);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
    transition: background .15s ease;
}
.gallery-item--locked:hover .gallery-lock { background: rgba(6, 7, 11, .52); }
.gallery-lock svg { width: 22px; height: 22px; opacity: .9; }
.gallery-lock b { font-size: 17px; font-weight: 900; }
.gallery-lock small { font-size: 10.5px; color: rgba(255, 255, 255, .75); }
.gallery-item--paid { border: 1px solid rgba(220, 24, 109, .35); }

/* Galería Premium: dorado en vez de rosa, para que se distinga de las de precio */
.gallery-item--prem { border-color: rgba(255, 200, 0, .4); }
.gallery-item--prem .gallery-lock b { color: #ffd54a; }
.gallery-item--prem .gallery-item__novideo {
    background: radial-gradient(80% 80% at 50% 40%, rgba(255, 200, 0, .22), #111 75%);
}
.gallery-tag--prem { color: #ffd54a; }
.gal-prem-tag {
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 200, 0, .14);
    color: #ffd54a;
    font-size: 11px;
    letter-spacing: .04em;
    vertical-align: middle;
    text-transform: none;
}
.profile-section--prem h2 { color: #ffd54a; }
.gal-prem-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 200, 0, .3);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 200, 0, .1), var(--surface) 70%);
}
.gal-prem-cta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gal-prem-cta strong { font-size: 14.5px; }
.gal-prem-cta span   { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
@media (max-width: 600px) {
    .gal-prem-cta .btn { width: 100%; text-align: center; }
}

.gallery-tag {
    position: absolute; top: 6px; left: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .7);
    color: #ff8ec0;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

/* Botón Seguir cuando ya la sigues: marcado pero sin gritar */
.btn.is-following {
    border-color: rgba(220, 24, 109, .5);
    color: #ff8ec0;
}
.btn.is-following::before {
    content: '✓';
    margin-right: 6px;
    font-weight: 900;
}

/* Botón propina */
.btn-tip {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, #ffb020, #ff6a3d);
    color: #1a0d05;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(255, 140, 50, .35);
    transition: transform .15s, box-shadow .15s;
}
.btn-tip:hover { color: #000; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 140, 50, .45); }

/* Modales de compra y propina */
.ppv-modal {
    position: fixed; inset: 0; z-index: 9100;
    display: grid; place-items: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .18s ease;
}
.ppv-modal[hidden] { display: none !important; }
.ppv-modal.is-open { opacity: 1; }
.ppv-modal__back { position: absolute; inset: 0; background: rgba(5, 6, 10, .82); backdrop-filter: blur(5px); }
.ppv-modal__card {
    position: relative;
    width: 100%; max-width: 380px;
    padding: 24px 22px 20px;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: radial-gradient(120% 90% at 50% 0%, rgba(220, 24, 109, .16), transparent 62%), #202027;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
    transform: translateY(10px);
    transition: transform .2s cubic-bezier(.2, .9, .3, 1);
}
.ppv-modal.is-open .ppv-modal__card { transform: none; }
.ppv-modal__card h3 { margin: 0 0 8px; font-size: 18px; }
.ppv-modal__p { margin: 0 0 6px; font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.ppv-modal__p strong { color: #fff; }
.ppv-modal__hint { margin: 0 0 16px; font-size: 12px; color: var(--text-mute); line-height: 1.5; }
.ppv-modal__btns { display: flex; flex-direction: column; gap: 8px; }
.ppv-modal__err { margin: 12px 0 0; font-size: 12.5px; color: #ffb7c1; line-height: 1.5; }
.ppv-modal__err[hidden] { display: none !important; }
.ppv-modal__x {
    position: absolute; top: 8px; right: 10px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--text-mute);
    font-size: 24px; line-height: 1; cursor: pointer;
}
.ppv-modal__x:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.tip-amounts {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0;
}
.tip-amt {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 11px 8px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--bg-3);
    color: var(--text);
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.tip-amt:hover { border-color: rgba(255, 255, 255, .25); }
.tip-amt.is-on { border-color: var(--brand); background: rgba(220, 24, 109, .16); color: #fff; }
.tip-amt--custom { grid-column: span 2; padding: 6px 10px; }
.tip-amt--custom span { color: var(--text-mute); font-weight: 800; }
.tip-amt--custom input {
    width: 100%; min-width: 0;
    background: transparent; border: 0; color: #fff;
    font-size: 15px; font-weight: 800;
}
.tip-amt--custom input:focus { outline: none; }
.tip-msg {
    width: 100%; box-sizing: border-box;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13.5px;
}
.tip-msg:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

@media (max-width: 700px) {
    .profile-id { flex-direction: column; align-items: flex-start; }
    .profile-photo { width: 110px; height: 110px; }
    .profile-meta h1 { font-size: 22px; }
    .gallery { grid-template-columns: repeat(3, 1fr); }
    .profile-cover { height: 160px; margin-bottom: -50px; }
}
@media (max-width: 600px) {
    .profile-cover { height: 140px; margin-bottom: -44px; }
}
@media (max-width: 480px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   FICHA — fila dinámica de redes sociales en formulario
   ============================================================ */
.social-row { position: relative; }
.row-remove {
    position: absolute; right: -8px; top: -8px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-3); border: 1px solid var(--border-strong);
    color: var(--text-mute); font-size: 16px; line-height: 1;
    cursor: pointer; display: grid; place-items: center;
    transition: color .15s, border-color .15s, transform .15s;
}
.row-remove:hover { color: var(--brand); border-color: var(--brand); transform: rotate(90deg); }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.nav-admin {
    color: var(--brand) !important;
    font-weight: 700;
}
.nav-admin:hover { background: var(--brand-soft); }

.admin-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.kpi-label   { color: var(--text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 8px; }
.kpi-value   { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.kpi-sub     { color: var(--text-dim); font-size: 12.5px; margin-top: 4px; }
.kpi-warn    { border-color: rgba(255,193,7,.6); }
.kpi-warn .kpi-value { color: #ffc83d; }

.admin-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.admin-card {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    color: var(--text);
    transition: border-color .15s, transform .15s, background .15s;
}
.admin-card:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--brand-soft), var(--surface) 70%);
}
.admin-card-ico {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--bg-3);
    display: grid; place-items: center;
}
.admin-card-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.admin-card-sub   { color: var(--text-dim); font-size: 13px; line-height: 1.45; }
/* Si hay un número impar de tarjetas, la última ocupa 2 columnas */
.admin-cards .admin-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.admin-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--border);
    margin: 16px 0 18px;
    align-items: center;
}
.admin-tabs > a {
    color: var(--text-mute);
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 600;
    transition: color .15s, border-color .15s;
}
.admin-tabs > a:hover { color: var(--text); }
.admin-tabs > a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.admin-back { margin-left: auto; color: var(--text-mute); font-size: 12.5px; padding: 8px 6px; }

.admin-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.admin-table th, .admin-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    text-align: left;
}
.admin-table th {
    background: var(--bg-3);
    color: var(--text-mute);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 1px;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.row-featured { background: rgba(220, 24, 109, 0.06); }
.admin-thumb {
    width: 56px; height: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
}
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--bg-3);
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.pill-brand     { background: var(--brand); color: #fff; border-color: var(--brand); }
.pill-pending   { background: rgba(255,193,7,.12);  color: #ffc83d; border-color: rgba(255,193,7,.4); }
.pill-published { background: rgba(35,201,126,.12); color: #6be3a6; border-color: rgba(35,201,126,.4); }
.pill-rejected  { background: rgba(255,77,109,.12); color: #ff9aa9; border-color: rgba(255,77,109,.4); }
.pill-suspended { background: rgba(120,120,120,.18); color: #b5b5b5; border-color: rgba(120,120,120,.4); }

/* ---------- Modal Yape / Plin ---------- */
.yp-modal {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.yp-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s ease;
}
.yp-modal__card {
    position: relative;
    width: 100%; max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    transform: translateY(20px) scale(.96);
    opacity: 0;
    transition: transform .28s cubic-bezier(.2,.85,.2,1.05), opacity .25s ease;
}
.yp-modal.is-open .yp-modal__backdrop { opacity: 1; }
.yp-modal.is-open .yp-modal__card     { opacity: 1; transform: translateY(0) scale(1); }
.yp-modal__close {
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px;
    background: transparent; color: var(--text-mute);
    border: 0; border-radius: 8px;
    font-size: 24px; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s;
}
.yp-modal__close:hover { background: var(--brand-soft); color: var(--brand); }

.yp-tabs {
    display: flex; gap: 6px;
    margin-bottom: 14px;
    background: var(--bg);
    padding: 4px; border-radius: 12px;
    border: 1px solid var(--border);
}
.yp-tab {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-mute);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, color .18s;
}
.yp-tab.is-active { background: var(--brand); color: #fff; }
.yp-tab:not(.is-active):hover { color: var(--brand); }

.yp-info {
    display: flex; gap: 14px; align-items: center;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.yp-qr {
    width: 110px; height: 110px;
    object-fit: contain;
    background: #fff;
    padding: 6px;
    border-radius: 10px;
    flex-shrink: 0;
}
.yp-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: 1px;
}

/* ---------- Form helpers reutilizables ---------- */
.form-section-title {
    margin: 26px 0 8px;
    font-size: 13px;
    letter-spacing: 1.6px;
    color: var(--text-mute);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

/* Phone input combinado: select de código + input de número */
.phone-input {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2fr;
    gap: 8px;
}
.phone-input select,
.phone-input input {
    width: 100%;
}
@media (max-width: 600px) {
    .phone-input { grid-template-columns: 1fr; }
}

/* Línea de checkbox alineada arriba */
.check-line {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-dim);
    font-size: 13px;
    margin: 14px 0 18px;
    cursor: pointer;
    user-select: none;
}
.check-line input[type=checkbox] {
    margin-top: 3px;
    accent-color: var(--brand);
    width: 18px; height: 18px;
    cursor: pointer;
}

/* ---------- Dropzone (subida con preview) ---------- */
.dropzone {
    position: relative;
    border: 2px dashed var(--border);
    background: var(--bg);
    border-radius: 14px;
    padding: 18px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    cursor: pointer;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dropzone:hover {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg) 60%);
}
.dropzone.is-drag {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 0 0 4px rgba(220,24,109,.18);
}
.dz-empty {
    text-align: center;
    padding: 18px 6px;
    color: var(--text-mute);
    pointer-events: none;
}
.dz-icon {
    font-size: 32px;
    margin-bottom: 6px;
    line-height: 1;
}
.dz-title {
    color: var(--text);
    font-weight: 700;
    margin-bottom: 4px;
    font-size: 14px;
}
.dz-hint {
    font-size: 12px;
    color: var(--text-mute);
}
.dz-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.dz-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0d;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: transform .2s ease;
}
.dz-thumb:hover { transform: translateY(-2px); }
.dz-thumb img,
.dz-thumb video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.dz-thumb__file {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 32px;
    color: var(--text-mute);
}
.dz-thumb__meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
    color: #fff;
    font-size: 11px;
    display: flex; flex-direction: column;
    gap: 1px;
    pointer-events: none;
}
.dz-thumb__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.dz-thumb__size {
    opacity: .75;
    font-size: 10px;
}
.dz-thumb__x {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s, transform .15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.dz-thumb__x:hover {
    background: var(--brand);
    transform: scale(1.1);
}

/* Inputs: rojo o verde SOLO despues de que el usuario haya tocado el campo.
   Antes se usaba :invalid:not(:placeholder-shown), pero :placeholder-shown
   solo existe si el input tiene placeholder: en los que no lo tenian, el
   borde rojo salia nada mas cargar la pagina, con el formulario vacio, como
   si ya hubieras hecho algo mal. :user-invalid espera a la interaccion. */
.form input:user-invalid,
.form select:user-invalid {
    border-color: rgba(255,77,109,.6);
}
.form input:user-valid:not([type=file]) {
    border-color: rgba(35,201,126,.4);
}

/* Gráfico barras (sparkline 30 días) */
.chart-bars {
    display: flex; align-items: flex-end;
    gap: 3px;
    height: 160px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.chart-bars .bar {
    flex: 1;
    min-width: 6px;
    background: linear-gradient(180deg, var(--brand) 0%, rgba(220,24,109,.4) 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: transform .15s;
}
.chart-bars .bar:hover { transform: scaleY(1.04); }
.chart-bars .bar-val {
    position: absolute; top: -16px; left: 50%;
    transform: translateX(-50%);
    font-size: 10px; color: var(--text-mute);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .admin-kpis, .admin-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .admin-kpis, .admin-cards { grid-template-columns: 1fr; }
    .admin-tabs { gap: 2px; }
    .admin-tabs > a { padding: 8px 10px; font-size: 12px; }
    .admin-back { display: none; }
}

/* ---------- Slots publicitarios (ExoClick) ---------- */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 18px auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    text-align: center;
}
.ad-slot ins { display: inline-block; max-width: 100%; }

.ad-slot--placeholder {
    position: relative;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px;
    min-height: 90px;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(220, 24, 109, 0.045) 0 10px,
            rgba(220, 24, 109, 0.09) 10px 20px
        ),
        var(--surface);
    border: 1px dashed rgba(220, 24, 109, 0.35);
    color: var(--text-dim);
}
.ad-slot--placeholder::before {
    content: 'AD';
    position: absolute;
    top: 6px; left: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-mute);
    opacity: .7;
}
.ad-slot__txt {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dim);
}
.ad-slot__size {
    font-size: 11px;
    color: var(--text-mute);
    background: rgba(255,255,255,.04);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
}
/* Numero identificador del slot (visible solo mientras no hay zoneId) */
.ad-slot__num {
    position: absolute;
    top: 6px; right: 8px;
    min-width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 0 6px;
    box-shadow: 0 0 10px rgba(220,24,109,.45);
}
.ad-slot__label {
    font-size: 11.5px;
    color: var(--brand);
    font-weight: 700;
}

/* Tamaños comunes: respetan medidas pero nunca desbordan el contenedor */
.ad-slot[data-size="728x90"]  { width: 728px; max-width: 100%; min-height: 90px; }
.ad-slot[data-size="300x250"] { width: 300px; max-width: 100%; min-height: 250px; }
.ad-slot[data-size="300x100"] { width: 300px; max-width: 100%; min-height: 100px; }
.ad-slot[data-size="160x600"] { width: 160px; max-width: 100%; min-height: 600px; }
.ad-slot[data-size="320x50"]  { width: 320px; max-width: 100%; min-height: 50px; }

@media (max-width: 768px) {
    .ad-slot[data-size="728x90"] {
        width: 100%;
        min-height: 60px;
    }
    .ad-slot[data-size="160x600"] { display: none; }
}

/* Footer banner: centrado por encima del bottomnav */
.ad-slot--footer {
    margin: 26px auto 14px;
}
@media (max-width: 768px) {
    .ad-slot--footer { margin-bottom: calc(var(--bottomnav-h) + 14px); }
}

/* Visibilidad por dispositivo */
@media (min-width: 769px) {
    .ad-slot--only-mobile  { display: none !important; }
}
@media (max-width: 768px) {
    .ad-slot--only-desktop { display: none !important; }
}

/* ---------- Switch pill (iOS-style) ---------- */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.switch > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.switch .switch-track {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    background: #2a2a2a;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    transition: background .18s ease, border-color .18s ease;
}
.switch .switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    transition: transform .22s cubic-bezier(.2,.85,.2,1.05);
}
.switch > input:checked + .switch-track {
    background: linear-gradient(135deg, var(--brand), #ff5fa6);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(220, 24, 109, 0.18);
}
.switch > input:checked + .switch-track .switch-thumb {
    transform: translateX(20px);
}
.switch:hover .switch-track { border-color: rgba(220, 24, 109, 0.55); }
.switch > input:focus-visible + .switch-track {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- Fila de encendido/apagado (pasarelas, cupones) ----------
   Sustituye al checkbox suelto del navegador: una fila completa que se
   puede pulsar entera, con el nombre a la izquierda y el interruptor a
   la derecha. El .switch de dentro va en un <span>, no en un <label>:
   anidar dos labels es HTML invalido y rompe el clic. */
.gw-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0 0 14px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.gw-toggle:hover { border-color: rgba(220, 24, 109, .45); }
.gw-toggle__txt {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;          /* deja que el texto se recorte en vez de desbordar */
    flex: 1 1 auto;
}
.gw-toggle__txt strong { font-size: 14.5px; line-height: 1.25; }
.gw-toggle__txt small {
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-mute);
}
.gw-toggle .switch { flex: 0 0 auto; }

/* Encendida: se nota de un vistazo cuales estan activas sin leer.
   :has() es una mejora; si el navegador no lo soporta, el interruptor
   ya dice el estado por si solo. */
.gw-toggle:has(input:checked) {
    border-color: rgba(220, 24, 109, .5);
    background: linear-gradient(90deg, rgba(220, 24, 109, .10), rgba(220, 24, 109, .02));
}
/* Punto de estado a la izquierda del nombre */
.gw-toggle__txt strong::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--text-mute);
    vertical-align: middle;
    transition: background .18s ease, box-shadow .18s ease;
}
.gw-toggle:has(input:checked) .gw-toggle__txt strong::before {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

@media (max-width: 560px) {
    .gw-toggle { padding: 12px 13px; gap: 12px; }
}

/* ---------- Story Viewer (visor tipo Instagram) ---------- */
.story-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hueco entre el marco y las flechas de los lados */
    gap: 18px;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}
.story-viewer.is-open {
    opacity: 1;
    visibility: visible;
}
.story-viewer[hidden] { display: flex !important; } /* anula hidden cuando se abre */

.sv-stage {
    position: relative;
    width: min(420px, calc(100vw - 24px));
    height: min(90vh, 760px);
    max-height: calc(100vh - 24px);
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,.7);
    transform: translateY(20px) scale(.96);
    transition: transform .3s cubic-bezier(.2,.85,.2,1.05);
}
.story-viewer.is-open .sv-stage { transform: translateY(0) scale(1); }

.sv-progress {
    position: absolute;
    top: 10px; left: 10px; right: 10px;
    display: flex; gap: 4px;
    z-index: 5;
    pointer-events: none;
}
.sv-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    overflow: hidden;
}
.sv-bar-fill {
    width: 0%;
    height: 100%;
    background: #fff;
    transition: width .12s linear;
}
.sv-bar.done .sv-bar-fill { width: 100%; }

.sv-head {
    position: absolute;
    top: 22px; left: 14px; right: 14px;
    display: flex; align-items: center; gap: 10px;
    z-index: 5;
    pointer-events: none;
}
.sv-head > * { pointer-events: auto; }
.sv-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    background: #222;
}
.sv-avatar.featured {
    border-color: #ffd76b;
    box-shadow: 0 0 0 2px rgba(255, 215, 107, 0.5);
}
.sv-name {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    flex: 1;
    display: flex; align-items: center; gap: 6px;
}
.sv-name .sv-star {
    color: #ffd76b;
    font-size: 13px;
}
.sv-close {
    width: 34px; height: 34px;
    border: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s, transform .15s;
}
.sv-close:hover { background: var(--brand); transform: scale(1.05); }

.sv-video,
.sv-image {
    width: 100%; height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}
/* El [hidden] debe ganarle al display:block de arriba */
.sv-video[hidden],
.sv-image[hidden] { display: none !important; }

.sv-prev,
.sv-next {
    /* Van FUERA del marco, como hermanas de .sv-stage: dentro las
       recortaria su overflow:hidden. El visor ya es un flex centrado, asi
       que basta con ordenarlas a los lados. */
    flex-shrink: 0;
    width: 46px; height: 46px;
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    display: grid; place-items: center;
    /* Siempre visibles, no solo al pasar el raton */
    opacity: .9;
    z-index: 6;
    transition: opacity .2s, background .15s, transform .15s;
}
.sv-prev { order: -1; }   /* antes del marco */
.sv-next { order:  1; }   /* despues */
.sv-prev:hover, .sv-next:hover {
    opacity: 1;
    background: var(--brand);
    transform: scale(1.08);
}
/* En movil no caben a los lados, y ahi se pasa deslizando o tocando:
   se ocultan en vez de comerle ancho al video. */
@media (max-width: 760px) {
    .sv-prev, .sv-next { display: none; }
}

/* ---------- Reacciones en Story Viewer ---------- */
/* Solo posicionamiento: el aspecto lo da el componente compartido .rx,
   que esta definido antes en el archivo. Si aqui se repitieran background,
   padding o border, ganarian por orden y romperian el diseno unificado. */
.sv-reactions {
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.sv-react-legacy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    padding: 8px 14px;
    color: #fff;
    cursor: pointer;
    transition: transform .15s, background .15s;
    font: inherit;
    line-height: 1;
}
.sv-react-legacy:hover { transform: scale(1.1); background: rgba(255,255,255,.22); }
.sv-react-legacy:active { transform: scale(.95); }
/* Animación de pulso al dar like */
@keyframes sv-heart-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(.95); }
    100% { transform: scale(1); }
}

/* legacy — ya no se usa, pero queda por si acaso */
.sv-link {
    display: none;
    position: absolute;
    bottom: 18px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 9px 22px;
    background: #fff;
    color: #111;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s, background .15s;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.sv-link:hover { background: var(--brand); color: #fff; transform: translateX(-50%) scale(1.04); }

/* Zonas clicables invisibles (izquierda/derecha) para "tap para avanzar" */
.sv-tap {
    position: absolute;
    top: 0; bottom: 0;
    width: 32%;
    z-index: 3;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.sv-tap--prev { left: 0; }
.sv-tap--next { right: 0; }

@media (max-width: 560px) {
    .sv-stage { width: 100vw; height: 100vh; max-height: none; border-radius: 0; aspect-ratio: auto; }
    .sv-prev { left: 10px; opacity: 1; background: rgba(0,0,0,.6); }
    .sv-next { right: 10px; opacity: 1; background: rgba(0,0,0,.6); }
}

/* Select compacto para dispositivo en tabla admin */
.ad-device-select {
    width: 100%;
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
}
.ad-device-select:focus {
    outline: none;
    border-color: var(--brand);
}

/* Muro de publicidad (admin) */
.gate-box {
    margin-bottom: 18px;
    padding: 18px 22px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(220, 24, 109, .09), rgba(22, 22, 22, .9) 70%);
    border: 1px solid rgba(220, 24, 109, .28);
}
.gate-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.gate-ico {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(220, 24, 109, .16);
    font-size: 17px;
}
.gate-head h3 { margin: 2px 0 6px; font-size: 15px; color: #fff; }
.gate-head p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.gate-head p:last-child { margin-bottom: 0; }
.gate-warn {
    padding: 9px 12px;
    border-radius: 8px;
    border-left: 3px solid #ffc800;
    background: rgba(255, 200, 0, .08);
    color: #f4e2b0 !important;
}
.gate-warn strong { color: #ffc800; }
.gate-head em { color: rgba(255, 255, 255, .8); font-style: normal; }
.gate-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
}
.gate-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220, 24, 109, .14); }
.gate-input::placeholder { font-family: var(--font); color: rgba(255, 255, 255, .25); }
.gate-hint { display: block; margin-top: 8px; font-size: 12px; color: var(--text-mute); line-height: 1.5; }

/* Tamano del slot: editable, con sugerencias via <datalist>.
   Va con el selector de etiqueta a proposito: .ad-zone-input se define mas
   abajo en este archivo y, a igual especificidad, la regla posterior gana. */
input.ad-size-input {
    display: block;
    width: 100%;
    max-width: 110px;
    box-sizing: border-box;
    padding: 7px 9px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
}
input.ad-size-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(220, 24, 109, .14);
}

/* Formato del slot (etiqueta <ins> de ExoClick) */
.ad-fmt-select {
    display: block;
    width: 100%;
    max-width: 200px;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
}
.ad-fmt-other {
    display: block;
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11px;
}
.ad-fmt-other[hidden] { display: none !important; }

/* Input del Zone ID (solo numeros) */
.ad-zone-input {
    display: block;
    width: 100%;
    max-width: 170px;
    background: var(--bg-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: .5px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.ad-zone-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(220,24,109,.18);
}
.ad-zone-input::placeholder {
    color: var(--text-mute);
    font-family: var(--font);
    font-size: 13px;
    letter-spacing: 0;
}

/* ============================================================
   FEED / TIMELINE
   ============================================================ */
.feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.feed-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s;
}
.feed-card:hover {
    border-color: var(--border-strong);
}
.feed-pinned {
    border-color: rgba(220, 24, 109, .25);
}

/* Header */
.feed-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 0;
}
.feed-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-strong);
    flex-shrink: 0;
}
.feed-author {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Boton "Editar" de cada publicacion — solo lo ve el administrador.
   margin-left:auto lo empuja al extremo derecho de la cabecera. */
.feed-edit {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(220, 24, 109, .38);
    background: rgba(220, 24, 109, .12);
    color: #ff9dc6;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.feed-edit svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.feed-edit:hover,
.feed-edit:focus-visible {
    background: var(--brand, #DC186D);
    border-color: var(--brand, #DC186D);
    color: #fff;
    text-decoration: none;
}
/* En movil el texto sobra: se deja solo el lapiz */
@media (max-width: 520px) {
    .feed-edit { padding: 8px; }
    .feed-edit span { display: none; }
}
.feed-name {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.feed-badge-admin {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--brand);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
}
.feed-time {
    font-size: 12px;
    color: var(--text-mute);
}

/* Text body */
.feed-text {
    padding: 10px 16px 4px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dim);
    word-break: break-word;
}

/* Contenido bloqueado: difuminado sutil + overlay */
.feed-media-wrap {
    position: relative;
}
.feed-locked .feed-media-wrap .feed-gallery {
    filter: blur(7px) saturate(.85);
    transform: scale(1.03);      /* evita bordes transparentes del blur */
    pointer-events: none;
    user-select: none;
}
.feed-locked .feed-media-wrap {
    overflow: hidden;
    border-radius: 0 0 var(--radius) var(--radius);
}
.feed-lock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(11,11,11,.25), rgba(11,11,11,.55));
    text-align: center;
    padding: 16px;
}
.feed-lock svg {
    width: 30px; height: 30px;
    color: #fff;
    opacity: .9;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.feed-lock__txt {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.feed-lock__sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
    max-width: 300px;
    line-height: 1.5;
    margin-top: -3px;
}
.feed-lock__btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}
.feed-lock__btns[hidden] { display: none !important; }

/* El botón secundario va sobre una foto difuminada, no sobre el fondo de
   la web: con el fondo transparente de .btn-ghost quedaba casi invisible.
   Aquí necesita cuerpo propio. Dos clases (0-2-0) le ganan a .btn-ghost
   (0-1-0) sin depender del orden del archivo. */
.feed-lock .btn-ghost {
    background: rgba(12, 12, 16, .72);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.feed-lock .btn-ghost:hover,
.feed-lock .btn-ghost:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

/* --- Cuenta atras del anuncio --- */
.lk-wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.lk-wait[hidden] { display: none !important; }

.lk-ring {
    position: relative;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
}
.lk-ring svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.lk-ring circle {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
}
.lk-bg { stroke: rgba(255, 255, 255, .15); }
.lk-fg {
    stroke: var(--brand);
    transition: stroke-dashoffset 1s linear;
    filter: drop-shadow(0 0 5px rgba(220, 24, 109, .7));
}
.lk-n {
    position: relative;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.lk-msg {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .6);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
    max-width: 240px;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════
   PUBLICIDAD SOBRE EL VÍDEO (al pausar o al terminar)
   ══════════════════════════════════════════════════════════ */
.vad {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 14px;
    background: rgba(6, 7, 11, .9);
    animation: adgate-in .16s ease;
}
/* Sin !important el display:grid de arriba gana al [hidden] del navegador
   y el anuncio saldria siempre, tapando el vídeo desde el principio. */
.vad[hidden] { display: none !important; }

.vad-box {
    position: relative;
    max-width: 100%;
    padding: 20px 12px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(0, 0, 0, .45);
}
.vad-tag {
    position: absolute;
    top: 6px; left: 10px;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .34);
    pointer-events: none;
}
.vad-ad { display: grid; place-items: center; min-height: 60px; overflow: hidden; }
.vad-ad ins { max-width: 100%; }

/* ── Muro del anuncio sobre la publicación ── */
.vad-gate__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vad-gate__intro[hidden] { display: none !important; }

.vad-gate__ad {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 20px 12px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    background: rgba(0, 0, 0, .55);
}
.vad-gate__ad[hidden] { display: none !important; }
.vad-gate__ad .vad-ad { min-height: 100px; }

/* Pie: cuenta atrás + botón de continuar */
.vad-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}
.vad-foot[hidden] { display: none !important; }
.vad-n {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex-shrink: 0;
    border: 2px solid var(--brand);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}
.vad-n[hidden] { display: none !important; }
.vad-go:disabled { opacity: .45; cursor: not-allowed; }
.vad-x[hidden] { display: none !important; }

.vad-x {
    position: absolute;
    top: 2px; right: 4px;
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.vad-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Prueba de la zona en el panel */
.vad-test {
    position: relative;
    margin-top: 12px;
    padding: 20px 12px 12px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    font-size: 12.5px;
    color: var(--text-mute);
}
.vad-test[hidden] { display: none !important; }
.vad-test__tag {
    position: absolute;
    top: 6px; left: 10px;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .32);
}
.vad-test__err {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #ffc800;
}
.vad-test__info {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
}
.vad-test__info b { color: #fff; }

/* El contenedor del vídeo necesita ser el marco de referencia para que
   la capa se coloque encima y no sobre toda la página. */
.vad-host { position: relative; }

/* ══════════════════════════════════════════════════════════
   MURO DE PUBLICIDAD (solo queda para la vista previa del panel)
   ══════════════════════════════════════════════════════════ */
.adgate {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(5, 6, 10, .86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: adgate-in .18s ease;
}
/* Sin !important el display:grid de arriba gana al [hidden] del navegador
   y el muro apareceria abierto nada mas cargar la pagina. */
.adgate[hidden] { display: none !important; }

@keyframes adgate-in { from { opacity: 0 } to { opacity: 1 } }

.adgate__box {
    position: relative;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 20px 20px;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    /* Un punto mas claro que --surface y con un toque de marca arriba:
       sobre el fondo oscurecido, una caja #161616 se leia como un hueco
       negro en vez de como una ventana. */
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(220, 24, 109, .16), transparent 62%),
        #202027;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
    text-align: center;
}

.adgate__head { display: flex; flex-direction: column; gap: 4px; }
.adgate__title { font-size: 17px; font-weight: 800; }
.adgate__sub   { font-size: 12.5px; color: var(--text-dim); }

/* Contenedor del anuncio. La altura minima evita que la ventana pegue
   un salto cuando ExoClick termina de inyectar el creativo. */
.adgate__ad {
    position: relative;
    display: grid;
    place-items: center;
    /* Alto minimo pequeno: el hueco se adapta al anuncio que llegue, no al
       reves. Antes eran 250px fijos y con un anuncio mas bajo quedaba un
       marco vacio enorme alrededor. */
    min-height: 130px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(0, 0, 0, .28);
    overflow: hidden;
}
.adgate__ad ins,
.adgate__ad iframe { max-width: 100%; }

.adgate__adtag {
    position: absolute;
    top: 6px; left: 8px;
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .32);
    pointer-events: none;
}
/* Sin anuncio: el muro sigue sirviendo, pero el hueco no se queda negro */
.adgate__ad.is-empty {
    min-height: 0;
    padding: 14px 12px;
    border-style: dashed;
    background: rgba(255, 255, 255, .02);
}
.adgate__ad.is-empty .adgate__adtag { display: none; }
.adgate__empty {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-mute, rgba(255, 255, 255, .45));
}
.adgate__empty[hidden] { display: none !important; }

.adgate__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.adgate__ring {
    position: relative;
    flex-shrink: 0;
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
}
.adgate__ring svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.adgate__ring circle {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
}
.adgate__ring .lk-n { font-size: 18px; }

.adgate__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adgate__msg  { font-size: 13.5px; font-weight: 700; }
.adgate__hint { font-size: 11.5px; color: var(--text-mute, rgba(255,255,255,.55)); line-height: 1.4; }

.adgate__btns { display: flex; flex-direction: column; gap: 8px; }
.adgate__go:disabled { opacity: .45; cursor: not-allowed; }

.adgate__x {
    position: absolute;
    top: 8px; right: 10px;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-mute, rgba(255,255,255,.55));
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.adgate__x:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Congela el scroll del fondo mientras el muro esta abierto */
body.adgate-open { overflow: hidden; }

@media (max-width: 520px) {
    .feed-lock__sub { font-size: 11.5px; max-width: 240px; }
    .feed-lock__btns { flex-direction: column; width: 100%; max-width: 240px; }
    .feed-lock__btns .btn { width: 100%; }
}
/* El texto del post tambien se atenua un poco cuando esta bloqueado */
.feed-locked .feed-text {
    opacity: .75;
}

/* ============================================================
   Mosaico de media (estilo Instagram / Facebook)
   El layout cambia segun cuantos archivos hay: data-n="1..4"
   ============================================================ */
.feed-gallery {
    display: grid;
    gap: 3px;
    margin-top: 10px;
    overflow: hidden;
}

/* 1 archivo: ancho completo, formato panoramico */
.feed-gallery[data-n="1"] {
    grid-template-columns: 1fr;
    aspect-ratio: 16 / 10;
}

/* 2 archivos: lado a lado, cada uno vertical */
.feed-gallery[data-n="2"] {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 16 / 10;
}

/* 3 archivos: uno grande a la izquierda + dos apilados a la derecha */
.feed-gallery[data-n="3"] {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 16 / 11;
}
.feed-gallery[data-n="3"] .feed-media-item:first-child {
    grid-row: 1 / span 2;
}

/* 4 archivos: rejilla 2x2 */
.feed-gallery[data-n="4"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1 / 1;
}

.feed-media-item {
    position: relative;
    overflow: hidden;
    /* Fondo con textura: si un video aun no tiene poster no se ve
       un rectangulo negro plano, sino un degradado de marca */
    background:
        radial-gradient(420px 220px at 30% 20%, rgba(220, 24, 109, .16), transparent 62%),
        linear-gradient(140deg, #1a1a1a, #0d0d0d 70%);
    min-width: 0;
    min-height: 0;
}
.feed-media-item img,
.feed-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Con un solo archivo el video se ve completo, sin recortar */
.feed-gallery[data-n="1"] .feed-media-item video {
    object-fit: contain;
    background: #000;
}

/* Las celdas abribles invitan al clic */
.feed-media-item.is-openable {
    cursor: pointer;
}
.feed-media-item.is-openable img,
.feed-media-item.is-openable video {
    transition: transform .3s ease, filter .3s ease;
}
.feed-media-item.is-openable:hover img,
.feed-media-item.is-openable:hover video {
    transform: scale(1.04);
    filter: brightness(1.08);
}

/* Indicador de "ver" al pasar el mouse */
.feed-media-item.is-openable::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 22px no-repeat;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, .25);
    opacity: 0;
    transform: scale(.75);
    transition: opacity .2s ease, transform .22s cubic-bezier(.2, .9, .3, 1.3);
    pointer-events: none;
    z-index: 3;
}
.feed-media-item.is-openable:hover::after {
    opacity: 1;
    transform: scale(1);
}
/* Si la celda ya tiene play o contador "+N", no duplicar el icono */
.feed-media-item.is-openable:has(.feed-play)::after,
.feed-media-item.is-openable:has(.feed-more)::after { display: none; }

/* En movil no hay hover: el icono solo estorbaria */
@media (hover: none) {
    .feed-media-item.is-openable::after { display: none; }
}

/* ============================================================
   Lightbox (visor a pantalla completa)
   ============================================================ */
.lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(5, 5, 5, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    animation: lbIn .18s ease;
}
/* IMPORTANTE: 'display:grid' de arriba anula el [hidden] del navegador.
   Sin esta regla el visor aparece abierto al cargar la pagina. */
.lb[hidden] { display: none !important; }
@keyframes lbIn { from { opacity: 0 } to { opacity: 1 } }

/* Dos columnas: foto a la izquierda, comentarios a la derecha.
   La fila se fija a la altura completa a proposito. Sin ella, la fila mide
   lo que mida su contenido: con una foto grande daba igual, pero en una
   pieza tapada el escenario va vacio y la fila se encogia, dejando el panel
   de comentarios flotando a media altura. */
.lb {
    grid-template-columns: 1fr 340px;
    grid-template-rows: 100%;
}
.lb.lb-nocomments { grid-template-columns: 1fr 0; }
.lb.lb-nocomments .lb-side { transform: translateX(100%); opacity: 0; pointer-events: none; }

.lb-stage {
    grid-column: 1;
    /* Igual que el panel: que ocupe su columna entera, no su contenido */
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 60px 80px 120px;
    box-sizing: border-box;
    overflow: hidden;
}
/* Las medidas se atan al viewport: un max-height en % dentro de un grid
   anidado no se resuelve y la imagen termina desbordando la pantalla. */
.lb-media {
    max-width: calc(100vw - 500px);
    max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    animation: lbPop .22s cubic-bezier(.2, .9, .3, 1);
}
@keyframes lbPop { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }

/* Pieza tapada dentro del visor: candado en lugar del archivo.
   Va en la columna del escenario, no encima de todo, para que las flechas
   y los puntos sigan accesibles y se pueda pasar de largo. */
.lb-lock {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 340px;
    padding: 32px 26px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: radial-gradient(110% 80% at 50% 0%, rgba(255, 200, 0, .12), rgba(16, 16, 20, .96) 68%);
    text-align: center;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
}
.lb-lock[hidden] { display: none !important; }
.lb-lock > svg { width: 42px; height: 42px; color: #ffd54a; }
.lb-lock strong { font-size: 18px; font-weight: 800; }
.lb-lock span   { font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.lb-lock__btns  { margin-top: 6px; }

/* Envoltorio del vídeo con publicidad: la capa del anuncio se ciñe a él
   y no al escenario entero, así nunca tapa reacciones ni navegación. */
.lb-vwrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    /* Crea su propio contexto de apilamiento: el z-index de la capa del
       anuncio queda encerrado aquí y no compite con el resto del visor. */
    z-index: 0;
}
.lb-vwrap .lb-media { display: block; }

.lb-close,
.lb-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    cursor: pointer;
    transition: background .15s, transform .15s;
    line-height: 1;
}
.lb-close:hover,
.lb-nav:hover { background: var(--brand); transform: scale(1.07); }

/* El display:grid de arriba anula el atributo [hidden]: sin esto salen
   flechas aunque la publicacion tenga una sola foto. */
.lb-close[hidden],
.lb-nav[hidden] { display: none !important; }

.lb-close {
    top: 16px;
    right: calc(340px + 18px);   /* sobre la foto, no sobre los comentarios */
    width: 42px; height: 42px;
    font-size: 26px;
}
.lb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    font-size: 30px;
    padding-bottom: 4px;
}
.lb-nav:hover { transform: translateY(-50%) scale(1.07); }
.lb-prev { left: 16px; }
.lb-next { right: calc(340px + 16px); }

/* Con el panel plegado, todo vuelve al borde de la ventana */
.lb.lb-nocomments .lb-close { right: 18px; }
.lb.lb-nocomments .lb-next  { right: 16px; }

/* Estos 3 se centran sobre la FOTO (columna izquierda), no sobre toda la
   ventana: por eso restamos la mitad del panel de comentarios (340/2). */
.lb-counter,
.lb-dots,
.lb-rate {
    position: absolute;
    left: calc(50% - 170px);
    transform: translateX(-50%);
    z-index: 3;
}
.lb.lb-nocomments .lb-counter,
.lb.lb-nocomments .lb-dots,
.lb.lb-nocomments .lb-rate { left: 50%; }

.lb-counter {
    top: 20px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    background: rgba(0, 0, 0, .45);
    padding: 6px 14px;
    border-radius: 999px;
}
.lb-rate  { bottom: 62px; }
/* .lb-rate lleva tambien la clase .rx, que trae display:inline-flex y gana
   al [hidden] del navegador: sin esto, las reacciones seguian apareciendo
   sobre una pieza tapada, donde no hay nada que votar. Lo mismo con los
   puntos y el contador, que traen su propio display. */
.lb-rate[hidden], .lb-dots[hidden], .lb-counter[hidden] { display: none !important; }
.lb-dots {
    bottom: 20px;
    display: flex;
    gap: 7px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, .45);
    border-radius: 999px;
}
/* display:flex anularia el [hidden] cuando hay una sola foto */
.lb-dots[hidden], .lb-counter[hidden] { display: none !important; }
.lb-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, .32);
    cursor: pointer;
    transition: background .15s, width .15s;
}
.lb-dot:hover { background: rgba(255, 255, 255, .6); }
.lb-dot.on { background: var(--brand); width: 20px; border-radius: 999px; }

/* ---- Panel de comentarios (de la publicacion completa) ---- */
.lb-side {
    grid-column: 2;
    /* El visor usa place-items:center, que encoge cada elemento a su
       contenido y lo centra en su columna. Sin esto el panel quedaba
       flotando en medio, con un hueco entre el y el borde de la ventana. */
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #131313;
    border-left: 1px solid rgba(255, 255, 255, .09);
    box-sizing: border-box;
    overflow: hidden;
    transition: transform .25s ease, opacity .2s ease;
}
.lb-side[hidden] { display: none !important; }

.lbc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}
.lbc-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lbc-count {
    font-size: 12px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(220, 24, 109, .2);
    color: #ff7ab0;
}

.lbc-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
}
.lbc-empty {
    margin: auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .28);
}

.lbc-item { display: flex; gap: 10px; align-items: flex-start; }
.lbc-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #222;
}
.lbc-bub {
    min-width: 0;
    flex: 1;
    background: rgba(255, 255, 255, .05);
    border-radius: 4px 14px 14px 14px;
    padding: 9px 13px;
}
.lbc-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.lbc-name { font-size: 12.5px; font-weight: 800; color: rgba(255, 255, 255, .92); }
.lbc-badge {
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px;
    background: var(--brand); color: #fff;
    padding: 2px 6px; border-radius: 999px;
}
.lbc-ago { font-size: 11px; color: rgba(255, 255, 255, .3); }
.lbc-del {
    margin-left: auto;
    width: 20px; height: 20px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .25);
    font-size: 15px; line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.lbc-del:hover { background: rgba(239, 68, 68, .2); color: #f87171; }
.lbc-txt {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
    word-break: break-word;
    white-space: pre-wrap;
}

.lbc-form {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.lbc-me { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #222; }
.lbc-input {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 4px 4px 14px;
    transition: border-color .15s;
}
.lbc-input:focus-within { border-color: var(--brand); }
.lbc-input textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 8px 0;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
}
.lbc-input textarea:focus { outline: none; }
.lbc-send {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border: 0; border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .15s, transform .12s;
}
.lbc-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lbc-send:hover { background: #ff2e82; }
.lbc-send:active { transform: scale(.92); }

.lbc-login { flex-shrink: 0; padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.07); text-align: center; }
.lbc-login .btn { width: 100%; }

@media (max-width: 980px) {
    /* Comentarios debajo de la foto */
    .lb { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .lb.lb-nocomments { grid-template-rows: 1fr 0; }
    .lb-stage { grid-column: 1; grid-row: 1; padding: 54px 12px 104px; }
    .lb-media {
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 480px);
        max-height: calc(100dvh - 480px);
    }
    .lb-side {
        grid-column: 1; grid-row: 2;
        height: 300px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .09);
    }
    .lb.lb-nocomments .lb-side { transform: translateY(100%); }
    /* En una sola columna vuelven al centro real */
    .lb-counter, .lb-dots, .lb-rate { left: 50%; }
    .lb-rate { bottom: 368px; }
    .lb-dots { bottom: 318px; }
    /* Las flechas y el cierre ya no compiten con el panel lateral */
    .lb-close, .lb.lb-nocomments .lb-close { right: 14px; }
    .lb-next,  .lb.lb-nocomments .lb-next  { right: 14px; }
    .lb-nav { top: calc(50% - 150px); }
}

@media (max-width: 700px) {
    .lb-nav   { width: 38px; height: 38px; font-size: 25px; }
    .lb-prev  { left: 8px; }
    .lb-next  { right: 8px; }
    .lb-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 23px; }
    .lb-side  { height: 260px; }
    .lb-rate  { bottom: 326px; }
    .lb-dots  { bottom: 276px; }
    .lb-media { max-height: calc(100dvh - 440px); }
}

/* ---- Video externo incrustado ---- */
.feed-embed {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}
/* Un embed ocupa toda la fila: los reproductores externos no se
   dejan recortar bien en una celda pequena del mosaico.
   La proporcion la pone el propio iframe (style="aspect-ratio"),
   asi un video vertical de RedGIFs no queda aplastado en 16:9. */
.feed-gallery .feed-media-item.is-embed {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    display: flex;
    justify-content: center;
    background: #000;
}
.feed-embed {
    max-height: 80vh;   /* un 9:16 no debe ocupar tres pantallas */
    margin: 0 auto;
}
/* Sin icono de lupa ni zoom en el iframe */
.feed-media-item.is-embed::after { display: none; }
.feed-media-item.is-embed:hover iframe { transform: none; filter: none; }
/* El difuminado de contenido bloqueado tambien tapa el iframe */
.feed-locked .feed-embed { pointer-events: none; }

/* En el post, el iframe solo hace de miniatura: no recibe el clic. Lo
   recibe esta capa transparente que hay encima, y el visor se abre igual
   que con una foto. Sin esto el reproductor de Bunny se quedaba el clic y
   el video arrancaba ahi mismo, sin comentarios ni reacciones. */
.feed-media-item.is-embed { position: relative; }
.feed-media-item.is-embed .feed-embed { pointer-events: none; }

/* Miniatura del video externo (cuando el proveedor la ofrece): una imagen
   normal, con el mismo encuadre que tendria el reproductor. */
.feed-embed-poster {
    display: block;
    width: 100%;
    max-height: 80vh;
    margin: 0 auto;
    object-fit: cover;
    background: #000;
}
.feed-embed-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
}
/* El embed siempre lleva el icono de play, también cuando va solo: en ese
   caso el icono normal se oculta y el ::after del zoom está desactivado,
   así que sin esto no habría ninguna pista de que se puede pulsar. */
.feed-gallery .feed-media-item.is-embed .feed-play {
    display: block;
    z-index: 3;
    pointer-events: none;
}

/* Dentro del visor: el iframe del proveedor, con su tamaño calculado
   desde la proporción guardada (el iframe no mide nada por sí solo). */
.lb-embed {
    border: 0;
    background: #000;
    max-width: calc(100vw - 500px);
    max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px);
}
@media (max-width: 900px) {
    .lb-embed { max-width: 100vw; }
}

/* ---- Modelo vinculada a la publicacion ---- */

/* Modelo de la publicacion, justo encima del campo de comentario */
.lb-tag {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(135deg, rgba(220, 24, 109, .1), rgba(255, 255, 255, .015) 70%);
}
/* Si hay etiqueta, el formulario ya no necesita su propio borde superior */
.lb-tag:not([hidden]) + .lbc-form,
.lb-tag:not([hidden]) + .lbc-login { border-top: 0; }
.lb-tag[hidden] { display: none !important; }

.lbt-p {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: inherit;
    text-decoration: none;
}
.lbt-p img {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(220, 24, 109, .55);
    transition: border-color .18s;
}
.lbt-p:hover img { border-color: var(--brand); }
.lbt-n {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .18s;
}
.lbt-p:hover .lbt-n { color: var(--brand); }
.lbt-live {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
    background: #ef4444;
    padding: 3px 7px;
    border-radius: 999px;
    flex-shrink: 0;
    animation: tagPulse 1.8s ease-in-out infinite;
}
@keyframes tagPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

.lbt-wa {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 10px;
    background: #25d366;
    color: #08331a;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(37, 211, 102, .3);
    transition: background .16s, transform .16s, box-shadow .16s;
}
.lbt-wa svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.lbt-wa:hover {
    background: #1fbd5a;
    color: #08331a;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(37, 211, 102, .45);
}

@media (max-width: 600px) {
    .lb-tag { padding: 11px 14px; }
    .lbt-p img { width: 33px; height: 33px; }
    .lbt-n { font-size: 13px; }
    .lbt-wa span { display: none; }
    .lbt-wa { padding: 9px 11px; }
}

/* Barra de contacto bajo la galeria */
.feed-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 1px;
    background: linear-gradient(135deg, rgba(220, 24, 109, .08), rgba(255, 255, 255, .015) 70%);
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-wrap: wrap;
}
.feed-cta__p {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.feed-cta__p img {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(220, 24, 109, .55);
}
.feed-cta__p span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.feed-cta__p strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-cta__p small { font-size: 11.5px; color: var(--text-mute); }
.feed-cta__p:hover strong { color: var(--brand); }

.feed-cta__b { display: flex; gap: 7px; flex-shrink: 0; }
.fcta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .05);
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.fcta svg { width: 15px; height: 15px; flex-shrink: 0; }
.fcta:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
    transform: translateY(-1px);
}
.fcta--wa {
    background: #25d366;
    border-color: transparent;
    color: #08331a !important;
    box-shadow: 0 3px 12px rgba(37, 211, 102, .3);
}
.fcta--wa svg { fill: currentColor; }
.fcta--wa:hover {
    background: #1fbd5a;
    border-color: transparent;
    color: #08331a !important;
    box-shadow: 0 5px 18px rgba(37, 211, 102, .45);
}

@media (max-width: 520px) {
    .feed-cta { padding: 11px 13px; }
    .feed-cta__b { width: 100%; }
    .feed-cta__b .fcta { flex: 1; justify-content: center; }
}

/* Contador "+N" sobre el ultimo cuadro cuando hay mas de 4 */
.feed-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;   /* el clic lo recibe la celda y abre el visor */
    transition: background .2s;
}
.feed-media-item.is-openable:hover .feed-more {
    background: rgba(0, 0, 0, .42);
}

/* Triangulo de play sobre los videos del mosaico */
.feed-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    border: 2px solid rgba(255, 255, 255, .85);
    pointer-events: none;
}
.feed-play::after {
    content: '';
    position: absolute;
    left: 52%; top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
}
.feed-gallery[data-n="1"] .feed-play { display: none; }
.feed-gallery[data-n="3"] .feed-media-item:not(:first-child) .feed-play,
.feed-gallery[data-n="4"] .feed-play {
    width: 34px; height: 34px;
}
.feed-gallery[data-n="4"] .feed-play::after {
    border-width: 6px 0 6px 10px;
}

/* Footer */
.feed-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 14px;
}
/* Contadores de interaccion bajo cada publicacion */
.feed-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, .28);
    font-variant-numeric: tabular-nums;
    transition: color .18s;
}
.feed-stat svg {
    width: 17px; height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Con interacciones se enciende */
.feed-stat.has { color: rgba(255, 255, 255, .72); }
.feed-stat.has:first-child { color: #ff7ab0; }
.feed-stat.has:first-child svg { fill: rgba(220, 24, 109, .35); }

/* Feed responsive */
@media (max-width: 600px) {
    .feed {
        max-width: 100%;
    }
    /* En movil el mosaico se mantiene; solo se reducen los adornos */
    .feed-gallery { gap: 2px; }
    .feed-more { font-size: 21px; }
    .feed-play { width: 38px; height: 38px; }
    .feed-gallery[data-n="4"] .feed-play,
    .feed-gallery[data-n="3"] .feed-media-item:not(:first-child) .feed-play {
        width: 28px; height: 28px;
    }
    .feed-head {
        padding: 12px 14px 0;
    }
    .feed-text {
        padding: 8px 14px 4px;
        font-size: 13.5px;
    }
    .feed-foot {
        padding: 8px 14px 12px;
    }
}