/*
  La divina comedia · Adaptador visual KDE
  Solo CSS. No JS. No backend.
  Fuerza la sección a heredar el tema activo.
*/

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

/* Detecta cualquier bloque de La divina comedia aunque cambie el nombre de clase/id */
section[id*="divina" i],
section[class*="divina" i],
section[id*="comedia" i],
section[class*="comedia" i],
#divinaComediaMount,
#divinaComediaSection,
.divina-comedia-section,
.divina-comedia,
.divine-comedy,
[data-section*="divina" i],
[data-module*="divina" i] {
  color: var(--dc-text) !important;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--dc-accent) 14%, transparent), transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--dc-bg) 88%, transparent),
      color-mix(in srgb, var(--dc-bg-soft) 78%, transparent)
    ) !important;
  border: 1px solid color-mix(in srgb, var(--dc-border) 80%, transparent) !important;
  border-radius: var(--dc-radius) !important;
  box-shadow: var(--shadow-lg, 0 22px 70px rgba(0,0,0,.22)) !important;
  backdrop-filter: blur(var(--dc-blur)) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(var(--dc-blur)) saturate(1.12) !important;
}

/* Textos principales */
section[id*="divina" i] h1,
section[id*="divina" i] h2,
section[id*="divina" i] h3,
section[class*="divina" i] h1,
section[class*="divina" i] h2,
section[class*="divina" i] h3,
section[id*="comedia" i] h1,
section[id*="comedia" i] h2,
section[id*="comedia" i] h3,
section[class*="comedia" i] h1,
section[class*="comedia" i] h2,
section[class*="comedia" i] h3,
#divinaComediaMount h1,
#divinaComediaMount h2,
#divinaComediaMount h3,
.divina-comedia h1,
.divina-comedia h2,
.divina-comedia h3,
.divine-comedy h1,
.divine-comedy h2,
.divine-comedy h3 {
  color: var(--dc-text) !important;
  text-shadow: none !important;
}

/* Descripciones y subtítulos */
section[id*="divina" i] p,
section[class*="divina" i] p,
section[id*="comedia" i] p,
section[class*="comedia" i] p,
#divinaComediaMount p,
.divina-comedia p,
.divine-comedy p {
  color: color-mix(in srgb, var(--dc-text) 86%, transparent) !important;
}

/* Tarjetas internas del carrusel */
section[id*="divina" i] article,
section[id*="divina" i] .card,
section[id*="divina" i] [class*="card" i],
section[class*="divina" i] article,
section[class*="divina" i] .card,
section[class*="divina" i] [class*="card" i],
section[id*="comedia" i] article,
section[id*="comedia" i] .card,
section[id*="comedia" i] [class*="card" i],
section[class*="comedia" i] article,
section[class*="comedia" i] .card,
section[class*="comedia" i] [class*="card" i],
#divinaComediaMount article,
#divinaComediaMount .card,
#divinaComediaMount [class*="card" i],
.divina-comedia article,
.divina-comedia .card,
.divina-comedia [class*="card" i],
.divine-comedy article,
.divine-comedy .card,
.divine-comedy [class*="card" i] {
  color: var(--dc-text) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--dc-card) 90%, transparent),
      color-mix(in srgb, var(--dc-bg-soft) 74%, transparent)
    ) !important;
  border: 1px solid color-mix(in srgb, var(--dc-border) 75%, transparent) !important;
  box-shadow: var(--shadow-md, 0 14px 36px rgba(0,0,0,.18)) !important;
  backdrop-filter: blur(calc(var(--dc-blur) * .7)) !important;
  -webkit-backdrop-filter: blur(calc(var(--dc-blur) * .7)) !important;
}

/* Etiquetas / chips */
section[id*="divina" i] .eyebrow,
section[class*="divina" i] .eyebrow,
section[id*="comedia" i] .eyebrow,
section[class*="comedia" i] .eyebrow,
#divinaComediaMount .eyebrow,
.divina-comedia .eyebrow,
.divine-comedy .eyebrow,
section[id*="divina" i] [class*="chip" i],
section[class*="divina" i] [class*="chip" i],
section[id*="comedia" i] [class*="chip" i],
section[class*="comedia" i] [class*="chip" i],
#divinaComediaMount [class*="chip" i] {
  color: var(--dc-accent) !important;
  background: color-mix(in srgb, var(--dc-accent) 13%, transparent) !important;
  border-color: color-mix(in srgb, var(--dc-accent) 35%, transparent) !important;
}

/* Botones */
section[id*="divina" i] a,
section[id*="divina" i] button,
section[class*="divina" i] a,
section[class*="divina" i] button,
section[id*="comedia" i] a,
section[id*="comedia" i] button,
section[class*="comedia" i] a,
section[class*="comedia" i] button,
#divinaComediaMount a,
#divinaComediaMount button,
.divina-comedia a,
.divina-comedia button,
.divine-comedy a,
.divine-comedy button {
  border-color: color-mix(in srgb, var(--dc-accent) 42%, transparent) !important;
}

/* Imágenes: que no se vean pegadas a un tema oscuro solamente */
section[id*="divina" i] img,
section[class*="divina" i] img,
section[id*="comedia" i] img,
section[class*="comedia" i] img,
#divinaComediaMount img,
.divina-comedia img,
.divine-comedy img {
  border: 1px solid color-mix(in srgb, var(--dc-border) 70%, transparent) !important;
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0,0,0,.22)) !important;
}

/* Tema claro: evita que queden overlays negros */
html[data-theme*="light" i] section[id*="divina" i],
html[data-theme*="light" i] section[class*="divina" i],
html[data-theme*="light" i] section[id*="comedia" i],
html[data-theme*="light" i] section[class*="comedia" i],
body[data-theme*="light" i] section[id*="divina" i],
body[data-theme*="light" i] section[class*="divina" i],
body[data-theme*="light" i] section[id*="comedia" i],
body[data-theme*="light" i] section[class*="comedia" i] {
  box-shadow: 0 18px 60px rgba(20, 24, 32, .12) !important;
}

/* Móvil */
@media (max-width: 760px) {
  section[id*="divina" i],
  section[class*="divina" i],
  section[id*="comedia" i],
  section[class*="comedia" i],
  #divinaComediaMount,
  .divina-comedia,
  .divine-comedy {
    border-radius: 18px !important;
  }
}