/* Pelis — portada con banner, tiles de poster y ficha de titulo */

/* ── Banner superior ── */
.mm-hero{
  position:relative; overflow:hidden; border-radius:8px; margin-bottom:16px;
  min-height:260px; display:flex; align-items:flex-end;
  background:#1d2630 center/cover no-repeat;
}
.mm-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.1) 100%);
}
.mm-hero-cnt{ position:relative; padding:22px 26px; max-width:720px; color:#fff; }
.mm-hero h2{ color:#fff; margin:0 0 4px; font-size:30px; font-weight:700; }
.mm-hero .mm-hero-meta{ font-size:13px; opacity:.8; margin-bottom:8px; }
.mm-hero p{ font-size:14px; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mm-hero-vacio{ min-height:160px; background:linear-gradient(135deg,#243447,#1b2530); }

/* ── Tiles de poster (.lst-item) ── */
.lst-item{
  position:relative; display:block; aspect-ratio:2/3; overflow:hidden; border-radius:6px;
  background:#2b3a4a center/cover no-repeat; color:#fff; text-decoration:none;
  transition:transform .12s, box-shadow .12s;
}
.lst-item:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.45); color:#fff; }
.lst-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; color:#8fa3b8; }
/* titulo siempre visible, abajo */
.lst-name{
  position:absolute; left:0; right:0; bottom:0; padding:26px 8px 6px;
  font-size:12px; font-weight:600; line-height:1.15;
  background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,0));
}
/* detalle al pasar el mouse (solo en equipos con mouse) */
.lst-cnt{
  position:absolute; inset:0; padding:10px; display:none; flex-direction:column; justify-content:center;
  text-align:center; font-size:12px; background:rgba(0,0,0,.78);
}
.lst-cnt .btn{ margin-top:10px; }
@media (hover:hover){ .lst-item:hover .lst-cnt{ display:flex; } }
/* numero (archivos / capitulos) abajo-izquierda sobre el titulo, como en la version vieja */
.lst-info{
  position:absolute; left:6px; bottom:3px; font-size:10px; font-weight:700; z-index:2;
  text-shadow:0 0 3px #000; opacity:.9;
}
.lst-name.con-info{ padding-bottom:20px; }
.lst-tag{
  position:absolute; top:6px; left:6px; font-size:10px; background:rgba(0,0,0,.65); padding:1px 6px; border-radius:10px;
}

/* ── Ficha del titulo ── */
.mm-ficha .img img{ width:100%; border-radius:8px; background:#2b3a4a; aspect-ratio:2/3; object-fit:cover; }
.mm-ficha h1{ font-size:28px; text-align:center; margin-bottom:12px; }
.mm-ficha h1 small{ display:block; font-size:14px; opacity:.7; font-weight:400; }
.mm-ficha .sinopsis{ font-size:14px; font-weight:400; opacity:.9; margin-bottom:12px; }
.mm-ficha .detags{ margin-bottom:10px; }
.mm-ficha .detags b{ display:block; }
.mm-ficha .detags span{ opacity:.8; font-size:13px; }
.mm-temp-titulo{ text-align:center; font-size:20px; margin:22px 0 10px; }
.mm-caps{ text-align:center; }
.mm-caps .btn-group, .mm-caps > .btn{ margin:0 4px 12px; }
.mm-caps .abtn{ min-width:150px; }

@media (max-width:575.98px){
  .mm-hero{ min-height:200px; }
  .mm-hero h2{ font-size:22px; }
  .mm-hero-cnt{ padding:14px 16px; }
  .mm-ficha h1{ font-size:22px; }
  .mm-ficha .img .lst-item, .mm-ficha .img img{ max-width:170px !important; }
  .mm-caps .abtn{ min-width:0; }
}

/* ── Listas del tema: color legible en oscuro ──
   El tema fija .list-group-item-action{color:#3e4853} (gris oscuro) sobre fondo transparente,
   asi que en el tema oscuro no se lee. Se alinean con las mismas variables que usa .text-body. */
.list-group-item,
.list-group-item-action{ color: var(--bs-body-color); }
.list-group-item-action:hover,
.list-group-item-action:focus,
.list-group-item-action.active{ color: var(--bs-body-color); }
.list-group-item small,
.list-group-item .text-body-secondary{ color: var(--bs-secondary-color); }
.list-group-item .text-body{ color: var(--bs-body-color); }

/* ── Modal Enviar a TV ── */
#mmTvModal .list-group-item{ background:transparent; color:var(--bs-body-color); border-color:rgba(127,127,127,.25); }
#mmTvModal .list-group-item small{ color:inherit; }
#mmTvModal .list-group-item-action:hover{ background:rgba(127,127,127,.15); }