/* ═══════════════════════════════════════════
   TOKENS & RESET
═══════════════════════════════════════════ */
:root {
  /* Paleta UpGames · Liquid Glass (v5) — limpia, sobria, menos "gamer" */
  --g: #32D583;
  --g-rgb: 50,213,131;
  --g-dim: rgba(var(--g-rgb),.12);
  --cy: #5AC8FA;
  --cy-rgb: 90,200,250;
  --cy-dim: rgba(var(--cy-rgb),.1);
  --bg: #0A0B0F;
  --bg-rgb: 10,11,15;
  --bg1: #111318;
  --bg2: #171A21;
  --bg3: #1F232C;
  --bd: rgba(255,255,255,.08);
  --bd-g: rgba(var(--g-rgb),.24);
  --txt: #F4F5F7;
  --txt2: #A3A8B6;
  --txt3: #6C7180;
  --card-r: 20px;
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.25,.64,1);
  --nav-h: 72px;
  --hdr-h: 60px;
  --ff: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'DM Mono', ui-monospace, monospace;
  --ff-disp: 'Manrope', -apple-system, sans-serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  font-family: var(--ff);
  color: var(--txt);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
img, video { display:block; width:100%; }
button, a { cursor:pointer; }
button { background:none; border:none; color:inherit; font-family:inherit; }
a { text-decoration:none; color:inherit; }
input, textarea { font-family:inherit; }
::-webkit-scrollbar { display:none; }

/* ═══════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════ */
#preloader {
  position:fixed; inset:0;
  background: var(--bg);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:32px;
  transition: opacity .5s var(--ease), visibility .5s;
}
#preloader.hide { opacity:0; visibility:hidden; pointer-events:none; }
.pl-logo {
  font-family:var(--ff-disp);
  font-size:3.2rem;
  letter-spacing:6px;
  display:flex; align-items:center; gap:4px;
}
.pl-logo .up { color:var(--g); text-shadow:0 0 30px rgba(var(--g-rgb),.6); }
.pl-logo .gm { color:var(--txt); }
.pl-glow {
  position:absolute;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(var(--g-rgb),.08), transparent 70%);
  border-radius:50%;
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.pl-track {
  width:160px; height:2px;
  background:var(--bg3);
  border-radius:10px;
  overflow:hidden;
}
.pl-fill {
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--g),var(--cy));
  border-radius:10px;
  transition:width .3s var(--ease);
  box-shadow:0 0 8px rgba(var(--g-rgb),.6);
}
.pl-sub {
  font-family:var(--ff-mono);
  font-size:.6rem;
  color:var(--txt3);
  letter-spacing:4px;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
#app-header {
  position:sticky; top:0;
  height:var(--hdr-h);
  background:rgba(var(--bg-rgb),.9);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bd);
  z-index:500;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:12px;
}
.hdr-logo {
  font-family:var(--ff-disp);
  font-size:1.5rem;
  letter-spacing:3px;
  flex-shrink:0;
  display:flex; align-items:center; gap:2px;
}
.hdr-logo .up { color:var(--g); }
.hdr-logo .gm { color:var(--txt); }
.search-bar {
  flex:1;
  position:relative;
  display:flex; align-items:center;
}
.search-bar svg {
  position:absolute; left:12px;
  color:var(--txt3); width:16px; height:16px;
  pointer-events:none;
  flex-shrink:0;
}
#buscador {
  width:100%;
  height:38px;
  background:var(--bg2);
  border:1.5px solid var(--bd);
  border-radius:12px;
  padding:0 14px 0 38px;
  color:var(--txt);
  font-size:.88rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
#buscador:focus {
  border-color:var(--bd-g);
  box-shadow:0 0 0 3px rgba(var(--g-rgb),.08);
}
#buscador::placeholder { color:var(--txt3); }
.hdr-actions { display:flex; gap:8px; flex-shrink:0; }
.hdr-btn {
  width:38px; height:38px;
  border-radius:12px;
  background:var(--bg2);
  border:1.5px solid var(--bd);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  transition:border-color .2s, background .2s;
  color:var(--txt2);
}
.hdr-btn:active, .hdr-btn:hover {
  border-color:var(--bd-g);
  color:var(--g);
  background:var(--bg3);
}
.hdr-btn ion-icon { font-size:1.2rem; }

/* ═══════════════════════════════════════════
   CATEGORY CHIPS
═══════════════════════════════════════════ */
#category-row {
  display:flex;
  gap:8px;
  padding:12px 16px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.chip {
  flex-shrink:0;
  padding:6px 16px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.5px;
  background:var(--bg2);
  border:1.5px solid var(--bd);
  color:var(--txt2);
  transition:all .18s var(--ease);
  white-space:nowrap;
  text-transform:uppercase;
}
.chip.active, .chip:active {
  background:var(--g-dim);
  border-color:var(--g);
  color:var(--g);
}
.chip--video {
  border-color:rgba(var(--cy-rgb),.3);
  color:var(--cy);
  background:rgba(var(--cy-rgb),.07);
}
.chip--video.active, .chip--video:active {
  background:rgba(var(--cy-rgb),.18);
  border-color:var(--cy);
  color:var(--cy);
}

/* ═══════════════════════════════════════════
   MAIN CONTENT AREA
═══════════════════════════════════════════ */
#output {
  padding:4px 12px calc(var(--nav-h) + 20px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ═══════════════════════════════════════════
   GAME CARDS — COMPACT TILE
═══════════════════════════════════════════ */
.game-tile {
  background:var(--bg1);
  border-radius:var(--card-r);
  border:1px solid var(--bd);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s var(--spring), border-color .18s;
  position:relative;
  will-change:transform;
}
.game-tile:active { transform:scale(.96); border-color:var(--bd-g); }
.game-tile .thumb-wrap {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg2);
}
.game-tile .thumb-wrap img,
.game-tile .thumb-wrap video {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s var(--ease);
}
.tile-status {
  position:absolute;
  top:6px; right:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.6rem;
  font-weight:800;
  display:flex; align-items:center; gap:3px;
  backdrop-filter:blur(8px);
  letter-spacing:.5px;
  text-transform:uppercase;
}
.tile-status.online {
  background:rgba(var(--g-rgb),.15);
  color:var(--g);
  border:1px solid rgba(var(--g-rgb),.3);
}
.tile-status.revision {
  background:rgba(255,204,0,.15);
  color:#ffcc00;
  border:1px solid rgba(255,204,0,.3);
}
.tile-status.caido {
  background:rgba(255,67,67,.15);
  color:#ff4343;
  border:1px solid rgba(255,67,67,.3);
}
.tile-status-dot {
  width:5px; height:5px;
  border-radius:50%;
  background:currentColor;
  animation:blink 1.8s ease-in-out infinite;
  flex-shrink:0;
  will-change:opacity;
}
@keyframes blink {0%,100%{opacity:1}50%{opacity:.3}}
.tile-info {
  padding:10px;
  display:flex; flex-direction:column; gap:5px;
}
.tile-cat {
  font-size:.6rem;
  font-weight:700;
  color:var(--cy);
  letter-spacing:1px;
  text-transform:uppercase;
}
.tile-title {
  font-size:.83rem;
  font-weight:700;
  color:var(--txt);
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tile-meta {
  display:flex; align-items:center; gap:6px;
  margin-top:2px;
}
.tile-avatar {
  width:18px; height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--cy));
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem;
  font-weight:800;
  color:#000;
  flex-shrink:0;
}
.tile-user {
  font-size:.68rem;
  color:var(--txt3);
  font-weight:500;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tile-downloads {
  font-size:.62rem;
  color:var(--txt3);
  display:flex; align-items:center; gap:2px;
  flex-shrink:0;
}
.tile-downloads ion-icon { font-size:.75rem; }
.tile-fav-quick {
  position:absolute;
  top:6px; left:6px;
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(var(--bg-rgb),.7);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5);
  transition:color .2s;
  z-index:2;
}
.tile-fav-quick.active { color:#ff4d6a; }
.verificado-badge { color:var(--cy); font-size:.75rem; vertical-align:middle; }
.verificado-badge.lv1 { color:#cd7f32; }
.verificado-badge.lv2 { color:#c0c0c0; }
.verificado-badge.lv3 { color:#ffd700; }

/* ═══════════════════════════════════════════
   HERO CAROUSEL (reemplaza featured banner)
═══════════════════════════════════════════ */
#hero-carousel {
  grid-column: 1/-1;
  position: relative;
  border-radius: var(--card-r);
  overflow: hidden;
  aspect-ratio: 21/9;
  background: var(--bg1);
  cursor: pointer;
  border: 1px solid var(--bd);
  margin: 0;
}
.hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.hero-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.hero-slide img,
.hero-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--bg-rgb),.95) 0%, rgba(var(--bg-rgb),.2) 55%, transparent 100%);
  pointer-events: none;
}
.hero-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  z-index: 2;
  pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--g); color: #000;
  font-size: .6rem; font-weight: 800;
  letter-spacing: 1px; padding: 3px 10px;
  border-radius: 999px; margin-bottom: 6px;
  text-transform: uppercase;
}
.hero-title {
  font-size: 1.15rem; font-weight: 800;
  line-height: 1.2; color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 5px;
}
.hero-user {
  font-size: .72rem; color: rgba(255,255,255,.65);
}
.hero-dl {
  font-size: .68rem; color: rgba(255,255,255,.5);
  display: flex; align-items: center; gap: 3px;
}
/* Dots indicadores */
.hero-dots {
  position: absolute;
  bottom: 12px; right: 14px;
  display: flex; gap: 5px;
  z-index: 3;
}
.hero-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  transition: width .3s, background .3s;
}
.hero-dot.active {
  width: 18px;
  background: var(--g);
}

/* ── VIDEO MODE: dot activo cyan ── */
#hero-carousel.hero-video-mode .hero-dot.active {
  background: var(--cy);
}

/* ── VIDEO MODE: badge especial ── */
.hero-badge--video {
  background: rgba(var(--cy-rgb),.15) !important;
  color: var(--cy) !important;
  border: 1px solid rgba(var(--cy-rgb),.4);
  display: inline-flex; align-items: center; gap: 5px;
}
.hero-badge--video ion-icon { font-size: .85rem; }

/* ── VIDEO MODE: tipo de video (Tutorial, Gameplay, etc.) ── */
.hero-vid-type {
  font-size: .6rem; font-weight: 800;
  color: rgba(255,255,255,.55);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* ── VIDEO MODE: ícono ojo en vez de descarga ── */
#hero-carousel.hero-video-mode .hero-dl {
  color: rgba(var(--cy-rgb),.55);
}

/* ── VIDEO MODE: overlay con gradiente cyan suave ── */
#hero-carousel.hero-video-mode .hero-slide--video::after {
  background: linear-gradient(to top, rgba(0,10,20,.96) 0%, rgba(var(--cy-rgb),.04) 55%, transparent 100%);
}

/* ── VIDEO MODE: borde del carousel ── */
#hero-carousel.hero-video-mode {
  border-color: rgba(var(--cy-rgb),.2);
}
/* Flechas prev/next */
.hero-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(var(--bg-rgb),.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
  z-index: 3;
  transition: background .2s;
  cursor: pointer;
}
.hero-arrow:active { background: rgba(var(--g-rgb),.25); }
.hero-arrow.prev { left: 10px; }
.hero-arrow.next { right: 10px; }

/* ═══════════════════════════════════════════
   FEATURED BANNER (1 column full) — legacy, oculto
═══════════════════════════════════════════ */
.featured-tile {
  grid-column:1/-1;
  background:var(--bg1);
  border-radius:var(--card-r);
  border:1px solid var(--bd);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:transform .18s var(--spring);
}
.featured-tile:active { transform:scale(.98); }
.featured-tile .thumb-wrap {
  aspect-ratio:21/9;
  position:relative;
}
.featured-tile .thumb-wrap::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(var(--bg-rgb),.95) 0%, transparent 60%);
}
.featured-tile .ft-info {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:16px;
  z-index:2;
}
.featured-tile .ft-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--g);
  color:#000;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:1px;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:8px;
  text-transform:uppercase;
}
.featured-tile .ft-title {
  font-size:1.2rem;
  font-weight:800;
  line-height:1.2;
  color:#fff;
}
.featured-tile .ft-meta {
  display:flex; align-items:center; gap:10px;
  margin-top:6px;
}
.featured-tile .ft-user {
  font-size:.75rem;
  color:rgba(255,255,255,.6);
}
.featured-tile .ft-dl {
  font-size:.72rem;
  color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:3px;
}

/* ═══════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════ */
.section-header {
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0 4px;
}
.section-title {
  font-size:.75rem;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--txt2);
}
.section-count {
  font-size:.68rem;
  color:var(--txt3);
  font-family:var(--ff-mono);
}

/* ═══════════════════════════════════════════
   DETAIL SHEET (bottom sheet / full modal)
═══════════════════════════════════════════ */
#detail-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  z-index:800;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
  touch-action:none;
}
#detail-overlay.show { opacity:1; visibility:visible; }

#detail-sheet {
  position:fixed;
  bottom:0; left:0; right:0;
  max-height:95dvh;
  background:var(--bg1);
  border-radius:24px 24px 0 0;
  z-index:801;
  overflow:hidden;
  transform:translateY(100%);
  transition:transform .4s var(--spring);
  display:flex;
  flex-direction:column;
}
#detail-sheet.open { transform:translateY(0); }

.sheet-handle {
  width:36px; height:4px;
  background:var(--bg3);
  border-radius:999px;
  margin:12px auto 0;
  flex-shrink:0;
}

.sheet-media {
  position:relative;
  aspect-ratio:16/9;
  flex-shrink:0;
  background:var(--bg);
  margin:12px 16px;
  border-radius:16px;
  /* clip recorta visualmente igual que hidden pero NO bloquea la Fullscreen API
     en Android WebView (hidden crea un BFC que impide el fullscreen nativo) */
  overflow:clip;
}
.sheet-media img, .sheet-media video {
  width:100%; height:100%;
  object-fit:cover;
}
/* El video inyectado usa contain para no recortar */
#ds-injected-vid {
  object-fit: contain !important;
}
.sheet-media-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, transparent 50%, rgba(var(--bg-rgb),.8));
  pointer-events: none;
}

/* Fullscreen nativo: el video ocupa toda la pantalla sin que nada interfiera */
video:fullscreen,
video:-webkit-full-screen {
  width:100vw !important;
  height:100vh !important;
  object-fit:contain !important;
  background:#000 !important;
  border-radius:0 !important;
  z-index:99999 !important;
}

.sheet-scroll {
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 16px 20px;
}

.sheet-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.sheet-title-area { flex:1; }
.sheet-cat {
  font-size:.65rem;
  font-weight:700;
  color:var(--cy);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.sheet-title {
  font-size:1.35rem;
  font-weight:800;
  line-height:1.2;
  color:var(--txt);
}
.sheet-close {
  width:32px; height:32px;
  border-radius:50%;
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  color:var(--txt2);
  font-size:1rem;
  flex-shrink:0;
  border:1px solid var(--bd);
}

/* Author row */
.sheet-author {
  display:flex; align-items:center; gap:10px;
  padding:12px;
  background:var(--bg2);
  border-radius:14px;
  margin-bottom:12px;
  cursor:pointer;
  border:1px solid var(--bd);
  transition:border-color .2s;
}
.sheet-author:active { border-color:var(--bd-g); }
.author-avatar {
  width:40px; height:40px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--g), var(--cy));
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  font-weight:800;
  color:#000;
  flex-shrink:0;
}
.author-info { flex:1; }
.author-name {
  font-size:.85rem;
  font-weight:700;
  display:flex; align-items:center; gap:5px;
}
.author-sub {
  font-size:.7rem;
  color:var(--txt3);
  margin-top:2px;
}
.author-arrow {
  color:var(--txt3);
  font-size:1rem;
}

/* Stats row */
.sheet-stats {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.stat-box {
  background:var(--bg2);
  border:1px solid var(--bd);
  border-radius:14px;
  padding:12px;
  text-align:center;
}
.stat-val {
  font-family:var(--ff-disp);
  font-size:1.4rem;
  letter-spacing:1px;
  color:var(--txt);
  line-height:1;
}
.stat-lbl {
  font-size:.6rem;
  color:var(--txt3);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:3px;
}

/* Status */
.sheet-status-bar {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  margin-bottom:12px;
  font-size:.75rem;
  font-weight:700;
}
.sheet-status-bar.online { background:rgba(var(--g-rgb),.08); border:1px solid rgba(var(--g-rgb),.2); color:var(--g); }
.sheet-status-bar.revision { background:rgba(255,204,0,.08); border:1px solid rgba(255,204,0,.2); color:#ffcc00; }
.sheet-status-bar.caido { background:rgba(255,67,67,.08); border:1px solid rgba(255,67,67,.2); color:#ff4343; }
.sheet-status-bar ion-icon { font-size:1rem; }

/* Description */
.sheet-desc {
  font-size:.85rem;
  color:var(--txt2);
  line-height:1.6;
  margin-bottom:16px;
}

/* Action buttons row */
.sheet-actions {
  display:flex; gap:10px;
  margin-bottom:16px;
}
.action-pill {
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:44px;
  border-radius:12px;
  font-size:.78rem;
  font-weight:700;
  border:1.5px solid var(--bd);
  background:var(--bg2);
  color:var(--txt2);
  transition:all .18s var(--ease);
  letter-spacing:.3px;
}
.action-pill ion-icon { font-size:1.1rem; }
.action-pill:active, .action-pill.active {
  border-color:var(--g);
  color:var(--g);
  background:var(--g-dim);
}
.action-pill.fav-active {
  border-color:#ff4d6a;
  color:#ff4d6a;
  background:rgba(255,77,106,.08);
}

/* Download button */
.sheet-download {
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:52px;
  border-radius:16px;
  background:var(--g);
  color:#000;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:20px;
  transition:opacity .18s, transform .18s;
  position:relative;
  overflow:hidden;
}
.sheet-download::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.15), transparent);
}
.sheet-download:active { opacity:.85; transform:scale(.98); }
.sheet-download ion-icon { font-size:1.2rem; }

/* ─── GALERÍA DE MEDIAS en el detail sheet ─── */
.sheet-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 4px;
  margin-bottom: 14px;
}
.sheet-gallery::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex-shrink: 0;
  width: 72px; height: 52px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--bd);
  cursor: pointer;
  transition: border-color .18s, transform .18s;
  position: relative;
  background: var(--bg2);
}
.gallery-thumb img, .gallery-thumb video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.gallery-thumb.active { border-color: var(--g); transform: scale(1.05); }
.gallery-thumb:active { transform: scale(.94); }
.gallery-yt-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.gallery-yt-icon ion-icon { font-size: 1.1rem; color: #fff; filter: drop-shadow(0 1px 4px rgba(0,0,0,.8)); }

/* ─── FORMULARIO: grid de hasta 4 medias ─── */
.pf-images-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.pf-image-slot {
  position: relative;
}
.pf-image-slot .pf-input {
  padding-right: 36px;
  font-size: .75rem;
}
.pf-image-slot-label {
  font-size: .62rem; font-weight: 700; color: var(--txt3);
  letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 5px; display: flex; align-items: center; gap: 4px;
}
.pf-image-slot-label ion-icon { font-size: .8rem; color: var(--cy); }
.pf-img-preview-mini {
  width: 100%; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--bd);
  margin-top: 5px;
  display: none;
}
.pf-img-preview-mini img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pf-img-preview-mini.show { display: block; }

/* Comments section */
.comments-section-title {
  font-size:.72rem;
  font-weight:800;
  color:var(--txt2);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
  display:flex; align-items:center; gap:6px;
}
.comments-section-title ion-icon { color:var(--g); }

.comment-input-area {
  display:flex; gap:8px;
  margin-bottom:16px;
}
.comment-input-area textarea {
  flex:1;
  background:var(--bg2);
  border:1.5px solid var(--bd);
  border-radius:14px;
  padding:10px 14px;
  color:var(--txt);
  font-size:.82rem;
  resize:none;
  height:44px;
  outline:none;
  transition:border-color .2s;
  line-height:1.5;
  overflow:hidden;
}
.comment-input-area textarea:focus { border-color:var(--bd-g); }
.comment-input-area textarea::placeholder { color:var(--txt3); }
.btn-post {
  width:44px; height:44px;
  border-radius:12px;
  background:var(--g);
  color:#000;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
  transition:opacity .2s;
}
.btn-post:active { opacity:.75; }

