/*
  Carrusel: Películas que más me han llegado
  Adaptador visual para temas KDE / Plasma.
  Solo CSS. No JS. No backend.
*/

:root {
  --hi-bg: var(--surface, var(--surface-1, var(--panel-bg, var(--card-bg, rgba(20, 24, 32, .72)))));
  --hi-bg-soft: var(--surface-soft, var(--surface-2, var(--glass-bg, rgba(255,255,255,.08))));
  --hi-card: var(--card-bg, var(--surface-card, var(--surface, rgba(255,255,255,.10))));
  --hi-text: var(--text, var(--text-primary, var(--foreground, inherit)));
  --hi-muted: var(--text-muted, var(--muted, var(--secondary-text, currentColor)));
  --hi-border: var(--border, var(--border-color, rgba(255,255,255,.16)));
  --hi-accent: var(--accent, var(--accent-color, var(--primary, #3daee9)));
  --hi-radius: var(--radius-xl, var(--radius, 24px));
  --hi-blur: var(--glass-blur, 18px);
}

/* Sección completa */
#humanImpactMoviesSafeSection,
.human-impact-safe-section {
  color: var(--hi-text) !important;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--hi-accent) 13%, transparent), transparent 42%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--hi-bg) 88%, transparent),
      color-mix(in srgb, var(--hi-bg-soft) 76%, transparent)
    ) !important;
  border: 1px solid color-mix(in srgb, var(--hi-border) 82%, transparent) !important;
  border-radius: var(--hi-radius) !important;
  box-shadow: var(--shadow-lg, 0 22px 70px rgba(0,0,0,.18)) !important;
  backdrop-filter: blur(var(--hi-blur)) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(var(--hi-blur)) saturate(1.12) !important;
  padding: clamp(1rem, 2vw, 1.35rem) !important;
}

/* Título y subtítulo */
#humanImpactMoviesSafeSection h1,
#humanImpactMoviesSafeSection h2,
#humanImpactMoviesSafeSection h3,
.human-impact-safe-section h1,
.human-impact-safe-section h2,
.human-impact-safe-section h3 {
  color: var(--hi-text) !important;
  text-shadow: none !important;
}

#humanImpactMoviesSafeSection .eyebrow,
.human-impact-safe-section .eyebrow {
  color: var(--hi-accent) !important;
}

#humanImpactMoviesSafeSection .human-impact-safe-subtitle,
.human-impact-safe-section .human-impact-safe-subtitle,
#humanImpactMoviesSafeSection p,
.human-impact-safe-section p {
  color: color-mix(in srgb, var(--hi-text) 78%, transparent) !important;
}

/* Rail */
#humanImpactMoviesSafeRail,
.human-impact-safe-rail {
  color: var(--hi-text) !important;
}

/* Tarjetas */
.human-impact-safe-card {
  color: var(--hi-text) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--hi-card) 92%, transparent),
      color-mix(in srgb, var(--hi-bg-soft) 76%, transparent)
    ) !important;
  border: 1px solid color-mix(in srgb, var(--hi-border) 78%, transparent) !important;
  box-shadow: var(--shadow-md, 0 16px 44px rgba(0,0,0,.18)) !important;
  backdrop-filter: blur(calc(var(--hi-blur) * .75)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(calc(var(--hi-blur) * .75)) saturate(1.08) !important;
}

/* Portadas */
.human-impact-safe-poster {
  background-color: color-mix(in srgb, var(--hi-bg-soft) 85%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--hi-border) 75%, transparent) !important;
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0,0,0,.20)) !important;
}

/* Ranking */
.human-impact-safe-rank {
  color: var(--hi-accent) !important;
  background: color-mix(in srgb, var(--hi-accent) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--hi-accent) 34%, transparent) !important;
}

/* Texto interno */
.human-impact-safe-title {
  color: var(--hi-text) !important;
}

.human-impact-safe-description,
.human-impact-safe-empty {
  color: color-mix(in srgb, var(--hi-text) 76%, transparent) !important;
}

/* Botón */
.human-impact-safe-action {
  background: var(--hi-accent) !important;
  color: var(--accent-contrast, var(--button-text, #06111b)) !important;
  border: 1px solid color-mix(in srgb, var(--hi-accent) 45%, transparent) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--hi-accent) 22%, transparent) !important;
}

.human-impact-safe-action:hover {
  filter: brightness(1.06) saturate(1.08);
  transform: translateY(-1px);
}

/* Link "Ver Jellyfin" */
#humanImpactMoviesSafeSection .text-link,
.human-impact-safe-section .text-link {
  color: var(--hi-accent) !important;
}

/* Tema claro: quitar sensación de bloque oscuro */
html[data-theme*="light" i] #humanImpactMoviesSafeSection,
body[data-theme*="light" i] #humanImpactMoviesSafeSection,
html[data-theme*="otto" i] #humanImpactMoviesSafeSection,
body[data-theme*="otto" i] #humanImpactMoviesSafeSection {
  box-shadow: 0 18px 58px rgba(20, 24, 32, .11) !important;
}

html[data-theme*="light" i] .human-impact-safe-card,
body[data-theme*="light" i] .human-impact-safe-card,
html[data-theme*="otto" i] .human-impact-safe-card,
body[data-theme*="otto" i] .human-impact-safe-card {
  box-shadow: 0 14px 34px rgba(20, 24, 32, .10) !important;
}

/* Móvil */
@media (max-width: 760px) {
  #humanImpactMoviesSafeSection,
  .human-impact-safe-section {
    border-radius: 18px !important;
    padding: .9rem !important;
  }

  .human-impact-safe-card {
    border-radius: 20px !important;
  }
}