/* ========================================================================== post-public-v2.css — rediseño de la ficha pública (estilo paso 4 del wizard) FASE 1: escritorio (>= 1025px). FASE 2: iPad (769px-1024px), mismo estilo con ajustes de layout al final. Móvil (<= 768px) NO se toca aquí. Se carga DESPUÉS de post-public.css y todo va bajo body.pp-v2. Para volver al diseño anterior: quitar el en post-public.html (o la clase pp-v2 del ). No se renombra ningún id/clase que use post-public.js. ========================================================================== */ @media (min-width: 769px) { body.pp-v2 { --v2-card: #111827; --v2-card-2: #151d2e; --v2-border: rgba(255, 255, 255, .08); } /* El post queda alineado con el slider superior y la cinta lateral (antes .page-container añadía 20px de margen interno a cada lado) */ body.pp-v2.shell-visible .page-container { padding-left: 0; padding-right: 0; } /* ── HERO compacto, título centrado, sin solapar la tarjeta ── */ body.pp-v2 .hero-section { aspect-ratio: auto; height: 250px; min-height: 0; max-height: none; margin-bottom: 16px; } body.pp-v2 .hero-overlay { background: linear-gradient(to bottom, rgba(11, 15, 25, .25) 0%, rgba(11, 15, 25, .60) 50%, rgba(11, 15, 25, .90) 100%); } /* Título centrado (horizontal y vertical) como en el diseño original */ body.pp-v2 .hero-content { bottom: 0; align-items: center; justify-content: center; padding: 0 60px; } body.pp-v2 .hero-content h1 { text-align: center; margin: 0 auto; max-width: 950px; font-size: clamp(1.6rem, 2.6vw + 1rem, 2.8rem); line-height: 1.25; text-wrap: balance; } /* ── TARJETA PRINCIPAL: póster 280px + info ── */ body.pp-v2 .main-post-card { background: var(--v2-card); border-radius: 14px; padding: 22px; } body.pp-v2 .main-post-card .step-content.active { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; } body.pp-v2 .poster-section { width: 280px; } body.pp-v2 .poster-container { border-radius: 12px; } body.pp-v2 .poster-tags { gap: 6px; margin-top: 12px; } body.pp-v2 .poster-tags span { padding: 5px 10px; font-size: .7rem; border-radius: 8px; background: var(--v2-card-2); } /* ── Títulos de sección: estilo .sec del wizard ── */ body.pp-v2 .block-title, body.pp-v2 .section-title { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 4px 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; border: 0; border-left: 3px solid var(--accent-color); border-radius: 6px; background: linear-gradient(90deg, rgba(14, 165, 233, .12), transparent); } /* ── DATOS + SINOPSIS ── */ body.pp-v2 .info-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px; margin-bottom: 10px; } body.pp-v2 .info-general-box { background: var(--v2-card-2); border: 1px solid var(--v2-border); border-radius: 12px; padding: 0; overflow: hidden; height: auto; } body.pp-v2 .info-row { justify-content: space-between; align-items: flex-start; gap: 16px; padding: 10px 16px; font-size: 13.5px; } body.pp-v2 .info-label { color: var(--accent-color); font-weight: 600; font-size: 13.5px; white-space: nowrap; } body.pp-v2 .info-value { color: var(--text-primary); font-size: 13.5px; text-align: right; } body.pp-v2 .description-box { background: var(--v2-card-2); border: 1px solid var(--v2-border); border-radius: 12px; padding: 16px 18px; font-size: 14px; line-height: 1.7; color: #cbd5e1; max-height: 260px; height: auto; } /* ── ACTORES: tarjetas cuadradas, flechas fuera de las caras ── */ body.pp-v2 .cast-slider-container { padding: 0 40px; margin-bottom: 14px; } body.pp-v2 .cast-slider { gap: 12px; padding: 4px 0 6px; } body.pp-v2 .cast-slider-container .slider-btn.prev-cast { left: 0; } body.pp-v2 .cast-slider-container .slider-btn.next-cast { right: 0; } body.pp-v2 .cast-card { flex: 0 0 96px; width: 96px; padding: 8px; background: var(--v2-card-2); border-radius: 10px; } body.pp-v2 .cast-photo { height: auto; aspect-ratio: 1; border-radius: 8px; } body.pp-v2 .cast-name { font-size: 12px; padding: 6px 0 2px; } body.pp-v2 .cast-character { font-size: 11px; padding: 0; } /* ── DÓNDE VER ── */ body.pp-v2 .watch-provider-chip { background: var(--v2-card-2); border-radius: 9px; } /* ── SECCIONES DEL CUERPO: mismo ritmo y tarjetas ── */ body.pp-v2 .season-section, body.pp-v2 .media-section { margin-bottom: 20px; } body.pp-v2 .season-section { background: var(--v2-card); border: 1px solid var(--v2-border); border-radius: 14px; padding: 18px 22px 22px; } body.pp-v2 .media-section { gap: 16px; } body.pp-v2 .captures-section, body.pp-v2 .trailer-section { background: var(--v2-card); border-radius: 14px; padding: 18px 20px 20px; } body.pp-v2 .download-box, body.pp-v2 .info-servers-row .more-info-box, body.pp-v2 .info-servers-row .servers-box { border-radius: 14px; } /* Comentarios a todo el ancho, alineados con el resto */ body.pp-v2 .page-container .comments-section { max-width: none; } body.pp-v2 .comments-section .comment-form-wrap, body.pp-v2 .comments-section .comments-list { max-width: none; } /* ── PULIDO (ronda 2) ─────────────────────────────────────────── */ /* DATOS y SINOPSIS: misma altura */ body.pp-v2 .info-block > .info-general-box, body.pp-v2 .info-block > .description-box { flex: 1 1 auto; } /* Títulos restantes con el mismo estilo .sec */ body.pp-v2 .download-title, body.pp-v2 .download-links-title, body.pp-v2 .extra-info-title, body.pp-v2 .comments-title { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); border: 0; border-left: 3px solid var(--accent-color); border-radius: 6px; background: linear-gradient(90deg, rgba(14, 165, 233, .12), transparent); } body.pp-v2 .comments-title i { color: var(--accent-color); } body.pp-v2 .comments-header { display: flex; align-items: center; gap: 12px; } body.pp-v2 .comments-header .comments-title { flex: 1; margin-bottom: 12px; } /* INFORMACIÓN GENERAL como filas (igual que DATOS) */ body.pp-v2 .download-info-general, body.pp-v2 .download-links-box { background: transparent; border: 0; padding: 0; height: auto; } body.pp-v2 .download-details { background: var(--v2-card-2); border: 1px solid var(--v2-border); border-radius: 12px; overflow: hidden; } body.pp-v2 .download-line { padding: 10px 16px; gap: 16px; font-size: 13.5px; } body.pp-v2 .download-line span { text-align: right; color: var(--text-primary); } /* Temporadas: menos aire entre la fila de tarjetas y el detalle */ body.pp-v2 .seasons-cards-row, body.pp-v2 .movies-cards-row { margin-bottom: 0; padding-bottom: 12px; } body.pp-v2 .episodes-detail-wrapper, body.pp-v2 .movie-detail-wrapper { margin-top: 8px; } /* Colección: detalle de película con las mismas tarjetas */ body.pp-v2 .movie-detail-header, body.pp-v2 .movie-detail-body, body.pp-v2 .episodes-detail-public-header { background: var(--v2-card-2); border-color: var(--v2-border); } body.pp-v2 .movie-detail-poster { width: 120px; height: 180px; } body.pp-v2 .movie-card-public, body.pp-v2 .season-card-public { flex-basis: 148px; width: 148px; } body.pp-v2 .collection-cover-movies-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* ========================================================================== FASE 2 — iPad / tablet (769px a 1024px) Con sidebar a la derecha (961-1024) el contenido queda en ~670px; por debajo de 960 el sidebar baja bajo el contenido (regla de post-public.css). ========================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { body.pp-v2 .hero-section { height: 210px; } body.pp-v2 .hero-content { padding: 0 28px; } body.pp-v2 .hero-content h1 { font-size: clamp(1.35rem, 2.2vw + .8rem, 2.05rem); } body.pp-v2 .main-post-card { padding: 18px; } body.pp-v2 .main-post-card .step-content.active { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; } body.pp-v2 .poster-section { width: 220px; } body.pp-v2 .poster-container { max-width: none; margin: 0; } /* DATOS encima de SINOPSIS (no caben lado a lado) */ body.pp-v2 .info-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } body.pp-v2 .description-box { max-height: 200px; } body.pp-v2 .cast-slider-container { padding: 0 34px; } /* Tráiler y capturas apilados, ancho completo */ body.pp-v2 .trailer-section, body.pp-v2 .captures-section { flex: 1 1 100%; min-width: 0; } body.pp-v2 .season-section { padding: 16px; } /* Información general y enlaces apilados */ body.pp-v2 .download-box { padding: 18px; } body.pp-v2 .download-main-container { grid-template-columns: minmax(0, 1fr); } body.pp-v2 .info-servers-row { grid-template-columns: minmax(0, 1fr); } } /* Sidebar debajo del contenido (769-960): tarjetas en 2 columnas */ @media (min-width: 769px) and (max-width: 960px) { body.pp-v2.shell-visible aside.sidebar-area.pp-shell-piece { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } body.pp-v2.shell-visible aside.sidebar-area .standard-box { margin: 0; } body.pp-v2.shell-visible aside.sidebar-area .filter-widget, body.pp-v2.shell-visible aside.sidebar-area .benefits-banner, body.pp-v2.shell-visible aside.sidebar-area .favorites-box { grid-column: 1 / -1; } } /* ========================================================================== FASE 3 — móvil (<= 768px) Se conserva la estructura actual (header + acordeones armados por JS) y se le aplica el mismo lenguaje visual del paso 4: tarjetas #111827 / #151d2e, barra azul a la izquierda, títulos en mayúsculas espaciadas. ========================================================================== */ @media (max-width: 768px) { body.pp-v2 { --v2-card: #111827; --v2-card-2: #151d2e; --v2-border: rgba(255, 255, 255, .08); } /* Título bajo el póster */ body.pp-v2 .pp-m-title { text-wrap: balance; letter-spacing: -.01em !important; } /* Calidad / Idiomas */ body.pp-v2 .pp-m-grid > div { background: var(--v2-card-2) !important; border-color: var(--v2-border) !important; border-radius: 12px !important; } /* Acordeones armados por JS (DATOS, SINOPSIS, INFO TÉCNICA) y los envueltos (.mob-accordion: Reparto, Temporadas, Tráiler, Comentarios) */ body.pp-v2 .pp-m-acc, body.pp-v2 .mob-accordion { background: var(--v2-card) !important; border: 1px solid var(--v2-border) !important; border-left: 3px solid var(--accent-color) !important; border-radius: 12px !important; } body.pp-v2 .pp-m-acc-hdr > span > span, body.pp-v2 .mob-acc-label { color: var(--text-primary) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em !important; } body.pp-v2 .pp-m-acc-hdr, body.pp-v2 .mob-acc-header { background: linear-gradient(90deg, rgba(14, 165, 233, .10), transparent) !important; } /* Contenido interno con el fondo de las filas del wizard */ body.pp-v2 .pp-m-acc > div:not(:first-child) { background: var(--v2-card-2); } /* Relacionados: carrusel horizontal (antes 2 tarjetas enormes por fila) */ body.pp-v2 .related-section .block-title { display: flex; align-items: center; border: 0; border-left: 3px solid var(--accent-color); border-radius: 6px; background: linear-gradient(90deg, rgba(14, 165, 233, .12), transparent); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; } body.pp-v2 .related-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.pp-v2 .related-viewport::-webkit-scrollbar { display: none; } body.pp-v2 .related-grid { display: flex !important; gap: 10px; width: max-content; padding: 2px 12px 8px; } body.pp-v2 .related-grid .related-card-wrapper { flex: 0 0 132px; width: 132px; scroll-snap-align: start; } /* Colección: tarjetas de películas más compactas */ body.pp-v2 .movie-card-public, body.pp-v2 .season-card-public { flex-basis: 112px; width: 112px; } body.pp-v2 .collection-cover-movies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* ── FASE 4: series y colecciones en pantalla chica ── */ /* Sin flechas sobre las fotos: en móvil se desliza con el dedo */ body.pp-v2 .cast-slider-container .slider-btn { display: none !important; } body.pp-v2 .cast-slider-container { padding: 0; } /* Sin espacio de sobra al final de cada acordeón */ body.pp-v2 .mob-accordion > .season-section, body.pp-v2 .mob-accordion > .media-section, body.pp-v2 .mob-accordion > .cast-slider-container { margin-bottom: 0; } body.pp-v2 .mob-accordion .season-container, body.pp-v2 .mob-accordion #moviesContainer { padding-bottom: 10px; } /* Detalle de película: póster chico al lado del texto (antes ocupaba todo el ancho) */ body.pp-v2 .movie-detail-body { flex-direction: row; gap: 12px; padding: 14px; } body.pp-v2 .movie-detail-poster { width: 88px; height: 132px; max-height: none; } body.pp-v2 .movie-detail-overview { font-size: 13px; padding-left: 14px; } /* ── FASE 5: reservar el alto del slider superior (se llena por JS después de cargar y empujaba todo el contenido hacia abajo) ── */ body.pp-v2.shell-visible .slider-section--compact .slider-wrapper { min-height: 128px; } /* Igual que escritorio: VIP primero y temporada "En este post" en verde */ body.pp-v2 .download-cards .vip-card { order: -1; } body.pp-v2 .season-card-public-active, body.pp-v2 .season-card-public-selected { border-color: #10b981; box-shadow: 0 0 0 1px rgba(16, 185, 129, .35); } body.pp-v2 .season-card-public-dot { background: #10b981; box-shadow: none; } body.pp-v2 .season-card-public-active .season-card-public-info::after { content: "En este post"; display: block; margin-top: 2px; color: #34d399; font-size: 11px; font-weight: 700; } body.pp-v2 .season-card-public-selected:not(.season-card-public-active) { border-color: var(--accent-color); box-shadow: 0 0 0 1px rgba(14, 165, 233, .35); } /* Iconos de los títulos (Relacionados, Enlaces de descarga) */ body.pp-v2 .block-title i, body.pp-v2 .download-links-title i { color: var(--accent-color); margin-right: 8px; } } /* FASE 5 (escritorio/tablet): mismo motivo, con el alto de póster real */ @media (min-width: 769px) { body.pp-v2.shell-visible .slider-section--compact .slider-wrapper { min-height: 178px; } } /* Header apretado en iPad vertical (769-1000px): sin partir el texto */ @media (min-width: 769px) and (max-width: 1000px) { body.pp-v2.shell-visible .main-nav { gap: 14px; } body.pp-v2.shell-visible .nav-link { white-space: nowrap; font-size: 12px; } body.pp-v2.shell-visible .logo-text { font-size: 20px; } } /* ========================================================================== FASE 6 — acabado estilo wizard (paso 4) ========================================================================== */ /* Fondo atmosférico: el backdrop del post, muy difuminado, detrás de todo. (--pp-bg lo pone post-public.js) */ body.pp-v2::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--pp-bg, none) center / cover no-repeat; filter: blur(38px) saturate(1.15); transform: scale(1.15); opacity: .30; pointer-events: none; } /* Servidores: chips con icono + nombre */ body.pp-v2 .servers-container { display: flex; flex-wrap: wrap; gap: 10px; background: transparent; border: 0; padding: 0; } body.pp-v2 .servers-container .server-icon-wrapper { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: #151d2e; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; } body.pp-v2 .servers-container .server-icon-wrapper::before, body.pp-v2 .servers-container .server-icon-wrapper::after { display: none !important; } body.pp-v2 .servers-container .download-server-icon { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; } body.pp-v2 .servers-container .server-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } @media (min-width: 769px) { /* Iconos de los títulos */ body.pp-v2 .block-title i, body.pp-v2 .download-title i, body.pp-v2 .download-links-title i, body.pp-v2 .extra-info-title i { color: var(--accent-color); width: 18px; text-align: center; font-size: 13px; } /* DATOS / SINOPSIS: cada caja con su alto natural (como el wizard) */ body.pp-v2 .info-grid { align-items: start; } body.pp-v2 .info-block > .info-general-box, body.pp-v2 .info-block > .description-box { flex: 0 1 auto; } /* Chips del póster (píldoras, ESTRENO/EN EMISIÓN en verde) */ body.pp-v2 .poster-tags span { border-radius: 999px; padding: 5px 12px; font-size: .7rem; background: #151d2e; } body.pp-v2 #tagPremiere, body.pp-v2 #tagOnAir { background: rgba(16, 185, 129, .12); color: #34d399; border-color: rgba(16, 185, 129, .4); } body.pp-v2 #tagRating { background: rgba(234, 179, 8, .12); color: #facc15; border-color: rgba(234, 179, 8, .35); } /* Temporadas / películas: tarjetas compactas con el póster dentro */ body.pp-v2 .season-card-public, body.pp-v2 .movie-card-public { flex: 0 0 116px; width: 116px; padding: 8px; background: #151d2e; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; } body.pp-v2 .season-card-public img, body.pp-v2 .movie-card-public img { height: 150px; border-radius: 8px; opacity: 1; } body.pp-v2 .season-card-public-info, body.pp-v2 .movie-card-public-info { padding: 8px 2px 2px; } /* Temporada disponible en este post: verde + etiqueta "En este post" */ body.pp-v2 .season-card-public-active, body.pp-v2 .season-card-public-selected { border-color: #10b981; box-shadow: 0 0 0 1px rgba(16, 185, 129, .35); } body.pp-v2 .season-card-public-dot { background: #10b981; box-shadow: none; } body.pp-v2 .season-card-public-active .season-card-public-info::after { content: "En este post"; display: block; margin-top: 2px; color: #34d399; font-size: 11px; font-weight: 700; } body.pp-v2 .season-card-public-selected:not(.season-card-public-active) { border-color: var(--accent-color); box-shadow: 0 0 0 1px rgba(14, 165, 233, .35); } /* Enlaces de descarga: VIP primero (como el wizard) */ body.pp-v2 .download-cards .vip-card { order: -1; } body.pp-v2 .download-cards .download-card { border-radius: 14px; } /* Publicación (uploader, créditos, más detalles) como filas */ body.pp-v2 .more-info-list-container .info-item-row { background: #151d2e !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 10px; margin-bottom: 8px; } } /* ========================================================================== BOTÓN "LOGIN / REGISTRO" — sin regla propia en ningún CSS de esta página (quedaba con el estilo por defecto del navegador). Fuera de cualquier @media para que se vea igual en escritorio y en mobile. ========================================================================== */ body.pp-v2 .auth-nav-btn { background: linear-gradient(135deg, var(--accent-color) 0%, #0369a1 100%); border: 1px solid transparent; color: #ffffff; padding: 8px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: var(--transition-smooth); box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28); } body.pp-v2 .auth-nav-btn:hover { background: linear-gradient(135deg, #38bdf8 0%, var(--accent-color) 100%); box-shadow: 0 8px 22px rgba(14, 165, 233, 0.4); transform: translateY(-1px); } body.pp-v2 .auth-nav-btn.logged-in { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); box-shadow: 0 6px 16px rgba(34, 197, 94, 0.28); }