.comment-item {
  padding:12px;
  background:var(--bg2);
  border-radius:14px;
  margin-bottom:8px;
  border:1px solid var(--bd);
}
.comment-head {
  display:flex; align-items:center; gap:8px;
  margin-bottom:6px;
}
.comment-avatar {
  width:24px; height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--cy));
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem;
  font-weight:800;
  color:#000;
  flex-shrink:0;
}
.comment-user {
  font-size:.75rem;
  font-weight:700;
  color:var(--txt);
  flex:1;
}
.comment-time {
  font-size:.65rem;
  color:var(--txt3);
  font-family:var(--ff-mono);
}
.comment-text {
  font-size:.82rem;
  color:var(--txt2);
  line-height:1.5;
}

.no-comments {
  text-align:center;
  padding:20px 0;
  color:var(--txt3);
  font-size:.8rem;
}

/* ═══════════════════════════════════════════
   BOTTOM NAVIGATION
═══════════════════════════════════════════ */
#bottom-nav {
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--nav-h);
  background:rgba(var(--bg-rgb),.95);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--bd);
  display:flex;
  z-index:500;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-tab {
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  color:var(--txt3);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:color .2s;
  position:relative;
}
.nav-tab.active { color:var(--g); }
.nav-tab ion-icon {
  font-size:1.5rem;
  transition:transform .2s var(--spring);
}
.nav-tab.active ion-icon { transform:scale(1.15); }
.nav-dot {
  position:absolute;
  top:8px;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--g);
  opacity:0;
  transition:opacity .2s;
}
.nav-tab.active .nav-dot { opacity:1; }

/* ── Nexus center nav button ── */
.nav-nexus {
  flex: 1.2;
  position: relative;
}
.nav-nexus-ring {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f1f0f, #0a1a1a);
  border: 1.5px solid rgba(var(--g-rgb),.5);
  border-bottom: 3px solid var(--g);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(var(--g-rgb),.25), 0 0 4px rgba(var(--g-rgb),.15);
  animation: fabPulse 3s ease-in-out infinite;
  margin-bottom: 2px;
}
.nav-nexus-ring svg { width: 26px; height: 26px; }
.nav-nexus span { color: var(--g); font-size: .6rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

/* ═══════════════════════════════════════════
   MODAL SYSTEM (Report, Terms, etc.)
═══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
  z-index:900;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
  touch-action:none;
}
.modal-overlay.show { opacity:1; visibility:visible; }
.modal-sheet {
  width:100%; max-width:520px;
  background:var(--bg1);
  border-radius:24px 24px 0 0;
  padding:0 0 env(safe-area-inset-bottom);
  transform:translateY(100%);
  transition:transform .4s var(--spring);
  max-height:80dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.modal-overlay.show .modal-sheet { transform:translateY(0); }
.modal-handle {
  width:36px; height:4px;
  background:var(--bg3);
  border-radius:999px;
  margin:12px auto 0;
}
.modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px;
}
.modal-hdr-title {
  font-size:1rem;
  font-weight:800;
  display:flex; align-items:center; gap:8px;
}
.modal-close {
  width:30px; height:30px;
  border-radius:50%;
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  color:var(--txt2);
  font-size:.9rem;
}
.modal-body { padding:0 20px 24px; }

/* Report options */
.report-options { display:flex; flex-direction:column; gap:8px; }
.report-opt {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:var(--bg2);
  border:1.5px solid var(--bd);
  border-radius:14px;
  transition:all .18s;
  text-align:left;
}
.report-opt:active { border-color:var(--g); background:var(--g-dim); }
.report-opt-ico {
  width:40px; height:40px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  flex-shrink:0;
}
.report-opt-ico.red { background:rgba(255,67,67,.1); color:#ff4343; }
.report-opt-ico.yellow { background:rgba(255,204,0,.1); color:#ffcc00; }
.report-opt-ico.blue { background:rgba(var(--cy-rgb),.1); color:var(--cy); }
.report-opt-title {
  font-size:.88rem;
  font-weight:700;
  color:var(--txt);
  margin-bottom:2px;
}
.report-opt-sub {
  font-size:.75rem;
  color:var(--txt3);
}

/* ═══════════════════════════════════════════
   TERMS MODAL
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   ONBOARDING MODAL — 5 slides + términos
   Reemplaza el modal de terms original.
═══════════════════════════════════════════════════════ */
#onboarding-modal {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 99000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#onboarding-modal.show { display: flex; }

/* ── Glow de fondo animado ── */
#onboarding-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(var(--g-rgb),.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 75%, rgba(var(--cy-rgb),.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Track deslizable ── */
.ob-track {
  width: 100%; max-width: 480px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── Slide individual ── */
.ob-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px 24px 0;
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .38s cubic-bezier(.4,0,.2,1),
              transform .38s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.ob-slide.active {
  opacity: 1; transform: translateX(0);
  pointer-events: all;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
}
.ob-slide.exit-left {
  opacity: 0; transform: translateX(-48px);
}
.ob-slide-inner {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
  padding-bottom: 24px;
  padding-top: 8px;
}

/* ── Icono SVG animado ── */
.ob-icon-wrap {
  width: 80px; height: 80px;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  animation: ob-float 3.5s ease-in-out infinite;
}
@keyframes ob-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ob-icon-identity { background: rgba(var(--g-rgb),.08); border: 1.5px solid rgba(var(--g-rgb),.2); }
.ob-icon-money    { background: rgba(var(--g-rgb),.08); border: 1.5px solid rgba(var(--g-rgb),.2); }
.ob-icon-community{ background: rgba(var(--cy-rgb),.08); border: 1.5px solid rgba(var(--cy-rgb),.2); }
.ob-icon-nexus    { background: rgba(var(--cy-rgb),.08); border: 1.5px solid rgba(var(--cy-rgb),.2); }
.ob-icon-legal    { background: rgba(var(--g-rgb),.06); border: 1.5px solid rgba(var(--g-rgb),.15); }
.ob-svg { width: 48px; height: 48px; }

/* ── Textos del slide ── */
.ob-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--g);
}
.ob-kicker-cy { color: var(--cy); }

.ob-title {
  font-family: var(--ff-disp);
  font-size: 2.8rem; line-height: 1;
  letter-spacing: 2px;
  margin: 0;
}
.ob-up  { color: var(--g); text-shadow: 0 0 24px rgba(var(--g-rgb),.5); }
.ob-gm  { color: var(--txt); }

.ob-title-sm {
  font-size: 1.65rem; font-weight: 800; line-height: 1.15;
  margin: 0; color: var(--txt);
}
.ob-accent-g  { color: var(--g); }
.ob-accent-cy { color: var(--cy); }

.ob-desc {
  font-size: .88rem; color: var(--txt2); line-height: 1.6;
  margin: 0; max-width: 340px;
}

/* ── Stat row (slide 1) ── */
.ob-stat-row {
  display: flex; align-items: center; gap: 0;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 16px; padding: 14px 20px;
  width: 100%; max-width: 340px; justify-content: space-around;
  margin-top: 4px;
}
.ob-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ob-stat-val { font-size: 1.1rem; font-weight: 800; color: var(--g); }
.ob-stat-lbl { font-size: .65rem; color: var(--txt3); letter-spacing: .5px; }
.ob-stat-div {
  width: 1px; height: 32px;
  background: var(--bd); flex-shrink: 0;
}

/* ── CPM card (slide 2) ── */
.ob-cpm-card {
  background: var(--bg2); border: 1.5px solid var(--bd-g);
  border-radius: 16px; padding: 16px 20px;
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 10px;
}
.ob-cpm-row {
  display: flex; justify-content: space-between; align-items: center;
}
.ob-cpm-row-sub { opacity: .7; }
.ob-cpm-label { font-size: .78rem; color: var(--txt2); }
.ob-cpm-val {
  font-size: 1.15rem; font-weight: 900; color: var(--g);
  font-family: var(--ff-mono);
}
.ob-cpm-val-sm {
  font-size: .8rem; font-weight: 700; color: var(--g);
  font-family: var(--ff-mono);
}
.ob-note {
  font-size: .72rem; color: var(--txt3);
  margin: 0;
}

/* ── Level list (slide 3) ── */
.ob-levels {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 10px;
}
.ob-level {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 12px; padding: 12px 14px;
  font-size: .82rem; color: var(--txt2); text-align: left;
  line-height: 1.4;
}
.ob-level-badge {
  font-size: 1rem; flex-shrink: 0;
  width: 28px; text-align: center;
}
.ob-bronze { color: #CECECE; }
.ob-gold   { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,.4); }
.ob-elite  { color: #00EFFF; text-shadow: 0 0 8px rgba(0,239,255,.4); }

/* ── NEXUS features (slide 4) ── */
.ob-nexus-feats {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 10px;
}
.ob-nfeat {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; color: var(--txt2);
  text-align: left;
  background: var(--bg2); border: 1px solid rgba(var(--cy-rgb),.12);
  border-radius: 10px; padding: 10px 14px;
}
.ob-nfeat ion-icon {
  color: var(--cy); font-size: 1rem; flex-shrink: 0;
}

/* ── Rules (slide 5 — términos) ── */
.ob-rules {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 10px;
}
.ob-rule {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg2); border: 1px solid var(--bd);
  border-radius: 12px; padding: 12px 14px;
  font-size: .82rem; color: var(--txt2);
  text-align: left; line-height: 1.5;
}
.ob-rule-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--g-dim); border: 1px solid var(--bd-g);
  color: var(--g); font-size: .72rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.ob-legal-link {
  font-size: .72rem; color: var(--cy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
  margin-top: 2px;
}
.ob-legal-link:hover { border-bottom-color: var(--cy); }

/* ── Botones slide 5 ── */
#btn-accept-terms {
  width: 100%; max-width: 340px;
  height: 52px; border-radius: 16px;
  background: var(--g); color: #000;
  font-size: .88rem; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  transition: opacity .2s, transform .15s;
  margin-top: 4px;
}
#btn-accept-terms:active { transform: scale(.98); opacity: .85; }
.ob-btn-reject {
  width: 100%; max-width: 340px;
  height: 40px; border-radius: 12px;
  background: transparent;
  color: var(--txt3); font-size: .78rem; font-weight: 600;
  border: 1.5px solid var(--bd);
}

/* ── Footer fijo: dots + botón siguiente ── */
.ob-footer {
  width: 100%; max-width: 480px;
  padding: 14px 24px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.ob-dots {
  display: flex; gap: 7px; align-items: center;
}
.ob-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--bd);
  transition: all .3s; cursor: pointer;
}
.ob-dot.active {
  width: 22px; border-radius: 4px;
  background: var(--g); border-color: var(--g);
}
.ob-btn-next {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1.5px solid var(--bd-g);
  color: var(--g); font-size: .82rem; font-weight: 700;
  padding: 10px 18px; border-radius: 50px;
  letter-spacing: .3px;
  transition: background .2s, border-color .2s;
}
.ob-btn-next:active { background: var(--bg3); }
.ob-btn-next ion-icon { font-size: .9rem; }

/* ── Variante del botón en último slide (oculto) ── */
.ob-footer.is-last .ob-btn-next { display: none; }

/* ═══════════════════════════════════════════
   ONBOARDING — ECOSYSTEM SLIDE (slide 0)
═══════════════════════════════════════════ */

/* Logo grande animado */
.ob-eco-logo {
  font-family: var(--ff-disp);
  font-size: 3rem; line-height: 1;
  letter-spacing: 3px;
  animation: ob-eco-pulse 3s ease-in-out infinite;
}
.ob-eco-up  { color: var(--g); text-shadow: 0 0 28px rgba(var(--g-rgb),.55); }
.ob-eco-gm  { color: var(--txt); }
@keyframes ob-eco-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .8; }
}

/* Contenedor del ciclo */
.ob-cycle {
  width: 100%;
  display: flex; justify-content: center;
  margin: 4px 0;
}
.ob-cycle-ring {
  position: relative;
  width: 220px; height: 220px;
}

/* Centro del ciclo */
.ob-cycle-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: var(--bg2);
  border: 1.5px solid rgba(var(--g-rgb),.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: ob-center-spin 12s linear infinite;
}
@keyframes ob-center-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Línea circular de fondo (SVG inline trick via outline) */
.ob-cycle-ring::before {
  content: '';
  position: absolute; inset: 24px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--g-rgb),.18);
  animation: ob-ring-pulse 4s ease-in-out infinite;
}
@keyframes ob-ring-pulse {
  0%,100% { border-color: rgba(var(--g-rgb),.18); }
  50%      { border-color: rgba(var(--cy-rgb),.25); }
}

/* Nodos */
.ob-node {
  position: absolute;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  width: 56px;
}
.ob-node-icon {
  width: 40px; height: 40px;
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: border-color .3s, box-shadow .3s;
}
.ob-node:hover .ob-node-icon {
  border-color: rgba(var(--g-rgb),.5);
  box-shadow: 0 0 12px rgba(var(--g-rgb),.2);
}
.ob-node-lbl {
  font-size: .58rem; font-weight: 700;
  color: var(--txt3); letter-spacing: .3px;
  text-align: center; white-space: nowrap;
}

/* Posiciones en círculo (radio ~88px desde centro 110,110) */
/* top    */ .ob-node-top { top:  0px;  left: 50%; transform: translateX(-50%); }
/* top-r  */ .ob-node-tr  { top: 22px;  right: 4px; }
/* bot-r  */ .ob-node-br  { bottom: 22px; right: 4px; }
/* bottom */ .ob-node-bot { bottom: 0px; left: 50%; transform: translateX(-50%); }
/* bot-l  */ .ob-node-bl  { bottom: 22px; left: 4px; }
/* top-l  */ .ob-node-tl  { top: 22px;  left: 4px; }

/* Animación de entrada secuencial */
.ob-node { animation: ob-node-in .5s ease both; }
.ob-node-top { animation-delay: .1s; }
.ob-node-tr  { animation-delay: .2s; }
.ob-node-br  { animation-delay: .3s; }
.ob-node-bot { animation-delay: .4s; }
.ob-node-bl  { animation-delay: .5s; }
.ob-node-tl  { animation-delay: .6s; }
@keyframes ob-node-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.ob-node-top { animation-name: ob-node-in-top; }
.ob-node-bot { animation-name: ob-node-in-bot; }
@keyframes ob-node-in-top {
  from { opacity: 0; transform: translateX(-50%) scale(.6); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes ob-node-in-bot {
  from { opacity: 0; transform: translateX(-50%) scale(.6); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Caption debajo */
.ob-eco-caption {
  font-size: .82rem; color: var(--txt2);
  text-align: center; line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════
   TOAST
═══════════════════════════════════════════ */
#toast-container {
  position:fixed;
  bottom:calc(var(--nav-h) + 16px);
  left:50%;
  transform:translateX(-50%);
  z-index:99998;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  pointer-events:none;
}
.toast {
  background:var(--bg3);
  color:var(--txt);
  padding:10px 20px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  border:1px solid var(--bd);
  white-space:nowrap;
  animation:toastIn .3s var(--spring);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
@keyframes toastIn {
  from{opacity:0;transform:translateY(8px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.toast.out { animation:toastOut .3s var(--ease) forwards; }
@keyframes toastOut {
  to{opacity:0;transform:translateY(4px) scale(.95)}
}

/* ═══════════════════════════════════════════
   LOADING / EMPTY STATES
═══════════════════════════════════════════ */
.skeleton-grid {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.skeleton-card {
  background:var(--bg1);
  border-radius:var(--card-r);
  overflow:hidden;
  border:1px solid var(--bd);
}
.skeleton-thumb {
  aspect-ratio:16/9;
  background:var(--bg2);
  position:relative;
  overflow:hidden;
}
.skeleton-thumb::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);
  animation:shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}
.skeleton-lines { padding:10px; display:flex; flex-direction:column; gap:6px; }
.skeleton-line {
  height:8px; border-radius:4px;
  background:var(--bg2);
}
.skeleton-line.w60 { width:60%; }
.skeleton-line.w80 { width:80%; }

.empty-state {
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 20px;
  gap:12px;
  text-align:center;
}
.empty-state ion-icon { font-size:3rem; color:var(--txt3); }
.empty-state h3 { font-size:1rem; font-weight:700; color:var(--txt2); }
.empty-state p { font-size:.82rem; color:var(--txt3); }
.empty-action {
  margin-top:8px;
  padding:12px 24px;
  background:var(--g);
  color:#000;
  border-radius:12px;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* Infinite scroll loader */
.scroll-loader {
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  padding:16px;
  color:var(--txt3);
  font-size:.78rem;
}
.scroll-loader ion-icon { animation:spinAnim 1s linear infinite; }
@keyframes spinAnim{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════
   NEXUS AI FAB & PANEL
═══════════════════════════════════════════ */
#nxFab {
  display: none; /* Ahora está integrado en el bottom nav */
}
/* Cuando el panel está abierto, el FAB queda sobre el panel */
#nxPanel.open ~ #nxFab,
body.nx-open #nxFab {
  z-index:710;
}
@keyframes fabPulse {
  0%,100%{opacity:1}
  50%{opacity:.75}
}
#nxFab svg { width:26px; height:26px; }

/* ═══════════════════════════════════════════
   NEXUS PANEL (unchanged from original)
═══════════════════════════════════════════ */
#nxFab-r1, #nxFab-r2 { display:none; }
#nxPanel {
  position:fixed;
  /* En móvil: ocupa toda la pantalla como bottom sheet */
  bottom:0;
  left:0;
  right:0;
  width:100%;
  height:85dvh;
  background:var(--bg1);
  border-radius:20px 20px 0 0;
  border:1px solid var(--bd);
  border-bottom:none;
  z-index:700;
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateY(100%);
  opacity:0;
  visibility:hidden;
  transition:transform .35s cubic-bezier(.34,1.2,.64,1), opacity .25s, visibility .25s;
  box-shadow:0 -8px 40px rgba(0,0,0,.7);
  /* CRÍTICO: bloquear eventos táctiles para que no pasen al fondo */
  touch-action:none;
}
#nxPanel.open {
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}
/* Overlay que bloquea el fondo cuando el panel está abierto */
#nxPanel::before {
  content:'';
  position:fixed;
  inset:0;
  bottom:85dvh;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:auto;
  z-index:-1;
  opacity:0;
  transition:opacity .25s;
}
#nxPanel.open::before {
  opacity:1;
}
#nxPanel.expanded {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  transform:none;
}
.nx-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
}
.nx-hdr-l { display:flex; align-items:center; gap:10px; }
.nx-logo-box { position:relative; width:30px; height:30px; }
.nx-lsvg { width:100%; height:100%; }
.nx-live {
  position:absolute;
  top:-2px; right:-2px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--g);
  box-shadow:0 0 6px var(--g);
  animation:blink 1.5s ease-in-out infinite;
}
.nx-titles { display:flex; flex-direction:column; }
.nx-name { font-size:.88rem; font-weight:800; letter-spacing:1px; }
.nx-name em { color:var(--g); font-style:normal; }
.nx-sub { font-size:.6rem; color:var(--txt3); font-family:var(--ff-mono); }
.nx-hdr-r { display:flex; align-items:center; gap:6px; }
.nx-ibtn {
  width:28px; height:28px;
  border-radius:8px;
  background:var(--bg2);
  border:1px solid var(--bd);
  display:flex; align-items:center; justify-content:center;
  color:var(--txt2);
  font-size:.78rem;
  transition:all .2s;
}
.nx-ibtn:hover { border-color:var(--bd-g); color:var(--g); }
.nx-ibtn svg { width:12px; height:12px; stroke:currentColor; }
.nx-ibtn-x { font-size:.9rem; }
.nx-div { height:1px; background:linear-gradient(90deg,transparent,var(--g),var(--cy),transparent); opacity:.3; flex-shrink:0; }
.nx-body { flex:1; position:relative; overflow:hidden; overscroll-behavior:contain; touch-action:none; }
.nx-body iframe { position:absolute; inset:0; width:100%; height:100%; border:none; opacity:0; transition:opacity .5s; }
.nx-body iframe.loaded { opacity:1; }
#nxBoot {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:20px;
}
.nb-visual { position:relative; width:60px; height:60px; }
.nb-ring {
  position:absolute;
  border-radius:50%;
  border:1px solid transparent;
}
.nb-ra { inset:0; border-top-color:var(--g); border-right-color:rgba(var(--g-rgb),.3); animation:plSpin 2s linear infinite; }
.nb-rb { inset:8px; border-bottom-color:var(--cy); border-left-color:rgba(var(--cy-rgb),.3); animation:plSpin 2.5s linear infinite reverse; }
.nb-rc { inset:18px; border-top-color:rgba(var(--g-rgb),.5); animation:plSpin 1.5s linear infinite; }
@keyframes plSpin{to{transform:rotate(360deg)}}
.nb-ico { position:absolute; inset:0; margin:auto; width:24px; height:24px; }
.nb-info { text-align:center; width:100%; }
.nb-lbl { font-size:.65rem; font-weight:800; letter-spacing:3px; color:var(--txt3); margin-bottom:10px; }
.nb-barwrap { display:flex; align-items:center; gap:10px; }
.nb-bar { flex:1; height:2px; background:var(--bg3); border-radius:999px; overflow:hidden; }
.nb-fill { height:100%; width:0; background:linear-gradient(90deg,var(--g),var(--cy)); border-radius:999px; transition:width .3s; }
.nb-pct { font-size:.65rem; color:var(--txt3); font-family:var(--ff-mono); width:30px; }
.nb-log { font-size:.6rem; color:var(--txt3); font-family:var(--ff-mono); margin-top:10px; min-height:14px; }
.nx-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px;
  border-top:1px solid var(--bd);
  flex-shrink:0;
}
.nx-fl { display:flex; align-items:center; gap:5px; font-size:.6rem; color:var(--txt3); font-family:var(--ff-mono); }
.nx-fdot { width:5px; height:5px; border-radius:50%; background:var(--g); animation:blink 1.5s ease-in-out infinite; display:inline-block; }
.nx-fr { font-size:.6rem; color:var(--txt3); font-family:var(--ff-mono); }

