/* ════════════════════════════════════════════════════════════════
   NEXO APP — Hub Multimedia Premium
   NeumaticOS SaaS v8 · Desacoplado · Cinematográfico
════════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────── */
#page-nexo_app {
  --nx-bg:          #09090f;
  --nx-bg2:         #0d0d15;
  --nx-sidebar-bg:  rgba(10,10,18,0.96);
  --nx-card:        rgba(18,18,26,0.92);
  --nx-card-hover:  rgba(26,26,36,0.98);
  --nx-elevated:    rgba(22,22,32,0.95);

  --nx-purple:      #8248ff;
  --nx-purple2:     #a678ff;
  --nx-purple-glow: rgba(130,72,255,0.22);
  --nx-cyan:        #22d3ee;
  --nx-green:       #22c55e;
  --nx-red:         #ef4444;
  --nx-amber:       #f59e0b;

  --nx-text:        #f0f0f8;
  --nx-text2:       #a0a0b8;
  --nx-text3:       #60607a;
  --nx-border:      rgba(255,255,255,0.06);
  --nx-border2:     rgba(255,255,255,0.10);

  --nx-radius:      12px;
  --nx-radius-lg:   18px;
  --nx-radius-xl:   24px;

  --nx-shadow:      0 8px 32px rgba(0,0,0,0.55);
  --nx-shadow-lg:   0 20px 60px rgba(0,0,0,0.70);
  --nx-glow:        0 0 40px rgba(130,72,255,0.25);

  font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;
  color: var(--nx-text);
  background: var(--nx-bg);
  padding: 0 !important;
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* ── Layout grid ─────────────────────────────────────────────── */
.nexo-app {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  height: 100%;
  background: radial-gradient(circle at 15% 25%, rgba(43,16,85,0.55) 0%, #09090f 45%, #050507 100%);
  position: relative;
  overflow: hidden;
}

/* Glow ambiental de fondo */
.nexo-app::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(130,72,255,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.nexo-app::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: 200px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Sidebar izquierda ───────────────────────────────────────── */
.nexo-sidebar {
  background: var(--nx-sidebar-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--nx-border);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  scrollbar-width: none;
}
.nexo-sidebar::-webkit-scrollbar { display: none; }

/* Logo */
.nexo-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--nx-border);
  flex-shrink: 0;
}
.nexo-logo-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #8248ff, #a678ff);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  box-shadow: 0 4px 16px rgba(130,72,255,0.45);
  flex-shrink: 0;
}
.nexo-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nexo-logo-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.nexo-logo-tag {
  font-size: 8px;
  font-weight: 700;
  color: var(--nx-purple2);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Nav groups */
.nexo-nav {
  padding: 12px 10px;
  flex: 1;
}
.nexo-nav-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--nx-text3);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 8px 6px;
  display: block;
}

.nexo-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 13px;
  font-weight: 500;
  color: var(--nx-text2);
  margin-bottom: 2px;
  border: 1px solid transparent;
  position: relative;
}
.nexo-nav-item:hover {
  background: rgba(130,72,255,0.10);
  color: var(--nx-text);
}
.nexo-nav-item.active {
  background: linear-gradient(90deg, rgba(130,72,255,0.28), rgba(130,72,255,0.08));
  color: #fff;
  border-color: rgba(130,72,255,0.22);
  box-shadow: 0 0 20px rgba(130,72,255,0.15);
}
.nexo-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 2.5px;
  background: var(--nx-purple);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(130,72,255,0.6);
}
.nexo-nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.8;
}
.nexo-nav-item.active .nexo-nav-icon { opacity: 1; }

/* Sidebar footer */
.nexo-sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--nx-border);
  flex-shrink: 0;
}
.nexo-user-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(130,72,255,0.08);
  border: 1px solid var(--nx-border);
  cursor: pointer;
  transition: background 0.18s ease;
}
.nexo-user-card:hover { background: rgba(130,72,255,0.14); }
.nexo-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8248ff, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.nexo-user-info { flex: 1; overflow: hidden; }
.nexo-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-user-plan {
  font-size: 9px;
  color: var(--nx-amber);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ── Main area ───────────────────────────────────────────────── */
.nexo-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Navbar */
.nexo-navbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--nx-border);
  background: rgba(9,9,15,0.80);
  backdrop-filter: blur(12px);
}
.nexo-search-wrap {
  flex: 1;
  position: relative;
}
.nexo-search {
  width: 100%;
  height: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  color: var(--nx-text);
  font-size: 13px;
  padding: 0 40px 0 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.nexo-search::placeholder { color: var(--nx-text3); }
.nexo-search:focus {
  outline: none;
  border-color: rgba(130,72,255,0.45);
  box-shadow: 0 0 0 3px rgba(130,72,255,0.10);
}
.nexo-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-text3);
  pointer-events: none;
}
.nexo-navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nexo-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nx-border);
  color: var(--nx-text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.nexo-nav-btn:hover { background: rgba(130,72,255,0.12); color: var(--nx-text); }
.nexo-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  background: var(--nx-purple);
  border-radius: 50%;
  border: 1.5px solid var(--nx-bg);
}
.nexo-navbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8248ff, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  border: 2px solid rgba(130,72,255,0.4);
  transition: border-color 0.18s;
}
.nexo-navbar-avatar:hover { border-color: var(--nx-purple); }

/* Content scroll area */
.nexo-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(130,72,255,0.3) transparent;
  padding-bottom: 32px;
}
.nexo-content::-webkit-scrollbar { width: 4px; }
.nexo-content::-webkit-scrollbar-track { background: transparent; }
.nexo-content::-webkit-scrollbar-thumb { background: rgba(130,72,255,0.3); border-radius: 4px; }

