/* ============================================================
   LatinoMegaHD — Rediseño OSCURO + DORADO  (capa de rediseño)
   ------------------------------------------------------------
   Se carga DESPUÉS de style.css. Reasigna las variables del
   theme y reestiliza los componentes clave hacia un look
   oscuro tipo Netflix con acento dorado (#f5b50a).

   Para DESACTIVAR todo el rediseño basta con quitar el enqueue
   'lmhd-redesign-dark' en functions.php. No se tocó el theme
   original; esto solo lo pinta por encima.
   ============================================================ */

:root {
  /* --- Paleta del rediseño --- */
  --acc:        #f5b50a;   /* dorado de marca */
  --acc-text:   #2a1d00;   /* texto sobre dorado */
  --acc-hover:  #d99e06;

  --bg-page:    #0e0e12;   /* fondo general */
  --bg-surface: #16161c;   /* cajas / paneles */
  --bg-surface-2:#1a1a20;  /* chips / inputs */
  --border-soft:#23232b;   /* bordes tenues */
  --text-primary:#e6e6ea;  /* texto principal */
  --text-muted: #9a9aa5;   /* texto secundario */

  /* --- Reasignación de variables del theme original --- */
  --main-color:            var(--acc);   /* el "rojo" del theme ahora es dorado */
  --footer-background:     #0b0b0f;
  --gray-span-text-color:  #9a9aa5;
  --color-gray:            #9a9aa5;
  --footer-text-color:     #9a9aa5;
  --category-list-color:   #cfcfd6;
  --right-side-title:      #f2f2f5;
  --info-text-color:       #c9c9d2;
  --info-anchor-color:     var(--acc);
  --label-text-color-a:    #cfcfd6;
  --a-and-span-text-color: #cfcfd6;
  --i-text-color:          #cfcfd6;
  --search-text-anchor-color:#cfcfd6;
  --category-item-background:#1f1f27;
  --button-background:     #1f1f27;
  --button-text-color:     #cfcfd6;
  --button-border:         #2a2a33;
  --button-border-pagination:#2a2a33;
  --options-list-border:   #23232b;
  --border-bottom-li:      #23232b;
  --pagination-text-color: #2a1d00;
}

/* ===================== BASE ===================== */
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Ancho un poco más moderno */
#all { max-width: 1200px; }

a { color: var(--acc); }

/* ===================== CABECERA ===================== */
#top {
  background: #141419;                 /* quita el collage de fondo antiguo */
  border-bottom: 1px solid var(--border-soft);
}
/* El nav interno se alinea al mismo ancho que el contenido (#all = 1200px) */
#men { width: 100%; max-width: 1200px; margin: 0 auto; }
#navigation ul li a {
  color: var(--text-primary);
  text-transform: none;
  font-weight: 500;
}
#navigation ul li:hover a {
  background: transparent;
  color: var(--acc);
  text-shadow: none;
}
/* Buscador: OSCURO en PC, GRIS solo en móvil (en oscuro se veía invisible) */
#men .b li form input,
.live-search-input,
#searchform input,
#searchform-mobile input,
[data-theme="dark"] .live-search-input,
[data-theme="dark"] #searchform input,
[data-theme="dark"] #searchform-mobile input {
  background: var(--bg-page) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-primary) !important;
  border-radius: 20px !important;
}
@media (max-width: 768px) {
  #men .b li form input,
  .live-search-input,
  #searchform input,
  #searchform-mobile input,
  [data-theme="dark"] .live-search-input,
  [data-theme="dark"] #searchform input,
  [data-theme="dark"] #searchform-mobile input {
    background: #4f525b !important;
    border-color: #6f7380 !important;
    color: #ffffff !important;
  }
  .live-search-input::placeholder { color: #d2d5db !important; }
}

/* ---- Lupa (Font Awesome) en el buscador ---- */
#men .b li form { position: relative; }
#men .b li form::before {
  content: "\f002";                  /* fa magnifying-glass */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #a8abb3;
  font-size: 14px;
  pointer-events: none;
  z-index: 3;
}
#men .b li form input,
.live-search-input {
  text-indent: 0 !important;
  padding-left: 38px !important;     /* espacio para la lupa */
}