/* ═══════════════════════════════════════════
   TUTORIAL FAB
═══════════════════════════════════════════ */
#tut-fab {
  position:fixed;
  left:16px;
  bottom:calc(var(--nav-h) + 16px);
  width:38px; height:38px;
  border-radius:50%;
  background:var(--bg2);
  border:1.5px solid var(--bd);
  display:flex; align-items:center; justify-content:center;
  z-index:600;
  color:var(--txt3);
  font-size:1rem;
  font-weight:800;
  transition:border-color .2s, color .2s;
}
#tut-fab:hover { border-color:var(--bd-g); color:var(--g); }

/* Tutorial overlay */
#btut-lock {
  display:none;
  position:fixed;
  inset:0;
  background:transparent;   /* sin fondo: el spotlight hace el oscurecimiento */
  z-index:9900;
  pointer-events:none;
}
#btut-lock.on { display:block; pointer-events:auto; }
/* Cuando no hay elemento a señalar, el lock mismo oscurece */
#btut-lock.dim { background:rgba(0,0,0,.75); }

#btut-spotlight {
  display:none;
  position:fixed;
  border-radius:14px;
  /* box-shadow crea el oscurecimiento alrededor del hueco */
  box-shadow:0 0 0 9999px rgba(0,0,0,.78); animation:none;
  z-index:9901;
  pointer-events:none;
  outline:2.5px solid var(--g);
  outline-offset:1px;
  animation:spotPulse 1.4s ease-in-out infinite;
  transition:top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
             width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
}
@keyframes spotPulse{0%,100%{outline-color:var(--g)}50%{outline-color:var(--cy)}}

/* TOOLTIP: fijo en la parte inferior normalmente, arriba si el elemento está abajo */
#btut-tooltip {
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(var(--nav-h) + 12px);
  width:auto;
  max-height:52vh;          /* nunca más alto que la mitad de pantalla */
  background:var(--bg1);
  border-radius:20px;
  border:1.5px solid var(--bd-g);
  z-index:9999;
  box-shadow:0 -4px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--g-rgb),.1);
  overflow:hidden;
  display:none;
  flex-direction:column;    /* columna para que el footer quede siempre visible */
  transition: bottom .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
/* cuando está visible */
#btut-tooltip[style*="display:block"],
#btut-tooltip[style*="display: block"] {
  display:flex !important;
}
#btut-tooltip.at-top {
  bottom:auto;
  top:calc(var(--hdr-h) + 8px);
}
.btut-inner {
  padding:16px 16px 10px;
  overflow-y:auto;          /* texto scrolleable si es muy largo */
  flex:1;
  -webkit-overflow-scrolling:touch;
}
.btut-badge {
  font-size:.58rem;
  font-weight:800;
  color:var(--g);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:5px;
  font-family:var(--ff-mono);
}
.btut-title { font-size:.95rem; font-weight:800; color:var(--txt); margin-bottom:6px; }
.btut-body  { font-size:.81rem; color:var(--txt2); line-height:1.55; }
.btut-footer {
  padding:10px 16px 12px;
  border-top:1px solid var(--bd);
  background:var(--bg1);   /* fondo para que no se vea el texto detrás */
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  flex-shrink:0;            /* NUNCA se encoge: siempre visible */
}
.btut-dots { display:flex; gap:4px; flex-shrink:0; overflow:hidden; max-width:100px; }
.btut-dot {
  width:6px; height:6px; flex-shrink:0;
  border-radius:50%;
  background:var(--bg3);
  transition:background .2s, width .2s;
}
.btut-dot.on { background:var(--g); width:14px; border-radius:3px; }
.btut-nav { display:flex; gap:8px; flex-shrink:0; }
.btut-btn {
  height:40px; padding:0 16px;
  border-radius:10px;
  font-size:.8rem; font-weight:800;
  background:var(--bg3); color:var(--txt2);
  border:1px solid var(--bd);
  transition:all .18s; cursor:pointer;
  white-space:nowrap;
}
.btut-btn.primary {
  background:var(--g); color:#000;
  border:none; min-width:110px;
}
.btut-close {
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%;
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--txt3);
  border:1px solid var(--bd); cursor:pointer; z-index:2;
}
.btut-in { animation:btutSlide .3s var(--spring); }
@keyframes btutSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.btut-pulse { outline:2px solid var(--g); outline-offset:4px; border-radius:12px; }

/* Spotlight bloquea interacción con el elemento destacado */
#btut-spotlight {
  display:none;
  position:fixed;
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.78); animation:none;
  z-index:9901;
  pointer-events:auto;      /* BLOQUEA clicks sobre el elemento destacado */
  outline:2.5px solid var(--g);
  outline-offset:1px;
  animation:spotPulse 1.4s ease-in-out infinite;
  transition:top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
             width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
}
@keyframes spotPulse{
  0%,100%{outline-color:var(--g);box-shadow:0 0 0 9999px rgba(0,0,0,.78)}
  50%{outline-color:var(--cy);box-shadow:0 0 0 9999px rgba(0,0,0,.82)}
}

/* ═══════════════════════════════════════════
   PROFILE VIEW (Tab) — FULL PERFIL
═══════════════════════════════════════════ */
#profile-view {
  display:none;
  padding:0 0 calc(var(--nav-h) + 20px);
  min-height:100vh;
}
#profile-view.active { display:block; }

/* ── Profile Header Card ── */
.profile-card {
  background:var(--bg1);
  border-bottom:1px solid var(--bd);
  margin-bottom:12px;
  position:relative;
}
.profile-cover {
  height:90px;
  background:linear-gradient(135deg,rgba(var(--g-rgb),.18),rgba(var(--cy-rgb),.12));
  background-size:cover; background-position:center;
  position:relative;
  transition:height .25s ease;
}
/* Con portada personalizada: más alta y con un velo para que el texto se lea */
.profile-cover.has-banner { height:130px; }
.profile-cover.has-banner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45));
  pointer-events:none;
}
.profile-cover-edit {
  position:absolute; left:12px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:99px; border:1px solid rgba(255,255,255,.18);
  background:rgba(10,11,15,.55); color:#fff; font-size:.72rem; font-weight:600;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); cursor:pointer;
}
.profile-cover-edit ion-icon { font-size:.95rem; }
.profile-cover-edit:active { transform:scale(.96); }
.pf-banner-preview {
  height:110px; border-radius:12px; margin-bottom:14px;
  background:linear-gradient(135deg,rgba(var(--g-rgb),.18),rgba(var(--cy-rgb),.12));
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  color:var(--txt3); font-size:.8rem; border:1px solid var(--bd);
}
.pf-banner-preview.has-banner span { display:none; }
.pf-btn-danger { background:rgba(255,67,67,.12) !important; color:#ff6b6b !important; border:1px solid rgba(255,67,67,.35) !important; }
.profile-avatar-wrap {
  position:absolute;
  right:1.3rem;
  cursor:pointer;
  top: 25px;
}
.profile-avatar {
  width:110px; height:110px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--cy));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800; color:#000;
  border:3px solid var(--bg1);
  overflow:hidden;
  transition:transform .2s var(--spring);
}
.profile-avatar:active { transform:scale(1.05); }
.profile-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-info { padding:28px 16px 16px; }
.profile-name {
  font-size:1.05rem; font-weight:800;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.profile-bio {
  font-size:.75rem; color:var(--txt3); font-family:var(--ff-mono);
  margin-top:3px; line-height:1.4;
}

/* ── Profile Stats Row ── */
.profile-stats-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; padding:0 12px 12px;
}
.profile-stat-box {
  background:var(--bg2);
  border:1px solid var(--bd);
  border-radius:14px;
  padding:10px;
  text-align:center;
}
.profile-stat-val {
  font-family:var(--ff-disp);
  font-size:1.3rem; letter-spacing:1px;
  color:var(--txt); line-height:1;
}
.profile-stat-lbl {
  font-size:.58rem; color:var(--txt3);
  font-weight:700; letter-spacing:1px;
  text-transform:uppercase; margin-top:3px;
}

/* ── Profile Action Buttons ── */
.profile-actions {
  padding:0 12px 12px;
}
.profile-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.profile-action-btn {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px;
  background:var(--bg1);
  border:1px solid var(--bd);
  border-radius:14px;
  font-size:.85rem; font-weight:600;
  color:var(--txt);
  transition:border-color .18s, background .18s;
  cursor:pointer; width:100%; text-align:left;
}
.profile-action-btn.profile-action-icon-only {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  text-align: center;
}
.profile-action-btn.profile-action-icon-only ion-icon {
  font-size: 1.5rem;
}
.profile-action-btn.profile-action-icon-only span {
  font-size: .72rem;
  font-weight: 600;
  color: var(--txt2);
  white-space: nowrap;
}
.profile-action-btn:active { border-color:var(--bd-g); background:var(--bg2); }
.profile-action-btn ion-icon { font-size:1.2rem; flex-shrink:0; }
.profile-action-btn.red ion-icon { color:#ff4343; }
.profile-action-btn.red:active { border-color:rgba(255,67,67,.3); }

/* ── Fila de limpieza en perfil ── */
.profile-clean-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.profile-clean-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 10px;
  background: var(--bg1);
  border: 1px solid var(--bd);
  border-radius: 12px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--txt3);
  cursor: pointer;
  width: 100%;
  transition: border-color .18s, background .18s, color .18s;
}
.profile-clean-btn ion-icon { font-size: 1rem; flex-shrink: 0; }
.profile-clean-btn:active {
  border-color: rgba(255,67,67,.3);
  background: rgba(255,67,67,.06);
  color: #ff4343;
}

/* ── Perfil Inner Tabs ── */
.perfil-tabs {
  display:flex; gap:0;
  padding:0 12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--bd);
  overflow-x:auto; scrollbar-width:none;
}
.perfil-tab {
  flex-shrink:0;
  padding:10px 14px;
  font-size:.68rem; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--txt3);
  border-bottom:2.5px solid transparent;
  transition:color .18s, border-color .18s;
  display:flex; align-items:center; gap:6px;
  cursor:pointer; white-space:nowrap;
  background:none; border-top:none; border-left:none; border-right:none;
}
.perfil-tab.active { color:var(--g); border-bottom-color:var(--g); }
.perfil-tab ion-icon { font-size:.9rem; }

/* ── Perfil Tab Content ── */
.perfil-tab-content { display:none; padding:0 12px; }
.perfil-tab-content.active { display:block; }