/* ── Hero ────────────────────────────────────────────────────── */
.nexo-hero {
  position: relative;
  height: 320px;
  overflow: hidden;
  flex-shrink: 0;
}
.nexo-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.nexo-hero-slide.active { opacity: 1; }
.nexo-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.nexo-hero-slide.active .nexo-hero-bg { transform: scale(1); }
.nexo-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,5,7,0.92) 0%, rgba(5,5,7,0.55) 50%, rgba(5,5,7,0.20) 100%),
              linear-gradient(0deg, rgba(5,5,7,0.85) 0%, transparent 60%);
}
.nexo-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nexo-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--nx-purple2);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.nexo-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.5px;
  max-width: 420px;
}
.nexo-hero-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.70);
  max-width: 360px;
  line-height: 1.5;
}
.nexo-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--nx-text2);
}
.nexo-hero-meta-dot { width: 3px; height: 3px; background: var(--nx-text3); border-radius: 50%; }
.nexo-hero-rating {
  color: var(--nx-amber);
  font-weight: 700;
}
.nexo-hero-btns {
  display: flex;
  gap: 10px;
  align-items: center;
}
.nexo-btn-primary {
  height: 38px;
  padding: 0 20px;
  background: linear-gradient(135deg, #8248ff, #a678ff);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(130,72,255,0.40);
}
.nexo-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(130,72,255,0.55);
}
.nexo-btn-ghost {
  height: 38px;
  padding: 0 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  backdrop-filter: blur(8px);
}
.nexo-btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }

/* Hero dots */
.nexo-hero-dots {
  position: absolute;
  bottom: 14px;
  right: 24px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.nexo-hero-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: all 0.25s ease;
}
.nexo-hero-dot.active {
  width: 18px;
  border-radius: 3px;
  background: #fff;
}

/* Branding hero (sin TMDB) */
.nexo-hero-brand-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(130,72,255,0.35) 0%, transparent 65%),
              radial-gradient(ellipse at 80% 30%, rgba(34,211,238,0.15) 0%, transparent 55%),
              #09090f;
}
.nexo-hero-brand-logos {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  flex-wrap: wrap;
}
.nexo-hero-app-badge {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  letter-spacing: 0.3px;
}

/* ── Scroll rows ─────────────────────────────────────────────── */
.nexo-section {
  padding: 24px 24px 0;
}
/* Línea divisoria entre secciones consecutivas — el selector de hermano
   adyacente hace que nunca aplique a la primera sección de una página
   (hero, header), sin tener que tocar cada renderer individualmente. */
.nexo-section + .nexo-section {
  border-top: 1px solid var(--nx-border);
  margin-top: 8px;
  padding-top: 24px;
}
.nexo-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.nexo-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--nx-text);
  letter-spacing: -0.2px;
}
.nexo-section-link {
  font-size: 11px;
  color: var(--nx-purple2);
  cursor: pointer;
  transition: color 0.15s;
  font-weight: 500;
}
.nexo-section-link:hover { color: #fff; }

.nexo-scroll-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nexo-scroll-row::-webkit-scrollbar { display: none; }

/* ── App cards ───────────────────────────────────────────────── */
.nexo-app-card {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
  gap: 6px;
}
.nexo-app-card:hover {
  transform: scale(1.07) translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.16);
}
.nexo-app-card-icon {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
  text-align: center;
}
.nexo-app-card-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin-bottom: 4px;
}
.nexo-app-card-logo-lg {
  width: 34px;
  height: 34px;
}
/* Los logos de Simple Icons son monocromos (negro) — este filtro los
   fuerza a blanco para que se vean bien sobre el fondo de color de marca
   de la card. Los favicons (Disney+) ya vienen a color, no se tocan. */