/* ===================== CONTENEDORES / CAJAS ===================== */
.generos,
#iz,
.sidebar #de,
#de {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft) !important;
  border-radius: 10px;
}

/* Títulos de sección: degradado dorado→naranja (estilo tabs del sitio) */
.bb_titulo {
  background: linear-gradient(135deg, var(--acc1, #ffc83d), var(--acc2, #ff8a1e));
  color: #1a1205;
  border: none;
  border-radius: 8px;
  box-shadow: 0 5px 16px rgba(255, 138, 30, .4);
  text-shadow: none;
  padding: 12px;
  font-size: 16px;
}

/* Índice A–Z y menú de categorías → chips oscuros, hover dorado */
.generos .alphabetic-list li a {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
}
.generos .alphabetic-list li a:hover {
  background: var(--acc);
  color: var(--acc-text);
}
.generos .categories a {
  background: var(--bg-surface-2);
  color: var(--text-muted);
}
.generos .categories a:hover {
  background: var(--acc);
  color: var(--acc-text);
}

/* ===================== TARJETAS DE PELÍCULA (grid) ===================== */
.estre .item a       { color: var(--text-primary); }
.estre .item a p     { color: var(--text-primary); }
.estre .item a .img,
.estre .item a .img img { border-radius: 8px; }
/* badge de peso/calidad en dorado */
.estre .item a .img span.peso {
  background: var(--acc);
  color: var(--acc-text);
  text-shadow: none;
}

/* ===================== PAGINACIÓN ===================== */
.paginacion .wp-pagenavi a {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
}
.paginacion .wp-pagenavi a:hover {
  background: var(--acc);
  color: var(--acc-text);
  border-color: var(--acc);
}
.paginacion .wp-pagenavi .current {
  background: var(--acc);
  color: var(--acc-text);
  border-color: var(--acc);
  box-shadow: none;
}

/* ===================== SIDEBAR: TOP / LISTADOS ===================== */
#de h2            { color: var(--text-primary); }
#de .b li a p     { color: var(--text-primary); }
/* número de ranking en lista de texto (.actores) en dorado */
#blo4 #de .actores li i {
  background: var(--acc);
  color: var(--acc-text);
  text-shadow: none;
}
/* número sobre la miniatura del Top: dejar ver el póster, número dorado */
#blo4 #de .b li a .im span {
  background: rgba(0,0,0,0.35);
  color: var(--acc);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
#blo4 #de .actores li        { border-bottom: 1px solid var(--border-soft); }
#blo4 #de .actores li a,
#blo4 #de .actores li span   { color: var(--text-primary); }

/* ===================== PIE DE PÁGINA ===================== */
#pie {
  background: var(--footer-background);
  color: var(--text-muted);
  text-shadow: none;
  border: 1px solid var(--border-soft);
}

/* ===================== FICHA DE PELÍCULA ===================== */
#iz .tra { background: var(--bg-surface-2); }            /* bloque del trailer */
#iz h1,
#blo4 #iz h1,
#iz .blog_post.boxed h1 {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
#iz .a            { background: var(--bg-surface-2); border-bottom: 1px solid var(--border-soft); }
#iz .a li i,
#iz .a li span    { background: var(--bg-surface-2); color: var(--text-muted); }
#iz .a li .se     { background: var(--bg-surface); color: var(--acc); border-color: var(--border-soft); }
.click            { color: var(--text-primary); }
.info_movie       { color: var(--info-text-color); border-bottom-color: var(--border-soft); }
.info_movie p i   { color: var(--text-muted); }
.info_movie a     { color: var(--acc); }
#iz #tab_1,
.post-content     { color: var(--text-primary); }

/* ===================== PÁGINA DE BÚSQUEDA ===================== */
#blo2 #iz { background: var(--bg-surface); border-color: var(--border-soft) !important; }
#blo2 .search-box input.s-box {
  background: var(--bg-page);
  color: var(--text-primary);
  border-color: var(--border-soft);
}
#blo2 .search-result li.s-item { border-bottom-color: var(--border-soft); }
#blo2 .search-result .s-box a  { color: var(--text-primary); }