/* ── Upload Form ── */
.pf-section-title {
  display:flex; align-items:center; gap:8px;
  font-size:.7rem; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--txt2);
  margin-bottom:14px; margin-top:4px;
}
.pf-section-title ion-icon { color:var(--g); font-size:.9rem; }
.pf-form-group { margin-bottom:14px; }
.pf-label {
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; color:var(--txt2);
  margin-bottom:7px; text-transform:uppercase; letter-spacing:.5px;
}
.pf-info-icon {
  width:16px; height:16px;
  border-radius:50%;
  background:var(--bg3); border:1px solid var(--bd);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.62rem; color:var(--txt3); font-weight:800;
  cursor:pointer; flex-shrink:0;
  transition:border-color .18s, color .18s;
}
.pf-info-icon:active { border-color:var(--bd-g); color:var(--g); }
.pf-input, .pf-textarea, .pf-select {
  width:100%;
  background:var(--bg2);
  border:1.5px solid var(--bd);
  border-radius:12px;
  padding:11px 14px;
  color:var(--txt);
  font-size:.85rem;
  font-family:var(--ff);
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.pf-input:focus, .pf-textarea:focus, .pf-select:focus {
  border-color:var(--bd-g);
  box-shadow:0 0 0 3px rgba(var(--g-rgb),.08);
}
.pf-input::placeholder, .pf-textarea::placeholder { color:var(--txt3); }
.pf-textarea { resize:none; height:80px; line-height:1.5; }
.pf-select { appearance:none; }
.pf-select option { background:var(--bg2); }
.pf-input.valid { border-color:rgba(var(--g-rgb),.6); }
.pf-input.invalid { border-color:#ff4343; }

/* Category badge */
.pf-cat-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:999px;
  background:var(--cy-dim); border:1px solid rgba(var(--cy-rgb),.2);
  font-size:.6rem; font-weight:800; color:var(--cy);
  letter-spacing:.5px; cursor:pointer; margin-left:6px;
}

/* Tooltip popup */
.pf-tooltip {
  display:none;
  position:fixed; left:12px; right:12px;
  bottom:calc(var(--nav-h) + 12px);
  background:var(--bg1);
  border:1.5px solid var(--bd-g);
  border-radius:18px;
  padding:16px;
  z-index:800;
  box-shadow:0 -4px 40px rgba(0,0,0,.8);
  max-height:60vh; overflow-y:auto;
  animation:btutSlide .3s var(--spring);
}
.pf-tooltip.active { display:block; }
.pf-tooltip-close {
  position:absolute; top:10px; right:12px;
  width:26px; height:26px; border-radius:50%;
  background:var(--bg3); border:1px solid var(--bd);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--txt3); cursor:pointer;
}
.pf-tooltip h4 {
  font-size:.85rem; font-weight:800; color:var(--txt);
  margin-bottom:8px; padding-right:30px;
  display:flex; align-items:center; gap:6px;
}
.pf-tooltip p, .pf-tooltip li {
  font-size:.78rem; color:var(--txt2); line-height:1.5;
}
.pf-tooltip ul, .pf-tooltip ol {
  padding-left:16px; margin:8px 0;
}
.pf-tooltip li { margin-bottom:4px; }
.pf-warn { color:#ffcc00!important; font-weight:700; }
.pf-ok { color:var(--g)!important; font-weight:700; }

/* Preview card */
.pf-preview-card {
  background:var(--bg2);
  border:1px solid var(--bd);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}
.pf-preview-card img {
  width:100%; height:120px; object-fit:cover; display:block;
}
.pf-preview-info { padding:10px 12px; }
.pf-preview-tag {
  font-size:.6rem; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:#000;
  background:var(--g); padding:2px 8px; border-radius:999px;
  display:inline-block; margin-bottom:5px;
}
.pf-preview-title {
  font-size:.85rem; font-weight:700; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Submit button */
.pf-btn-submit {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:50px;
  border-radius:14px;
  background:var(--g); color:#000;
  font-size:.9rem; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase;
  border:none; cursor:pointer;
  transition:opacity .18s, transform .18s;
  position:relative; overflow:hidden;
}
.pf-btn-submit::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
}
.pf-btn-submit:active { opacity:.85; transform:scale(.98); }
.pf-btn-submit ion-icon { font-size:1.1rem; }

/* Items grid (historial / boveda) */
.pf-items-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:10px; padding-bottom:10px;
}
.pf-item-card {
  background:var(--bg2);
  border:1px solid var(--bd);
  border-radius:var(--card-r);
  overflow:hidden;
  position:relative;
  transition:border-color .18s, transform .18s var(--spring);
}
.pf-item-card:active { transform:scale(.97); border-color:var(--bd-g); }
.pf-item-card img {
  width:100%; aspect-ratio:16/9;
  object-fit:cover; display:block;
}
.pf-item-badge {
  position:absolute; top:6px; right:6px;
  padding:2px 8px; border-radius:999px;
  font-size:.58rem; font-weight:800; letter-spacing:.5px;
  backdrop-filter:blur(8px);
  text-transform:uppercase;
}
.pf-item-badge.pending { background:rgba(255,204,0,.18); color:#ffcc00; border:1px solid rgba(255,204,0,.3); }
.pf-item-badge.approved { background:rgba(var(--g-rgb),.15); color:var(--g); border:1px solid rgba(var(--g-rgb),.25); }
.pf-item-info { padding:10px; }
.pf-item-title {
  font-size:.8rem; font-weight:700; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:4px;
}
.pf-item-cat {
  font-size:.6rem; color:var(--cy); font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px;
}
.pf-item-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:4px; margin-bottom:8px;
  padding:7px; background:var(--bg3); border-radius:8px;
}
.pf-item-stat { text-align:center; }
.pf-item-stat-val { font-family:var(--ff-disp); font-size:.85rem; letter-spacing:.5px; color:var(--txt); }
.pf-item-stat-lbl { font-size:.52rem; color:var(--txt3); font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.pf-item-actions { display:flex; gap:6px; }
.pf-btn-action {
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  height:32px; border-radius:9px;
  font-size:.68rem; font-weight:700;
  border:1px solid var(--bd); background:var(--bg3);
  color:var(--txt2); cursor:pointer;
  transition:all .18s;
}
.pf-btn-action:active { border-color:var(--bd-g); color:var(--txt); }
.pf-btn-action.edit:active { border-color:rgba(var(--cy-rgb),.3); color:var(--cy); }
.pf-btn-action.del:active { border-color:rgba(255,67,67,.3); color:#ff4343; }
.pf-btn-action ion-icon { font-size:.85rem; }

/* Boveda item */
.pf-vault-card {
  background:var(--bg2);
  border:1px solid var(--bd);
  border-radius:var(--card-r);
  overflow:hidden;
  transition:border-color .18s;
}
.pf-vault-card:active { border-color:var(--bd-g); }
.pf-vault-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.pf-vault-info { padding:10px; }
.pf-vault-title { font-size:.8rem; font-weight:700; color:var(--txt); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-vault-user { font-size:.65rem; color:var(--g); font-weight:600; margin-bottom:8px; }
.pf-vault-actions { display:flex; gap:6px; }
.pf-vault-btn {
  flex:1; height:32px; border-radius:9px;
  font-size:.68rem; font-weight:700;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px;
  transition:opacity .18s;
}
.pf-vault-btn:active { opacity:.75; }
.pf-vault-btn.access { background:var(--g); color:#000; }
.pf-vault-btn.remove { background:rgba(255,67,67,.15); color:#ff4343; border:1px solid rgba(255,67,67,.2); }

/* Reportes */
.pf-reporte-card {
  background:var(--bg2);
  border-radius:14px;
  border:1px solid var(--bd);
  padding:14px;
  margin-bottom:10px;
  border-left:3px solid var(--g);
}
.pf-reporte-title { font-size:.88rem; font-weight:700; color:var(--txt); margin-bottom:4px; }
.pf-reporte-date { font-size:.65rem; color:var(--txt3); font-family:var(--ff-mono); margin-bottom:10px; }
.pf-reporte-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:999px;
  font-size:.62rem; font-weight:800;
  background:rgba(255,67,67,.12); color:#ff4343;
  border:1px solid rgba(255,67,67,.2);
}
.pf-reporte-motivos {
  display:flex; gap:12px; flex-wrap:wrap;
  padding:10px; background:var(--bg3); border-radius:10px;
  margin:10px 0;
}
.pf-reporte-motivo {
  display:flex; align-items:center; gap:5px;
  font-size:.72rem; color:var(--txt2);
}
.pf-reporte-motivo ion-icon { font-size:1rem; }
.pf-reporte-tip {
  font-size:.72rem; color:var(--txt3); line-height:1.5;
  padding:8px; background:var(--bg3); border-radius:8px;
  margin:8px 0;
}
.pf-reporte-ver {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; height:36px; border-radius:10px;
  background:var(--g); color:#000;
  font-size:.75rem; font-weight:800;
  border:none; cursor:pointer; margin-top:6px;
}

/* Economia card */
.pf-economia {
  background:var(--bg1);
  border:1px solid var(--bd-g);
  border-radius:18px;
  padding:16px;
  margin-bottom:12px;
}
.pf-economia-title {
  display:flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:800; color:var(--g);
  letter-spacing:2px; text-transform:uppercase;
  margin-bottom:14px;
}
.pf-economia-title ion-icon { font-size:1.1rem; }
.pf-saldo-box {
  background:rgba(var(--g-rgb),.05);
  border:1px solid rgba(var(--g-rgb),.15);
  border-radius:14px;
  padding:14px; text-align:center; margin-bottom:12px;
}
.pf-saldo-lbl { font-size:.62rem; color:var(--txt3); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.pf-saldo-val {
  font-family:var(--ff-disp); font-size:2rem;
  letter-spacing:1px; color:var(--g);
  text-shadow:0 0 16px rgba(var(--g-rgb),.35); line-height:1;
  transition: color .3s;
}
.pf-saldo-cur { font-size:.62rem; color:var(--txt3); font-weight:700; margin-top:3px; }
.pf-eco-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.pf-eco-stat { background:var(--bg2); border-radius:10px; padding:10px; text-align:center; }
.pf-eco-stat-val { font-family:var(--ff-disp); font-size:1.3rem; color:var(--g); line-height:1; }
.pf-eco-stat-lbl { font-size:.58rem; color:var(--txt3); font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-top:3px; }
.pf-eco-warn {
  display:flex; align-items:center; gap:8px;
  padding:10px; background:rgba(255,204,0,.08);
  border:1px solid rgba(255,204,0,.2); border-radius:10px;
  font-size:.72rem; color:#ffcc00; margin-bottom:12px;
}
.pf-eco-warn ion-icon { font-size:1.1rem; flex-shrink:0; }
.pf-paypal-row { display:flex; gap:8px; margin-bottom:12px; }
.pf-paypal-input {
  flex:1; background:var(--bg2); border:1.5px solid var(--bd);
  border-radius:12px; padding:10px 14px;
  color:var(--txt); font-size:.82rem; font-family:var(--ff);
  outline:none; transition:border-color .2s;
}
.pf-paypal-input:focus { border-color:var(--bd-g); }
.pf-paypal-input::placeholder { color:var(--txt3); }
.pf-paypal-save {
  padding:10px 16px; border-radius:12px;
  background:var(--g); color:#000;
  font-size:.72rem; font-weight:800; border:none; cursor:pointer;
  transition:opacity .18s; white-space:nowrap;
}
.pf-paypal-save:active { opacity:.75; }
.pf-solicitar-btn {
  width:100%; height:48px; border-radius:14px;
  font-size:.85rem; font-weight:800; border:none;
  cursor:not-allowed; transition:all .2s;
  background:var(--bg3); color:var(--txt3);
}
.pf-solicitar-btn.enabled {
  background:var(--g); color:#000; cursor:pointer;
}
.pf-solicitar-btn.enabled:active { opacity:.85; transform:scale(.98); }
.pf-eco-pending {
  display:flex; align-items:center; gap:8px;
  padding:10px; background:rgba(var(--g-rgb),.08);
  border:1px solid rgba(var(--g-rgb),.2); border-radius:10px;
  font-size:.72rem; color:var(--g); margin-top:10px;
}
.pf-eco-info {
  padding:10px; background:var(--bg2); border-radius:10px;
  font-size:.65rem; color:var(--txt3); line-height:1.6;
  margin-top:10px; font-family:var(--ff-mono);
}

/* ── Tarjetas ── */
.pf-eco-divider {
  display:flex; align-items:center; gap:8px;
  font-size:.62rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--txt3); margin:16px 0 10px;
}
.pf-eco-divider::before,.pf-eco-divider::after {
  content:''; flex:1; height:1px; background:rgba(255,255,255,.07);
}
.pf-tarjetas-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.pf-tarjetas-hint { font-size:.62rem; color:var(--txt3); }
.pf-add-tarjeta-btn {
  display:flex; align-items:center; gap:4px;
  background:rgba(var(--cy-rgb),.12); border:1px solid rgba(var(--cy-rgb),.3);
  color:var(--cy); border-radius:8px; padding:6px 10px;
  font-size:.65rem; font-weight:700; letter-spacing:.5px; cursor:pointer;
  transition:background .15s;
}
.pf-add-tarjeta-btn:active { background:rgba(var(--cy-rgb),.22); }
.pf-tarjetas-empty {
  text-align:center; padding:18px 0; color:var(--txt3);
  font-size:.72rem; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pf-tarjetas-empty ion-icon { font-size:2rem; opacity:.4; }
/* Tarjeta individual */
.pf-tarjeta-card {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg2); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:10px 12px; margin-bottom:8px;
  transition:border-color .2s;
}
.pf-tarjeta-card.principal {
  border-color:rgba(255,204,0,.35); background:rgba(255,204,0,.05);
}
.pf-tarjeta-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.pf-tarjeta-logo {
  width:40px; height:26px; border-radius:5px; display:flex;
  align-items:center; justify-content:center; font-size:.6rem;
  font-weight:900; letter-spacing:.5px; flex-shrink:0; background:var(--bg3);
  color:var(--txt3);
}
.pf-tarjeta-logo--visa       { background:#1a1f71; color:#fff; }
.pf-tarjeta-logo--mastercard { background:#252525; color:#eb001b; }
.pf-tarjeta-logo--amex       { background:#007bc1; color:#fff; }
.pf-tarjeta-info { flex:1; min-width:0; }
.pf-tarjeta-num  { font-family:var(--ff-mono); font-size:.75rem; color:var(--txt1); letter-spacing:1px; }
.pf-tarjeta-titular { font-size:.62rem; color:var(--txt3); margin-top:1px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-tarjeta-meta { display:flex; gap:8px; align-items:center; margin-top:3px; flex-wrap:wrap; }
.pf-tarjeta-exp  { font-size:.6rem; color:var(--txt3); font-family:var(--ff-mono); }
.pf-tarjeta-alias { font-size:.6rem; color:var(--cy); margin-top:2px; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-tarjeta-prop {
  font-size:.55rem; font-weight:800; letter-spacing:.5px; padding:1px 5px;
  border-radius:4px; text-transform:uppercase;
}
.pf-tarjeta-prop--ambos  { background:rgba(var(--cy-rgb),.12); color:var(--cy); }
.pf-tarjeta-prop--cobros { background:rgba(var(--g-rgb),.12);  color:var(--g); }
.pf-tarjeta-prop--pagos  { background:rgba(255,204,0,.12);  color:#ffcc00; }
.pf-tarjeta-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; margin-left:8px; }
.pf-tarjeta-btn {
  background:none; border:1px solid rgba(255,255,255,.1); border-radius:7px;
  padding:5px 7px; color:var(--txt3); cursor:pointer; font-size:.9rem;
  display:flex; align-items:center; transition:all .15s;
}
.pf-tarjeta-btn.del-btn:active     { border-color:rgba(255,67,67,.5); color:#ff4343; }
.pf-tarjeta-btn.principal-btn:active { border-color:rgba(255,204,0,.5); color:#ffcc00; }
.pf-tarjeta-principal-badge { color:#ffcc00; font-size:1rem; display:flex; align-items:center; }
/* Formulario agregar tarjeta */
.pf-tarjeta-form {
  background:var(--bg2); border:1px solid rgba(var(--cy-rgb),.15);
  border-radius:14px; padding:14px; margin-top:4px; margin-bottom:8px;
}
.pf-tarjeta-form-title {
  font-size:.72rem; font-weight:800; letter-spacing:1px; color:var(--cy);
  display:flex; align-items:center; gap:6px; margin-bottom:12px;
}
.pf-card-num-wrap { position:relative; display:flex; align-items:center; }
.pf-card-num-input { padding-right:64px !important; }
.pf-tipo-badge {
  position:absolute; right:10px; font-size:.58rem; font-weight:900;
  letter-spacing:.5px; padding:2px 6px; border-radius:4px; pointer-events:none;
}
.pf-tipo-badge--visa       { background:#1a1f71; color:#fff; }
.pf-tipo-badge--mastercard { background:#252525; color:#eb001b; }
.pf-tipo-badge--amex       { background:#007bc1; color:#fff; }
.pf-tipo-badge--otro       { background:var(--bg3); color:var(--txt3); }
.pf-card-hint { font-size:.6rem; color:var(--txt3); margin-top:3px; display:block; }
.pf-card-row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pf-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:30px !important; cursor:pointer;
}

/* Modals de perfil */
.pf-modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.8); backdrop-filter:blur(8px);
  z-index:900; display:flex; align-items:flex-end;
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.pf-modal-overlay.show { opacity:1; visibility:visible; }
.pf-modal-sheet {
  width:100%; max-width:520px; margin:0 auto;
  background:var(--bg1);
  border-radius:24px 24px 0 0;
  padding:0 0 env(safe-area-inset-bottom);
  transform:translateY(100%);
  transition:transform .4s var(--spring);
  max-height:90dvh; overflow-y:auto;
}
.pf-modal-overlay.show .pf-modal-sheet { transform:translateY(0); }
.pf-modal-handle {
  width:36px; height:4px; background:var(--bg3);
  border-radius:999px; margin:12px auto 0;
}
.pf-modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--bd);
}
.pf-modal-hdr-title {
  font-size:.95rem; font-weight:800;
  display:flex; align-items:center; gap:8px;
}
.pf-modal-hdr-title ion-icon { color:var(--g); }
.pf-modal-close {
  width:30px; height:30px; border-radius:50%;
  background:var(--bg3); border:1px solid var(--bd);
  display:flex; align-items:center; justify-content:center;
  color:var(--txt2); font-size:.9rem; cursor:pointer;
}
.pf-modal-body { padding:16px 20px 20px; }

/* Settings tabs */
.pf-stabs { display:flex; border-bottom:1px solid var(--bd); margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
.pf-stabs::-webkit-scrollbar { display:none; }
.pf-stab {
  flex-shrink:0; padding:12px 16px; text-align:center;
  font-size:.76rem; font-weight:700; color:var(--txt3);
  border-bottom:2.5px solid transparent; cursor:pointer;
  background:none; border-top:none; border-left:none; border-right:none;
  white-space:nowrap;
  transition:color .18s, border-color .18s;
}
.pf-stab.active { color:var(--g); border-bottom-color:var(--g); }
.pf-scontent { display:none; }
.pf-scontent.active { display:block; }

/* ── Social links row (bajo la bio) ── */
.profile-social-links {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.pf-social-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--bd);
  font-size: 1.05rem;
  transition: transform .2s var(--spring), background .2s;
}
.pf-social-icon-btn:hover { transform: scale(1.15); background: var(--bg2); }

/* ── Settings: hints y cooldown badge ── */
.pf-settings-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .73rem;
  color: var(--txt2);
  line-height: 1.5;
  margin-bottom: 14px;
}
.pf-settings-hint ion-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.pf-cooldown-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,160,0,.1);
  border: 1px solid rgba(255,160,0,.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .73rem;
  color: #ffcc44;
  font-weight: 600;
  margin-bottom: 14px;
}
.pf-cooldown-badge ion-icon { font-size: 1rem; }

/* ── Social link input rows ── */
.pf-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pf-link-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: background .2s;
}
.pf-link-input { flex: 1; margin-bottom: 0 !important; }

/* ══ Panel de Recuperación de Cuenta ══ */
.pf-stab--repair { color: #ff9800 !important; }
.pf-stab--repair.active { color: #ff9800 !important; border-bottom-color: #ff9800 !important; }

.pf-repair-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,152,0,.07);
  border: 1px solid rgba(255,152,0,.25);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.pf-btn-detect {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
  border: 1.5px dashed var(--bd-g);
  background: var(--bg2);
  color: var(--g);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.pf-btn-detect:hover { background: var(--bg3); }
.pf-btn-detect:disabled { opacity: .5; cursor: not-allowed; }

.pf-repair-divider {
  text-align: center;
  font-size: .7rem;
  color: var(--txt3);
  margin: 14px 0;
}
.pf-avatar-preview {
  width:120px; height:120px; border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--cy));
  margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; font-weight:800; color:#000;
  overflow:hidden; border:2.5px solid var(--g);
}
.pf-avatar-preview img { width:100%; height:100%; object-fit:cover; }
.pf-btn-save {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:46px; border-radius:13px;
  background:var(--g); color:#000;
  font-size:.88rem; font-weight:800;
  border:none; cursor:pointer; margin-top:14px;
  transition:opacity .18s; position:relative; overflow:hidden;
}
.pf-btn-save::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15),transparent); }
.pf-btn-save:active { opacity:.8; }

/* Category info grid */
.pf-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pf-cat-info {
  background:var(--bg2); border:1px solid var(--bd);
  border-radius:12px; padding:12px;
}
.pf-cat-info h4 {
  font-size:.72rem; font-weight:800; color:var(--g);
  margin-bottom:5px; display:flex; align-items:center; gap:4px;
}
.pf-cat-info p { font-size:.68rem; color:var(--txt3); line-height:1.4; }
.pf-warning-box {
  grid-column:1/-1; background:rgba(255,204,0,.06);
  border:1px solid rgba(255,204,0,.2); border-radius:12px; padding:12px;
}
.pf-warning-box h4 { font-size:.72rem; font-weight:800; color:#ffcc00; margin-bottom:5px; display:flex; align-items:center; gap:4px; }
.pf-warning-box p { font-size:.68rem; color:var(--txt3); line-height:1.4; }

/* Not logged state */
.profile-not-logged {
  text-align:center; padding:60px 20px; color:var(--txt3);
}
.profile-not-logged ion-icon { font-size:3.5rem; color:var(--txt3); }
.profile-not-logged h3 { font-size:1rem; font-weight:700; color:var(--txt2); margin-top:12px; }
.profile-not-logged p { font-size:.82rem; margin-top:6px; line-height:1.5; }
.btn-login-action {
  margin-top:20px; display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; background:var(--g); color:#000;
  border-radius:14px; font-size:.88rem; font-weight:800; letter-spacing:.3px;
}
.pf-empty {
  text-align:center; padding:40px 20px; color:var(--txt3);
}
.pf-empty ion-icon { font-size:2.5rem; opacity:.4; }
.pf-empty p { font-size:.82rem; margin-top:10px; }

/* Reportes info box */
.pf-info-box {
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:12px; margin-bottom:12px;
  background:rgba(var(--cy-rgb),.05); border:1px solid rgba(var(--cy-rgb),.15);
}
.pf-info-box ion-icon { font-size:1.3rem; color:var(--cy); flex-shrink:0; }
.pf-info-box h4 { font-size:.78rem; font-weight:800; color:var(--cy); margin-bottom:4px; }
.pf-info-box p { font-size:.72rem; color:var(--txt3); line-height:1.5; }

/* ═══════════════════════════════════════════
   FAVORITES VIEW (Tab)
═══════════════════════════════════════════ */
#favs-view {
  display:none;
  padding:20px 12px calc(var(--nav-h) + 20px);
}
#favs-view.active { display:block; }
.favs-header {
  font-size:.75rem;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--txt2);
  margin-bottom:16px;
  display:flex; align-items:center; gap:6px;
}
.favs-header ion-icon { color:#ff4d6a; }
#favs-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* ═══════════════════════════════════════════
   CUSTOM CONFIRM DIALOG
═══════════════════════════════════════════ */
#custom-confirm {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s;
}
#custom-confirm.show { opacity:1; visibility:visible; }
.cc-box {
  background:var(--bg1);
  border:1px solid var(--bd);
  border-radius:20px;
  padding:24px 20px 20px;
  width:100%; max-width:320px;
  box-shadow:0 24px 60px rgba(0,0,0,.8);
  transform:scale(.92);
  transition:transform .25s var(--spring);
}
#custom-confirm.show .cc-box { transform:scale(1); }
.cc-icon { font-size:2rem; text-align:center; margin-bottom:10px; }
.cc-title {
  font-size:.95rem; font-weight:800; color:var(--txt);
  text-align:center; margin-bottom:8px;
}
.cc-msg {
  font-size:.8rem; color:var(--txt2); text-align:center;
  line-height:1.5; margin-bottom:18px;
}
.cc-btns { display:flex; gap:10px; }
.cc-btn {
  flex:1; height:44px; border-radius:12px;
  font-size:.82rem; font-weight:800; border:none; cursor:pointer;
  transition:opacity .18s;
}
.cc-btn:active { opacity:.75; }
.cc-btn.cancel { background:var(--bg3); color:var(--txt2); border:1px solid var(--bd); }
.cc-btn.confirm { background:var(--g); color:#000; }
.cc-btn.confirm.danger { background:#ff4343; color:#fff; }

/* Responsive tweaks */
@media (max-width:380px) {
  .sheet-stats { grid-template-columns:1fr 1fr; }
  .stat-box:last-child { grid-column:1/-1; }
}
@media (min-width:600px) {
  #output { grid-template-columns:1fr 1fr 1fr; }
  #favs-grid { grid-template-columns:1fr 1fr 1fr; }
}
/* ═══════════════════════════════════════════
   ECONOMIA VIEW — vista independiente
═══════════════════════════════════════════ */
#economia-view {
  display: none;
  padding: 12px 12px calc(var(--nav-h) + 24px);
  min-height: 100vh;
}
#economia-view.active { display: block; }
#economia-view .pf-economia-title { display: none; }
#economia-view .pf-economia { padding: 0; }

/* ═══════════════════════════════════════════════════════════
   FORMULARIO DINÁMICO POR CATEGORÍA
═══════════════════════════════════════════════════════════ */

/* Category selector grid */
.pf-cat-selector {
  margin: 0 0 18px;
  padding: 14px 14px 16px;
  background: var(--bg1);
  border: 1px solid var(--bd);
  border-radius: var(--card-r);
}
.pf-cat-selector-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .65rem; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--txt3);
  margin-bottom: 12px;
}
.pf-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pf-cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px;
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  border-radius: 14px;
  color: var(--txt3);
  font-size: .62rem; font-weight: 700; letter-spacing: .3px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.pf-cat-btn ion-icon { font-size: 1.3rem; }
.pf-cat-btn.active {
  background: var(--g-dim);
  border-color: var(--g);
  color: var(--g);
}
.pf-cat-btn:active { transform: scale(.95); }
.pf-cat-btn-video.active {
  background: rgba(var(--cy-rgb),.1);
  border-color: var(--cy);
  color: var(--cy);
}

/* Form section header */
.pf-form-section-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--g);
  margin-bottom: 16px; margin-top: 4px;
  padding: 10px 12px;
  background: var(--g-dim);
  border: 1px solid rgba(var(--g-rgb),.2);
  border-radius: 12px;
}
.pf-form-section-hdr ion-icon { font-size: 1rem; }
.pf-form-section-hdr--video {
  color: var(--cy);
  background: var(--cy-dim);
  border-color: rgba(var(--cy-rgb),.2);
}

/* ── Video type selector ── */
.pf-vid-type-grid {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 4px;
}
.pf-vid-type-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  border-radius: 999px;
  color: var(--txt3);
  font-size: .72rem; font-weight: 700;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.pf-vid-type-btn ion-icon { font-size: .9rem; }
.pf-vid-type-btn.active {
  background: var(--cy-dim);
  border-color: var(--cy);
  color: var(--cy);
}

/* ── Cloudinary Upload Zone ── */
.pf-cloudinary-zone {
  background: var(--bg2);
  border: 2px dashed rgba(var(--cy-rgb),.3);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s;
}
.pf-cloudinary-zone:hover { border-color: rgba(var(--cy-rgb),.6); }
.pf-cld-idle {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 20px; gap: 8px; text-align: center;
}
.pf-cld-idle ion-icon {
  font-size: 2.5rem; color: var(--cy); opacity: .5;
}
.pf-cld-idle p {
  font-size: .82rem; font-weight: 600; color: var(--txt2);
}
.pf-cld-idle span {
  font-size: .68rem; color: var(--txt3);
}
.pf-cld-btn {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px;
  padding: 11px 22px;
  background: var(--cy);
  color: #000;
  font-size: .82rem; font-weight: 800; letter-spacing: .5px;
  border-radius: 12px; border: none; cursor: pointer;
  transition: opacity .18s, transform .18s;
}
.pf-cld-btn:active { opacity: .8; transform: scale(.97); }
.pf-cld-btn ion-icon { font-size: 1rem; }

.pf-cld-uploading {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 20px; gap: 12px;
}
.pf-cld-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(var(--cy-rgb),.2);
  border-top-color: var(--cy);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pf-cld-uploading p { font-size: .82rem; color: var(--cy); font-weight: 700; }
.pf-cld-progress-bar {
  width: 80%; height: 4px;
  background: var(--bg3); border-radius: 4px; overflow: hidden;
}
.pf-cld-progress-fill {
  height: 100%; width: 0%;
  background: var(--cy);
  border-radius: 4px;
  transition: width .3s var(--ease);
}

.pf-cld-done {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 14px; gap: 6px;
}
.pf-cld-done-label { font-size: .82rem; font-weight: 700; color: var(--g); }
.pf-cld-change-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: var(--bg3); border: 1px solid var(--bd);
  border-radius: 999px; color: var(--txt3);
  font-size: .72rem; font-weight: 700; cursor: pointer;
  margin-top: 4px;
  transition: border-color .18s, color .18s;
}
.pf-cld-change-btn:hover { border-color: var(--g); color: var(--g); }

