/* =====================
   Estilos personalizados
   ===================== */
:root {
  --pf-bg: #0b1220;
  --pf-card: #35439c;
  --pf-text: #e8edf7;
  --pf-text-strong: #ffffff;       /* texto principal brillante */
  --pf-text-muted: #cfd6e6;        /* texto secundario más visible */
  --pf-soft: rgba(255,255,255,.10);
  --pf-primary: #4f7cff;
  --pf-gradient: linear-gradient(135deg, rgba(79,124,255,.3), rgba(147,107,255,.25));
}

[data-theme="light"] {
  --pf-bg: #9c9c9c;
  --pf-card: #ffffff;
  --pf-text: #0f172a;
  --pf-text-strong: #0b1329;
  --pf-text-muted: #3e4c67;
  --pf-soft: rgba(15,23,42,.08);
  --pf-primary: #3d5cff;
  --pf-gradient: linear-gradient(135deg, rgba(61,92,255,.15), rgba(157,107,255,.12));
}

/* Aplicación general del texto */
body, .pf-card, .pf-banner, .pf-footer {
  color: var(--pf-text);
}

/* Títulos y cabeceras */
h1, h2, h3, h4, h5, h6 {
  color: var(--pf-text-strong);
}

/* Textos secundarios */
.text-secondary, .card-text, small, p {
  color: var(--pf-text-muted) !important;
}

/* Para subtítulos de episodios (T1, E1:) */
.cap-subtitle {
  color: var(--pf-text-muted);
  font-weight: 500;
}

/* Para los botones: mejora de contraste */
.btn-primary {
  color: #fff !important;
  background-color: var(--pf-primary);
  border-color: var(--pf-primary);
}

.btn-outline-secondary {
  color: var(--pf-text-muted);
  border-color: var(--pf-soft);
}
.btn-outline-secondary:hover {
  background: var(--pf-soft);
  color: var(--pf-text-strong);
}

h3, h4, h5 {
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.cap-code {
  font-weight: 700;                 /* mismo peso que el título */
  color: var(--pf-text-strong);     /* usa el mismo color brillante del título */
  font-family: var(--font-heading, inherit);
  letter-spacing: 0.02em;
  margin-right: 4px;
}

/*fin*/

html, body {
  height: 100%;
  background: var(--pf-bg);
  color: var(--pf-text);
}

.pf-nav {
  background: var(--pf-card);
  border-bottom: 1px solid var(--pf-soft);
}

.navbar-brand .logo-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--pf-primary);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 30px rgba(79,124,255,.45);
}

.pf-hero {
  min-height: 48vh;
  background: var(--pf-gradient), url('../img/fondo.jpg') center/cover no-repeat fixed;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
}

.pf-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-soft);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}

.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.pf-card-thumb {
  background-position: center;
  background-size: cover;
}

.pf-banner {
  background: var(--pf-card);
  border: 1px solid var(--pf-soft);
  box-shadow: inset 0 0 0 1px #fff(95.72% 1 0.34);
}

.pf-footer {
  border-top: 1px solid var(--pf-soft);
  background: var(--pf-card);
}

.pf-modal {
  background: var(--pf-card);
  border: 1px solid var(--pf-soft);
}

.search-wrap input {
  background: var(--pf-card);
  color: var(--pf-text);
  border: 1px solid var(--pf-soft);
}

.search-wrap input::placeholder {
  color: rgba(232,237,247,.6);
}

.btn-primary {
  background-color: var(--pf-primary);
  border-color: var(--pf-primary);
}

.card .ratio {
  background: rgba(0,0,0,.15);
}

.btn-open-here { display: none !important; }
/* === Reproductor en modal: asegura que el iframe llene el contenedor === */
#modalPlayer iframe { width: 100%; height: 100%; border: 0; display: block; }