:root {
  --ch-bg: #0f1115;
  --ch-card: #161a22;
  --ch-border: #262b36;
  --ch-accent: #52b54b;
  /* Alto del footer fijo, medido en tiempo real por assets/js/app.js (ver más abajo
     en este archivo, junto a main.container-fluid). Este valor es solo el de respaldo
     inicial antes de que el JS termine de medirlo. */
  --app-footer-h: 2.6rem;
}

body {
  background-color: var(--ch-bg);
  background-image: radial-gradient(circle at top right, #1a1f2b 0%, #0f1115 55%);
  min-height: 100vh;
  color: #e9edf1;
}

.navbar-brand { font-weight: 700; }

.app-navbar {
  background-color: #10131a;
  border-bottom: 1px solid var(--ch-border);
}

.app-navbar .navbar-nav .nav-link:hover,
.app-navbar .navbar-nav .nav-link:focus,
.app-navbar .navbar-nav .nav-link:active,
.app-navbar .navbar-nav .nav-link.active,
.app-navbar .navbar-nav .dropdown-toggle.show {
  color: var(--ch-purple) !important;
}

.dropdown-menu-dark .dropdown-item {
  border-left: 3px solid transparent;
  padding-left: calc(1rem - 3px);
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus,
.dropdown-menu-dark .dropdown-item.active {
  background-color: rgba(124, 58, 237, .18);
  color: var(--ch-purple) !important;
  border-left-color: var(--ch-purple);
}

.card, .poster-card {
  background-color: var(--ch-card);
  border: 1px solid var(--ch-border);
  border-radius: .6rem;
}

.poster-card {
  overflow: hidden;
  transition: transform .15s ease;
  height: 100%;
}
.poster-card:hover { transform: translateY(-4px); border-color: var(--ch-accent); }
.poster-card img { aspect-ratio: 2/3; object-fit: cover; width: 100%; }
.poster-card .poster-body { padding: .6rem .7rem; }
.poster-card .poster-title-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.poster-card .poster-title {
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.badge-vip {
  background: linear-gradient(45deg, #b8860b, #ffd700);
  color: #1b1b1b;
  font-weight: 700;
}

/* Etiqueta "4K" — dorado sólido con letras negras, junto al nombre del título */
.badge-4k {
  display: inline-block;
  flex-shrink: 0;
  background-color: #ffd700;
  color: #000;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  padding: .25em .4em;
  border-radius: .25rem;
}
h1 .badge-4k, .title-heading .badge-4k {
  font-size: .95rem;
  vertical-align: middle;
  padding: .3em .5em;
}

.badge-folder-mode {
  background-color: #ec4899;
  color: #fff;
}

/* ===== Reproductor embebido "Ver en línea" (Doodstream, etc.) ===== */
.embed-player-panel {
  display: none;
}
.embed-player-panel.is-open {
  display: block;
}

/* ===== Enlaces VIP bloqueados (usuario sin acceso VIP) ===== */
.vip-link-locked {
  opacity: .75;
  filter: grayscale(.15);
  border-style: dashed !important;
}
.vip-link-locked:hover,
.vip-link-locked:focus {
  opacity: 1;
  filter: none;
}

/* ===== Botones de descarga / "Ver en línea": tamaño acorde al dispositivo =====
   El JS (assets/js/app.js) detecta el tipo de dispositivo con matchMedia y
   agrega la clase correspondiente a <body>; aquí solo se aplica el estilo. */
body.is-mobile-view .btn-download-link {
  width: 100% !important;
  justify-content: center;
  font-size: .92rem;
  padding: .65rem 1rem;
}
body.is-mobile-view .btn-download-link i {
  font-size: 1rem;
}
body.is-tablet-view .btn-download-link {
  width: fit-content;
  font-size: 1rem;
}
body.is-desktop-view .btn-download-link {
  width: fit-content;
}

/* ===== Píldora "Carpeta completa" / "Por episodios" en la ficha pública del título ===== */
.link-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .9rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
}
.link-mode-pill--single {
  background-color: #ec4899; /* rosa, igual que en el panel admin */
}
.link-mode-pill--episodes {
  background-color: #14b8a6; /* turquesa */
}

/* ===== Barra de búsqueda (con ícono de lupa) ===== */
.search-bar-group .input-group-text {
  background-color: var(--ch-card);
  border-color: var(--ch-border);
  color: #9aa4b2;
}
.search-bar-group .form-control {
  background-color: var(--ch-card);
  border-color: var(--ch-border);
}

/* ===== Botón flotante de contacto (WhatsApp / Telegram) ===== */
.floating-contact-btn {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  animation: social-pulse 2.4s infinite;
  transition: transform .15s ease, opacity .15s ease;
}
.floating-contact-btn:hover,
.floating-contact-btn:focus {
  transform: scale(1.08);
  color: #fff;
  animation-play-state: paused;
}
.floating-contact-btn--whatsapp { background-color: #25D366; }
.floating-contact-btn--telegram { background-color: #229ED9; }

@media (max-width: 576px) {
  .floating-contact-btn {
    right: 14px;
    bottom: 104px;
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
  }
}

/* ===== Botón de favoritos (corazón) ===== */
.favorite-toggle-btn {
  position: absolute;
  top: 0;
  right: 0;
  margin: .5rem;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.favorite-toggle-btn:hover,
.favorite-toggle-btn:focus {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, .75);
  color: #fff;
}

.favorite-toggle-btn.is-active {
  color: #ff4d6d;
}

.favorite-toggle-btn:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

.favorite-toggle-btn--inline {
  position: static;
  margin: 0;
  width: 34px;
  height: 34px;
  background-color: rgba(255, 255, 255, .08);
}

.favorite-toggle-btn--inline:hover,
.favorite-toggle-btn--inline:focus {
  background-color: rgba(255, 255, 255, .18);
}

.hero-backdrop {
  background-size: cover;
  background-position: center 20%;
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
}
.hero-backdrop::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,17,21,1) 0%, rgba(15,17,21,.4) 60%, rgba(15,17,21,.1) 100%);
}
.hero-content { position: relative; z-index: 2; }

.dropdown-menu-dark { --bs-dropdown-bg: #161a22; }

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 100%; max-width: 420px; }
.brand-icon { font-size: 2.5rem; color: var(--ch-accent); }

.installer-wrapper { max-width: 720px; margin: 40px auto; }
.step-indicator .step { opacity: .4; }
.step-indicator .step.active { opacity: 1; font-weight: 600; color: var(--ch-accent); }

.vip-locked {
  background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #14110a 10px, #14110a 20px);
  border: 1px dashed #b8860b;
}

/* ===== Íconos de redes sociales (header, sitio público) ===== */
.social-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff !important;
  font-size: 1.15rem;
  text-decoration: none;
  margin: 0 3px;
  position: relative;
  animation: social-pulse 2s infinite;
  transition: transform .15s ease, opacity .15s ease;
}

.social-nav-icon:hover,
.social-nav-icon:focus {
  transform: scale(1.12);
  opacity: .9;
  color: #fff;
  animation-play-state: paused;
}

.social-nav-icon--telegram {
  background-color: #229ED9;
  box-shadow: 0 0 0 0 rgba(34, 158, 217, .6);
}

.social-nav-icon--facebook {
  background-color: #1877F2;
  box-shadow: 0 0 0 0 rgba(24, 119, 242, .6);
}

.social-nav-icon--instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 0 0 0 rgba(214, 36, 159, .6);
}