/* ── Video preview card ── */
.pf-video-preview-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.pf-vpc-thumb {
  position: relative; width: 100%; height: 130px;
}
.pf-vpc-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pf-vpc-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
}
.pf-vpc-play ion-icon { font-size: 2.5rem; color: #fff; opacity: .9; }
.pf-vpc-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--cy); color: #000;
  font-size: .58rem; font-weight: 800; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 999px;
}
.pf-vpc-info { padding: 10px 12px; }
.pf-vpc-type {
  font-size: .6rem; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--cy);
  margin-bottom: 4px;
}
.pf-vpc-title {
  font-size: .85rem; font-weight: 700; color: var(--txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Video submit button variant */
.pf-btn-submit--video {
  background: linear-gradient(135deg, var(--cy), #0084ff);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   TILE EXTRAS — badges de info por categoría
═══════════════════════════════════════════════════════════ */

/* Fila de badges extra debajo del tile-cat */
.tile-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}

.tile-extra-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 700;
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.tile-extra-badge ion-icon {
  font-size: .7rem;
  flex-shrink: 0;
  color: var(--txt3);
}

/* Colores de badge según categoría */
.game-tile[data-id] .tile-cat { color: var(--cy); }

/* Juego — verde */
.tile-cat-juego, .game-tile--juego .tile-extra-badge {
  border-color: rgba(var(--g-rgb),.2);
  color: var(--g);
}
.game-tile--juego .tile-extra-badge ion-icon { color: var(--g); }

/* Video — cyan especial */
.tile-cat--video {
  color: var(--cy) !important;
}

/* ─── VIDEO CARD — Full width, YouTube-style vertical ─── */
#output .game-tile--video {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  border-color: rgba(var(--cy-rgb),.15);
  background: var(--bg1);
}
#output .game-tile--video .thumb-wrap {
  width: 100%;
  max-width: none;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  border-radius: var(--card-r) var(--card-r) 0 0;
  overflow: hidden;
  position: relative;
}
#output .game-tile--video .thumb-wrap img,
#output .game-tile--video .thumb-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s var(--ease);
}
#output .game-tile--video .tile-info.tile-info--yt {
  flex: unset;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: unset;
}
.tile-yt-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--cy),var(--g));
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  font-weight: 900;
  color: #000;
  flex-shrink: 0;
  margin-top: 1px;
}
.tile-yt-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#output .game-tile--video .tile-title {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--txt);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-yt-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.tile-yt-meta .tile-user {
  font-size: .72rem;
  color: var(--txt2);
  font-weight: 500;
  white-space: nowrap;
  overflow: visible;
}
.tile-yt-dot {
  color: var(--txt3);
  font-size: .75rem;
  line-height: 1;
}
.tile-yt-views {
  font-size: .69rem;
  color: var(--txt3);
  display: flex; align-items: center; gap: 3px;
}
.tile-yt-views ion-icon { font-size: .75rem; }
.tile-yt-likes {
  font-size: .69rem;
  color: #ff4d6a;
  display: flex; align-items: center; gap: 3px;
}
.tile-yt-likes ion-icon { font-size: .75rem; }

/* Badge de tipo (Tutorial, Gameplay, etc.) */
.tile-vid-type-badge {
  position: absolute;
  bottom: 7px; right: 7px;
  background: rgba(0,0,0,.75);
  color: var(--cy);
  font-size: .58rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .4px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Hover effect */
#output .game-tile--video:active { border-color: rgba(var(--cy-rgb),.45); }

/* Tile-video-player stub (no longer used pero por compatibilidad) */
.tile-video-player { display: none !important; }

/* ─── HIST SUB-NAV sticky ─── */
.hist-subnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
  margin: -12px -12px 12px;
  padding: 0 4px;
  gap: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hist-subnav-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--txt2);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  padding: 10px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: color .15s, border-color .15s;
}
.hist-subnav-tab.active {
  color: var(--cy);
  border-bottom-color: var(--cy);
}
.hist-subnav-tab ion-icon { font-size: .9rem; }
.hist-subnav-count {
  background: rgba(var(--cy-rgb),.15);
  color: var(--cy);
  font-size: .6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(var(--cy-rgb),.25);
}
.hist-panel { padding-top: 4px; }

.game-tile--video {
  border-color: rgba(var(--cy-rgb),.15);
}
.game-tile--video .tile-extra-badge {
  background: rgba(var(--cy-rgb),.07);
  border-color: rgba(var(--cy-rgb),.2);
  color: var(--cy);
}
.game-tile--video .tile-extra-badge ion-icon { color: var(--cy); }

/* Video overlay — icono play sobre la imagen */
.tile-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.28);
  pointer-events: none;
}
.tile-video-overlay ion-icon {
  font-size: 2.4rem;
  color: rgba(255,255,255,.9);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

/* Video type badge — esquina inferior izquierda de la imagen */
.tile-video-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 8px;
  background: rgba(var(--cy-rgb),.85);
  color: #000;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Mod — naranja */
.game-tile--mod .tile-cat { color: #ff9f43; }
.game-tile--mod .tile-extra-badge {
  border-color: rgba(255,159,67,.2);
  color: #ff9f43;
}
.game-tile--mod .tile-extra-badge ion-icon { color: #ff9f43; }

/* Apps — púrpura */
.game-tile--apps .tile-cat { color: #a29bfe; }
.game-tile--apps .tile-extra-badge {
  border-color: rgba(162,155,254,.2);
  color: #a29bfe;
}
.game-tile--apps .tile-extra-badge ion-icon { color: #a29bfe; }

/* Software — azul */
.game-tile--software .tile-cat { color: #74b9ff; }
.game-tile--software .tile-extra-badge {
  border-color: rgba(116,185,255,.2);
  color: #74b9ff;
}
.game-tile--software .tile-extra-badge ion-icon { color: #74b9ff; }

/* Optimizacion — amarillo */
.game-tile--optimizacion .tile-cat { color: #fdcb6e; }
.game-tile--optimizacion .tile-extra-badge {
  border-color: rgba(253,203,110,.2);
  color: #fdcb6e;
}
.game-tile--optimizacion .tile-extra-badge ion-icon { color: #fdcb6e; }

/* Ajustes — gris azulado */
.game-tile--ajustes .tile-cat { color: #b2bec3; }
.game-tile--ajustes .tile-extra-badge {
  border-color: rgba(178,190,195,.2);
  color: #b2bec3;
}
.game-tile--ajustes .tile-extra-badge ion-icon { color: #b2bec3; }

/* ── Historial: header sección videos ── */
.pf-hist-vid-hdr {
  display:flex; align-items:center; gap:7px;
  font-size:.68rem; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--cy);
  padding:10px 12px; margin:14px 0 10px;
  background:rgba(var(--cy-rgb),.08);
  border:1px solid rgba(var(--cy-rgb),.2);
  border-radius:12px;
}
.pf-hist-vid-hdr ion-icon { font-size:1rem; }
.pf-hist-vid-count {
  margin-left:auto;
  background:rgba(var(--cy-rgb),.15);
  color:var(--cy);
  font-size:.6rem; font-weight:800;
  padding:2px 8px; border-radius:999px;
}
.pf-item-card--video { border-color:rgba(var(--cy-rgb),.15); }

/* ── Fila de entrada destacada en historial de videos ── */
.pf-vid-featured-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin: 4px 0 2px;
  background: rgba(var(--cy-rgb),.06);
  border: 1px solid rgba(var(--cy-rgb),.14);
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   BADGE DE DURACIÓN EN THUMBNAIL (punto 11)
═══════════════════════════════════════════════════════════ */
.tile-duration-badge {
  position: absolute;
  bottom: 6px; right: 6px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  font-family: var(--ff-mono);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .3px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════════
   MODO TEATRO (punto 12)
═══════════════════════════════════════════════════════════ */
#theater-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.96);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
#theater-overlay.open {
  opacity: 1;
  visibility: visible;
}
#theater-player-wrap {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
  margin-top: env(safe-area-inset-top);
}
#theater-player-wrap iframe,
#theater-player-wrap video {
  width: 100%; height: 100%;
  border: none;
  display: block;
}
#theater-info {
  width: 100%;
  max-width: 900px;
  padding: 14px 16px 20px;
  overflow-y: auto;
  flex: 1;
}
#theater-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 4px;
}
#theater-meta {
  font-size: .75rem;
  color: var(--txt3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#theater-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  z-index: 10;
  transition: background .2s;
}
#theater-close:active { background: rgba(255,255,255,.25); }

/* Botón teatro en el sheet — se agrega junto al de fullscreen */
#ds-btn-theater {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 20;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--cy-rgb),.35);
  border-radius: 8px;
  color: var(--cy);
  font-size: 1.05rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity .15s;
}
#ds-btn-theater:active { opacity: .7; }

/* ═══════════════════════════════════════════════════════════
   AUTOPLAY PANEL — siguiente video (punto 6)
═══════════════════════════════════════════════════════════ */
#autoplay-panel {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  border-radius: 16px;
}
#autoplay-panel.show {
  opacity: 1;
  visibility: visible;
}
.autoplay-countdown {
  font-family: var(--ff-disp);
  font-size: 2.2rem;
  color: var(--cy);
  letter-spacing: 2px;
  line-height: 1;
}
.autoplay-label {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.autoplay-next-title {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  max-width: 80%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.autoplay-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.autoplay-btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  border: 1.5px solid;
  transition: opacity .15s;
}
.autoplay-btn:active { opacity: .75; }
.autoplay-btn--play {
  background: var(--cy);
  border-color: var(--cy);
  color: #000;
}
.autoplay-btn--cancel {
  background: transparent;
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.7);
}
/* Miniaturas de videos relacionados */
.autoplay-related {
  display: flex;
  gap: 8px;
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.autoplay-related::-webkit-scrollbar { display: none; }
.autoplay-rel-thumb {
  flex-shrink: 0;
  width: 88px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.autoplay-rel-thumb:first-child { border-color: var(--cy); }
.autoplay-rel-thumb img {
  width: 100%; height: 50px;
  object-fit: cover;
  display: block;
}
.autoplay-rel-thumb span {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════════════════════════
   TOAST VISTA REGISTRADA (punto 10)
═══════════════════════════════════════════════════════════ */
.toast-vista {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(var(--cy-rgb),.15);
  border: 1px solid rgba(var(--cy-rgb),.35);
  color: var(--cy);
  font-size: .75rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  z-index: 2000;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.toast-vista.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════
   FEATURED ENTRY — Selector (Formulario Video)
═══════════════════════════════════════════ */

/* Buscador */
.pf-featured-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  transition: border-color .2s;
}
.pf-featured-search-wrap:focus-within {
  border-color: rgba(var(--cy-rgb),.4);
}
.pf-featured-search-wrap ion-icon {
  color: var(--txt3);
  font-size: 1rem;
  flex-shrink: 0;
}
.pf-featured-search {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--txt);
  font-size: .83rem;
  font-family: var(--ff);
}
.pf-featured-search::placeholder { color: var(--txt3); }

/* Lista desplegable */
.pf-featured-list {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg2);
}
.pf-featured-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  color: var(--txt3);
  font-size: .75rem;
}
.pf-featured-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--bd);
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.pf-featured-item:last-child { border-bottom: none; }
.pf-featured-item:active,
.pf-featured-item:hover { background: var(--bg3); }
.pf-featured-item img {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--bg3);
}
.pf-featured-item-info { flex: 1; min-width: 0; }
.pf-featured-item-cat {
  font-size: .6rem;
  font-weight: 700;
  color: var(--cy);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 2px;
}
.pf-featured-item-title {
  font-size: .78rem;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-featured-item-add {
  color: var(--cy);
  font-size: 1.15rem;
  flex-shrink: 0;
  opacity: .7;
}

/* Item seleccionado */
.pf-featured-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(var(--cy-rgb),.06);
  border: 1px solid rgba(var(--cy-rgb),.25);
  border-radius: 10px;
  margin-bottom: 8px;
  animation: featSelIn .2s var(--spring);
}
@keyframes featSelIn {
  from { opacity:0; transform:translateY(-4px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
.pf-featured-selected img {
  width: 58px;
  height: 40px;
  object-fit: cover;
  border-radius: 7px;
  flex-shrink: 0;
  background: var(--bg3);
}
.pf-featured-sel-info { flex: 1; min-width: 0; }
.pf-featured-sel-cat {
  font-size: .6rem;
  font-weight: 700;
  color: var(--cy);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 2px;
}
.pf-featured-sel-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-featured-sel-clear {
  color: var(--txt3);
  font-size: 1.35rem;
  flex-shrink: 0;
  padding: 4px;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.pf-featured-sel-clear:active { color: #ff4343; }

/* ═══════════════════════════════════════════
   FEATURED ENTRY — Detail Sheet (card debajo de la descripción)
═══════════════════════════════════════════ */
#ds-featured-entry {
  padding: 0 16px 4px;
}

.ds-featured-entry {
  margin-bottom: 4px;
}

.ds-featured-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .67rem;
  font-weight: 800;
  color: var(--cy);
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 8px;
  opacity: .85;
}

.ds-featured-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 15px;
  background: var(--bg2);
  border: 1px solid rgba(var(--cy-rgb),.14);
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* Barra lateral cyan */
.ds-featured-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cy), rgba(var(--cy-rgb),.3));
  border-radius: 3px 0 0 3px;
}
.ds-featured-card:active {
  background: var(--bg3);
  border-color: rgba(var(--cy-rgb),.3);
  transform: scale(.985);
}
.ds-featured-card img {
  width: 74px;
  height: 52px;
  object-fit: cover;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--bg3);
}
.ds-featured-info {
  flex: 1;
  min-width: 0;
}
.ds-featured-cat {
  font-size: .6rem;
  font-weight: 700;
  color: var(--cy);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 3px;
}
.ds-featured-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.ds-featured-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  color: var(--txt3);
}
.ds-featured-meta ion-icon {
  font-size: .78rem;
}
.ds-featured-arrow {
  color: rgba(var(--cy-rgb),.6);
  font-size: 1.1rem;
  flex-shrink: 0;
}



/* ══════════════════════════════════════════════════════════════
   🎮 SISTEMA DE DETECCIÓN DE JUEGOS — ESTILOS
   ══════════════════════════════════════════════════════════════ */

/* Wrapper: dos botones lado a lado, misma altura */
.ds-action-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 0;
}

/* Botón OBTENER LINK — mismo alto que COMPRAR */
.ds-action-wrap .sheet-download {
  margin-top: 0;
  margin-bottom: 0;
  height: 52px;
  font-size: .82rem;
  padding: 0 10px;
  border-radius: 16px;
  letter-spacing: .06em;
  gap: 7px;
}
.ds-action-wrap .sheet-download ion-icon { font-size: 1.15rem; flex-shrink: 0; }

/* Botón COMPRAR EN TIENDA OFICIAL */
.sheet-buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 52px;
  padding: 0 10px;
  background: linear-gradient(120deg, var(--g) 0%, #2affa0 100%);
  border: none;
  border-radius: 16px;
  color: var(--bg);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(var(--g-rgb),.35);
  transition: all .2s ease;
  animation: buySheetPulse 2.5s ease-in-out infinite;
  width: 100%;
}
.sheet-buy-btn ion-icon { font-size: 1.15rem; flex-shrink: 0; }
.sheet-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(var(--g-rgb),.55);
  animation: none;
}
.sheet-buy-btn:active { transform: scale(.97); }

@keyframes buySheetPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(var(--g-rgb),.3); }
  50%      { box-shadow: 0 4px 30px rgba(var(--g-rgb),.6); }
}

