:root {
  --bg: #0b0f19;
  --bg-2: #121826;
  --card: #1a2234;
  --card-hover: #222d44;
  --text: #eef2f8;
  --muted: #93a0b4;
  --accent: #e50914;
  --accent-2: #5b8def;
  --border: #27324a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-shape { position: fixed; border-radius: 50%; filter: blur(90px); opacity: 0.18; z-index: 0; pointer-events: none; }
.shape-1 { width: 480px; height: 480px; background: var(--accent-2); top: -140px; right: -120px; }
.shape-2 { width: 380px; height: 380px; background: var(--accent); bottom: -120px; left: -100px; }

.navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: rgba(11, 15, 25, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { font-size: 22px; }
.brand h1 { font-size: 22px; letter-spacing: 0.5px; }
.brand h1 span { color: var(--accent); }

.search-container { flex: 1; display: flex; gap: 8px; min-width: 200px; }
.search-container input {
  flex: 1; background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 14px; outline: none;
}
.search-container input:focus { border-color: var(--accent-2); }
.btn-search {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 0 16px; cursor: pointer; font-size: 14px;
}
.btn-search:hover { background: #c00812; }

.nav-right { display: flex; align-items: center; gap: 10px; }

.filter-chip {
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  border-radius: 20px; padding: 7px 14px; font-size: 13px; cursor: pointer;
  transition: all 0.15s;
}
.filter-chip:hover { color: var(--text); border-color: var(--accent-2); }
.filter-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

.id-chip-btn {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: 700;
}
.id-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 80;
  display: flex; align-items: center; justify-content: center;
}
.id-card {
  width: min(380px, calc(100vw - 32px)); background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; padding: 20px;
}
.id-card h3 { margin: 0 0 8px; }
.id-card p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.id-card input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); margin-bottom: 12px;
}
.id-actions { display: flex; gap: 8px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #6b7280; }
.status-dot.online { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.status-dot.offline { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

main { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 24px; }
.hidden { display: none !important; }

.page-header { margin-bottom: 18px; }
.page-header h2 { font-size: 24px; margin-bottom: 4px; }
.page-header p { color: var(--muted); font-size: 14px; }

.novels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }

.novel-card.poster {
  position: relative;
  background: var(--card);
  border: 1px solid #1f2a44;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.novel-card.poster:hover {
  transform: translateY(-4px);
  border-color: #3a5a9a;
  box-shadow: 0 8px 22px rgba(91,141,239,0.25);
}
.poster-img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  background: #10141f;
}

/* Overlays sobre el poster */
.badge-type {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
}
.badge-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #f5c518;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.btn-fav {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: color 0.15s, transform 0.15s;
  backdrop-filter: blur(4px);
}
.btn-fav:hover { color: #f5c518; transform: scale(1.1); }
.btn-fav.active { color: #f5c518; }
.badge-quality {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: #22c55e;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(34,197,94,0.4);
}

.loading-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0; color: var(--muted); }
.spinner { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Modal de detalle ---------- */
#details-panel {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-backdrop-close { position: absolute; inset: 0; background: rgba(5, 8, 16, 0.82); backdrop-filter: blur(4px); z-index: 1; }
#details-panel .btn-close-modal {
  position: absolute; top: 16px; right: 16px; z-index: 20;
  background: var(--card); color: var(--muted); border: 1px solid var(--border);
  border-radius: 50%; width: 38px; height: 38px; cursor: pointer; font-size: 15px;
}
#details-panel .btn-close-modal:hover { color: #fff; border-color: var(--accent); }

.details-content {
  position: relative; z-index: 10;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 0 auto;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
}

.details-empty { text-align: center; color: var(--muted); padding: 40px; }

.details-content-inner { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.details-header-card {
  display: flex; gap: 24px; margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.08), rgba(20, 20, 28, 0));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.details-poster {
  width: 200px; height: 300px;
  border-radius: 12px; object-fit: cover;
  background: #10141f; flex-shrink: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.details-meta-info { flex: 1; min-width: 0; }
.media-type-badge {
  display: inline-block; background: var(--accent); color: #fff; font-size: 11px;
  font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 4px; margin-bottom: 8px;
}
.details-meta-info h3 { font-size: 24px; margin-bottom: 8px; }
.meta-row { display: flex; gap: 16px; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.details-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.genre-badge {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  color: var(--muted); font-size: 12px; padding: 4px 10px;
}

.details-section { margin-top: 16px; }
.details-section h4 { font-size: 15px; margin-bottom: 8px; color: var(--text); }
.synopsis-text { color: var(--muted); font-size: 14px; line-height: 1.6; }

.servers-list { display: flex; flex-wrap: wrap; gap: 8px; }
.server-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 16px; font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.server-btn:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- Capítulos (novelas) — cards estilo Netflix ---------- */
.chapters-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.chapter-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer; transition: all 0.2s ease;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: stretch;
}
.chapter-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.chapter-thumb {
  position: relative; width: 100%; height: 100%; min-height: 96px;
  background: #0b0f19; overflow: hidden;
}
.chapter-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.chapter-card:hover .chapter-thumb img { transform: scale(1.05); }
/* Overlay del thumb: badge EP a la izquierda, runtime a la derecha.
   Gradient sutil abajo para que el texto sea legible. */
.chapter-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 25%, transparent 60%, rgba(0, 0, 0, 0.75) 100%);
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 8px 10px;
  pointer-events: none;
}
.chapter-num-badge {
  background: rgba(229, 9, 20, 0.95); color: #fff;
  font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chapter-num-badge::before {
  content: "▶";
  font-size: 8px;
  opacity: 0.9;
}
.chapter-runtime {
  background: rgba(0, 0, 0, 0.65); color: #fff;
  font-size: 11px; font-weight: 600; padding: 4px 7px; border-radius: 6px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.chapter-runtime::before {
  content: "⏱";
  font-size: 10px;
  opacity: 0.9;
}
.chapter-play-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(229, 9, 20, 0.5);
  transition: all 0.2s ease;
  margin: auto 16px auto 0;
  flex-shrink: 0;
}
.chapter-card:hover .chapter-play-btn { transform: scale(1.08); background: #ff1a2b; }
.chapter-play-btn:hover { background: #ff1a2b; }
.chapter-body { padding: 10px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chapter-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.chapter-title {
  font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.chapter-overview {
  font-size: 12px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
  .chapter-card { grid-template-columns: 100px 1fr 44px; }
  .chapter-thumb { min-height: 70px; }
  .chapter-play-btn { width: 38px; height: 38px; font-size: 15px; margin-right: 8px; }
  .chapter-body { padding: 8px 10px; }
}

/* ---------- Reproductor ---------- */
.video-player-container { margin-bottom: 20px; background: #000; border-radius: 12px; overflow: hidden; }
.player-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--card); gap: 12px; }
.player-header span { font-size: 14px; font-weight: 600; }
.player-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.quality-selector { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.4); border-radius: 8px; padding: 3px; }
.quality-btn {
  background: transparent; color: var(--muted); border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 6px;
  transition: all 0.15s; white-space: nowrap;
  font-family: inherit;
}
.quality-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.quality-btn.active { color: #fff; background: var(--accent); box-shadow: 0 0 8px rgba(229, 9, 20, 0.3); }
.btn-close-player { background: transparent; color: var(--muted); border: none; cursor: pointer; font-size: 14px; padding: 4px 8px; }
.btn-close-player:hover { color: #fff; }

.player-wrapper { position: relative; background: #000; }
#video-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  display: block;
  background: #000;
  object-fit: contain;
}
.player-wrapper iframe#player-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  border: 0;
  display: block;
  background: #000;
}
.player-wrapper.is-iframe .player-ui,
.player-wrapper.is-iframe .player-poster,
.player-wrapper.is-iframe .player-next { display: none !important; }
.player-wrapper .loading-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 5; }
.player-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2; pointer-events: none;
}
.player-resume-hint {
  position: absolute; left: 14px; top: 14px; z-index: 7;
  background: rgba(0,0,0,0.7); color: #fff; font-size: 13px;
  padding: 6px 10px; border-radius: 8px;
}
.player-unmute {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 8; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, 0.78); color: #fff;
  font: 600 15px/1.2 inherit; padding: 12px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.player-unmute:hover { background: var(--accent, #e50914); }
.player-server-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(229, 9, 20, 0.2); color: #fff;
  border: 1px solid rgba(229, 9, 20, 0.5);
  padding: 3px 8px; border-radius: 999px;
}
.player-ui {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 28%, transparent 62%, rgba(0,0,0,0.82) 100%);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.player-wrapper.show-ui .player-ui,
.player-wrapper.is-paused .player-ui { opacity: 1; pointer-events: auto; }
.player-ui-top { padding: 12px 14px; font-size: 13px; font-weight: 600; color: #fff; }
.player-center {
  display: flex; align-items: center; justify-content: center; gap: 22px;
}
.pc-round {
  min-width: 52px; height: 52px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff; font-weight: 700; font-size: 13px;
}
.pc-round-lg { min-width: 68px; height: 68px; font-size: 22px; background: var(--accent, #e50914); }
.pc-round:hover { background: rgba(255,255,255,0.18); }
.pc-round-lg:hover { background: #f40612; }
.player-ui-bottom { padding: 8px 12px 10px; }
.player-progress { position: relative; height: 18px; display: flex; align-items: center; }
.player-buf, .player-bar {
  position: absolute; left: 0; height: 4px; border-radius: 4px; pointer-events: none;
}
.player-buf { background: rgba(255,255,255,0.28); }
.player-bar { background: var(--accent, #e50914); }
#player-seek {
  position: relative; z-index: 1; width: 100%; margin: 0; height: 18px;
  background: transparent; appearance: none; cursor: pointer;
}
#player-seek::-webkit-slider-runnable-track { height: 4px; background: rgba(255,255,255,0.22); border-radius: 4px; }
#player-seek::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; }
.player-controls {
  display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #fff; font-size: 13px;
}
.player-controls button {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 15px; padding: 6px 8px; border-radius: 8px;
}
.player-controls button:hover, .player-controls button.active { background: rgba(255,255,255,0.12); }
.player-controls button.is-disabled { opacity: 0.35; }
.player-vol { display: flex; align-items: center; gap: 4px; }
#player-vol { width: 72px; accent-color: #fff; }
.player-spacer { flex: 1; }
.player-menu-wrap { position: relative; }
.player-menu {
  position: absolute; right: 0; bottom: 38px; min-width: 140px;
  background: rgba(18,18,18,0.96); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 6px; z-index: 9;
}
.player-menu-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; color: #fff; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.player-menu-item:hover, .player-menu-item.active { background: rgba(229, 9, 20, 0.35); }
.player-next {
  position: absolute; right: 16px; bottom: 86px; z-index: 7;
}
.player-next-card {
  width: min(280px, calc(100vw - 40px));
  background: rgba(12,12,12,0.92); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 14px 16px; color: #fff;
}
.player-next-kicker { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #b3b3b3; }
.player-next-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.player-next-count { margin: 0 0 12px; font-size: 13px; color: #d0d0d0; }
.player-next-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.player-next-cancel {
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: #fff; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px;
}
@media (max-width: 640px) {
  .player-center { gap: 12px; }
  .pc-round { min-width: 44px; height: 44px; font-size: 12px; }
  .pc-round-lg { min-width: 56px; height: 56px; }
  #player-vol { width: 48px; }
  .player-controls { flex-wrap: wrap; }
  .player-next { right: 8px; left: 8px; bottom: 96px; }
}

.player-error { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: rgba(229, 9, 20, 0.12); border: 1px solid rgba(229, 9, 20, 0.4); color: #ff8a90; font-size: 14px; line-height: 1.6; }
.btn-retry { margin-top: 10px; padding: 8px 18px; border: 1px solid var(--accent); background: transparent; color: #fff; border-radius: 8px; font-size: 13px; cursor: pointer; transition: background 0.15s; }
.btn-retry:hover { background: var(--accent); }

@media (max-width: 640px) {
  main { padding: 14px; }
  .navbar { padding: 10px 14px; }
  .details-header-card { flex-direction: column; }
  .details-poster { width: 100%; max-width: 220px; }
}

/* ---------- Series — Netflix style (seasons + episodes) ---------- */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 12px;
}
.seasons-nav { display: flex; gap: 6px; }
.season-nav-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.season-nav-btn:hover { background: var(--accent); border-color: var(--accent); }
.season-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.seasons-carousel {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 12px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.seasons-carousel::-webkit-scrollbar { height: 6px; }
.seasons-carousel::-webkit-scrollbar-track { background: transparent; }
.seasons-carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.seasons-carousel::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.season-card {
  flex: 0 0 200px; min-width: 200px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--card) 0%, var(--card-hover) 100%);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  padding: 16px;
}
.season-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(229, 9, 20, 0.25);
}
.season-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(229, 9, 20, 0.3);
}
.season-card-number {
  font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -1px;
  text-align: center; line-height: 1;
}
.season-card-label {
  position: absolute; bottom: 10px; left: 12px; right: 12px;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; justify-content: space-between; align-items: center;
}
.season-card-label .ep-count {
  background: rgba(229, 9, 20, 0.2); color: #ff8a90; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
}

.episodes-count {
  background: var(--card); color: var(--muted); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600;
}

.episodes-grid {
  display: flex; flex-direction: column; gap: 8px;
}

/* ─── Lista horizontal de episodios (estilo Netflix) ─── */
.episode-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px 10px 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  min-height: 76px;
}
.episode-row:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  transform: translateX(2px);
  box-shadow: 0 4px 18px rgba(229, 9, 20, 0.12);
}
.episode-row-thumb {
  position: relative;
  width: 132px; height: 76px;
  flex-shrink: 0;
  border-radius: 7px;
  overflow: hidden;
  background: #0b0f19;
}
.episode-row-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.episode-row:hover .episode-row-thumb img { transform: scale(1.08); }
.episode-row-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff; border: 0; cursor: pointer;
  opacity: 0; transition: opacity 0.18s ease;
  font-size: 20px;
}
.episode-row:hover .episode-row-play { opacity: 1; }

.episode-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
}
.episode-row-badges {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.episode-row-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.episode-row-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--text); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.episode-row-runtime {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.episode-row-runtime::before {
  content: "⏱"; font-size: 10px; opacity: 0.85;
}

.episode-row-playbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.12);
  color: var(--accent);
  border: 1px solid rgba(229, 9, 20, 0.3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all 0.18s ease;
}
.episode-row:hover .episode-row-playbtn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(229, 9, 20, 0.5);
}
.episode-row-playbtn:hover { transform: scale(1.05); }

@media (max-width: 640px) {
  .episode-row { padding: 8px 12px 8px 8px; gap: 10px; min-height: 64px; }
  .episode-row-thumb { width: 110px; height: 64px; }
  .episode-row-playbtn { width: 34px; height: 34px; }
  .episode-row-title { font-size: 13px; }
}

@media (max-width: 640px) {
  .seasons-carousel { gap: 10px; }
  .season-card { flex: 0 0 160px; min-width: 160px; }
  .episodes-grid { grid-template-columns: 1fr; }
}

/* ---------- Novels (grid tipo movies) ---------- */

/* Ficha técnica de novela (en el detail modal) */
.novela-ficha {
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--bg-2, #0f1218);
  border: 1px solid var(--border, #1f2a44);
  border-radius: 12px;
}
.novela-ficha-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #f1f1f1);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.novela-ficha-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 0;
}
.novela-ficha-list dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #8a93a6);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 0;
}
.novela-ficha-list dd {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #f1f1f1);
  margin: 0;
  padding: 4px 0;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .novela-ficha-list { grid-template-columns: 1fr; gap: 2px 0; }
  .novela-ficha-list dt { padding-bottom: 0; }
  .novela-ficha-list dd { padding-top: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .novela-ficha-list dd:last-child { border-bottom: 0; }
}

/* Carátula visible de novela — la <img id="details-poster"> normalmente
   queda oculta en movies/series (el hero muestra la imagen grande). Para
   novelas queremos que se vea el póster de TMDB como cover. */
img#details-poster.novel-visible-poster {
  display: block;
  width: 180px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 14px 14px 14px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  float: left;
  background: var(--bg-2);
}
@media (max-width: 640px) {
  img#details-poster.novel-visible-poster {
    float: none;
    width: 130px;
    margin: 0 auto 14px;
  }
}

.novel-card {
  position: relative;
  background: var(--card);
  border: 1px solid #1f2a44;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
}
.novel-card:hover {
  transform: translateY(-4px);
  border-color: #3a5a9a;
  box-shadow: 0 8px 22px rgba(91,141,239,0.25);
}
.novel-poster {
  width: 100%;
  aspect-ratio: 2/3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
  position: relative;
  overflow: hidden;
}
.novel-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.novel-poster-emoji {
  font-size: 64px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.novel-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent-2);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.novel-chapters-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.novel-body {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
}
.novel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.novel-meta {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: auto;
}

/* ---------- Cliente TV (sidebar + secciones) ---------- */
.client-app { overflow-x: hidden; }
.app-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.sidebar {
  width: 220px; flex-shrink: 0; background: rgba(8, 10, 18, 0.96);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  padding: 18px 12px; position: sticky; top: 0; height: 100vh;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sidebar-brand strong { display: block; font-size: 18px; }
.sidebar-brand small { color: var(--muted); font-size: 11px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
  text-align: left; background: transparent; border: 0; color: var(--muted);
  padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px;
}
.nav-item:hover { background: var(--card); color: var(--text); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(229,9,20,0.25), rgba(229,9,20,0.08));
  color: #fff; border: 1px solid rgba(229,9,20,0.35);
}
.sidebar-foot { padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: rgba(11, 15, 25, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.sidebar-toggle {
  display: none; background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.app-main { flex: 1; padding: 20px 24px 40px; max-width: 1400px; width: 100%; }
.client-view { display: none; }
.client-view.active { display: block; }
.hero-banner {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 280px;
  margin-bottom: 28px; border: 1px solid var(--border);
}
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.hero-content { position: relative; z-index: 1; padding: 36px 32px; max-width: 560px; }
.hero-kicker { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 8px; }
.hero-content h2 { font-size: clamp(24px, 4vw, 36px); margin-bottom: 10px; }
.hero-content p { color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.btn-hero { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 12px 20px; font-weight: 700; cursor: pointer; }
.content-row { margin-bottom: 26px; }
.row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.row-head h3 { font-size: 18px; }
.row-more { background: transparent; border: 0; color: var(--accent-2); cursor: pointer; font-size: 13px; }
.row-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.poster-tile {
  flex: 0 0 140px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0; text-align: left; color: inherit;
}
.poster-tile img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: #10141f; }
.poster-tile-title { display: block; padding: 8px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.live-card {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; flex-shrink: 0; }
.live-name { flex: 1; font-weight: 600; }
.live-play { color: var(--accent); font-size: 13px; font-weight: 700; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform 0.2s; box-shadow: 8px 0 32px rgba(0,0,0,0.45); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .app-main { padding: 16px; }
}