/* ==========================================================================
   Winder · v2: tooltips flotantes, avisos, deslizadores propios, ficha, perfil, chat, soporte y ajustes de modo oscuro.
   Se carga la última: sustituye reglas anteriores sin tocarlas.
   ========================================================================== */

/* ---------- Logotipo escrito (el mismo de la animación) ---------- */
.wordmark-img { height: 30px; width: auto; display: block; }
.topbar-brand .wordmark-img { height: 26px; }
.brand { gap: 10px; }
:root[data-theme="dark"] .wordmark-img { filter: drop-shadow(0 0 10px rgba(240, 86, 138, .25)); }

/* ---------- Tooltip flotante (insignias, llama…): nunca se corta ---------- */
.badge[data-tip]::after { display: none !important; }
.tip-float {
  position: fixed; z-index: 5000; left: 0; top: 0; max-width: min(280px, calc(100vw - 16px)); padding: 6px 11px; border-radius: 9px;
  background: #1c1220; color: #fff; font: 650 .76rem/1.35 var(--font-body); white-space: normal; text-align: center; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .14s var(--ease);
}
.tip-float.below { transform: translateY(-4px); }
.tip-float.on { opacity: 1; transform: none; }
.tip-float::after { content: ''; position: absolute; left: var(--arrow, 50%); bottom: -5px; width: 9px; height: 9px; background: #1c1220; border-right: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); transform: translateX(-50%) rotate(45deg); }
.tip-float.below::after { bottom: auto; top: -5px; transform: translateX(-50%) rotate(225deg); }
.badge[data-tip] { cursor: help; }

/* ---------- Avisos (toasts): rectángulo sobrio con barra de tiempo, nada de píldoras ---------- */
.toasts { left: auto; right: 24px; transform: none; align-items: flex-end; width: min(380px, 100% - 32px); }
@media (max-width: 899px) { .toasts { left: 50%; right: auto; transform: translateX(-50%); align-items: stretch; } }
.toast {
  position: relative; overflow: hidden; border-radius: 10px; padding: 12px 18px 14px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(42, 26, 34, .16); font-weight: 600; font-size: .9rem; line-height: 1.35; display: block; width: 100%;
}
.toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ink-2); transform-origin: left; animation: toastBar 3.2s linear forwards; opacity: .55; }
.toast.ok::after { background: var(--ok); opacity: 1; }
.toast.err::after { background: var(--err); opacity: 1; animation-duration: 5s; }
.toast.ok, .toast.err { background: var(--card); color: var(--ink); }
@keyframes toastBar { to { transform: scaleX(0); } }
:root[data-theme="dark"] .toast, :root[data-theme="dark"] .toast.ok, :root[data-theme="dark"] .toast.err { background: #2a1f2e; color: #f5eaef; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }

/* ---------- Cambio de tema fluido (sin animar cada elemento) ---------- */
html.theme-vt *, html.theme-vt *::before, html.theme-vt *::after, html.theme-flash *, html.theme-flash *::before, html.theme-flash *::after { transition: none !important; animation-play-state: running; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; mix-blend-mode: normal; }
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: none !important; }

/* ---------- Barras de desplazamiento propias ---------- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pink) 38%, var(--line-strong)) transparent; }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--pink-soft); background-clip: content-box; }
}

/* ---------- Deslizadores (range) propios ---------- */
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 26px; margin: 0; padding: 0; background: transparent; cursor: pointer; --p: 50%; border: 0; }
input[type='range']:focus { outline: none; }
input[type='range']::-webkit-slider-runnable-track { height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--pink) var(--p), var(--line-strong) var(--p)); }
input[type='range']::-moz-range-track { height: 7px; border-radius: 99px; background: var(--line-strong); }
input[type='range']::-moz-range-progress { height: 7px; border-radius: 99px; background: var(--pink); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7.5px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 8px rgba(42, 26, 34, .25); transition: transform .15s var(--ease), box-shadow .15s; }
input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 8px rgba(42, 26, 34, .25); }
input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 7px color-mix(in srgb, var(--pink) 22%, transparent); }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink) 30%, transparent); }
:root[data-theme="dark"] input[type='range']::-webkit-slider-thumb { background: #fff; }
.rng.hue::-webkit-slider-runnable-track { background: linear-gradient(90deg, hsl(0 85% 58%), hsl(60 85% 55%), hsl(120 70% 48%), hsl(180 75% 48%), hsl(240 80% 62%), hsl(300 75% 58%), hsl(360 85% 58%)); }
.rng.hue::-moz-range-track { background: linear-gradient(90deg, hsl(0 85% 58%), hsl(60 85% 55%), hsl(120 70% 48%), hsl(180 75% 48%), hsl(240 80% 62%), hsl(300 75% 58%), hsl(360 85% 58%)); }
.rng.hue::-moz-range-progress { background: transparent; }
#cp-s::-webkit-slider-runnable-track { background: linear-gradient(90deg, hsl(var(--hh, 340) 30% var(--ll, 55%)), hsl(var(--hh, 340) 100% var(--ll, 55%))); }
#cp-l::-webkit-slider-runnable-track { background: linear-gradient(90deg, hsl(var(--hh, 340) var(--ss, 78%) 30%), hsl(var(--hh, 340) var(--ss, 78%) 50%), hsl(var(--hh, 340) var(--ss, 78%) 70%)); }
#cp-s::-moz-range-track { background: linear-gradient(90deg, hsl(var(--hh, 340) 30% var(--ll, 55%)), hsl(var(--hh, 340) 100% var(--ll, 55%))); }
#cp-l::-moz-range-track { background: linear-gradient(90deg, hsl(var(--hh, 340) var(--ss, 78%) 30%), hsl(var(--hh, 340) var(--ss, 78%) 70%)); }
#cp-s::-moz-range-progress, #cp-l::-moz-range-progress { background: transparent; }
.ns input[type='range'] { accent-color: initial; }
.cp-lab { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 12px; font-size: .86rem; font-weight: 650; color: var(--ink-2); margin: 6px 0; }
.cp-lab b { min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.cp-pop .cp-lab { grid-template-columns: 86px 1fr; }

/* ---------- Selector de color propio ---------- */
.cu-accent { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.cp-btn { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-weight: 650; font-size: .9rem; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.cp-btn:hover { border-color: var(--pink-soft); background: var(--pink-wash); }
.cp-btn[aria-expanded='true'] { border-color: var(--pink); }
.cp-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; background: conic-gradient(from 0deg, #ff5a5a, #ffb84d, #ffe94d, #6fdc6f, #4dd2ff, #6b7bff, #c45cff, #ff5ab0, #ff5a5a); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 1px var(--line-strong); }
.cp-dot.set { background: var(--c); }
.cp-pop { margin-top: 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-md); max-width: 380px; animation: setIn .25s var(--ease) both; }
.cp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 12px; }
.cp-sw { aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); transition: transform .15s var(--ease), box-shadow .15s; }
.cp-sw:hover { transform: scale(1.14); }
.cp-sw.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }
.cp-hexrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cp-prev { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 1px solid var(--line-strong); }
.cp-hexrow .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Editor de encuadre de fotos ---------- */
.fr-stage { display: grid; place-items: center; margin-bottom: 14px; }
.fr-box { position: relative; width: min(280px, 100%); aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--pink-wash); cursor: grab; touch-action: none; user-select: none; box-shadow: var(--shadow-md); }
.fr-box.grab { cursor: grabbing; }
.fr-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; will-change: transform; }
.fr-box:focus-visible { outline: 3px solid color-mix(in srgb, var(--pink) 55%, white); outline-offset: 3px; }
.fr-zoom { grid-template-columns: 56px 1fr auto; }
.hint-frame .ico { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; }
.ph-tile > img { will-change: transform; }
.ph-new { position: absolute; top: 6px; right: 6px; font-size: .66rem; padding: 1px 8px; }
.ph-tools { gap: 0; }
.ph-tools .icon-btn { width: 32px; height: 32px; }