.social-nav-icon--terabox {
  background-color: #3c7cf0;
  box-shadow: 0 0 0 0 rgba(60, 124, 240, .6);
}

.social-nav-icon--whatsapp {
  background-color: #25D366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
}

/* ===== Botón "Ver todas" (Últimas películas / Últimas series en el inicio) ===== */
.btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ch-accent), #2f8f6f);
  border: none;
  box-shadow: 0 2px 10px rgba(82, 181, 75, .35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-view-all i.bi-arrow-right { transition: transform .15s ease; }
.btn-view-all:hover, .btn-view-all:focus {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(82, 181, 75, .5);
}
.btn-view-all:hover i.bi-arrow-right { transform: translateX(3px); }
@media (max-width: 420px) {
  .btn-view-all { padding: .4rem .8rem; font-size: .78rem; }
}

/* ===== Botón "Ver Tráiler" (abre el video en una ventana emergente) ===== */
.btn-trailer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.btn-trailer i { font-size: 1.15rem; }
.btn-trailer:hover, .btn-trailer:focus {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  border-color: #fff;
  transform: translateY(-1px);
}
#trailerModal .modal-content { overflow: hidden; border-radius: 10px; }

/* ===== Tráiler que se reproduce solo (sin sonido) en la ficha del título ===== */
.trailer-autoplay-wrap {
  max-width: 640px;
}
.trailer-autoplay-wrap .ratio {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.btn-trailer-unmute {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, .65);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(2px);
  animation: trailer-unmute-pulse 2s ease-in-out infinite;
}
.btn-trailer-unmute:hover {
  background: rgba(0, 0, 0, .85);
  color: #fff;
}
@keyframes trailer-unmute-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .25); }
  50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* ===== Teaser "¿Qué veo hoy?" en el inicio ===== */