/* ===================== TABLA DE DESCARGAS (clásica) ===================== */
ul.pver        { color: var(--text-primary); }
ul.pver li.ver { color: var(--text-muted); }


/* ============================================================
   OVERRIDES PARA GANARLE AL MODO OSCURO EXISTENTE (dark-mode.css)
   ------------------------------------------------------------
   Tu theme ya trae css/dark-mode.css con reglas
   [data-theme="dark"] ... !important en ROJO (#ff0000) y fondos
   #1C1F24. Aquí las sobreescribimos para imponer el negro + dorado.
   ============================================================ */

/* ---- Fondos a negro tipo Netflix ---- */
html[data-theme="dark"] body,
html[data-theme="dark"],
[data-theme="dark"] #all,
[data-theme="dark"] #blo4 {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] #iz,
[data-theme="dark"] #de,
[data-theme="dark"] .sidebar #de,
[data-theme="dark"] .generos,
[data-theme="dark"] #iz .a,
[data-theme="dark"] #iz .a li span,
[data-theme="dark"] .widget,
[data-theme="dark"] .bb {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-soft) !important;
}

/* ---- ROJO -> DORADO en hovers y estados activos ---- */
[data-theme="dark"] .categories li a:hover,
[data-theme="dark"] .generos a:hover,
[data-theme="dark"] .alphabetic-list a:hover,
[data-theme="dark"] .wp-pagenavi a:hover,
[data-theme="dark"] .wp-pagenavi span.current,
[data-theme="dark"] .generos .alphabetic-list li a:hover {
  background-color: var(--acc) !important;
  color: var(--acc-text) !important;
  border-color: var(--acc) !important;
}

/* ---- Chips de categorías y letras A–Z (estado normal) ---- */
[data-theme="dark"] .categories li a,
[data-theme="dark"] .generos a,
[data-theme="dark"] .alphabetic-list a,
[data-theme="dark"] .generos .alphabetic-list li a {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

/* ---- Títulos de sección (NOVEDADES, Subidas Recientes, etc.) ----
   Degradado dorado→naranja como los tabs del sitio (var --acc1/--acc2). */
.bb_titulo,
[data-theme="dark"] .bb_titulo {
  background: linear-gradient(135deg, var(--acc1, #ffc83d), var(--acc2, #ff8a1e)) !important;
  color: #1a1205 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 16px rgba(255, 138, 30, .4) !important;
  text-shadow: none !important;
}

/* ---- Título del carrusel "ESTRENOS DE CINE" ---- */
.carousel-title,
[data-theme="dark"] .carousel-title {
  color: var(--acc) !important;
}

/* ---- Paginación (estado normal) en oscuro ---- */
[data-theme="dark"] .wp-pagenavi a,
[data-theme="dark"] .wp-pagenavi span {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}

/* ---- Botón flotante de modo oscuro: ROJO -> DORADO ---- */
.dark-mode-toggle {
  background: var(--acc) !important;
}
.dark-mode-toggle svg { fill: var(--acc-text) !important; }

/* ---- Badge de peso/calidad y número del Top en lista de texto en dorado ---- */
[data-theme="dark"] .estre .item a .img span.peso,
[data-theme="dark"] #blo4 #de .actores li i {
  background: var(--acc) !important;
  color: var(--acc-text) !important;
  text-shadow: none !important;
}
/* ---- Número sobre la miniatura del Top: NO tapar el póster (capa translúcida) ---- */
[data-theme="dark"] #blo4 #de .b li a .im span {
  background: rgba(0,0,0,0.35) !important;
  color: var(--acc) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
}

/* ---- Enlaces dorados dentro de cajas oscuras ---- */
[data-theme="dark"] .info_movie a,
[data-theme="dark"] #de a:hover { color: var(--acc) !important; }

/* ---- Botones de categoría: OSCUROS por defecto, degradado dorado→naranja SOLO en hover ---- */
.generos .categories a,
.generos .ge a,
[data-theme="dark"] .generos .categories a,
[data-theme="dark"] .generos .ge a,
[data-theme="dark"] .categories li a {
  background: var(--bg-surface-2) !important;
  color: #949494 !important;            /* color original de las letras (gris) */
  border: 1px solid var(--border-soft) !important;
  text-shadow: none !important;
}
.generos .categories a:hover,
.generos .ge a:hover,
[data-theme="dark"] .generos .categories a:hover,
[data-theme="dark"] .generos .ge a:hover,
[data-theme="dark"] .categories li a:hover {
  background: linear-gradient(135deg, var(--acc1, #ffc83d), var(--acc2, #ff8a1e)) !important;
  color: #1a1205 !important;
  border-color: transparent !important;
}

/* ============================================================
   FICHA DE PELÍCULA — forzar oscuro + dorado
   ============================================================ */

/* Barra del título de la peli: rojo -> oscuro con texto dorado */
#iz h1,
#blo4 #iz h1,
#iz .blog_post.boxed h1,
[data-theme="dark"] #iz h1,
[data-theme="dark"] #blo4 #iz h1 {
  background: #16161c !important;
  color: #f5b50a !important;
}

/* Marco del tráiler: oscuro + esquinas redondeadas (antes quedaban cuadradas arriba) */
#iz .tra,
[data-theme="dark"] #iz .tra {
  background: #16161c !important;
  border-radius: 10px !important;
  overflow: hidden;
}

/* Barra de pestañas (Descargar / Editar Película): clara -> oscura */
#iz .a,
#iz .a li span,
[data-theme="dark"] #iz .a,
[data-theme="dark"] #iz .a li span {
  background: #1a1a20 !important;
  color: #cfcfd6 !important;
}
/* Pestaña activa "Descargar" con acento dorado */
#iz .a li .se,
[data-theme="dark"] #iz .a li .se {
  background: #16161c !important;
  color: #f5b50a !important;
}

/* Enlaces de datos de la ficha (año, calidad, guion, reparto…) en dorado */
.info_movie a,
.info_movie.has-backdrop a,
[data-theme="dark"] .info_movie a,
[data-theme="dark"] .info_movie.has-backdrop a {
  color: #f5b50a !important;
}

/* "1080P" celeste de las pills de MediaInfo -> dorado */
.pill-quality,
[data-theme="dark"] .pill-quality {
  color: #f5b50a !important;
}

/* Títulos rojos dentro del contenido (ej. CONTRASEÑA PARA DESCOMPRIMIR) -> dorado */
#iz .post-content h1,
#iz .post-content h2,
#iz .post-content h3,
#iz .post-content h4,
#iz .post-content h5,
#iz .post-content h6 {
  color: #f5b50a !important;
}

/* Línea divisoria roja del contenido -> dorada tenue */
#iz .post-content hr {
  border-color: rgba(245,181,10,.45) !important;
}

/* Ocultar la barra de compartir (Facebook / Twitter) del post */
.rdsocial { display: none !important; }

/* Tráiler con esquinas redondeadas */
#iz .tra .embed,
#iz .tra .embed iframe,
#iz .tra iframe { border-radius: 10px !important; overflow: hidden; }

/* Cuadro de datos (póster + info): 400px, centrado vertical y con espacio a los lados (PC) */
@media (min-width: 931px) {
  #iz .info_movie {
    min-height: 400px !important;
    align-content: center !important;
    align-items: center !important;
    padding: 20px 25px !important;   /* 20 arriba/abajo, 25 a los lados */
  }
}

/* ===================== MENÚ / NAVEGACIÓN ===================== */
/* Bordes rojos -> dorados al pasar/tocar (escritorio y móvil) */
#navigation .ge > li > a:hover,
#navigation .ge .sub-menu a:hover,
#navigation .ge .has-submenu.active > a {
  border-color: var(--acc) !important;
}
/* Menú móvil: fondo acorde al tema oscuro */
@media (max-width: 768px) {
  #navigation.for-mobile .ge > li > a { background: #1a1a20 !important; }
  #navigation.for-mobile .ge .sub-menu { background: #0e0e12 !important; }
}

/* ===================== OCULTAR ELEMENTOS ===================== */
/* Fila del abecedario (A–Z) del inicio — no se usa */
.generos:has(.alphabetic-list) { display: none !important; }
.alphabetic-list { display: none !important; }

/* ===================== PAGINACIÓN ===================== */
/* Esquinas redondeadas en TODOS los botones (el activo salía cuadrado) */
.paginacion .wp-pagenavi a,
.paginacion .wp-pagenavi span,
.paginacion .wp-pagenavi .current,
[data-theme="dark"] .wp-pagenavi a,
[data-theme="dark"] .wp-pagenavi span,
[data-theme="dark"] .wp-pagenavi .current {
  border-radius: 6px !important;
}

/* ============== CARRUSEL "ESTRENOS DE CINE" ============== */
/* Póster completo (antes se recortaba): 140px ancho → 210px alto (2:3) */
#car_top .movie-poster { height: 210px !important; }

/* Hover de portadas: borde + brillo ROJO -> DORADO (tarjetas y carrusel Estrenos) */
.item:hover .img,
#car_top .carousel-item .movie-poster:hover,
#car_top .carousel-item:hover .movie-poster,
#car_top .carousel-item a:hover img {
  border-color: #f5b50a !important;
  box-shadow: 0 0 20px rgba(245, 181, 10, 0.5) !important;
}

/* Capturas de pantalla: 2 por fila en PC (más grandes). Móvil sin tocar. */
@media (min-width: 769px) {
  .screenshots-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Altura del tráiler en PC (sube/baja el 450px a tu gusto). Móvil sin tocar. */
@media (min-width: 769px) {
  #iz .tra iframe { height: 450px !important; }
}

/* ============== CATEGORÍAS DESPLEGABLES (SOLO MÓVIL) ============== */
.lmhd-cat-toggle { display: none; }   /* el checkbox interno, oculto */
.lmhd-cat-btn    { display: none; }   /* botón "Ver categorías": oculto en PC */

@media (max-width: 768px) {
  /* Botón "Ver categorías" */
  .lmhd-cat-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #1a1a20; color: #f5b50a;
    border: 1px solid #23232b; border-radius: 8px;
    padding: 12px; margin: 8px 0; cursor: pointer; font-weight: 500;
    -webkit-user-select: none; user-select: none;
  }
  .lmhd-cat-arrow { transition: transform .25s ease; font-size: 12px; }
  .lmhd-cat-toggle:checked ~ .lmhd-cat-btn .lmhd-cat-arrow { transform: rotate(180deg); }

  /* Contenedor colapsable: cerrado por defecto, se abre al tocar el botón */
  .lmhd-cat-wrap {
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .lmhd-cat-toggle:checked ~ .lmhd-cat-wrap { max-height: 2000px; }

  /* Límites en móvil: 20 géneros y 6 calidades */
  .cat-generos .categories li:nth-child(n+21)   { display: none; }
  .cat-calidades .categories li:nth-child(n+7)  { display: none; }
}

/* ===== Secciones de 5 ítems (4K, Series, Remux) en móvil: sin fila coja ===== */
/* Si una sección tiene EXACTAMENTE 5 tarjetas, en móvil oculta la 5ª -> queda 2x2.
   En PC se siguen viendo las 5. */
@media (max-width: 768px) {
  .estre .item:nth-child(5):last-child { display: none !important; }
}

/* ============================================================
   WIDGETS DEL SIDEBAR — rediseño
   (Pasaron por el cine, Top Descargas, Resubidas VIP, Placebomania,
    Pelis Relacionadas, Publicaciones Recientes)
   ============================================================ */

/* --- Tarjeta del widget --- */
#de { padding: 0 !important; margin-bottom: 14px !important; overflow: hidden; }

/* --- Cabecera con filo dorado --- */
#de > h2 {
  background: #1a1a20 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #f5b50a !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  padding: 11px 13px !important;
  margin: 0 0 4px !important;
  text-transform: none !important;
  text-shadow: none !important;
}
#de h3 { color: #f5b50a !important; padding: 12px 13px 2px !important; margin: 0 !important; font-size: 13px !important; }
#de #micuenta, #de .contenedor { padding: 12px 13px !important; }
#de .contenedor { color: #fff !important; font-weight: 500; }

/* --- Lista con ranking --- */
#de .b { margin: 0 !important; padding: 6px !important; }
#de .b li { padding: 6px !important; border-radius: 7px; transition: background .15s ease; }
#de .b li:hover { background: #1e1e26; }

/* Miniatura en formato póster (vertical) */
#de .b li a .im { width: 46px !important; height: 66px !important; border-radius: 6px !important; }
#de .b li a .im img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; }

/* Número: badge dorado en la esquina inferior izquierda del póster */
#de .b li a .im span {
  width: auto !important; height: auto !important;
  align-self: end !important; justify-self: start !important;
  background: #f5b50a !important; color: #1a1205 !important;
  font-size: 12px !important; font-weight: 500 !important;
  padding: 0 6px !important; line-height: 18px !important;
  border-radius: 0 6px 0 0 !important;
  display: inline-flex !important; align-items: center;
  text-shadow: none !important;
}

/* Título y pills de año / rating */
#de .b li a p { color: #e6e6ea !important; font-weight: 500 !important; }
#blo4 #de .b li i { box-shadow: none !important; border-radius: 5px !important; }
#blo4 #de .b li i.year { background: #1f1f27 !important; color: #cfcfd6 !important; }
#blo4 #de .b li i.imdbrating { background: #2a2410 !important; color: #f5c518 !important; }

/* "Ver todo" */
#de .wp-pagenavi a { background: transparent !important; color: #f5b50a !important;
  border: 1px solid #2a2a33 !important; border-radius: 6px !important; }

/* --- Publicaciones Recientes (.actores): lista de texto --- */
#blo4 #de .actores { padding: 4px 8px 8px !important; }
#blo4 #de .actores li { border-bottom: 1px solid #20202a !important; padding: 9px 4px !important; }
#blo4 #de .actores li i { background: #f5b50a !important; color: #1a1205 !important; box-shadow: none !important; }
#blo4 #de .actores li a, #blo4 #de .actores li span { color: #e6e6ea !important; }

/* --- Rating en el sidebar: solo ícono estrella + número (★ 8.5) --- */
#de .b li > span { display: none !important; }          /* oculta la barra de 5 estrellas */
#de .b li i.imdbrating {
  background: transparent !important;
  color: #f5c518 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 11px !important;
}
#de .b li i.imdbrating::before {
  content: "\f005";                  /* fa estrella */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 3px;
}
#de .b li i.imdbrating:empty { display: none !important; }   /* si no hay rating, no muestra estrella suelta */

/* --- Layout compacto: póster grande + año/rating pegados al título --- */
#de .b li {
  display: grid !important;
  grid-template-columns: auto auto auto 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 8px !important;
  padding: 8px 6px !important;
}
#de .b li a { display: contents !important; }                 /* el enlace "desaparece" y sus hijos entran a la rejilla */
#de .b li a .im { grid-column: 1 !important; grid-row: 1 / span 2 !important;
  width: 60px !important; height: 90px !important; }
#de .b li a p { grid-column: 2 / 5 !important; grid-row: 1 !important;
  align-self: end !important; margin: 0 !important; }
#de .b li i.year { grid-column: 2 !important; grid-row: 2 !important; }
#de .b li i.imdbrating { grid-column: 3 !important; grid-row: 2 !important; }
/* Quitar el ícono estrella (solo número) y dejar año + rating como pastillas IDÉNTICAS (misma altura) */
#de .b li i.imdbrating::before { content: none !important; }
#de .b li i.year,
#de .b li i.imdbrating {
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 8px !important;
  line-height: 1.5 !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
#de .b li i.year      { background: #1f1f27 !important; color: #cfcfd6 !important; }
#de .b li i.imdbrating{ background: #2a2410 !important; color: #f5c518 !important; }

/* --- "Pelis Relacionadas" en rejilla de 2 columnas (estilo mockup): solo póster + título --- */
#de.de-grid .b {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;   /* 3 pósters por fila */
  gap: 8px !important;
  padding: 10px !important;
}
#de.de-grid .b li { display: block !important; padding: 0 !important; }
#de.de-grid .b li a {
  display: block !important; position: relative !important;
  border-radius: 7px !important; overflow: hidden !important;
}
#de.de-grid .b li a .im {
  width: 100% !important; height: auto !important;
  aspect-ratio: 2 / 3 !important; border-radius: 0 !important;
}
#de.de-grid .b li a .im img { width: 100% !important; height: 100% !important; object-fit: cover; }
#de.de-grid .b li a:hover { outline: 2px solid #f5b50a; outline-offset: 0; }