.nexo-app-card-logo-white {
  filter: brightness(0) invert(1);
}
.nexo-add-app-card {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 18px;
  border: 1.5px dashed rgba(130,72,255,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s ease;
  gap: 5px;
  color: var(--nx-purple2);
  font-size: 10px;
  font-weight: 600;
}
.nexo-add-app-card:hover {
  border-color: var(--nx-purple);
  background: rgba(130,72,255,0.08);
}

/* ── Continue watching cards ─────────────────────────────────── */
.nexo-cw-card {
  flex-shrink: 0;
  width: 200px;
  border-radius: var(--nx-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  position: relative;
}
.nexo-cw-card:hover {
  transform: scale(1.03) translateY(-3px);
  box-shadow: var(--nx-shadow-lg);
  border-color: var(--nx-border2);
}
.nexo-cw-thumb {
  width: 100%;
  height: 112px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, rgba(130,72,255,0.25), rgba(22,22,32,0.9));
}
.nexo-cw-thumb-placeholder {
  width: 100%;
  height: 112px;
  background: linear-gradient(135deg, rgba(130,72,255,0.20), rgba(34,211,238,0.08), rgba(22,22,32,0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.nexo-cw-platform-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 8px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.nexo-cw-info {
  padding: 10px 12px 12px;
}
.nexo-cw-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--nx-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-cw-sub {
  font-size: 10px;
  color: var(--nx-text3);
  margin-bottom: 8px;
}
.nexo-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.nexo-progress-fill {
  height: 100%;
  background: var(--nx-purple);
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* ── Poster cards (recommended) ──────────────────────────────── */
.nexo-poster-card {
  flex-shrink: 0;
  width: 130px;
  border-radius: var(--nx-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
}
.nexo-poster-card:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.60);
  border-color: var(--nx-border2);
}
.nexo-poster-img {
  width: 100%;
  height: 195px;
  object-fit: cover;
  display: block;
  background: linear-gradient(180deg, rgba(130,72,255,0.15), rgba(22,22,32,0.95));
}
.nexo-poster-placeholder {
  width: 100%;
  height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, rgba(130,72,255,0.15), rgba(22,22,32,0.9));
}
.nexo-poster-info {
  padding: 8px 10px 10px;
}
.nexo-poster-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--nx-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nexo-poster-year {
  font-size: 10px;
  color: var(--nx-text3);
  margin-top: 3px;
}
.nexo-poster-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.22s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nexo-poster-card:hover .nexo-poster-overlay { opacity: 1; }
.nexo-play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(130,72,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.85);
  transition: transform 0.22s ease;
  box-shadow: 0 4px 16px rgba(130,72,255,0.6);
}
.nexo-poster-card:hover .nexo-play-btn { transform: scale(1); }

.nexo-hidden { display: none !important; }

/* ── Nav badge "GRATIS" (sidebar) ────────────────────────────── */
.nexo-nav-badge-free {
  margin-left: auto;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 20px;
}

/* ── Badge "GRATIS" en cards (estilo Play Store / PS Plus) ───── */
.nexo-badge-free {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(34,197,94,0.4);
}
.nexo-badge-free-sm {
  top: 8px;
  left: 8px;
  font-size: 9px;
  padding: 3px 8px;
}

/* Etiqueta neutral de fuente (YouTube, Internet Archive, Wikimedia
   Commons) — a propósito NO usa los colores/estilo de .nexo-badge-free:
   esos resultados no pasaron la curación de "Gratis", no hay que darles
   la misma sensación de confianza visual. */
.nexo-badge-source {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--nx-text2);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Duración — esquina inferior derecha de la miniatura, mismo lugar que
   usa YouTube/Netflix por convención. Fondo opaco (no glass) a propósito:
   tiene que leerse encima de cualquier miniatura, clara u oscura. */
.nexo-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.01em;
}

/* "Viendo ahora" — banner de sync en vivo entre dispositivos, arriba
   del contenido, visible en cualquier sección de Nexo. Oculto por
   defecto (display:none inline), se muestra solo cuando hay actividad
   en OTRO dispositivo de la misma cuenta. */
.nexo-now-playing-banner {
  align-items: center;
  gap: 12px;
  margin: 0 24px 16px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(130,72,255,0.14), rgba(34,211,238,0.08));
  border: 1px solid rgba(130,72,255,0.3);
  border-radius: 12px;
}
.nexo-np-icon {
  font-size: 20px;
  flex: none;
}
.nexo-np-info {
  flex: 1;
  min-width: 0;
}
.nexo-np-label {
  font-size: 10.5px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nexo-np-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-np-btn {
  flex: none;
  background: linear-gradient(90deg,#8248ff,#22d3ee);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.nexo-np-close {
  flex: none;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
}

/* Guardar en Watchlist — esquina superior derecha de la miniatura
   (source queda arriba-izquierda, duración abajo-derecha). Visible
   siempre, no solo al hover — si solo aparece al pasar el mouse nadie
   se entera de que existe la opción de guardar. */
.nexo-wl-btn-sm {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.nexo-wl-btn-sm svg { width: 12px; height: 12px; }
.nexo-wl-btn-sm:hover { background: var(--nx-purple); transform: scale(1.08); }

/* ── Banner explicativo "Gratis" ─────────────────────────────── */
.nexo-free-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, rgba(34,197,94,0.10), rgba(22,22,32,0.4));
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: var(--nx-radius);
  padding: 16px 20px;
  margin-bottom: 8px;
  color: #22c55e;
}
.nexo-free-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: 3px;
}
.nexo-free-banner-sub {
  font-size: 11.5px;
  color: var(--nx-text3);
  line-height: 1.5;
}

/* Aviso de fuente externa (Internet Archive) — deliberadamente distinto
   al banner verde de arriba, gris neutro en vez de la identidad de
   marca de Nexo, para que quede claro que es contenido servido por un
   tercero, no parte del catálogo propio. */
.nexo-free-archive-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--nx-border2);
  border-radius: var(--nx-radius);
  padding: 14px 18px;
  margin-bottom: 12px;
  font-size: 18px;
}
.nexo-free-archive-notice-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nx-text2);
  margin-bottom: 3px;
}
.nexo-free-archive-notice-sub {
  font-size: 11px;
  color: var(--nx-text3);
  line-height: 1.5;
}

/* ── Hero destacado de "Gratis" ──────────────────────────────── */
.nexo-free-hero-card {
  position: relative;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center 20%;
  background-color: var(--nx-card);
}
.nexo-free-hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,10,16,0.95) 10%, rgba(10,10,16,0.4) 55%, transparent 100%);
}
.nexo-free-hero-info {
  position: absolute;
  left: 24px;
  bottom: 20px;
  right: 24px;
  z-index: 1;
}
.nexo-free-hero-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.nexo-free-hero-year {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* ── Reproductor "Gratis" (embed de Internet Archive) ────────── */
.nexo-player-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10001;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.nexo-player-modal {
  width: 100%;
  max-width: 960px;
  background: var(--nx-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--nx-border2);
}
.nexo-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nx-border);
}
.nexo-player-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--nx-text);
}
.nexo-player-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
}
.nexo-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.nexo-player-attribution {
  padding: 10px 18px;
  font-size: 10.5px;
  color: var(--nx-text3);
  text-align: center;
}