.mood-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(82, 181, 75, .18), rgba(82, 181, 75, .05));
  border: 1.5px solid rgba(82, 181, 75, .35);
  border-radius: 14px;
  padding: 14px 18px;
  color: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.mood-teaser:hover { color: #fff; transform: translateY(-1px); border-color: var(--ch-accent); }
.mood-teaser-icon { font-size: 1.8rem; line-height: 1; }
.mood-teaser-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mood-teaser-text strong { font-size: 1.02rem; }
.mood-teaser-text span { font-size: .85rem; opacity: .75; }
.mood-teaser-arrow { font-size: 1.2rem; color: var(--ch-accent); transition: transform .15s ease; }
.mood-teaser:hover .mood-teaser-arrow { transform: translateX(4px); }

/* ===== "¿Qué veo hoy?" (recomendador por ánimo) ===== */
.mood-header .mood-dice {
  display: inline-block;
  animation: mood-dice-wiggle 3.5s ease-in-out infinite;
}
@keyframes mood-dice-wiggle {
  0%, 92%, 100% { transform: rotate(0deg); }
  94% { transform: rotate(-12deg); }
  96% { transform: rotate(10deg); }
  98% { transform: rotate(0deg); }
}
.btn-mood {
  background: var(--ch-card);
  border: 1.5px solid var(--ch-border);
  color: #e9ecef;
  border-radius: 10px;
  padding: .5rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  transition: all .15s ease;
}
.btn-mood:hover { border-color: var(--ch-accent); color: #fff; transform: translateY(-1px); }
.btn-mood.active {
  background: var(--ch-accent);
  border-color: var(--ch-accent);
  color: #0b0d10;
  box-shadow: 0 2px 10px rgba(82, 181, 75, .4);
}
#moodCard img#moodPoster { background: var(--ch-card); }
@media (max-width: 576px) {
  #moodCard img#moodPoster { width: 100px !important; height: 150px !important; }
}

/* ===== Botón "Anterior" (pareja del "Siguiente"/"Ver todas", en tono secundario) ===== */
.btn-view-all--prev {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--ch-accent);
  background: transparent;
  border: 1.5px solid var(--ch-accent);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn-view-all--prev i.bi-arrow-left { transition: transform .15s ease; }
.btn-view-all--prev:hover, .btn-view-all--prev:focus {
  color: #fff;
  background: var(--ch-accent);
  transform: translateY(-1px);
}
.btn-view-all--prev:hover i.bi-arrow-left { transform: translateX(-3px); }
@media (max-width: 420px) {
  .btn-view-all--prev { padding: .4rem .8rem; font-size: .78rem; }
}

@keyframes social-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .35);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-nav-icon {
    animation: none;
  }
}

/* ===== Panel admin: barra superior ===== */
:root {
  --ch-purple: #7c3aed;
  --ch-purple-hover: #6d28d9;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  padding: .6rem 1rem;
  background-color: #10131a;
  border-bottom: 1px solid var(--ch-border);
}

.admin-topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-topbar-brand {
  font-weight: 700;
  color: #e9edf1;
  text-decoration: none;
  white-space: nowrap;
}

.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
}

.admin-topbar-link {
  color: #c7ccd4;
  text-decoration: none;
  padding: .4rem .65rem;
  border-radius: .4rem;
  white-space: nowrap;
  font-size: .9rem;
}

.admin-topbar-link:hover {
  background-color: #1a1f2b;
  color: #fff;
}

.btn-purple {
  background-color: var(--ch-purple);
  border-color: var(--ch-purple);
  color: #fff;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active {
  background-color: var(--ch-purple-hover) !important;
  border-color: var(--ch-purple-hover) !important;
  color: #fff !important;
}