/* Título: oculto; aparece al pasar el cursor, con oscurecido del póster para que se lea */
#de.de-grid .b li a p {
  position: absolute !important; inset: 0 !important; margin: 0 !important;
  display: flex !important; align-items: flex-end !important;
  padding: 8px !important; box-sizing: border-box;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 75%) !important;
  color: #ffffff !important; font-size: 11px !important; line-height: 1.3 !important;
  opacity: 0 !important; transition: opacity .25s ease !important;
}
#de.de-grid .b li a:hover p { opacity: 1 !important; }

#de.de-grid .b li i.year,
#de.de-grid .b li i.imdbrating { display: none !important; }

/* Íconos Font Awesome en los títulos de los widgets del sidebar */
#de h2 i { color: #f5b50a !important; margin-right: 7px; font-size: 15px; vertical-align: -1px; }

/* "Pasaron por el CINE" con BACKDROP (tarjetas anchas, título encima) */
#de .cine-bd-list { list-style: none; margin: 0; padding: 0; }
#de .cine-bd-list li { margin: 0 0 10px; padding: 0; }
#de .cine-bd-list li a { position: relative; display: block; height: 100px; border-radius: 10px; overflow: hidden; text-decoration: none; }
#de .cine-bd-list .cine-bg { position: absolute; inset: 0; background-size: cover; background-position: top center; transition: transform .35s ease; }
#de .cine-bd-list li a:hover .cine-bg { transform: scale(1.06); }
#de .cine-bd-list .cine-scrim { position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,8,12,.95) 6%, rgba(8,8,12,.30) 52%, transparent 82%); }
#de .cine-bd-list .cine-num { position: absolute; top: 8px; left: 8px; min-width: 22px; height: 22px;
  padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: var(--acc, #f5b50a);
  color: var(--acc-text, #2a1d00); font-size: 12px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; z-index: 2; }
#de .cine-bd-list .cine-info { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 2; display: block; }
#de .cine-bd-list .cine-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: #fff !important; font-size: 13px; font-weight: 600; line-height: 1.2; margin: 0 0 3px; }
#de .cine-bd-list .cine-sub { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #cfcfd6; }
#de .cine-bd-list .cine-rate,
#de .cine-bd-list .cine-rate i { color: var(--acc, #f5b50a); }
#de .cine-bd-list .cine-rate { display: inline-flex; align-items: center; gap: 3px; }

/* Widget "Sorpréndeme" del sidebar (carta misteriosa, todo clicable) */
#de.lmhd-sp-widget { position: relative; display: block; text-align: center; overflow: hidden;
  padding: 16px 16px 18px !important; text-decoration: none; }
#de.lmhd-sp-widget:hover { border-color: rgba(245,181,10,.55) !important; }
#de.lmhd-sp-widget .lmhd-sp-mist { display: flex; align-items: center; justify-content: center;
  width: 88px; height: 132px; margin: 0 auto 11px; border-radius: 8px; background: #1f1f27;
  border: 1px dashed rgba(245,181,10,.5); color: var(--acc, #f5b50a); font-size: 40px; font-weight: 700; }
#de.lmhd-sp-widget:hover .lmhd-sp-mist { background: #24240a; }
#de.lmhd-sp-widget .lmhd-sp-t { display: block; color: #fff; font-size: 15px; font-weight: 600; margin: 0 0 4px; }
#de.lmhd-sp-widget .lmhd-sp-s { display: block; color: #9a9aa3; font-size: 12px; margin: 0 0 13px; line-height: 1.45; }
#de.lmhd-sp-widget .lmhd-sp-btn { display: inline-flex; align-items: center; gap: 7px;
  background: var(--acc, #f5b50a); color: var(--acc-text, #2a1d00) !important; font-size: 13px;
  font-weight: 700; padding: 9px 22px; border-radius: 9px; }
#de.lmhd-sp-widget .lmhd-sp-btn i { color: var(--acc-text, #2a1d00); }
#de.lmhd-sp-widget .sp-fl { position: absolute; font-size: 17px; z-index: 1;
  transition: transform .35s ease; }
/* Cada emoji con su propia inclinación → sensación de flotar (nada alineado) */
#de.lmhd-sp-widget .sp-f1 { top: 46px;  left: 42px;  transform: rotate(-14deg); }
#de.lmhd-sp-widget .sp-f2 { top: 42px;  right: 22px; transform: rotate(12deg); }
#de.lmhd-sp-widget .sp-f3 { top: 96px;  left: 24px;  transform: rotate(-8deg); }
#de.lmhd-sp-widget .sp-f4 { top: 128px; right: 28px; transform: rotate(18deg); }
#de.lmhd-sp-widget .sp-f5 { top: 132px; left: 66px;  transform: rotate(-11deg); }
#de.lmhd-sp-widget .sp-f6 { top: 88px;  right: 56px; transform: rotate(9deg); }
/* Al pasar el cursor por la tarjeta, se enderezan y crecen un poco */
#de.lmhd-sp-widget:hover .sp-fl { transform: rotate(0deg) scale(1.15); }
#de.lmhd-sp-widget .lmhd-sp-head { position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: center; gap: 8px; color: var(--acc, #f5b50a); font-size: 16px; font-weight: 700;
  margin: 0 0 12px; }