/* ---------- Barra de cambios sin guardar ---------- */
.save-bar { position: sticky; bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px auto 0; width: min(560px, 100%); padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-strong); box-shadow: 0 14px 40px rgba(42, 26, 34, .22); animation: setIn .3s var(--ease) both; }
@media (min-width: 900px) { .save-bar { bottom: 20px; } }
.sb-txt { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: .9rem; }
.sb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
.sb-btns { display: inline-flex; gap: 8px; }
.save-bar[hidden] { display: none; }

/* ---------- Etiquetas con emoji (sin color propio; usan el de la tarjeta o el de la marca) ---------- */
.pchip.neutral { padding-left: 12px; display: inline-flex; align-items: center; gap: 6px; --tc: var(--pink); }
.pchip.neutral::before { display: none; }
.pchip.neutral .pe { font-size: 1.02em; line-height: 1; }
.pchip.neutral:hover { border-color: var(--pink-soft); background: var(--pink-wash); }
.pchip.neutral.on { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 3px 10px rgba(232, 70, 124, .28); }
:root[data-theme="dark"] .pchip.neutral:hover { background: var(--pink-wash); color: var(--ink); }

/* ---------- Tarjeta: la foto manda, el texto ocupa menos ---------- */
.pcard .pc-cap { padding: 54px 16px 14px; }
.pcard .pc-cap::before { top: 40px; left: 16px; }
.pcard .pc-cap h2 { font-size: 1.42rem; line-height: 1.12; }
.pcard .pc-user { font-size: .8rem; margin-bottom: 2px; }
.pcard .pc-meta { font-size: .8rem; margin: 2px 0 4px; }
.pcard .pc-bio { font-size: .82rem; line-height: 1.38; margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .pc-chips { gap: 5px; }
.pcard .pc-chips span { font-size: .72rem; padding: 2px 9px; }
.pcard .pc-status { font-size: .8rem; margin: 2px 0 4px; }
.profile-side .pcard.static { max-width: 360px; aspect-ratio: 3 / 4.3; }
@media (max-width: 640px) { .pcard .pc-cap h2 { font-size: 1.25rem; } .pcard .pc-cap { padding: 46px 14px 12px; } .pcard .pc-bio { -webkit-line-clamp: 1; } }
.pc-photo { overflow: hidden; }

/* ---------- Ficha pública ---------- */
.pm-slide { overflow: hidden; position: relative; cursor: default; }
.pm-slide img { will-change: transform; }
.pm-ph { margin: 0; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--pink-wash); cursor: default; }
.pm-ph img { width: 100%; height: 100%; object-fit: cover; }
.pm-info { position: relative; }
.pm-info:has(.pm-banner) { padding-top: 0; }
.pm-banner {
  position: relative; height: 132px; margin: 0 -24px -48px; background-size: cover; background-position: center; border-radius: 0;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, rgba(0, 0, 0, .55) 70%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 38%, rgba(0, 0, 0, .55) 70%, transparent 100%);
}
.pm-banner.bn-aurora, .pm-banner.bn-atardecer, .pm-banner.bn-oceano, .pm-banner.bn-bosque, .pm-banner.bn-noche, .pm-banner.bn-rosa { opacity: .9; }
.pm-info:has(.pm-banner) .pm-head { position: relative; z-index: 1; text-shadow: 0 1px 10px var(--card), 0 0 2px var(--card); }
.pm-info:has(.pm-banner) .pm-head .pm-name { padding-top: 0; }
@media (max-width: 759px) { .pm-banner { margin-inline: -24px; } }
.pm-block { margin-top: 18px; text-align: center; }
.pm-block .label { display: block; margin: 0 0 12px; text-align: center; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.pm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding: 0 2px; }
.pm-chips .chip { padding: 6px 14px; font-size: .86rem; line-height: 1.2; }
.pm-meta { gap: 8px 20px; }
.pm-meta .tc { background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; transform: none !important; color: hsl(var(--h) 62% 36%); font-weight: 750; text-shadow: 0 0 12px hsl(var(--h) 95% 60% / .65), 0 0 3px hsl(var(--h) 95% 60% / .4); }
.pm-meta .tc .ico { color: hsl(var(--h) 70% 46%); filter: drop-shadow(0 0 5px hsl(var(--h) 95% 60% / .6)); }
:root[data-theme="dark"] .pm-meta .tc { color: hsl(var(--h) 92% 80%); text-shadow: 0 0 14px hsl(var(--h) 95% 62% / .75), 0 0 3px hsl(var(--h) 95% 65% / .5); }
:root[data-theme="dark"] .pm-meta .tc .ico { color: hsl(var(--h) 90% 72%); }
.pm-slide[data-zoom], .pm-ph { cursor: default; }
.pm-count { cursor: default; }

