/* Aplicación privada: páginas, descubrimiento, chat, perfil, funciones, ajustes, staff y acceso */
.page { width: min(920px, 100%); margin-inline: auto; padding: var(--s5) var(--gutter) var(--s7); }
.page-head { margin-bottom: var(--s5); }
.page-head h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin-bottom: 4px; }
.page-head p { margin: 0; }
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.label { font-weight: 650; font-size: .84rem; color: var(--muted); text-transform: none; display: block; }
.notice-soft { display: flex; gap: 10px; align-items: flex-start; background: var(--pink-wash); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; font-size: .88rem; color: var(--ink-2); }
.notice-soft .ico { color: var(--pink); margin-top: 2px; }
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--pink-wash); border-radius: var(--r-md); padding: 14px 16px; }
.stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: var(--plum); }
.stat span { font-size: .8rem; color: var(--muted); font-weight: 700; }
.small-stats .stat strong { font-size: 1.4rem; }

/* ---------- Descubrir ---------- */
.disc { width: min(470px, 100%); margin-inline: auto; padding: 12px var(--gutter) 8px; display: flex; flex-direction: column; min-height: calc(100dvh - var(--top-h) - var(--tab-h) - env(safe-area-inset-bottom)); }
.disc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.disc-head h1 { font-size: 1.5rem; margin: 0; }
.disc-head .chip { white-space: nowrap; flex: none; }
.deck-wrap { position: relative; flex: 1; min-height: 360px; margin-bottom: 34px; }
.deck { position: absolute; inset: 0; outline: none; }
.deck-state { position: absolute; inset: 0; display: grid; place-items: center; }
@media (min-width: 900px) {
  .disc { min-height: calc(100dvh - var(--top-h)); padding-top: 20px; }
  .deck-wrap { max-height: 640px; min-height: 480px; }
}
.pcard { position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden; background: #2a1a22; box-shadow: var(--shadow-md); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform; --like: 0; --nope: 0; --theme: var(--pink); }
.pcard.top:active { cursor: grabbing; }
.pcard:not(.top) { pointer-events: none; }
.pcard.static { position: relative; aspect-ratio: 3 / 4; cursor: default; }
.pc-photo, .pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pc-photo img.img-fallback { object-fit: contain; padding: 22%; background: var(--pink-wash); }
.pc-dots { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 4px; }
.pc-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.pc-dots i.on { background: #fff; }
.pc-flag { position: absolute; top: 24px; left: 14px; }
.pc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 20px 20px; color: #fff; background: linear-gradient(transparent, rgba(24, 8, 16, .55) 35%, rgba(24, 8, 16, .88)); pointer-events: none; }
.pc-cap::before { content: ''; position: absolute; left: 20px; top: 56px; width: 36px; height: 4px; border-radius: 2px; background: var(--theme); }
.pc-cap h2 { font-size: 1.65rem; margin: 0 0 2px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.pc-cap .badge { margin-left: 6px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.pc-cap .badge.verified { color: #5BB6FF; }
.pc-user { margin: 0 0 6px; font-weight: 700; opacity: .92; font-size: .95rem; }
.pc-meta { margin: 0 0 6px; font-size: .9rem; opacity: .9; }
.pc-bio { margin: 0 0 8px; font-size: .95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: .95; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chips span { background: rgba(255, 255, 255, .2); backdrop-filter: blur(4px); padding: 3px 11px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 700; }
.pcard .tag.mod { background: #CFF3E2; }
.stamp { position: absolute; top: 34px; padding: 4px 14px; border: 4px solid; border-radius: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; letter-spacing: .05em; opacity: 0; pointer-events: none; background: rgba(255, 255, 255, .15); }
.stamp.like { left: 22px; color: #4ade9a; border-color: #4ade9a; transform: rotate(-14deg); opacity: var(--like); }
.stamp.nope { right: 22px; color: #ff7a93; border-color: #ff7a93; transform: rotate(14deg); opacity: var(--nope); }
.stamp.super { left: 50%; top: 40%; color: #7cc4ff; border-color: #7cc4ff; transform: translateX(-50%); font-size: 2rem; }
.pcard.go-super .stamp.super { opacity: 1; }
.pcard.go-like .stamp.like { opacity: 1; }
.pcard.go-pass .stamp.nope { opacity: 1; }
.pcard.static .stamp { display: none; }

.actions { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 4vw, 20px); padding: 16px 0 6px; }
.act { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--shadow-md), 0 0 0 1px var(--line); display: grid; place-items: center; position: relative; transition: transform .15s var(--ease), box-shadow .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.act .ico { width: 30px; height: 30px; stroke-width: 2.2; }
.act:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.act:active:not(:disabled) { transform: scale(.92); }
.act:disabled { opacity: .4; box-shadow: 0 0 0 1px var(--line); }
.act.like { color: #fff; background: var(--pink); box-shadow: 0 8px 20px rgba(232, 70, 124, .35); width: 72px; height: 72px; }
.act.like .ico { fill: #fff; stroke: none; width: 34px; height: 34px; }
.act.pass { color: #8d7a84; }
.act.super { color: #2E90D9; width: 52px; height: 52px; }
.act.undo { color: var(--crown); width: 48px; height: 48px; }
.act.super .ico, .act.undo .ico { width: 24px; height: 24px; }
.act small { position: absolute; bottom: -4px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 650; display: grid; place-items: center; }
.act small:empty { display: none; }
.act.sm { width: 46px; height: 46px; } .act.sm .ico { width: 22px; height: 22px; }
.act.sm.like { width: 46px; height: 46px; } .act.sm.like .ico { width: 22px; height: 22px; }
.kbd-hint { margin: 6px 0 0; }

/* Ficha de perfil (modal) */
.pm-gallery { position: relative; overflow: hidden; background: #2a1a22; aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.pm-track { display: flex; height: 100%; transition: transform .35s var(--ease); }
.pm-slide { flex: 0 0 100%; height: 100%; }
.pm-slide img { width: 100%; height: 100%; object-fit: cover; }
.pm-slide img.img-fallback { object-fit: contain; padding: 25%; background: var(--pink-wash); }
.pm-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--glass); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.pm-nav.prev { left: 10px; } .pm-nav.next { right: 10px; }
.pm-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.pm-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: .2s; }
.pm-dots i.on { background: #fff; width: 20px; border-radius: 4px; }
.pm-info { padding: 20px 24px 8px; }
.pm-name { margin: 0; font-size: 1.7rem; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; color: var(--ink-2); font-weight: 700; font-size: .92rem; }
.pm-meta span { display: inline-flex; gap: 6px; align-items: center; }
.pm-meta .ico { color: var(--pink); width: 1.1em; }
.pm-bio { white-space: pre-line; color: var(--ink-2); }
.pm-block { margin-top: 14px; }
.pm-block p { margin: 2px 0 0; color: var(--ink-2); }
.pm-actions { display: flex; gap: 10px; align-items: center; padding: 12px 24px 22px; flex-wrap: wrap; }
@media (min-width: 760px) {
  .modal.wide.flush { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; max-height: min(720px, calc(100dvh - 32px)); }
  .modal.wide.flush .pm-gallery { aspect-ratio: auto; max-height: none; height: 100%; min-height: 480px; border-radius: 0; grid-row: 1 / span 2; }
  .modal.wide.flush .pm-info { overflow-y: auto; padding-top: 34px; }
  .modal.wide.flush .pm-actions { align-self: end; }
  .modal.wide.flush > .pm-info, .modal.wide.flush > .pm-actions { grid-column: 2; }
}

/* Match */
.match-modal { padding: 8px 0 0; position: relative; overflow: hidden; }
.match-title { font-size: 2.3rem; color: var(--pink); margin-bottom: 6px; animation: matchIn .6s var(--ease) both; }
.match-avatars { display: flex; justify-content: center; margin: 22px 0 26px; }
.match-avatars .avatar { border: 5px solid #fff; box-shadow: var(--shadow-md); }
.match-avatars .avatar:first-child { transform: rotate(-8deg) translateX(14px); animation: slideL .7s var(--ease) both; }
.match-avatars .avatar:last-child { transform: rotate(8deg) translateX(-14px); animation: slideR .7s var(--ease) both; }
.match-hearts { position: absolute; inset: 0; pointer-events: none; }
.match-hearts i { position: absolute; bottom: -20px; left: calc(var(--i) * 10% + 2%); color: var(--pink-soft); animation: heartUp 2.6s ease-out calc(var(--i) * .12s) both; }
.match-hearts i:nth-child(odd) { color: var(--pink); }
@keyframes matchIn { from { opacity: 0; transform: scale(.6); } }
@keyframes slideL { from { transform: rotate(-8deg) translateX(-120px); opacity: 0; } }
@keyframes slideR { from { transform: rotate(8deg) translateX(120px); opacity: 0; } }
@keyframes heartUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-340px) scale(1.4) rotate(18deg); opacity: 0; } }

/* ---------- Matches y chat ---------- */
.msgs { display: grid; grid-template-columns: 1fr; height: calc(100dvh - var(--top-h) - var(--tab-h) - env(safe-area-inset-bottom)); min-height: 420px; }
.msgs-list { overflow-y: auto; border-right: 1px solid var(--line); }
.msgs-head { padding: 18px var(--gutter) 8px; }
.msgs-head h1 { font-size: 1.6rem; margin: 0; }
.msgs-chat { display: none; flex-direction: column; min-height: 0; background: var(--card); }
.msgs.has-chat .msgs-list { display: none; }
.msgs.has-chat .msgs-chat { display: flex; }
@media (min-width: 900px) {
  .msgs { grid-template-columns: 340px 1fr; height: calc(100dvh - var(--top-h)); }
  .msgs .msgs-list, .msgs.has-chat .msgs-list { display: block; }
  .msgs .msgs-chat, .msgs.has-chat .msgs-chat { display: flex; }
  .msgs-head { padding-inline: 20px; }
}
.match-row { display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter); color: var(--ink); text-decoration: none !important; border-left: 3px solid transparent; }
.match-row:hover { background: var(--pink-wash); }
.match-row.active { background: var(--pink-wash); border-left-color: var(--pink); }
.match-row .avatar { width: 52px; height: 52px; }
.match-row .grow { display: flex; flex-direction: column; min-width: 0; }
.match-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.count.static { position: static; border: 0; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-height: 62px; }
.chat-who { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 8px; border-radius: var(--r-md); text-align: left; min-width: 0; }
.chat-who:hover { background: var(--pink-wash); }
.chat-who > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px var(--gutter); display: flex; flex-direction: column; gap: 6px; background: linear-gradient(var(--card), var(--pink-wash)); overscroll-behavior: contain; }
.day-sep { align-self: center; font-size: .75rem; font-weight: 650; color: var(--muted); background: var(--card); border: 1px solid var(--line); padding: 3px 12px; border-radius: var(--r-pill); margin: 10px 0 4px; text-transform: capitalize; }
.bubble { max-width: min(78%, 460px); padding: 9px 14px 6px; border-radius: 18px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.bubble time { display: block; font-size: .68rem; opacity: .65; text-align: right; margin-top: 2px; font-weight: 700; }
.bubble.mine { align-self: flex-end; background: var(--pink); color: #fff; border-bottom-right-radius: 5px; }
.bubble.theirs { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.pending { opacity: .6; } .bubble.failed { background: var(--err); }
.chat-empty { margin: auto; text-align: center; color: var(--muted); max-width: 280px; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.composer .textarea { min-height: 44px; max-height: 140px; resize: none; scrollbar-width: none; border-radius: 22px; padding: 10px 16px; }
.composer .btn { width: 46px; min-height: 46px; padding: 0; border-radius: 50%; flex: none; }
.avatar.lg-ish { width: 52px; height: 52px; }

/* ---------- Me gustas ---------- */
.likes-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .likes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .likes-grid { grid-template-columns: repeat(4, 1fr); } }
.like-tile { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; background: var(--pink-tint); transition: transform .26s var(--ease), opacity .26s; }
.like-tile.gone { transform: scale(.9); opacity: 0; }
.like-photo { position: absolute; inset: 0; border: 0; padding: 0; background: none; }
.like-photo img { width: 100%; height: 100%; object-fit: cover; }
.like-photo img.img-fallback { object-fit: contain; padding: 25%; }
.like-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 56px; color: #fff; background: linear-gradient(transparent, rgba(24, 8, 16, .85)); pointer-events: none; }
.like-cap strong { display: block; } .like-cap .badge.verified { color: #5BB6FF; }
.like-actions { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 12px; }
.super-flag { position: absolute; top: 10px; left: 10px; }
.like-tile.is-super { box-shadow: 0 0 0 3px #7cc4ff; }

/* ---------- Notificaciones ---------- */
.notif-list { display: flex; flex-direction: column; }
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px; border-radius: var(--r-md); color: var(--ink); text-decoration: none !important; }
.notif:hover { background: var(--pink-wash); }
.notif.unread { background: #FFF9FB; }
.notif-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--pink-tint); color: var(--pink-strong); display: grid; place-items: center; flex: none; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); margin-top: 6px; flex: none; }

/* ---------- Perfil ---------- */
.profile-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .profile-grid { grid-template-columns: 300px 1fr; align-items: start; } .profile-side .sticky { position: sticky; top: 82px; } }
.profile-side .pcard.static { box-shadow: var(--shadow-md); max-width: 340px; margin-inline: auto; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.ph-tile { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--pink-tint); }
.ph-tile > img { width: 100%; height: 100%; object-fit: cover; }
.ph-tile > img.img-fallback { object-fit: contain; padding: 25%; }
.ph-main { position: absolute; top: 6px; left: 6px; }
.ph-tools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; flex-wrap: wrap; background: linear-gradient(transparent, rgba(24, 8, 16, .8)); padding: 14px 2px 2px; }
.ph-tools .icon-btn { width: 36px; height: 36px; color: #fff; } .ph-tools .icon-btn:hover { background: rgba(255, 255, 255, .2); } .ph-tools .icon-btn:disabled { opacity: .3; }
.photo-input { display: flex; gap: 10px; align-items: center; }
.photo-input .input { flex: 1; }
.photo-prev { width: 52px; height: 64px; border-radius: var(--r-sm); background: var(--pink-wash); border: 1.5px dashed var(--pink-soft); display: grid; place-items: center; color: var(--pink-soft); overflow: hidden; flex: none; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch span { display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line-strong); transition: transform .15s var(--ease), box-shadow .15s; }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.08); }
.swatch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pink) 55%, white); outline-offset: 3px; }
.ver-big .badge svg { width: 38px; height: 38px; }

/* ---------- Funciones ---------- */
.feat-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
.feat { display: flex; flex-direction: column; align-items: flex-start; }
.feat p { flex: 1; }
.feat.is-active { border-color: var(--pink-soft); background: var(--pink-wash); }
.feat-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--pink-tint); color: var(--pink-strong); display: grid; place-items: center; margin-bottom: 14px; }
.meter { width: 100%; height: 8px; background: var(--pink-tint); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.meter i { display: block; height: 100%; background: var(--pink); border-radius: 4px; transition: width .6s var(--ease); }
.countdown { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--plum); margin: 0; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 18px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; min-width: 0; }
.bar i { display: block; width: 100%; max-width: 44px; background: var(--pink); border-radius: 6px 6px 2px 2px; transition: height .6s var(--ease); }
.bar em { font-style: normal; font-size: .72rem; color: var(--muted); font-weight: 700; margin-top: 4px; text-transform: capitalize; }
.bar-n { font-size: .75rem; font-weight: 650; color: var(--plum); margin-bottom: 3px; }
.bars.dense { gap: 2px; height: 120px; }
.bars.dense .bar i { max-width: none; border-radius: 3px 3px 1px 1px; background: var(--pink-soft); }
.bars.dense .bar:hover i { background: var(--pink); }

/* ---------- Ajustes ---------- */
.settings .panel { margin-bottom: 16px; }
.block-list li, .acct-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.danger-zone { border-color: color-mix(in srgb, var(--err) 25%, white); }
.danger-zone h3 { color: var(--err); }

/* ---------- Staff ---------- */
.staff-page { width: min(1100px, 100%); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(5, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; color: var(--ink); text-decoration: none !important; position: relative; transition: border-color .15s, transform .15s var(--ease); }
a.kpi:hover { border-color: var(--pink-soft); transform: translateY(-2px); }
.kpi strong { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.kpi span:last-child { font-size: .8rem; color: var(--muted); font-weight: 700; }
.kpi-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--pink-wash); color: var(--pink); display: grid; place-items: center; margin-bottom: 8px; }
.two-col { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.3fr 1fr; } }
.activity li { padding: 10px 0; border-bottom: 1px solid var(--line); } .activity li:last-child { border: 0; }
.filters { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .filters { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
.input-wrap .s-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
.cards-list { display: flex; flex-direction: column; gap: 12px; }
.req .avatar { width: 48px; height: 48px; }

/* ---------- Acceso ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--card); }
@media (min-width: 960px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth-brand { display: none; background: var(--pink-wash); padding: 28px; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
@media (min-width: 960px) { .auth-brand { display: flex; } }
.auth-brand::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--pink-tint), transparent 70%); right: -180px; bottom: -180px; }
.auth-brand-in { display: grid; place-items: center; flex: 1; position: relative; z-index: 1; }
.auth-brand-in img { width: min(380px, 80%); height: auto; animation: rise .8s var(--ease) both; }
.auth-home { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink-2); position: relative; z-index: 1; }
.auth-main { display: grid; place-items: center; padding: 20px var(--gutter) 40px; }
.auth-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: 22px; }
.auth-mini { margin: 0 auto; height: auto; width: 170px; }
.auth-title { font-size: 1.8rem; margin-bottom: 4px; }
.auth-panels { position: relative; }
.auth-panel { transition: opacity .3s var(--ease), transform .35s var(--ease); }
.auth-panels[data-mode='login'] #panel-registro, .auth-panels[data-mode='registro'] #panel-login { display: none; }
.auth-panels[data-mode='login'] #panel-login { animation: slideInL .38s var(--ease) both; }
.auth-panels[data-mode='registro'] #panel-registro { animation: slideInR .38s var(--ease) both; }
@keyframes slideInL { from { opacity: 0; transform: translateX(-24px); } }
@keyframes slideInR { from { opacity: 0; transform: translateX(24px); } }

.reactivate { min-height: 100dvh; padding: 0 var(--gutter); }


/* Las insignias dentro de las tarjetas son interactivas (tooltip) aunque el pie de la tarjeta no capture el puntero. */
.pc-cap .badge, .like-cap .badge { pointer-events: auto; }

/* Acabado más sobrio y profesional */
.page-head h1, .disc-head h1, .msgs-head h1, .auth-title { font-weight: 800; letter-spacing: -.03em; }
.pc-cap h2, .pm-name { font-weight: 700; letter-spacing: -.025em; }
.stat strong, .kpi strong { font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.panel { border-radius: var(--r-lg); }
.seg button { font-weight: 600; }
.tag { font-weight: 650; letter-spacing: .01em; }
.match-title { font-weight: 800; letter-spacing: -.03em; }
.table th { font-weight: 650; }

/* ---------- Escritorio: tamaños compactos ---------- */
@media (min-width: 900px) {
  .page { padding-top: 20px; }
  .page-head { margin-bottom: 18px; }
  .disc { width: min(430px, 100%); }
  .deck-wrap { max-height: 580px; min-height: 440px; }
  .act { width: 52px; height: 52px; } .act .ico { width: 24px; height: 24px; }
  .act.like { width: 60px; height: 60px; } .act.like .ico { width: 28px; height: 28px; }
  .act.super { width: 44px; height: 44px; } .act.undo { width: 40px; height: 40px; }
  .act.super .ico, .act.undo .ico { width: 20px; height: 20px; }
  .actions { gap: 16px; padding-top: 12px; }
  .pc-cap h2 { font-size: 1.45rem; }
  .match-row .avatar, .avatar.lg-ish { width: 44px; height: 44px; }
  .kpi { padding: 14px; } .kpi strong { font-size: 1.7rem; }
  .stat strong { font-size: 1.6rem; }
  .msgs { grid-template-columns: 300px 1fr; }
}

/* ---------- Color de la tarjeta (tema) bien visible ---------- */
.pcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--theme); pointer-events: none; z-index: 6; }
.pcard .pc-cap { background: linear-gradient(transparent, color-mix(in srgb, var(--theme) 30%, rgba(24, 8, 16, .55)) 38%, color-mix(in srgb, var(--theme) 52%, #180810)); }
.pcard .pc-cap::before { width: 46px; height: 5px; background: #fff; box-shadow: 0 0 0 2px var(--theme); }
.pcard .pc-chips span { background: color-mix(in srgb, var(--theme) 58%, rgba(255, 255, 255, .12)); }
.pm-gallery { border-bottom: 4px solid var(--theme, var(--pink)); }
.pm-info .chip { background: color-mix(in srgb, var(--theme, var(--pink)) 12%, var(--card)); border-color: color-mix(in srgb, var(--theme, var(--pink)) 38%, var(--card)); color: var(--ink); }
.pm-meta .ico { color: var(--theme, var(--pink)); }

/* ---------- Animaciones de entrada ---------- */
#main > * { animation: viewIn .42s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }
.likes-grid > *, .kpis > *, .feat-grid > *, .cards-list > *, .photo-grid > *, .stat-row > *, .rule-list > *, .acct-list > li, .block-list > li, .activity > li, .match-row, .features > *, .steps > * {
  animation: rise .5s var(--ease) both;
}
.likes-grid > :nth-child(1), .kpis > :nth-child(1), .feat-grid > :nth-child(1), .cards-list > :nth-child(1), .photo-grid > :nth-child(1), .stat-row > :nth-child(1), .rule-list > :nth-child(1), #match-list li:nth-child(1) .match-row { animation-delay: 0.000s; }
.likes-grid > :nth-child(2), .kpis > :nth-child(2), .feat-grid > :nth-child(2), .cards-list > :nth-child(2), .photo-grid > :nth-child(2), .stat-row > :nth-child(2), .rule-list > :nth-child(2), #match-list li:nth-child(2) .match-row { animation-delay: 0.045s; }
.likes-grid > :nth-child(3), .kpis > :nth-child(3), .feat-grid > :nth-child(3), .cards-list > :nth-child(3), .photo-grid > :nth-child(3), .stat-row > :nth-child(3), .rule-list > :nth-child(3), #match-list li:nth-child(3) .match-row { animation-delay: 0.090s; }
.likes-grid > :nth-child(4), .kpis > :nth-child(4), .feat-grid > :nth-child(4), .cards-list > :nth-child(4), .photo-grid > :nth-child(4), .stat-row > :nth-child(4), .rule-list > :nth-child(4), #match-list li:nth-child(4) .match-row { animation-delay: 0.135s; }
.likes-grid > :nth-child(5), .kpis > :nth-child(5), .feat-grid > :nth-child(5), .cards-list > :nth-child(5), .photo-grid > :nth-child(5), .stat-row > :nth-child(5), .rule-list > :nth-child(5), #match-list li:nth-child(5) .match-row { animation-delay: 0.180s; }
.likes-grid > :nth-child(6), .kpis > :nth-child(6), .feat-grid > :nth-child(6), .cards-list > :nth-child(6), .photo-grid > :nth-child(6), .stat-row > :nth-child(6), .rule-list > :nth-child(6), #match-list li:nth-child(6) .match-row { animation-delay: 0.225s; }
.likes-grid > :nth-child(7), .kpis > :nth-child(7), .feat-grid > :nth-child(7), .cards-list > :nth-child(7), .photo-grid > :nth-child(7), .stat-row > :nth-child(7), .rule-list > :nth-child(7), #match-list li:nth-child(7) .match-row { animation-delay: 0.270s; }
.likes-grid > :nth-child(8), .kpis > :nth-child(8), .feat-grid > :nth-child(8), .cards-list > :nth-child(8), .photo-grid > :nth-child(8), .stat-row > :nth-child(8), .rule-list > :nth-child(8), #match-list li:nth-child(8) .match-row { animation-delay: 0.315s; }
.likes-grid > :nth-child(9), .kpis > :nth-child(9), .feat-grid > :nth-child(9), .cards-list > :nth-child(9), .photo-grid > :nth-child(9), .stat-row > :nth-child(9), .rule-list > :nth-child(9), #match-list li:nth-child(9) .match-row { animation-delay: 0.360s; }
.likes-grid > :nth-child(10), .kpis > :nth-child(10), .feat-grid > :nth-child(10), .cards-list > :nth-child(10), .photo-grid > :nth-child(10), .stat-row > :nth-child(10), .rule-list > :nth-child(10), #match-list li:nth-child(10) .match-row { animation-delay: 0.405s; }
.likes-grid > :nth-child(11), .kpis > :nth-child(11), .feat-grid > :nth-child(11), .cards-list > :nth-child(11), .photo-grid > :nth-child(11), .stat-row > :nth-child(11), .rule-list > :nth-child(11), #match-list li:nth-child(11) .match-row { animation-delay: 0.450s; }
.likes-grid > :nth-child(12), .kpis > :nth-child(12), .feat-grid > :nth-child(12), .cards-list > :nth-child(12), .photo-grid > :nth-child(12), .stat-row > :nth-child(12), .rule-list > :nth-child(12), #match-list li:nth-child(12) .match-row { animation-delay: 0.495s; }
.like-tile { transition: transform .26s var(--ease), opacity .26s, box-shadow .25s; }
.like-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feat, .kpi { transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; }
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.kpi:hover { box-shadow: var(--shadow-md); }
.ph-tile { transition: transform .22s var(--ease), box-shadow .22s; } .ph-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.table tr.clickable { transition: background .15s; }
.bubble { animation: bubbleIn .3s var(--ease) both; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.theme-picker .swatch span { transition: transform .2s var(--ease), box-shadow .2s; } .swatch:hover span { transform: scale(1.1); }

/* ---------- Movimiento reducido: se mantienen los fundidos y los micro-efectos suaves; se quitan los desplazamientos grandes ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-card, .match-pop, .match-hearts i { animation: none !important; }
  .match-pop { opacity: 1; }
  .reveal { transform: none; transition: opacity .6s ease; }
  .acc-btn[aria-expanded='true'] .ico { transform: none; }
  .btn:hover:not([disabled]), .icon-btn:hover, .like-tile:hover, .feat:hover, a.kpi:hover, .ph-tile:hover { transform: none; }
  .side-link:hover .ico { transform: none; }
  @keyframes rise { from { opacity: 0; } }
  @keyframes viewIn { from { opacity: 0; } }
  @keyframes bubbleIn { from { opacity: 0; } }
  @keyframes slideInL { from { opacity: 0; } }
  @keyframes slideInR { from { opacity: 0; } }
}

/* ---------- Selectores de etiquetas ---------- */
.picker-field { gap: 6px; }
.picker { display: flex; flex-direction: column; gap: 8px; }
.picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.picker-count { font-size: .8rem; font-weight: 650; color: var(--muted); transition: color .2s; text-align: right; }
.picker-count.full { color: var(--pink-strong); }
.picker-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--card); }
.picker-box.scroll { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pgroup + .pgroup { margin-top: 12px; }
.pg-title { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-2); border-radius: var(--r-pill); padding: 5px 12px; font-size: .86rem; font-weight: 550; line-height: 1.3; transition: background .18s, color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.pchip:hover { border-color: var(--pink-soft); background: var(--pink-wash); }
.pchip:active { transform: scale(.95); }
.pchip.on { background: var(--pink); border-color: var(--pink); color: #fff; font-weight: 650; box-shadow: 0 3px 10px rgba(232, 70, 124, .28); animation: chipPop .28s var(--ease); }
.pchip.compact { min-width: 42px; text-align: center; padding: 5px 9px; }
.pchip.nope { animation: chipNope .35s ease; }
.pchip[hidden], .pgroup[hidden] { display: none !important; }
.picker-empty { margin: 4px 0; font-size: .85rem; color: var(--muted); }
.photo-rules { display: flex; gap: 6px; align-items: flex-start; color: var(--err); font-weight: 500; }
.photo-rules .ico { margin-top: 2px; flex: none; width: 1em; }
@keyframes chipPop { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes chipNope { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 640px) { .picker-box.scroll { max-height: 200px; } .pchip { padding: 7px 13px; } }
@media (prefers-reduced-motion: reduce) { .pchip.on, .pchip.nope { animation: none; } }