/* ── MODAL DE COMPRA ──────────────────────────────────────── */
#buy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.buy-modal {
  background: linear-gradient(145deg, var(--bg2) 0%, #1c1c30 100%);
  border: 1px solid rgba(var(--g-rgb),.35);
  border-radius: 20px;
  padding: 28px 22px 22px;
  max-width: 400px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 80px rgba(var(--g-rgb),.18);
  animation: modalUp .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes modalUp {
  from { opacity:0; transform:translateY(30px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.buy-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #aaa;
  transition: all .15s;
}
.buy-modal-close:hover { background:rgba(255,255,255,.16); color:#fff; }

.buy-modal-header { text-align:center; margin-bottom:18px; }
.buy-modal-icon   { font-size:2.8rem; margin-bottom:8px; }
.buy-modal-title  { color:#fff; font-size:1.15rem; font-weight:800; margin:0 0 6px; }
.buy-modal-sub    { color:#888; font-size:.82rem; margin:0; }
.buy-modal-sub strong { color:#b0b0cc; }

.buy-modal-benefits {
  background: rgba(var(--g-rgb),.07);
  border: 1px solid rgba(var(--g-rgb),.2);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.buy-modal-benefit {
  display: flex; align-items: center; gap: 8px;
  color: #c8ffc8; font-size:.82rem; font-weight:500;
}
.buy-modal-benefit ion-icon { color:var(--g); font-size:1rem; flex-shrink:0; }

.buy-modal-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:10px; }

.buy-modal-btn-cancel {
  padding: 11px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  color: #bbb; font-weight:600; font-size:.85rem;
  cursor: pointer; transition: all .15s;
}
.buy-modal-btn-cancel:hover { background:rgba(255,255,255,.13); color:#fff; }

.buy-modal-btn-go {
  padding: 11px;
  background: linear-gradient(120deg,var(--g) 0%,#2dffb0 100%);
  border: none; border-radius: 10px;
  color: var(--bg); font-weight:800; font-size:.88rem;
  cursor: pointer;
  display: flex; align-items:center; justify-content:center; gap:6px;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(var(--g-rgb),.3);
}
.buy-modal-btn-go:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--g-rgb),.5); }
.buy-modal-btn-go:active { transform:scale(.97); }
.buy-modal-btn-go ion-icon { font-size:1rem; }

/* ═══════════════════════════════════════════
   CREATOR STUDIO — ECONOMY DASHBOARD
═══════════════════════════════════════════ */

/* ── View Container ── */
#economia-view {
  display: none;
  flex-direction: column;
  padding-bottom: calc(var(--nav-h) + 20px);
  min-height: 100vh;
  background: var(--bg);
}
#economia-view.active { display: flex; }

/* ── Topbar ── */
.eco-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
  border-bottom: 1px solid var(--bd);
  background: rgba(var(--bg-rgb),.9);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.eco-topbar-brand {
  font-family: var(--ff-disp);
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: var(--txt2);
}
.eco-topbar-brand strong { color: var(--g); }
.eco-topbar-brand ion-icon {
  vertical-align: middle;
  color: var(--g);
  margin-right: 6px;
  font-size: 1rem;
}
.eco-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .65rem;
  font-family: var(--ff-mono);
  letter-spacing: 1px;
  color: var(--g);
  background: rgba(var(--g-rgb),.08);
  border: 1px solid rgba(var(--g-rgb),.2);
  border-radius: 20px;
  padding: 4px 10px;
}
.eco-live-dot {
  width: 7px; height: 7px;
  background: var(--g);
  border-radius: 50%;
  animation: eco-pulse 1.4s ease-in-out infinite;
}
@keyframes eco-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ── Period Selector ── */
.eco-period-strip {
  display: flex;
  gap: 6px;
  padding: 12px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.eco-period-btn {
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--txt2);
  transition: all .2s;
}
.eco-period-btn.active {
  background: var(--g);
  border-color: var(--g);
  color: #000;
  font-weight: 700;
}
.eco-period-btn:hover:not(.active) {
  border-color: rgba(var(--g-rgb),.3);
  color: var(--g);
}

/* ── Hero Card ── */
.eco-hero-card {
  margin: 0 14px 14px;
  background: linear-gradient(135deg, rgba(var(--g-rgb),.06) 0%, rgba(var(--cy-rgb),.04) 100%);
  border: 1px solid rgba(var(--g-rgb),.18);
  border-radius: var(--card-r);
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.eco-hero-glow {
  position: absolute;
  top: -60px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(var(--g-rgb),.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.eco-hero-left { flex: 1; }
.eco-hero-eyebrow {
  font-size: .62rem;
  font-family: var(--ff-mono);
  letter-spacing: 1.5px;
  color: var(--txt3);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
.eco-hero-saldo {
  font-family: var(--ff-disp);
  font-size: 2.6rem;
  letter-spacing: 2px;
  color: var(--g);
  line-height: 1;
  text-shadow: 0 0 30px rgba(var(--g-rgb),.4);
  transition: color .3s;
}
.eco-hero-currency {
  font-size: .65rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
  margin: 6px 0 10px;
}
.eco-trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .7rem;
  font-family: var(--ff-mono);
  padding: 4px 10px;
  border-radius: 20px;
}
.eco-trend-up {
  background: rgba(var(--g-rgb),.1);
  border: 1px solid rgba(var(--g-rgb),.25);
  color: var(--g);
}
.eco-trend-down {
  background: rgba(255,67,67,.08);
  border: 1px solid rgba(255,67,67,.2);
  color: #ff4343;
}

/* Ring SVG */
.eco-hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 12px;
}
.eco-ring-svg { width: 90px; height: 90px; }
.eco-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 8;
}
.eco-ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
}
.eco-ring-pct {
  font-family: var(--ff-disp);
  font-size: 16px;
  fill: var(--g);
  text-anchor: middle;
  dominant-baseline: auto;
}
.eco-ring-lbl {
  font-family: var(--ff-mono);
  font-size: 9px;
  fill: var(--txt3);
  text-anchor: middle;
}
.eco-ring-caption {
  font-size: .6rem;
  font-family: var(--ff-mono);
  color: var(--txt3);
  letter-spacing: 1px;
  text-align: center;
}

/* ── KPI Strip ── */
.eco-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 14px 14px;
}
.eco-kpi-card {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}
.eco-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 14px 14px 0 0;
}
.eco-kpi--green::before { background: var(--g); }
.eco-kpi--cyan::before  { background: var(--cy); }
.eco-kpi--yellow::before{ background: #ffd700; }
.eco-kpi--pink::before  { background: #ff4c8b; }
.eco-kpi-icon {
  font-size: .9rem;
  margin-bottom: 2px;
}
.eco-kpi--green .eco-kpi-icon { color: var(--g); }
.eco-kpi--cyan  .eco-kpi-icon { color: var(--cy); }
.eco-kpi--yellow .eco-kpi-icon { color: #ffd700; }
.eco-kpi--pink  .eco-kpi-icon { color: #ff4c8b; }
.eco-kpi-val {
  font-family: var(--ff-disp);
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--txt);
  line-height: 1;
}
.eco-kpi-lbl {
  font-size: .6rem;
  font-family: var(--ff-mono);
  color: var(--txt2);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.eco-kpi-delta {
  font-size: .55rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
}

/* ── Panels (generic card) ── */
.eco-panel {
  margin: 0 14px 14px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--card-r);
  overflow: hidden;
}
.eco-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--bd);
}
.eco-panel-title {
  font-size: .72rem;
  font-family: var(--ff-mono);
  letter-spacing: 1.5px;
  color: var(--txt2);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.eco-panel-title ion-icon { color: var(--g); }
.eco-panel-badge {
  font-size: .62rem;
  font-family: var(--ff-mono);
  color: var(--txt3);
  background: var(--bg3);
  padding: 3px 8px;
  border-radius: 10px;
}

/* ── Chart ── */
.eco-chart-wrap {
  padding: 12px 14px 4px;
  overflow: hidden;
}
.eco-chart-wrap canvas { display: block; width: 100% !important; }
.eco-chart-legend {
  padding: 6px 16px 14px;
  font-size: .62rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
  display: flex; align-items: center; gap: 6px;
}
.eco-legend-dot {
  display: inline-block;
  width: 8px; height: 2px;
  border-radius: 2px;
}

/* ── 3-col insight row ── */
.eco-insights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 14px 14px;
}
.eco-insight-panel {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Health Gauge ── */
.eco-gauge-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 8px 0 0;
}
.eco-gauge-svg { width: 100%; max-width: 140px; display: block; }
.eco-gauge-track { stroke: rgba(255,255,255,.05); stroke-width: 10; }
.eco-gauge-arc {
  stroke: var(--g);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 163.4;
  stroke-dashoffset: 163.4;
  transition: stroke-dashoffset 1s var(--ease), stroke .5s;
}
.eco-gauge-overlay {
  position: absolute;
  bottom: 2px;
  left: 50%; transform: translateX(-50%);
  text-align: center;
}
.eco-gauge-val {
  font-family: var(--ff-disp);
  font-size: 1.6rem;
  color: var(--txt);
  line-height: 1;
}
.eco-gauge-grade {
  font-family: var(--ff-mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--g);
  letter-spacing: 1px;
}
.eco-health-rows {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eco-health-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .65rem;
  color: var(--txt2);
  font-family: var(--ff-mono);
  border-bottom: 1px solid var(--bd);
  padding-bottom: 5px;
}
.eco-health-row:last-child { border-bottom: none; padding-bottom: 0; }
.eco-hv { font-weight: 700; font-size: .7rem; }
.eco-hv--good { color: var(--g); }
.eco-hv--warn { color: #ffd700; }
.eco-hv--bad  { color: #ff4343; }

/* ── Category list ── */
.eco-cat-list {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eco-cat-item { display: flex; flex-direction: column; gap: 3px; }
.eco-cat-label {
  font-size: .62rem;
  font-family: var(--ff-mono);
  font-weight: 700;
  letter-spacing: .5px;
}
.eco-cat-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
}
.eco-cat-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .8s var(--ease);
}
.eco-cat-count {
  font-size: .58rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
  text-align: right;
}

/* ── Funnel ── */
.eco-funnel-list {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eco-funnel-item { display: flex; flex-direction: column; gap: 3px; }
.eco-fi-label {
  font-size: .6rem;
  color: var(--txt2);
  font-family: var(--ff-mono);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.eco-fi-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
}
.eco-fi-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .8s var(--ease);
}
.eco-fi--a { background: linear-gradient(90deg, var(--g), #3dcc1f); }
.eco-fi--b { background: linear-gradient(90deg, var(--cy), #00a8d4); }
.eco-fi--c { background: linear-gradient(90deg, #ffd700, #ff9800); }
.eco-fi--d { background: linear-gradient(90deg, #ff4c8b, #c2185b); }
.eco-fi-val {
  font-size: .62rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
  text-align: right;
}
.eco-cvr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .62rem;
  font-family: var(--ff-mono);
  color: var(--txt2);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--bd);
}
.eco-cvr-row strong { color: var(--cy); font-size: .72rem; }
.eco-funnel-note {
  font-size: .52rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
}

/* ── Leaderboard ── */
#eco-leaderboard { padding: 8px 0; }
.eco-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--bd);
  transition: background .15s;
}
.eco-lb-row:last-child { border-bottom: none; }
.eco-lb-row:hover { background: rgba(255,255,255,.02); }
.eco-lb-medal { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; }
.eco-lb-info { flex: 1; min-width: 0; }
.eco-lb-title {
  font-size: .76rem;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eco-lb-cat {
  font-size: .6rem;
  font-family: var(--ff-mono);
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 5px;
}
.eco-lb-bar-wrap {
  height: 3px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
}
.eco-lb-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .8s var(--ease);
}
.eco-lb-stats { text-align: right; flex-shrink: 0; }
.eco-lb-dl {
  font-family: var(--ff-disp);
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: var(--txt);
}
.eco-lb-dl-lbl {
  font-size: .58rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
}

/* ── Goals ── */
.eco-goals-grid {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eco-goal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 10px;
  transition: border-color .2s;
}
.eco-goal-row.eco-goal-done {
  border-color: rgba(var(--g-rgb),.25);
  background: rgba(var(--g-rgb),.04);
}
.eco-goal-icon { font-size: 1.2rem; flex-shrink: 0; width: 26px; text-align: center; }
.eco-goal-body { flex: 1; min-width: 0; }
.eco-goal-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 5px;
}
.eco-goal-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.eco-goal-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--g), var(--cy));
  border-radius: 3px;
  transition: width 1s var(--ease);
}
.eco-goal-done .eco-goal-bar { background: var(--g); }
.eco-goal-progress {
  font-size: .6rem;
  color: var(--txt3);
  font-family: var(--ff-mono);
}
.eco-goal-check { flex-shrink: 0; font-size: 1rem; }

/* ── Content Table ── */
#eco-content-table { padding: 8px 0; }
.eco-table-header {
  display: grid;
  grid-template-columns: 1fr 42px 42px 38px;
  gap: 4px;
  padding: 6px 16px;
  font-size: .58rem;
  font-family: var(--ff-mono);
  color: var(--txt3);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bd);
}
.eco-table-body { max-height: 340px; overflow-y: auto; }
.eco-table-row {
  display: grid;
  grid-template-columns: 1fr 42px 42px 38px;
  gap: 4px;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .15s;
}
.eco-table-row:hover { background: rgba(255,255,255,.02); }
.eco-table-title-col { min-width: 0; }
.eco-table-title {
  font-size: .73rem;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.eco-table-bar-wrap {
  height: 2px;
  background: rgba(255,255,255,.05);
  border-radius: 2px;
  overflow: hidden;
}
.eco-table-bar {
  height: 100%;
  border-radius: 2px;
  transition: width .8s var(--ease);
}
.eco-table-cat {
  font-size: .58rem;
  font-family: var(--ff-mono);
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
}
.eco-table-dl {
  font-family: var(--ff-disp);
  font-size: .9rem;
  letter-spacing: .5px;
  color: var(--txt);
  text-align: center;
}
.eco-table-reps {
  font-family: var(--ff-mono);
  font-size: .7rem;
  color: var(--txt3);
  text-align: center;
}
.eco-reps-warn { color: #ff9800; font-weight: 700; }

/* ── Section Divider ── */
.eco-divider-section {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 14px 14px;
}
.eco-div-line { flex: 1; height: 1px; background: var(--bd); }
.eco-div-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .62rem;
  font-family: var(--ff-mono);
  letter-spacing: 1.5px;
  color: var(--txt3);
  text-transform: uppercase;
  white-space: nowrap;
}
.eco-div-label ion-icon { color: var(--cy); }

/* ── Payout Panel ── */
.eco-payout-panel {
  padding: 0 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Shared loading state ── */
.eco-spin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--txt3);
  font-size: 1.4rem;
}
.eco-spin ion-icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.eco-empty-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--txt3);
  font-size: .75rem;
}
.eco-empty-mini ion-icon { font-size: 1.6rem; }


/* ── Avatar: tabs URL / Subir ── */
.pf-av-mode-tabs {
  display: flex; gap: 6px; margin: 0 0 16px;
  background: var(--bg2); border-radius: 12px; padding: 4px;
}
.pf-av-mode-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 12px; background: transparent; border: none; border-radius: 9px;
  color: var(--txt3); font-size: .77rem; font-weight: 700; letter-spacing: .3px;
  cursor: pointer; transition: background .18s, color .18s;
}
.pf-av-mode-tab ion-icon { font-size: .95rem; }
.pf-av-mode-tab.active { background: var(--g); color: #000; }
.pf-av-mode-tab:not(.active):hover { background: var(--bg3); color: var(--txt2); }

/* ── Image slot: input + botón subir ── */
.pf-img-slot-row { display: flex; align-items: center; gap: 6px; }
.pf-img-slot-row .pf-input { flex: 1; min-width: 0; }
.pf-img-upload-btn {
  flex-shrink: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--bd); border-radius: 10px;
  color: var(--cy); cursor: pointer; font-size: 1rem;
  transition: background .18s, border-color .18s, color .18s;
}
.pf-img-upload-btn:hover { background: var(--cy); border-color: var(--cy); color: #000; }
.pf-img-upload-btn:active { opacity: .8; transform: scale(.95); }
.pf-img-upload-btn:disabled { opacity: .6; cursor: wait; }

/* ════════════════════════════════════════════════════════════════
   PERFIL v6 — diseño de red social (portada 3:1, avatar, stats,
   "Crear publicación" desplegable y cuadrícula tipo Instagram)
   ════════════════════════════════════════════════════════════════ */
#pf-logged { max-width: 720px; margin: 0 auto; }
.pf2-hero { position: relative; padding-bottom: 6px; }

/* Portada: proporción 3:1 (1500×500) y un velo inferior para leer el texto */
.pf2-cover {
  position: relative;
  aspect-ratio: 3 / 1;
  min-height: 118px; max-height: 240px; width: 100%;
  background:
    radial-gradient(120% 140% at 85% -20%, rgba(var(--g-rgb), .22), transparent 60%),
    radial-gradient(90% 120% at 0% 120%, rgba(var(--cy-rgb), .18), transparent 60%),
    linear-gradient(135deg, var(--bg2), var(--bg1));
  background-size: cover; background-position: center;
  overflow: hidden;
}
@media (min-width: 720px) { .pf2-cover { border-radius: 0 0 18px 18px; } }
.pf2-cover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(var(--bg-rgb), .55));
}
.pf2-cover-btn {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(var(--bg-rgb), .55);
  color: #fff; font: 700 .72rem/1 var(--ff); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.pf2-cover-btn:hover { background: rgba(var(--bg-rgb), .75); }
.pf2-cover-btn:active { transform: scale(.96); }
.pf2-cover-btn ion-icon { font-size: 1rem; }

/* Avatar montado sobre la portada + estadísticas a la derecha */
.pf2-head { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px; margin-top: -44px; position: relative; z-index: 3; }
.pf2-avatar-wrap { position: relative; flex-shrink: 0; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.pf2-avatar {
  width: 92px; height: 92px; border-radius: 50%;
  border: 4px solid var(--bg);
  background: linear-gradient(135deg, var(--g), var(--cy));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: #06210f; font-size: 2rem;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
}
.pf2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf2-avatar-edit {
  position: absolute; right: 2px; bottom: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--g); color: #06210f; border: 3px solid var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: .78rem;
}
.pf2-stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 6px; }
.pf2-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; color: var(--txt); font-family: var(--ff); cursor: default; padding: 4px 0; }
button.pf2-stat { cursor: pointer; }
.pf2-stat b { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.pf2-stat span { font-size: .68rem; color: var(--txt2); }

.pf2-info { padding: 12px 16px 4px; }
.pf2-name { display: flex; align-items: center; gap: 6px; font-size: 1.12rem; font-weight: 800; color: var(--txt); }
.pf2-name .verificado-badge { font-size: 1.05rem; }
.pf2-xp:empty { display: none; }
.pf2-xp { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 99px; font-size: .66rem; font-weight: 700; color: var(--g); background: var(--g-dim); border: 1px solid var(--bd-g); }
.pf2-bio { margin-top: 8px; font-size: .86rem; line-height: 1.45; color: var(--txt2); white-space: pre-line; word-break: break-word; }
.pf2-info .profile-social-links { margin-top: 8px; }

/* Botones de acción (estilo Instagram) */
.pf2-actions { display: flex; gap: 8px; padding: 12px 16px 4px; }
.pf2-btn {
  flex: 1; min-height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; border: 1px solid var(--bd); background: var(--bg2);
  color: var(--txt); font: 700 .8rem/1 var(--ff); cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.pf2-btn:hover { background: var(--bg3); }
.pf2-btn:active { transform: scale(.97); }
.pf2-btn ion-icon { font-size: 1.05rem; }
.pf2-btn-icon { flex: 0 0 42px; padding: 0; }
.pf2-btn-danger { color: #ff6b6b; }
.pf2-btn-primary { background: var(--g); border-color: var(--g); color: #06210f; }
.pf2-btn-primary:hover { background: #3be08f; }

/* "Crear publicación" — botón desplegable */
.pf2-create {
  margin: 12px 16px 0; width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1px dashed rgba(var(--g-rgb), .45);
  background: linear-gradient(135deg, rgba(var(--g-rgb), .1), rgba(var(--cy-rgb), .06));
  color: var(--txt); font-family: var(--ff);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.pf2-create:hover, .pf2-create.open { border-style: solid; border-color: var(--g); }
.pf2-create-ico { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--g); color: #06210f; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.pf2-create-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pf2-create-txt b { font-size: .9rem; }
.pf2-create-txt small { font-size: .7rem; color: var(--txt2); }
.pf2-chev { font-size: 1.1rem; color: var(--txt2); transition: transform .25s var(--ease); }
.pf2-create.open .pf2-chev { transform: rotate(180deg); }
.pf2-publish { margin: 10px 12px 4px; padding: 14px 4px 4px; border-radius: 16px; border: 1px solid var(--bd); background: var(--bg1); }
.pf2-publish[hidden] { display: none; }
.pf2-publish-in { animation: pf2In .28s var(--ease); }
@keyframes pf2In { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pf2-publish-body { padding: 0 8px; }

/* Pestañas: iconos y subrayado, centradas en pantallas anchas */
.pf2-tabs { margin-top: 14px; position: sticky; top: var(--hdr-h); z-index: 20; background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pf2-tabs .perfil-tab { font-size: .74rem; letter-spacing: 0; text-transform: none; padding: 12px 14px; }
.pf2-tabs .perfil-tab.active { color: var(--txt); border-bottom-color: var(--txt); }
#pf-tab-historial .hist-subnav { display: none; }   /* sustituida por las pestañas superiores */
#pf-tab-historial { padding: 0 2px; }

/* Cuadrícula tipo Instagram */
.pf2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pf2-tile {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 0; padding: 0;
  background: var(--bg2); cursor: pointer; display: block;
}
.pf2-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease), filter .2s; }
.pf2-tile:hover img { transform: scale(1.04); filter: brightness(.88); }
.pf2-tile-ph { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; color: var(--txt3); background: linear-gradient(135deg, var(--bg2), var(--bg3)); }
.pf2-tile.no-img .pf2-tile-ph { display: flex; }
.pf2-tile-ph ion-icon { font-size: 1.5rem; color: var(--g); }
.pf2-tile-ph em { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--txt2); text-align: center; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf2-tile-meta {
  position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.pf2-tile-meta ion-icon { font-size: .85rem; }
.pf2-tile-type { position: absolute; right: 6px; top: 6px; color: #fff; font-size: 1rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.pf2-tile-badge { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 99px; font-size: .58rem; font-weight: 800; background: rgba(255,204,0,.92); color: #1a1400; }
.pf2-tile-badge.warn { background: rgba(255,204,0,.92); }
.pf2-tile-badge.bad { background: rgba(255,67,67,.92); color: #fff; }
.pf2-skel { cursor: default; background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%); background-size: 200% 100%; animation: pf2Skel 1.2s linear infinite; }
@keyframes pf2Skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.pf2-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 24px 30px; color: var(--txt2); }
.pf2-empty ion-icon { font-size: 2.6rem; color: var(--txt3); }
.pf2-empty h4 { color: var(--txt); font-size: .95rem; }
.pf2-empty p { font-size: .8rem; max-width: 280px; }
.pf2-empty .pf2-btn { flex: none; margin-top: 6px; padding: 0 18px; }

/* Hoja de acciones de una publicación propia */
.pf2-sheet-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.pf2-sheet-ov.show { opacity: 1; pointer-events: auto; }
.pf2-sheet { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--bg1); border: 1px solid var(--bd); border-radius: 20px 20px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateY(24px); transition: transform .28s var(--ease); }
.pf2-sheet-ov.show .pf2-sheet { transform: none; }
.pf2-sheet-grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--bd); margin: 10px auto; }
.pf2-sheet-img { display: block; width: calc(100% - 28px); margin: 0 14px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.pf2-sheet-body { padding: 12px 16px 0; }
.pf2-sheet-cat { font-size: .72rem; color: var(--cy); font-weight: 700; }
.pf2-sheet-cat .ok { color: var(--g); } .pf2-sheet-cat .warn { color: #ffcc00; }
.pf2-sheet h3 { margin-top: 4px; font-size: 1.05rem; color: var(--txt); line-height: 1.3; }
.pf2-sheet-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; }
.pf2-sheet-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; background: var(--bg2); }
.pf2-sheet-stats b { font-size: .95rem; color: var(--txt); }
.pf2-sheet-stats span { font-size: .62rem; color: var(--txt3); }
.pf2-sheet-actions { display: grid; gap: 8px; }
.pf2-sheet-actions .pf2-btn { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .pf2-publish-in, .pf2-skel { animation: none; }
  .pf2-tile img, .pf2-sheet, .pf2-sheet-ov, .pf2-chev { transition: none; }
}
/* El contenedor heredado era una grid de 2 columnas: la cuadrícula ocupa todo el ancho */
#pf-showContent, #pf-showVideos { display: block !important; padding: 0; }
.pf2-tile-ph { padding-bottom: 26px; }
#pf-create-btn, #pf-tabs { scroll-margin-top: calc(var(--hdr-h) + 8px); }

/* Contador de mensajes sin leer en el botón de Chats */
#pf-chat-btn { position: relative; }
.pf2-chat-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--g); color: #06210f; font-size: .62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.pf2-chat-n[hidden] { display: none; }

/* ── Series por partes ── */
.tile-serie-badge{background:rgba(90,200,250,.14)!important;color:#8fdcff!important;border-color:rgba(90,200,250,.35)!important}
.ds-serie{margin:14px 0 4px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(90,200,250,.10),rgba(50,213,131,.06));border:1px solid rgba(90,200,250,.28)}
.ds-serie-h{display:flex;gap:10px;align-items:center}
.ds-serie-h>ion-icon{font-size:1.5rem;color:#5AC8FA;flex-shrink:0}
.ds-serie-h b{display:block;font-size:.95rem;color:#f2f4f8}.ds-serie-h small{display:block;font-size:.74rem;color:rgba(242,244,248,.55);margin-top:2px}
.ds-serie-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);margin:12px 0 5px;overflow:hidden}
.ds-serie-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#32D583,#5AC8FA);transition:width .4s}
.ds-serie-prog{font-size:.72rem;color:rgba(242,244,248,.55);margin-bottom:10px}
.ds-serie-list{display:flex;flex-direction:column;gap:6px}
.ds-serie-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);color:#f2f4f8;font:inherit;font-size:.86rem;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.ds-serie-row:hover:not([disabled]){background:rgba(255,255,255,.06)}
.ds-serie-row[disabled]{cursor:default;opacity:1}
.ds-serie-row.cur{border-color:rgba(90,200,250,.5);background:rgba(90,200,250,.10)}
.ds-serie-row.next{border-color:rgba(50,213,131,.55);background:rgba(50,213,131,.12);box-shadow:0 0 0 1px rgba(50,213,131,.2)}
.ds-serie-row>ion-icon{margin-left:6px;color:rgba(242,244,248,.45)}
.ds-serie-n{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);font-weight:800;font-size:.78rem;flex-shrink:0}
.ds-serie-row.next .ds-serie-n{background:#32D583;color:#06140c}
.ds-serie-t{flex:1;min-width:0}
.ds-serie-tag{font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap;margin-left:auto}
.ds-serie-tag.cur{background:rgba(90,200,250,.18);color:#8fdcff}.ds-serie-tag.ok{background:rgba(50,213,131,.16);color:#6ff0ae}.ds-serie-tag.next{background:#32D583;color:#06140c}
.ds-serie-lock{margin-top:10px;font-size:.76rem;color:rgba(242,244,248,.55);display:flex;gap:6px;align-items:center}
.ds-serie-lock.ok{color:#6ff0ae}

/* ── Nexus presente en la app (✦) ── */
.pf-nexus-ic,.ds-ask-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;flex-shrink:0;font-size:1rem;color:#fff;
  background:linear-gradient(135deg,#a78bfa,#5AC8FA);box-shadow:0 4px 14px rgba(167,139,250,.35)}
.ds-ask-nexus{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 4px;padding:12px 14px;border-radius:16px;cursor:pointer;text-align:left;font:inherit;color:#f2f4f8;
  background:linear-gradient(135deg,rgba(167,139,250,.14),rgba(90,200,250,.08));border:1px solid rgba(167,139,250,.35);transition:transform .15s,border-color .2s}
.ds-ask-nexus:hover{border-color:rgba(167,139,250,.6)}.ds-ask-nexus:active{transform:scale(.99)}
.ds-ask-nexus b{display:block;font-size:.92rem}.ds-ask-nexus small{display:block;font-size:.74rem;color:rgba(242,244,248,.6);margin-top:1px}
.ds-ask-nexus>ion-icon{margin-left:auto;color:#c4b5fd}
.pf-nexus-check{margin:14px 0}
.pf-nexus-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;font:inherit;color:#f2f4f8;
  background:linear-gradient(135deg,rgba(167,139,250,.16),rgba(90,200,250,.08));border:1px dashed rgba(167,139,250,.5)}
.pf-nexus-btn:disabled{opacity:.6;cursor:wait}
.pf-nexus-btn b{display:block;font-size:.9rem}.pf-nexus-btn small{display:block;font-size:.72rem;color:rgba(242,244,248,.6)}
.pf-nx-load{display:flex;gap:12px;align-items:center;margin-top:10px;padding:12px;border-radius:14px;background:rgba(167,139,250,.08);font-size:.85rem}
.pf-nx-load small{display:block;color:rgba(242,244,248,.55);font-size:.74rem}
.pf-nx-orb{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:conic-gradient(#a78bfa,#5AC8FA,#32D583,#a78bfa);animation:spinAnim 1s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent 62%,#000 64%);mask:radial-gradient(farthest-side,transparent 62%,#000 64%)}
.pf-nx-res{margin-top:10px;padding:12px 14px;border-radius:14px;font-size:.84rem;border:1px solid;background:rgba(0,0,0,.2)}
.pf-nx-res.ok{border-color:rgba(50,213,131,.45)}.pf-nx-res.warn{border-color:rgba(255,176,32,.45)}.pf-nx-res.bad{border-color:rgba(255,90,95,.5)}
.pf-nx-h{display:flex;gap:10px;align-items:center;font-size:.95rem}
.pf-nx-res p{margin:8px 0;color:rgba(242,244,248,.75)}
.pf-nx-res ul{list-style:none;margin:6px 0 0;padding:0}
.pf-nx-res li{display:flex;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.06);line-height:1.4}
.pf-nx-res li.bad{color:#ff9a9d}.pf-nx-res li.warn{color:#ffd27a}
.pf-nx-sug{margin-top:10px;padding:10px;border-radius:10px;background:rgba(167,139,250,.08);display:flex;flex-direction:column;gap:5px}
.pf-nx-src{display:block;margin-top:8px;font-size:.7rem;color:rgba(242,244,248,.45)}
.pf2-nexus{margin:12px 0;padding:12px;border-radius:14px;background:linear-gradient(135deg,rgba(167,139,250,.12),rgba(90,200,250,.06));border:1px solid rgba(167,139,250,.3);font-size:.84rem}
.pf2-nexus-h{display:flex;align-items:center;gap:10px}.pf2-nexus-h .pf-nexus-ic{width:26px;height:26px;font-size:.85rem}
.pf2-nexus-score{margin-left:auto;font-weight:800;color:#c4b5fd}
.pf2-nexus p{margin:8px 0;color:rgba(242,244,248,.78);line-height:1.45}
.pf2-nexus ul{margin:4px 0 0;padding-left:18px;color:rgba(242,244,248,.78)}.pf2-nexus li{margin:3px 0}
.pf2-nexus-alert{margin-top:8px;color:#ffd27a;font-size:.78rem}
.pf2-rechazo{margin:12px 0;padding:10px 12px;border-radius:12px;background:rgba(255,90,95,.1);border:1px solid rgba(255,90,95,.35);color:#ffb3b5;font-size:.84rem;line-height:1.45}
.pf2-rechazo small{color:rgba(255,179,181,.7)}
.pf2-sheet-cat .bad{color:#ff8a8d}
.pf2-btn-nexus{width:100%;justify-content:center;margin:4px 0 10px;background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(90,200,250,.1))!important;border-color:rgba(167,139,250,.4)!important}
.pf2-btn-nexus .pf-nexus-ic{width:22px;height:22px;font-size:.75rem;border-radius:7px}
.empty-action{cursor:pointer;font:inherit}
.empty-action--nexus{background:linear-gradient(135deg,#a78bfa,#5AC8FA)!important;color:#fff!important;border:none!important;margin-bottom:8px}

/* ══════════ NOTIFICACIONES · Liquid Glass ══════════ */
#notif-btn{position:relative}
.ugn-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:linear-gradient(135deg,#32D583,#5AC8FA);color:#04110a;
  font-size:.62rem;font-weight:900;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg,#0A0B0F),0 4px 12px rgba(50,213,131,.45);pointer-events:none}
.ugn-badge[hidden]{display:none}
.ugn-scrim{position:fixed;inset:0;z-index:1190;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px)}
.ugn-scrim.open{opacity:1;pointer-events:auto}
.ugn-panel{position:fixed;z-index:1200;top:64px;right:14px;width:min(410px,calc(100vw - 20px));max-height:min(640px,calc(100dvh - 90px));display:flex;flex-direction:column;
  border-radius:26px;overflow:hidden;color:#f2f4f8;
  background:linear-gradient(160deg,rgba(28,32,42,.86),rgba(14,16,22,.9));
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 70px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .22s,transform .3s cubic-bezier(.2,.9,.3,1.2)}
.ugn-panel.open{opacity:1;transform:none;pointer-events:auto}
.ugn-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 10px}
.ugn-head h3{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.2px}
.ugn-head span{font-size:.74rem;color:rgba(242,244,248,.55)}
.ugn-head-acts{display:flex;gap:6px}
.ugn-ib{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#d6dbe4;display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;transition:background .2s}
.ugn-ib:hover{background:rgba(255,255,255,.12)}
#ugn-main,#ugn-settings{display:flex;flex-direction:column;min-height:0;flex:1}
#ugn-main[hidden],#ugn-settings[hidden]{display:none}
#ugn-settings{overflow-y:auto;padding:0 16px 16px}
.ugn-chips{display:flex;gap:6px;overflow-x:auto;padding:4px 16px 10px;scrollbar-width:none;flex-shrink:0}
.ugn-chips::-webkit-scrollbar{display:none}
.ugn-chips button{flex-shrink:0;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:rgba(242,244,248,.7);font:inherit;font-size:.74rem;font-weight:600;cursor:pointer}
.ugn-chips button.on{background:linear-gradient(135deg,rgba(50,213,131,.22),rgba(90,200,250,.16));border-color:rgba(50,213,131,.45);color:#fff}
.ugn-list{overflow-y:auto;padding:0 8px 6px;flex:1;overscroll-behavior:contain}
.ugn-group{font-size:.68rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:rgba(242,244,248,.42);padding:10px 10px 6px}
.ugn-item{position:relative;display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:18px;cursor:pointer;transition:background .2s,opacity .2s,transform .2s}
.ugn-item:hover{background:rgba(255,255,255,.05)}
.ugn-item.unread{background:linear-gradient(90deg,rgba(50,213,131,.1),rgba(90,200,250,.03))}
.ugn-item.bye{opacity:0;transform:translateX(30px)}
.ugn-av{position:relative;width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;color:#fff;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ugn-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ugn-av-ic{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.66rem;color:#06140c;box-shadow:0 0 0 2px #14171f}
.ugn-body{flex:1;min-width:0}
.ugn-line{font-size:.86rem;line-height:1.35;color:rgba(242,244,248,.85)}
.ugn-line b{color:#fff;font-weight:700}
.ugn-subl{font-size:.8rem;color:rgba(242,244,248,.6);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ugn-subl.full{white-space:normal;color:rgba(242,244,248,.82);line-height:1.45}
.ugn-time{font-size:.7rem;color:rgba(242,244,248,.42);margin-top:4px}
.ugn-thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ugn-dot{position:absolute;top:16px;right:10px;width:8px;height:8px;border-radius:50%;background:#32D583;box-shadow:0 0 10px rgba(50,213,131,.8)}
.ugn-item:has(.ugn-thumb) .ugn-dot{right:68px}
.ugn-del{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,90,95,.14);color:#ff8a8d;display:flex;align-items:center;justify-content:center;opacity:0;cursor:pointer;transition:opacity .2s}
.ugn-item:hover .ugn-del{opacity:1}
@media (hover:none){.ugn-del{opacity:.55;background:transparent}}
.ugn-empty{text-align:center;padding:40px 20px;color:rgba(242,244,248,.55);font-size:.82rem;display:flex;flex-direction:column;align-items:center;gap:6px}
.ugn-empty b{color:#f2f4f8;font-size:.95rem}
.ugn-empty-ic{width:64px;height:64px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:6px;background:linear-gradient(135deg,rgba(50,213,131,.16),rgba(90,200,250,.12));color:#5AC8FA}
.ugn-skel{height:58px;margin:8px;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:ugnSk 1.2s infinite}
@keyframes ugnSk{to{background-position:-200% 0}}
.ugn-foot{padding:8px 16px 14px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ugn-foot button{background:none;border:none;color:rgba(255,138,141,.85);font:inherit;font-size:.78rem;display:flex;gap:6px;align-items:center;cursor:pointer;padding:4px 0}
.ugn-push{display:flex;align-items:center;gap:12px;margin:2px 14px 10px;padding:12px;border-radius:18px;background:linear-gradient(135deg,rgba(50,213,131,.16),rgba(90,200,250,.1));border:1px solid rgba(50,213,131,.3)}
.ugn-push-ic{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#06140c;background:linear-gradient(135deg,#32D583,#5AC8FA)}
.ugn-push-tx{flex:1;min-width:0;font-size:.76rem;color:rgba(242,244,248,.72);line-height:1.4}
.ugn-push-tx b{display:block;color:#fff;font-size:.86rem;margin-bottom:1px}
.ugn-push-btn{flex-shrink:0;padding:8px 14px;border-radius:999px;border:none;background:#fff;color:#06140c;font:inherit;font-weight:800;font-size:.78rem;cursor:pointer}
.ugn-back{display:flex;align-items:center;gap:4px;background:none;border:none;color:#5AC8FA;font:inherit;font-weight:700;font-size:.84rem;padding:4px 0 12px;cursor:pointer}
.ugn-set-card{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.ugn-set-card>ion-icon{font-size:1.5rem;color:rgba(242,244,248,.5)}.ugn-set-card.on>ion-icon{color:#32D583}
.ugn-set-card b{display:block;font-size:.88rem}.ugn-set-card small{color:rgba(242,244,248,.55);font-size:.74rem}
.ugn-set-row{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.ugn-set-row button{flex:1;padding:10px 12px;border-radius:14px;border:none;background:linear-gradient(135deg,#32D583,#5AC8FA);color:#06140c;font:inherit;font-weight:800;font-size:.8rem;cursor:pointer}
.ugn-set-row button.ghost{background:rgba(255,255,255,.07);color:#f2f4f8;border:1px solid rgba(255,255,255,.12)}
.ugn-set{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}
.ugn-set>ion-icon{font-size:1.2rem;color:#5AC8FA;flex-shrink:0}
.ugn-set span{flex:1;min-width:0}.ugn-set b{display:block;font-size:.86rem}.ugn-set small{display:block;font-size:.72rem;color:rgba(242,244,248,.55)}
.ugn-set input{position:absolute;opacity:0;pointer-events:none}
.ugn-sw{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;flex-shrink:0;transition:background .2s}
.ugn-sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.ugn-set input:checked+.ugn-sw{background:#32D583}.ugn-set input:checked+.ugn-sw::after{transform:translateX(18px)}
.ugn-note{font-size:.72rem;color:rgba(242,244,248,.45);margin:12px 4px 0}

/* Isla flotante */
.ugn-island{position:fixed;z-index:1300;top:calc(10px + env(safe-area-inset-top,0px));left:50%;width:min(420px,calc(100vw - 20px));
  display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-radius:30px;cursor:pointer;overflow:hidden;color:#f2f4f8;
  background:rgba(8,9,13,.88);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(50,213,131,.08);
  transform:translate(-50%,-140%) scale(.6);opacity:0;transition:transform .5s cubic-bezier(.2,1.2,.3,1),opacity .3s,border-radius .4s;pointer-events:none}
.ugn-island.show{transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto}
.ugn-island .ugn-av{width:42px;height:42px}
.ugn-isla-tx{flex:1;min-width:0}
.ugn-isla-tx b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ugn-isla-tx span{display:block;font-size:.78rem;color:rgba(242,244,248,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ugn-isla-x{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:#cfd5df;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.ugn-isla-bar{position:absolute;left:16px;right:16px;bottom:4px;height:3px;border-radius:3px;background:linear-gradient(90deg,#32D583,#5AC8FA);transform-origin:left;transform:scaleX(0)}
.ugn-island.show .ugn-isla-bar{animation:ugnBar 5.5s linear forwards}
@keyframes ugnBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (max-width:640px){
  .ugn-panel{top:calc(8px + env(safe-area-inset-top,0px));left:8px;right:8px;width:auto;max-height:calc(100dvh - 110px);border-radius:28px;transform-origin:top center}
}
@media (prefers-reduced-motion:reduce){.ugn-panel,.ugn-island{transition:opacity .2s}.ugn-island.show .ugn-isla-bar{animation:none}}

/* ═══════════════════════════════════════════
   NEXUS NATIVA — chat (v7)
═══════════════════════════════════════════ */
#nxPanel{touch-action:auto;background:rgba(17,19,24,.86);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);border-color:rgba(255,255,255,.1)}
#nxPanel .nx-body{touch-action:auto;overflow:hidden}
.nx-sub{font-family:var(--ff);font-size:.66rem}
.nx-msgs{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 14px 10px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.nx-msg{display:flex;flex-direction:column;max-width:88%;animation:nxIn .32s var(--ease) both}
@keyframes nxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nx-yo{align-self:flex-end;align-items:flex-end}
.nx-ia{align-self:flex-start;max-width:94%}
.nx-bub{padding:10px 14px;border-radius:20px;font-size:.88rem;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.nx-yo .nx-bub{background:linear-gradient(135deg,var(--g),#2BB673);color:#04140B;font-weight:600;border-bottom-right-radius:6px}
.nx-ia .nx-bub{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--txt);border-bottom-left-radius:6px}
.nx-ia .nx-bub p{margin:0 0 6px}.nx-ia .nx-bub p:last-child{margin:0}
.nx-ia .nx-bub ul{margin:4px 0 6px;padding-left:18px}.nx-ia .nx-bub li{margin:2px 0}
.nx-ia .nx-bub b{color:#fff}
.nx-err .nx-bub{border-color:rgba(255,99,99,.35);color:#FFB4B4}
.nx-typing{display:flex;gap:5px;padding:14px 16px}
.nx-typing i{width:7px;height:7px;border-radius:50%;background:var(--txt2);animation:nxDot 1.2s infinite ease-in-out}
.nx-typing i:nth-child(2){animation-delay:.15s}.nx-typing i:nth-child(3){animation-delay:.3s}
@keyframes nxDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.nx-cards{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 4px;margin:0 -2px;scroll-snap-type:x mandatory;max-width:100%}
.nx-card{flex:0 0 150px;scroll-snap-align:start;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),border-color .2s}
.nx-card:active{transform:scale(.97)}
.nx-card:hover{border-color:var(--bd-g)}
.nx-card-img{position:relative;aspect-ratio:16/9;background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:1.4rem}
.nx-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-card-pts{position:absolute;right:6px;bottom:6px;font-size:.6rem;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(6px)}
.nx-card-t{font-size:.76rem;font-weight:700;padding:8px 9px 2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nx-card-m{font-size:.62rem;color:var(--txt3);padding:0 9px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nx-act{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:7px 12px;border-radius:999px;background:var(--g-dim);border:1px solid var(--bd-g);color:var(--g)}
.nx-act ion-icon{font-size:.8rem}
.nx-hola{margin:auto 0;text-align:center;padding:12px 6px 4px}
.nx-hola h3{font-size:1.15rem;font-weight:800;margin:14px 0 4px}
.nx-hola p{font-size:.82rem;color:var(--txt2);line-height:1.5;margin:0 auto 16px;max-width:300px}
.nx-hola-orb{width:58px;height:58px;margin:0 auto;border-radius:50%;background:conic-gradient(from 0deg,var(--g),var(--cy),var(--g));padding:2px;animation:plSpin 6s linear infinite;box-shadow:0 0 34px rgba(var(--g-rgb),.35)}
.nx-hola-orb span{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.25),var(--bg1) 60%)}
.nx-sugs{display:flex;flex-direction:column;gap:8px;max-width:340px;margin:0 auto}
.nx-sug{font-size:.8rem;text-align:left;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--txt);transition:border-color .2s,background .2s}
.nx-sug:hover{border-color:var(--bd-g);background:var(--g-dim)}
.nx-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);flex-shrink:0;background:rgba(10,11,15,.4)}
.nx-form textarea{flex:1;resize:none;min-height:42px;max-height:120px;padding:11px 15px;border-radius:21px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--txt);font-size:.9rem;line-height:1.35;outline:none}
.nx-form textarea:focus{border-color:var(--bd-g)}
.nx-form button{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--cy));color:#04140B;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .2s}
.nx-form button svg{width:20px;height:20px}
.nx-form button:active{transform:scale(.92)}
.nx-form button:disabled{opacity:.45}
.nx-fab-badge{position:absolute;top:2px;right:calc(50% - 18px);width:10px;height:10px;border-radius:50%;background:var(--g);border:2px solid var(--bg);animation:nx-badge-pulse 1.5s ease-in-out infinite;pointer-events:none}
@keyframes nx-badge-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
@media (min-width:768px){.nx-msg{max-width:78%}.nx-card{flex-basis:170px}}
@media (prefers-reduced-motion:reduce){.nx-msg,.nx-hola-orb,.nx-typing i{animation:none}}
@media (min-width:900px){
  #nxPanel{left:auto;right:24px;bottom:24px;width:430px;height:min(720px,calc(100dvh - 110px));border-radius:26px;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 24px 80px rgba(0,0,0,.6);transform:translateY(24px) scale(.97);transform-origin:bottom right}
  #nxPanel.open{transform:none}
  #nxPanel::before{display:none}
  #nxPanel.expanded{right:24px;left:24px;top:84px;bottom:24px;width:auto;height:auto;border-radius:26px;inset:84px 24px 24px 24px}
  .nx-form{padding-bottom:12px}
}

/* ── Live: acceso en el header y en el perfil ── */
.hdr-live { position: relative; }
.hdr-live-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 0 rgba(255,77,109,.7); animation: hdrLivePulse 1.6s infinite; }
@keyframes hdrLivePulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,109,.7); } 70% { box-shadow: 0 0 0 7px rgba(255,77,109,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0); } }
.pf2-btn-live ion-icon { color: #ff4d6d; }
@media (prefers-reduced-motion: reduce) { .hdr-live-dot { animation: none; } }

/* ── Economía: pagos con tarjeta (protagonista) y banner de saldo ── */
.eco-hero-extra { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; font-size: .78rem; color: var(--txt2, #A3A8B6); }
.eco-hero-extra span { display: inline-flex; align-items: center; gap: 5px; }
.eco-hero-extra ion-icon { font-size: .9rem; }
.eco-hero-extra b { color: #ffcc4d; }
.eco-pay-hero { position: relative; margin: 6px 0 18px; padding: 18px 16px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(50,213,131,.16), rgba(90,200,250,.09)); border: 1.5px solid rgba(50,213,131,.55); box-shadow: 0 14px 34px -18px rgba(50,213,131,.7); }
.eco-pay-badge { position: absolute; top: -10px; right: 14px; padding: 3px 9px; border-radius: 7px; background: #32D583; color: #06210f; font-size: .65rem; font-weight: 800; letter-spacing: .06em; }
.eco-pay-head { display: flex; align-items: center; gap: 12px; }
.eco-pay-head b { display: block; font-size: 1.02rem; color: #fff; line-height: 1.25; }
.eco-pay-head small { display: block; font-size: .76rem; color: #A3A8B6; margin-top: 3px; }
.eco-pay-ic { width: 46px; height: 46px; border-radius: 14px; background: #32D583; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; flex-shrink: 0; }
.eco-pay-uses { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; font-size: .84rem; color: #d6d9e0; }
.eco-pay-uses a { color: #5AC8FA; }
.eco-pay-open { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-radius: 14px; border: 0; background: #32D583; color: #06210f; font-weight: 800; font-size: .95rem; cursor: pointer; font-family: inherit; box-shadow: 0 10px 24px -10px rgba(50,213,131,.8); transition: transform .12s; }
.eco-pay-open:active { transform: scale(.98); }
.eco-pay-safe { font-size: .72rem; color: #8a90a0; text-align: center; margin: 10px 0 0; }

/* ── Móviles angostos (≤380px, p. ej. iPhone SE): nada se sale de la pantalla ── */
@media (max-width: 380px) {
  #app-header { padding: 0 10px; gap: 8px; }
  .hdr-logo { font-size: 1.2rem; letter-spacing: 1.5px; }
  .search-bar { min-width: 0; }
  #buscador { padding-right: 8px; font-size: .82rem; }
  .hdr-actions { gap: 5px; }
  .hdr-btn { width: 34px; height: 34px; font-size: 1rem; }
  .pf2-actions { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .pf2-btn { min-width: 0; padding: 0 8px; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pf2-btn-icon { flex: 0 0 36px; }
  .eco-hero-card { padding: 18px 14px; }
  .eco-hero-right { margin-left: 6px; }
  .eco-ring-svg { width: 74px; height: 74px; }
  .eco-panel-hdr { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .eco-panel-title { min-width: 0; letter-spacing: .8px; flex-wrap: wrap; }
}
/* Email de PayPal + Guardar: el campo encoge en vez de empujar el botón fuera */
.pf-paypal-row { display: flex; min-width: 0; }
.pf-paypal-row .pf-paypal-input { flex: 1; min-width: 0; }
.pf-paypal-row .pf-paypal-save { flex-shrink: 0; }
@media (max-width: 380px) { .pf-paypal-row .pf-paypal-save { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 380px) {
  .eco-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .eco-kpi-lbl { letter-spacing: .5px; }
}

/* ── Aviso de email sin verificar ── */
.ug-verif { display: flex; align-items: center; gap: 10px; margin: 10px 14px 4px; padding: 11px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,204,77,.14), rgba(90,200,250,.08)); border: 1px solid rgba(255,204,77,.4); animation: ugVerifIn .35s ease; }
.ug-verif[hidden] { display: none; }
@keyframes ugVerifIn { from { opacity: 0; transform: translateY(-6px); } }
.ug-verif-ic { font-size: 1.4rem; flex-shrink: 0; }
.ug-verif-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ug-verif-txt b { font-size: .86rem; color: #fff; }
.ug-verif-txt span { font-size: .74rem; color: #c9ccd6; line-height: 1.35; }
.ug-verif-btn { flex-shrink: 0; padding: 9px 12px; border-radius: 10px; border: 0; background: #ffcc4d; color: #241a00; font-weight: 800; font-size: .76rem; cursor: pointer; font-family: inherit; }
.ug-verif-btn:disabled { opacity: .6; cursor: default; }
.ug-verif-x { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: #9aa0ae; font-size: .9rem; cursor: pointer; }
.ug-verif.ok { border-color: rgba(50,213,131,.5); background: rgba(50,213,131,.1); }
@media (max-width: 380px) { .ug-verif { flex-wrap: wrap; } .ug-verif-btn { margin-left: 34px; } }

/* ── Mi plan (pase sin anuncios) ── */
.eco-plan { margin: 6px 0 18px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(90,200,250,.13), rgba(167,139,250,.08)); border: 1.5px solid rgba(90,200,250,.45); }
.eco-plan-h { display: flex; align-items: center; gap: 12px; }
.eco-plan-ic { width: 46px; height: 46px; border-radius: 14px; background: #5AC8FA; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.eco-plan-h b { display: block; font-size: 1.02rem; color: #fff; }
.eco-plan-h small { display: block; font-size: .78rem; color: #c3cad6; margin-top: 2px; }
.eco-plan-estado { margin-left: auto; padding: 3px 9px; border-radius: 99px; font-size: .66rem; font-weight: 800; letter-spacing: .05em; flex-shrink: 0; }
.eco-plan-estado.on { background: rgba(50,213,131,.18); color: #32D583; }
.eco-plan-estado.off { background: rgba(255,255,255,.08); color: #A3A8B6; }
.eco-plan-bar { height: 7px; border-radius: 7px; background: rgba(255,255,255,.08); margin: 14px 0 6px; overflow: hidden; }
.eco-plan-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5AC8FA, #32D583); border-radius: 7px; }
.eco-plan-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.eco-plan-acc button { padding: 12px; border-radius: 12px; border: 0; font-weight: 800; font-size: .85rem; cursor: pointer; font-family: inherit; }
.eco-plan-acc .p { background: #5AC8FA; color: #001522; }
.eco-plan-acc .s { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.eco-plan-acc button:only-child { grid-column: 1 / -1; }
.eco-plan-ventajas { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 5px; font-size: .82rem; color: #d6d9e0; }
.eco-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: 12px; font-size: .84rem; color: #d6d9e0; }
.eco-plan-row input { width: 42px; height: 24px; accent-color: #32D583; }
.eco-plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.eco-plan-stats div { padding: 10px; border-radius: 12px; background: rgba(0,0,0,.2); text-align: center; }
.eco-plan-stats b { display: block; font-size: 1.1rem; color: #fff; }
.eco-plan-stats small { font-size: .68rem; color: #A3A8B6; }
.eco-plan-nota { font-size: .74rem; color: #A3A8B6; line-height: 1.5; margin: 10px 0 0; }
.eco-plan-hist { margin-top: 12px; }
.eco-plan-hist summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: #5AC8FA; padding: 6px 0; }
.eco-plan-hist ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.eco-plan-hist li { display: flex; justify-content: space-between; gap: 10px; font-size: .76rem; color: #c3cad6; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.18); }
.eco-plan-hist li span:last-child { white-space: nowrap; color: #fff; font-weight: 700; }
.eco-plan-hist li.rev span:last-child { color: #ff8a8a; text-decoration: line-through; }
#eco-plan-pago { margin-top: 12px; }

/* ── Método de cobro ─────────────────────────────── */
.eco-cobro{margin-bottom:18px}
.eco-cobro-act,.eco-cobro-vacio,.eco-cobro-form{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px}
.eco-cobro-act{display:flex;align-items:center;gap:12px}
.eco-cobro-act b{display:block;font-size:.88rem;color:#eef1f6;word-break:break-word}
.eco-cobro-act small{display:block;font-size:.74rem;color:#9aa3b5;margin-top:2px}
.eco-cobro-act>div{flex:1;min-width:0}
.eco-cobro-ic{font-size:1.5rem}
.eco-cobro-vacio p{margin:0 0 10px;font-size:.85rem;color:#A3A8B6}
.eco-cobro-btn{border:1px solid rgba(255,255,255,.14);background:transparent;color:#e9ecf3;border-radius:10px;padding:9px 14px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit}
.eco-cobro-btn.p{background:#32D583;border-color:#32D583;color:#04110a}
.eco-cobro-btn:disabled{opacity:.6}
.eco-cobro-tipos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.eco-cobro-tipos button{border:1px solid rgba(255,255,255,.12);background:transparent;color:#cfd4de;border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit}
.eco-cobro-tipos button.on{background:rgba(90,200,250,.15);border-color:#5AC8FA;color:#fff}
.eco-cobro-form input,.eco-cobro-form select{width:100%;box-sizing:border-box;margin-bottom:8px;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0e1016;color:#eef1f6;font-size:.88rem;font-family:inherit}
.eco-cobro-2{display:grid;grid-template-columns:90px 1fr;gap:8px}
.eco-cobro-nota{font-size:.72rem;color:#9aa3b5;line-height:1.5;margin:4px 0 10px}
.eco-cobro-acc{display:flex;gap:8px;justify-content:flex-end}

/* ── NEXUS: cuota y desbloqueo ───────────────────── */
.nx-cuota{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px;font-size:.74rem;color:#9aa3b5;border-top:1px solid rgba(255,255,255,.06)}
.nx-cuota b{color:#e9ecf3}.nx-cuota.prem b{color:#ffcc4d}
.nx-cuota button{border:1px solid rgba(255,204,77,.35);background:rgba(255,204,77,.08);color:#ffcc4d;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:800;cursor:pointer;font-family:inherit}
.nx-upsell{margin-top:8px;padding:10px;border-radius:14px;border:1px solid rgba(255,204,77,.3);background:rgba(255,204,77,.05)}
.nx-upsell-acc{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.nx-upsell-acc button{flex:1;min-width:130px;border:0;border-radius:10px;padding:10px;font-weight:800;font-size:.8rem;cursor:pointer;font-family:inherit}
.nx-upsell-acc .uc{background:#ffcc4d;color:#2a1d00}.nx-upsell-acc .pr{background:#32D583;color:#04110a}

.tile-promo{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;background:rgba(255,204,77,.15);color:#ffcc4d;font-size:.6rem;font-weight:800;letter-spacing:.04em;vertical-align:1px}
.pf2-destacar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,204,77,.3);background:rgba(255,204,77,.06);font-size:.8rem;color:#e9e2c8}
.pf2-destacar .pf2-btn{flex:0 0 auto}

/* Contador de UpCoins compacto en móvil (la cabecera no debe desbordar) */
@media (max-width: 480px) {
  #hdr-uc { height: 34px !important; padding: 0 8px !important; gap: 3px !important; font-size: .76rem !important; }
  .hdr-actions { gap: 4px; }
}
@media (max-width: 380px) { #hdr-uc { padding: 0 6px !important; font-size: .7rem !important; } }

/* ══════════ Menú rápido radial (orbe de la cabecera) ══════════ */
.hdr-orb{position:relative;width:40px;height:40px;flex-shrink:0;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#232836,#12151c 70%);color:var(--txt);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.06),0 6px 18px -8px rgba(var(--g-rgb),.6);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.hdr-orb::before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;
  background:conic-gradient(from var(--orb-a,0deg),var(--g),var(--cy),#a78bfa,var(--g));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orbGiro 6s linear infinite;opacity:.9}
@property --orb-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes orbGiro{to{--orb-a:360deg}}
.hdr-orb:hover,.hdr-orb:focus-visible{transform:scale(1.07)}
.hdr-orb:active{transform:scale(.94)}
.hdr-orb:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
/* Ícono: 4 puntos que giran y se juntan al abrir */
.hdr-orb-ic{width:16px;height:16px;display:grid;grid-template-columns:1fr 1fr;gap:4px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hdr-orb-ic i{width:6px;height:6px;border-radius:50%;background:currentColor;transition:background .3s,transform .3s}
.hdr-orb-ic i:nth-child(1){background:var(--g)} .hdr-orb-ic i:nth-child(4){background:var(--cy)}
.hdr-orb.on .hdr-orb-ic{transform:rotate(135deg) scale(.6)}
.hdr-orb .ugn-badge{top:-4px;right:-4px}
.hdr-orb-live{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 2px var(--bg);animation:hdrLivePulse 1.6s infinite}
.hdr-orb-live[hidden]{display:none}

.ugr{position:fixed;inset:0;z-index:1150;pointer-events:none;visibility:hidden;transition:visibility 0s .45s}
.ugr.open{pointer-events:auto;visibility:visible;transition:none}
.ugr-scrim{position:absolute;inset:0;background:rgba(5,6,10,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity .3s}
.ugr.open .ugr-scrim{opacity:1}
/* Onda luminosa que se expande desde el orbe */
.ugr-glow{position:absolute;left:var(--ox);top:var(--oy);width:470px;height:470px;margin:-235px 0 0 -235px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--g-rgb),.22) 0 18%,rgba(var(--cy-rgb),.12) 38%,rgba(167,139,250,.07) 55%,transparent 70%);
  transform:scale(.1);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s}
.ugr.open .ugr-glow{transform:scale(1);opacity:1}
.ugr-core{position:absolute;left:var(--ox);top:var(--oy);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:1.35rem;color:#06210f;background:linear-gradient(135deg,var(--g),var(--cy));
  box-shadow:0 0 0 6px rgba(var(--g-rgb),.15),0 10px 30px -6px rgba(var(--g-rgb),.8);
  transform:rotate(-90deg) scale(.4);opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.ugr.open .ugr-core{transform:none;opacity:1}
.ugr-item{position:absolute;left:calc(var(--ox) + var(--x));top:calc(var(--oy) + var(--y));width:52px;height:52px;margin:-26px 0 0 -26px;padding:0;border:0;background:none;cursor:pointer;color:var(--txt);font-family:inherit;
  transform:translate(calc(var(--x) * -1),calc(var(--y) * -1)) scale(.2);opacity:0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .25s;transition-delay:calc((3 - var(--i,0)) * 25ms)}
.ugr.open .ugr-item{transform:none;opacity:1;transition-delay:calc(var(--i,0) * 45ms + 60ms)}
.ugr-bub{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),#161a22;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .2s,border-color .2s,box-shadow .2s}
.ugr-item:hover .ugr-bub,.ugr-item:focus-visible .ugr-bub{transform:scale(1.1);border-color:rgba(var(--g-rgb),.6);box-shadow:0 0 0 4px rgba(var(--g-rgb),.14),0 12px 28px -10px rgba(var(--g-rgb),.7)}
.ugr-item:focus-visible{outline:none}
.ugr-item:active .ugr-bub{transform:scale(.92)}
.ugr-oro .ugr-bub{color:#ffcc4d;border-color:rgba(255,204,77,.4)}
.ugr-item .hdr-live-dot{top:7px;right:7px}
.ugr-item .ugn-badge{top:-3px;right:-3px}
.ugr-lbl{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + var(--lx,0px)),calc(-50% + var(--ly,0px)));white-space:nowrap;pointer-events:none;
  font-size:.7rem;font-weight:800;letter-spacing:.02em;color:#e9ecf2;padding:2px 7px;border-radius:999px;background:rgba(10,11,15,.72);border:1px solid rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){
  .hdr-orb::before{animation:none}
  .ugr-item,.ugr.open .ugr-item,.ugr-glow,.ugr-core{transition:opacity .15s;transition-delay:0s}
  .ugr-item{transform:none} .ugr-glow{transform:none}
}