/* Panel de usuario logueado (admin / colaborador / uploader) */
#de .lmhd-panel { padding: 16px; }
#de .lmhd-uhead { display: flex; align-items: center; gap: 10px; }
#de .lmhd-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center; }
#de .lmhd-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
#de .lmhd-av-ini { background: rgba(245,181,10,.16); border: 1px solid rgba(245,181,10,.5);
  color: var(--acc, #f5b50a); font-size: 18px; font-weight: 700; }
#de .lmhd-uinfo { display: flex; flex-direction: column; min-width: 0; }
#de .lmhd-uname { color: var(--text-primary, #e6e6ea); font-size: 15px; font-weight: 600; line-height: 1.2; }
#de .lmhd-urole { align-self: flex-start; margin-top: 4px; background: rgba(245,181,10,.14);
  color: var(--acc, #f5b50a); border: 1px solid rgba(245,181,10,.35); font-size: 10px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; }
#de .lmhd-actions { display: flex; gap: 8px; margin: 13px 0; }
#de .lmhd-act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #1f1f27; border: 1px solid #2e2e38; color: var(--text-primary, #e6e6ea) !important;
  font-size: 12px; padding: 9px 6px; border-radius: 8px; text-decoration: none; }
#de .lmhd-act:hover { border-color: rgba(245,181,10,.5); }
#de .lmhd-act i { color: var(--acc, #f5b50a); font-size: 15px; }
#de .lmhd-toolsec { display: flex; align-items: center; gap: 6px; color: #9a9aa3; font-size: 11px;
  font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 9px;
  padding-top: 13px; border-top: 1px solid #26262f; }
#de .lmhd-toolsec i { color: var(--acc, #f5b50a); font-size: 14px; }
#de .lmhd-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#de .lmhd-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; background: #1a1a20; border: 1px solid #26262f; border-radius: 9px;
  padding: 13px 8px; text-decoration: none; }
#de .lmhd-tool:hover { border-color: rgba(245,181,10,.5); }
#de .lmhd-tico { width: 34px; height: 34px; border-radius: 8px; background: rgba(245,181,10,.12);
  color: var(--acc, #f5b50a); display: flex; align-items: center; justify-content: center; font-size: 18px; }
#de .lmhd-tlbl { color: var(--text-primary, #e6e6ea); font-size: 11px; line-height: 1.25; }
#de .lmhd-new { position: absolute; top: 6px; right: 6px; background: var(--acc, #f5b50a);
  color: var(--acc-text, #2a1d00); font-size: 9px; font-weight: 700; padding: 1px 6px;
  border-radius: 8px; text-transform: uppercase; letter-spacing: .3px; }
#de .lmhd-logout { display: flex; align-items: center; gap: 7px; color: #9a9aa3 !important;
  font-size: 12px; text-decoration: none; padding: 9px 8px; border-radius: 8px; margin-top: 10px; }
#de .lmhd-logout:hover { color: #ff6b6b !important; background: #20202a; }
#de .lmhd-logout i { font-size: 15px; }