/* ---------- Chat: fondo propio y fotos más contenidas ---------- */
.chat-wrap { isolation: isolate; }
.chat-wrap.has-bg::before { content: ''; position: absolute; inset: -14px; z-index: 0; background-image: var(--bg-url); background-size: var(--bg-size, cover); background-position: var(--bg-pos, 50% 50%); background-repeat: var(--bg-repeat, no-repeat); filter: blur(var(--bg-blur, 0px)); }
.chat-wrap.has-bg::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(12, 6, 14, var(--bg-dim, .35)); pointer-events: none; }
.chat-wrap.has-bg { overflow: hidden; }
.chat-wrap.has-bg .chat-body { position: relative; z-index: 1; background: transparent; }
.chat-wrap.has-bg .day-sep { background: rgba(255, 255, 255, .86); color: #54424b; border-color: transparent; }
:root[data-theme="dark"] .chat-wrap.has-bg .day-sep { background: rgba(31, 24, 34, .85); color: var(--ink-2); }
.chat-wrap .jump-down { z-index: 3; }
.bg-stage { display: grid; gap: 6px; justify-items: center; }
.bg-prev { width: min(300px, 100%); height: 170px; flex: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); cursor: grab; touch-action: none; background: linear-gradient(var(--card), var(--pink-wash)); }
.bg-prev .bg-fake { position: absolute; inset: 0; z-index: 2; padding: 14px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.msg-fake { padding: 6px 12px; border-radius: 14px; font-size: .84rem; max-width: 60%; }
.msg-fake.theirs { background: var(--card); border: 1px solid var(--line); align-self: flex-start; }
.msg-fake.mine { background: var(--pink); color: #fff; align-self: flex-end; }
.msg-main { max-width: min(78%, 420px); }
.bubble:has(.b-img) { width: fit-content; max-width: 100%; }
.b-img { width: min(210px, 62vw); max-width: 100%; aspect-ratio: 4 / 4.4; margin-bottom: 4px; }
.b-img img { height: 100%; max-height: none; }
.bubble:has(.b-img) .b-meta { margin-top: 2px; }

/* ---------- Soporte ---------- */
.sup-grid { align-items: start; }
.sup-list { display: grid; gap: 12px; }
.sup-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); display: grid; gap: 4px; transition: border-color .2s, transform .2s var(--ease); }
.sup-item:hover { border-color: var(--pink-soft); transform: translateY(-1px); }
.sup-msg { margin: 6px 0 0; color: var(--ink-2); white-space: pre-wrap; }
.sup-reply { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--pink-wash); border: 1px solid var(--line); }
.sup-reply p { margin: 4px 0 0; white-space: pre-wrap; }
.sup-reply .label { font-size: .74rem; }

/* ---------- Conversaciones (solo lectura, staff) ---------- */
.cv-list { display: grid; gap: 6px; }
.cv-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: left; transition: background .18s, border-color .18s, transform .18s var(--ease); }
.cv-row:hover { background: var(--pink-wash); border-color: var(--pink-soft); transform: translateX(2px); }
.cv-meta { flex: none; }
.cv-chat { display: flex; flex-direction: column; gap: 8px; max-height: min(60vh, 520px); overflow-y: auto; padding: 4px 2px 4px 0; }
.cv-msg { width: fit-content; min-width: 150px; display: grid; gap: 2px; max-width: 84%; padding: 8px 12px; border-radius: 14px; background: var(--pink-wash); border: 1px solid var(--line); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.cv-msg b { font-size: .7rem; letter-spacing: .02em; color: var(--muted); }
.cv-msg.b { align-self: flex-end; background: color-mix(in srgb, var(--pink) 12%, var(--card)); }
.cv-img { width: 180px; max-width: 100%; border-radius: 10px; margin: 4px 0; }

/* ---------- Ajustes: Mis cuentas con aire alrededor de la foto ---------- */
.acct-list { display: grid; gap: 10px; }
.acct-list li.acct-line, .acct-line { display: flex; align-items: center; gap: 14px; padding: 12px 16px !important; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.acct-list li:last-child { border-bottom: 1px solid var(--line); }
.acct-line .avatar { flex: none; margin: 2px 0; }

/* ---------- Panel de staff más vivo ---------- */
.staff-page .kpi { transition: transform .22s var(--ease), box-shadow .22s, border-color .22s; }
.staff-page .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--pink-soft); }
.staff-page .kpi .kpi-ico { transition: transform .3s var(--ease); }
.staff-page .kpi:hover .kpi-ico { transform: scale(1.12) rotate(-6deg); }
.staff-page .table tbody tr { transition: background .15s, transform .15s var(--ease); }
.staff-page .table tbody tr:hover { background: var(--pink-wash); }
.staff-page .bars .bar i { transform-origin: bottom; animation: barGrow .6s var(--ease) both; }
.staff-page .bars .bar:nth-child(n) i { animation-delay: calc(var(--i, 0) * 12ms); }
@keyframes barGrow { from { transform: scaleY(0); } }
.staff-page .panel.req { transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.staff-page .panel.req:hover { border-color: var(--pink-soft); box-shadow: var(--shadow-md); }
.staff-page .seg button { transition: background .18s, color .18s, transform .15s var(--ease); }
.staff-page .seg button:active { transform: scale(.96); }
.staff-page .activity li { transition: background .15s, padding-left .2s var(--ease); border-radius: 8px; }
.staff-page .activity li:hover { background: var(--pink-wash); padding-left: 8px; }
.staff-page .filters .input:focus, .staff-page .filters .select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 25%, transparent); }

/* ---------- Modo oscuro: botones y textos al pasar el ratón ---------- */
:root[data-theme="dark"] .btn:not(.soft):not(.ghost):not(.danger-ghost):not(.danger) { color: #fff; }
:root[data-theme="dark"] .btn:not(.soft):not(.ghost):not(.danger-ghost):not(.danger):hover { background: #d83f78; color: #fff; box-shadow: 0 6px 18px rgba(240, 86, 138, .3); }
:root[data-theme="dark"] .btn.danger:hover { background: #d9455d; color: #fff; }
:root[data-theme="dark"] .btn.soft { background: #3a1f2d; color: #ff9fbf; }
:root[data-theme="dark"] .btn.soft:hover { background: #4f2639; color: #ffd3e2; }
:root[data-theme="dark"] .btn.ghost { color: var(--ink); border-color: #4a3a45; }
:root[data-theme="dark"] .btn.ghost:hover { background: #2d2030; color: #fff; border-color: #6a4b5c; }
:root[data-theme="dark"] .btn.danger-ghost:hover { background: #3b1a24; color: #ffb0bf; }
:root[data-theme="dark"] a:hover { color: #ffd0e0; }
:root[data-theme="dark"] a.btn:hover { color: inherit; }
:root[data-theme="dark"] .btn:not(.soft):not(.ghost):not(.danger-ghost):hover { color: #fff; }
:root[data-theme="dark"] .pub-nav a:hover { color: #ffd0e0; background: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .side-link:hover { background: #2a1d2c; color: #ffd0e0; }
:root[data-theme="dark"] .side-link.active { color: #fff; }
/* Solo con ratón: en el móvil el :hover se queda "pegado" tras tocar y tapaba la rayita rosa de la pestaña activa. */
@media (hover: hover) { :root[data-theme="dark"] .tab:hover, :root[data-theme="dark"] .staff-tabs a:hover { background: #2a1d2c; color: #ffd0e0; } }
:root[data-theme="dark"] .icon-btn:hover { background: #2d2030; color: #ffd0e0; }
:root[data-theme="dark"] .match-row:hover, :root[data-theme="dark"] .notif:hover { background: #2a1d2c; }
:root[data-theme="dark"] .match-row:hover strong, :root[data-theme="dark"] .notif:hover strong { color: #fff; }
:root[data-theme="dark"] .chip:hover { background: #33202c; border-color: #6a4b5c; color: #ffd0e0; }
:root[data-theme="dark"] .more-item:hover, :root[data-theme="dark"] .ctx-menu button:hover, :root[data-theme="dark"] .ctx-menu a:hover, :root[data-theme="dark"] .dd-opt:hover { background: #2d2030; color: #ffd0e0; }
:root[data-theme="dark"] .ctx-menu svg, :root[data-theme="dark"] .more-item:hover svg { color: #ff9fbf; }
:root[data-theme="dark"] .acc-btn:hover { color: #ffd0e0; }
:root[data-theme="dark"] .seg button:hover:not(.on):not([aria-selected='true']) { background: #2d2030; color: #ffd0e0; }
:root[data-theme="dark"] .staff-page .table tbody tr:hover, :root[data-theme="dark"] .staff-page .activity li:hover, :root[data-theme="dark"] .cv-row:hover { background: #2a1d2c; }
:root[data-theme="dark"] .pg:hover:not(:disabled):not(.on) { background: #2d2030; color: #ffd0e0; border-color: #6a4b5c; }
:root[data-theme="dark"] .cu-opt:hover span, :root[data-theme="dark"] .cp-btn:hover { background: #2d2030; }
:root[data-theme="dark"] .sup-reply, :root[data-theme="dark"] .cv-msg { background: #2a1d2c; }
:root[data-theme="dark"] .cv-msg.b { background: #3a2030; }
:root[data-theme="dark"] .cp-dot { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 0 0 1px #46353f; }
:root[data-theme="dark"] .fx-ph-img:hover, :root[data-theme="dark"] .save-bar { border-color: #46353f; }
:root[data-theme="dark"] .save-bar { box-shadow: 0 16px 44px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .pm-info .chip { color: var(--ink); }
:root[data-theme="dark"] .pm-block .label { color: var(--muted); }
:root[data-theme="dark"] .hero .btn.ghost, :root[data-theme="dark"] .hero .btn.ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }
:root[data-theme="dark"] .hero .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .pub-nav-cta .btn:not(.ghost) { color: #fff; }

/* ---------- Pequeños ajustes de interfaz ---------- */
.notif-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.notif-toolbar .small.muted { margin-left: auto; }
.features { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
@media (prefers-reduced-motion: reduce) { .toast::after { animation: none; } html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; } }

.kpi strong { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tanda 6
   ========================================================================== */

/* Menú público: el fondo al pasar el ratón es una píldora, no un cuadrado */
.pub-nav > a:not(.btn) { padding: 7px 14px; border-radius: 999px; transition: background .2s, color .2s; }
:root[data-theme="dark"] .pub-nav > a:not(.btn):hover { background: rgba(255, 255, 255, .07); color: #ffd0e0; }
:root[data-theme="light"] .pub-nav > a:not(.btn):hover { background: var(--pink-wash); }
@media (max-width: 899px) { .pub-nav > a:not(.btn) { border-radius: 0; padding: 14px 4px; } }

/* Botón blanco de la franja final en modo oscuro: texto legible siempre */
:root[data-theme="dark"] .cta-band .btn:not(.ghost), :root[data-theme="dark"] .cta-band .btn:not(.ghost):hover { background: #fff !important; color: #b02a5c !important; }
:root[data-theme="dark"] .cta-band .btn:not(.ghost):hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
:root[data-theme="dark"] .cta-band .btn.ghost, :root[data-theme="dark"] .cta-band .btn.ghost:hover { color: #fff !important; border-color: rgba(255, 255, 255, .7); background: transparent; }
:root[data-theme="dark"] .cta-band .btn.ghost:hover { background: rgba(255, 255, 255, .14); }

/* Ficha: el banner llega hasta el borde superior del cuadro */
.modal.wide.flush .pm-info:has(.pm-banner), .pm-info:has(.pm-banner) { padding-top: 0 !important; }
.pm-banner { margin-top: 0 !important; }

/* Verificación en revisión: la etiqueta no se parte y el brillo cubre toda la tarjeta */
.ver-card .tag { white-space: nowrap; flex: none; }
.ver-card.is-pending { background: linear-gradient(110deg, transparent, color-mix(in srgb, #ffbe78 12%, transparent), transparent); border-radius: inherit; }

/* Lista de chats: hora abajo a la derecha y sin tirones */
.match-row { align-items: stretch; }
.match-row .grow { justify-content: center; }
.match-row .avatar { align-self: center; }
.match-meta { align-self: flex-end; justify-content: flex-end; text-align: right; white-space: nowrap; padding-bottom: 2px; font-size: .74rem; }
#match-list.no-anim .match-row, #match-list.no-anim li { animation: none !important; }
.ctx-menu .danger, .ctx-menu .danger svg { color: var(--err); }
.ctx-menu button.danger:hover { background: var(--err-bg); color: var(--err); }
.tick { width: 22px; }
.tick svg { width: 22px; }

/* Banner propio: los de la web quedan bloqueados */
.cu-banners.locked { opacity: .45; pointer-events: none; filter: grayscale(.5); }
.pw-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--pink-wash); border: 1px solid var(--line); font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
.pw-note svg { width: 18px; height: 18px; flex: none; color: var(--pink); margin-top: 1px; }

/* Etiquetas de la tarjeta: caben todas */
.pcard .pc-chips { max-height: 4.4em; overflow: hidden; }

/* ---------- Acceso (inicio de sesión y registro) ---------- */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinAng { to { --ang: 360deg; } }
@keyframes floaty { 50% { translate: 0 -22px; } }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.15); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } }
.auth-brand { background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--pink) 14%, var(--pink-wash)), var(--pink-wash)); }
:root[data-theme="dark"] .auth-brand { background: radial-gradient(110% 90% at 15% 0%, #3a1a33 0%, #1c1020 55%, #130b17 100%); }
.auth-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.auth-deco i { position: absolute; width: 150px; height: 210px; border-radius: 24px; background: linear-gradient(150deg, var(--pink), var(--plum)); opacity: .2; animation: floaty 9s ease-in-out infinite; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.auth-deco .d1 { left: 8%; top: 12%; transform: rotate(-12deg); }
.auth-deco .d2 { right: 10%; top: 28%; transform: rotate(9deg); animation-delay: -3s; background: linear-gradient(150deg, #ff9a6b, var(--pink)); width: 130px; height: 180px; }
.auth-deco .d3 { left: 20%; bottom: 10%; transform: rotate(6deg); animation-delay: -6s; background: linear-gradient(150deg, #8a5cf0, var(--pink)); width: 120px; height: 168px; }
.auth-deco b { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: drift 14s ease-in-out infinite; }
.auth-deco .o1 { width: 280px; height: 280px; right: -60px; bottom: -40px; background: var(--pink); }
.auth-deco .o2 { width: 220px; height: 220px; left: -70px; top: 38%; background: #8a5cf0; animation-delay: -7s; opacity: .3; }
.auth-brand-in, .auth-brand .small, .auth-home { position: relative; z-index: 2; }
.auth-main { position: relative; overflow: hidden; }
.auth-main::before, .auth-main::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .22; animation: drift 16s ease-in-out infinite; }
.auth-main::before { width: 360px; height: 360px; background: var(--pink); top: -120px; right: -80px; }
.auth-main::after { width: 300px; height: 300px; background: #8a5cf0; bottom: -100px; left: -60px; animation-delay: -8s; opacity: .16; }
:root[data-theme="dark"] .auth-main { background: #140d18; }
.auth-card { position: relative; z-index: 1; padding: 30px 28px 26px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .auth-card { background: linear-gradient(180deg, rgba(44, 30, 48, .92), rgba(28, 19, 32, .92)); border-color: rgba(255, 255, 255, .08); backdrop-filter: blur(14px); }
.auth-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: 27px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 62%, color-mix(in srgb, var(--pink) 85%, white) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 7s linear infinite;
}
.auth-panel > * { animation: riseIn .55s var(--ease) both; }
.auth-panel > :nth-child(1) { animation-delay: .02s; } .auth-panel > :nth-child(2) { animation-delay: .07s; } .auth-panel > :nth-child(3) { animation-delay: .12s; }
.auth-panel > :nth-child(4) { animation-delay: .17s; } .auth-panel > :nth-child(5) { animation-delay: .22s; } .auth-panel > :nth-child(6) { animation-delay: .27s; }
.auth-panel > :nth-child(7) { animation-delay: .32s; } .auth-panel > :nth-child(8) { animation-delay: .37s; } .auth-panel > :nth-child(n+9) { animation-delay: .42s; }
.auth-card .input { transition: border-color .2s, box-shadow .25s, transform .2s var(--ease), background .2s; }
.auth-card .input:focus { transform: translateY(-1px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 22%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--pink) 55%, transparent); }
:root[data-theme="dark"] .auth-card .input { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .auth-card .input:focus { background: rgba(255, 255, 255, .07); border-color: var(--pink); }
.auth-card .field:focus-within > label { color: var(--pink-strong); }
.auth-card .btn.lg { position: relative; overflow: hidden; }
.auth-card .btn.lg::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); transition: left .6s var(--ease); }
.auth-card .btn.lg:hover::before { left: 130%; }
.reg-progress { height: 6px; border-radius: 99px; background: var(--line-strong); overflow: hidden; margin: 14px 0 6px; }
.reg-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pink), #ff9a6b); transition: width .45s var(--ease); }
.pw-meter { display: flex; align-items: center; gap: 6px; margin-top: -10px; }
.pw-meter i { flex: 1; max-width: 64px; height: 5px; border-radius: 99px; background: var(--line-strong); transition: background .3s; }
.pw-meter span { font-size: .76rem; font-weight: 650; color: var(--muted); min-width: 70px; text-align: right; margin-left: auto; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--err); }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: #7bbf4a; }
.pw-meter[data-s="4"] i:nth-child(-n+4) { background: var(--ok); }
@media (prefers-reduced-motion: reduce) {
  .auth-deco i, .auth-deco b, .auth-main::before, .auth-main::after, .auth-card::before, .auth-panel > * { animation: none !important; }
}

/* Menús desplegables: con el ratón encima solo se ilumina la opción señalada */
.dd-menu:hover .dd-opt.dd-hl:not(:hover):not(.on) { background: transparent; }
:root[data-theme="dark"] .dd-menu:hover .dd-opt.dd-hl:not(:hover):not(.on) { background: transparent; }

/* Soporte: el boton de añadir foto con algo mas de aire */
#sp-add { margin-top: 12px; }

/* Verificacion en revision: el brillo llega hasta el borde de la tarjeta */
#sec-verif:has(.ver-card.is-pending) { overflow: hidden; position: relative; }
.ver-card.is-pending { overflow: visible; background: none; }
.ver-card.is-pending::after { inset: -40px; background-size: 250% 100%; }

/* Movil: objetivos tactiles comodos */
@media (max-width: 640px) {
  .pchip { min-height: 36px; }
  .cp-sw { min-width: 30px; }
  .save-bar { width: calc(100% - 8px); padding: 8px 8px 8px 14px; }
  .toasts { bottom: calc(var(--tab-h) + 80px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Tanda 7
   ========================================================================== */

/* Conversaciones fijadas: solo la chincheta, sin fondo ni color rosa */
.match-row.pinned:not(.active) { background: transparent; }
.match-row.pinned strong { color: var(--ink); }
.match-row.pinned:hover { background: var(--pink-wash); }
:root[data-theme="dark"] .match-row.pinned:hover { background: #2a1d2c; }

/* Texto de reglas de fotos: icono a un lado y texto en bloque */
.photo-rules { display: flex !important; align-items: flex-start; gap: 8px; line-height: 1.45; }
.photo-rules > span { flex: 1; min-width: 0; }
.photo-rules > span strong { display: inline; }

/* Etiquetas de la tarjeta: se alargan todas las que haga falta */
.pcard .pc-chips { max-height: none !important; overflow: visible; }
.pcard .pc-cap { padding-top: 46px; }

/* Etiqueta "Activo" de Funciones */
.feat h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.feat h3 .tag { margin: 0; padding: 3px 11px; line-height: 1.3; }

/* Campanita: numerito mas pequeño */
.icon-btn .dot { top: 4px; right: 3px; min-width: 15px; height: 15px; padding: 0 3.5px; font-size: 9.5px; border-width: 1.5px; line-height: 1; }
.tab .count, .side-link .count, i.count { font-size: 9.5px; }

/* Avisos de cerrado (soporte y registro) */
.closed-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--ink); font-size: .9rem; line-height: 1.45; }
.closed-note svg { width: 22px; height: 22px; flex: none; color: var(--warn); margin-top: 1px; }
.panel.is-off { opacity: .55; pointer-events: none; filter: grayscale(.4); }

/* Soporte: hilo de mensajes */
.sup-thread { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.sup-bub { display: grid; gap: 2px; width: fit-content; max-width: 86%; padding: 9px 13px; border-radius: 14px; line-height: 1.42; white-space: pre-wrap; word-break: break-word; font-size: .92rem; }
.sup-bub b { font-size: .7rem; letter-spacing: .02em; opacity: .75; }
.sup-bub.us { align-self: flex-end; background: color-mix(in srgb, var(--pink) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--pink) 26%, var(--card)); border-bottom-right-radius: 5px; }
.sup-bub.them { align-self: flex-start; background: var(--pink-wash); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.sup-reply-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.sup-reply-form .textarea { min-height: 44px; max-height: 120px; flex: 1; resize: vertical; }
.sup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sup-actions .btn[disabled] { opacity: .4; cursor: not-allowed; }
.sup-card .sup-thread { max-height: 300px; }
@media (max-width: 640px) { .sup-bub { max-width: 94%; } .sup-reply-form { flex-direction: column; align-items: stretch; } }

/* Reportes: preguntas y respuestas */
.qa { margin-top: 14px; }
.qa .label { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.qa p { margin: 0; line-height: 1.55; white-space: pre-wrap; }

/* Auditoria: herramientas de borrado */
.audit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.audit-tools .check { margin-right: auto; }
.au-chk { width: 18px; height: 18px; accent-color: var(--pink); }

/* Filtros del panel: que el desplegable nunca dependa de una opcion oculta */
.staff-page .filters .dd-btn { min-width: 150px; }

/* Tablas clicables: el hover usa colores del tema (antes quedaba blanco en oscuro) */
.table tr.clickable:hover td { background: var(--pink-wash); }
:root[data-theme="dark"] .table tr.clickable:hover td { background: #2a1d2c; }
:root[data-theme="dark"] .table tr.clickable:hover td strong, :root[data-theme="dark"] .table tr.clickable:hover td .ellipsis { color: #fff; }
:root[data-theme="dark"] .table tr.clickable:hover td .muted, :root[data-theme="dark"] .table tr.clickable:hover td.muted { color: var(--ink-2); }
:root[data-theme="dark"] .table tr.clickable:hover .tag.ok { background: #12332A; color: #3cc48d; }
.staff-page .table tbody tr:hover { background: transparent; }
:root[data-theme="dark"] .tag[style*="E3F1FE"] { background: #14304a !important; color: #7cc0ff !important; }

/* Etiquetas de rango con el color de su insignia: moderador verde, administrador rojo, propietario dorado */
.tag.mod { background: #E4F6EE; color: #137a4f; border: 1px solid #BFE8D5; }
.tag.admin { background: #FDE7EB; color: #c42a3a; border: 1px solid #F5C1CB; }
.tag.owner { background: #FFF3D1; color: #946a00; border: 1px solid #F3D88A; }
:root[data-theme="dark"] .tag.mod { background: #123D2C; color: #3cc48d; border-color: #1d6a4c; }
:root[data-theme="dark"] .tag.admin { background: #3b1620; color: #ff7b8e; border-color: #7a2a3a; }
:root[data-theme="dark"] .tag.owner { background: #3a2d0c; color: #f0bf45; border-color: #7a5d12; }

/* Tickets: formulario de respuesta y botones mejor colocados */
.sup-reply-form { display: grid; gap: 8px; margin-top: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.sup-reply-form .textarea { min-height: 44px; max-height: 140px; width: 100%; resize: none; border-radius: 10px; }
.srf-img { display: flex; gap: 10px; align-items: center; }
.srf-img .photo-prev { width: 48px; height: 48px; flex: none; }
.srf-img .input { flex: 1; min-width: 0; }
.srf-bar { display: flex; align-items: center; gap: 8px; }
.srf-bar .btn.on { background: var(--pink-wash); border-color: var(--pink-soft); color: var(--pink-strong); }
.sup-reply-form[hidden], .srf-img[hidden] { display: none; }
.sup-img { width: 120px; height: 90px; margin-top: 6px; }
.sup-img img { width: 100%; height: 100%; object-fit: cover; }
.sup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sup-actions .btn { flex: none; }
.sup-card .sup-actions + .sup-actions { margin-top: 8px; padding-top: 0; border-top: 0; }
@media (max-width: 640px) { .sup-actions .btn { flex: 1 1 calc(50% - 8px); } .srf-bar .btn { flex: 1; } .srf-bar .grow { display: none; } }

.sup-bub.new { animation: bubbleIn .25s var(--ease) both; }
@media (max-width: 640px) { .pm-user { min-height: 36px; } }

/* Tarjeta: la barrita de color tiene aire respecto al nombre (escritorio y móvil) */
.pcard .pc-cap { padding-top: 58px !important; }
.pcard .pc-cap::before { top: 34px !important; }

/* Móvil con "reducir animaciones" activado: se mantienen los efectos breves de like, super like y pasar */
@media (prefers-reduced-motion: reduce) and (hover: none) {
  .fx { display: block; }
  .act.pop { animation: actPop .45s var(--ease); }
}

/* Sin la barrita de color sobre el nombre (PC y movil) */
.pcard .pc-cap::before, .pc-cap::before { display: none !important; }
.pcard .pc-cap { padding-top: 44px !important; }
@media (max-width: 640px) { .pcard .pc-cap { padding-top: 40px !important; } }

/* ---- Tanda 10 ---- */
.field.has-error .dd-btn { border-color: var(--err); }
.field.has-error .error-text, .check.has-error .error-text { margin-top: 6px; }
.check.has-error > span { color: var(--err); }
.like-photo.is-blur img { filter: blur(22px) saturate(1.1); transform: scale(1.25); }
.like-photo.is-blur { pointer-events: none; }
.like-tile .like-cap { padding-bottom: 14px; }
.av-wrap { position: relative; display: inline-flex; flex: none; }
.chat-who > span.av-wrap { flex-direction: row; line-height: 0; }
.pres-dot { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2.5px solid var(--card); box-shadow: 0 0 0 0 rgba(34,197,94,.5); transform: scale(0); opacity: 0; transition: transform .25s var(--ease), opacity .25s; pointer-events: none; }
.pres-dot.on { transform: scale(1); opacity: 1; animation: presPulse 2.4s ease-out infinite; }
@keyframes presPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .pres-dot.on { animation: none; } }
.pres-txt.is-active { color: #16a34a; font-weight: 700; }
html[data-theme="dark"] .pres-txt.is-active { color: #4ade80; }
.who-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Insignias del staff */
.badge-prefs { display: grid; gap: 18px; padding: 20px; max-width: 760px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-row > span { display: grid; gap: 2px; }
.bp-pick { display: grid; gap: 10px; transition: opacity .2s; }
.bp-pick.off { opacity: .45; pointer-events: none; }
.bp-pick h4 { margin: 0; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.bp-opt { display: grid; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
.bp-opt:hover { border-color: var(--pink-soft); }
.bp-opt.on { border-color: var(--pink); background: var(--pink-wash); }
.bp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bp-ico { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.bp-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---- Interfaz de escritorio y formatos horizontales: un poco más compacta ---- */

/* ---- Vista previa del perfil en pantallas estrechas ---- */
.pv-fab { position: fixed; right: 14px; bottom: calc(var(--tab-h) + 74px + env(safe-area-inset-bottom)); z-index: 39; box-shadow: var(--shadow-md); }
@media (min-width: 900px) { .pv-fab { display: none; } }
.pv-modal .pcard.static { max-width: 320px; margin-inline: auto; }
.pv-modal .pcard.static:hover { transform: none; }

/* ---- Tarjeta y ficha: aspecto sobrio y profesional (sin movimientos ni brillos llamativos) ---- */
.pcard.static, .pcard.static:hover { transition: none; transform: none; }
.pcard .pc-cap, .pcard.cs-degradado .pc-cap { background: linear-gradient(transparent, color-mix(in srgb, var(--theme) 22%, rgba(14, 10, 16, .5)) 28%, color-mix(in srgb, var(--theme) 34%, #0e0a10)); }
.pcard.cs-solido .pc-cap { background: linear-gradient(transparent, color-mix(in srgb, var(--theme) 30%, rgba(14, 10, 16, .55)) 16%, color-mix(in srgb, var(--theme) 46%, #0e0a10)); }
.pcard.cs-cristal .pc-cap { padding: 14px 16px 13px !important; left: 10px; right: 10px; bottom: 10px; border-radius: 14px; background: color-mix(in srgb, var(--theme) 24%, rgba(16, 12, 18, .5)); border: 1px solid color-mix(in srgb, var(--theme) 40%, rgba(255, 255, 255, .12)); }
.pcard .pc-cap h2 { text-shadow: none; font-weight: 700; letter-spacing: -.01em; }
.pcard .pc-user { opacity: .8; font-weight: 600; }
.pcard .pc-chips span, .pcard.cs-cristal .pc-chips span { background: color-mix(in srgb, var(--theme) 32%, rgba(255, 255, 255, .12)); border: 1px solid rgba(255, 255, 255, .18); font-weight: 600; color: #fff; }
.pcard .pc-chips span .ico { display: none; }
.pcard .pc-status { font-weight: 500; opacity: .9; }
.pm-stat { border-radius: 8px; background: var(--bg-soft, var(--pink-wash)); }
.pm-stat:hover, .pm-info .chip:hover, .pm-ph:hover img, .pm-ph img { transform: none; }
.pm-panel, .pm-panel .pm-block, .pm-panel .pm-bio { animation: none; }
.pm-tabs { background: none; border-radius: 0; padding: 0; gap: 22px; border-bottom: 1px solid var(--line); width: 100%; }
.pm-tabs button { border-radius: 0; padding: 9px 2px; background: none !important; box-shadow: none !important; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); }
.pm-tabs button.on { color: var(--ink); border-bottom-color: var(--pink); }
.pm-meta .tc .ico { filter: none; }
:root[data-theme="dark"] .pm-meta .tc { text-shadow: none; }
.pm-info .chip.tc, .pm-chips .chip { border-radius: 8px; }
.pm-block .label { letter-spacing: .06em; font-weight: 700; }

/* Insignias: se marcan las que se ocultan */
.bp-opt { position: relative; }
.bp-opt.is-hidden .bp-ico { opacity: .45; }
.bp-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-style: normal; }
.bp-sw em { font-style: normal; font-size: .8rem; color: var(--muted); }
.bp-opt input { position: absolute; }
.bp-opt .switch input { position: absolute; opacity: 0; }
.bp-opt.on { border-color: var(--line-strong); background: var(--card); }
.bp-opt .switch input { pointer-events: auto; }

/* ---- Pie de tarjeta sobrio ---- */
.pcard .pc-cap { padding: 56px 18px 18px !important; }
.pc-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pcard .pc-cap .pc-line h2 { margin: 0; font-size: 1.4rem; line-height: 1.15; }
.pc-age { font-size: 1.2rem; font-weight: 400; opacity: .92; }
.pc-line .badge { align-self: center; margin-left: 0; }
.pcard .pc-user { margin: 3px 0 0; }
.pc-facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .84rem; }
.pc-facts li { display: flex; align-items: center; gap: 7px; opacity: .95; }
.pc-facts svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.pcard .pc-chips { margin-top: 10px; }
.pcard.cs-cristal .pc-cap { padding: 16px 16px 15px !important; }
@media (max-width: 640px) { .pcard .pc-cap { padding: 48px 14px 14px !important; } .pcard .pc-cap .pc-line h2 { font-size: 1.25rem; } .pcard.cs-cristal .pc-cap { padding: 14px !important; } }
.pm-info .chip, .pm-info .chip.tc, .pm-chips .chip { background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: none; }
:root[data-theme="dark"] .pm-info .chip, :root[data-theme="dark"] .pm-info .chip.tc, :root[data-theme="dark"] .pm-chips .chip { color: #f1e8ec; }

/* ---- Me gustas: tarjeta de Super Like animada ---- */
.like-tile.is-super { box-shadow: 0 0 24px rgba(124, 196, 255, .35); animation: slGlow 2.8s ease-in-out infinite; }
.like-tile.is-super::before { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 3px; background: linear-gradient(120deg, #7cc4ff, #f0568a, #ffd36b, #7cc4ff); background-size: 300% 300%; animation: slBorder 4s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.like-tile.is-super::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%); transform: translateX(-120%); animation: slShine 3.6s ease-in-out infinite; pointer-events: none; }
.like-tile.is-super .super-flag { z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; font-weight: 800; font-size: .82rem; color: #fff; background: linear-gradient(120deg, #3b9cf0, #e8467c); box-shadow: 0 4px 14px rgba(59, 156, 240, .45); }
.like-tile.is-super .super-flag svg { width: 15px; height: 15px; animation: slSpin 3s ease-in-out infinite; }
.like-tile.is-super .like-cap { z-index: 5; padding-top: 70px; background: linear-gradient(transparent, rgba(24, 8, 30, .55) 30%, rgba(24, 8, 30, .9)); }
.like-tile.is-super .like-cap strong { font-size: 1.05rem; }
.sl-stars { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.sl-stars i { position: absolute; bottom: -12px; width: 12px; height: 12px; background: #ffe08a; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0; animation: slRise 4.2s ease-in infinite; }
.sl-stars i:nth-child(1) { left: 12%; animation-delay: 0s; } .sl-stars i:nth-child(2) { left: 34%; animation-delay: 1.1s; width: 9px; height: 9px; }
.sl-stars i:nth-child(3) { left: 58%; animation-delay: 2.2s; } .sl-stars i:nth-child(4) { left: 78%; animation-delay: .6s; width: 9px; height: 9px; } .sl-stars i:nth-child(5) { left: 90%; animation-delay: 3s; width: 8px; height: 8px; }
@keyframes slBorder { to { background-position: 300% 0; } }
@keyframes slGlow { 50% { box-shadow: 0 0 34px rgba(240, 86, 138, .4); } }
@keyframes slShine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes slSpin { 0%, 70%, 100% { transform: rotate(0) scale(1); } 85% { transform: rotate(180deg) scale(1.2); } }
@keyframes slRise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-260px) rotate(140deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .like-tile.is-super, .like-tile.is-super::before, .like-tile.is-super::after, .like-tile.is-super .super-flag svg, .sl-stars i { animation: none; } .sl-stars { display: none; } }
.like-hints { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 3px; font-size: .78rem; }
.like-hints li { display: flex; align-items: center; gap: 6px; opacity: .95; min-width: 0; }
.like-hints svg { width: 13px; height: 13px; flex: none; opacity: .85; }
.like-hints span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.like-hints .lh-tags { opacity: .85; }
.like-tile .like-cap { padding-top: 56px; }

/* ---- Aspecto sobrio: menos color, más neutralidad (editor de perfil, ficha y tarjetas) ---- */
.occ, .pm-info .occ, .pm-meta .tc, .pm-meta .tc .ico { color: inherit !important; text-shadow: none !important; filter: none !important; }
.occ { font-weight: 600; }
.pm-meta .tc { color: var(--ink-2) !important; }
.pm-meta span .ico { color: var(--muted); }
:root[data-theme="dark"] .pm-meta .tc { color: #e6dce1 !important; }
.pchip::before { background: var(--muted) !important; opacity: .45; box-shadow: none; }
.pchip:hover, .pchip.neutral:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 5%, var(--card)); }
.pchip.on, .pchip.neutral.on, .pchip.on:hover { background: color-mix(in srgb, var(--pink) 11%, var(--card)); border-color: var(--pink); color: var(--ink); box-shadow: none; font-weight: 600; animation: none; }
.pchip.on::before { background: var(--pink) !important; opacity: 1; transform: none; }
:root[data-theme="dark"] .pchip.on, :root[data-theme="dark"] .pchip.neutral.on { color: #fff; background: color-mix(in srgb, var(--pink) 18%, var(--card)); }
.pchip .pe, .pc-chips span, .pm-chips .chip { filter: grayscale(.85); }
.pchip .pe { opacity: .85; }
.cu-banner span { filter: saturate(.55) brightness(.92); }
.pc-banner, .pm-banner { filter: saturate(.7); }
.profile-side .pcard.static { box-shadow: var(--shadow-sm); }
.pcard { border: 1px solid rgba(255, 255, 255, .08); }
/* Super like: borde animado discreto, sin estrellas ni parpadeos */
.sl-stars { display: none; }
.like-tile.is-super { animation: none; box-shadow: none; }
.like-tile.is-super::after { opacity: .5; }
.like-tile.is-super .super-flag { background: rgba(20, 24, 40, .72); box-shadow: none; border: 1px solid rgba(124, 196, 255, .5); color: #cfe8ff; }
.like-tile.is-super .super-flag svg { animation: none; color: #7cc4ff; }
.like-hints .lh-tags { flex-wrap: wrap; gap: 4px 0; }
.like-hints .lh-tags span { display: inline-flex; align-items: center; overflow: visible; }
.like-hints .lh-tags span + span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; margin: 0 9px; flex: none; }
.theme-picker.locked { opacity: .4; filter: grayscale(.6); cursor: not-allowed; }
.theme-picker.locked .swatch { pointer-events: none; }

/* ---- Móvil: pantalla fija. No se puede arrastrar la página hacia los lados ni "estirarla" con el dedo ---- */
html, body { overscroll-behavior: none; overflow-x: clip; }
@media (hover: none), (max-width: 899px) {
  html, body { touch-action: pan-y pinch-zoom; -webkit-text-size-adjust: 100%; }
  body { position: relative; max-width: 100vw; }
  /* Las zonas que se desplazan por dentro se mantienen y no arrastran la página al llegar a su final. */
  .chat-body, .modal, .picker-box, .dd-menu, .msgs-list, #match-list, .ctx-menu, .lightbox, .emoji-panel { overscroll-behavior: contain; }
  .seg, .staff-tabs, .tabs, .table-wrap, .set-nav, .ev-list { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
  img, svg, video { -webkit-user-drag: none; user-select: none; }
}

/* ---- Barra inferior del móvil: la rayita rosa de arriba ya no se descoloca ni desaparece al cambiar de pantalla ---- */
.tab-pill { transform: none; transition: left .32s var(--ease), width .28s var(--ease), opacity .2s; will-change: left; z-index: 2; }
.tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-2); }
/* La barra inferior no se funde con el resto de la página en los cambios de pantalla: se queda quieta y solo cambia el contenido. */
.tabbar { view-transition-name: tabbar; }
::view-transition-old(tabbar) { display: none; }
::view-transition-new(tabbar), ::view-transition-group(tabbar) { animation: none; }

/* Tocar una pestaña no deja fondo ni resalte pegado, y la rayita rosa siempre queda por encima. */
.tabbar .tab, .tabbar .tab:active, .tabbar .tab:focus { background: transparent; -webkit-tap-highlight-color: transparent; outline: none; }
.tabbar .tab:focus-visible { outline: 2px solid var(--pink); outline-offset: -4px; border-radius: 10px; }
.tabbar .tab-pill { z-index: 3; }

/* Al cambiar de pantalla el contenido recibe el foco (accesibilidad) pero sin dibujar un marco rosa que se quedaba hasta tocar en otra parte. */
#main, #main:focus, #main:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none; }