/* ========================================================= POST-PUBLIC-CATALOG.CSS Copia íntegra de catalog.css con TODOS sus selectores prefijados por "body.shell-visible " (incluyendo el contenido interno de @media; @keyframes queda intacto, sus nombres no colisionan con nada). Generado automáticamente — no editar a mano; para regenerar tras un cambio en catalog.css, usar /home/claude/work/namespace_css.py sobre la versión actualizada. Por qué existe: post-public.html necesita el mismo header, slider y sidebar de filtros que ya tiene catalog.html, pero varias clases del catálogo (.post-card, .poster-container, .section-title...) colisionan literalmente con clases ya definidas en post-public.css con reglas incompatibles (distinto aspect-ratio, distinto border-radius, etc.). En vez de un contenedor extra en el HTML, el namespace usa la clase "shell-visible" en (agregada/quitada por toggleCatalogShellVisibility() en post-public.js según el status del post): mientras el body no tenga esa clase, ninguna regla de este archivo aplica — el header/slider/sidebar quedan sin estilo y ocultos (ver las reglas base con display:none en post-public.css), y la página se ve igual que antes. En cuanto el post carga y resulta "published", se agrega la clase y todo este archivo entra en vigor de una sola vez. ===== CONTENIDO ORIGINAL DE CATALOG.CSS A CONTINUACIÓN ===== ========================================================= */ body.shell-visible { --bg-main: #0b0f19; /* Fondo ultra oscuro cinematográfico (igual al wizard) */ --bg-card: #131c2e; /* Contenedores secundarios / sidebar */ --bg-input: #1e293b; /* Inputs, selects, botones base */ --border-color: rgba(255, 255, 255, 0.08); --border-focus: #38bdf8; --text-primary: #f8fafc; --text-secondary: #94a3b8; --accent-color: #0ea5e9; /* Azul cielo premium (antes cian) */ --accent-hover: #38bdf8; --accent-glow: rgba(14, 165, 233, 0.25); --accent-gold: #f3ce13; /* Dorado VIP, igual al badge IMDB del wizard */ --success-color: #10b981; --danger-color: #ef4444; --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); } :where(body.shell-visible *) { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; -webkit-font-smoothing: antialiased; } body.shell-visible { background-color: var(--bg-main); color: var(--text-primary); overflow-x: hidden; } /* ========================================================= HEADER FIJO ========================================================= */ body.shell-visible .main-header { background-color: rgba(11, 15, 25, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); position: fixed; top: 0; left: 0; width: 100%; height: 70px; z-index: 9999; box-shadow: var(--shadow-premium); } body.shell-visible .header-container { max-width: 1600px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; } body.shell-visible .logo-area { display: flex; flex-direction: column; } body.shell-visible .logo-area a { display: flex; flex-direction: column; transition: var(--transition-smooth); } body.shell-visible .logo-text { font-size: 24px; font-weight: 900; letter-spacing: 1px; transition: var(--transition-smooth); } body.shell-visible .accent-text { background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-hover) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: var(--transition-smooth); } body.shell-visible .logo-area a:hover .logo-text { color: #ef4444; } body.shell-visible .logo-area a:hover .accent-text { background: none; -webkit-text-fill-color: #ef4444; color: #ef4444; } body.shell-visible .sub-logo { font-size: 9px; color: var(--text-secondary); letter-spacing: 2px; font-weight: bold; margin-top: -3px; } body.shell-visible .main-nav { display: flex; gap: 25px; } body.shell-visible .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 700; transition: var(--transition-smooth); } body.shell-visible .nav-link:hover, body.shell-visible .nav-link.active { color: var(--text-primary); border-bottom: 2px solid var(--accent-color); padding-bottom: 4px; } body.shell-visible .search-box { display: flex; background-color: var(--bg-input); border-radius: 8px; border: 1px solid var(--border-color); transition: var(--transition-smooth); position: relative; } body.shell-visible .search-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); } body.shell-visible .search-box input { background: transparent; border: none; padding: 8px 15px; color: var(--text-primary); outline: none; font-size: 13px; width: 220px; border-radius: 8px 0 0 8px; } body.shell-visible .search-box button { background: var(--bg-card); border: none; color: var(--text-secondary); padding: 0 14px; cursor: pointer; transition: var(--transition-smooth); border-radius: 0 8px 8px 0; } body.shell-visible .search-box button:hover { color: var(--accent-color); } /* ========================================================= CONTENEDOR PRINCIPAL ========================================================= */ /* Layout controlado por post-public.css (CSS Grid fluido) — no redefinir aquí para evitar conflictos */ body.shell-visible .layout-container { /* ver post-public.css */ } body.shell-visible .content-area { min-width: 0; } /* ========================================================= SLIDER DE ESTRENOS ========================================================= */ body.shell-visible .slider-section { background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, rgba(19, 28, 46, 0.4) 100%); border-radius: 14px; padding: 16px; border: 1px solid var(--border-color); margin-bottom: 35px; } body.shell-visible .section-header-slider { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; } body.shell-visible .slider-title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; } body.shell-visible .slider-arrow { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); } body.shell-visible .slider-arrow:hover { background: var(--accent-color); color: #ffffff; box-shadow: 0 4px 15px var(--accent-glow); } body.shell-visible .slider-wrapper { width: 100%; overflow: hidden; } body.shell-visible .slider-track { display: flex; gap: 15px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } body.shell-visible .slider-item { flex: 0 0 calc(16.666% - 12.5px); min-width: 140px; aspect-ratio: 2 / 3; height: auto; position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; border: 1px solid var(--border-color); transition: var(--transition-smooth); } body.shell-visible .slider-item img { width: 100%; height: 100%; display: block; object-fit: cover; transition: var(--transition-smooth); } body.shell-visible .slider-item:hover { border-color: var(--accent-color); box-shadow: 0 0 18px var(--accent-glow); transform: translateY(-3px); } body.shell-visible .slider-item:hover img { transform: scale(1.05); } body.shell-visible .slider-rating { position: absolute; top: 8px; left: 8px; background: rgba(11, 15, 25, 0.9); border: 1px solid var(--accent-gold); color: var(--accent-gold); font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 6px; z-index: 2; display: flex; align-items: center; gap: 3px; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* ========================================================= FILTROS HORIZONTALES (TABS) ========================================================= */ body.shell-visible .filter-navigation { margin-bottom: 25px; } body.shell-visible .section-title { font-size: 20px; font-weight: 800; margin-bottom: 15px; position: relative; padding-left: 14px; letter-spacing: -0.3px; } body.shell-visible .section-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background-color: var(--accent-color); border-radius: 4px; box-shadow: 0 0 8px var(--accent-glow); } body.shell-visible .horizontal-tabs { display: flex; flex-wrap: wrap; gap: 8px; background-color: var(--bg-card); padding: 12px; border-radius: 12px; border: 1px solid var(--border-color); } body.shell-visible .tab-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary); padding: 9px 16px; font-size: 11px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: var(--transition-smooth); text-transform: uppercase; letter-spacing: 0.3px; } body.shell-visible .tab-btn:hover { background-color: var(--bg-input); color: var(--text-primary); } body.shell-visible .tab-btn.active { background: linear-gradient(135deg, var(--accent-color) 0%, #0284c7 100%); color: #ffffff; box-shadow: 0 4px 14px var(--accent-glow); border-color: transparent; } /* Contador de resultados visibles */ body.shell-visible .results-count { font-size: 12px; color: var(--text-secondary); margin: -8px 0 18px 14px; font-weight: 500; } body.shell-visible .results-count strong { color: var(--accent-color); font-weight: 700; } /* Estado vacío cuando ningún filtro coincide */ body.shell-visible .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-secondary); background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: 14px; } body.shell-visible .empty-state .empty-icon { font-size: 38px; margin-bottom: 12px; opacity: 0.6; } body.shell-visible .empty-state strong { display: block; color: var(--text-primary); font-size: 15px; margin-bottom: 6px; } body.shell-visible .empty-state button { margin-top: 16px; background: var(--accent-color); color: #ffffff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .empty-state button:hover { background: var(--accent-hover); box-shadow: 0 4px 15px var(--accent-glow); } /* ========================================================= REJILLA DE TARJETAS (POSTERS) ========================================================= */ body.shell-visible .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; } body.shell-visible .post-card { background-color: var(--bg-card); border-radius: 12px; position: relative; border: 1px solid var(--border-color); transition: var(--transition-smooth); overflow: hidden; } body.shell-visible .post-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 18px var(--accent-glow); border-color: rgba(14, 165, 233, 0.3); } body.shell-visible .poster-container { position: relative; width: 100%; aspect-ratio: 2/3; overflow: hidden; background: var(--bg-input); } body.shell-visible .poster-container img { width: 100%; height: 100%; object-fit: cover; } /* Skeleton shimmer mientras carga la imagen */ body.shell-visible .poster-container.loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, var(--bg-input) 8%, #2a3a52 18%, var(--bg-input) 33%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { background-position-x: -200%; } } /* COMPONENTES DE ETIQUETA INTERNA */ body.shell-visible .meta-ribbon-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; z-index: 12; } body.shell-visible .rating-badge { background: rgba(11, 15, 25, 0.9); border: 1px solid var(--accent-gold); color: var(--accent-gold); font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 6px; display: flex; align-items: center; gap: 3px; backdrop-filter: blur(4px); } body.shell-visible .premiere-tag { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #ffffff; font-size: 9px; font-weight: 900; padding: 3px 7px; border-radius: 5px; box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45); letter-spacing: 0.3px; text-transform: uppercase; } /* Variante de .premiere-tag para temporadas que aún están publicando episodios (episode_status = "emision"). Mismo tamaño, color distinto para no confundirse con "Estreno". */ body.shell-visible .onair-tag { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); box-shadow: 0 2px 10px rgba(14, 165, 233, 0.45); } /* El slider del hero no tiene el contenedor .meta-ribbon-top de las tarjetas normales, así que el badge se posiciona directo dentro de .slider-item, en la esquina opuesta al rating. */ body.shell-visible .slider-item .premiere-tag { position: absolute; top: 8px; right: 8px; z-index: 2; } body.shell-visible .post-details { padding: 12px; } body.shell-visible .post-card-title { font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--text-primary); min-height: 35px; margin-bottom: 8px; } /* El clamp de 2 líneas vive acá, no en .post-card-title, para que un nombre largo se trunque sin arrastrar consigo la línea de temporada de abajo dentro del mismo límite. */ body.shell-visible .title-main-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Texto corto ("Temporada 01", "Serie Completa") que distingue tarjetas de un mismo show cuando hay varias temporadas publicadas — sin repetir calidad/idioma/formato, que ya se ven en otra parte de la tarjeta (ver buildSeasonSuffix en catalog.js). Va en su propia línea, debajo del nombre de la serie. */ body.shell-visible .title-season-line { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; color: var(--accent-color); } body.shell-visible .post-card-subtext { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; } /* TOOLTIP FLOTANTE AL HACER HOVER */ body.shell-visible .post-tooltip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 15, 25, 0.97); padding: 60px 16px 70px 16px; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: var(--transition-smooth); z-index: 10; border-radius: 12px; cursor: pointer; overflow-y: auto; } body.shell-visible .post-card:hover .post-tooltip { opacity: 1; pointer-events: auto; } body.shell-visible .tooltip-header { font-size: 13px; color: var(--text-primary); font-weight: 800; margin-bottom: 4px; line-height: 1.25; } body.shell-visible .tooltip-year-type { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } /* ========================================================= AÑO Y PÍLDORA DE TIPO (PELÍCULA / SERIE / COLECCIÓN) Cada tipo tiene su propio color para reconocerse de un vistazo, sin necesidad de leer el texto completo. ========================================================= */ body.shell-visible .subtext-year { color: var(--text-secondary); font-weight: 600; } body.shell-visible .type-pill { font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 20px; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.6; } body.shell-visible .type-pill-movie { background: rgba(14, 165, 233, 0.14); color: var(--accent-hover); border: 1px solid rgba(14, 165, 233, 0.3); } body.shell-visible .type-pill-series { background: rgba(168, 85, 247, 0.14); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); } body.shell-visible .type-pill-collection { background: rgba(243, 206, 19, 0.14); color: var(--accent-gold); border: 1px solid rgba(243, 206, 19, 0.3); } body.shell-visible .tooltip-plot { font-size: 11.5px; line-height: 1.45; color: #cbd5e1; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; } body.shell-visible .tooltip-more-link { font-size: 11.5px; font-weight: 700; color: var(--accent-hover); margin-bottom: auto; display: inline-flex; align-items: center; gap: 4px; transition: var(--transition-smooth); } body.shell-visible .post-card:hover .tooltip-more-link { text-shadow: 0 0 12px var(--accent-glow); } body.shell-visible .tooltip-meta-rows { border-top: 1px solid var(--border-color); padding-top: 10px; display: flex; flex-direction: column; gap: 5px; font-size: 11px; } body.shell-visible .meta-item { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); } body.shell-visible .meta-item i { color: var(--accent-color); width: 12px; } body.shell-visible .flag-container { display: flex; gap: 4px; } /* ========================================================= FRANJA DE INFORMACIÓN TÉCNICA INFERIOR (SIEMPRE VISIBLE) Audio, peso, resolución/calidad y banderas de idioma sobre la carátula, igual durante el hover (por eso su z-index va por encima del tooltip de sinopsis). ========================================================= */ body.shell-visible .tech-bottom { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 10px 10px; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 55%, transparent 100%); z-index: 12; display: flex; flex-direction: column; gap: 5px; pointer-events: none; } body.shell-visible .tech-line { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #d8dee8; font-weight: 600; } body.shell-visible .tech-line i { font-size: 10px; color: var(--text-secondary); } body.shell-visible .tech-sep { color: #555f6e; } body.shell-visible .tech-quality { color: var(--text-primary); font-weight: 700; letter-spacing: 0.2px; } body.shell-visible .tech-bottom .flag-container { gap: 4px; } body.shell-visible .flag-icon { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; } /* ========================================================= BARRA LATERAL (SIDEBAR) ========================================================= */ body.shell-visible .sidebar-area { width: 320px; flex-shrink: 0; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; } body.shell-visible .sidebar-area::-webkit-scrollbar { width: 5px; } body.shell-visible .sidebar-area::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 10px; } body.shell-visible .standard-box { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-premium); } body.shell-visible .vip-link { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-decoration: none; font-weight: 800; font-size: 13px; color: #0b0f19; border-radius: 10px; transition: var(--transition-smooth); } body.shell-visible .vip-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(243, 206, 19, 0.35); } body.shell-visible .gold-gradient { background: linear-gradient(135deg, #fde047 0%, var(--accent-gold) 100%); } body.shell-visible .social-link { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--text-primary); } body.shell-visible .social-icon { font-size: 24px; width: 45px; height: 45px; background: var(--bg-input); display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: var(--transition-smooth); } body.shell-visible .social-link:hover .social-icon { transform: scale(1.06); } body.shell-visible .telegram-box .social-icon i { color: #38bdf8; } body.shell-visible .whatsapp-box .social-icon i { color: #10b981; } body.shell-visible .baul-box .social-icon i { color: var(--accent-gold); } body.shell-visible .social-text { display: flex; flex-direction: column; } body.shell-visible .social-text span { font-size: 11px; color: var(--text-secondary); } body.shell-visible .social-text strong { font-size: 14px; } body.shell-visible .social-text small { font-size: 10px; color: var(--border-focus); } /* BANNER DE BENEFICIOS VIP */ body.shell-visible .benefits-banner { background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, var(--bg-card) 100%); border: 1px dashed rgba(14, 165, 233, 0.3); } body.shell-visible .banner-title { font-size: 11px; font-weight: 800; color: var(--text-secondary); text-align: center; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } body.shell-visible .vip-badge-row { display: flex; align-items: center; gap: 15px; } body.shell-visible .vip-tag-large { font-size: 32px; font-weight: 900; color: var(--accent-gold); text-shadow: 0 0 20px rgba(243, 206, 19, 0.3); } body.shell-visible .benefits-list { list-style: none; font-size: 10px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); } /* ========================================================= COMPONENTES DE FILTRO INTERNO (FUNCIONALES) ========================================================= */ body.shell-visible .widget-title { font-size: 12px; font-weight: 800; color: var(--accent-color); margin: 18px 0 10px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: space-between; } body.shell-visible .widget-title:first-of-type { margin-top: 0; } body.shell-visible .widget-title .clear-filter { font-size: 10px; color: var(--text-secondary); font-weight: 600; text-transform: none; cursor: pointer; transition: var(--transition-smooth); opacity: 0; pointer-events: none; } body.shell-visible .widget-title .clear-filter.visible { opacity: 1; pointer-events: auto; } body.shell-visible .widget-title .clear-filter:hover { color: var(--danger-color); } body.shell-visible .select-wrapper select { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color); padding: 10px 12px; color: var(--text-primary); font-size: 12px; border-radius: 8px; outline: none; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .select-wrapper select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); } body.shell-visible .toggle-buttons-row { display: flex; gap: 8px; } body.shell-visible .toggle-btn { flex: 1; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 9px; font-size: 11px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .toggle-btn:hover { border-color: rgba(14, 165, 233, 0.3); color: var(--text-primary); } body.shell-visible .toggle-btn.active { background: var(--accent-color); color: #ffffff; border-color: var(--accent-color); box-shadow: 0 3px 10px var(--accent-glow); } /* MATRIZ DE AÑOS */ body.shell-visible .years-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-height: 180px; overflow-y: auto; } body.shell-visible .years-grid::-webkit-scrollbar { width: 5px; } body.shell-visible .years-grid::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 10px; } body.shell-visible .year-btn { background: var(--bg-input); color: var(--text-secondary); font-size: 11px; padding: 6px 0; text-align: center; border-radius: 6px; cursor: pointer; border: 1px solid transparent; transition: var(--transition-smooth); } body.shell-visible .year-btn:hover { background: #243146; color: var(--text-primary); } body.shell-visible .year-btn.active { background: var(--accent-color); color: #ffffff; font-weight: 700; box-shadow: 0 2px 8px var(--accent-glow); } /* Se muestra solo si todavía no hay ningún post publicado con release_year (caso borde, catálogo recién instalado). */ body.shell-visible .years-empty-state { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-secondary); text-align: center; padding: 8px 0; } body.shell-visible .tags-flex-row { display: flex; flex-wrap: wrap; gap: 6px; } body.shell-visible .tag-filter-btn { background: var(--bg-input); color: var(--text-secondary); font-size: 11px; padding: 7px 13px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .tag-filter-btn:hover { color: var(--text-primary); border-color: rgba(14, 165, 233, 0.3); } body.shell-visible .tag-filter-btn.active { background: var(--accent-color); color: #ffffff; box-shadow: 0 3px 10px var(--accent-glow); } body.shell-visible .qualities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } body.shell-visible .q-btn { background: var(--bg-input); color: var(--text-secondary); font-size: 10px; padding: 7px 0; text-align: center; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .q-btn:hover { color: var(--text-primary); } body.shell-visible .q-btn.active { background: var(--accent-color); color: #ffffff; font-weight: 700; box-shadow: 0 2px 8px var(--accent-glow); } /* Filtro de PLATAFORMA en el sidebar: mismo wrap flexible que Resolución, ya que los nombres varían bastante de largo ("Netflix" vs "Prime Video") y una grilla de columnas fijas quedaría irregular. Se va poblando solo con las plataformas que tienen posts publicados — ver buildPlatformOptionsFromPosts en catalog.js. */ body.shell-visible .platform-filter-grid { display: flex; flex-wrap: wrap; gap: 6px; } body.shell-visible .platform-btn { background: var(--bg-input); color: var(--text-secondary); font-size: 11px; padding: 7px 13px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .platform-btn:hover { color: var(--text-primary); border-color: rgba(14, 165, 233, 0.3); } body.shell-visible .platform-btn.active { background: var(--accent-color); color: #ffffff; box-shadow: 0 3px 10px var(--accent-glow); } /* Texto mostrado cuando todavía no hay posts publicados con ese dato (ej. ninguna resolución o calidad cargada aún) */ body.shell-visible .filter-empty-hint { font-size: 11px; color: var(--text-secondary); font-style: italic; opacity: 0.7; } /* ========================================================= PAGINACIÓN ========================================================= */ body.shell-visible .pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 30px 0; } body.shell-visible .page-btn { min-width: 38px; height: 38px; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; background: var(--bg-input); color: var(--text-primary); font-weight: 700; transition: var(--transition-smooth); } body.shell-visible .page-btn:hover { background: #243146; border-color: rgba(14, 165, 233, 0.3); } body.shell-visible .page-btn.active { background: var(--accent-color); color: #ffffff; border-color: var(--accent-color); box-shadow: 0 3px 10px var(--accent-glow); } /* ========================================================= RESPONSIVE ========================================================= */ /* @media layout ya gestionado por post-public.css (breakpoint 960px) */ @media (max-width: 1200px) { /* layout controlado por post-public.css */ body.shell-visible .slider-item { flex: 0 0 calc(25% - 12.5px); } } @media (max-width: 768px) { body.shell-visible .main-nav { display: none; } body.shell-visible .slider-item { flex: 0 0 calc(50% - 12.5px); } body.shell-visible .posts-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* ========================================================= BOTÓN DE FAVORITOS (♡) SOBRE LA CARÁTULA ========================================================= */ body.shell-visible .favorite-btn { position: absolute; bottom: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(11, 15, 25, 0.75); backdrop-filter: blur(4px); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; font-size: 13px; transition: var(--transition-smooth); } body.shell-visible .favorite-btn:hover { background: rgba(11, 15, 25, 0.95); transform: scale(1.1); } body.shell-visible .favorite-btn.active { color: #ef4444; } body.shell-visible .favorite-btn.active i { animation: favoritePop 0.35s ease; } @keyframes favoritePop { 0% { transform: scale(0.6); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } /* ========================================================= SKELETON DE CARGA INICIAL ========================================================= */ body.shell-visible .skeleton-card { pointer-events: none; } body.shell-visible .skeleton-line { height: 11px; border-radius: 4px; background: linear-gradient(110deg, var(--bg-input) 8%, #2a3a52 18%, var(--bg-input) 33%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } body.shell-visible .skeleton-line-title { width: 85%; margin-bottom: 8px; } body.shell-visible .skeleton-line-subtext { width: 50%; height: 9px; } /* ========================================================= ANIMACIÓN DE ENTRADA EN CASCADA PARA LAS TARJETAS ========================================================= */ body.shell-visible .post-card { animation: cardFadeIn 0.4s ease backwards; } @keyframes cardFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= CONTADOR "PÁGINA X DE Y" EN LA PAGINACIÓN ========================================================= */ body.shell-visible .pagination { align-items: center; } body.shell-visible .pagination-info { font-size: 12px; color: var(--text-secondary); margin-right: 10px; font-weight: 500; } /* ========================================================= BOTÓN FLOTANTE "VOLVER ARRIBA" ========================================================= */ body.shell-visible .scroll-top-btn { position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--accent-color); color: #ffffff; font-size: 16px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transform: translateY(10px); transition: var(--transition-smooth); z-index: 500; } body.shell-visible .scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } body.shell-visible .scroll-top-btn:hover { background: var(--accent-hover); box-shadow: 0 8px 24px var(--accent-glow); } /* ========================================================= BARRA DE CONTROLES: ORDENAR + MODO DE VISTA ========================================================= */ body.shell-visible .grid-controls-bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-bottom: 14px; } body.shell-visible .sort-control { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 12px; } body.shell-visible .sort-control label { color: var(--text-secondary); font-size: 12px; display: flex; align-items: center; } body.shell-visible .sort-control select { background: transparent; border: none; color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; outline: none; } body.shell-visible .sort-control select option { background: var(--bg-card); color: var(--text-primary); } body.shell-visible .view-mode-buttons { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 4px; } body.shell-visible .view-mode-btn { background: transparent; border: none; color: var(--text-secondary); width: 32px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: var(--transition-smooth); } body.shell-visible .view-mode-btn:hover { color: var(--text-primary); } body.shell-visible .view-mode-btn.active { background: var(--accent-color); color: #ffffff; } /* ========================================================= TOGGLE "SOLO MIS FAVORITOS" (SIDEBAR) Antes vivía pegado arriba del bloque .filter-widget (Plataforma, Género, Tipo...) y se veía apretado sin separación clara contra tantos filtros juntos. Ahora vive en su propia caja .favorites-box, igual que VIP/Telegram/WhatsApp, así que ya no necesita el margin-bottom que lo separaba del siguiente filtro. ========================================================= */ body.shell-visible .favorites-only-toggle { width: 100%; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 11px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .favorites-only-toggle:hover { border-color: rgba(239, 68, 68, 0.3); color: var(--text-primary); } body.shell-visible .favorites-only-toggle.active { background: rgba(239, 68, 68, 0.12); border-color: #ef4444; color: #ef4444; } /* ========================================================= FILA "VISTO RECIENTEMENTE" ========================================================= */ body.shell-visible .recently-viewed-section { margin-top: 35px; padding-top: 25px; border-top: 1px solid var(--border-color); } body.shell-visible .recently-viewed-section:first-of-type { margin-top: 40px; } body.shell-visible .recently-viewed-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; } body.shell-visible .recently-viewed-track::-webkit-scrollbar { height: 5px; } body.shell-visible .recently-viewed-track::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 10px; } body.shell-visible .recent-item { flex: 0 0 100px; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--border-color); transition: var(--transition-smooth); } body.shell-visible .recent-item:hover { border-color: var(--accent-color); transform: translateY(-3px); box-shadow: 0 6px 16px var(--accent-glow); } body.shell-visible .recent-item img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================= BADGE "VIP EXCLUSIVO" ========================================================= */ body.shell-visible .vip-corner-badge { position: absolute; top: 36px; left: 8px; background: linear-gradient(135deg, #fde047 0%, var(--accent-gold) 100%); color: #1a1303; font-size: 9px; font-weight: 900; padding: 3px 7px; border-radius: 5px; z-index: 12; box-shadow: 0 2px 10px rgba(243, 206, 19, 0.4); letter-spacing: 0.3px; } /* ========================================================= BOTÓN "COMPARTIR" EN EL TOOLTIP ========================================================= */ body.shell-visible .share-btn { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); cursor: pointer; font-size: 11px; transition: var(--transition-smooth); z-index: 11; } body.shell-visible .share-btn:hover { background: var(--accent-color); color: #ffffff; border-color: var(--accent-color); } body.shell-visible .share-btn.copied { background: var(--success-color); color: #ffffff; border-color: var(--success-color); } /* ========================================================= VISTA EN LISTA (ALTERNATIVA A LA CUADRÍCULA) ========================================================= */ body.shell-visible .list-mode-description, body.shell-visible .list-mode-meta { display: none; } body.shell-visible .posts-grid.list-mode { display: flex; flex-direction: column; gap: 12px; } body.shell-visible .posts-grid.list-mode .post-card { display: grid; grid-template-columns: 90px 1fr; gap: 16px; } body.shell-visible .posts-grid.list-mode .poster-container { aspect-ratio: 2/3; width: 90px; border-radius: 8px 0 0 8px; } body.shell-visible .posts-grid.list-mode .post-details { padding: 14px 14px 14px 0; display: flex; flex-direction: column; } body.shell-visible .posts-grid.list-mode .post-card-title { height: auto; min-height: 0; font-size: 14px; margin-bottom: 4px; } body.shell-visible .posts-grid.list-mode .title-main-line { -webkit-line-clamp: 1; } body.shell-visible .posts-grid.list-mode .post-card-subtext { margin-bottom: 8px; } body.shell-visible .posts-grid.list-mode .list-mode-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; color: var(--text-secondary); margin-bottom: 10px; } body.shell-visible .posts-grid.list-mode .list-mode-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-secondary); margin-top: auto; } body.shell-visible .posts-grid.list-mode .list-mode-meta i { color: var(--accent-color); margin-right: 4px; } /* En modo lista, el tooltip ya no aporta nada (toda la info ya se ve sin hover), así que se desactiva para no estorbar el click. */ body.shell-visible .posts-grid.list-mode .post-tooltip { display: none; } /* El poster en modo lista es pequeño (90px): el badge VIP, el botón de favorito y la franja técnica inferior no caben con buena legibilidad, así que se ocultan ahí (la misma info ya se muestra en .list-mode-meta) y siguen disponibles en grid. */ body.shell-visible .posts-grid.list-mode .vip-corner-badge, body.shell-visible .posts-grid.list-mode .favorite-btn, body.shell-visible .posts-grid.list-mode .tech-bottom { display: none; } /* ========================================================= TAGS DE GÉNERO CLICABLES (TOOLTIP) ========================================================= */ body.shell-visible .genre-tags-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } body.shell-visible .genre-tag { background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.3); color: var(--accent-hover); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .genre-tag:hover { background: var(--accent-color); color: #ffffff; } /* ========================================================= AUTOCOMPLETADO DEL BUSCADOR ========================================================= */ body.shell-visible .search-suggestions-box { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: var(--transition-smooth); z-index: 200; } body.shell-visible .search-suggestions-box.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } body.shell-visible .search-suggestion-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: var(--transition-smooth); } body.shell-visible .search-suggestion-item:hover { background: var(--bg-input); } body.shell-visible .search-suggestion-item img { width: 32px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } body.shell-visible .search-suggestion-text { display: flex; flex-direction: column; overflow: hidden; } body.shell-visible .search-suggestion-title { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.shell-visible .search-suggestion-meta { font-size: 10px; color: var(--text-secondary); }