/* Botones de servidores/descarga (títulos y episodios): más compactos y con color sólido
   del servidor (Mega, MediaFire, etc.) en vez del contorno claro anterior. */
.btn-download-link {
  font-size: .65rem;
  padding: .18rem .35rem;
  font-weight: 600;
  border-radius: .3rem;
  line-height: 1.1;
  transition: filter .15s ease, transform .08s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  /* Estos botones usan "d-flex" para acomodar ícono + texto + ícono, pero eso
     los convierte en un contenedor a nivel de bloque que se estira a lo ancho
     del contenedor padre (p. ej. TeraBox en la ficha de una serie/película).
     Se fuerza a que solo ocupen el ancho de su contenido. */
  display: inline-flex !important;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}

.btn-download-link i {
  font-size: .65rem;
}

.btn-download-link:hover,
.btn-download-link:focus {
  filter: brightness(1.25) saturate(1.15);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.btn-download-link:active {
  transform: scale(.96);
  filter: brightness(.7) saturate(1.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4) inset;
}

/* Botón principal de descarga (p. ej. TeraBox) en la ficha pública: más grande,
   ancho y llamativo, para que sea el CTA (call-to-action) más visible de la página. */
.btn-download-primary {
  font-size: 0.73rem;
  padding: .63rem 1.22rem;
  min-width: 182px;
  border-radius: .42rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4), 0 0 0 2px rgba(255, 255, 255, .12) inset;
}

.btn-download-primary i {
  font-size: 0.91rem;
}

.btn-download-primary:hover,
.btn-download-primary:focus {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .2) inset;
}

.btn-download-primary:active {
  transform: translateY(0) scale(.97);
}

/* En tablets pequeñas (lg), reducir tamaño del botón */
@media (max-width: 992px) {
  .btn-download-primary {
    font-size: 0.65rem;
    padding: .5rem .95rem;
    min-width: auto;
  }
  
  .btn-download-primary i {
    font-size: 0.8rem;
  }
}

/* En móviles medianos (md), botón más compacto */
@media (max-width: 768px) {
  .btn-download-primary {
    font-size: 0.62rem;
    padding: .48rem .9rem;
    min-width: auto;
  }
  
  .btn-download-primary i {
    font-size: 0.75rem;
  }
}

/* En móviles pequeños (sm), hacer 100% ancho */
@media (max-width: 576px) {
  .btn-download-primary {
    font-size: 0.6rem;
    padding: .45rem .8rem;
    width: 100%;
    min-width: 0 !important;
    display: inline-flex !important;
  }
  
  .btn-download-primary i {
    font-size: 0.7rem;
  }
}

@media (max-width: 420px) {
  .btn-download-primary {
    min-width: 0;
    width: 100%;
    font-size: 0.58rem;
    padding: .4rem .7rem;
  }
  
  .btn-download-primary i {
    font-size: 0.65rem;
  }
}

.admin-topbar .dropdown-menu {
  max-height: 75vh;
  overflow-y: auto;
}

.admin-topbar .dropdown-item {
  border-radius: .4rem;
  padding: .5rem .75rem;
  margin-bottom: .1rem;
}

.admin-topbar .dropdown-item i {
  width: 1.25rem;
  display: inline-block;
  text-align: center;
}

.admin-topbar .dropdown-item.active {
  background-color: var(--ch-purple);
  color: #fff !important;
  font-weight: 600;
}

.admin-content {
  min-width: 0;
}

/* ===== Footer público (fijo al pie de la ventana) con redes sociales ===== */
.app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1030;
  border-top: 1px solid var(--ch-border);
  padding: .6rem 1rem;
  margin-top: 0;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, .35);
  overflow: hidden;
}

/* El color de fondo del footer viene de un "style" en línea (configurable en
   Ajustes), así que un simple ":hover { background-color: ... }" no se vería
   (el estilo en línea siempre gana). Para que el cambio de color al pasar el
   mouse SÍ sea visible sin importar el color configurado, se usa una capa
   (::before) de color superpuesta encima del fondo, con la marca y los
   íconos por encima de esa capa. */
.app-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--ch-purple);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 0;
}

.app-footer:hover::before,
.app-footer:focus-within::before {
  opacity: .6;
}

.app-footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1.25rem;
  text-align: center;
}

.app-footer-brand {
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
}

.app-footer-tagline {
  color: rgba(255, 255, 255, .75);
  font-size: .8rem;
  margin-top: -.5rem;
}

