/* ==========================================================================
POST PÚBLICO - Paleta unificada con el resto del sistema (Pasos 1-4)
========================================================================== */
:root {
--bg-main: #0b0f19;
--bg-card: #131c2e;
--bg-input: #1e293b;
--border-color: rgba(255, 255, 255, 0.08);
--border-focus: #38bdf8;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--accent-color: #0ea5e9;
--accent-glow: rgba(14, 165, 233, 0.25);
--success-color: #10b981;
--danger-color: #ef4444;
--vip-color: #f59e0b;
--vip-glow: rgba(245, 158, 11, 0.25);
--shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
--transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
1. ESTILOS BASE Y CONTENEDOR PRINCIPAL
========================================================================== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-main);
color: var(--text-primary);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
}
.page-container {
max-width: 1450px;
margin: 0 auto;
padding: 20px;
}
/* ==========================================================================
SHELL DE CATÁLOGO (header / slider / sidebar / grid de resultados)
Oculto por defecto: mientras no tenga la clase
"shell-visible" (agregada por toggleCatalogShellVisibility() en
post-public.js solo cuando el post cargado está "published"),
ninguna de estas piezas se muestra.
IMPORTANTE: no todas las reglas namespaceadas de
post-public-catalog.css redefinen "display" (varias clases del
catálogo original nunca necesitaron pelear contra un display:none
previo, así que su display queda implícito/por defecto del
navegador). Por eso el toggle de visibilidad no puede depender
solo de "la regla con más especificidad gana": si ninguna de las
dos reglas en conflicto define display, gana la que sí lo define
— en este caso, siempre .pp-shell-piece. Por eso cada pieza tiene
su propio display explícito acá, con selector compuesto
(body.shell-visible + la clase) para ganarle a .pp-shell-piece
con certeza. El valor es "block" en los tres casos a propósito:
ninguna de estas clases usa flex en su propia regla base de
catalog.css (el flex real, donde aplica, vive en un HIJO interno
— ej. .slider-track adentro de .slider-section, .layout-container
alrededor de .sidebar-area — no en el contenedor mismo). Poner
"flex" acá por error hace que los hijos directos se acomoden en
fila y se estiren a la misma altura en vez de apilarse en
columna, que fue exactamente el bug que rompía el sidebar.
========================================================================== */
.pp-shell-piece {
display: none;
}
body.shell-visible header.main-header.pp-shell-piece {
display: block;
}
body.shell-visible section.slider-section.pp-shell-piece {
display: block;
}
body.shell-visible aside.sidebar-area.pp-shell-piece {
display: block;
}
body.shell-visible section.grid-section.pp-shell-piece {
display: block;
}
/* =========================================================
ACOPLE DEL SIDEBAR: GRID FLUIDO
CSS Grid con columnas proporcionales — el contenido ocupa
todo el espacio disponible (1fr) y el sidebar 280px fijos.
Funciona en cualquier resolución sin flex-wrap ni anchos
mágicos. El breakpoint baja a 960px para tablets.
========================================================================== */
body.shell-visible .layout-container {
max-width: 1600px;
margin: 100px auto 30px auto;
padding: 0 25px;
display: grid;
grid-template-columns: 1fr 280px;
gap: 25px;
align-items: start;
}
body.shell-visible .content-area {
min-width: 0;
width: 100%;
}
body.shell-visible .page-container {
max-width: none;
margin: 0;
}
body.shell-visible aside.sidebar-area.pp-shell-piece {
width: 100%;
position: sticky;
top: 90px;
max-height: calc(100vh - 110px);
overflow-y: auto;
}
body.shell-visible .slider-section.slider-section--compact {
max-width: none;
margin: 0 0 22px 0;
padding: 10px 14px;
}
body.shell-visible .grid-section.pp-shell-piece {
max-width: none;
margin: 0;
}
/* Sidebar va abajo solo en tablets/móvil */
@media (max-width: 960px) {
body.shell-visible .layout-container {
grid-template-columns: 1fr;
}
body.shell-visible aside.sidebar-area.pp-shell-piece {
position: relative;
top: 0;
max-height: none;
overflow-y: visible;
width: 100%;
}
}
body.shell-visible .slider-section--compact .section-header-slider {
margin-bottom: 12px;
padding-bottom: 8px;
}
body.shell-visible .slider-section--compact .slider-title {
font-size: 14px;
}
body.shell-visible .slider-section--compact .slider-arrow {
width: 28px;
height: 28px;
}
body.shell-visible .slider-section--compact .slider-item {
flex: 0 0 calc(12.5% - 13px);
min-width: 100px;
}
/* Botones "Limpiar filtros" / "Regresar al inicio" en el header
del grid de resultados filtrados. Antes "Limpiar filtros"
reusaba .back-to-platforms-btn (definida solo en platforms.css,
que esta página ni carga), así que se veía como un botón nativo
sin estilo del navegador. */
body.shell-visible .pp-filter-actions {
display: flex;
align-items: center;
gap: 10px;
}
body.shell-visible .pp-filter-action-btn {
background: var(--bg-input);
border: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 12.5px;
font-weight: 600;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: var(--transition-smooth);
}
body.shell-visible .pp-filter-action-btn:hover {
color: var(--text-primary);
border-color: var(--accent-color);
}
/* "Regresar al inicio" es la acción de salir por completo de este
post hacia el catálogo — se destaca un poco más que "Limpiar
filtros" (que solo ajusta la vista actual) para diferenciarlas
a simple vista. */
body.shell-visible .pp-filter-action-btn-primary {
background: var(--accent-color);
border-color: var(--accent-color);
color: #ffffff;
}
body.shell-visible .pp-filter-action-btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
color: #ffffff;
}
/* ==========================================================================
2. HERO / BACKDROP SECTION
========================================================================== */
.hero-section {
position: relative;
width: 100%;
/* Antes era una altura fija de 400px sobre un contenedor de
1450px de ancho (~3.6:1, muy panorámico/aplastado). Con
aspect-ratio la altura se recalcula sola según el ancho real
disponible, quedando una proporción más cómoda y consistente
en cualquier tamaño de pantalla — sin competir con un height
fijo, que tendría prioridad sobre el aspect-ratio y volvería
a producir el mismo aplastamiento de antes. */
aspect-ratio: 16 / 7;
max-height: 460px;
min-height: 260px;
border-radius: 16px;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-bottom: -100px; /* Hace que la tarjeta principal se superponga */
box-shadow: var(--shadow-premium);
border: 1px solid var(--border-color);
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(11, 15, 25, 0.2) 0%, rgba(11, 15, 25, 0.92) 100%);
}
/* Centrado real (vertical y horizontal) en vez de anclado abajo a
la izquierda — con flex + text-align:center el título queda en
el centro de la imagen sin importar cuántas líneas ocupe. */
.hero-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100px; /* deja libre el margen que .main-post-card usa para superponerse */
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 60px;
}
.hero-content h1 {
/* clamp() reduce el tamaño de fuente en títulos muy largos sin
necesidad de JS — un título corto sigue viéndose grande
(hasta 2.8rem), uno largo se ajusta hacia abajo (mínimo
1.6rem) para seguir cabiendo en pocas líneas. */
font-size: clamp(1.6rem, 2.6vw + 1rem, 2.8rem);
font-weight: 800;
line-height: 1.25;
text-align: center;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.8);
color: var(--text-primary);
max-width: 950px;
margin: 0 auto;
}
/* ==========================================================================
3. TARJETA PRINCIPAL
========================================================================== */
.main-post-card {
position: relative;
z-index: 3;
background: var(--bg-card);
border-radius: 18px;
padding: 20px 25px;
box-shadow: var(--shadow-premium);
margin-bottom: 30px;
border: 1px solid var(--border-color);
}
.step-content.active {
display: grid;
grid-template-columns: 470px 1fr;
gap: 50px;
}
/* ==========================================================================
4. SECCIÓN CARÁTULA / PÓSTER
========================================================================== */
.poster-section {
width: 470px;
flex-shrink: 0;
display: block;
}
.poster-container {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, .05);
background: var(--bg-input);
}
.poster-container img {
width: 100%;
height: auto;
display: block;
}
/* Etiquetas inferiores del Póster */
.poster-tags {
margin-top: 15px;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.poster-tags span {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
#tagRating {
background: rgba(234, 179, 8, .15);
color: #facc15;
border-color: rgba(234, 179, 8, .3);
}
#tagPremiere {
background: var(--vip-glow);
color: var(--vip-color);
border-color: rgba(245, 158, 11, .35);
}
/* Badge independiente de "En Emisión" — convive con #tagPremiere
(Estreno) en vez de reemplazarlo, ya que una serie puede estar
recién estrenada Y en emisión al mismo tiempo. Rojo para que se
distinga claramente de "Estreno" (dorado/VIP). */
#tagOnAir {
background: rgba(239, 68, 68, .15);
color: #ef4444;
border-color: rgba(239, 68, 68, .35);
}
/* ==========================================================================
5. SECCIÓN INFORMACIÓN, SINOPSIS Y REPARTO
========================================================================== */
.info-container {
flex-grow: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.info-grid {
margin-bottom: 25px;
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 20px;
}
.info-block {
display: flex;
flex-direction: column;
}
.block-title {
background: var(--bg-input);
color: var(--text-primary);
padding: 12px 18px;
border-radius: 10px;
margin-bottom: 16px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.8px;
border: 1px solid var(--border-color);
}
/* Bloque de Datos Técnicos */
.info-general-box {
background: rgba(255, 255, 255, .03);
border-radius: 10px;
padding: 15px;
border: 1px solid var(--border-color);
height: 100%;
}
.info-row {
display: flex;
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
align-items: center;
gap: 8px;
}
.info-row:last-child {
border-bottom: none;
}
.info-label {
font-weight: 700;
color: var(--text-primary);
font-size: 14px;
flex-shrink: 0;
}
.info-value {
color: var(--text-secondary);
font-size: 14px;
word-break: break-word;
}
/* Caja de Sinopsis */
.description-box {
background: rgba(255, 255, 255, .03);
border-radius: 10px;
padding: 15px;
border: 1px solid var(--border-color);
font-size: 14px;
color: var(--text-secondary);
overflow-y: auto;
max-height: 220px;
height: 100%;
}
/* ==========================================================================
6. SECCIÓN REPARTO / ACTORES PRINCIPALES
========================================================================== */
.cast-slider-container {
position: relative;
display: flex;
align-items: center;
width: 100%;
margin-bottom: 25px;
}
.cast-slider {
display: flex;
gap: 15px;
overflow-x: auto;
scroll-behavior: smooth;
width: 100%;
padding: 5px 0;
}
.cast-slider::-webkit-scrollbar {
display: none;
}
/* Tarjeta de Actor Individual (Inyectada dinámicamente) */
.cast-card {
flex: 0 0 88px;
width: 88px;
text-align: center;
background: var(--bg-input);
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border-color);
padding-bottom: 8px;
}
.cast-photo {
width: 100%;
height: 105px;
object-fit: cover;
display: block;
}
.cast-name {
font-size: 11px;
font-weight: 700;
color: var(--text-primary);
padding: 6px 4px 2px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cast-character {
font-size: 10px;
color: var(--text-secondary);
padding: 0 4px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ==========================================================================
7. DÓNDE VER (estilo JustWatch, igual al Paso 4)
========================================================================== */
.platforms-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.watch-provider-chip {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 6px 14px 6px 8px;
transition: var(--transition-smooth);
}
.watch-provider-chip:hover {
border-color: var(--accent-color);
background: rgba(14, 165, 233, .08);
}
.watch-provider-logo {
width: 24px;
height: 24px;
border-radius: 6px;
object-fit: cover;
}
.watch-provider-name {
color: var(--text-primary);
font-size: 12px;
font-weight: 700;
}
.vip-request-chip {
background: linear-gradient(135deg, var(--vip-color) 0%, #d97706 100%);
border-color: transparent;
padding: 6px 14px;
}
.vip-request-chip .watch-provider-name {
color: #1a1305;
font-weight: 800;
}
/* ==========================================================================
8. TEMPORADAS (series)
========================================================================== */
.season-section {
margin-bottom: 30px;
}
.season-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.season-card {
width: 220px;
background: var(--bg-card);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-color);
}
.season-card img {
width: 100%;
height: 320px;
object-fit: cover;
}
.season-info {
padding: 12px;
}
.season-title {
font-weight: 700;
color: var(--text-primary);
}
.season-episodes {
color: var(--text-secondary);
margin-top: 5px;
}
/* ==========================================================================
9. MULTIMEDIA: CAPTURAS Y TRÁILER
========================================================================== */
.media-section {
margin-bottom: 30px;
display: flex;
gap: 20px;
align-items: stretch;
flex-wrap: wrap;
}
.section-title {
background: var(--bg-input);
color: var(--text-primary);
padding: 12px 18px;
border-radius: 10px;
margin-bottom: 14px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.8px;
border: 1px solid var(--border-color);
}
/* Estilo unificado para los dos contenedores principales (ocultos por defecto, el JS los muestra con flex) */
.captures-section,
.trailer-section {
display: none;
background: var(--bg-card);
border-radius: 14px;
padding: 20px;
border: 1px solid var(--border-color);
flex: 1;
min-width: 320px;
flex-direction: column;
}
.trailer-section .trailer-frame-wrapper {
width: 100%;
position: relative;
aspect-ratio: 16 / 9;
margin: auto 0;
}
/* Capturas Slider Interno */
.captures-slider {
position: relative;
display: flex;
align-items: center;
flex: 1;
width: 100%;
background: rgba(0, 0, 0, .2);
border-radius: 10px;
padding: 10px;
min-height: 150px;
}
.captures-wrapper {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-behavior: smooth;
width: 100%;
height: 100%;
align-items: center;
}
.captures-wrapper::-webkit-scrollbar {
display: none;
}
.captures-wrapper img {
height: 145px;
border-radius: 8px;
object-fit: cover;
cursor: pointer;
transition: var(--transition-smooth);
flex-shrink: 0;
}
.captures-wrapper img:hover {
transform: scale(1.03);
}
/* Tráiler Frame Interno */
.trailer-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
border: none;
background: #000;
box-shadow: 0 4px 15px rgba(0, 0, 0, .4);
}
/* Fallback cuando YouTube bloquea el embed (Error 153 u otros) */
.trailer-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: #0f0f0f;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-decoration: none;
color: #fff;
transition: background 0.2s ease;
}
.trailer-fallback:hover {
background: #1a1a1a;
}
.trailer-fallback svg {
width: 72px;
height: auto;
filter: drop-shadow(0 2px 8px rgba(255,0,0,0.5));
transition: transform 0.2s ease;
}
.trailer-fallback:hover svg {
transform: scale(1.08);
}
.trailer-fallback span {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #e0e0e0;
}
@media (max-width: 480px) {
.trailer-fallback svg {
width: 56px;
}
.trailer-fallback span {
font-size: 0.85rem;
}
}
/* Botones de Flechas genéricos para Sliders */
.slider-btn {
background: rgba(0, 0, 0, .6);
color: #fff;
border: 1px solid var(--border-color);
font-size: 1.5rem;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
position: absolute;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
}
.slider-btn:hover {
background: var(--accent-color);
border-color: var(--accent-color);
}
.slider-btn.prev,
.slider-btn.prev-cast {
left: 10px;
}
.slider-btn.next,
.slider-btn.next-cast {
right: 10px;
}
.cast-slider-container .slider-btn {
position: absolute;
background: rgba(19, 28, 46, .9);
}
/* ==========================================================================
10. ZONA DE DESCARGAS
========================================================================== */
.download-box {
background: var(--bg-card);
border-radius: 16px;
padding: 25px;
margin-bottom: 30px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-premium);
}
.download-main-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.download-title,
.download-links-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 15px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
}
/* Información Técnica Descarga (Izquierda) */
.download-info-general {
background: rgba(255, 255, 255, .03);
padding: 18px;
border-radius: 12px;
border: 1px solid var(--border-color);
}
.download-line {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.9rem;
}
.download-line:last-child {
border-bottom: none;
}
.download-line strong {
color: var(--accent-color);
font-weight: 700;
margin-right: 10px;
}
/* Columna Derecha de Enlaces */
.download-links-column {
display: flex;
flex-direction: column;
gap: 15px;
}
.download-links-box {
background: rgba(255, 255, 255, .03);
padding: 18px;
border-radius: 12px;
border: 1px solid var(--border-color);
height: 100%;
}
.download-cards {
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
max-height: 230px;
padding-right: 5px;
}
/* Estructura Base de la Tarjeta de Descarga */
/* ==========================================================================
TARJETAS DE DESCARGA — DISEÑO PREMIUM
========================================================================== */
.download-card {
display: flex;
flex-direction: column;
gap: 14px;
border-radius: 16px;
padding: 18px 20px;
position: relative;
overflow: hidden;
transition: transform .2s, box-shadow .2s;
border: 1px solid transparent;
}
.download-card:hover {
transform: translateY(-2px);
}
/* FREE — fondo oscuro con borde cian */
.download-card.free-card {
background: #0d1628;
border-color: rgba(14,165,233,.25);
box-shadow: 0 4px 24px rgba(14,165,233,.08);
}
.download-card.free-card:hover {
border-color: rgba(14,165,233,.5);
box-shadow: 0 8px 32px rgba(14,165,233,.15);
}
/* VIP — fondo dorado tenue con borde dorado */
.download-card.vip-card {
background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, #0d1628 60%);
border-color: rgba(245,158,11,.35);
box-shadow: 0 4px 24px rgba(245,158,11,.08);
}
.download-card.vip-card:hover {
border-color: rgba(245,158,11,.6);
box-shadow: 0 8px 32px rgba(245,158,11,.18);
}
/* Franja de color arriba (acento visual) */
.download-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: 16px 16px 0 0;
}
.download-card.free-card::before {
background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}
.download-card.vip-card::before {
background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
}
/* Icono + nombre del servidor */
.download-card .card-left {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 1;
}
.download-card .card-left h3 {
font-size: 15px;
font-weight: 800;
color: #f1f5f9;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
/* Ícono delante del nombre */
.download-card.free-card .card-left h3::before {
content: "⬇";
font-size: 13px;
color: #0ea5e9;
}
.download-card.vip-card .card-left h3::before {
content: "👑";
font-size: 13px;
}
.download-tags {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.download-tags span {
background: rgba(255,255,255,.06);
color: #64748b;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: .3px;
border: 1px solid rgba(255,255,255,.06);
}
/* Tag VIP dorado */
.download-tags .tag-premium {
background: linear-gradient(135deg,#d97706,#f59e0b);
color: #1a0f00;
font-weight: 800;
border: none;
box-shadow: 0 2px 8px rgba(245,158,11,.3);
}
.download-card .card-right {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
/* ── BOTÓN FREE ── */
.public-btn,
.download-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13px 20px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
letter-spacing: .5px;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: all .2s;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0284c7, #0ea5e9);
color: #fff;
box-shadow: 0 4px 18px rgba(14,165,233,.35);
}
.public-btn::before,
.download-btn::before {
content: "⬇ ";
}
.public-btn:hover,
.download-btn:hover {
background: linear-gradient(135deg, #0369a1, #0284c7);
box-shadow: 0 6px 24px rgba(14,165,233,.5);
transform: translateY(-1px);
}
.public-btn:active,
.download-btn:active {
transform: translateY(0);
}
/* ── BOTÓN VIP — shimmer dorado ── */
.vip-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13px 20px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 800;
letter-spacing: .5px;
cursor: pointer;
font-family: inherit;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #d97706, #f59e0b, #fbbf24);
color: #1a0f00;
box-shadow: 0 4px 20px rgba(245,158,11,.45);
transition: all .2s;
}
/* Efecto shimmer */
.vip-btn::after {
content: "";
position: absolute;
top: 0; left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
animation: vipShimmer 2.5s infinite;
}
@keyframes vipShimmer {
0% { left: -60%; }
100% { left: 160%; }
}
.vip-btn::before {
content: "👑 ";
font-size: 14px;
}
.vip-btn:hover {
background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
box-shadow: 0 6px 28px rgba(245,158,11,.6);
transform: translateY(-1px);
}
.vip-btn:active { transform: translateY(0); }
/* Contenedor del Botón Reportar */
.report-container {
width: 100%;
text-align: center;
}
.report-btn {
width: 100%;
background: rgba(239, 68, 68, .1);
color: var(--danger-color);
border: 1px solid rgba(239, 68, 68, .3);
padding: 12px 20px;
font-size: 0.85rem;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
letter-spacing: 1px;
transition: var(--transition-smooth);
}
.report-btn:hover {
background: rgba(239, 68, 68, .18);
}
/* ==========================================================================
11. MÁS INFORMACIÓN Y SERVIDORES
========================================================================== */
.info-servers-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
background: var(--bg-card);
padding: 25px;
border-radius: 16px;
margin-bottom: 30px;
border: 1px solid var(--border-color);
}
.extra-info-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: 15px;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
text-transform: uppercase;
}
.more-info-list-container {
display: flex;
flex-direction: column;
gap: 12px;
padding: 5px 0;
width: 100%;
}
.info-item-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
background: rgba(255, 255, 255, .02);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 10px 14px;
font-size: 0.9rem;
transition: var(--transition-smooth);
}
.info-item-row:hover {
background: rgba(255, 255, 255, .04);
}
.info-item-label {
font-weight: 700;
color: var(--accent-color);
min-width: 120px;
flex-shrink: 0;
text-transform: uppercase;
font-size: 0.78rem;
letter-spacing: 0.5px;
}
.info-item-value {
color: var(--text-primary);
font-weight: 500;
word-break: break-word;
}
/* Resaltado exclusivo para la fila del Uploader — usa el azul de
acento del sitio (--accent-color), NO el dorado de --vip-color:
quién subió el post es información neutra del autor, no un
beneficio de membresía VIP, y compartir el mismo dorado generaba
confusión visual entre ambos conceptos. */
.info-item-row.uploader-row {
border-left: 3px solid var(--accent-color);
background: rgba(14, 165, 233, 0.08);
}
.info-item-row.uploader-row .info-item-label {
color: var(--accent-color);
}
.servers-box {
display: flex;
flex-direction: column;
}
.servers-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: rgba(255, 255, 255, .03);
padding: 15px;
border-radius: 10px;
border: 1px solid var(--border-color);
min-height: 100px;
align-content: flex-start;
}
.download-server-icon {
width: 40px;
height: 40px;
object-fit: contain;
cursor: pointer;
transition: var(--transition-smooth);
}
.download-server-icon:hover {
transform: scale(1.08);
}
/* Wrapper del ícono + tooltip premium (mismo patrón que en los
wizards de creación: .server-item::before en el Paso 3, .server-
icon-wrapper::before en el Paso 4) — antes esto era img.title, el
tooltip nativo del navegador, sin estilo y con aparición lenta.
El ![]()
se envuelve en un wrapper porque el pseudo-elemento
::before del tooltip necesita su propio position:relative para
posicionarse sobre el ícono exacto; el efecto hover-scale de
arriba sigue aplicando al ![]()
sin cambios. */
.server-icon-wrapper {
position: relative;
display: flex;
}
.server-icon-wrapper::before {
content: attr(data-server-name);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #0b0f19;
color: var(--text-primary);
font-size: 11.5px;
font-weight: 600;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--border-color);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: var(--transition-smooth);
z-index: 10;
box-shadow: var(--shadow-premium);
}
.server-icon-wrapper:hover::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.country-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.country-flag {
width: 22px;
height: 15px;
border-radius: 2px;
object-fit: cover;
}
/* ==========================================================================
12. MEMBRESÍA VIP & RELACIONADOS
========================================================================== */
.membership-box {
background: linear-gradient(135deg, var(--vip-glow) 0%, var(--bg-main) 60%);
border-radius: 16px;
padding: 25px 40px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid rgba(245, 158, 11, .25);
margin-bottom: 30px;
flex-wrap: wrap;
gap: 20px;
}
.vip-left h2 {
color: var(--vip-color);
font-size: 1.4rem;
font-weight: 800;
margin-bottom: 5px;
}
.vip-left p {
font-size: 0.85rem;
color: var(--text-secondary);
}
.join-btn {
background: var(--vip-color);
color: #1a1305;
border: none;
padding: 12px 24px;
font-size: 0.9rem;
font-weight: 800;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 20px var(--vip-glow);
transition: var(--transition-smooth);
white-space: nowrap;
}
.join-btn:hover {
background: #fbbf24;
transform: translateY(-1px);
}
.related-section {
margin-top: 30px;
}
.related-slider-container {
position: relative;
width: 100%;
}
.related-viewport {
width: 100%;
overflow: hidden;
}
.related-grid {
display: flex;
gap: 20px;
margin-top: 15px;
transition: transform 0.4s ease;
}
.related-grid .related-card-wrapper {
flex: 0 0 calc((100% - 4 * 20px) / 5);
min-width: 0;
}
.slider-btn.prev-related,
.slider-btn.next-related {
top: 50%;
transform: translateY(-15px);
}
.slider-btn.prev-related {
left: -10px;
}
.slider-btn.next-related {
right: -10px;
}
/* ── TARJETAS RELACIONADAS PREMIUM ── */
.related-grid .post-card {
background: #0d1628;
border-radius: 14px;
position: relative;
border: 1px solid rgba(255,255,255,.07);
cursor: pointer;
overflow: hidden;
transition: transform .22s, border-color .22s, box-shadow .22s;
box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.related-grid .post-card:hover {
transform: translateY(-5px);
border-color: rgba(14,165,233,.4);
box-shadow: 0 12px 32px rgba(0,0,0,.6), 0 0 20px rgba(14,165,233,.15);
}
/* Poster */
.related-grid .poster-container {
position: relative;
width: 100%;
aspect-ratio: 2 / 3;
overflow: hidden;
}
.related-grid .poster-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.related-grid .post-card:hover .poster-container img {
transform: scale(1.05);
}
/* Gradiente sobre la parte inferior del poster */
.related-grid .poster-container::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 55%;
background: linear-gradient(to top, rgba(13,22,40,.95) 0%, transparent 100%);
pointer-events: none;
}
/* Título flotante encima del gradiente */
.related-grid .post-details {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 10px 11px 11px;
z-index: 2;
}
.related-grid .post-card-title {
font-size: 12px;
font-weight: 800;
line-height: 1.35;
color: #f1f5f9;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 3px;
text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.related-grid .post-card-subtext {
font-size: 10.5px;
font-weight: 600;
color: #64748b;
letter-spacing: .2px;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 900px) {
.step-content.active {
grid-template-columns: 1fr;
}
.poster-section {
width: 100%;
}
.poster-container {
max-width: 320px;
margin: 0 auto;
}
.info-grid,
.download-main-container,
.info-servers-row {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
TEMPORADAS Y EPISODIOS (sección pública, datos ya guardados en BD)
========================================================================== */
.seasons-cards-row {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 10px;
margin-bottom: 20px;
}
.season-card-public {
flex: 0 0 140px;
width: 140px;
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: 12px;
cursor: pointer;
position: relative;
transition: var(--transition-smooth);
}
.season-card-public img {
border-radius: 10px 10px 0 0;
}
.season-card-public:hover {
border-color: rgba(14, 165, 233, 0.4);
transform: translateY(-3px);
z-index: 50;
}
.season-card-public img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
opacity: 0.7;
}
.season-card-public-active,
.season-card-public-selected {
border-color: #ec4899;
box-shadow: 0 0 18px rgba(236, 72, 153, 0.4);
}
.season-card-public-active img,
.season-card-public-selected img {
opacity: 1;
}
.season-card-public-info {
padding: 10px;
display: flex;
flex-direction: column;
gap: 2px;
border-radius: 0 0 10px 10px;
}
.season-card-public-info strong {
font-size: 14px;
color: var(--text-primary);
}
.season-card-public-info span {
font-size: 11px;
color: var(--text-secondary);
}
.season-card-public-dot {
position: absolute;
top: 8px;
right: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ec4899;
box-shadow: 0 0 8px rgba(236, 72, 153, 0.8);
}
/* =========================================================
TOOLTIP PREMIUM DE TEMPORADA (al pasar el mouse)
Mismo patrón que .post-tooltip del catálogo: oculto por
defecto, aparece con opacity+pointer-events al hacer hover
sobre la tarjeta padre. Reemplaza el bloque fijo de episodios
que antes iba siempre visible debajo de las tarjetas.
========================================================= */
.season-card-public-tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(6px);
width: 220px;
background: rgba(11, 15, 25, 0.97);
border: 1px solid rgba(14, 165, 233, 0.3);
border-radius: 12px;
padding: 14px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
transition: var(--transition-smooth);
z-index: 100;
}
.season-card-public-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 7px solid transparent;
border-top-color: rgba(14, 165, 233, 0.3);
}
.season-card-public:hover .season-card-public-tooltip {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.season-tooltip-public-header {
font-size: 13px;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 8px;
line-height: 1.3;
}
.season-tooltip-public-name {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
margin-top: 2px;
}
.season-tooltip-public-range {
font-size: 12px;
font-weight: 700;
color: #7dd3fc;
background: rgba(14, 165, 233, 0.1);
border: 1px solid rgba(14, 165, 233, 0.25);
border-radius: 8px;
padding: 6px 10px;
margin-bottom: 8px;
}
.season-tooltip-public-year {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.season-tooltip-public-uploaded-tag {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
text-align: center;
background: rgba(236, 72, 153, 0.15);
color: #ec4899;
border: 1px solid rgba(236, 72, 153, 0.3);
padding: 5px 8px;
border-radius: 6px;
}
@media screen and (max-width: 480px) {
.season-card-public-tooltip {
width: 180px;
}
}
/* =========================================================
SCROLL HORIZONTAL PREMIUM DE LA FILA DE TEMPORADAS
Con muchas temporadas (series largas, ej. 9+) .seasons-cards-row
se desborda y el navegador dibuja su barra de scroll nativa por
defecto — gris, gruesa, sin relación con el resto del diseño.
Antes se dejaba en var(--bg-input) (#1e293b), casi del mismo tono
que el fondo de la tarjeta — por eso se notaba poco salvo en
hover. Ahora usa var(--text-secondary) (gris-azulado/slate, ya
usado en el resto del sitio para texto secundario) como color
base, con más grosor y un highlight sutil en la parte superior
del thumb para que tenga presencia real sin recurrir a ningún
color de marca (ni celeste de acento ni dorado VIP) — el pedido
explícito era una barra notoria pero neutral en color.
========================================================= */
.seasons-cards-row::-webkit-scrollbar {
height: 9px;
}
.seasons-cards-row::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.04);
border-radius: 10px;
}
.seasons-cards-row::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.seasons-cards-row::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #b3c1d6 0%, #7c8da5 100%);
}
.seasons-cards-row {
scrollbar-width: thin;
scrollbar-color: #94a3b8 rgba(255, 255, 255, 0.04);
}
/* =========================================================
DETALLE COMPLETO DE EPISODIOS (al hacer clic en una tarjeta)
Antes esto era texto plano sin estilo, pegado directo debajo de
la fila de miniaturas ("Temporada 01 - Temporada 1 / Episodios
del 01 al 08", sin fondo, sin padding, tipografía del navegador
por defecto). Ahora vive en su propia tarjeta, consistente con
el resto de bloques del post (.info-block, .download-box, etc.)
========================================================= */
.episodes-detail-wrapper {
margin-top: 16px;
}
.episodes-detail-public-header {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px 12px 0 0;
border-bottom: none;
padding: 14px 18px;
font-size: 15px;
font-weight: 800;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.season-available-tag {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
background: rgba(236, 72, 153, 0.15);
color: #ec4899;
border: 1px solid rgba(236, 72, 153, 0.3);
padding: 5px 10px;
border-radius: 6px;
}
.episodes-range-summary-public {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 0 0 12px 12px;
padding: 18px;
font-size: 13.5px;
color: var(--text-secondary);
font-weight: 600;
}
.episodes-list-public {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 0 0 12px 12px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 520px;
overflow-y: auto;
}
.episode-row-public {
display: flex;
align-items: center;
gap: 14px;
padding: 10px;
border-radius: 10px;
background: var(--bg-input);
border: 1px solid transparent;
transition: var(--transition-smooth);
}
.episode-row-public:hover {
border-color: rgba(14, 165, 233, 0.3);
}
.episode-row-public img {
width: 100px;
height: 56px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.episode-row-public-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.episode-row-public-info strong {
font-size: 13.5px;
color: var(--text-primary);
}
.episode-row-public-info span {
font-size: 12.5px;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.episode-row-public-info small {
font-size: 11px;
color: var(--text-secondary);
opacity: 0.8;
}
.episode-status-dot-public {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--success-color);
flex-shrink: 0;
}
.episode-not-aired-public .episode-status-dot-public {
background: var(--text-secondary);
opacity: 0.5;
}
.episode-not-aired-public {
opacity: 0.7;
}
/* Misma scrollbar delgada para la lista de episodios cuando hay
muchos (max-height:520px más arriba activa el scroll interno).
Vertical, no horizontal — se deja delgada a propósito, solo se
actualiza el color base a --text-secondary para que combine con
el resto de barras de scroll del sitio. */
.episodes-list-public::-webkit-scrollbar {
width: 6px;
}
.episodes-list-public::-webkit-scrollbar-track {
background: transparent;
}
.episodes-list-public::-webkit-scrollbar-thumb {
background: #64748b;
border-radius: 10px;
}
.episodes-list-public::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* =========================================================
PELÍCULAS DE LA COLECCIÓN
Mismo lenguaje visual exacto que .season-card-public arriba —
reutiliza la misma .season-card-public-tooltip (al pasar el
mouse) y la misma estructura de "fila con scroll + panel de
detalle debajo al hacer clic", solo con el prefijo movie- para
las piezas propias de esta sección (la tarjeta en sí, el panel de
detalle con sinopsis/director/IMDB en vez de lista de episodios).
========================================================= */
.movies-cards-row {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 10px;
margin-bottom: 20px;
scrollbar-width: thin;
scrollbar-color: #94a3b8 rgba(255, 255, 255, 0.04);
}
/* Mismo estilo grueso gris-azulado que .seasons-cards-row más
arriba — antes usaba var(--bg-input), casi del mismo tono que el
fondo de la tarjeta, por eso se veía apagado/poco notorio. */
.movies-cards-row::-webkit-scrollbar {
height: 9px;
}
.movies-cards-row::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.04);
border-radius: 10px;
}
.movies-cards-row::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.movies-cards-row::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #b3c1d6 0%, #7c8da5 100%);
}
.movie-card-public {
flex: 0 0 140px;
width: 140px;
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: 12px;
cursor: pointer;
position: relative;
transition: var(--transition-smooth);
}
.movie-card-public img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
opacity: 0.7;
border-radius: 10px 10px 0 0;
}
.movie-card-public:hover {
border-color: rgba(14, 165, 233, 0.4);
transform: translateY(-3px);
z-index: 50;
}
.movie-card-public:hover .season-card-public-tooltip {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.movie-card-public-selected {
/* Mismo estilo premium dorado que el wizard de Colección
(create-post_Coleccion_Final.css) — antes era un borde rosa
(#ec4899) sin relación con el resto de la paleta del sitio. */
position: relative;
border-color: transparent;
background:
linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
linear-gradient(135deg, var(--vip-color) 0%, #d97706 100%) border-box;
box-shadow: 0 0 18px var(--vip-glow);
}
.movie-card-public-selected img {
opacity: 1;
}
.movie-card-public-unavailable {
opacity: 0.55;
}
.movie-card-public-info {
padding: 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.movie-card-public-info strong {
font-size: 13px;
color: var(--text-primary);
line-height: 1.3;
display: block;
}
.movie-card-public-info span {
font-size: 11px;
color: var(--text-secondary);
}
.movie-card-public-unavailable-tag {
position: absolute;
top: 8px;
right: 8px;
background: rgba(239, 68, 68, 0.85);
color: #fff;
font-size: 9px;
font-weight: 800;
padding: 3px 6px;
border-radius: 5px;
text-transform: uppercase;
}
.movie-detail-wrapper {
margin-top: 16px;
}
.movie-detail-header {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px 12px 0 0;
border-bottom: none;
padding: 14px 18px;
font-size: 15px;
font-weight: 800;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.movie-detail-body {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 0 0 12px 12px;
padding: 18px;
display: flex;
gap: 18px;
}
.movie-detail-poster {
width: 110px;
height: 165px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
}
.movie-detail-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.movie-detail-meta {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 12.5px;
color: var(--text-secondary);
}
/* Mismo tratamiento editorial que el wizard de Colección
(create-post_Coleccion_Final.css) — antes era texto plano gris
secundario sin distinguirse del resto de etiquetas de la página.
Borde de acento dorado a la izquierda + comilla grande decorativa
+ itálica, para que se lea como sinopsis narrada. */
.movie-detail-overview {
position: relative;
font-size: 13.5px;
font-style: italic;
color: var(--text-primary);
line-height: 1.7;
padding: 4px 16px 4px 20px;
border-left: 3px solid var(--vip-color);
overflow: hidden;
}
.movie-detail-overview::before {
content: "\201C";
position: absolute;
top: -14px;
left: 14px;
font-size: 56px;
font-style: normal;
font-family: Georgia, "Times New Roman", serif;
line-height: 1;
color: var(--vip-color);
opacity: 0.18;
pointer-events: none;
}
.movie-available-tag {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
background: rgba(34, 197, 94, 0.15);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.3);
padding: 5px 10px;
border-radius: 6px;
}
.movie-unavailable-tag {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
padding: 5px 10px;
border-radius: 6px;
}
@media screen and (max-width: 768px) {
.movie-detail-body {
flex-direction: column;
}
.movie-detail-poster {
width: 100%;
height: auto;
max-height: 220px;
}
}
/* ═══════════════════════════════════════════
SECCIÓN DE COMENTARIOS
═══════════════════════════════════════════ */
.comments-section{
padding:32px 0 48px;
max-width:860px;
margin:0 auto;
}
.comments-header{
display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.comments-title{
font-size:18px; font-weight:800; color:#f1f5f9;
display:flex; align-items:center; gap:8px;
}
.comments-title i{ color:#0ea5e9; }
.comments-count{
font-size:12px; color:#475569; background:#0e1422;
border:1px solid rgba(255,255,255,.07); border-radius:20px;
padding:2px 10px;
}
/* Formulario */
.comment-form-wrap{
background:#0e1422; border:1px solid rgba(255,255,255,.07);
border-radius:14px; padding:16px; margin-bottom:20px;
}
.comment-textarea{
width:100%; background:#070d1a; border:1px solid rgba(255,255,255,.08);
border-radius:10px; padding:12px 14px; font-size:14px;
color:#e2e8f0; resize:vertical; min-height:90px; outline:none;
font-family:inherit; transition:border .2s;
}
.comment-textarea:focus{ border-color:#0ea5e9; }
.comment-form-footer{
display:flex; justify-content:space-between; align-items:center;
margin-top:10px; flex-wrap:wrap; gap:8px;
}
.comment-char{ font-size:11px; color:#475569; }
.comment-submit-btn{
display:inline-flex; align-items:center; gap:7px;
padding:9px 20px; border-radius:9px; font-size:13px; font-weight:700;
background:linear-gradient(135deg,#0284c7,#0ea5e9); color:#fff;
border:none; cursor:pointer; transition:opacity .2s;
}
.comment-submit-btn:hover{ opacity:.85; }
.comment-submit-btn:disabled{ opacity:.4; cursor:not-allowed; }
.comment-msg{
font-size:12.5px; margin-top:8px; padding:8px 12px;
border-radius:8px; display:none;
}
.comment-msg.ok{ background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25); color:#34d399; }
.comment-msg.err{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); color:#f87171; }
/* Aviso login */
.comment-login-msg{
background:#0e1422; border:1px solid rgba(255,255,255,.07);
border-radius:12px; padding:16px 20px; margin-bottom:20px;
display:flex; align-items:center; gap:10px;
font-size:13px; color:#64748b;
}
.comment-login-msg i{ color:#0ea5e9; }
.comment-login-msg a{ color:#0ea5e9; font-weight:700; text-decoration:none; }
/* Lista */
.comments-list{ display:flex; flex-direction:column; gap:12px; }
.comments-loading{ color:#475569; font-size:13px; text-align:center; padding:24px; }
.comment-empty{ color:#475569; font-size:13px; text-align:center; padding:32px;
background:#0e1422; border:1px solid rgba(255,255,255,.05); border-radius:12px; }
/* Card de comentario */
.comment-card{
background:#0e1422; border:1px solid rgba(255,255,255,.06);
border-radius:14px; padding:16px 18px;
transition:border-color .2s;
}
.comment-card:hover{ border-color:rgba(14,165,233,.2); }
.comment-top{
display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;
}
.comment-avatar{
width:36px; height:36px; border-radius:50%;
background:linear-gradient(135deg,#0ea5e9,#38bdf8);
display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:800; color:#fff; flex-shrink:0;
text-transform:uppercase;
}
.comment-user{ font-size:13px; font-weight:700; color:#e2e8f0; }
.comment-role-badge{
font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px;
}
.role-admin{ background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.25); }
.role-mod { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.25); }
.comment-date{ font-size:11px; color:#475569; margin-left:auto; }
.comment-body{ font-size:13.5px; color:#94a3b8; line-height:1.7; margin-bottom:12px; word-break:break-word; }
/* Votos */
.comment-votes{ display:flex; align-items:center; gap:8px; }
.vote-btn{
display:inline-flex; align-items:center; gap:5px;
padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700;
border:1px solid rgba(255,255,255,.08); background:transparent;
color:#475569; cursor:pointer; transition:all .15s;
}
.vote-btn:hover{ border-color:#0ea5e9; color:#0ea5e9; }
.vote-btn.voted-up { border-color:#10b981; color:#10b981; background:rgba(16,185,129,.08); }
.vote-btn.voted-down{ border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.08); }
.vote-btn i{ font-size:11px; }
/* ── Fix sidebar responsive: a 100% de zoom el sidebar debe estar al costado
El problema era flex: 0 0 1450px en content-area — en monitores menores de
1770px (1450+320 de sidebar) el wrapper wrapeaba y el sidebar caía abajo.
Se reduce el ancho fijo del area de contenido para que quepan ambos. ── */
@media (min-width: 1200px) {
body.shell-visible .content-area {
flex: 0 0 min(1450px, calc(100vw - 360px));
}
}
/* Sección de comentarios cuando está DENTRO de page-container */
.page-container .comments-section {
margin: 24px 0;
border-top: 1px solid rgba(255,255,255,.06);
padding-top: 24px;
}
/* ==========================================================================
RESPONSIVE MÓVIL — post-public.html
Cubre todos los problemas visibles en pantallas < 480px (teléfonos)
y < 768px (tablets). Cada sección se nombra para corresponderse
con lo que se ve en la interfaz.
========================================================================== */
@media (max-width: 768px) {
/* ── Layout general ── */
.page-container {
padding: 10px;
}
/* ── Poster: de 470px fijo a fluido ── */
.step-content.active {
grid-template-columns: 1fr;
gap: 20px;
}
.poster-section {
width: 100%;
max-width: 280px;
margin: 0 auto;
}
/* ── Título del post debajo del poster ── */
.post-title,
#postTitle {
font-size: clamp(16px, 5vw, 22px) !important;
line-height: 1.35;
text-align: center;
}
/* ── Info grid (datos + sinopsis) ── */
.info-grid {
grid-template-columns: 1fr;
gap: 16px;
}
/* ── Info técnica + servidores: de 2 col a 1 col ── */
.info-servers-row {
grid-template-columns: 1fr;
padding: 16px;
gap: 16px;
}
/* ── Label ancho fijo que desbordaba en móvil ── */
.info-item-label {
min-width: 90px;
font-size: 0.72rem;
}
.info-item-row {
gap: 10px;
padding: 9px 12px;
font-size: 0.85rem;
}
/* ── Servidores: iconos más pequeños ── */
.servers-container {
min-height: 60px;
padding: 10px;
gap: 6px;
}
.download-server-icon {
width: 32px;
height: 32px;
}
/* ── Enlaces de descarga: de 2 col a 1 col ── */
.download-main-container {
grid-template-columns: 1fr;
gap: 16px;
}
.download-cards {
max-height: none;
}
.download-card {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.download-card .card-right {
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
}
/* ── Tráiler + capturas: de lado a lado → apilados ── */
.trailer-captures-row,
.trailer-captures-grid {
flex-direction: column !important;
gap: 16px;
}
.trailer-section {
min-width: 0;
width: 100%;
}
.captures-wrapper img {
height: 110px;
}
/* ── Tags de póster ── */
.poster-tags {
gap: 6px;
}
.poster-tags span {
padding: 4px 8px;
font-size: 0.68rem;
}
/* ── Temporadas: cards más pequeñas ── */
.season-card-public {
flex: 0 0 120px;
width: 120px;
}
/* ── Actores: fotos más pequeñas ── */
.actor-photo {
width: 80px;
height: 80px;
}
.actor-name {
font-size: 11px;
}
/* ── Membership box ── */
.membership-box {
flex-direction: column;
gap: 12px;
padding: 16px;
text-align: center;
}
.join-btn {
width: 100%;
}
/* ── Relacionados: nombre truncado ── */
.related-grid .related-item .related-title {
font-size: 11px;
-webkit-line-clamp: 2;
}
/* ── Tabs de categoría (ppHorizontalTabs) ── */
.horizontal-tabs {
gap: 6px;
overflow-x: auto;
padding-bottom: 6px;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.tab-btn {
white-space: nowrap;
padding: 7px 12px;
font-size: 11px;
flex-shrink: 0;
}
/* ── Grid de resultados del filtro ── */
.posts-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
/* ── Comentarios ── */
.comments-section {
padding: 20px 0 32px;
}
.comment-form-footer {
flex-direction: column;
align-items: flex-start;
}
.comment-submit-btn {
width: 100%;
justify-content: center;
}
/* ── Botones de descarga ── */
.btn-download,
.btn-vip-download {
padding: 10px 14px;
font-size: 13px;
width: 100%;
justify-content: center;
}
/* ── Header del post visible en móvil ── */
.main-header {
padding: 0 12px;
}
.logo-text {
font-size: 18px;
}
/* ── Reportar aporte ── */
.report-btn,
#reportAporteBtn {
width: 100%;
text-align: center;
justify-content: center;
}
}
@media (max-width: 480px) {
/* ── Poster aún más pequeño en teléfonos angostos ── */
.poster-section {
max-width: 220px;
}
/* ── Grid de años en sidebar: 4 columnas ── */
.years-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 4px;
}
.years-grid button {
font-size: 11px;
padding: 6px 2px;
}
/* ── Plataformas en sidebar: más compactas ── */
.platform-filter-grid {
gap: 5px;
}
.platform-btn {
font-size: 10px;
padding: 5px 8px;
}
/* ── Resolución y calidad ── */
.tags-flex-row {
gap: 5px;
}
.tag-filter-btn,
.q-btn {
font-size: 10px;
padding: 5px 9px;
}
/* ── Tarjetas del slider relacionados ── */
.related-grid .related-item {
width: 100px;
}
/* ── Slider de estrenos en shell (3 tarjetas → 2) ── */
body.shell-visible .slider-item {
flex: 0 0 calc(50% - 8px);
}
}
/* ==========================================================================
DISEÑO MÓVIL COMPLETO — post-public + catalog header
Inspirado en el diseño de referencia (imágenes proporcionadas)
Activa en ≤ 768px. No toca nada del diseño desktop.
========================================================================== */
@media (max-width: 768px) {
/* ── 1. HEADER MÓVIL: logo + iconos a la derecha ── */
.header-container {
padding: 0 14px;
gap: 0;
}
.logo-text {
font-size: 18px;
}
.sub-logo {
font-size: 8px;
}
/* Ocultar nav de texto — se sustituye por iconos */
.main-nav {
display: none !important;
}
/* Mostrar iconos móvil: lupa + login + hamburguesa */
.mobile-nav-icons {
display: flex !important;
align-items: center;
gap: 6px;
margin-left: auto;
}
.mobile-nav-btn {
background: none;
border: none;
color: #94a3b8;
font-size: 20px;
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: color .2s;
text-decoration: none;
}
.mobile-nav-btn:hover { color: #f1f5f9; }
.mobile-nav-btn.login-icon { color: #00bcd4; font-size: 20px; }
/* Buscador colapsable — se expande al pulsar la lupa */
.search-box {
position: absolute;
top: 70px;
left: 0;
right: 0;
padding: 8px 14px;
background: rgba(11,15,25,.97);
border-bottom: 1px solid rgba(255,255,255,.08);
display: none;
z-index: 9998;
}
.search-box.mobile-open {
display: flex !important;
}
.search-box input {
width: 100%;
font-size: 15px;
padding: 10px 14px;
}
/* Menú drawer (hamburguesa) */
.mobile-drawer {
position: fixed;
top: 0; right: -100%;
width: 75vw; max-width: 280px;
height: 100vh;
background: #0a0f1e;
border-left: 1px solid rgba(255,255,255,.08);
z-index: 99999;
transition: right .28s cubic-bezier(.25,.46,.45,.94);
padding: 70px 0 24px;
display: flex;
flex-direction: column;
}
.mobile-drawer.open { right: 0; }
.mobile-drawer-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.6);
z-index: 99998;
display: none;
}
.mobile-drawer-overlay.open { display: block; }
.mobile-drawer a, .mobile-drawer button {
display: flex; align-items: center; gap: 12px;
padding: 14px 22px;
color: #94a3b8; text-decoration: none;
font-size: 14px; font-weight: 700;
border: none; background: none;
border-bottom: 1px solid rgba(255,255,255,.05);
cursor: pointer; font-family: inherit;
transition: color .15s, background .15s;
}
.mobile-drawer a:hover, .mobile-drawer button:hover {
color: #f1f5f9; background: rgba(255,255,255,.04);
}
.mobile-drawer a i, .mobile-drawer button i {
width: 18px; text-align: center; color: #0ea5e9;
}
.mobile-drawer .drawer-login-btn {
color: #00bcd4;
}
/* ── 2. PAGE-CONTAINER: fluido sin padding lateral grande ── */
.page-container {
padding: 8px 10px;
max-width: 100%;
}
/* ── 3. HERO backdrop: más compacto ── */
.hero-section {
min-height: 90px;
margin-bottom: 0;
}
.hero-content h1 {
font-size: clamp(15px, 5vw, 20px);
padding: 8px 12px;
line-height: 1.3;
}
/* ── 4. STEP-CONTENT: columna única ── */
.step-content.active {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ── 5. POSTER: centrado, máx 200px ── */
.poster-section {
width: 100%;
max-width: 200px;
margin: 0 auto;
}
/* ── 6. INFO-GRID: columna única ── */
.info-grid {
grid-template-columns: 1fr;
gap: 12px;
}
/* ── 7. SECCIONES como acordeones en móvil ── */
.mobile-accordion {
background: var(--bg-card, #131c2e);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
margin-bottom: 10px;
overflow: hidden;
}
.mobile-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
cursor: pointer;
font-size: 12px;
font-weight: 700;
color: #94a3b8;
letter-spacing: .5px;
text-transform: uppercase;
gap: 10px;
user-select: none;
}
.mobile-accordion-header i.acc-icon {
font-size: 11px;
transition: transform .25s;
flex-shrink: 0;
}
.mobile-accordion-header i.acc-section-icon {
color: #0ea5e9;
font-size: 13px;
}
.mobile-accordion-header.open i.acc-icon {
transform: rotate(180deg);
}
.mobile-accordion-body {
display: none;
padding: 4px 16px 16px;
}
.mobile-accordion-body.open {
display: block;
}
/* ── 8. ENLACES DE DESCARGA: cards verticales ── */
.download-main-container {
grid-template-columns: 1fr;
gap: 12px;
}
.download-cards {
max-height: none;
overflow: visible;
}
.download-card {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 14px;
}
.download-card .card-left h3 {
font-size: 14px;
}
.download-card .card-right {
width: 100%;
flex-wrap: wrap;
gap: 7px;
}
.download-card .card-right button,
.download-card .card-right a {
flex: 1;
min-width: 120px;
justify-content: center;
text-align: center;
padding: 10px 12px;
font-size: 13px;
}
.btn-download, .vip-btn {
width: 100%;
justify-content: center;
padding: 12px;
font-size: 14px;
}
/* ── 9. INFO GENERAL + SERVIDORES: columna única ── */
.info-servers-row {
grid-template-columns: 1fr;
padding: 14px;
gap: 14px;
}
.info-item-label { min-width: 80px; font-size: 11px; }
.info-item-value { font-size: 13px; }
.info-item-row { padding: 9px 12px; gap: 8px; }
/* ── 10. ACTORES: fotos más pequeñas ── */
.actor-card { min-width: 80px; max-width: 80px; }
.actor-photo { width: 72px; height: 72px; }
.actor-name { font-size: 10.5px; }
.actor-role { font-size: 9.5px; }
/* ── 11. TEMPORADAS ── */
.season-card-public { flex: 0 0 110px; width: 110px; }
/* ── 12. TABS de categoría: scroll horizontal ── */
.horizontal-tabs {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
scrollbar-width: none;
gap: 5px;
}
.horizontal-tabs::-webkit-scrollbar { display: none; }
.tab-btn {
white-space: nowrap;
flex-shrink: 0;
font-size: 11px;
padding: 7px 11px;
}
/* ── 13. MEMBERSHIP-BOX: vertical ── */
.membership-box {
flex-direction: column;
text-align: center;
padding: 14px;
gap: 10px;
}
.join-btn { width: 100%; padding: 12px; font-size: 13px; }
/* ── 14. COMENTARIOS ── */
.comments-section { padding: 16px 0 28px; }
.comment-form-footer { flex-direction: column; gap: 8px; }
.comment-submit-btn { width: 100%; justify-content: center; }
/* ── 15. RELACIONADOS: nombre más corto ── */
.related-grid { gap: 8px; }
/* ── 16. TRÁILER y CAPTURAS: apilados ── */
.media-section {
flex-direction: column !important;
gap: 12px;
}
.trailer-section, .captures-section {
min-width: 0;
width: 100%;
}
.captures-wrapper img { height: 100px; }
/* ── 17. REPORTAR APORTE ── */
.report-btn { width: 100%; text-align: center; font-size: 13px; }
/* ── 18. GRID de resultados ── */
.posts-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
/* ── 19. LAYOUT del shell: ocultar sidebar en móvil ── */
body.shell-visible .layout-container {
grid-template-columns: 1fr !important;
padding: 0 10px;
margin-top: 80px;
}
body.shell-visible aside.sidebar-area.pp-shell-piece {
display: none;
}
/* ── 20. SLIDER compacto: 2 items visibles ── */
body.shell-visible .slider-item {
flex: 0 0 calc(50% - 6px);
}
/* ── 21. DOWNLOAD-BOX: quitar padding excesivo ── */
.download-box {
padding: 12px 0;
}
.download-info-general, .download-links-box {
padding: 12px;
}
/* ── 22. Poster tags más pequeños ── */
.poster-tags span {
font-size: 10px;
padding: 3px 8px;
}
}
/* ── Ancho < 480px: ajustes adicionales ── */
@media (max-width: 480px) {
.poster-section { max-width: 170px; }
.actor-card { min-width: 70px; max-width: 70px; }
.actor-photo { width: 62px; height: 62px; }
}
/* ==========================================================================
ACORDEONES MÓVILES — .mob-accordion
Creados dinámicamente por initMobileAccordions() en post-public.js.
Solo afectan a ≤ 768px (la función JS ya hace el check antes de crearse).
========================================================================== */
.mob-accordion {
background: #0f1729;
border: 1px solid rgba(255,255,255,.07);
border-radius: 13px;
margin-bottom: 10px;
overflow: hidden;
}
.mob-acc-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 16px;
background: none;
border: none;
cursor: pointer;
gap: 10px;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
/* Estado visual de touch */
transition: background .15s;
}
.mob-acc-header:active {
background: rgba(255,255,255,.04);
}
.mob-acc-left {
display: flex;
align-items: center;
gap: 10px;
}
.mob-acc-left i {
color: #0ea5e9;
font-size: 13px;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.mob-acc-label {
font-size: 11.5px;
font-weight: 700;
color: #94a3b8;
letter-spacing: .6px;
text-transform: uppercase;
}
.mob-acc-chevron {
color: #475569;
font-size: 11px;
flex-shrink: 0;
transition: transform .25s cubic-bezier(.25,.46,.45,.94);
}
.mob-acc-chevron.open {
transform: rotate(180deg);
color: #0ea5e9;
}
/* El contenido del acordeón no tiene padding propio —
cada sección mantiene sus estilos internos */
.mob-accordion > .cast-slider-container,
.mob-accordion > .media-section,
.mob-accordion > .season-section,
.mob-accordion > .comments-section {
padding: 0 14px 14px;
border-top: 1px solid rgba(255,255,255,.05);
}
/* Temporadas: quitar el block-title interno que ya está en el header */
.mob-accordion > #seasonSection > .block-title {
display: none;
}
/* Comentarios: quitar el padding del header interno cuando está en acordeón */
.mob-accordion > #commentsSection {
padding: 10px 14px 14px;
}
.mob-accordion > #commentsSection .comments-header {
display: none; /* El título ya está en el acordeón header */
}
/* Tráiler y capturas: apilados verticalmente dentro del acordeón */
.mob-accordion > .media-section {
flex-direction: column !important;
gap: 14px;
}
/* ==========================================================================
DISEÑO MÓVIL PREMIUM — post-public.html
Rediseño completo para ≤ 768px. Estilo limpio tipo app nativa.
- Poster centrado con rating encima
- Título + badges debajo del poster
- Todo colapsado por defecto excepto descarga
- Acordeones con estilo premium
========================================================================== */
@media (max-width: 768px) {
/* ─── LAYOUT BASE ─────────────────────────────────────── */
body { background: #080c16; }
.page-container {
padding: 0;
max-width: 100%;
background: transparent;
}
/* Ocultar hero backdrop en móvil — el título va debajo del poster */
.hero-section { display: none !important; }
/* ─── MAIN-POST-CARD ──────────────────────────────────── */
.main-post-card {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
}
/* ─── POSTER centrado con fondo difuminado ─────────────── */
.step-content.active {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.poster-section {
width: 100%;
max-width: 100%;
position: relative;
/* Fondo degradado con el poster como backdrop */
background: linear-gradient(to bottom, #0d1628 0%, #080c16 100%);
padding: 24px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
/* Rating badge encima del poster */
#tagRating {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
background: rgba(0,0,0,.82);
border: 1px solid rgba(234,179,8,.35);
color: #facc15;
font-size: 13px;
font-weight: 800;
padding: 5px 10px;
border-radius: 8px;
}
.poster-container {
width: 180px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.7);
border: 2px solid rgba(255,255,255,.08);
}
/* ─── TÍTULO Y BADGES bajo el poster ───────────────────── */
.mob-post-header {
width: 100%;
padding: 18px 16px 0;
text-align: center;
}
.mob-post-title {
font-size: clamp(17px, 5vw, 22px);
font-weight: 900;
color: #f8fafc;
line-height: 1.25;
letter-spacing: -.3px;
margin-bottom: 6px;
}
.mob-post-year {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.mob-post-original {
font-size: 12px;
color: #475569;
margin: 4px 0 12px;
}
/* Badges de tipo, calidad, idioma */
.mob-post-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 10px 0;
}
.mob-badge {
font-size: 10.5px;
font-weight: 800;
padding: 4px 10px;
border-radius: 20px;
letter-spacing: .3px;
text-transform: uppercase;
}
.mob-badge-type { background: rgba(14,165,233,.15); color: #38bdf8; border: 1px solid rgba(14,165,233,.3); }
.mob-badge-quality { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.mob-badge-free { background: rgba(34,197,94,.15); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.mob-badge-res { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
/* Calidad y formato + Idiomas — grid 2 col */
.mob-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 12px 0;
width: 100%;
}
.mob-meta-box {
background: #0f1729;
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px;
padding: 10px 12px;
}
.mob-meta-label {
font-size: 9px;
font-weight: 700;
color: #475569;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 7px;
}
.mob-meta-items {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
}
/* poster-tags: ocultar los originales, los reemplazamos con mob-post-header */
.poster-tags { display: none !important; }
/* ─── INFO CONTAINER: completamente reorganizado ──────── */
.info-container {
width: 100%;
padding: 0;
}
/* Ocultar info-grid original — se muestra en acordeones del mob-header */
.info-grid { display: none !important; }
/* block-title: ocultar solo los que no están dentro de acordeones */
.main-post-card .block-title { display: none; }
/* cast-slider-container: el JS lo envuelve en acordeón y lo controla */
/* NO ocultarlo con CSS — el JS pone display:none en el acordeón */
/* .cast-slider-container { display: none; } ← eliminado */
.platforms-container { display: none; }
#platformsTitle { display: none !important; }
/* cast-slider-container: visibilidad controlada por .mob-acc-collapsed / .mob-acc-expanded */
/* ─── SECCIONES BASE ──────────────────────────────────── */
.download-box {
background: transparent;
padding: 0 12px;
margin-bottom: 10px;
}
.download-main-container {
grid-template-columns: 1fr;
gap: 10px;
}
/* Info técnica — oculta en móvil (se mueve a acordeón) */
.download-info-general { display: none; }
/* Descarga visible directamente */
.download-links-column { gap: 10px; }
.download-links-box {
padding: 14px;
border-radius: 12px;
}
.download-links-title {
font-size: 11px;
letter-spacing: 1px;
color: #475569;
}
.download-cards { max-height: none; gap: 10px; }
.download-card {
flex-direction: column;
gap: 10px;
padding: 14px;
border-radius: 12px;
}
.download-card .card-right {
width: 100%;
flex-direction: column;
gap: 8px;
}
.download-card .card-right button,
.download-card .card-right a,
.btn-download, .vip-btn {
width: 100%;
justify-content: center;
padding: 13px;
font-size: 14px;
font-weight: 800;
border-radius: 10px;
}
.report-container { padding: 0; }
.report-btn { width: 100%; padding: 13px; border-radius: 10px; font-size: 13px; }
/* info-servers-row en acordeón */
.info-servers-row {
display: none; /* JS lo gestiona */
}
/* membership box */
.membership-box {
margin: 10px 12px;
flex-direction: column;
text-align: center;
padding: 14px;
border-radius: 12px;
gap: 10px;
}
.join-btn { width: 100%; padding: 12px; border-radius: 10px; }
/* ─── ACORDEONES PREMIUM ──────────────────────────────── */
.mob-accordion {
margin: 0 12px 8px;
background: #0f1729;
border: 1px solid rgba(255,255,255,.08);
border-radius: 13px;
overflow: hidden;
}
.mob-acc-header {
padding: 15px 16px;
background: #0f1729;
transition: background .15s;
}
.mob-acc-header:active { background: #131e35; }
.mob-acc-label {
font-size: 11px;
color: #94a3b8;
letter-spacing: .8px;
}
.mob-acc-chevron { font-size: 12px; }
/* Temporadas y colecciones: el JS controla display via accordion */
/* NO ocultar con CSS — el accordion JS pone display:none */
/* Media section: el JS controla display via accordion */
/* NO ocultar con CSS */
/* Cuando el acordeón está abierto, mostrar bien la media-section */
.mob-accordion > .media-section {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 14px 14px;
}
/* cast-slider dentro del acordeón: visibilidad via mob-acc-* */
/* Comentarios colapsados */
.comments-section { padding: 10px 14px 14px; }
.mob-accordion > .comments-section .comments-header { display: none; }
/* Relacionados */
.related-section {
margin: 10px 12px;
padding: 16px;
background: #0f1729;
border: 1px solid rgba(255,255,255,.07);
border-radius: 13px;
}
.related-section .block-title {
display: block;
font-size: 12px;
font-weight: 800;
color: #f1f5f9;
letter-spacing: .5px;
margin-bottom: 14px;
}
/* Layout del shell oculta sidebar */
body.shell-visible .layout-container {
grid-template-columns: 1fr !important;
padding: 0 0 20px;
margin-top: 70px;
gap: 0;
}
body.shell-visible aside.sidebar-area.pp-shell-piece {
display: none;
}
/* Slider compacto */
body.shell-visible .slider-section--compact {
margin: 0;
padding: 10px 12px;
background: #080c16;
}
body.shell-visible .slider-item {
flex: 0 0 calc(40% - 6px);
}
}
/* ─── 480px: ajustes adicionales ───────────────────────── */
@media (max-width: 480px) {
.poster-container { width: 160px; }
body.shell-visible .slider-item {
flex: 0 0 calc(45% - 6px);
}
.mob-meta-grid { grid-template-columns: 1fr 1fr; }
}
/* ==========================================================================
BACKDROP BORROSO EN MÓVIL — poster como fondo difuminado de la sección
========================================================================== */
@media (max-width: 768px) {
.poster-section {
overflow: hidden;
}
/* Capa de blur sobre el backdrop */
.poster-section::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
background-size: cover;
background-position: center top;
filter: blur(18px) brightness(.35) saturate(1.2);
transform: scale(1.1); /* evita bordes blancos del blur */
z-index: 0;
}
/* Capa de degradado encima del blur */
.poster-section::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(8,12,22,.3) 0%,
rgba(8,12,22,.7) 70%,
rgba(8,12,22,1) 100%
);
z-index: 1;
}
/* El poster y el rating deben ir encima de las capas */
.poster-section .poster-container,
.poster-section #tagRating {
position: relative;
z-index: 2;
}
}
/* ==========================================================================
CONTROL DE VISIBILIDAD DE ACORDEONES MÓVILES — via clases JS
Usa clases en lugar de style.display para evitar conflictos de especificidad
========================================================================== */
@media (max-width: 768px) {
/* Ocultar cuando el acordeón está colapsado */
.mob-acc-collapsed {
display: none !important;
}
/* Mostrar cuando está expandido */
.mob-acc-expanded {
display: block !important;
}
/* Media section expandida: flex en vez de block */
.mob-accordion > .media-section.mob-acc-expanded {
display: flex !important;
flex-direction: column;
gap: 12px;
padding: 0 14px 14px;
}
/* Cast slider expandido */
.mob-accordion > .cast-slider-container.mob-acc-expanded {
display: block !important;
padding: 8px 14px 14px;
overflow-x: auto;
}
/* Cast slider colapsado — garantizar ocultamiento */
.mob-accordion > .cast-slider-container.mob-acc-collapsed {
display: none !important;
}
/* Comentarios expandidos */
.mob-accordion > #commentsSection.mob-acc-expanded {
display: block !important;
}
}
/* ==========================================================================
TEMPORADAS EN MÓVIL — cards más compactas
Solo afecta ≤ 768px
========================================================================== */
@media (max-width: 768px) {
.season-card-public {
flex: 0 0 100px;
width: 100px;
border-radius: 10px;
}
.season-card-public img {
height: 140px;
}
.season-card-public-info {
padding: 7px 8px;
}
.season-card-public-info strong {
font-size: 12px;
}
.season-card-public-info span {
font-size: 10px;
}
.seasons-cards-row {
gap: 10px;
}
}
/* ==========================================================================
FIXES MÓVIL — Temporadas y Colecciones (≤ 768px)
========================================================================== */
@media (max-width: 768px) {
/* ── Ocultar block-title interno cuando la sección está en acordeón ── */
.mob-accordion #seasonSection > .block-title,
.mob-accordion #moviesSection > .block-title {
display: none !important;
}
/* ── Cards de películas de colección: mismo tamaño compacto ── */
.movie-card-public {
flex: 0 0 100px;
width: 100px;
border-radius: 10px;
}
.movie-card-public img {
height: 140px;
}
.movie-card-public-info {
padding: 7px 8px;
}
.movie-card-public-info strong {
font-size: 11px;
}
.movie-card-public-info span {
font-size: 10px;
}
.movies-cards-row {
gap: 10px;
}
/* ── Ocultar tooltip en móvil (no funciona sin hover) ── */
.movie-card-public .season-card-public-tooltip,
.season-card-public .season-card-public-tooltip {
display: none !important;
}
/* ── season-container y movie-detail dentro del acordeón ── */
.mob-accordion .season-container,
.mob-accordion #moviesContainer {
padding: 4px 0 8px;
}
}
/* ==========================================================================
RELACIONADOS PREMIUM EN MÓVIL — grid 2 columnas sin slider
≤ 768px: reemplaza el slider horizontal por un grid 2×N limpio
========================================================================== */
@media (max-width: 768px) {
/* Ocultar botones del slider */
.related-section .slider-btn.prev-related,
.related-section .slider-btn.next-related {
display: none !important;
}
/* Quitar overflow:hidden del viewport para que el grid fluya */
.related-viewport {
overflow: visible;
}
/* Convertir flex-slider en grid 2 columnas */
.related-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
transform: none !important; /* cancelar cualquier translateX del slider JS */
transition: none !important;
margin-top: 10px;
}
/* Cada wrapper ocupa su celda completa */
.related-grid .related-card-wrapper {
flex: unset;
width: 100%;
min-width: 0;
}
/* Tarjeta */
.related-grid .post-card {
border-radius: 12px;
overflow: hidden;
}
/* Poster: ratio 2/3 se mantiene, se ve completo */
.related-grid .poster-container {
aspect-ratio: 2 / 3;
}
.related-grid .poster-container img {
border-radius: 12px 12px 0 0;
}
/* Info debajo del poster */
.related-grid .post-details {
padding: 8px 10px 10px;
}
.related-grid .post-card-title {
font-size: 12px;
font-weight: 700;
line-height: 1.35;
height: auto;
-webkit-line-clamp: 2;
margin-bottom: 3px;
}
.related-grid .post-card-subtext {
font-size: 11px;
color: #64748b;
}
}
/* ==========================================================================
RELACIONADOS MÓVIL — ajustes para diseño overlay
========================================================================== */
@media (max-width: 768px) {
/* El post-details ya es absolute — el wrapper no necesita padding extra */
.related-grid .post-card {
border-radius: 12px;
}
.related-grid .post-card-title {
font-size: 11.5px;
}
/* Título de la sección "RELACIONADOS" */
.related-section > .block-title,
.mob-accordion .related-section > .block-title {
font-size: 13px;
font-weight: 800;
color: #f1f5f9;
letter-spacing: .5px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.06);
margin-bottom: 12px;
}
}