/* ── Live channel cards ──────────────────────────────────────── */
.nexo-live-card {
  flex-shrink: 0;
  width: 160px;
  height: 96px;
  border-radius: var(--nx-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  border: 1px solid var(--nx-border);
}
/* Variante grande — grilla del submódulo "En vivo" dedicado, en vez de
   la fila horizontal chica de Inicio/Streaming. */
.nexo-live-card-lg {
  width: 100%;
  height: 150px;
}
.nexo-live-card:hover {
  transform: scale(1.04) translateY(-3px);
  box-shadow: var(--nx-shadow-lg);
  border-color: var(--nx-border2);
}
.nexo-live-bg {
  position: absolute;
  inset: 0;
}
.nexo-live-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nexo-live-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 15%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.nexo-live-content {
  position: absolute;
  inset: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nexo-live-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.nexo-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  letter-spacing: 0.3px;
  width: fit-content;
}
.nexo-live-badge-red {
  background: #cc0000;
  backdrop-filter: none;
  color: #fff;
}
.nexo-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nx-green);
  animation: nexo-pulse 1.5s infinite;
}
.nexo-live-dot-red { background: #fff; }

/* Tarjeta de resultado "estilo YouTube" — a diferencia de .nexo-live-card
   (miniatura + texto superpuesto, para canales curados/compactos), acá
   el título/canal/avatar/vistas van DEBAJO de la miniatura, como en
   youtube.com/en vivo. Usada por nexoLiveTrendingCard/nexoLiveUpcomingCard. */
.nexo-live-result-card { cursor: pointer; }
.nexo-live-result-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--nx-radius);
  overflow: hidden;
  background: var(--nx-bg2);
}
.nexo-live-result-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.25s ease;
}
.nexo-live-result-card:hover .nexo-live-result-thumb img { transform: scale(1.04); }
.nexo-live-result-badge { position: absolute; top: 8px; left: 8px; }
.nexo-live-result-meta {
  display: flex; gap: 10px; align-items: flex-start; padding-top: 10px;
}
.nexo-live-result-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--nx-bg2); border: 1px solid var(--nx-border);
}
.nexo-live-result-info { min-width: 0; flex: 1; }
.nexo-live-result-title {
  font-size: 13px; font-weight: 600; color: var(--nx-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 3px;
}
.nexo-live-result-channel { font-size: 11.5px; color: var(--nx-text2); }
.nexo-live-result-viewers { font-size: 11px; color: var(--nx-text3); margin-top: 1px; }

.nexo-live-empty {
  font-size: 12px;
  color: var(--nx-text3);
  padding: 12px 0;
}

/* ── Right panel ─────────────────────────────────────────────── */
.nexo-right-panel {
  background: var(--nx-sidebar-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--nx-border);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  scrollbar-width: none;
}
.nexo-right-panel::-webkit-scrollbar { display: none; }

.nexo-rp-section {
  padding: 16px 14px;
  border-bottom: 1px solid var(--nx-border);
}
.nexo-rp-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--nx-text3);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Trending items */
.nexo-trend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 8px;
  padding: 7px 6px;
}
.nexo-trend-item:hover { background: rgba(255,255,255,0.04); }
.nexo-trend-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--nx-text3);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.nexo-trend-thumb {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--nx-card);
  flex-shrink: 0;
}
.nexo-trend-thumb-placeholder {
  width: 40px;
  height: 56px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(130,72,255,0.25), rgba(22,22,32,0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.nexo-trend-info { flex: 1; overflow: hidden; }
.nexo-trend-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--nx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.nexo-trend-type {
  font-size: 9px;
  color: var(--nx-text3);
  margin-top: 2px;
  text-transform: capitalize;
}
.nexo-trend-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(130,72,255,0.2);
  color: var(--nx-purple2);
}

/* Music player */
.nexo-music-card {
  background: rgba(22,22,32,0.8);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 12px;
}
.nexo-music-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.nexo-music-art {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1db954, #159040);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.nexo-music-info { flex: 1; overflow: hidden; }
.nexo-music-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-music-artist {
  font-size: 10px;
  color: var(--nx-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-music-spotify {
  font-size: 8px;
  font-weight: 800;
  color: #1db954;
  background: rgba(29,185,84,0.12);
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}
.nexo-music-progress {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
  cursor: pointer;
}
.nexo-music-progress-fill {
  height: 100%;
  background: #1db954;
  border-radius: 2px;
  width: 35%;
  transition: width 0.3s ease;
}
.nexo-music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.nexo-ctrl-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--nx-text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.nexo-ctrl-btn:hover { color: #fff; transform: scale(1.1); }
.nexo-ctrl-btn.play {
  width: 34px;
  height: 34px;
  background: #1db954;
  color: #000;
}
.nexo-ctrl-btn.play:hover { background: #1ed760; }

/* Upcoming */
.nexo-upcoming-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.nexo-upcoming-item:hover { background: rgba(255,255,255,0.04); }
.nexo-upcoming-thumb {
  width: 44px;
  height: 28px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--nx-card);
  flex-shrink: 0;
}
.nexo-upcoming-thumb-ph {
  width: 44px;
  height: 28px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(130,72,255,0.2), rgba(22,22,32,0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.nexo-upcoming-info { flex: 1; overflow: hidden; }
.nexo-upcoming-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-upcoming-date {
  font-size: 9px;
  color: var(--nx-text3);
  margin-top: 1px;
}
.nexo-rp-link {
  display: block;
  font-size: 10px;
  color: var(--nx-purple2);
  cursor: pointer;
  margin-top: 10px;
  padding: 0 6px;
  transition: color 0.15s;
}
.nexo-rp-link:hover { color: #fff; }

/* Devices */
.nexo-device-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.nexo-device-item:hover { background: rgba(255,255,255,0.04); }
.nexo-device-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.nexo-device-info { flex: 1; overflow: hidden; }
.nexo-device-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-device-location {
  font-size: 10px;
  color: var(--nx-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nexo-device-status {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}
.nexo-device-status.active {
  background: rgba(34,197,94,0.15);
  color: var(--nx-green);
}
.nexo-device-status.inactive {
  background: rgba(255,255,255,0.06);
  color: var(--nx-text3);
}

/* ── Skeleton loaders ────────────────────────────────────────── */
.nexo-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: nexo-shimmer 1.5s infinite;
  border-radius: 8px;
}
.nexo-skeleton-poster   { width: 130px; height: 195px; flex-shrink: 0; border-radius: var(--nx-radius); }
.nexo-skeleton-cw       { width: 200px; height: 150px; flex-shrink: 0; border-radius: var(--nx-radius); }
.nexo-skeleton-app      { width: 80px;  height: 80px;  flex-shrink: 0; border-radius: 18px; }

/* ── Toast ───────────────────────────────────────────────────── */
.nexo-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: rgba(18,18,26,0.96);
  border: 1px solid var(--nx-border2);
  border-radius: var(--nx-radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--nx-text);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--nx-shadow-lg);
  backdrop-filter: blur(16px);
  animation: nexo-toast-in 0.3s ease;
  max-width: 320px;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes nexo-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes nexo-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes nexo-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nexo-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nexo-fade-in {
  animation: nexo-fade-in 0.4s ease forwards;
}
.nexo-fade-in-delay-1 { animation-delay: 0.08s; opacity: 0; }
.nexo-fade-in-delay-2 { animation-delay: 0.16s; opacity: 0; }
.nexo-fade-in-delay-3 { animation-delay: 0.24s; opacity: 0; }

/* ── Empty state ─────────────────────────────────────────────── */
.nexo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  color: var(--nx-text3);
  font-size: 12px;
  text-align: center;
}
.nexo-empty-icon { font-size: 28px; opacity: 0.6; }

/* ── Detail Modal ─────────────────────────────────────────────── */
.nexo-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px 40px;
}
.nexo-detail-modal {
  position: relative;
  background: #0d0d15;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  min-height: 300px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.70);
  overflow: hidden;
  margin: auto;
}
.nexo-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.65);
  color: #f0f0f8;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.nexo-detail-close:hover { background: rgba(255,255,255,0.14); }
.nexo-detail-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
  color: #a0a0b8;
  font-size: 14px;
}
.nexo-detail-backdrop {
  width: 100%;
  height: 260px;
  background-size: cover;
  background-position: center 20%;
  position: relative;
  flex-shrink: 0;
}
.nexo-detail-backdrop-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(9,9,15,0.15) 0%, rgba(13,13,21,0.95) 100%);
}
.nexo-detail-body {
  display: flex;
  gap: 24px;
  padding: 0 28px 24px;
  margin-top: -90px;
  position: relative;
  z-index: 2;
}
.nexo-detail-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.nexo-detail-poster {
  width: 148px;
  height: 222px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
.nexo-detail-poster-ph {
  width: 148px;
  height: 222px;
  border-radius: 12px;
  background: rgba(18,18,26,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  border: 2px solid rgba(255,255,255,0.08);
}
.nexo-detail-info {
  flex: 1;
  min-width: 0;
  padding-top: 64px;
}
.nexo-detail-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #f0f0f8;
  margin: 0 0 8px;
  line-height: 1.2;
}
.nexo-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #a0a0b8;
  margin-bottom: 12px;
}
.nexo-detail-rating { color: #f59e0b; font-weight: 700; }
.nexo-type-badge {
  background: rgba(130,72,255,0.22);
  color: #a678ff;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.nexo-detail-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.nexo-genre-chip {
  background: rgba(18,18,26,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  color: #a0a0b8;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.nexo-detail-overview {
  font-size: 13px;
  line-height: 1.65;
  color: #a0a0b8;
  margin: 0;
}
.nexo-wl-btn {
  width: 148px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(18,18,26,0.92);
  color: #f0f0f8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.nexo-wl-btn:hover  { background: #8248ff; border-color: #8248ff; }
.nexo-wl-btn.saved  { background: #22c55e; border-color: #22c55e; color: #fff; }
.nexo-providers-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nexo-providers-group {
  margin-bottom: 10px;
}
.nexo-providers-group:last-of-type {
  margin-bottom: 8px;
}
.nexo-providers-label {
  font-size: 10px;
  color: #a0a0b8;
  margin-bottom: 6px;
}
.nexo-providers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nexo-provider-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.10);
}
.nexo-providers-attribution {
  font-size: 10px;
  color: #64647a;
  text-decoration: none;
}
.nexo-providers-attribution:hover {
  color: #a0a0b8;
}

.nexo-detail-section {
  padding: 16px 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.nexo-detail-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #f0f0f8;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nexo-detail-trailer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.nexo-detail-trailer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.nexo-trailer-blocked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  color: var(--nx-text2);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* Cast cards */
.nexo-cast-card {
  flex-shrink: 0;
  width: 88px;
  text-align: center;
  cursor: default;
}
.nexo-cast-img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.10);
  display: block;
  margin: 0 auto 6px;
}
.nexo-cast-img-ph {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(18,18,26,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 6px;
  border: 2px solid rgba(255,255,255,0.08);
}
.nexo-cast-name { font-size: 11px; font-weight: 600; color: #f0f0f8; line-height: 1.3; }
.nexo-cast-char { font-size: 10px; color: #60607a; line-height: 1.3; margin-top: 2px; }

/* ── Explore: type + genre filters ───────────────────────────── */
.nexo-explore-type-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.nexo-type-pill {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: #a0a0b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.nexo-type-pill.active,
.nexo-type-pill:hover { background: #8248ff; border-color: #8248ff; color: #fff; }
.nexo-genre-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.nexo-genre-pill {
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #60607a;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.nexo-genre-pill:hover { color: #a0a0b8; border-color: rgba(255,255,255,0.10); }
.nexo-genre-pill.active {
  background: rgba(130,72,255,0.22);
  border-color: #8248ff;
  color: #a678ff;
  font-weight: 600;
}

/* ── Buscador de YouTube / Kids ──────────────────────────────── */
.nexo-yt-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nx-card);
  border: 1px solid var(--nx-border2);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.nexo-yt-search-bar:focus-within { border-color: #8248ff; }
.nexo-yt-search-icon { width: 20px; height: 20px; flex-shrink: 0; }
.nexo-yt-search-bar-kids { border-color: rgba(139,92,246,0.3); }

/* Buscadores que traen contenido de YouTube (submódulo YouTube, Kids) —
   contorno rojo (color de marca de YouTube) para distinguirlos a simple
   vista de otros buscadores de Nexo (violeta = catálogo propio/curado). */
.nexo-yt-search-bar.nexo-yt-search-bar-red {
  border-color: rgba(255,0,0,0.4);
  box-shadow: 0 0 0 1px rgba(255,0,0,0.08), 0 6px 24px rgba(255,0,0,0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nexo-yt-search-bar.nexo-yt-search-bar-red:focus-within {
  border-color: #ff0000;
  box-shadow: 0 0 0 3px rgba(255,0,0,0.16);
}
.nexo-yt-search-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #ff2d2d, #cc0000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 10px rgba(255,0,0,0.35);
}
.nexo-yt-search-btn:hover  { transform: scale(1.06); box-shadow: 0 4px 16px rgba(255,0,0,0.5); }
.nexo-yt-search-btn:active { transform: scale(0.95); }

/* Filtro de la pantalla inicial del submódulo YouTube (Noticias /
   Vistos recientemente / Contenido reciente) */
.nexo-yt-home-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.nexo-yt-home-filter-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--nx-text2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nexo-yt-home-filter-btn.active,
.nexo-yt-home-filter-btn:hover { background: #ff0000; border-color: #ff0000; color: #fff; }
.nexo-yt-web-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--nx-text3);
  cursor: pointer;
  margin: 0 2px 16px;
  user-select: none;
}
.nexo-yt-web-toggle input { accent-color: #8248ff; width: 15px; height: 15px; cursor: pointer; }
.nexo-yt-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.nexo-yt-filter-select {
  height: 34px;
  padding: 0 10px;
  background: var(--nx-card);
  border: 1px solid var(--nx-border2);
  border-radius: 8px;
  color: var(--nx-text);
  font-size: 12px;
  color-scheme: dark;
  cursor: pointer;
}
.nexo-yt-search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--nx-text);
  font-size: 14px;
}
.nexo-yt-search-bar input::placeholder { color: var(--nx-text3); }

.nexo-scroll-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

/* ── Carrusel: flechas de navegación sobre .nexo-scroll-row ─────── */
.nexo-scroll-wrap {
  position: relative;
}
.nexo-scroll-arrow {
  position: absolute;
  top: 0;
  bottom: 8px;
  width: 44px;
  border: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nexo-scroll-wrap:hover .nexo-scroll-arrow { opacity: 1; }
.nexo-scroll-arrow-left {
  left: 0;
  justify-content: flex-start;
  padding-left: 4px;
  background: linear-gradient(90deg, var(--nx-bg) 0%, transparent 100%);
}
.nexo-scroll-arrow-right {
  right: 0;
  justify-content: flex-end;
  padding-right: 4px;
  background: linear-gradient(270deg, var(--nx-bg) 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════════
   PERFILES — selector estilo Netflix, PIN parental, alta/edición
   de perfil con franjas etarias, pantalla de configuración.
   ══════════════════════════════════════════════════════════════ */
.nexo-profile-avatar-circle {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  flex-shrink: 0;
}
.nexo-profile-avatar-add {
  background: rgba(255,255,255,0.06);
  border: 2px dashed rgba(255,255,255,0.2);
  color: var(--nx-text3);
  font-size: 30px;
  font-weight: 300;
}

.nexo-profile-picker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--nx-bg);
  z-index: 10002;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.nexo-profile-picker { text-align: center; }
.nexo-profile-picker-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: 32px;
}
.nexo-profile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  max-width: 720px;
}
.nexo-profile-card {
  width: 120px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 8px;
  border-radius: 14px;
  transition: background 0.2s ease;
}
.nexo-profile-card:hover { background: rgba(255,255,255,0.05); }
.nexo-profile-card:hover .nexo-profile-avatar-circle { outline: 3px solid #fff; }
.nexo-profile-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text2);
  text-align: center;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nexo-profile-card-kids-badge {
  position: absolute;
  top: 4px;
  right: 12px;
  background: #22c55e;
  color: #06210f;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.3px;
}

/* PIN — modal + teclado numérico */
.nexo-pin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 10003;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.nexo-pin-modal {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--nx-card);
  border: 1px solid var(--nx-border2);
  border-radius: 18px;
  padding: 32px 24px 24px;
  text-align: center;
}
.nexo-pin-title { font-size: 17px; font-weight: 700; color: var(--nx-text); margin-bottom: 6px; }
.nexo-pin-sub { font-size: 12px; color: var(--nx-text3); line-height: 1.5; margin-bottom: 20px; }
.nexo-pin-error { font-size: 12px; color: #ef4444; margin-bottom: 12px; }
.nexo-pin-dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.nexo-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--nx-border2);
  background: transparent;
  transition: all 0.15s ease;
}
.nexo-pin-dot.filled { background: #8248ff; border-color: #8248ff; }
.nexo-pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.nexo-pin-key {
  height: 54px;
  border-radius: 12px;
  border: 1px solid var(--nx-border);
  background: rgba(255,255,255,0.05);
  color: var(--nx-text);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease;
}
.nexo-pin-key:hover { background: rgba(255,255,255,0.12); }

/* Alta/edición de perfil */
.nexo-profile-edit-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--nx-card);
  border: 1px solid var(--nx-border2);
  border-radius: 18px;
  padding: 28px;
}
.nexo-profile-edit-title { font-size: 19px; font-weight: 700; color: var(--nx-text); margin-bottom: 18px; }
.nexo-form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--nx-text3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 16px 0 8px;
}
.nexo-avatar-picker, .nexo-color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.nexo-avatar-opt {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.06);
  font-size: 19px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nexo-avatar-opt.selected { border-color: #8248ff; background: rgba(130,72,255,0.18); }
.nexo-color-opt {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.nexo-color-opt.selected { outline: 2px solid #fff; outline-offset: 2px; }
.nexo-kind-toggle { display: flex; gap: 8px; }
.nexo-kind-btn {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--nx-border2);
  background: rgba(255,255,255,0.05);
  color: var(--nx-text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.nexo-kind-btn.selected { background: #8248ff; border-color: #8248ff; color: #fff; }

/* Tarjetas de franja etaria — mismo patrón funcional que YouTube Kids
   (3 franjas, selección única), estilo visual propio. */
.nexo-kids-tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.nexo-kids-tier-card {
  border: 1px solid var(--nx-border2);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  transition: all 0.15s ease;
}
.nexo-kids-tier-card:hover { background: rgba(255,255,255,0.07); }
.nexo-kids-tier-card.selected { border-color: #22c55e; background: rgba(34,197,94,0.12); }
.nexo-kids-tier-icon { font-size: 24px; margin-bottom: 6px; }
.nexo-kids-tier-name { font-size: 11.5px; font-weight: 700; color: var(--nx-text); line-height: 1.3; }
.nexo-kids-tier-sub { font-size: 10px; color: var(--nx-text3); margin-top: 2px; }

.nexo-btn-danger { color: #ef4444 !important; border-color: rgba(239,68,68,0.35) !important; }
.nexo-btn-danger:hover { background: rgba(239,68,68,0.12) !important; }

/* Configuración → Perfiles y control parental */
.nexo-settings-profiles-list { display: flex; flex-direction: column; gap: 10px; }
.nexo-settings-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--nx-border);
  background: rgba(255,255,255,0.03);
}
.nexo-settings-profile-info { flex: 1; min-width: 0; }
.nexo-settings-profile-name { font-size: 14px; font-weight: 700; color: var(--nx-text); display: flex; align-items: center; gap: 8px; }
.nexo-settings-profile-meta { font-size: 11.5px; color: var(--nx-text3); margin-top: 2px; }

/* Sidebar/navbar restringidos en perfil Kids */
.nexo-app.nexo-kids-mode [data-kids-hide] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   MOBILE — barra de navegación inferior (patrón Netflix/YouTube),
   deliberadamente distinto al cajón-hamburguesa que usa el resto de
   la SaaS: Nexo va a vivir en su propio dominio como producto
   standalone y necesita sentirse independiente del resto de la
   plataforma desde ya. El HTML de la barra y la hoja "Más" están
   siempre en el DOM (nexoRenderLayout) — estos media queries son lo
   único que decide si se ven.
   ══════════════════════════════════════════════════════════════ */
.nexo-bottom-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  z-index: 500;
  background: rgba(10,10,18,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--nx-border2);
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nexo-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--nx-text3);
  font-size: 9.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}
.nexo-bottom-nav-item svg { width: 20px; height: 20px; }
.nexo-bottom-nav-item.active { color: var(--nx-purple2); }

.nexo-more-sheet {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 75%;
  background: var(--nx-card);
  border-top: 1px solid var(--nx-border2);
  border-radius: 18px 18px 0 0;
  z-index: 501;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
}
.nexo-more-sheet.open { transform: translateY(0); }
.nexo-more-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--nx-border);
  flex-shrink: 0;
}
.nexo-more-sheet-title { font-size: 15px; font-weight: 700; color: var(--nx-text); }
.nexo-more-sheet-head .nexo-detail-close { position: static; }
.nexo-more-sheet-list {
  overflow-y: auto;
  padding: 8px 8px calc(70px + env(safe-area-inset-bottom, 0));
}
.nexo-more-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--nx-text2);
  font-size: 14px;
  font-weight: 500;
}
.nexo-more-sheet-item.active { color: var(--nx-purple2); background: rgba(130,72,255,0.10); }
.nexo-more-sheet-item .nexo-nav-badge-free { margin-left: auto; }

@media (max-width: 768px) {
  .nexo-app { grid-template-columns: 1fr; }
  .nexo-sidebar, .nexo-right-panel { display: none; }
  .nexo-bottom-nav { display: flex; }
  .nexo-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)); }
  .nexo-hero { height: 220px; }
  .nexo-navbar { padding: 10px 14px; }

  /* Modales a pantalla completa — en desktop tienen max-width fijo
     pensado para una ventana grande, en mobile se cortarían.
     .nexo-player-overlay es compartida por el reproductor Y el modal
     de alta/edición de perfil (mismo overlay reusado en el JS). */
  .nexo-detail-overlay, .nexo-player-overlay { padding: 0; }
  .nexo-detail-modal, .nexo-player-modal, .nexo-profile-edit-modal {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .nexo-profile-picker-overlay, .nexo-pin-overlay { padding: 16px; }
  .nexo-pin-modal { max-width: 100%; }
}

@media (max-width: 480px) {
  .nexo-bottom-nav-item span { font-size: 9px; }
  .nexo-profile-grid { gap: 16px; }
  .nexo-profile-card { width: 96px; }
  .nexo-profile-avatar-circle { width: 64px; height: 64px; font-size: 30px; }
}

/* Touch: sin hover no hay forma de "pasar el mouse" para revelar las
   flechas de los carruseles — se navega con swipe nativo, mismo
   criterio que ya usa el resto de la app para @media(hover:none). */
@media (hover: none) {
  .nexo-scroll-arrow { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   EN VIVO — carrusel destacado (banner grande que rota solo + tira de
   miniaturas clickeables), mismo patrón visual que la página "En vivo"
   de YouTube.
   ══════════════════════════════════════════════════════════════ */
.nexo-envivo-hero {
  height: 340px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.nexo-envivo-hero-main {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}
.nexo-envivo-hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,10,16,0.95) 10%, rgba(10,10,16,0.35) 55%, rgba(10,10,16,0.05) 100%);
}
.nexo-envivo-hero-info {
  position: relative;
  z-index: 1;
  padding: 24px 28px 76px;
  max-width: 640px;
}
.nexo-envivo-hero-title {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.nexo-envivo-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  flex-wrap: wrap;
}
.nexo-envivo-hero-strip {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  display: flex;
  gap: 8px;
}
.nexo-envivo-hero-thumb {
  width: 84px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.nexo-envivo-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nexo-envivo-hero-thumb:hover { opacity: 0.85; }
.nexo-envivo-hero-thumb.active { opacity: 1; border-color: #fff; }

/* Título largo (video real, no nombre de canal corto) dentro de una
   tarjeta .nexo-live-card — necesita wrap + clamp, a diferencia de
   .nexo-live-name que asume texto corto tipo "TN"/"A24". */
.nexo-live-name-clamp {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .nexo-envivo-hero { height: 260px; }
  .nexo-envivo-hero-info { padding: 18px 18px 64px; }
  .nexo-envivo-hero-title { font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════
   KIDS — pestañas de nicho estilo YouTube Kids (ícono grande + label,
   roja cuando está activa).
   ══════════════════════════════════════════════════════════════ */
.nexo-kids-tabs {
  display: flex;
  gap: 28px;
  justify-content: center;
  padding: 20px 0 8px;
}
.nexo-kids-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--nx-text3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.15s ease;
}
.nexo-kids-tab-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nx-border);
  transition: all 0.15s ease;
}
.nexo-kids-tab:hover .nexo-kids-tab-icon { background: rgba(255,255,255,0.09); }
.nexo-kids-tab.active { color: #ef4444; }
.nexo-kids-tab.active .nexo-kids-tab-icon { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.4); }

/* ══════════════════════════════════════════════════════════════
   STREAMING — tarjetas de canal (en vivo o no). A diferencia de
   .nexo-live-card (chica, fila horizontal) esto es una tarjeta grande
   con info debajo del thumbnail, para el listado completo de los 16
   canales curados que siempre se muestran, estén o no transmitiendo.
   ══════════════════════════════════════════════════════════════ */
.nexo-stream-channel-card {
  flex: 0 0 260px;
  border-radius: var(--nx-radius);
  overflow: hidden;
  border: 1px solid var(--nx-border);
  background: var(--nx-card);
  transition: all 0.2s ease;
}
.nexo-stream-channel-card:hover { border-color: var(--nx-border2); transform: translateY(-2px); }
.nexo-stream-channel-thumb {
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  position: relative;
}
.nexo-stream-channel-badge { position: absolute; top: 8px; left: 8px; }
.nexo-stream-channel-avatar {
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  object-fit: cover;
  background: var(--nx-card);
}
.nexo-stream-channel-viewers { font-size: 11px; color: var(--nx-text3); margin-top: 6px; }
.nexo-stream-offline-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,0.6);
  color: var(--nx-text2);
  letter-spacing: 0.3px;
}
.nexo-stream-channel-info { padding: 12px 14px 14px; }
.nexo-stream-channel-name { font-size: 14px; font-weight: 700; color: var(--nx-text); }
.nexo-stream-channel-desc {
  font-size: 11.5px;
  color: var(--nx-text3);
  line-height: 1.5;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nexo-stream-channel-last { font-size: 11px; color: var(--nx-purple2); font-weight: 600; margin-top: 8px; }
.nexo-stream-channel-offline { opacity: 0.75; }
.nexo-stream-channel-offline:hover { opacity: 1; }

/* ── Botón "ver en vivo" sobre la tarjeta de canal (En Vivo) ─────
   La tarjeta entera lleva a la portada del canal; este botón aparte
   entra directo a lo que ya está transmitiendo. */
.nexo-live-play-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.nexo-live-card:hover .nexo-live-play-btn { opacity: 1; }
.nexo-live-play-btn:hover { background: var(--nx-purple); }

/* ── Portada de canal (detalle) — avatar circular, no poster rectangular ── */
.nexo-channel-avatar-lg {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

/* ── Lista de episodios (portada de canal) ───────────────────────
   Grilla, no scroll-row: acá el usuario está eligiendo qué ver, más
   parecido a una lista de capítulos de Netflix que a un carrusel. */
.nexo-channel-episodes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.nexo-channel-episode-card { cursor: pointer; }
.nexo-channel-episode-thumb {
  position: relative;
  border-radius: var(--nx-radius);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.nexo-channel-episode-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.nexo-channel-episode-info { padding: 8px 2px 0; }
.nexo-channel-episode-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nx-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nexo-channel-episode-date { font-size: 10.5px; color: var(--nx-text3); margin-top: 3px; }

/* ── Noticias ─────────────────────────────────────────────────── */
.nexo-news-country-bar { display: flex; gap: 8px; flex-wrap: wrap; }

.nexo-news-banner {
  display: block;
  position: relative;
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}
.nexo-news-banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.nexo-news-banner-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,9,15,0.95) 10%, rgba(9,9,15,0.25) 70%, transparent);
}
.nexo-news-banner-body { position: relative; z-index: 1; padding: 20px 24px; max-width: 720px; }
.nexo-news-banner-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-top: 6px;
  text-wrap: balance;
}
.nexo-news-banner-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  margin-top: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nexo-news-source {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nx-purple2);
}

.nexo-news-list { display: flex; flex-direction: column; gap: 2px; }
.nexo-news-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  border-radius: 10px;
  text-decoration: none;
  border-bottom: 1px solid var(--nx-border);
  transition: background 0.15s ease;
}
.nexo-news-item:hover { background: rgba(255,255,255,0.04); }
.nexo-news-item-thumb {
  width: 92px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
}
.nexo-news-item-thumb-ph { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.nexo-news-item-body { min-width: 0; }
.nexo-news-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nx-text);
  line-height: 1.4;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}