.app-footer-social {
  gap: .35rem;
  flex-wrap: wrap;
}

.app-footer-social .social-nav-icon {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .15);
}

.app-footer-social .social-nav-icon:hover,
.app-footer-social .social-nav-icon:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

/* ===== Pie de página adaptable según el tamaño de pantalla =====
   El tamaño de los íconos sociales viene de un "style" en línea configurable en Apariencia
   (puede ser cualquier valor que elija el admin), así que para que SÍ se achiquen en pantallas
   chicas hace falta ganarle a ese estilo en línea con !important en estos puntos de quiebre. */
@media (max-width: 575.98px) {
  .app-footer { padding: .5rem .6rem; }
  .app-footer-inner { gap: .3rem .6rem; }
  .app-footer-brand { font-size: .78rem; }
  .app-footer-social { gap: .3rem !important; }
  .app-footer-social .social-nav-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 1rem;
  }
}
@media (max-width: 380px) {
  .app-footer-brand { font-size: .72rem; letter-spacing: 0; }
  .app-footer-brand span { display: block; margin-top: 1px; } /* "· Instalar app" pasa a su propia línea */
  .app-footer-social .social-nav-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: .85rem;
  }
}

/* Deja espacio al final del contenido para que el footer fijo no lo tape,
   tanto en el sitio público como en el panel admin (ambos usan <main class="container-fluid">).
   --app-footer-h la calcula assets/js/app.js midiendo el footer real (varía según
   el dispositivo y cuántas líneas ocupe), así el espacio siempre es el justo y
   necesario, no un valor fijo adivinado para cada tamaño de pantalla. */
main.container-fluid {
  padding-bottom: calc(var(--app-footer-h) + 1rem) !important;
}

/* ===== Reparto - Avatares Circulares ===== */
.cast-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.cast-container::-webkit-scrollbar {
  height: 6px;
}

.cast-container::-webkit-scrollbar-track {
  background: transparent;
}

.cast-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.cast-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.cast-item {
  min-width: 100px;
}

.cast-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(60, 124, 240, 0.5);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.cast-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ===== Capturas - Una sola línea horizontal ===== */
.screenshots-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.screenshots-container::-webkit-scrollbar {
  height: 6px;
}

.screenshots-container::-webkit-scrollbar-track {
  background: transparent;
}

.screenshots-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.screenshots-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.screenshot-item {
  min-width: 250px;
  max-width: 250px;
}

.screenshot-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.screenshot-img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.capturas-enlaces-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* En tablets */
@media (max-width: 992px) {
  .capturas-enlaces-row {
    gap: 1.5rem;
  }
}

/* En móviles, apila verticalmente */
@media (max-width: 768px) {
  .capturas-enlaces-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Scroll vertical para episodios en pantallas pequeñas */
@media (max-width: 576px) {
  .capturas-enlaces-row {
    gap: 1.5rem;
  }
  
  .episodios-scroll {
    max-height: 300px !important;
  }
}
.admin-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1030;
  background-color: #10131a;
  border-top: 1px solid var(--ch-purple);
  padding: .6rem 1rem;
  text-align: center;
  font-size: .8rem;
  color: rgba(255, 255, 255, .75);
  box-shadow: 0 -3px 12px rgba(0, 0, 0, .35);
  transition: background-color .2s ease;
}

.admin-footer:hover,
.admin-footer:focus-within {
  background-color: var(--ch-purple);
}

.admin-footer strong,
.admin-footer i {
  color: #fff;
}


/* ===== Banner promocional (Admin → Banner) ===== */
.promo-banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .9rem;
  padding: .55rem 2.6rem .55rem 1rem;
  font-weight: 600;
  font-size: .92rem;
  text-align: center;
}
.promo-banner-link { font-weight: 800; text-decoration: underline; white-space: nowrap; }
.promo-banner-close {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  opacity: .7;
  cursor: pointer;
}
.promo-banner-close:hover { opacity: 1; }
@media (max-width: 576px) { .promo-banner { font-size: .82rem; padding: .5rem 2.2rem .5rem .7rem; } }

/* ===== Notificaciones del panel admin ===== */
.admin-bell { position: relative; }
.admin-bell .badge-count {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: .68rem; font-weight: 700; line-height: 18px;
  background: #dc3545; color: #fff; text-align: center;
}
.admin-toast-wrap { position: fixed; top: 70px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }