/* * Codec application UI — 6.0 * Canonical component vocabulary: codec-detail-*, codec-dashboard, codec-collection-dashboard-*, * codec-dashboard-*, codec-sidebar-*, codec-loop-* and codec-card-*. * CPT-specific selectors are reserved for genuine visual differences only. */ :root { --codec-font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --codec-color-text: #41495d; --codec-color-heading: #343844; --codec-color-accent: #e86c43; --codec-color-accent-soft: #f9e4d4; --codec-color-surface: #ffffff; --codec-radius-md: 10px; --codec-radius-lg: 16px; --codec-control-text: #6B7280; --codec-control-accent: #F28A50; --codec-control-accent-soft: #FFF1E8; /* Canonical typography and shape tokens. */ --codec-type-display-size: clamp(34px, 3vw, 52px); --codec-type-display-size-mobile: clamp(30px, 9vw, 42px); --codec-type-display-weight: 800; --codec-type-display-leading: 1.06; --codec-type-display-tracking: -0.035em; --codec-type-card-size: 13px; --codec-type-card-size-mobile: 11px; --codec-type-card-weight: 800; --codec-type-card-leading: 1.2; --codec-radius-pill: 999px; /* Canonical spacing scale. Values intentionally mirror the current UI. */ --codec-space-1: 4px; --codec-space-2: 6px; --codec-space-3: 8px; --codec-space-4: 10px; --codec-space-5: 12px; --codec-space-6: 14px; --codec-space-7: 16px; --codec-space-8: 18px; --codec-space-9: 20px; --codec-space-10: 24px; --codec-space-11: 28px; --codec-space-12: 30px; --codec-space-13: 32px; /* Shared structural sizes used by common controls. */ --codec-control-height-sm: 36px; --codec-control-height-md: 38px; --codec-control-height-lg: 42px; --codec-touch-target: 44px; /* Component tokens live globally; state-only overrides remain local. */ --codec-sidebar-expanded-width: 200px; --codec-sidebar-collapsed-width: 76px; --codec-sidebar-width: var(--codec-sidebar-expanded-width); --codec-sidebar-bg: #fff7ef; --codec-sidebar-text: #515a6c; --codec-sidebar-muted: #8c93a0; --codec-sidebar-accent: #f36c3d; --codec-sidebar-active: var(--codec-color-accent-soft); --codec-sidebar-line: rgba(83,91,107,.16); --codec-sidebar-transition: 190ms ease; --codec-dashboard-text: #535b6b; --codec-dashboard-muted: #9299a6; --codec-dashboard-accent: #f36c3d; --codec-dashboard-accent-soft: #fbe9dc; --codec-dashboard-line: rgba(83,91,107,.12); --codec-dashboard-shadow: 0 10px 28px rgba(42,48,62,.08); /* Shared palette: exact legacy values, centralized without visual changes. */ --codec-color-muted: #9CA3AF; --codec-color-text-secondary: #596170; --codec-color-text-strong-alt: #414555; --codec-color-text-secondary-alt: #555b6e; --codec-color-line-warm: #E8DED6; --codec-color-line-soft: #ECE8E5; --codec-color-surface-warm: #fffaf6; --codec-color-surface-accent-soft: #fff0e7; --codec-color-accent-hover: #e75b30; --codec-color-accent-strong: #f36c3d; --codec-color-accent-vivid: #FF6600; --codec-color-accent-orange: #FF6B2C; --codec-color-accent-light: #F2A06F; /* Shared radii and shadows used by repeated component states. */ --codec-radius-sm: 8px; --codec-radius-card: 12px; --codec-radius-xl: 18px; --codec-shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.12); --codec-shadow-popover-strong: 0 2px 8px rgba(31, 41, 51, 0.12); --codec-shadow-control-focus: 0 0 0 4px var(--codec-control-accent-soft); --codec-border-default: 1px solid var(--codec-color-line); --codec-border-soft: 1px solid var(--codec-color-line-soft); --codec-shadow-popover: 0 12px 30px rgba(0, 0, 0, 0.12); } /* Add your custom styles here */ /* -------------------------------------------------------- SIDEBAR ------------------------------------------------------------------------ */ /* =================================================== 1. EMPUJAR EL CONTENIDO DE LA WEB =================================================== */ /* Se aplica solo en Tablet y Desktop (Elementor usa 768px por defecto como salto de móvil a tablet) */ @media (min-width:768px) { /* 1. Empuja la web pública (el :not evita que se rompa el editor al entrar) */ body:not(.elementor-editor-active), .elementor-editor-active [data-elementor-type="wp-page"], .elementor-editor-active [data-elementor-type="wp-post"] { padding-left: 200px; } /* 2. Dentro del editor, aplica el espacio SOLO al lienzo de trabajo de la página */ } /* =================================================== 2. ARREGLO PARA LA BARRA DE ADMINISTRACIÓN DE WP =================================================== */ /* Cuando estás logueado, WP añade la clase .admin-bar al body. Esto empuja el sidebar 32px hacia abajo para que no se superpongan. */ .admin-bar .sidebar-fija { top: 32px !important; height: calc(100vh - 32px) !important; } /* WP cambia el grosor de su barra a 46px en pantallas más pequeñas */ @media (max-width:782px) { .admin-bar .sidebar-fija { top: 46px !important; height: calc(100vh - 46px) !important; } } /* -------------------------------------------------------- /SIDEBAR ------------------------------------------------------------------------ */ /* =================================================== ESTILOS PARA EL MENÚ LATERAL (ICON LIST) =================================================== */ /* 1. Estructura base de cada botón (espaciado y bordes redondeados) */ .menu-sidebar-ui .elementor-icon-list-item a { padding: var(--codec-space-5) var(--codec-space-7); border-radius: var(--codec-radius-md); transition: all 0.3s ease; display: flex; align-items: center; width: 100%; } /* 2. Efecto Hover (Al pasar el ratón) */ .menu-sidebar-ui .elementor-icon-list-item a:hover { background-color: var(--codec-color-accent-soft); /* Fondo naranja clarito */ } .menu-sidebar-ui .elementor-icon-list-item a:hover .elementor-icon-list-text, .menu-sidebar-ui .elementor-icon-list-item a:hover .elementor-icon-list-icon i { color: var(--codec-color-accent-hover) !important; /* Texto e icono naranja (Font Awesome) */ } .menu-sidebar-ui .elementor-icon-list-item a:hover .elementor-icon-list-icon svg { fill: var(--codec-color-accent-hover) !important; /* Color naranja para iconos SVG */ } /* ========================================= ESTADOS ACTIVOS DEL MENÚ LATERAL ========================================= */ /* 1. Fondo Activo (Color var(--codec-color-accent-soft)) */ body:has(.marcador-dashboard) a.nav-dashboard, body:has(.marcador-games) a.nav-games, body:has(.marcador-anime) a.nav-anime, body:has(.marcador-libros) a.nav-libros, body:has(.marcador-series) a.nav-series, body:has(.marcador-pelis) a.nav-pelis, body:has(.marcador-jerseys) a.nav-jerseys, body:has(.marcador-puzzles) a.nav-puzzles, /* 2. Color del Texto Activo (Naranja) */ body:has(.marcador-dashboard) a.nav-dashboard .elementor-icon-list-text, body:has(.marcador-games) a.nav-games .elementor-icon-list-text, body:has(.marcador-anime) a.nav-anime .elementor-icon-list-text, body:has(.marcador-libros) a.nav-libros .elementor-icon-list-text, body:has(.marcador-series) a.nav-series .elementor-icon-list-text, body:has(.marcador-pelis) a.nav-pelis .elementor-icon-list-text, body:has(.marcador-jerseys) a.nav-jerseys .elementor-icon-list-text, body:has(.marcador-puzzles) a.nav-puzzles .elementor-icon-list-text, /* 3. Color del Icono Activo (FontAwesome y SVG en Naranja) */ body:has(.marcador-dashboard) a.nav-dashboard .elementor-icon-list-icon i, body:has(.marcador-dashboard) a.nav-dashboard .elementor-icon-list-icon svg, body:has(.marcador-games) a.nav-games .elementor-icon-list-icon i, body:has(.marcador-games) a.nav-games .elementor-icon-list-icon svg, body:has(.marcador-anime) a.nav-anime .elementor-icon-list-icon i, body:has(.marcador-anime) a.nav-anime .elementor-icon-list-icon svg, body:has(.marcador-libros) a.nav-libros .elementor-icon-list-icon i, body:has(.marcador-libros) a.nav-libros .elementor-icon-list-icon svg, body:has(.marcador-series) a.nav-series .elementor-icon-list-icon i, body:has(.marcador-series) a.nav-series .elementor-icon-list-icon svg, body:has(.marcador-pelis) a.nav-pelis .elementor-icon-list-icon i, body:has(.marcador-pelis) a.nav-pelis .elementor-icon-list-icon svg, body:has(.marcador-jerseys) a.nav-jerseys .elementor-icon-list-icon i, body:has(.marcador-jerseys) a.nav-jerseys .elementor-icon-list-icon svg, body:has(.marcador-puzzles) a.nav-puzzles .elementor-icon-list-icon i, body:has(.marcador-puzzles) a.nav-puzzles .elementor-icon-list-icon svg{ display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 34px; margin-top: var(--codec-space-2); padding: var(--codec-space-1) 9px; border-radius: var(--codec-radius-pill); background: rgba(31, 41, 51, 0.72); color: var(--codec-color-surface); font-family: var(--codec-font-ui); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; backdrop-filter: blur(8px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); } /* Arreglos por si Elementor mete wrappers/párrafos */ /* -------------------------------------------------------- CODEC — GAME CARD VERTICAL -------------------------------------------------------- */ .codec-game-card { position: relative; width: 100%; aspect-ratio: 2 / 3; background: #F3F4F6; isolation: isolate; } .codec-game-card:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(31, 41, 51, 0.08), 0 16px 32px rgba(31, 41, 51, 0.18) !important; } /* Permitir que las sombras no se corten */ .elementor-loop-container, .elementor-grid, .elementor-grid-item, .e-loop-item, .e-loop-item > *, .e-loop-item .elementor-widget-container { overflow: visible !important; } /* Imagen */ .codec-game-card .codec-card-image-layer { position: absolute !important; inset: 0 !important; z-index: 0 !important; width: 100% !important; height: 100% !important; } .codec-game-card .codec-card-image-layer img, .codec-game-card .codec-card-image { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; } /* Degradado inferior para lectura */ .codec-game-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.00) 25%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.68) 100% ); pointer-events: none; } /* -------------------------------------------------------- CODEC — BADGES ARRIBA Usa shortcode único: [codec_card_badges] -------------------------------------------------------- */ .codec-game-card .codec-card-badges { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 4 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap:var(--codec-space-3) !important; pointer-events: none !important; } .codec-card-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 110px !important; padding: 5px var(--codec-space-3) !important; border-radius: var(--codec-radius-pill) !important; font-family: var(--codec-font-ui) !important; font-size: 10px !important; font-weight: 750 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; backdrop-filter: blur(8px); box-shadow: var(--codec-shadow-popover); } .codec-card-badge-platform { margin-right: auto !important; background: rgba(255, 255, 255, 0.86) !important; color: #40444E !important; } .codec-card-badge-status { margin-left: auto !important; background: rgba(255, 102, 0, 0.92) !important; color: var(--codec-color-surface) !important; } /* -------------------------------------------------------- CODEC — TÍTULO ABAJO CENTRADO -------------------------------------------------------- */ .codec-game-card .codec-game-card-title, .codec-game-card .codec-game-card-title *, .codec-game-card .elementor-widget-heading.codec-game-card-title, .codec-game-card .elementor-widget-heading.codec-game-card-title *, .codec-game-card .elementor-heading-title { position: absolute !important; left: 14px !important; right: 14px !important; bottom: 14px !important; top: auto !important; z-index: 3 !important; transform: none !important; margin: 0 !important; padding: 0 !important; text-align: center !important; color: var(--codec-color-surface) !important; font-family: var(--codec-font-ui) !important; font-size: 18px !important; font-weight: 850 !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 3px 10px rgba(0, 0, 0, 0.55) !important; } /* -------------------------------------------------------- CODEC — GAME CARD SHADOW + RADIUS FIX -------------------------------------------------------- */ /* El item exterior solo deja respirar la sombra */ .e-loop-item:has(.codec-game-card) { border-radius: var(--codec-radius-xl) !important; overflow: visible !important; filter: none !important; } /* La card lleva una sombra suave repartida por todos los lados */ .codec-game-card { border-radius: var(--codec-radius-xl) !important; overflow: hidden !important; filter: none !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.035), 0 0 8px rgba(0, 0, 0, 0.524) !important; transform: translateZ(0); transition: transform 0.18s ease, box-shadow 0.18s ease; } /* Hover: un poco más de profundidad, también repartida */ .e-loop-item:has(.codec-game-card):hover .codec-game-card { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.035), 0 0 12px rgba(0, 0, 0, 0.71) !important; } /* Todo lo visual de dentro respeta el radio */ .codec-game-card .codec-card-image-layer, .codec-game-card .codec-card-image-layer img, .codec-game-card .codec-card-image { border-radius: inherit !important; } /* -------------------------------------------------------- CODEC — GAME CARD HOVER DARKEN -------------------------------------------------------- */ /* Capa de oscurecimiento suave */ .codec-game-card::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0); pointer-events: none; transition: background 0.18s ease; } /* En hover oscurece solo la imagen/fondo */ .codec-game-card:hover::before { background: rgba(0, 0, 0, 0.34); } /* -------------------------------------------------------- CODEC — LOOP GRID RESPONSIVE AUTO COLUMNS -------------------------------------------------------- */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important; gap:var(--codec-space-11) !important; align-items: start !important; } /* Cada item ocupa su celda */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item { width: 100% !important; max-width: none !important; } /* La card llena la celda */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card { width: 100% !important; } /* -------------------------------------------------------- CODEC — STICKY TABS + FILTERS SEPARADOS -------------------------------------------------------- */ /* Tabs sticky arriba */ .codec-sticky-tabs { position: sticky !important; top: 0 !important; z-index: 120 !important; background: #FFF8F2 !important; } /* Filtros sticky debajo de las tabs */ .codec-toolbar-sticky { position: sticky !important; top: 40px !important; z-index: 110 !important; background: var(--codec-color-surface) !important; /* Sin sombra real: usamos ::after para controlar mejor */ box-shadow: none !important; overflow: visible !important; } /* Sombra inferior artificial, 100% ancho */ .codec-toolbar-sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; width: 100%; height: 8px; pointer-events: none; opacity: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) ); transition: opacity 0.18s ease; } /* Solo aparece al hacer scroll */ body.codec-has-scrolled .codec-toolbar-sticky::after { opacity: 1; } /* Si estás logueado con barra admin de WordPress */ .admin-bar .codec-sticky-tabs { top: 32px !important; } .admin-bar .codec-toolbar-sticky { top: 72px !important; } /* Barra admin en pantallas pequeñas */ @media (max-width:782px) { .admin-bar .codec-sticky-tabs { top: 46px !important; } .admin-bar .codec-toolbar-sticky { top: 86px !important; } } .codec-toolbar-sticky .codec-toolbar { margin-top: 0 !important; } /* -------------------------------------------------------- CODEC — NO RESULTS FULL WIDTH CENTERED -------------------------------------------------------- */ /* Cuando no hay resultados, el contenedor deja de comportarse como grid */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container:has(.e-loop-nothing-found-message), :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid:has(.e-loop-nothing-found-message) { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; min-height: 520px !important; padding: 0 !important; margin: 0 !important; } /* Mensaje de Elementor */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-nothing-found-message { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-height: 520px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; text-align: center !important; } /* Wrappers internos */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-nothing-found-message > *, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-nothing-found-message .elementor-widget-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-nothing-found-message .elementor-shortcode { width: 100% !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; } /* Bloque custom */ /* Imagen Shinji */ /* Ajuste específico desktop: evita que se centre respecto al viewport completo con sidebar */ @media (min-width:768px) { :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container:has(.e-loop-nothing-found-message), :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid:has(.e-loop-nothing-found-message), :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-nothing-found-message{ width: calc(100vw - 200px) !important; max-width: calc(100vw - 200px) !important; } } /* -------------------------------------------------------- CODEC — CUSTOM FILTERS BAR -------------------------------------------------------- */ .codec-toolbar { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; width: 100% !important; min-height: 48px !important; height: 48px !important; gap: 34px !important; padding: 0 29px 0 36px !important; margin: 0 !important; background: var(--codec-color-surface) !important; font-family: var(--codec-font-ui) !important; } .codec-toolbar-left { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 34px !important; min-width: 0 !important; } .codec-toolbar-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; margin-left: auto !important; } /* -------------------------------------------------------- CODEC — CUSTOM FILTER DROPDOWNS -------------------------------------------------------- */ .codec-filter-dropdown { position: relative !important; display: inline-flex !important; align-items: center !important; } .codec-filter-current { display: inline-flex !important; align-items: center !important; gap:var(--codec-space-2) !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; color: var(--codec-control-text) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; white-space: nowrap !important; transition: color 0.15s ease !important; } .codec-filter-current:hover, .codec-filter-dropdown.is-active .codec-filter-current, .codec-filter-dropdown.is-open .codec-filter-current { color: #ea9d6a !important; } .codec-filter-current-label { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; } /* Flecha visual solo para filtros NO activos */ .codec-filter-dropdown:not(.is-active) .codec-filter-current::after { content: "↓" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 1px !important; color: inherit !important; opacity: 0.8 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* Si el filtro está activo, jamás mostramos flecha */ .codec-filter-dropdown.is-active .codec-filter-current::after { content: none !important; display: none !important; } .codec-filter-clear-one { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 15px !important; height: 15px !important; border-radius: var(--codec-radius-pill) !important; color: #C76A6A !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1 !important; cursor: pointer !important; opacity: 0.9 !important; transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease !important; } .codec-filter-clear-one:hover { color: #FF5000 !important; background: rgba(255, 80, 0, 0.08) !important; opacity: 1 !important; } .codec-filter-menu { position: absolute !important; top: calc(100% + 10px) !important; left: 0 !important; z-index: 9999 !important; display: none !important; flex-direction: column !important; align-items: stretch !important; min-width: 250px !important; max-height: 520px !important; overflow-y: auto !important; padding: 7px !important; background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(232, 222, 214, 0.95) !important; border-radius: 13px !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 8px 22px rgba(0, 0, 0, 0.12) !important; } .codec-filter-dropdown.is-open .codec-filter-menu { display: flex !important; } .codec-filter-option { width: 100% !important; display: grid !important; grid-template-columns: 20px minmax(0, 1fr) auto !important; gap:var(--codec-space-3) !important; align-items: center !important; padding: var(--codec-space-3) var(--codec-space-4) !important; border: none !important; border-radius: var(--codec-radius-sm) !important; background: transparent !important; color: #40444E !important; font-family: inherit !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.15 !important; text-align: center !important; cursor: pointer !important; box-shadow: none !important; } .codec-filter-option:hover, .codec-filter-option.is-active { background: var(--codec-control-accent-soft) !important; color: var(--codec-color-accent-vivid) !important; } .codec-filter-option-check { color: var(--codec-color-accent-vivid) !important; font-weight: 900 !important; } .codec-filter-option-count { color: inherit !important; opacity: 0.62 !important; font-size: 12px !important; font-weight: 800 !important; } /* -------------------------------------------------------- CODEC — PLATFORM ICONS IN FILTER -------------------------------------------------------- */ .codec-platform-icon { width: 17px !important; height: 17px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--codec-control-text) !important; flex: 0 0 auto !important; } .codec-platform-icon svg { width: 17px !important; height: 17px !important; display: block !important; fill: currentColor !important; } .codec-filter-option:hover .codec-platform-icon, .codec-filter-option.is-active .codec-platform-icon { color: var(--codec-color-accent-vivid) !important; } .codec-filter-option-label { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* -------------------------------------------------------- CODEC — CUSTOM CLEAR FILTERS -------------------------------------------------------- */ .codec-filter-clear-all { border: 1px solid rgba(255, 80, 80, 0.28) !important; border-radius: var(--codec-radius-pill) !important; background: rgba(255, 80, 80, 0.035) !important; padding: 5px var(--codec-space-4) !important; margin: 0 !important; color: #C76A6A !important; font-family: inherit !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer !important; white-space: nowrap !important; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important; } .codec-filter-clear-all:hover { color: var(--codec-color-accent-vivid) !important; border-color: rgba(255, 80, 0, 0.42) !important; background: rgba(255, 80, 0, 0.07) !important; } /* -------------------------------------------------------- CODEC — CUSTOM SORT DROPDOWN -------------------------------------------------------- */ .codec-sort-dropdown { position: relative !important; display: inline-flex !important; align-items: center !important; } .codec-sort-current, .codec-sort-option, .codec-sort-direction { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; color: var(--codec-control-text) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease !important; } .codec-sort-current, .codec-sort-direction, .codec-sort-current:hover, .codec-sort-option:hover, .codec-sort-direction:hover { color: #ea9d6a !important; } .codec-sort-direction { text-align: center !important; } .codec-sort-direction:hover { transform: translateY(-1px); } .codec-sort-menu { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; z-index: 9999 !important; display: none !important; flex-direction: column !important; align-items: stretch !important; min-width: 112px !important; padding: var(--codec-space-2) !important; background: var(--codec-color-surface) !important; border: 1px solid rgba(232, 222, 214, 0.95) !important; border-radius: var(--codec-radius-card) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 8px 22px rgba(0, 0, 0, 0.12) !important; } .codec-sort-dropdown.is-open .codec-sort-menu { display: flex !important; } .codec-sort-option { width: 100% !important; padding: var(--codec-space-3) var(--codec-space-4) !important; border-radius: var(--codec-radius-sm) !important; text-align: left !important; white-space: nowrap !important; color: var(--codec-control-text) !important; } .codec-sort-option:hover, .codec-sort-option.is-active { background: var(--codec-control-accent-soft) !important; color: var(--codec-color-accent-vivid) !important; } /* -------------------------------------------------------- CODEC — FORCE NO ARROW ON ACTIVE FILTERS -------------------------------------------------------- */ .codec-filter-dropdown.is-active .codec-filter-arrow, .codec-filter-dropdown.is-active .codec-filter-current::after, .codec-filter-dropdown:has(.codec-filter-clear-one) .codec-filter-arrow, .codec-filter-dropdown:has(.codec-filter-clear-one) .codec-filter-current::after { display: none !important; content: none !important; } /* -------------------------------------------------------- CODEC — CLEAR FILTERS BESIDE FILTERS -------------------------------------------------------- */ .codec-toolbar-left .codec-filter-clear-all { margin-left: -10px !important; } /* -------------------------------------------------------- CODEC — CUSTOM VIEW DROPDOWN -------------------------------------------------------- */ .codec-view-current, .codec-view-option { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; color: var(--codec-control-text) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: color 0.15s ease, opacity 0.15s ease !important; } .codec-view-current:hover, .codec-view-option:hover { color: #ea9d6a !important; } /* -------------------------------------------------------- CODEC — VIEW MODES -------------------------------------------------------- */ /* Cards grandes: vista actual */ body.codec-view-large :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-large :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important; gap:var(--codec-space-11) !important; } /* Cards pequeñas: más densidad */ /* Lista: primera versión visual, luego la afinamos */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-image-layer img, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-image { object-position: center center !important; } body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card::after { background: linear-gradient( to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.18) 100% ) !important; } body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title *, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .elementor-heading-title { left: 120px !important; right: 20px !important; bottom: 50% !important; } body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badges { top: 50% !important; left: 14px !important; right: auto !important; width: 90px !important; transform: translateY(-50%) !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } /* -------------------------------------------------------- CODEC — VIEW ICON BUTTON POLISH -------------------------------------------------------- */ .codec-view-current:hover, .codec-view-dropdown.is-open .codec-view-current { background: var(--codec-control-accent-soft) !important; color: var(--codec-color-accent-vivid) !important; } .codec-view-current { border-radius: 7px !important; text-align: center !important; } /* -------------------------------------------------------- CODEC — VIEW DROPDOWN VISIBILITY FIX -------------------------------------------------------- */ .codec-view-control { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap:var(--codec-space-3) !important; height: var(--codec-control-height-lg) !important; font-family: inherit !important; font-size: 13px !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; } .codec-view-dropdown { position: relative !important; display: inline-flex !important; align-items: center !important; width: auto !important; max-width: none !important; opacity: 1 !important; visibility: visible !important; } .codec-view-current { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: auto !important; max-width: none !important; height: 22px !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; color: #ea9d6a !important; font-family: inherit !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1 !important; white-space: nowrap !important; overflow: visible !important; text-indent: 0 !important; cursor: pointer !important; } .codec-view-current::after { content: none !important; display: none !important; } .codec-view-menu { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; z-index: 9999 !important; display: none !important; flex-direction: column !important; align-items: stretch !important; padding: var(--codec-space-2) !important; background: var(--codec-color-surface) !important; border: 1px solid rgba(232, 222, 214, 0.95) !important; border-radius: var(--codec-radius-card) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.025), 0 8px 22px rgba(0, 0, 0, 0.12) !important; } .codec-view-dropdown.is-open .codec-view-menu { display: flex !important; } .codec-view-option { width: 100% !important; display: flex !important; align-items: center !important; gap:var(--codec-space-3) !important; padding: var(--codec-space-3) var(--codec-space-4) !important; border: none !important; border-radius: var(--codec-radius-sm) !important; background: transparent !important; color: var(--codec-control-text) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; text-align: left !important; white-space: nowrap !important; cursor: pointer !important; box-shadow: none !important; } .codec-view-option:hover, .codec-view-option.is-active { background: var(--codec-control-accent-soft) !important; color: var(--codec-color-accent-vivid) !important; } /* -------------------------------------------------------- CODEC — VIEW MODE: COMPACT CARDS -------------------------------------------------------- */ /* Cards pequeñas */ body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important; gap:var(--codec-space-9) !important; } body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card { border-radius: 15px !important; } body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title, body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title *, body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .elementor-heading-title { font-size: 14px !important; line-height: 1.05 !important; left: 9px !important; right: 9px !important; bottom: 10px !important; } body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge { max-width: 82px !important; padding: var(--codec-space-1) 7px !important; font-size: 9px !important; font-weight: 750 !important; } /* -------------------------------------------------------- CODEC — VIEW MODE: LIST Lista compacta: título + estado + consola -------------------------------------------------------- */ /* En modo lista, el loop pasa a columnas de filas */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 34px !important; align-items: start !important; } /* 3 columnas en pantallas grandes */ @media (min-width:1500px) { body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* 1 columna en pantallas pequeñas */ @media (max-width:1024px) { body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid { grid-template-columns: 1fr !important; } } /* El item exterior deja respirar la fila */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item { width: 100% !important; max-width: none !important; overflow: visible !important; } /* La card deja de ser card visual */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card { aspect-ratio: auto !important; width: 100% !important; height: auto !important; min-height: 30px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; column-gap:var(--codec-space-3) !important; padding: 3px 0 !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; isolation: auto !important; transform: none !important; } /* Sin hover de card */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item:has(.codec-game-card):hover .codec-game-card, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card:hover { transform: none !important; box-shadow: none !important; } /* Ocultar imagen */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-image-layer, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-image-layer img, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-image { display: none !important; } /* Quitar overlays de la card */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card::before, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card::after { content: none !important; display: none !important; } /* Título en modo lista */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title *, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .elementor-heading-title { position: static !important; grid-column: 1 !important; grid-row: 1 !important; inset: auto !important; transform: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #2F3747 !important; font-family: var(--codec-font-ui) !important; font-size: 14px !important; font-weight: 650 !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; text-align: left !important; text-shadow: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Badges dejan de estar arriba flotando */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-card-badges { position: static !important; grid-column: 2 / 4 !important; grid-row: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap:var(--codec-space-2) !important; width: auto !important; transform: none !important; pointer-events: none !important; } /* Badges compactos */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge { position: static !important; width: auto !important; max-width: 120px !important; min-height: 18px !important; padding: 3px 7px !important; border-radius: 5px !important; font-size: 11px !important; font-weight: 650 !important; line-height: 1 !important; box-shadow: none !important; backdrop-filter: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Plataforma más suave */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform { order: 2 !important; background: #DDEBE3 !important; color: #305D43 !important; } /* Estado */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status { order: 1 !important; background: var(--codec-control-accent-soft) !important; color: var(--codec-color-accent-vivid) !important; } /* Línea sutil entre filas */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card { border-bottom: 1px solid rgba(0, 0, 0, 0.045) !important; } /* -------------------------------------------------------- CODEC — PLATFORM FILTER: ICON WITHOUT LEFT GAP -------------------------------------------------------- */ /* Icono ocupa la primera columna */ /* Nombre */ /* Contador */ /* El check se coloca encima del icono, sin reservar espacio */ /* Cuando está activo, ocultamos visualmente el icono y dejamos el check */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-option.is-active .codec-platform-icon { opacity: 0 !important; } /* -------------------------------------------------------- CODEC — PANEL AGRUPADO DE PLATAFORMAS -------------------------------------------------------- */ .codec-filter-dropdown[data-param="codec_platform"] { position: relative !important; } /* Panel ancho */ .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-menu { width: min(980px, calc(100vw - 240px)) !important; min-width: 760px !important; max-width: 980px !important; max-height: min(650px, calc(100vh - 170px)) !important; padding: 0 !important; overflow: hidden !important; background: rgba(255, 255, 255, 0.97) !important; } /* -------------------------------------------------------- CABECERA: BUSCADOR + GUARDAR -------------------------------------------------------- */ .codec-platform-toolbar { position: relative !important; z-index: 10 !important; display: flex !important; align-items: center !important; gap:var(--codec-space-4) !important; width: 100% !important; padding: 15px var(--codec-space-5) 15px !important; background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid #EEE4DC !important; } /* Contenedor del buscador */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-search-wrap { position: relative !important; display: flex !important; align-items: center !important; flex: 1 1 auto !important; width: auto !important; height: var(--codec-control-height-md) !important; min-height: var(--codec-control-height-md) !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Icono de búsqueda */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-search-icon { position: absolute !important; left: 12px !important; top: 50% !important; z-index: 2 !important; color: var(--codec-color-muted) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; transform: translateY(-50%) !important; pointer-events: none !important; } /* Campo de búsqueda */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-search { box-sizing: border-box !important; display: block !important; width: 100% !important; height: var(--codec-control-height-md) !important; min-height: var(--codec-control-height-md) !important; margin: 0 !important; padding: 0 34px !important; border: 1px solid var(--codec-color-line-warm) !important; border-radius: var(--codec-radius-md) !important; outline: none !important; background: var(--codec-color-surface) !important; color: #40444E !important; font-family: inherit !important; font-size: 13px !important; font-weight: 650 !important; line-height: normal !important; box-shadow: none !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-search:focus { border-color: #EA9D6A !important; box-shadow: 0 0 0 3px rgba(234, 157, 106, 0.15) !important; } /* Botón Guardar */ .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-save { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 78px !important; height: var(--codec-control-height-md) !important; min-height: var(--codec-control-height-md) !important; margin: 0 !important; padding: 0 17px !important; border: none !important; border-radius: var(--codec-radius-md) !important; background: var(--codec-color-accent-vivid) !important; color: var(--codec-color-surface) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer !important; transform: none !important; box-shadow: 0 3px 10px rgba(255, 102, 0, 0.22) !important; transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-save:hover { background: #EA5D00 !important; transform: translateY(-1px) !important; box-shadow: 0 5px 14px rgba(255, 102, 0, 0.28) !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-save[hidden] { display: none !important; } /* -------------------------------------------------------- COLUMNAS -------------------------------------------------------- */ .codec-platform-groups { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; width: 100% !important; padding: var(--codec-space-4) !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Cada fabricante */ .codec-platform-group { min-width: 0 !important; padding: var(--codec-space-1) 9px var(--codec-space-4) !important; border-right: 1px solid rgba(232, 222, 214, 0.65) !important; } .codec-platform-group:last-child { border-right: none !important; } .codec-platform-group[hidden] { display: none !important; } /* Cabecera de fabricante */ .codec-platform-group-header { display: flex !important; align-items: center !important; min-height: 38px !important; margin-bottom: 5px !important; border-bottom: 1px solid rgba(232, 222, 214, 0.75) !important; } /* Nombre provisional */ .codec-platform-group-title { color: #555B66 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: 0.045em !important; text-transform: uppercase !important; } /* Logo futuro */ .codec-platform-group-logo { display: block !important; width: auto !important; max-width: 105px !important; height: 25px !important; object-fit: contain !important; } /* Opciones de cada fabricante */ .codec-platform-group-options { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 1px !important; } /* -------------------------------------------------------- OPCIONES DENTRO DE LAS COLUMNAS -------------------------------------------------------- */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-option { position: relative !important; display: grid !important; grid-template-columns: 18px minmax(0, 1fr) auto !important; gap: 7px !important; align-items: center !important; width: 100% !important; min-height: 34px !important; padding: 7px 7px !important; border-radius: var(--codec-radius-sm) !important; font-size: 12px !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-option[hidden] { display: none !important; } /* Icono individual de consola */ .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-icon { grid-column: 1 !important; grid-row: 1 !important; width: 17px !important; height: 17px !important; min-width: 17px !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-icon img { display: block !important; width: 17px !important; height: 17px !important; object-fit: contain !important; } /* Nombre */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-option-label { grid-column: 2 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Contador */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-option-count { grid-column: 3 !important; font-size: 11px !important; text-align: right !important; } /* Check superpuesto sobre icono */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-option-check { position: absolute !important; left: 7px !important; top: 50% !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 17px !important; height: 17px !important; color: var(--codec-color-accent-vivid) !important; font-size: 14px !important; font-weight: 900 !important; transform: translateY(-50%) !important; pointer-events: none !important; } /* Al seleccionarse, desaparece el icono */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-option.is-active .codec-platform-icon { opacity: 0 !important; } /* -------------------------------------------------------- MENSAJE SIN RESULTADOS -------------------------------------------------------- */ .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-search-empty { padding: var(--codec-space-11) 15px !important; color: var(--codec-color-muted) !important; font-size: 13px !important; font-weight: 650 !important; text-align: center !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-filter-search-empty[hidden] { display: none !important; } /* -------------------------------------------------------- TABLET -------------------------------------------------------- */ @media (max-width:1100px) { .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-menu { width: min(720px, calc(100vw - 230px)) !important; min-width: 620px !important; } .codec-platform-groups { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap:var(--codec-space-6) !important; } .codec-platform-group:nth-child(3n) { border-right: none !important; } } /* -------------------------------------------------------- MÓVIL -------------------------------------------------------- */ @media (max-width:1024px) { .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-menu { position: fixed !important; left: 12px !important; right: 12px !important; top: 76px !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(100vh - 92px) !important; } .codec-platform-toolbar { position: sticky !important; top: 0 !important; } .codec-platform-groups { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .codec-platform-group { border-right: none !important; } .codec-platform-group:nth-child(odd) { border-right: 1px solid rgba(232, 222, 214, 0.65) !important; } } @media (max-width:480px) { .codec-platform-groups { grid-template-columns: 1fr !important; } .codec-platform-group, .codec-platform-group:nth-child(odd) { border-right: none !important; } } /* ===================================================== CODEC — AJUSTES FINALES PANEL DE PLATAFORMAS ===================================================== */ /* Centrar títulos y futuros logos de fabricante */ .codec-platform-group-header { justify-content: center !important; } .codec-platform-group-title { width: 100% !important; text-align: center !important; } .codec-platform-group-logo { margin: 0 auto !important; object-position: center center !important; } /* Desplazar el panel ancho hacia la izquierda */ @media (min-width:1101px) { .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-menu { left: -405px !important; right: auto !important; } } /* * Oculta visualmente un fabricante sin eliminar * su columna del grid. */ .codec-platform-group.is-search-hidden { visibility: hidden !important; pointer-events: none !important; } /* Nombre base del filtro: gris */ .codec-filter-current-title { color: var(--codec-control-text) !important; } /* Valor seleccionado: naranja */ .codec-filter-current-value { color: var(--codec-control-accent) !important; } /* Los filtros sin selección se mantienen grises */ .codec-filter-dropdown:not(.is-active) .codec-filter-current, .codec-filter-dropdown.is-active .codec-filter-current-title { color: var(--codec-control-text) !important; } /* Evitar que el estado activo pinte todo el texto de naranja */ .codec-filter-dropdown.is-active .codec-filter-current-value { color: var(--codec-control-accent) !important; } /* -------------------------------------------------------- CODEC — TOTAL POR FABRICANTE -------------------------------------------------------- */ .codec-platform-group-title { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; } .codec-platform-group-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 22px !important; height: 18px !important; padding: 0 var(--codec-space-2) 0 var(--codec-space-2) !important; margin-top: -2px!important; border-radius: var(--codec-radius-pill) !important; background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; font-size: 10px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: 0 !important; } /* -------------------------------------------------------- CODEC — ACCIONES DEL FILTRO DE PLATAFORMAS -------------------------------------------------------- */ .codec-platform-actions { display: inline-flex !important; align-items: center !important; gap:var(--codec-space-3) !important; flex: 0 0 auto !important; } /* Reiniciar */ .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-reset { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: var(--codec-control-height-md) !important; min-height: var(--codec-control-height-md) !important; margin: 0 !important; padding: 0 var(--codec-space-6) !important; border: 1px solid var(--codec-color-line-warm) !important; border-radius: var(--codec-radius-md) !important; background: var(--codec-color-surface) !important; color: var(--codec-control-text) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-reset:hover { color: var(--codec-color-accent-vivid) !important; border-color: #EA9D6A !important; background: var(--codec-control-accent-soft) !important; } .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-reset[hidden] { display: none !important; } /* ===================================================== CODEC — VIEW MODES DIRECTOS SOBRE EL LOOP Refuerzo para páginas duplicadas de Elementor ===================================================== */ /* Cards grandes */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-large .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-large .elementor-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important; gap:var(--codec-space-11) !important; } /* Cards pequeñas */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .elementor-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important; gap:var(--codec-space-9) !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-game-card { border-radius: 15px !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-game-card .codec-game-card-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-game-card .codec-game-card-title *, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-game-card .elementor-heading-title { left: 9px !important; right: 9px !important; bottom: 10px !important; font-size: 14px !important; line-height: 1.05 !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-card-badge { max-width: 82px !important; padding: var(--codec-space-1) 7px !important; font-size: 9px !important; } /* Vista lista */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 34px !important; align-items: start !important; } @media (min-width:1500px) { :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width:1024px) { :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid { grid-template-columns: 1fr !important; } } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item { width: 100% !important; max-width: none !important; overflow: visible !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; column-gap:var(--codec-space-3) !important; width: 100% !important; height: auto !important; min-height: 30px !important; aspect-ratio: auto !important; margin: 0 !important; padding: 3px 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; isolation: auto !important; transform: none !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card:hover { transform: none !important; box-shadow: none !important; } /* ===================================================== CODEC — BACKLOG AGRUPADO: PRÓXIMAMENTE / IDEAS ===================================================== */ /* * Encabezado de cada grupo. * * Es un hijo directo del grid y ocupa todas * sus columnas, independientemente de la vista. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; gap:var(--codec-space-4) !important; width: 100% !important; min-width: 0 !important; margin: var(--codec-space-1) 0 -4px !important; padding: var(--codec-space-1) 2px var(--codec-space-3) !important; color: #555B66 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; } /* Punto de color */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading::before { content: "" !important; display: block !important; flex: 0 0 auto !important; width: 8px !important; height: 8px !important; border-radius: var(--codec-radius-pill) !important; background: #EA9D6A !important; box-shadow: 0 0 0 4px rgba(234, 157, 106, 0.12) !important; } /* Línea hasta el final del ancho */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading::after { content: "" !important; display: block !important; flex: 1 1 auto !important; min-width: 20px !important; height: 1px !important; background: linear-gradient( to right, rgba(232, 222, 214, 0.95), rgba(232, 222, 214, 0.20) ) !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading-title { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; } /* * El segundo grupo respira más respecto * a las cards de Próximamente. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading[data-codec-backlog-group="idea"] { margin-top: 22px !important; } /* Ideas: punto más neutro */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading[data-codec-backlog-group="idea"]::before { background: var(--codec-color-muted) !important; box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.12) !important; } /* * En vista lista reducimos ligeramente * el espacio vertical. */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-backlog-group-heading { margin-bottom: 2px !important; padding-bottom: 7px !important; } body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading[data-codec-backlog-group="idea"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-backlog-group-heading[data-codec-backlog-group="idea"] { margin-top: 15px !important; } /* ===================================================== CODEC — BACKLOG: RECUPERAR AJUSTES DE PLATAFORMA Y ORDEN ===================================================== */ /* * En Backlog, el panel de Plataforma se alinea con el botón. * Sobrescribe el desplazamiento global de -405px. */ @media (min-width:1101px) { .codec-toolbar-backlog .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-menu { left: 0 !important; right: auto !important; transform: none !important; } } /* * "Nombre" es una etiqueta fija en Backlog. * No se puede pulsar ni abrir un desplegable. */ /* * La flecha sigue siendo el único control activo * para cambiar entre A–Z y Z–A. */ /* ===================================================== CODEC — OCULTAR ESTADO FUERA DE BIBLIOTECA ===================================================== */ /* * En Jugando, Terminados, Abandonados y Backlog * el estado ya viene indicado por la propia pestaña * o por la agrupación visual. * * Biblioteca conserva el badge de estado. */ body:not(:has( .codec-page-context[data-codec-view="biblioteca"] )) :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status { display: none !important; } /* ===================================================== CODEC — ORDEN ALFABÉTICO A–Z / Z–A ===================================================== */ /* * El botón ahora contiene texto en lugar de una flecha. */ .codec-sort-direction { min-width: 30px !important; width: auto !important; padding: 2px 3px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; white-space: nowrap !important; } /* ===================================================== CODEC — BADGES DE PLATAFORMA POR FABRICANTE ===================================================== */ /* * Plataforma: * badge rellena para distinguirla visualmente * de los estados. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform { border: 1px solid transparent !important; color: var(--codec-color-surface) !important; font-weight: 800 !important; backdrop-filter: blur(8px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important; } /* Nintendo — rojo */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-nintendo { background: rgba(215, 38, 56, 0.94) !important; border-color: rgba(215, 38, 56, 0.98) !important; color: var(--codec-color-surface) !important; } /* PlayStation / Sony — azul */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-playstation { background: rgba(20, 86, 166, 0.94) !important; border-color: rgba(20, 86, 166, 0.98) !important; color: var(--codec-color-surface) !important; } /* SEGA — naranja */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-sega { background: rgba(230, 112, 34, 0.94) !important; border-color: rgba(230, 112, 34, 0.98) !important; color: var(--codec-color-surface) !important; } /* Xbox — verde */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-xbox { background: rgba(16, 124, 16, 0.94) !important; border-color: rgba(16, 124, 16, 0.98) !important; color: var(--codec-color-surface) !important; } /* Otros — gris */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-otros { background: rgba(91, 99, 113, 0.92) !important; border-color: rgba(91, 99, 113, 0.96) !important; color: var(--codec-color-surface) !important; } /* ===================================================== CODEC — BADGES DE ESTADO TIPO OUTLINE ===================================================== */ /* * Estado: * aspecto claro, con borde y texto coloreados. * Así se diferencia inmediatamente de Plataforma. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status { border: 1px solid currentColor !important; background: rgba(255, 255, 255, 0.92) !important; font-weight: 850 !important; backdrop-filter: blur(8px) !important; box-shadow: var(--codec-shadow-popover) !important; } /* Jugando — azul */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status.codec-status-jugando { color: #2563EB !important; border-color: rgba(37, 99, 235, 0.72) !important; } /* Terminado — verde */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status.codec-status-terminado { color: #23834A !important; border-color: rgba(35, 131, 74, 0.72) !important; } /* Abandonado — rojo */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status.codec-status-abandonado { color: #C2413B !important; border-color: rgba(194, 65, 59, 0.72) !important; } /* * Compatibilidad por si aparece el estado en plural * o con una variante futura. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status.codec-status-terminados { color: #23834A !important; border-color: rgba(35, 131, 74, 0.72) !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status.codec-status-abandonados { color: #C2413B !important; border-color: rgba(194, 65, 59, 0.72) !important; } /* ===================================================== CODEC — BADGES COLOREADAS EN VISTA LISTA ===================================================== */ /* * Estas reglas pisan los colores genéricos antiguos * de la vista Lista. */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform { border-radius: 5px !important; color: var(--codec-color-surface) !important; box-shadow: none !important; backdrop-filter: none !important; } body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-status { border-radius: 5px !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } /* Nintendo — lista */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-nintendo, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform.codec-platform-nintendo { background: #D72638 !important; border-color: #D72638 !important; } /* PlayStation — lista */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-playstation, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform.codec-platform-playstation { background: #1456A6 !important; border-color: #1456A6 !important; } /* SEGA — lista */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-sega, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform.codec-platform-sega { background: #E67022 !important; border-color: #E67022 !important; } /* Xbox — lista */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-xbox, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform.codec-platform-xbox { background: #107C10 !important; border-color: #107C10 !important; } /* Otros — lista */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform.codec-platform-otros, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform.codec-platform-otros { background: #5B6371 !important; border-color: #5B6371 !important; } /* ===================================================== CODEC — ORDEN POR FECHA EN BACKLOG ===================================================== */ /* ===================================================== CODEC — JUGANDO: ORDEN FIJO POR NOMBRE ===================================================== */ /* ===================================================== CODEC — LISTA EN DOS LÍNEAS ===================================================== */ /* * Cada juego: * * NOMBRE * ★ PLATAFORMA ESTADO * --------------------- */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card { column-gap: 0 !important; } /* Título en la primera línea */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title *, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .elementor-heading-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card .codec-game-card-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card .codec-game-card-title *, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card .elementor-heading-title { font-size: 14px !important; font-weight: 700 !important; line-height: 1.22 !important; } /* Badges en la segunda línea */ /* Estrella DIOS dentro de la línea de badges */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-god-marker, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-god-marker, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-status { margin: 0 !important; } /* Plataforma después de la estrella */ /* Estado al final *//* ===================================================== CODEC — LISTA + BADGES + MARCA DIOS ===================================================== */ /* ===================================================== VISTA LISTA ===================================================== */ /* * Cada juego: * * NOMBRE * ★ PLATAFORMA ESTADO * --------------------- */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-items: start !important; justify-items: start !important; row-gap: 5px !important; min-height: 54px !important; padding: 7px 0 var(--codec-space-3) !important; } /* Título en la primera línea */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title *, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .elementor-heading-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card .codec-game-card-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card .codec-game-card-title *, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card .elementor-heading-title { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Badges en la segunda línea */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-card-badges, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card .codec-card-badges { position: static !important; grid-column: 1 !important; grid-row: 2 !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap:var(--codec-space-2) !important; transform: none !important; } /* Sin márgenes heredados */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-god-marker, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-god-marker, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-status { position: static !important; flex: 0 0 auto !important; margin: 0 !important; transform: none !important; } /* Orden: estrella → consola → estado */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-god-marker, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-god-marker { order: 1 !important; } body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-platform { order: 2 !important; } body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-badge-status { order: 3 !important; } /* Estrella DIOS en vista Lista */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-god-marker, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-card-god-marker { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; padding: 0 !important; border: 1px solid #D49A0B !important; border-radius: 5px !important; background: #FFF4BF !important; color: #A36A00 !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; box-shadow: none !important; } /* ===================================================== CARDS GRANDES Y PEQUEÑAS ===================================================== */ /* * El contenedor ocupa toda la card. * Cada badge se posiciona individualmente. */ body:not(.codec-view-list) :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-card-badges, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]):not(.codec-loop-view-list) .codec-game-card .codec-card-badges { position: absolute !important; inset: 0 !important; z-index: 6 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; pointer-events: none !important; } /* Plataforma: arriba izquierda */ body:not(.codec-view-list) :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-card-badge-platform, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]):not(.codec-loop-view-list) .codec-game-card .codec-card-badge-platform { position: absolute !important; top: 8px !important; left: 8px !important; right: auto !important; bottom: auto !important; z-index: 7 !important; margin: 0 !important; } /* Estado: arriba derecha */ body:not(.codec-view-list) :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-card-badge-status, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]):not(.codec-loop-view-list) .codec-game-card .codec-card-badge-status { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; z-index: 7 !important; margin: 0 !important; } /* ===================================================== MARCA DIOS EN CARDS ===================================================== */ /* * Oculta la estrella real del HTML en cards. * Sigue existiendo para que :has() pueda detectarla. */ body:not(.codec-view-list) :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-god-marker, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]):not(.codec-loop-view-list) .codec-card-god-marker { display: none !important; } /* * Dibuja la esquina dorada directamente sobre la card. */ body:not(.codec-view-list) :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card:has(.codec-card-god-marker)::before, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]):not(.codec-loop-view-list) .codec-game-card:has(.codec-card-god-marker)::before { content: "★" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; top: auto !important; left: auto !important; z-index: 10 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; width: 46px !important; height: 46px !important; padding: 0 7px var(--codec-space-2) 0 !important; border-radius: 0 0 18px 0 !important; background: #F3C63F !important; clip-path: polygon( 100% 0, 100% 100%, 0 100% ) !important; color: #6C4700 !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; } /* Cards pequeñas */ body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card:has(.codec-card-god-marker)::before, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-game-card:has(.codec-card-god-marker)::before { width: 40px !important; height: 40px !important; padding: 0 var(--codec-space-2) 5px 0 !important; font-size: 11px !important; } /* ===================================================== CODEC — SEPARADORES FINALES EN VISTA LISTA ===================================================== */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card { border-bottom: 1px solid rgba(47, 55, 71, 0.24) !important; } /* ===================================================== CODEC — BACKLOG: DESTACAR PRÓXIMAMENTE ===================================================== */ /* Encabezado Próximamente */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading[data-codec-backlog-group="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-backlog-group-heading[data-codec-backlog-group="proximamente"] { margin-bottom: 0 !important; padding: var(--codec-space-4) var(--codec-space-5) 9px !important; } /* Cada juego del bloque Próximamente */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item[data-codec-backlog-group="proximamente"], body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item[data-codec-backlog-group="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item[data-codec-backlog-group="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item[data-codec-backlog-group="proximamente"] { padding: 7px var(--codec-space-5) !important; } /* Línea separadora dentro del bloque */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item[data-codec-backlog-group="proximamente"] .codec-game-card, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item[data-codec-backlog-group="proximamente"] .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item[data-codec-backlog-group="proximamente"] .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item[data-codec-backlog-group="proximamente"] .codec-game-card { border-bottom: 1px solid rgba(47, 55, 71, 0.14) !important; } /* ===================================================== CODEC — BACKLOG: AJUSTE FINAL DE CABECERAS ===================================================== */ /* Quitar la línea horizontal a la derecha de ambos títulos */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading::after, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-backlog-group-heading::after { content: none !important; display: none !important; } /* Quitar el fondo del título Próximamente */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-backlog-group-heading[data-codec-backlog-group="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-backlog-group-heading[data-codec-backlog-group="proximamente"] { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; border-radius: 0 !important; } /* ===================================================== CODEC — HOVER UNIFORME EN VISTA LISTA ===================================================== */ /* * Todos los elementos reservan siempre el mismo espacio. * Así el hover no provoca saltos ni cambia de tamaño. */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item { padding: 7px var(--codec-space-5) !important; border-radius: 14px !important; transition: background-color 0.16s ease, box-shadow 0.16s ease !important; } /* * El interior queda transparente. * El fondo lo controla el elemento exterior. */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } /* Próximamente mantiene su fondo gris */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item[data-codec-backlog-group="proximamente"], body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item[data-codec-backlog-group="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item[data-codec-backlog-group="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item[data-codec-backlog-group="proximamente"] { background: #F4F5F7 !important; } /* * Hover para todos los juegos de cualquier lista. * Tiene el mismo tamaño y radio que Próximamente. */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item:hover, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item:hover, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item:hover, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item:hover { background: var(--codec-control-accent-soft) !important; box-shadow: 0 3px 10px rgba(242, 138, 80, 0.10) !important; } /* Evitar que una regla antigua pinte solo la card interior */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card:hover, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .codec-game-card:hover { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } /* ===================================================== CODEC — BÚSQUEDA CONTEXTUAL DEL TRACKER ===================================================== */ .codec-context-search { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; height: var(--codec-control-height-lg) !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } /* Lupa */ .codec-context-search-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: var(--codec-radius-sm) !important; background: transparent !important; color: var(--codec-color-muted) !important; font-family: inherit !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: color 0.15s ease, background-color 0.15s ease !important; } .codec-context-search-toggle:hover, .codec-context-search.is-open .codec-context-search-toggle, .codec-context-search.is-active .codec-context-search-toggle { background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; } /* El formulario se expande hacia la izquierda */ .codec-context-search-form { display: flex !important; align-items: center !important; width: 0 !important; max-width: 0 !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: var(--codec-radius-md) !important; background: var(--codec-color-surface) !important; opacity: 0 !important; visibility: hidden !important; transform: translateX(8px) !important; transition: width 0.18s ease, max-width 0.18s ease, opacity 0.15s ease, transform 0.18s ease, border-color 0.15s ease !important; } .codec-context-search.is-open .codec-context-search-form { width: 260px !important; max-width: 260px !important; margin-right: var(--codec-space-3) !important; padding-left: var(--codec-space-4) !important; border-color: var(--codec-color-line-warm) !important; opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important; box-shadow: 0 0 0 3px rgba(234, 157, 106, 0.09) !important; } /* Input */ .codec-context-search-input { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; height: 32px !important; margin: 0 !important; padding: 0 var(--codec-space-2) 0 0 !important; border: none !important; outline: none !important; background: transparent !important; color: #40444E !important; font-family: inherit !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1 !important; box-shadow: none !important; } .codec-context-search-input::placeholder { color: #A1A7B1 !important; opacity: 1 !important; } /* Quitar decoración nativa de search */ .codec-context-search-input::-webkit-search-cancel-button, .codec-context-search-input::-webkit-search-decoration { display: none !important; -webkit-appearance: none !important; } /* Borrar búsqueda */ .codec-context-search-clear { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 24px !important; height: 24px !important; margin: 0 3px 0 0 !important; padding: 0 !important; border: none !important; border-radius: var(--codec-radius-pill) !important; background: transparent !important; color: #C76A6A !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; } .codec-context-search-clear:hover { background: rgba(255, 80, 0, 0.08) !important; color: #FF5000 !important; } /* Botón Buscar */ .codec-context-search-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 26px !important; margin: 0 3px 0 0 !important; padding: 0 9px !important; border: none !important; border-radius: 7px !important; background: var(--codec-control-accent) !important; color: var(--codec-color-surface) !important; font-family: inherit !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; } .codec-context-search-submit:hover { background: #EA6D2A !important; } /* * Cuando se abre, el formulario aparece antes de la lupa: * [ Buscar juego… ] 🔍 Orden Vista */ .codec-context-search-form { order: 1 !important; } .codec-context-search-toggle { order: 2 !important; } /* Ajuste de espacio con Orden */ .codec-toolbar-right { gap:var(--codec-space-9) !important; } /* Pantallas estrechas */ @media (max-width:900px) { .codec-context-search.is-open .codec-context-search-form { width: 210px !important; max-width: 210px !important; } } @media (max-width:1024px) { .codec-toolbar { min-height: 48px !important; height: auto !important; flex-wrap: wrap !important; } .codec-toolbar-right { width: 100% !important; } .codec-context-search.is-open { flex: 1 1 100% !important; } .codec-context-search.is-open .codec-context-search-form { flex: 1 1 auto !important; width: auto !important; max-width: none !important; } } /* ===================================================== CODEC — PULIDO BOTONES DE LA BARRA ===================================================== */ /* * Filtros, orden, dirección y vista comparten ahora * el mismo hover suave que el botón de búsqueda. */ .codec-filter-current, .codec-sort-current, .codec-sort-direction, .codec-view-current { min-height: 28px !important; padding: 0 var(--codec-space-3) !important; border-radius: var(--codec-radius-sm) !important; transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease !important; } .codec-filter-current:hover, .codec-filter-dropdown.is-open .codec-filter-current, .codec-sort-current:hover, .codec-sort-dropdown.is-open .codec-sort-current, .codec-sort-direction:hover, .codec-view-current:hover, .codec-view-dropdown.is-open .codec-view-current { background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; } /* Un poco más de aire en el selector de vista */ .codec-view-current { padding-left: var(--codec-space-4) !important; padding-right: var(--codec-space-4) !important; } /* * Los textos estáticos de Jugando y Backlog * no parecen botones. */ /* ===================================================== CODEC — RESUMEN DE BÚSQUEDA CONTEXTUAL ===================================================== */ .codec-context-search-summary { display: flex !important; align-items: center !important; gap: 9px !important; width: 40% !important; margin: var(--codec-space-7) auto var(--codec-space-1) !important; padding: var(--codec-space-4) 13px !important; border: 1px solid rgba(234, 157, 106, 0.30) !important; border-radius: var(--codec-radius-card) !important; background: linear-gradient( 135deg, #FFF8F3, #FFFDFB ) !important; color: var(--codec-color-text-secondary) !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.2 !important; box-shadow: 0 2px 8px rgba(31, 41, 51, 0.045) !important; } .codec-context-search-summary-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 26px !important; height: 26px !important; border-radius: var(--codec-radius-sm) !important; background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; font-size: 18px !important; font-weight: 850 !important; line-height: 1 !important; } .codec-context-search-summary-text { min-width: 0 !important; } .codec-context-search-summary-text strong { color: #E86F31 !important; font-weight: 800 !important; } .codec-context-search-summary-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; padding: 5px 9px !important; border-radius: var(--codec-radius-pill) !important; background: var(--codec-color-surface) !important; color: #7B8492 !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; box-shadow: 0 0 0 1px rgba(232, 222, 214, 0.95) !important; } @media (max-width:1024px) { .codec-context-search-summary { width: calc(100% - 24px) !important; margin-left: var(--codec-space-5) !important; margin-right: var(--codec-space-5) !important; } .codec-context-search-summary-count { margin-left: 0 !important; } } /* ===================================================== CODEC — RESUMEN DE BÚSQUEDA: VISIBILIDAD Y CAPA ===================================================== */ .codec-context-search-summary { position: relative !important; z-index: 50 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; user-select: text !important; -webkit-user-select: text !important; filter: none !important; mix-blend-mode: normal !important; isolation: isolate !important; } .codec-context-search-summary, .codec-context-search-summary * { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; user-select: text !important; -webkit-user-select: text !important; } /* * Evita que cualquier capa invisible del Loop Grid * quede por encima del resumen. */ .codec-context-search-summary + :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) { position: relative !important; z-index: 1 !important; } /* ===================================================== CODEC — CONTROLES COMPACTOS: AGRUPAR / ORDENAR / VISTA ===================================================== */ .codec-control-dropdown { position: relative !important; } .codec-control-current { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 30px !important; padding: 0 var(--codec-space-4) !important; border: none !important; border-radius: var(--codec-radius-sm) !important; background: transparent !important; color: var(--codec-control-text) !important; font: inherit !important; font-size: 13px !important; font-weight: 750 !important; cursor: pointer !important; } .codec-control-current:hover, .codec-control-dropdown.is-open .codec-control-current, .codec-control-dropdown.is-active .codec-control-current { background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; } .codec-control-menu { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; z-index: 500 !important; display: none !important; min-width: 210px !important; padding: var(--codec-space-3) !important; border: 1px solid var(--codec-color-line-warm) !important; border-radius: var(--codec-radius-card) !important; background: var(--codec-color-surface) !important; box-shadow: 0 12px 30px rgba(31, 41, 51, 0.16) !important; } .codec-control-dropdown.is-open .codec-control-menu { display: grid !important; gap:var(--codec-space-1) !important; } .codec-control-option, .codec-panel-direction{ width: 100% !important; min-height: 32px !important; padding: 0 var(--codec-space-4) !important; border: none !important; border-radius: var(--codec-radius-sm) !important; background: transparent !important; color: var(--codec-color-text-secondary) !important; text-align: left !important; font: inherit !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; } .codec-control-option:hover, .codec-control-option.is-active, .codec-panel-direction:hover{ background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; } .codec-control-panel-title { display: block !important; padding: 5px var(--codec-space-3) 3px !important; color: var(--codec-color-muted) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .codec-control-panel-secondary { margin-top: var(--codec-space-2) !important; padding-top: var(--codec-space-4) !important; border-top: 1px solid #F0E8E2 !important; } /* ===================================================== CODEC — AGRUPACIÓN GENÉRICA ===================================================== */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading { grid-column: 1 / -1 !important; margin: var(--codec-space-8) 0 var(--codec-space-1) !important; padding: 0 !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading .codec-backlog-group-heading-title { display: inline-flex !important; align-items: center !important; gap:var(--codec-space-3) !important; color: var(--codec-color-text-secondary) !important; font-size: 13px !important; font-weight: 850 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading .codec-backlog-group-heading-title::before { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--codec-color-accent-light) !important; box-shadow: var(--codec-shadow-control-focus) !important; } /* ===================================================== CODEC — CARDS GIGANTES ===================================================== */ body.codec-view-giant :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-giant :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-giant .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-giant .elementor-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important; gap: 34px !important; } body.codec-view-giant :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-game-card-title, body.codec-view-giant :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .elementor-heading-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-giant .codec-game-card .codec-game-card-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-giant .codec-game-card .elementor-heading-title { font-size: 23px !important; left: 20px !important; right: 20px !important; bottom: 20px !important; } body.codec-view-giant :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-giant .codec-card-badge { font-size: 12px !important; padding: 7px var(--codec-space-4) !important; } /* * Los originales se ocultan al agrupar; * se muestran únicamente sus copias dentro de cada grupo. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item[hidden], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item[hidden] { display: none !important; } /* ===================================================== CODEC — AJUSTES FINALES DE AGRUPAR / ORDENAR / VISTA ===================================================== */ /* * Solo Agrupar queda marcado cuando hay agrupación activa. * Ordenar y Vista conservan únicamente el hover/apertura. */ .codec-sort-dropdown.is-active .codec-sort-current, .codec-view-dropdown.is-active .codec-view-current { background: transparent !important; color: var(--codec-control-text) !important; } .codec-sort-dropdown.is-open .codec-sort-current, .codec-view-dropdown.is-open .codec-view-current, .codec-sort-current:hover, .codec-view-current:hover { background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; } /* Opciones de filtros normales sin sangría lateral extra */ .codec-filter-dropdown:not([data-param="codec_platform"]) .codec-filter-option { padding-left: var(--codec-space-5) !important; padding-right: var(--codec-space-5) !important; text-align: left !important; } /* Panel Ordenar: separación clara entre criterio y dirección */ .codec-sort-menu-panel { min-width: 210px !important; } .codec-panel-direction { margin: 0 !important; } /* ===================================================== CODEC — ICONOS DE CABECERA DE GRUPO ===================================================== */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading { display: flex !important; align-items: center !important; gap:var(--codec-space-3) !important; } /* * Desactiva el punto antiguo generado con pseudo-elemento. * Evita el doble punto de las cabeceras. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading .codec-backlog-group-heading-title::before { content: none !important; display: none !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-marker { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-marker.is-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--codec-color-accent-light) !important; box-shadow: var(--codec-shadow-control-focus) !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-marker.is-platform { width: 18px !important; height: 18px !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-marker.is-platform img { display: block !important; width: 18px !important; height: 18px !important; object-fit: contain !important; } /* * El título queda sin márgenes heredados. */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading .codec-backlog-group-heading-title { margin: 0 !important; padding: 0 !important; } /* Backlog agrupado por estado conserva una sola marca */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading[data-codec-group-key="proximamente"] .codec-generic-group-marker.is-dot { background: var(--codec-color-accent-light) !important; box-shadow: var(--codec-shadow-control-focus) !important; } :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading[data-codec-group-key="idea"] .codec-generic-group-marker.is-dot { background: #AAB2BE !important; box-shadow: 0 0 0 4px #F1F3F5 !important; } /* ===================================================== CODEC — CORRECCIONES FINALES DE PANELES Y GRUPOS ===================================================== */ /* Dirección: una opción siempre marcada */ .codec-panel-direction.is-active { background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; } /* Filtros no-Plataforma: sin hueco de check ni texto cortado */ .codec-filter-dropdown:not([data-param="codec_platform"]) .codec-filter-option { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap:var(--codec-space-5) !important; width: 100% !important; margin: 0 !important; padding: var(--codec-space-3) var(--codec-space-5) !important; } .codec-filter-dropdown:not([data-param="codec_platform"]) .codec-filter-option-check { display: none !important; } .codec-filter-dropdown:not([data-param="codec_platform"]) .codec-filter-option-label { min-width: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .codec-filter-dropdown:not([data-param="codec_platform"]) .codec-filter-option-count { justify-self: end !important; } /* Eliminar todos los puntos heredados: queda solo el marcador nuevo */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading::before, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading .codec-backlog-group-heading-title::before { content: none !important; display: none !important; } /* Plataforma: únicamente el icono de consola */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-heading:has( .codec-generic-group-marker.is-platform ) .codec-generic-group-marker.is-dot { display: none !important; } /* Resto de agrupaciones: un único punto */ :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-generic-group-marker.is-dot { display: inline-flex !important; } /* ===================================================== CODEC — CARDS PEQUEÑAS: BADGES MÁS PEGADAS A ESQUINAS ===================================================== */ /* * En Cards pequeñas reducimos el margen superior/lateral * para evitar que plataforma y estado se solapen. */ body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-card-badge-platform, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-game-card .codec-card-badge-platform { top: 5px !important; left: 5px !important; } body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card .codec-card-badge-status, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-game-card .codec-card-badge-status { top: 5px !important; right: 5px !important; } /* Un poco más compactas en esta vista */ body.codec-view-compact :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-compact .codec-card-badge { max-width: calc(50% - 8px) !important; padding: var(--codec-space-1) var(--codec-space-2) !important; font-size: 9px !important; } /* ===================================================== CODEC — BOTÓN BORRAR EN RESUMEN DE BÚSQUEDA ===================================================== */ .codec-context-search-summary-clear { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; height: 24px !important; margin: 0 !important; padding: 0 var(--codec-space-3) !important; border: 1px solid rgba(234, 157, 106, 0.34) !important; border-radius: 7px !important; background: var(--codec-color-surface) !important; color: #D76F36 !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; } .codec-context-search-summary-clear:hover { background: var(--codec-control-accent-soft) !important; border-color: var(--codec-color-accent-light) !important; color: var(--codec-control-accent) !important; } /* ===================================================== CODEC — ORDEN DEL RESUMEN DE BÚSQUEDA ===================================================== */ .codec-context-search-summary-icon { order: 1 !important; } .codec-context-search-summary-text { order: 2 !important; } .codec-context-search-summary-count { order: 3 !important; margin-left: auto !important; } .codec-context-search-summary-clear { order: 4 !important; margin-left: var(--codec-space-2) !important; } /* ===================================================== CODEC — BACKLOG: DESTACAR PRÓXIMAMENTE ===================================================== */ /* Fondo suave para cada juego del grupo Próximamente */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item[data-codec-group-key="proximamente"], body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item[data-codec-group-key="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item[data-codec-group-key="proximamente"], :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item[data-codec-group-key="proximamente"] { padding: 7px var(--codec-space-5) !important; border-radius: 14px !important; background: #FFF8F2 !important; } /* La card interior queda transparente */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item[data-codec-group-key="proximamente"] .codec-game-card, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item[data-codec-group-key="proximamente"] .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item[data-codec-group-key="proximamente"] .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item[data-codec-group-key="proximamente"] .codec-game-card { background: transparent !important; } /* Hover de Próximamente */ body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item[data-codec-group-key="proximamente"]:hover, body.codec-view-list :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid-item[data-codec-group-key="proximamente"]:hover, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .e-loop-item[data-codec-group-key="proximamente"]:hover, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-list .elementor-grid-item[data-codec-group-key="proximamente"]:hover { background: #FFEBDD !important; box-shadow: 0 3px 10px rgba(242, 138, 80, 0.10) !important; } /* ===================================================== CODEC — CARDS DIMINUTAS ===================================================== */ /* * Vista compacta de portada pura: * - cards muy pequeñas * - sin título * - sin badges * - sin estrella DIOS */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .elementor-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; gap:var(--codec-space-6) !important; } /* Radio y sombra más contenidos */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-game-card { border-radius: 11px !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.035), 0 2px 7px rgba(31, 41, 51, 0.18) !important; } /* Ocultar título y todas las badges */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card-title, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-heading-title, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badges, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-god-marker, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-game-card-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .elementor-heading-title, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-card-badges, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-card-god-marker, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card::after, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-game-card::after { display: none !important; } /* Quitar degradado inferior: queda únicamente la portada */ /* Quitar también la esquina DIOS generada sobre la card */ /* Hover suave, sin tapar demasiado la portada */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card:hover::before, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-game-card:hover::before { background: rgba(0, 0, 0, 0.16) !important; } body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .e-loop-item:has(.codec-game-card):hover .codec-game-card, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .e-loop-item:has(.codec-game-card):hover .codec-game-card { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 6px 14px rgba(31, 41, 51, 0.24) !important; } /* En pantallas estrechas, mantenerlas pequeñas */ @media (max-width:1024px) { body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .elementor-loop-container, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .elementor-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important; gap:var(--codec-space-4) !important; } } /* ===================================================== CODEC — CARDS DIMINUTAS: SOLO PORTADA + ESTRELLA DIOS ===================================================== */ /* * El contenedor debe seguir existiendo para que * :has(.codec-card-god-marker) detecte los juegos DIOS. */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badges, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-card-badges { display: block !important; } /* Ocultar únicamente plataforma y estado */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-platform, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-badge-status, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-card-badge-platform, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-card-badge-status, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-card-god-marker, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-card-god-marker { display: none !important; } /* El marcador HTML permanece oculto: solo sirve como detector */ /* Recuperar la esquina DIOS en tamaño reducido */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .codec-game-card:has(.codec-card-god-marker)::before, :is(#codec-games-loop, [id^="codec-"][id$="-loop"]).codec-loop-view-tiny .codec-game-card:has(.codec-card-god-marker)::before { content: "★" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; top: auto !important; left: auto !important; z-index: 10 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; width: 28px !important; height: 28px !important; padding: 0 var(--codec-space-1) var(--codec-space-1) 0 !important; background: #F3C63F !important; clip-path: polygon( 100% 0, 100% 100%, 0 100% ) !important; color: #6C4700 !important; font-size: 9px !important; font-weight: 900 !important; line-height: 1 !important; pointer-events: none !important; } /* ===================================================== CODEC — PRIMER PINTADO DE BIBLIOTECA Evita el salto cards grandes → cards diminutas. ===================================================== */ body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) { --codec-initial-card-min: 88px; --codec-initial-card-gap:var(--codec-space-6); } body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-loop-container, body.codec-view-tiny :is(#codec-games-loop, [id^="codec-"][id$="-loop"]) .elementor-grid { grid-template-columns: repeat( auto-fill, minmax( var(--codec-initial-card-min), 1fr ) ) !important; gap: var(--codec-initial-card-gap) !important; } /* ===================================================== CODEC — VISTA: CANTIDAD DE JUEGOS ===================================================== */ .codec-view-quantity { display: block !important; margin-top: 7px !important; padding-top: 9px !important; border-top: 1px solid #F0E8E2 !important; } .codec-view-quantity .codec-control-panel-title { display: block !important; padding: 0 var(--codec-space-3) !important; } .codec-view-quantity-form { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap:var(--codec-space-2) !important; margin: 5px 0 0 !important; padding: 0 !important; } .codec-view-quantity-input { width: 100% !important; min-width: 0 !important; height: 32px !important; margin: 0 !important; padding: 0 9px !important; border: 1px solid var(--codec-color-line-warm) !important; border-radius: var(--codec-radius-sm) !important; background: var(--codec-color-surface) !important; color: #4B5563 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1 !important; outline: none !important; box-shadow: none !important; } .codec-view-quantity-input:focus { border-color: var(--codec-color-accent-light) !important; box-shadow: 0 0 0 3px rgba(242, 160, 111, 0.12) !important; } .codec-view-quantity-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 32px !important; margin: 0 !important; padding: 0 var(--codec-space-4) !important; border: none !important; border-radius: var(--codec-radius-sm) !important; background: var(--codec-control-accent-soft) !important; color: var(--codec-control-accent) !important; font-family: inherit !important; font-size: 11px !important; font-weight: 850 !important; line-height: 1 !important; cursor: pointer !important; } .codec-view-quantity-submit:hover { background: #FFE5D3 !important; color: #E66E2E !important; } .codec-view-quantity-help { display: block !important; margin-top: 5px !important; padding: 0 var(--codec-space-3) !important; color: #A1A7B1 !important; font-size: 10px !important; font-weight: 650 !important; line-height: 1.2 !important; } .codec-view-menu { min-width: 220px !important; } .codec-view-show-all { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 32px !important; margin: var(--codec-space-3) 0 0 !important; padding: 0 var(--codec-space-4) !important; border: 1px solid #F3D8C7 !important; border-radius: var(--codec-radius-sm) !important; background: var(--codec-color-surface) !important; color: var(--codec-control-accent) !important; font-family: inherit !important; font-size: 11px !important; font-weight: 850 !important; line-height: 1 !important; cursor: pointer !important; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; } .codec-view-show-all:hover { background: #FFF5EE !important; border-color: var(--codec-color-accent-light) !important; color: #E66E2E !important; } .codec-view-show-all.is-active { background: var(--codec-control-accent-soft) !important; border-color: var(--codec-color-accent-light) !important; color: #E66E2E !important; cursor: default !important; } /* ===================================================== CODEC — SELECTOR DE FABRICANTE EN PLATAFORMAS ===================================================== */ .codec-platform-group-header { width: 100% !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; color: inherit !important; text-align: left !important; font: inherit !important; cursor: pointer !important; box-shadow: none !important; } .codec-platform-group-header:hover .codec-platform-group-name { color: #F07D43 !important; } .codec-platform-group-header:focus-visible { outline: 2px solid var(--codec-color-accent-light) !important; outline-offset: 3px !important; border-radius: 6px !important; } /* ===================================================== CODEC — ANIME: LISTA SIMPLE SEGÚN SECCIÓN ===================================================== */ /* * Biblioteca y Terminados conservan la lista completa: * nombre + estrella + badge de estado. * * Viendo, Al día, Abandonados y Backlog usan: * ESTRELLA + NOMBRE, todo en una sola línea. */ body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: minmax(28px, auto) !important; align-items: center !important; justify-items: start !important; column-gap: 7px !important; row-gap: 0 !important; min-height: var(--codec-control-height-lg) !important; padding: var(--codec-space-2) 0 7px !important; } /* En estas vistas no mostramos badges de estado/plataforma */ body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-platform, body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-platform, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-platform, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-platform, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status { display: none !important; } /* El contenedor de badges solo conserva la estrella */ body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges { position: static !important; grid-column: 1 !important; grid-row: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; transform: none !important; } /* Sin estrella, el contenedor no reserva espacio */ body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges:not(:has(.codec-card-god-marker)), body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges:not(:has(.codec-card-god-marker)), body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges:not(:has(.codec-card-god-marker)), body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges:not(:has(.codec-card-god-marker)) { display: none !important; } /* Estrella antes del nombre */ body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-god-marker, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-god-marker, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-god-marker, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-god-marker { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Nombre en la misma línea */ body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title, body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title *, body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .elementor-heading-title, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title *, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .elementor-heading-title, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title *, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .elementor-heading-title, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .codec-game-card-title *, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card .elementor-heading-title { position: static !important; grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Sin estrella, el nombre ocupa toda la línea */ body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .codec-game-card-title, body.codec-view-list.codec-anime-view-viendo :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .elementor-heading-title, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .codec-game-card-title, body.codec-view-list.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .elementor-heading-title, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .codec-game-card-title, body.codec-view-list.codec-anime-view-abandonados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .elementor-heading-title, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .codec-game-card-title, body.codec-view-list.codec-anime-view-backlog :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:not(:has(.codec-card-god-marker)) .elementor-heading-title { grid-column: 1 / -1 !important; } /* ===================================================== CODEC — ANIME: AJUSTES AL DÍA Y TERMINADOS ===================================================== */ /* Terminados conserva siempre la badge de estado en vista Lista */ body.codec-view-list.codec-anime-view-terminados :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status { display: inline-flex !important; } /* Al Día: mejorar contraste de la badge en las cards */ body.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status { background: rgba(255, 255, 255, 0.94) !important; color: #E66E2E !important; border: 1px solid rgba(230, 110, 46, 0.35) !important; text-shadow: none !important; box-shadow: var(--codec-shadow-popover) !important; } /* Mantener el color también al pasar el ratón */ body.codec-anime-view-al_dia :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:hover .codec-card-badge-status { color: #D85F22 !important; } /* ===================================================== CODEC — ANIME: CORRECCIÓN ROBUSTA DE BADGES ===================================================== */ /* * La badge "Al Día" recibe su color directamente por * la clase de estado. Así no depende de que la clase * de sección del body se haya aplicado correctamente. */ :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status.codec-status-al-dia { display: inline-flex !important; background: var(--codec-control-accent-soft) !important; color: #D85F22 !important; border: 1px solid rgba(216, 95, 34, 0.52) !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important; box-shadow: var(--codec-shadow-popover) !important; } /* * Refuerzo general para las badges de estado de Anime. */ :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status { opacity: 1 !important; visibility: visible !important; } /* * En Terminados mostramos siempre el contenedor de badges * y la badge de estado. Se detecta la sección mediante * .codec-page-context, que está presente en todas las páginas * y no depende de clases añadidas posteriormente al body. */ body:has( .codec-page-context[ data-codec-tracker="anime" ][ data-codec-view="terminados" ] ) :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badges { display: flex !important; } body:has( .codec-page-context[ data-codec-tracker="anime" ][ data-codec-view="terminados" ] ) :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; } /* Terminado mantiene su verde */ body:has( .codec-page-context[ data-codec-tracker="anime" ][ data-codec-view="terminados" ] ) :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status.codec-status-terminado { background: rgba(255, 255, 255, 0.94) !important; color: #23834A !important; border-color: rgba(35, 131, 74, 0.72) !important; } /* Al Día dentro de Terminados mantiene su naranja */ body:has( .codec-page-context[ data-codec-tracker="anime" ][ data-codec-view="terminados" ] ) :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status.codec-status-al-dia { background: var(--codec-control-accent-soft) !important; color: #D85F22 !important; border-color: rgba(216, 95, 34, 0.52) !important; } /* ===================================================== CODEC — ANIME: BADGE VIENDO CON CONTRASTE ===================================================== */ :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-card-badge-status.codec-status-viendo { display: inline-flex !important; background: #EAF5FF !important; color: #1769AA !important; border: 1px solid rgba(23, 105, 170, 0.45) !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important; box-shadow: var(--codec-shadow-popover) !important; } :is(#codec-anime-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop, #codec-books-loop) .codec-game-card:hover .codec-card-badge-status.codec-status-viendo { color: #125B94 !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-menu { width: 330px !important; max-width: min(330px, calc(100vw - 30px)) !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-groups { display: block !important; } .codec-author-flat-group, .codec-author-options { width: 100% !important; } .codec-author-options { display: flex !important; flex-direction: column !important; max-height: 420px !important; overflow-y: auto !important; padding: 2px var(--codec-space-1) var(--codec-space-2) !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-option { width: 100% !important; min-height: 34px !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-option-label { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* * El header de Libros contiene un filtro adicional. Reducimos * ligeramente los espacios para que izquierda y derecha ocupen * correctamente todo el ancho sin comprimir el bloque. */ body:has(.codec-page-context.marcador-libros) .codec-toolbar { width: 100% !important; max-width: none !important; gap: 22px !important; padding-left: var(--codec-space-11) !important; padding-right: var(--codec-space-11) !important; } body:has(.codec-page-context.marcador-libros) .codec-toolbar-left { gap:var(--codec-space-10) !important; } body:has(.codec-page-context.marcador-libros) .codec-toolbar-right { gap:var(--codec-space-8) !important; } /* El filtro Autor queda al final del bloque izquierdo */ /* Buscador de autores: entrada flexible y usable */ .codec-filter-dropdown[data-param="codec_author"] .codec-filter-search-wrap { flex: 1 1 auto !important; } /* En Leyendo no existe control Agrupar */ body:has( .codec-page-context.marcador-libros[ data-codec-view="leyendo" ] ) .codec-group-dropdown { display: none !important; } /* * En la parte superior real de la página no debe aparecer * ninguna raya ni sombra debajo de los filtros. * * Al comenzar a desplazarse se mantiene el comportamiento * sticky original. */ body.codec-at-page-top .codec-toolbar-sticky::after { opacity: 0 !important; } body.codec-at-page-top .codec-toolbar-sticky, body.codec-at-page-top .codec-toolbar-sticky .codec-toolbar { border-bottom: 0 !important; box-shadow: none !important; } /* ----------------------------------------------------- AUTOR: PANEL VERTICAL, LIMPIO Y CON UN SOLO SCROLL ----------------------------------------------------- */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-menu { width: 390px !important; min-width: 390px !important; max-width: min(390px, calc(100vw - 30px)) !important; max-height: min(610px, calc(100vh - 170px)) !important; padding: 0 !important; overflow: hidden !important; background: rgba(255, 255, 255, 0.98) !important; } /* Buscador ancho + acciones compactas */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-toolbar { display: grid !important; align-items: center !important; width: 100% !important; padding: var(--codec-space-5) !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-search-wrap { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-md) !important; border: 1px solid #DED5CE !important; border-radius: 9px !important; background: var(--codec-color-surface) !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-search-icon { position: absolute !important; left: 11px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-search { width: 100% !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 var(--codec-space-4) 0 var(--codec-space-13) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 14px !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-actions { align-items: center !important; gap:var(--codec-space-3) !important; width: auto !important; flex: 0 0 auto !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save { width: auto !important; min-width: 68px !important; height: var(--codec-control-height-md) !important; margin: 0 !important; padding: 0 var(--codec-space-5) !important; white-space: nowrap !important; } /* Un solo contenedor con scroll */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-groups { display: block !important; width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-author-flat-group { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-author-options { display: flex !important; flex-direction: column !important; width: 100% !important; max-height: min(470px, calc(100vh - 270px)) !important; margin: 0 !important; padding: var(--codec-space-3) var(--codec-space-3) var(--codec-space-4) !important; overflow-x: hidden !important; overflow-y: auto !important; } /* Cada autor ocupa toda la anchura */ .codec-filter-dropdown[data-param="codec_author"] .codec-filter-option { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap:var(--codec-space-4) !important; width: 100% !important; min-height: var(--codec-control-height-sm) !important; margin: 0 !important; padding: 7px var(--codec-space-4) !important; border-radius: var(--codec-radius-sm) !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-option-check, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-icon { display: none !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-option-label { grid-column: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: left !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-filter-option-count { grid-column: 2 !important; min-width: 24px !important; text-align: right !important; } /* Resultado vacío debajo de la cabecera */ .codec-filter-dropdown[data-param="codec_author"] .codec-filter-search-empty { margin: var(--codec-space-5) !important; } /* Sin raya ni sombra arriba del todo */ body.codec-at-page-top .codec-toolbar-sticky, body:not(.codec-has-scrolled) .codec-toolbar-sticky { border-bottom-color: transparent !important; box-shadow: none !important; } body.codec-at-page-top .codec-toolbar-sticky::before, body.codec-at-page-top .codec-toolbar-sticky::after, body:not(.codec-has-scrolled) .codec-toolbar-sticky::before, body:not(.codec-has-scrolled) .codec-toolbar-sticky::after { opacity: 0 !important; box-shadow: none !important; } /* El buscador de Autor debe ocultar de verdad los no coincidentes */ .codec-filter-dropdown[data-param="codec_author"] .codec-filter-option[hidden] { display: none !important; } /* Reset y Guardar siempre visibles en Autor */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save { display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Guardar desactivado visualmente cuando no hay cambios */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save[hidden] { display: inline-flex !important; opacity: 0.48 !important; pointer-events: none !important; } /* Reset visible también sin selección */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset[hidden] { opacity: 0.72 !important; } /* ----------------------------------------------------- STICKY: ninguna línea al estar arriba ----------------------------------------------------- */ .codec-sticky-tabs { box-shadow: none !important; } body.codec-has-scrolled .codec-sticky-tabs { box-shadow: 0 1px 0 rgba(232, 222, 214, 0.9) !important; } body:not(.codec-has-scrolled) .codec-toolbar-sticky, body:not(.codec-has-scrolled) .codec-toolbar { border-bottom: 0 !important; box-shadow: none !important; } body:not(.codec-has-scrolled) .codec-toolbar-sticky::before, body:not(.codec-has-scrolled) .codec-toolbar-sticky::after { content: none !important; display: none !important; } /* ----------------------------------------------------- AUTOR: botones limpios y coherentes ----------------------------------------------------- */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-actions { display: contents !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset[hidden], .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save[hidden] { pointer-events: auto !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset { border: 1px solid #F2B795 !important; background: var(--codec-color-surface) !important; color: #E66E2E !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save { border: 1px solid #F08A52 !important; background: var(--codec-control-accent-soft) !important; color: #D85F22 !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset:hover, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save:hover { background: #FFE4D3 !important; } /* ----------------------------------------------------- BADGE AUTOR: solo en Lista de Libros ----------------------------------------------------- */ #codec-books-loop .codec-card-badge-author { display: none !important; } body.codec-view-list.codec-book-view-biblioteca #codec-books-loop .codec-card-badge-author, body.codec-view-list.codec-book-view-leyendo #codec-books-loop .codec-card-badge-author, body.codec-view-list.codec-book-view-terminados #codec-books-loop .codec-card-badge-author { display: inline-flex !important; order: 3 !important; max-width: 220px !important; background: #F0ECE8 !important; color: #5B5665 !important; border: 1px solid #DED7D1 !important; } /* En Lista de Libros no existe badge de plataforma */ body.codec-view-list #codec-books-loop .codec-card-badge-platform, body.codec-book-view-backlog .codec-group-dropdown { display: none !important; } /* Backlog sigue agrupado por estado, pero no muestra el control */ /* Autor: acciones integradas y más discretas */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-toolbar { gap: 7px !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset[hidden], .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save[hidden] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-md) !important; margin: 0 !important; padding: 0 9px !important; border-radius: var(--codec-radius-sm) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; opacity: 1 !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset[hidden] { border: 1px solid #DED5CE !important; background: var(--codec-color-surface) !important; color: #706A76 !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save[hidden] { border: 1px solid #F08A52 !important; background: #F47A3C !important; color: var(--codec-color-surface) !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset:hover { background: #F7F3F0 !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save:hover { background: #DF672E !important; } /* * La selección pendiente controla la interacción mediante JS. * No ocultamos los botones ni los convertimos en elementos fantasma. */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset[hidden], .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save[hidden] { pointer-events: auto !important; } /* * Reset de Autor solo existe visualmente cuando codec_author * está aplicado en la URL/cookie. */ /* * Guardar permanece visible para aplicar la selección pendiente. */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save, .codec-filter-dropdown[data-param="codec_author"] .codec-platform-save[hidden] { display: inline-flex !important; } /* * La cabecera se adapta cuando Reset está oculto. */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-toolbar { grid-template-columns: minmax(0, 1fr) auto auto !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset[hidden] + .codec-platform-save { min-width: 74px !important; } /* * Autor permanece como último filtro y Borrar Filtros aparece * inmediatamente después. */ body:has(.codec-page-context.marcador-libros) .codec-filter-dropdown[data-param="codec_author"] { order: 90 !important; } body:has(.codec-page-context.marcador-libros) .codec-filter-clear-all { order: 100 !important; } /* * Reset de Autor sigue el estado de la selección pendiente. */ .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset[hidden] { display: none !important; } .codec-filter-dropdown[data-param="codec_author"] .codec-platform-reset:not([hidden]) { display: inline-flex !important; } /* ===================================================== CODEC — AUTOCOMPLETADO DEL BUSCADOR CONTEXTUAL ===================================================== */ .codec-context-search-input { position: relative !important; z-index: 2 !important; } .codec-context-suggestions { position: absolute !important; top: calc(100% + 8px) !important; max-height: 360px !important; padding: var(--codec-space-2) !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid #E7DCD4 !important; border-radius: var(--codec-radius-card) !important; background: rgba(255, 255, 255, 0.99) !important; box-shadow: 0 16px 40px rgba(45, 38, 34, 0.15), 0 3px 10px rgba(45, 38, 34, 0.08) !important; } .codec-context-suggestion { width: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: #555B6C !important; text-align: left !important; cursor: pointer !important; } .codec-context-suggestion:hover, .codec-context-suggestion.is-active, .codec-context-suggestion[aria-selected="true"] { background: #FFF0E6 !important; color: #E4662D !important; } .codec-context-suggestion-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 7px !important; background: #FFF6F0 !important; color: #E9783D !important; font-size: 12px !important; } .codec-context-suggestion-title { font-size: 13px !important; font-weight: 650 !important; } .codec-context-suggestion-title mark { padding: 0 !important; background: transparent !important; color: #E4662D !important; font-weight: 800 !important; } .codec-context-suggestion-empty { padding: var(--codec-space-6) var(--codec-space-5) !important; color: #9297A3 !important; font-size: 13px !important; text-align: center !important; } @media (max-width:1024px) { .codec-context-suggestions { position: fixed !important; top: auto !important; left: 12px !important; right: 12px !important; min-width: 0 !important; max-height: 45vh !important; } } .codec-context-search, .codec-context-search-form { position: relative !important; overflow: visible !important; } .codec-context-suggestions { z-index: 2147483000 !important; } /* * Más anchura para aprovechar el espacio del header y mostrar * títulos completos siempre que sea posible. */ .codec-context-suggestions { left: auto !important; right: 0 !important; } /* Plataforma de Games en lugar de la lupa */ .codec-context-suggestion-platform { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; max-width: 92px !important; height: 24px !important; padding: 0 var(--codec-space-3) !important; border-radius: var(--codec-radius-pill) !important; color: var(--codec-color-surface) !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } .codec-context-suggestion-platform.codec-platform-nintendo { background: #E60012 !important; } .codec-context-suggestion-platform.codec-platform-playstation { background: #1769AA !important; } .codec-context-suggestion-platform.codec-platform-xbox { background: #107C10 !important; } .codec-context-suggestion-platform.codec-platform-sega { background: #0089CF !important; } .codec-context-suggestion-platform.codec-platform-otros { background: #626A76 !important; } /* * Caja más compacta. El título puede ocupar dos líneas, * así que no necesitamos tanta anchura horizontal. */ .codec-context-suggestions { width: min(500px, calc(100vw - 250px)) !important; min-width: 360px !important; max-width: 500px !important; } /* * Título a la izquierda y badge de plataforma a la derecha. */ /* * Hasta dos líneas para títulos largos. */ .codec-context-suggestion-title { display: -webkit-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-height: 1.3 !important; } /* * Badge siempre a la derecha y sin comprimir el título. */ .codec-context-suggestion-platform, .codec-context-suggestion-icon { flex: 0 0 auto !important; } /* * La lupa de Anime/Libros también queda a la derecha. */ .codec-context-suggestion-icon { grid-column: 2 !important; } /* * En móvil recuperamos el ancho disponible. */ @media (max-width:900px) { .codec-context-suggestions { width: min(460px, calc(100vw - 40px)) !important; min-width: 0 !important; } } @media (max-width:1024px) { .codec-context-suggestions { width: auto !important; max-width: none !important; } } /* * El módulo independiente es el único que controla la visibilidad. * Evita que reglas anteriores oculten el panel después de “Buscando…”. */ .codec-context-suggestions:not([hidden]) { display: block !important; } .codec-context-suggestions[hidden] { display: none !important; } /* Tipo queda como último filtro de la izquierda */ body:has(.codec-page-context.marcador-series) .codec-filter-dropdown[data-param="codec_type"] { order: 90 !important; } body:has(.codec-page-context.marcador-series) .codec-filter-clear-all { order: 100 !important; } /* * Viendo no ofrece agrupaciones útiles. * Backlog continúa agrupado internamente por estado. */ body.codec-series-view-viendo .codec-group-dropdown, body.codec-series-view-backlog .codec-group-dropdown { display: none !important; } /* Abandonados conserva todos los controles */ body.codec-series-view-abandonados .codec-group-dropdown { display: inline-block !important; } /* * La eliminación de la raya sticky solo debe afectar al contenedor * principal. Los menús y sus botones conservan todos sus bordes. */ .codec-group-menu, .codec-sort-menu-panel, .codec-view-menu, .codec-filter-menu, .codec-platform-menu { border-color: var(--codec-color-line-warm) !important; box-shadow: 0 12px 30px rgba(31, 41, 51, 0.16) !important; } .codec-view-quantity, .codec-control-panel-secondary { border-top-color: var(--codec-color-line-warm) !important; } .codec-view-show-all { border-color: #F3D8C7 !important; } .codec-view-quantity-input, .codec-filter-search { border-color: #DED5CE !important; } /* * Backlog continúa agrupado internamente por estado, pero no * muestra Agrupar porque no hay ninguna alternativa útil. */ body.codec-peli-view-backlog .codec-group-dropdown, body.codec-puzzle-view-haciendo .codec-group-dropdown, body.codec-puzzle-view-backlog .codec-group-dropdown { display: none !important; } /* * Haciendo no tiene ninguna agrupación útil. * Backlog sigue agrupado internamente por Estado. */ /* * Puzzles vuelve a usar exactamente el mismo sistema genérico de vistas * que Haciendo, Terminados y el resto de CPT. */ /* * Biblioteca vuelve a mostrar el menú Vista estándar. * Vista inicial: Cards grandes. */ /* * La vista vuelve a utilizar los estilos compartidos normales. * La corrección está en la resolución del contexto JavaScript. */ /* * Biblioteca entra siempre con Agrupar = Sin agrupar. */ /* * Biblioteca utiliza un Query ID limpio: * codec_puzzles_biblioteca_v2 */ /* * Base idéntica a las badges de estado de Games: * fondo blanco, borde del color del estado, texto coloreado, * opacidad completa y sombra suave. */ #codec-puzzles-loop .codec-card-badge-status { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 24px !important; padding: var(--codec-space-1) var(--codec-space-4) !important; border-width: 1px !important; border-style: solid !important; border-radius: var(--codec-radius-pill) !important; background: var(--codec-color-surface) !important; opacity: 1 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-shadow: none !important; box-shadow: var(--codec-shadow-popover-strong) !important; filter: none !important; } /* * Elementor imprime el texto del estado, pero no siempre una clase * distinta. Añadimos una clase automática desde JavaScript y aplicamos * exactamente el esquema cromático de Games. */ #codec-puzzles-loop .codec-card-badge-status.is-codec-status-haciendo { color: #FF641F !important; border-color: #FFB58F !important; background: #FFF7F2 !important; } #codec-puzzles-loop .codec-card-badge-status.is-codec-status-terminado { color: #178A45 !important; border-color: #9FD8B5 !important; background: #F5FFF8 !important; } #codec-puzzles-loop .codec-card-badge-status.is-codec-status-abandonado { color: #D73A49 !important; border-color: #F2AAB1 !important; background: #FFF6F7 !important; } #codec-puzzles-loop .codec-card-badge-status.is-codec-status-comprado { color: #2563B8 !important; border-color: #AFC8EC !important; background: #F5F9FF !important; } #codec-puzzles-loop .codec-card-badge-status.is-codec-status-proximamente { color: #A56B00 !important; border-color: #E7C56F !important; background: #FFF9E8 !important; } #codec-puzzles-loop .codec-card-badge-status.is-codec-status-idea { color: #7B61A8 !important; border-color: #CDBFE2 !important; background: #FAF7FF !important; } body.codec-jersey-view-backlog .codec-group-dropdown{display:none!important;} #codec-jerseys-loop .codec-card-badge-country,#codec-jerseys-loop .codec-card-badge-player{display:inline-flex;align-items:center;min-height:24px;padding:4px 10px;border-radius: var(--codec-radius-pill);font-size:12px;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(31,41,51,.12);} #codec-jerseys-loop .codec-card-badge-country{border:1px solid #AFC8EC;background:#F5F9FF;color:#2563B8;} #codec-jerseys-loop .codec-card-badge-player{border:1px solid #D2C1EA;background:#FAF7FF;color:#7353A6;} /* * Armario: * - oculta la badge Comprada * - muestra País y Jugador */ body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-status { display: none !important; } body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-country, body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-player { display: inline-flex !important; } /* * Backlog: * - muestra Estado * - oculta País y Jugador */ body.codec-jersey-view-backlog #codec-jerseys-loop .codec-card-badge-country, body.codec-jersey-view-backlog #codec-jerseys-loop .codec-card-badge-player { display: none !important; } body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badges { inset: 12px 12px auto 12px !important; justify-content: space-between !important; gap:var(--codec-space-4) !important; } body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-country { order: 1; margin-right: auto !important; } body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-player { order: 2; margin-left: auto !important; } /* * Armario: badges en extremos opuestos. * * El contenedor ocupa todo el ancho útil de la card y usa dos columnas: * País a la izquierda y Jugador a la derecha. */ body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badges { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; width: calc(100% - 24px) !important; max-width: none !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: start !important; column-gap:var(--codec-space-4) !important; margin: 0 !important; padding: 0 !important; transform: none !important; pointer-events: none !important; } body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-country { position: static !important; justify-self: start !important; margin: 0 !important; max-width: 100% !important; } body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-player { position: static !important; justify-self: end !important; margin: 0 !important; max-width: 100% !important; text-align: right !important; } body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-country, body.codec-jersey-view-armario #codec-jerseys-loop .codec-card-badge-player { overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } /* * La pestaña activa se resuelve desde la URL real: * /jerseys/ -> Armario * /jerseys/ideas/ -> Ideas */ /* * Ideas usa Lista como vista predeterminada. */ /* * [codec_count] devuelve ahora cantidad + etiqueta. */ /* * Todas las vistas de cards: * * - badges centradas horizontalmente; * - cada badge mantiene el ancho que necesita su texto; * - si caben, permanecen en una sola línea; * - si no caben, saltan a la línea siguiente; * - todas las líneas quedan centradas. */ body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges { position: absolute !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; height: auto !important; display: flex !important; flex-flow: row wrap !important; align-items: center !important; justify-content: center !important; gap:var(--codec-space-2) !important; margin: 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; pointer-events: none !important; z-index: 6 !important; } /* * Neutraliza alineaciones particulares antiguas —como País/Jugador * en Jerseys— para que todas las badges sigan la misma lógica. */ body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges .codec-card-badge { position: static !important; inset: auto !important; order: initial !important; flex: 0 0 auto !important; width: auto !important; max-width: calc(100% - 4px) !important; margin: 0 !important; align-self: auto !important; justify-self: auto !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; } /* * Cards diminutas: ninguna badge en ningún CPT. * También ocultamos el marcador DIOS, que forma parte del mismo sistema. */ body.codec-view-tiny :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges, body.codec-view-tiny :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-god-marker { display: none !important; } /* * Badge de piezas de Puzzles. */ #codec-puzzles-loop .codec-card-badge-pieces { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 24px !important; padding: var(--codec-space-1) var(--codec-space-4) !important; border: 1px solid #E7C56F !important; border-radius: var(--codec-radius-pill) !important; background: #FFF9E8 !important; color: #9A6700 !important; opacity: 1 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-shadow: none !important; box-shadow: var(--codec-shadow-popover-strong) !important; } /* * La regla global de Cards diminutas prevalece también para Piezas. */ body.codec-view-tiny #codec-puzzles-loop .codec-card-badge-pieces { display: none !important; } /* * Cuando las badges saltan a una segunda línea: * - la primera fila conserva la misma distancia superior; * - la segunda fila aparece debajo con separación regular; * - el bloque completo no se pega al borde superior. */ body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges { top: 12px !important; align-content: flex-start !important; row-gap:var(--codec-space-2) !important; } /* * Reserva una altura mínima estable para que el salto de línea no * altere la posición vertical inicial de las badges. */ body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges:has(.codec-card-badge:nth-of-type(2)) { min-height: 24px !important; } /* * En Puzzles, la badge muestra únicamente el número. */ #codec-puzzles-loop .codec-card-badge-pieces { min-width: 0 !important; } /* * Nueva sección Badges dentro del desplegable Vista. */ .codec-view-badges { margin-top: var(--codec-space-4); padding-top: var(--codec-space-4); border-top: 1px solid #E8DED8; } /* * Elección manual: ocultar badges en cualquier vista. */ body.codec-badges-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges, body.codec-badges-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-god-marker { display: none !important; } /* * Elección manual: permitir badges incluso en Cards diminutas. * Esta regla queda después del comportamiento predeterminado que las oculta. */ body.codec-badges-visible.codec-view-tiny :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges { display: flex !important; } body.codec-badges-visible.codec-view-tiny :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-god-marker { display: block !important; } /* * La elección Mostrar también recupera badges concretas que tengan * una regla antigua de ocultación específica por vista. */ body.codec-badges-visible :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges { visibility: visible !important; opacity: 1 !important; } /* * Sustituye la sección anterior de dos botones por tres * interruptores compactos. */ .codec-view-badges { display: none !important; } .codec-view-card-elements { margin-top: var(--codec-space-4); padding-top: var(--codec-space-4); border-top: 1px solid #E8DED8; } .codec-card-elements-list { display: grid; gap: 3px; margin-top: var(--codec-space-2); } .codec-card-element-row { display: flex; align-items: center; justify-content: space-between; min-height: 30px; gap:var(--codec-space-4); } .codec-card-element-label { color: #657080; font-size: 12px; font-weight: 700; line-height: 1.2; } .codec-card-element-toggle { display: inline-flex; align-items: center; justify-content: flex-end; gap:var(--codec-space-2); min-width: 58px; padding: 2px 0; border: 0; background: transparent; color: #8A94A3; font: inherit; cursor: pointer; } .codec-card-element-toggle-track { position: relative; display: inline-block; width: 29px; height: 17px; flex: 0 0 29px; border-radius: var(--codec-radius-pill); background: #D8DDE4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); transition: background 0.16s ease, box-shadow 0.16s ease; } .codec-card-element-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--codec-color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); transition: transform 0.16s ease; } .codec-card-element-toggle-state { min-width: 18px; color: inherit; font-size: 10px; font-weight: 800; line-height: 1; text-align: left; } .codec-card-element-toggle.is-on { color: var(--codec-color-accent-orange); } .codec-card-element-toggle.is-on .codec-card-element-toggle-track { background: #FF8A55; box-shadow: inset 0 0 0 1px rgba(255, 107, 44, 0.22); } .codec-card-element-toggle.is-on .codec-card-element-toggle-thumb { transform: translateX(12px); } .codec-card-element-toggle:focus-visible { outline: none; } /* * Estados de ocultación globales. */ body.codec-name-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-game-card-title, body.codec-name-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .elementor-widget-heading.codec-game-card-title, body.codec-favorite-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-god-marker { display: none !important; } /* * Alineación de las etiquetas con el título ELEMENTOS * y con las opciones superiores del desplegable. */ .codec-card-element-label { padding-left: var(--codec-space-3) !important; } /* * Evita los fondos heredados de botones activos, focus o pulsación. */ .codec-card-element-toggle, .codec-card-element-toggle:hover, .codec-card-element-toggle:focus, .codec-card-element-toggle:focus-visible, .codec-card-element-toggle:active, .codec-card-element-toggle.is-on, .codec-card-element-toggle[aria-pressed="true"], .codec-card-element-toggle[aria-pressed="false"] { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; } /* * Estado Off siempre gris. */ .codec-card-element-toggle .codec-card-element-toggle-track { background: #D8DDE4 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important; } .codec-card-element-toggle .codec-card-element-toggle-state { color: #8A94A3 !important; } /* * Estado On en naranja, sin rojo. */ .codec-card-element-toggle.is-on .codec-card-element-toggle-track, .codec-card-element-toggle[aria-pressed="true"] .codec-card-element-toggle-track { background: #FF8A55 !important; box-shadow: inset 0 0 0 1px rgba(255, 107, 44, 0.24) !important; } .codec-card-element-toggle.is-on .codec-card-element-toggle-state, .codec-card-element-toggle[aria-pressed="true"] .codec-card-element-toggle-state { color: var(--codec-color-accent-orange) !important; } /* * Mantiene el efecto de foco solo alrededor del interruptor. */ .codec-card-element-toggle:hover .codec-card-element-toggle-track, .codec-card-element-toggle:focus-visible .codec-card-element-toggle-track { box-shadow: inset 0 0 0 1px rgba(255, 107, 44, 0.30), 0 0 0 3px rgba(255, 107, 44, 0.09) !important; } /* * BADGES * * Ocultar Badges afecta únicamente a las badges reales. * El contenedor y el marcador Favorito permanecen en el DOM. */ body.codec-badges-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges .codec-card-badge, :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-god-marker, body.codec-favorite-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-game-card:has(.codec-card-god-marker)::before { display: none !important; } /* * El marcador HTML nunca debe verse directamente. * Solo sirve para que :has() detecte las cards favoritas. * Esto elimina la estrella roja que aparecía arriba a la izquierda. */ /* * FAVORITO * * Off oculta exclusivamente la esquina amarilla generada con ::before. */ /* * On recupera la esquina amarilla en todas las vistas de cards, * incluidas Cards diminutas. */ body:not(.codec-favorite-hidden) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-game-card:has(.codec-card-god-marker)::before { display: flex !important; } /* * LISTA * * Badges Off no afecta al Favorito. */ body.codec-view-list.codec-badges-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-god-marker { display: none !important; } /* * INTERRUPTORES BLOQUEADOS */ .codec-card-element-toggle.is-locked, .codec-card-element-toggle:disabled { cursor: default !important; } .codec-card-element-toggle.is-locked .codec-card-element-toggle-track, .codec-card-element-toggle:disabled .codec-card-element-toggle-track { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05) !important; } /* * Cards diminutas: * Badges y Nombre permanecen forzosamente ocultos. */ body.codec-view-tiny :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-card-badges .codec-card-badge, body.codec-view-tiny :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-game-card-title, body.codec-view-tiny :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .elementor-heading-title { display: none !important; } /* * Lista: Nombre siempre visible aunque exista un parámetro antiguo * codec_name=hide en la URL. */ /* * En Lista el nombre se fuerza siempre visible. * JavaScript elimina además cualquier display:none inline heredado. */ body.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-game-card-title, body.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .elementor-heading-title { display: block !important; } /* * Los interruptores bloqueados por pestaña quedan claramente * desactivados y no reciben estilos de hover. */ .codec-card-element-toggle.is-locked, .codec-card-element-toggle:disabled { pointer-events: none !important; opacity: 0.42 !important; } .codec-card-element-toggle.is-locked .codec-card-element-toggle-track, .codec-card-element-toggle:disabled .codec-card-element-toggle-track { background: #D8DDE4 !important; } .codec-card-element-toggle.is-locked .codec-card-element-toggle-state, .codec-card-element-toggle:disabled .codec-card-element-toggle-state { color: #8A94A3 !important; } /* * Badge de la taxonomía serie_tipo. * Se muestra en todas las vistas de cards y en Lista. */ #codec-series-loop .codec-card-badge-series-type { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 24px !important; padding: var(--codec-space-1) var(--codec-space-4) !important; border: 1px solid #C9B8EE !important; border-radius: var(--codec-radius-pill) !important; background: #F7F2FF !important; color: #7251B5 !important; opacity: 1 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-shadow: none !important; box-shadow: var(--codec-shadow-popover-strong) !important; } /* * Mantiene la regla global: * en Cards diminutas, Badges queda bloqueado en Off. */ body.codec-view-tiny #codec-series-loop .codec-card-badge-series-type { display: none !important; } /* * Colores específicos para reconocer rápidamente cada tipo de serie. */ /* Dibujos — amarillo */ #codec-series-loop .codec-card-badge-series-type.codec-series-type-dibujos { border-color: #E8C35A !important; background: #FFF7D6 !important; color: #8A6500 !important; } /* Serie / Series — verde */ #codec-series-loop .codec-card-badge-series-type.codec-series-type-serie, #codec-series-loop .codec-card-badge-series-type.codec-series-type-series { border-color: #8CCB9A !important; background: #EAF8EE !important; color: #26733A !important; } /* Documental / Doc — azul */ #codec-series-loop .codec-card-badge-series-type.codec-series-type-documental, #codec-series-loop .codec-card-badge-series-type.codec-series-type-doc { border-color: #8EB8E8 !important; background: #EDF5FF !important; color: #2C65A8 !important; } /* Española — rojo */ #codec-series-loop .codec-card-badge-series-type.codec-series-type-espanola { border-color: #E59A9A !important; background: #FFF0F0 !important; color: #B83232 !important; } .codec-detail-header { width: 100%; margin: 0; border-bottom: 1px solid #E6DDD7; background: #FFF9F5; box-sizing: border-box; } .codec-detail-header-inner { display: flex; align-items: center; gap:var(--codec-space-4); min-width: 0; padding: var(--codec-space-9) var(--codec-space-12); box-sizing: border-box; color: #7C8493; font-size: 15px; font-weight: 700; line-height: 1.25; } .codec-detail-header-link { flex: 0 0 auto; color: #7C8493; text-decoration: none !important; transition: color 0.16s ease, opacity 0.16s ease; } .codec-detail-header-link:hover, .codec-detail-header-link:focus-visible { color: var(--codec-color-accent-orange); outline: none; } .codec-detail-header-section { color: #7C8493; } .codec-detail-header-separator { flex: 0 0 auto; color: #B5BBC5; font-size: 19px; font-weight: 500; line-height: 1; } .codec-detail-header-current { min-width: 0; overflow: hidden; color: #7C8493; white-space: nowrap; text-overflow: ellipsis; } @media (max-width:1024px) { .codec-detail-header-inner { gap: 7px; padding: 15px var(--codec-space-8); font-size: 13px; } .codec-detail-header-separator { font-size: 16px; } } .codec-detail-hero { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); align-items: start; gap: 38px; width: 100%; padding: var(--codec-space-11) var(--codec-space-12) 34px; box-sizing: border-box; } .codec-detail-hero-left, .codec-detail-hero-right { min-width: 0; } .codec-detail-hero-left { display: flex; flex-direction: column; gap:var(--codec-space-4); } .codec-detail-cover.is-vertical { aspect-ratio: 2 / 3; } .codec-detail-cover.is-horizontal-fallback { aspect-ratio: 16 / 10; } .codec-detail-cover-image { display: block; width: 100%; height: 100%; object-fit: cover; } .codec-detail-edit { display: inline-flex; align-items: center; justify-content: center; gap:var(--codec-space-3); min-height: 38px; padding: 7px var(--codec-space-6); border: 1px solid #E4DFDC; border-radius: 9px; background: var(--codec-color-surface); color: #596171; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none !important; box-shadow: 0 1px 4px rgba(35, 40, 50, 0.05); transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease; } .codec-detail-edit:hover, .codec-detail-edit:focus-visible { border-color: #FFC9B1; background: #FFF7F2; color: #FF6425; outline: none; } .codec-detail-hero-right { display: flex; flex-direction: column; gap:var(--codec-space-7); padding-top: 3px; } .codec-detail-title { max-width: 1100px; margin: 0; color: var(--codec-color-heading); font-size: var(--codec-type-display-size); font-weight: var(--codec-type-display-weight); line-height: var(--codec-type-display-leading); letter-spacing: var(--codec-type-display-tracking); } .codec-detail-badges { display: flex; flex-flow: row wrap; align-items: center; gap:var(--codec-space-3); } .codec-detail-badge { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 15px; border: 1px solid #E0E2E6; border-radius: var(--codec-radius-pill); background: #F6F7F8; color: #626978; font-size: 14px; font-weight: 750; line-height: 1; white-space: nowrap; box-shadow: 0 1px 4px rgba(35, 40, 50, 0.04); } .codec-detail-badge-symbol { font-size: 15px; line-height: 1; } .codec-detail-badge-status { border-color: #C7E9CD; background: #F0FAF2; color: #3E914B; } .codec-detail-badge-score { border-color: #FFD4BF; background: #FFF4EE; color: #F26427; } .codec-detail-badge-favorite { border-color: #F2D889; background: #FFF9E8; color: #C88908; } .codec-detail-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; margin-top: var(--codec-space-2); padding: 9px 22px; border: 1px solid #E4E1DF; border-radius: 13px; background: var(--codec-color-surface); box-shadow: 0 2px 9px rgba(35, 40, 50, 0.045); } .codec-detail-data-row { display: grid; grid-template-columns: 24px minmax(105px, 0.72fr) minmax(0, 1fr); align-items: center; gap:var(--codec-space-4); min-height: 47px; border-bottom: 1px solid #ECE9E7; color: #596171; font-size: 14px; } .codec-detail-data-icon { display: inline-flex; align-items: center; justify-content: center; color: #4D5462; } .codec-detail-data-icon svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .codec-detail-data-label { min-width: 0; color: #6C7381; font-weight: 700; } .codec-detail-data-value { min-width: 0; overflow-wrap: anywhere; color: #454B57; font-weight: 500; } @media (max-width:1050px) { .codec-detail-hero { grid-template-columns: minmax(220px, 285px) minmax(0, 1fr); gap:var(--codec-space-11); } .codec-detail-data { grid-template-columns: 1fr; } } @media (max-width:1024px) { .codec-detail-hero { grid-template-columns: 1fr; gap:var(--codec-space-10); padding: 22px var(--codec-space-8) var(--codec-space-12); } .codec-detail-hero-left { width: min(100%, 380px); margin-inline: auto; } .codec-detail-title { font-size: clamp(30px, 9vw, 42px); } .codec-detail-badge { min-height: 33px; padding: var(--codec-space-2) var(--codec-space-5); font-size: 13px; } .codec-detail-data { padding: var(--codec-space-3) 17px; } .codec-detail-data-row { grid-template-columns: 22px minmax(95px, 0.7fr) minmax(0, 1fr); gap:var(--codec-space-3); min-height: 45px; font-size: 13px; } } /* * La portada mantiene siempre el formato vertical de las cards. * Si solo existe imagen destacada horizontal, se recorta con object-fit. */ .codec-detail-cover.is-horizontal-fallback .codec-detail-cover-image { object-fit: cover !important; object-position: center center !important; } .codec-detail-cover { position: relative; overflow: hidden; width: 100%; border-radius: var(--codec-radius-xl); transform: translateZ(0); transition: transform 0.18s ease, box-shadow 0.18s ease; } .codec-detail-cover:hover { transform: translateY(-2px); } .codec-detail-cover, .codec-detail-cover.is-vertical, .codec-detail-cover.is-horizontal-fallback { aspect-ratio: 2 / 3 !important; } .codec-detail-cover .codec-card-image-layer { position: absolute !important; inset: 0 !important; z-index: 0 !important; width: 100% !important; height: 100% !important; } .codec-detail-cover .codec-card-image-layer img, .codec-detail-cover .codec-card-image, .codec-detail-cover .codec-detail-cover-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border-radius: inherit !important; } .codec-detail-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0); pointer-events: none; transition: background 0.18s ease; } .codec-detail-cover:hover::before { background: rgba(0, 0, 0, 0.20); } /* * Portada: * elimina las líneas desiguales que aparecían en los bordes. */ .codec-detail-cover { border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: 0 4px 15px rgba(25, 30, 38, 0.24) !important; } .codec-detail-cover:hover { box-shadow: 0 7px 20px rgba(25, 30, 38, 0.32) !important; } .codec-detail-cover .codec-card-image-layer, .codec-detail-cover .codec-card-image-layer img, .codec-detail-cover .codec-card-image, .codec-detail-cover .codec-detail-cover-image { border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } /* * Panel de estadísticas inspirado en la referencia: * etiqueta pequeña arriba y valor destacado debajo. */ .codec-detail-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--codec-space-2); overflow: hidden; border: 1px solid #E7E3E0; border-radius: 13px; background: var(--codec-color-surface); box-shadow: 0 2px 9px rgba(35, 40, 50, 0.045); } .codec-detail-stat { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 82px; padding: var(--codec-space-7) var(--codec-space-8); box-sizing: border-box; } .codec-detail-stat:not(:last-child)::after { content: ""; position: absolute; top: 16px; right: 0; bottom: 16px; width: 1px; background: var(--codec-color-line-soft); } .codec-detail-stat-label { display: block; margin-bottom: 7px; color: #8A909C; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; } .codec-detail-stat-value { display: block; min-width: 0; overflow-wrap: anywhere; color: #3D424D; font-size: 16px; font-weight: 800; line-height: 1.2; } @media (max-width:1250px) { .codec-detail-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .codec-detail-stat:nth-child(3n)::after { display: none; } .codec-detail-stat:nth-child(-n + 3) { border-bottom: 1px solid var(--codec-color-line-soft); } } @media (max-width:1024px) { .codec-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .codec-detail-stat { min-height: 75px; padding: var(--codec-space-6) 15px; } .codec-detail-stat:nth-child(3n)::after { display: block; } .codec-detail-stat:nth-child(2n)::after { display: none; } .codec-detail-stat:nth-child(-n + 4) { border-bottom: 1px solid var(--codec-color-line-soft); } .codec-detail-stat:nth-child(5), .codec-detail-stat:nth-child(6) { border-bottom: 0; } .codec-detail-stat-value { font-size: 15px; } } /* * Panel inferior de contenido del Game. * Una única pestaña activa, preparada para ampliar más adelante. */ .codec-detail-content-panel { margin-top: var(--codec-space-1); overflow: hidden; border: 1px solid #E7E3E0; border-radius: 13px; background: var(--codec-color-surface); box-shadow: 0 2px 9px rgba(35, 40, 50, 0.045); } .codec-detail-content-tabs { display: flex; align-items: flex-end; min-height: 52px; padding: 0 var(--codec-space-7); border-bottom: 1px solid var(--codec-color-line-soft); background: linear-gradient( 180deg, var(--codec-color-surface) 0%, #FDFCFC 100% ); } .codec-detail-content-tab { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 17px; color: #697180; font-size: 13px; font-weight: 750; line-height: 1; } .codec-detail-content-tab.is-active { color: #FF6425; } .codec-detail-content-tab.is-active::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; border-radius: var(--codec-radius-pill) 999px 0 0; background: var(--codec-color-accent-orange); } .codec-detail-content-tab-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-size: 16px; line-height: 1; } .codec-detail-content-body { padding: var(--codec-space-10) 26px 26px; color: #4E5562; font-size: 15px; line-height: 1.72; } .codec-detail-content-body > :first-child { margin-top: 0; } .codec-detail-content-body > :last-child { margin-bottom: 0; } .codec-detail-content-body p { margin: 0 0 1em; } .codec-detail-content-body h2, .codec-detail-content-body h3, .codec-detail-content-body h4 { margin: 1.35em 0 0.55em; color: var(--codec-color-heading); font-weight: 800; line-height: 1.2; } .codec-detail-content-body h2 { font-size: 24px; } .codec-detail-content-body h3 { font-size: 20px; } .codec-detail-content-body h4 { font-size: 17px; } .codec-detail-content-body ul, .codec-detail-content-body ol { margin: 0 0 1em 1.3em; padding: 0; } .codec-detail-content-body a { color: #F06429; font-weight: 700; text-decoration: none; } .codec-detail-content-body a:hover, .codec-detail-content-body a:focus-visible { color: #D94E15; text-decoration: underline; outline: none; } .codec-detail-content-body img { max-width: 100%; height: auto; border-radius: var(--codec-radius-md); } .codec-detail-content-empty { color: #A1A7B0; font-weight: 700; } @media (max-width:1024px) { .codec-detail-content-tabs { min-height: 48px; padding-inline: 10px; } .codec-detail-content-tab { min-height: 48px; padding-inline: 13px; } .codec-detail-content-body { padding: 19px var(--codec-space-8) 21px; font-size: 14px; } } /* Sin portada no reservamos la columna izquierda. */ .codec-detail-hero.has-no-cover { grid-template-columns: minmax(0, 1fr) !important; } .codec-detail-hero.has-no-cover .codec-detail-hero-right { width: 100%; } /* * Estado activo del enlace Games de la barra lateral en fichas Single. * JavaScript añade esta clase únicamente al enlace lateral, no al breadcrumb. */ .codec-sidebar-game-active { border-radius: var(--codec-radius-md) !important; background: #FBE4D5 !important; color: #F15D28 !important; } .codec-sidebar-game-active, .codec-sidebar-game-active * { color: #F15D28 !important; } /* Activación genérica de la sección lateral. */ .codec-sidebar-detail-active { border-radius: var(--codec-radius-md) !important; background: #FBE4D5 !important; color: #F15D28 !important; } .codec-sidebar-detail-active, .codec-sidebar-detail-active * { color: #F15D28 !important; } /* El número de estadísticas se adapta a cada CPT. */ .codec-detail-badge-country { border-color: #A9C8F3; background: #F2F7FF; color: #3469AE; } .codec-detail-badge-player, .codec-detail-badge-series-type { border-color: #D9C8F1; background: #F8F3FF; color: #7251B5; } .codec-detail-badge-pieces, .codec-detail-badge-series-type.codec-series-type-dibujos { border-color: #E8C35A; background: #FFF7D6; color: #8A6500; } .codec-detail-badge-series-type.codec-series-type-serie, .codec-detail-badge-series-type.codec-series-type-series { border-color: #8CCB9A; background: #EAF8EE; color: #26733A; } .codec-detail-badge-series-type.codec-series-type-documental, .codec-detail-badge-series-type.codec-series-type-doc { border-color: #8EB8E8; background: #EDF5FF; color: #2C65A8; } .codec-detail-badge-series-type.codec-series-type-espanola { border-color: #E59A9A; background: #FFF0F0; color: #B83232; } .codec-sidebar-detail-item-active { border-radius: var(--codec-radius-md) !important; background: #FBE4D5 !important; } .codec-sidebar-detail-item-active > a, .codec-sidebar-detail-item-active a, .codec-sidebar-detail-active, .codec-sidebar-game-active { display: flex !important; width: 100% !important; border-radius: var(--codec-radius-md) !important; background: #FBE4D5 !important; color: #F15D28 !important; box-sizing: border-box !important; } .codec-sidebar-detail-item-active *, .codec-sidebar-detail-active *, .codec-sidebar-game-active * { color: #F15D28 !important; } /* * Las fichas Single reutilizan exactamente el sistema de los listados: * * body:has(.marcador-games) a.nav-games * body:has(.marcador-anime) a.nav-anime * etc. * * El marcador no ocupa espacio ni es visible. */ .codec-detail-sidebar-marker { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Columnas nuevas en administración. */ .post-type-game .column-taxonomy-game_genre { width: 160px; } .post-type-game .column-ano_lanzamiento { width: 115px; } /* * Ficha Game: * ocho datos en una fila cuando hay espacio, * cuatro por fila en escritorio medio y dos en móvil. */ .codec-detail-stats.codec-detail-stats-count-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } @media (max-width:1550px) and (min-width:768px) { .codec-detail-stats.codec-detail-stats-count-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .codec-detail-stats-count-8 .codec-detail-stat::after { display: block; } .codec-detail-stats-count-8 .codec-detail-stat:nth-child(4n)::after { display: none; } .codec-detail-stats-count-8 .codec-detail-stat:nth-child(-n + 4) { border-bottom: 1px solid var(--codec-color-line-soft); } .codec-detail-stats-count-8 .codec-detail-stat:nth-child(n + 5) { border-bottom: 0; } } @media (max-width:1024px) { .codec-detail-stats.codec-detail-stats-count-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .codec-detail-stats-count-8 .codec-detail-stat::after { display: block; } .codec-detail-stats-count-8 .codec-detail-stat:nth-child(2n)::after { display: none; } .codec-detail-stats-count-8 .codec-detail-stat:nth-child(-n + 6) { border-bottom: 1px solid var(--codec-color-line-soft); } .codec-detail-stats-count-8 .codec-detail-stat:nth-child(7), .codec-detail-stats-count-8 .codec-detail-stat:nth-child(8) { border-bottom: 0; } } .post-type-anime .column-taxonomy-anime_genre, .post-type-serie .column-taxonomy-serie_genre, .post-type-book .column-taxonomy-book_genre { width: 150px; } .post-type-anime .column-ano_lanzamiento, .post-type-serie .column-ano_lanzamiento, .post-type-book .column-ano_lanzamiento { width: 112px; } .post-type-anime .column-episodios, .post-type-serie .column-episodios { width: 82px; } .post-type-movie .column-taxonomy-movie_genre { width: 160px; } .post-type-anime .column-ano_lanzamiento, .post-type-serie .column-ano_lanzamiento, .post-type-movie .column-ano_lanzamiento, .post-type-book .column-ano_lanzamiento { width: 115px; } /* * Anime, Series, Books y Pelis reutilizan las tablas adaptables * ya definidas para 6, 7 y 8 estadísticas. * * Los listados ordenados por "Fecha terminado" usan el año de * lanzamiento como respaldo cuando la fecha personal está vacía. */ /* * Orden cronológico definitivo: * fecha_terminado > año de lanzamiento > sin fecha. * * Las fechas anteriores a 1970 se comparan como YYYYMMDD, * nunca como timestamps Unix negativos. */ /* ===================================================== CODEC — GAME DETAIL HORIZONTAL ART Imagen panorámica visible, con espacio superior, fundido izquierdo y fundido inferior. ===================================================== */ .codec-detail-hero-right { position: relative; isolation: isolate; } /* * Cuando existe imagen horizontal, bajamos el contenido * para dejar una franja panorámica visible en la parte superior. */ .codec-detail-hero-right.has-horizontal-art { padding-top: 95px; } /* Imagen y capa de degradados */ .codec-detail-hero-right.has-horizontal-art::before, .codec-detail-hero-right.has-horizontal-art::after { content: ""; position: absolute; top: -28px; right: -28px; left: -28px; height: 525px; pointer-events: none; } /* Imagen horizontal */ .codec-detail-hero-right.has-horizontal-art::before { z-index: -2; background-image: var(--codec-game-horizontal-image); background-repeat: no-repeat; background-size: cover; background-position: center center; /* Más alto = imagen más visible */ opacity: 0.90; filter: saturate(0.96) contrast(0.98) brightness(1.01); } /* * Dos fundidos: * 1. Blanco hacia la izquierda para mantener legible el título. * 2. Blanco hacia abajo para unir la imagen con el fondo. */ .codec-detail-hero-right.has-horizontal-art::after { z-index: -1; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 10%, rgba(255, 255, 255, 0.62) 22%, rgba(255, 255, 255, 0.28) 38%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0.00) 66% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 48%, rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0.32) 73%, rgba(255, 255, 255, 0.72) 87%, rgba(255, 255, 255, 1.00) 100% ); } /* Contenido siempre por encima de la imagen */ .codec-detail-hero-right.has-horizontal-art .codec-detail-title, .codec-detail-hero-right.has-horizontal-art .codec-detail-badges, .codec-detail-hero-right.has-horizontal-art .codec-detail-stats, .codec-detail-hero-right.has-horizontal-art .codec-detail-content-panel{ position: relative; z-index: 1; } /* ===================================================== TABLET ===================================================== */ /* ===================================================== MÓVIL ===================================================== */ @media (max-width:1024px) { .codec-detail-hero-right.has-horizontal-art { padding-top: 48px; } .codec-detail-hero-right.has-horizontal-art::before, .codec-detail-hero-right.has-horizontal-art::after { top: -14px; right: -14px; left: -14px; height: 390px; } .codec-detail-hero-right.has-horizontal-art::before { opacity: 0.64; background-position: center top; } .codec-detail-hero-right.has-horizontal-art::after { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.64) 30%, rgba(255, 255, 255, 0.24) 62%, rgba(255, 255, 255, 0.00) 100% ), linear-gradient( 180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0.34) 67%, rgba(255, 255, 255, 0.82) 88%, rgba(255, 255, 255, 1.00) 100% ); } } .codec-detail-hero-right.has-horizontal-art .codec-detail-title { position: relative; z-index: 2; display: inline-block; max-width: 100%; padding: var(--codec-space-4) var(--codec-space-8) var(--codec-space-5); margin-left: -18px; margin-top: 180px; color: #252936; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.82) 55%, rgba(255, 255, 255, 0.20) 88%, rgba(255, 255, 255, 0.00) 100% ); border-radius: 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 8px rgba(255, 255, 255, 0.55); } body.codec-badges-hidden.codec-name-hidden :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-cartoons-loop, #codec-documentaries-loop, #codec-comics-loop, :is(#codec-search-loop) ) .codec-game-card::after { display: none !important; } .codec-static-end-message { width: 100%; margin: 34px 0 var(--codec-space-10); text-align: center; font: inherit; line-height: 1.4; } .codec-static-end-message[hidden] { display: none !important; } .codec-static-end-message { color: #2f3442 !important; opacity: 1 !important; pointer-events: auto !important; user-select: text !important; -webkit-user-select: text !important; cursor: text; } html body .codec-static-end-message, html body .codec-static-end-message * { color: #2f3442 !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; pointer-events: auto !important; user-select: text !important; -webkit-user-select: text !important; cursor: text !important; } html body .codec-static-end-message { position: relative !important; z-index: 2 !important; } .codec-global-search { position: relative; width: min(360px, 100%); z-index: 1200; } .codec-global-search-form { position: relative; display: flex; align-items: center; gap:var(--codec-space-3); width: 100%; } .codec-global-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9aa1ad; pointer-events: none; font-size: 18px; line-height: 1; } .codec-global-search-input { width: 100%; min-height: 44px; padding: 9px 78px 9px 40px !important; border: 1px solid #e6ddd5 !important; border-radius: 14px !important; background: var(--codec-color-surface) !important; color: #566074 !important; box-shadow: none !important; outline: none !important; font: inherit; } .codec-global-search-input:focus { border-color: #ff8b53 !important; box-shadow: 0 0 0 3px rgba(255, 139, 83, .10) !important; } .codec-global-search-submit { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0 !important; border-radius: var(--codec-radius-md) !important; padding: 7px 11px !important; min-height: 32px; background: #fff2e9 !important; color: #ff824a !important; font-weight: 700 !important; font-size: 12px !important; cursor: pointer; } .codec-global-search-suggestions { position: absolute; top: calc(100% + 8px); right: 0; width: min(420px, 92vw); background: var(--codec-color-surface); border: 1px solid #e6ddd5; border-radius: var(--codec-radius-lg); box-shadow: 0 18px 50px rgba(47, 54, 69, .16); z-index: 99999; } .codec-global-search-suggestion { display: flex; align-items: center; gap:var(--codec-space-7); padding: 11px var(--codec-space-6); text-decoration: none !important; color: #566074 !important; border-bottom: 1px solid #f3ece7; } .codec-global-search-suggestion:hover, .codec-global-search-suggestion:focus { background: #fff5ee; } .codec-global-search-suggestion-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .codec-global-search-suggestion-type, .codec-card-badge-cpt { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: var(--codec-radius-pill); background: #fff0e6; color: #f47e45; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .02em; } .codec-global-search-all { display: block; padding: var(--codec-space-5) var(--codec-space-6); text-align: center; text-decoration: none !important; color: #f47e45 !important; font-weight: 800; background: var(--codec-color-surface-warm); } .codec-global-search-empty { padding: var(--codec-space-6); color: #98a0ae; text-align: center; } .codec-global-results-controls .codec-toolbar-left { min-height: 1px; } /* La badge de CPT es propia del buscador global y debe seguir visible aunque el usuario oculte las badges normales en las vistas de cards. */ /* En el resto de Codec la badge CPT existe en el HTML para poder agrupar, pero no se enseña visualmente. */ body:not(:has(.codec-page-context[data-codec-tracker="search"])) .codec-card-badge-cpt { display: none !important; } /* Cabeceras de agrupación Tipo/CPT en los resultados globales. */ body:has(.codec-page-context[data-codec-tracker="search"]) .codec-generic-group-heading .codec-generic-group-marker { background: #ffd9c2; border-color: #ffd9c2; } @media (max-width:1024px) { .codec-global-search { width: 100%; } } .codec-search-page-title { color: #566176; font-size: inherit; font-weight: 700; line-height: 1.15; } .codec-search-page-title strong { color: inherit; font-weight: 800; } .codec-search-page-title-count { display: inline-block; margin-left: var(--codec-space-4); color: #98a1b2; font-size: 0.46em; font-weight: 700; vertical-align: middle; } /* En búsqueda la badge de CPT es parte de la información global. */ body:has(.codec-page-context[data-codec-tracker="search"]) #codec-search-loop .codec-card-badge-cpt { display: inline-flex !important; } .codec-global-search-suggestions { overflow: visible; } .codec-global-search-filterbox { position: relative; padding: 9px var(--codec-space-5); border-bottom: 1px solid #f0e7df; background: #fffdfb; border-radius: 16px 16px 0 0; } .codec-global-search-filterbar { display: flex; align-items: center; gap:var(--codec-space-4); flex-wrap: wrap; } .codec-global-search-filter-trigger { display: inline-flex; align-items: center; border: 0; border-radius: var(--codec-radius-md); background: transparent; color: #626c7d; font: inherit; font-weight: 800; cursor: pointer; } .codec-global-search-filter-trigger:hover, .codec-global-search-filter-trigger.is-open, .codec-global-search-filter-trigger.has-filter { background: var(--codec-color-surface-accent-soft); color: #f47e45; } .codec-global-search-filter-count { color: #a4acb9; font-weight: 800; } .codec-global-search-filter-trigger.is-open .codec-global-search-filter-count, .codec-global-search-filter-trigger.has-filter .codec-global-search-filter-count { color: #f19a71; } .codec-global-search-filter-arrow { display: inline-block; line-height: 1; transition: transform .15s ease; } .codec-global-search-filter-trigger.is-open .codec-global-search-filter-arrow { transform: rotate(180deg); } .codec-global-search-content-panel[hidden] { display: none !important; } .codec-global-search-content-actions { display: flex; } .codec-global-search-content-action { border: 1px solid #eee4dc; background: var(--codec-color-surface-warm); color: #7b8494; font: inherit; font-weight: 800; cursor: pointer; } .codec-global-search-content-action:hover { border-color: #ffd4bd; background: var(--codec-color-surface-accent-soft); color: #f47e45; } .codec-global-search-cpt-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .codec-global-search-chip { position: relative; display: flex; cursor: pointer; user-select: none; } .codec-global-search-chip input { position: absolute; opacity: 0; pointer-events: none; } .codec-global-search-chip span { display: flex; align-items: center; justify-content: center; width: 100%; border: 1px solid #e7e0da; background: var(--codec-color-surface); color: #7c8595; line-height: 1; font-weight: 750; transition: background .15s ease, color .15s ease, border-color .15s ease; } .codec-global-search-chip input:checked + span { border-color: #ffd8c2; background: var(--codec-color-surface-accent-soft); color: #f47e45; } .codec-global-search-chip input:focus-visible + span { outline: 2px solid #ff9a68; outline-offset: 2px; } .codec-global-search-suggestions-list { max-height: min(540px, 66vh); overflow-y: auto; border-radius: 0 0 16px 16px; background: var(--codec-color-surface); } @media (max-width:1024px) { .codec-global-search-cpt-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .codec-global-search-filter-trigger { min-height: 38px; padding: var(--codec-space-3) var(--codec-space-5); gap:var(--codec-space-3); font-size: 13px; } .codec-global-search-filter-count { font-size: 12px; } .codec-global-search-filter-arrow { font-size: 14px; } /* El desplegable deja de ser una capa flotante: se abre como acordeón dentro del propio bloque del buscador y desplaza las sugerencias hacia abajo. */ .codec-global-search-content-panel { position: relative; z-index: auto; top: auto; left: auto; width: 100%; margin-top: var(--codec-space-4); padding: var(--codec-space-5) 0 2px; border: 0; border-top: 1px solid #f0e7df; border-radius: 0; background: transparent; box-shadow: none; } .codec-global-search-content-actions { gap: 9px; margin-bottom: var(--codec-space-5); } .codec-global-search-content-action { padding: 7px 11px; border-radius: var(--codec-radius-md); font-size: 12px; } .codec-global-search-cpt-options { gap: 9px; } .codec-global-search-chip span { min-height: 36px; padding: 7px var(--codec-space-4); border-radius: var(--codec-radius-md); font-size: 12px; } @media (max-width:1024px) { .codec-global-search-content-panel { left: auto; width: 100%; } } .codec-global-search--results .codec-global-search-suggestions { inset: auto; margin-top: var(--codec-space-5); } .codec-global-search--results .codec-global-search-content-panel { display: block !important; margin-top: var(--codec-space-6); padding-top: var(--codec-space-6); } .codec-global-search--results .codec-global-search-content-action, .codec-global-search--results .codec-global-search-chip span{ font-size: 14px; } .codec-global-search--results .codec-global-search-suggestions-list:not(:empty) { border-top: 1px solid #f0e7df; } @media (max-width:1024px) { .codec-global-search--results { width: 100%; margin: var(--codec-space-6) auto var(--codec-space-9); } .codec-global-search--results .codec-global-search-input { font-size: 17px; } .codec-global-search--results .codec-global-search-cpt-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* El shortcode compacto puede permanecer en el mismo widget de Elementor: se alinea a la derecha sin necesidad de cambiar la estructura de la página. */ .codec-global-search--compact { margin-left: auto; margin-right: 0; } /* En /buscar/ el buscador deja de ser una tarjeta grande. Se comporta como una barra de herramientas: filtros a la izquierda y búsqueda a la derecha. */ .codec-global-search--results { width: 100%; min-height: 48px; margin: 0; z-index: 1250; } .codec-global-search--results .codec-global-search-form { width: min(520px, 46%); min-height: 44px; margin-left: auto; border-radius: 14px; box-shadow: none; } .codec-global-search--results .codec-global-search-icon { font-size: 18px; } .codec-global-search--results .codec-global-search-input { min-height: 44px; font-size: 15px; } .codec-global-search--results .codec-global-search-submit { min-height: 32px; padding: 7px var(--codec-space-5) !important; border-radius: var(--codec-radius-md); font-size: 12px; } /* El wrapper queda siempre disponible para alojar el filtro de Contenido, pero ya no dibuja una caja alrededor de todo. */ .codec-global-search--results .codec-global-search-suggestions { position: static; width: auto; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .codec-global-search--results .codec-global-search-filterbox { top: 0; left: 0; display: block; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; } .codec-global-search--results .codec-global-search-filterbar { justify-content: flex-start; gap:var(--codec-space-5); flex-wrap: nowrap; } .codec-global-search--results .codec-global-search-filter-trigger { min-height: 44px; padding: var(--codec-space-3) 13px; border-radius: var(--codec-radius-card); font-size: 14px; } .codec-global-search--results .codec-global-search-filter-count { font-size: 12px; } /* Contenido vuelve a ser un dropdown, como Plataforma en Games. */ .codec-global-search--results .codec-global-search-content-panel { position: absolute; z-index: 9999; top: calc(100% + 8px); left: 0; width: min(720px, calc(100vw - 300px)); min-width: 560px; margin: 0; padding: var(--codec-space-6); border: 1px solid #eadfd6; border-radius: 15px; background: var(--codec-color-surface); box-shadow: 0 16px 38px rgba(56, 48, 42, .15); } .codec-global-search--results .codec-global-search-content-panel[hidden] { display: none !important; } .codec-global-search--results .codec-global-search-content-action { font-size: 12px; } .codec-global-search--results .codec-global-search-chip span { min-height: 36px; font-size: 12px; } /* Las sugerencias de /buscar/ se despliegan debajo del campo de búsqueda, sin tapar ni convertir los filtros en una tarjeta permanente. */ .codec-global-search--results .codec-global-search-suggestions-list:not(:empty) { position: absolute; z-index: 9998; top: calc(100% + 8px); right: 0; width: min(520px, 92vw); max-height: min(540px, 66vh); overflow-y: auto; border: 1px solid #e6ddd5; border-radius: var(--codec-radius-lg); background: var(--codec-color-surface); box-shadow: 0 18px 50px rgba(47, 54, 69, .16); } .codec-global-search--results .codec-global-search-suggestions-list:empty { display: none; } @media (max-width:900px) { .codec-global-search--results { display: flex; flex-direction: column; gap:var(--codec-space-4); } .codec-global-search--results .codec-global-search-form { width: 100%; margin-left: 0; } .codec-global-search--results .codec-global-search-filterbox { position: relative; order: 2; } .codec-global-search--results .codec-global-search-content-panel { width: min(680px, calc(100vw - 30px)); min-width: 0; } } /* El buscador de /buscar/ forma parte de la misma barra sticky que Agrupar / Ordenar / Vista, igual que el buscador local de los CPT. */ .codec-global-results-controls .codec-global-results-search-slot { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .codec-global-results-controls .codec-global-search--results { position: relative; z-index: 1260; width: 100%; min-width: 0; min-height: 42px; margin: 0; display: flex; align-items: center; gap:var(--codec-space-6); } /* Reordenamos visualmente: Contenido + Backlog a la izquierda, campo de búsqueda a la derecha, justo antes de Agrupar. */ .codec-global-results-controls .codec-global-search--results .codec-global-search-suggestions { order: 1; flex: 0 0 auto; position: static; width: auto; margin: 0; overflow: visible; } .codec-global-results-controls .codec-global-search--results .codec-global-search-filterbox { position: relative; inset: auto; width: auto; display: block; } .codec-global-results-controls .codec-global-search--results .codec-global-search-filterbar { display: flex; align-items: center; gap:var(--codec-space-5); flex-wrap: nowrap; } .codec-global-results-controls .codec-global-search--results .codec-global-search-form { order: 2; flex: 0 1 410px; width: min(410px, 36vw); min-width: 250px; min-height: 38px; margin: 0 0 0 auto; } .codec-global-results-controls .codec-global-search--results .codec-global-search-input { min-height: 38px; } .codec-global-results-controls .codec-global-search--results .codec-global-search-submit { min-height: 30px; } /* Dropdown de Contenido: cuelga de su control, como Plataforma en Games. */ .codec-global-results-controls .codec-global-search--results .codec-global-search-content-panel { position: absolute; z-index: 10020; top: calc(100% + 9px); left: 0; width: min(720px, calc(100vw - 300px)); min-width: 560px; margin: 0; } /* Las sugerencias cuelgan del extremo derecho del bloque de búsqueda. */ .codec-global-results-controls .codec-global-search--results .codec-global-search-suggestions-list:not(:empty) { position: absolute; z-index: 10010; top: calc(100% + 9px); width: min(520px, 92vw); max-height: min(540px, 66vh); overflow-y: auto; } /* La barra de resultados queda compacta como las demás barras de Codec. */ .codec-global-results-controls { align-items: center; } .codec-global-results-controls .codec-toolbar-right { flex: 0 0 auto; } @media (max-width:1100px) { .codec-global-results-controls .codec-global-search--results .codec-global-search-form { flex-basis: 330px; width: min(330px, 34vw); min-width: 220px; } .codec-global-results-controls .codec-global-search--results .codec-global-search-filterbar { gap:var(--codec-space-3); } } @media (max-width:900px) { .codec-global-results-controls { align-items: stretch; } .codec-global-results-controls .codec-global-results-search-slot { width: 100%; } .codec-global-results-controls .codec-global-search--results { flex-wrap: wrap; gap:var(--codec-space-3); } .codec-global-results-controls .codec-global-search--results .codec-global-search-suggestions { width: 100%; } .codec-global-results-controls .codec-global-search--results .codec-global-search-form { width: 100%; min-width: 0; flex: 1 1 100%; } .codec-global-results-controls .codec-global-search--results .codec-global-search-content-panel { width: min(680px, calc(100vw - 30px)); min-width: 0; } } /* /buscar/: búsqueda inmediatamente después de Contenido + Backlog. Quitamos el auto-margin que la enviaba al extremo derecho de la toolbar. */ .codec-global-results-controls .codec-global-search--results .codec-global-search-form { margin-left: 0; margin-right: auto; } /* Las sugerencias del buscador de resultados nacen debajo del propio campo, no desde el borde derecho completo de la toolbar. */ .codec-global-results-controls .codec-global-search--results .codec-global-search-suggestions-list:not(:empty) { left: auto; } /* Páginas normales: el shortcode puede seguir estando debajo del título en Elementor, pero visualmente lo elevamos a la misma línea del H1 y lo mantenemos a la derecha. No hace falta cambiar la estructura. */ .elementor-widget-html:has(.codec-global-search--compact), .elementor-widget-shortcode:has(.codec-global-search--compact) { position: relative; z-index: 1210; pointer-events: none; } .elementor-widget-html:has(.codec-global-search--compact) .codec-global-search--compact, .elementor-widget-shortcode:has(.codec-global-search--compact) .codec-global-search--compact { margin-left: auto; margin-right: 0; pointer-events: auto; } /* Fallback por si el widget de Elementor no expone :has() como esperábamos: el propio componente también se desplaza hacia arriba. */ @supports not selector(:has(*)) { .codec-global-search--compact { transform: translateY(-52px); margin-bottom: -44px; } } @media (max-width:900px) { /* En pantallas estrechas recuperamos una fila propia para evitar colisiones con títulos largos. */ .elementor-widget-html:has(.codec-global-search--compact), .elementor-widget-shortcode:has(.codec-global-search--compact) { pointer-events: auto; } .codec-global-search--compact { transform: none; } .codec-global-results-controls .codec-global-search--results .codec-global-search-form { margin-right: 0; } } .codec-global-search--results.is-refreshing-results { cursor: progress; } .codec-global-search--results.is-refreshing-results .codec-global-search-filter-trigger{ pointer-events: none; } /* Páginas normales: centro vertical del buscador alineado con el H1. */ .elementor-widget-html:has(.codec-global-search--compact), .elementor-widget-shortcode:has(.codec-global-search--compact) { margin-top: -38px !important; margin-bottom: -6px !important; } /* Backlog se comporta como un filtro desplegable, no como un toggle. */ .codec-global-search-backlog-dropdown { position: relative; flex: 0 0 auto; } .codec-global-search-backlog-trigger { font: inherit; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; } .codec-global-search-backlog-trigger:hover, .codec-global-search-backlog-trigger.is-open { background: #fff3ea; color: #fa7c43; } .codec-global-search-backlog-trigger.is-open .codec-global-search-backlog-value { color: #fa7c43; } .codec-global-search-backlog-menu { position: absolute; z-index: 10025; top: calc(100% + 9px); left: 0; border: 1px solid #e6ddd5; border-radius: 14px; background: var(--codec-color-surface); box-shadow: 0 16px 42px rgba(47, 54, 69, .15); } .codec-global-search-backlog-option { width: 100%; padding: var(--codec-space-4) var(--codec-space-5); border: 0; border-radius: var(--codec-radius-md); background: transparent; color: #687286; font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .codec-global-search-backlog-option:hover, .codec-global-search-backlog-option.is-active { color: #fa7c43; background: #fff1e7; } /* Las viejas reglas del toggle no deben reservar espacio. */ .codec-global-search--results .codec-global-search-backlog-dropdown, .codec-global-search--compact .codec-global-search-backlog-dropdown { display: block; } @media (max-width:900px) { .elementor-widget-html:has(.codec-global-search--compact), .elementor-widget-shortcode:has(.codec-global-search--compact) { margin-top: 0 !important; margin-bottom: var(--codec-space-3) !important; } } /* El trigger muestra directamente el estado, sin repetir "Backlog + valor". */ .codec-global-search-backlog-value { color: inherit; font-weight: 700; } .codec-global-search-backlog-trigger.is-open .codec-global-search-backlog-value, .codec-global-search-backlog-trigger:hover .codec-global-search-backlog-value { color: inherit; } .codec-global-search-backlog-menu { min-width: 230px; padding: var(--codec-space-4) var(--codec-space-5); } .codec-global-search-backlog-control-row { display: flex; align-items: center; justify-content: space-between; gap:var(--codec-space-6); padding: var(--codec-space-2) var(--codec-space-1) var(--codec-space-4); } .codec-global-search-backlog-control-label { color: #687286; font-weight: 700; white-space: nowrap; } .codec-global-search-backlog-switch { border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; gap:var(--codec-space-3); color: #9aa3b3; font: inherit; font-weight: 700; cursor: pointer; } .codec-global-search-backlog-switch-ui { position: relative; display: inline-block; width: 42px; height: 24px; border-radius: var(--codec-radius-pill); background: #d8dee7; box-shadow: inset 0 0 0 1px rgba(63, 72, 90, .08); transition: background .18s ease; flex: 0 0 auto; } .codec-global-search-backlog-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--codec-color-surface); box-shadow: 0 1px 4px rgba(45, 53, 68, .18); transition: transform .18s ease; } .codec-global-search-backlog-switch.is-on { color: #fa7c43; } .codec-global-search-backlog-switch.is-on .codec-global-search-backlog-switch-ui { background: #ff8350; } .codec-global-search-backlog-switch.is-on .codec-global-search-backlog-switch-ui::after { transform: translateX(18px); } .codec-global-search-backlog-only { width: 100%; display: flex; align-items: center; gap:var(--codec-space-4); border: 0; border-top: 1px solid #eee5dd; background: transparent; padding: 11px var(--codec-space-1) 5px; color: #687286; font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .codec-global-search-backlog-only-box { width: 20px; height: 20px; border: 2px solid #cbd2dd; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 12px; line-height: 1; transition: all .16s ease; flex: 0 0 auto; } .codec-global-search-backlog-only.is-active { color: #fa7c43; } .codec-global-search-backlog-only.is-active .codec-global-search-backlog-only-box { border-color: #ff8350; background: #ff8350; color: var(--codec-color-surface); } .codec-global-search-backlog-only:disabled { opacity: .42; cursor: default; } .codec-global-search--results.is-refreshing-results .codec-global-search-backlog-switch, .codec-global-search--results.is-refreshing-results .codec-global-search-backlog-only { pointer-events: none; } /* Igualamos el trigger de Backlog al tamaño de Contenido. */ /* Evita el hover/estado rojo heredado por botones dentro del desplegable. */ .codec-global-search-backlog-switch, .codec-global-search-backlog-switch:hover, .codec-global-search-backlog-switch:focus, .codec-global-search-backlog-switch:active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .codec-global-search-backlog-switch:hover { color: #9aa3b3 !important; } .codec-global-search-backlog-switch.is-on, .codec-global-search-backlog-switch.is-on:hover, .codec-global-search-backlog-switch.is-on:focus, .codec-global-search-backlog-switch.is-on:active { color: #fa7c43 !important; background: transparent !important; background-color: transparent !important; } /* En /buscar/ el desplegable de sugerencias queda exactamente bajo el campo de búsqueda. JS calcula left/width porque el listado vive fuera del
dentro de la toolbar sticky. */ .codec-global-results-controls .codec-global-search--results .codec-global-search-suggestions-list:not(:empty) { right: auto !important; } /* El filtro Backlog usa exactamente la misma escala tipográfica y estados visuales que el filtro Contenido. Se neutralizan estilos de foco/activo heredados del tema/Elementor que podían pintar el botón en rosa. */ .codec-global-search-backlog-trigger { min-height: 38px !important; padding: var(--codec-space-3) var(--codec-space-5) !important; gap:var(--codec-space-3) !important; border: 0 !important; border-radius: var(--codec-radius-md) !important; background: transparent !important; background-color: transparent !important; color: #626c7d !important; font-family: inherit !important; font-size: 13px !important; font-style: normal !important; font-weight: 800 !important; line-height: normal !important; letter-spacing: normal !important; text-transform: none !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; } .codec-global-search-backlog-trigger:hover, .codec-global-search-backlog-trigger:focus, .codec-global-search-backlog-trigger:focus-visible, .codec-global-search-backlog-trigger:active, .codec-global-search-backlog-trigger.is-open { background: var(--codec-color-surface-accent-soft) !important; background-color: var(--codec-color-surface-accent-soft) !important; color: #f47e45 !important; box-shadow: none !important; outline: none !important; } .codec-global-search-backlog-trigger .codec-global-search-backlog-value, .codec-global-search-backlog-trigger .codec-global-search-filter-arrow { color: inherit !important; font: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* Tipografía del desplegable alineada con los menús del resto de filtros. */ .codec-global-search-backlog-menu, .codec-global-search-backlog-menu button { font-family: inherit !important; font-style: normal !important; letter-spacing: normal !important; text-transform: none !important; } .codec-global-search-backlog-control-label, .codec-global-search-backlog-switch, .codec-global-search-backlog-only { font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; } /* Evita cualquier fondo rosa/rojo de Elementor/tema en los controles internos. */ .codec-global-search-backlog-switch, .codec-global-search-backlog-switch:hover, .codec-global-search-backlog-switch:focus, .codec-global-search-backlog-switch:focus-visible, .codec-global-search-backlog-switch:active, .codec-global-search-backlog-switch.is-on, .codec-global-search-backlog-switch.is-on:hover, .codec-global-search-backlog-switch.is-on:focus, .codec-global-search-backlog-switch.is-on:active, .codec-global-search-backlog-only, .codec-global-search-backlog-only:hover, .codec-global-search-backlog-only:focus, .codec-global-search-backlog-only:focus-visible, .codec-global-search-backlog-only:active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; } .codec-global-search-backlog-switch.is-on, .codec-global-search-backlog-switch.is-on:hover { color: #f47e45 !important; } .codec-search-results-summary { display: flex; align-items: baseline; gap: 7px; width: 100%; color: #566176; font-size: 16px; font-weight: 700; line-height: 1.25; } .codec-search-results-summary-label { color: #7c8597; font-weight: 700; } .codec-search-results-summary-term { color: #566176; font-weight: 800; } .codec-search-results-summary-count { margin-left: 5px; color: #98a1b2; font-size: 13px; font-weight: 700; } @media (max-width:1024px) { .codec-search-results-summary { flex-wrap: wrap; padding: var(--codec-space-6) var(--codec-space-7) var(--codec-space-3); } } .codec-search-results-summary { justify-content: center; text-align: center; padding: var(--codec-space-8) 22px; } /* En /buscar/ eliminamos cualquier borde/separación que pueda aportar Elementor alrededor del shortcode. La barra usa únicamente la misma sombra progresiva de .codec-toolbar-sticky que Games/Anime/etc. */ body:has(.codec-page-context[data-codec-tracker="search"]) .codec-toolbar-sticky { margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 0 !important; outline: 0 !important; box-shadow: none !important; } body:has(.codec-page-context[data-codec-tracker="search"]) .codec-toolbar-sticky .codec-global-results-controls { margin: 0 !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* Neutraliza márgenes/gaps del widget de Elementor que contiene el header de búsqueda, para que el contenido pueda pasar justo por debajo del sticky. */ body:has(.codec-page-context[data-codec-tracker="search"]) .elementor-widget-html:has(.codec-page-context[data-codec-tracker="search"]), body:has(.codec-page-context[data-codec-tracker="search"]) .elementor-widget-shortcode:has(.codec-page-context[data-codec-tracker="search"]) { margin-bottom: 0 !important; padding-bottom: 0 !important; } body:has(.codec-page-context[data-codec-tracker="search"]) .elementor-widget-html:has(.codec-page-context[data-codec-tracker="search"]) > .elementor-widget-container, body:has(.codec-page-context[data-codec-tracker="search"]) .elementor-widget-shortcode:has(.codec-page-context[data-codec-tracker="search"]) > .elementor-widget-container { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } /* Reafirmamos exactamente la sombra que usa el sticky general. */ body:has(.codec-page-context[data-codec-tracker="search"]) .codec-toolbar-sticky::after { left: 0 !important; right: 0 !important; bottom: -8px !important; width: 100% !important; height: 8px !important; border: 0 !important; background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,0)) !important; } body:has(.codec-page-context[data-codec-tracker="search"]) .codec-search-results-summary { padding: var(--codec-space-4) 22px 0 !important; margin: 0 0 -10px !important; } @media (max-width:1024px) { body:has(.codec-page-context[data-codec-tracker="search"]) .codec-search-results-summary { padding: var(--codec-space-4) var(--codec-space-7) 0 !important; margin-bottom: -6px !important; } } /* Evita que Elementor/tema pinte el botón Contenido en rosa/rojo al recibir foco, active o click dentro del shortcode compacto. */ .codec-global-search--compact .codec-global-search-filter-trigger, .codec-global-search--compact .codec-global-search-filter-trigger:focus, .codec-global-search--compact .codec-global-search-filter-trigger:focus-visible, .codec-global-search--compact .codec-global-search-filter-trigger:active { background: transparent !important; background-color: transparent !important; color: #626c7d !important; box-shadow: none !important; outline: none !important; } .codec-global-search--compact .codec-global-search-filter-trigger:hover, .codec-global-search--compact .codec-global-search-filter-trigger.is-open, .codec-global-search--compact .codec-global-search-filter-trigger.has-filter, .codec-global-search--compact .codec-global-search-filter-trigger.is-open:focus, .codec-global-search--compact .codec-global-search-filter-trigger.is-open:active { background: var(--codec-color-surface-accent-soft) !important; background-color: var(--codec-color-surface-accent-soft) !important; color: #f47e45 !important; box-shadow: none !important; outline: none !important; } /* Evita que el hover global de botones pinte el texto de blanco. */ .codec-global-search-backlog-only:hover, .codec-global-search-backlog-only:focus, .codec-global-search-backlog-only:focus-visible, .codec-global-search-backlog-only:active { color: #687286 !important; } .codec-global-search-backlog-only.is-active, .codec-global-search-backlog-only.is-active:hover, .codec-global-search-backlog-only.is-active:focus, .codec-global-search-backlog-only.is-active:focus-visible, .codec-global-search-backlog-only.is-active:active { color: #f47e45 !important; } .codec-global-search-backlog-only:hover .codec-global-search-backlog-only-box, .codec-global-search-backlog-only:focus .codec-global-search-backlog-only-box, .codec-global-search-backlog-only:focus-visible .codec-global-search-backlog-only-box { border-color: #cbd2dd !important; color: transparent !important; } .codec-global-search-backlog-only.is-active:hover .codec-global-search-backlog-only-box, .codec-global-search-backlog-only.is-active:focus .codec-global-search-backlog-only-box, .codec-global-search-backlog-only.is-active:focus-visible .codec-global-search-backlog-only-box { border-color: #ff8350 !important; background: #ff8350 !important; background-color: #ff8350 !important; color: var(--codec-color-surface) !important; } .codec-global-search--compact .codec-global-search-backlog-menu { position: static !important; inset: auto !important; z-index: auto !important; display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: var(--codec-space-4) 0 0 !important; padding: var(--codec-space-5) 0 2px !important; border: 0 !important; border-top: 1px solid #f0e7df !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } .codec-global-search--compact .codec-global-search-backlog-menu[hidden] { display: none !important; } .codec-global-search--compact .codec-global-search-backlog-control-row { width: 100%; padding: var(--codec-space-2) 0 var(--codec-space-5) !important; } .codec-global-search--compact .codec-global-search-backlog-only { width: 100%; padding: var(--codec-space-5) 0 var(--codec-space-2) !important; } /* /buscar/ conserva el desplegable flotante de su toolbar. */ .codec-global-search--results .codec-global-search-filterbox { position: relative; } .codec-global-search--results .codec-global-search-backlog-menu { position: absolute; z-index: 10025; top: calc(100% + 9px); left: 112px; width: 250px; min-width: 230px; margin: 0; padding: var(--codec-space-4) var(--codec-space-5); border: 1px solid #e6ddd5; border-radius: 14px; background: var(--codec-color-surface); box-shadow: 0 16px 42px rgba(47, 54, 69, .15); } .codec-global-search--compact .codec-global-search-backlog-control-row { justify-content: center !important; gap:var(--codec-space-8) !important; text-align: center !important; } .codec-global-search--compact .codec-global-search-backlog-switch { justify-content: center !important; } .codec-global-search--compact .codec-global-search-backlog-only { justify-content: center !important; text-align: center !important; gap:var(--codec-space-5) !important; } .codec-global-search:not(.codec-global-search--results) .codec-global-search-content-actions { justify-content: center; } .codec-global-search--compact .codec-global-search-filterbar { justify-content: center !important; } .codec-global-search-suggestion-title, .codec-global-search-all { font-size: 14px; } /* ========================================================================== */ /* ========================================================================== */ /* * En escritorio/tablet la cabecera de Elementor sigue funcionando como el * sidebar vertical de siempre. * * En móvil (<= 767px) reutilizamos exactamente el mismo template: * - .sidebar-fija pasa a ser una cabecera horizontal fija. * - .menu-sidebar-ui se convierte en un panel desplegable. * - El botón hamburguesa lo inyecta js/mobile-header.js. */ .codec-mobile-menu-toggle { display: none; } @media (max-width:1024px) { /* En móvil ya no reservamos espacio lateral para el sidebar. */ body:not(.elementor-editor-active) { padding-left: 0 !important; } /* * El mismo contenedor de Elementor se convierte en cabecera. * !important neutraliza los valores desktop configurados en Elementor * (200px, 100vh y dirección vertical) sin obligar a duplicar templates. */ body:not(.elementor-editor-active) .sidebar-fija { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; overflow: visible !important; z-index: 99990 !important; } /* WordPress admin bar: conserva el offset pero NO vuelve a dar 100vh. */ /* * Espacio para que el contenido de la página no quede tapado por la * cabecera fija. El JS actualiza --codec-mobile-header-height con la altura * real del header por si el diseño de Elementor cambia más adelante. */ body:not(.elementor-editor-active), body.admin-bar:not(.elementor-editor-active) { padding-top: var(--codec-mobile-header-height) !important; } /* El menú lateral pasa a panel desplegable bajo la cabecera. */ body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui { position: absolute !important; top: 100% !important; right: 0 !important; left: 0 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--codec-space-4) var(--codec-space-5) var(--codec-space-6) !important; background: #fff8f1 !important; border-top: 1px solid rgba(65, 69, 85, 0.08) !important; box-shadow: 0 14px 28px rgba(29, 31, 39, 0.12) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-8px) !important; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important; z-index: 99991 !important; } body:not(.elementor-editor-active) .sidebar-fija.codec-mobile-menu-open .menu-sidebar-ui { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* Recupera el ancho completo de la lista y de sus enlaces. */ body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui, body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui .elementor-widget-container, body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui .elementor-icon-list-items, body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui .elementor-icon-list-item, body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui .elementor-icon-list-item a { width: 100% !important; } body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui .elementor-icon-list-items { display: flex !important; flex-direction: column !important; gap: 2px !important; } body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui .elementor-icon-list-item a { padding: 11px var(--codec-space-6) !important; } /* Botón hamburguesa añadido por JS. */ body:not(.elementor-editor-active) .codec-mobile-menu-toggle { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; display: inline-flex !important; padding: 0 !important; margin: 0 !important; align-items: center !important; justify-content: center !important; appearance: none !important; -webkit-appearance: none !important; border: 0 !important; border-radius: var(--codec-radius-card) !important; background: var(--codec-color-accent-soft) !important; color: var(--codec-color-text-strong-alt) !important; cursor: pointer !important; box-shadow: none !important; z-index: 99992 !important; } body:not(.elementor-editor-active) .codec-mobile-menu-toggle:hover, body:not(.elementor-editor-active) .codec-mobile-menu-toggle:focus-visible { background: #f6d7c0 !important; color: var(--codec-color-accent-hover) !important; } .codec-mobile-menu-toggle-lines, .codec-mobile-menu-toggle-lines::before, .codec-mobile-menu-toggle-lines::after { display: block; width: 21px; height: 2px; border-radius: 99px; background: currentColor; transition: transform 0.18s ease, opacity 0.18s ease; } .codec-mobile-menu-toggle-lines { position: relative; } .codec-mobile-menu-toggle-lines::before, .codec-mobile-menu-toggle-lines::after { content: ""; position: absolute; left: 0; } .codec-mobile-menu-toggle-lines::before { top: -7px; } .codec-mobile-menu-toggle-lines::after { top: 7px; } /* Evita scroll accidental de la página mientras el menú está abierto. */ body.codec-mobile-menu-is-open { overflow-x: hidden !important; } } /* A 768px volvemos al sidebar normal y el botón jamás debe aparecer. */ @media (min-width:768px) { .codec-mobile-menu-toggle { display: none !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ .codec-mobile-search-toggle, .codec-mobile-search-panel { display: none; } @media (max-width:1024px) { /* Cabecera más compacta. */ body:not(.elementor-editor-active) .sidebar-fija { min-height: 76px !important; padding: var(--codec-space-4) var(--codec-space-7) !important; gap:var(--codec-space-4) !important; } body.admin-bar:not(.elementor-editor-active) .sidebar-fija { min-height: 76px !important; } /* * Logo de Elementor: limita el ancho del conjunto radar + CODEC. * Reservamos a la derecha el espacio de lupa + hamburguesa. */ body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image { width: auto !important; flex: 0 1 auto !important; margin-right: auto !important; } body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image .elementor-widget-container, body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image a { width: auto !important; max-width: 100% !important; } body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image img { max-width: 100% !important; height: auto !important; } /* Hamburguesa: un poco más compacta y pegada al extremo derecho. */ body:not(.elementor-editor-active) .codec-mobile-menu-toggle { width: 44px !important; height: 44px !important; } /* ÚNICA lupa móvil, justo a la izquierda del hamburguesa. */ body:not(.elementor-editor-active) .codec-mobile-search-toggle { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; display: inline-flex !important; width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; align-items: center !important; justify-content: center !important; appearance: none !important; -webkit-appearance: none !important; border: 0 !important; border-radius: var(--codec-radius-card) !important; background: var(--codec-color-accent-soft) !important; color: var(--codec-color-text-strong-alt) !important; cursor: pointer !important; box-shadow: none !important; z-index: 99992 !important; } body:not(.elementor-editor-active) .codec-mobile-search-toggle:hover, body:not(.elementor-editor-active) .codec-mobile-search-toggle:focus-visible, body:not(.elementor-editor-active) .sidebar-fija.codec-mobile-search-open .codec-mobile-search-toggle { background: #f6d7c0 !important; color: var(--codec-color-accent-hover) !important; } /* Lupa dibujada por CSS: no dependemos de Font Awesome. */ .codec-mobile-search-toggle-icon { position: relative; display: block; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; } .codec-mobile-search-toggle-icon::after { content: ""; position: absolute; width: 8px; height: 2px; right: -6px; bottom: -3px; border-radius: var(--codec-radius-pill); background: currentColor; transform: rotate(45deg); transform-origin: center; } /* * El shortcode original queda vacío porque JS mueve .codec-global-search al * panel móvil. Lo anulamos para que no deje hueco donde estaba. */ body:not(.elementor-editor-active) .codec-mobile-search-origin { display: none !important; } /* Panel en el flujo de la página, ANTES del título de sección. */ body:not(.elementor-editor-active) .codec-mobile-search-panel { display: block !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-form { width: 100% !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-input { min-height: 48px !important; border-radius: 15px !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-submit { min-height: 36px !important; border-radius: 11px !important; } /* Las sugerencias ocupan el ancho del buscador en móvil. */ } @media (min-width:768px) { .codec-mobile-search-toggle, .codec-mobile-search-panel { display: none !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* El JS solo traslada el buscador compacto al panel plegable en móvil. */ /* En >=768px conserva su ubicación original de Elementor. */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image { align-self: center !important; display: flex !important; align-items: center !important; min-height: 44px !important; } body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image .elementor-widget-container, body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image a { display: flex !important; align-items: center !important; min-height: 44px !important; } /* * Al mover las pestañas abajo, el wrapper sticky superior deja de ocupar * espacio y de dibujar su fondo/sombra. Los filtros continúan en su sitio. */ body:not(.elementor-editor-active) .codec-sticky-tabs { position: static !important; top: auto !important; z-index: auto !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; } /* Ya no hay una fila de tabs sobre los filtros en móvil. */ body:not(.elementor-editor-active) .codec-toolbar-sticky, body.admin-bar:not(.elementor-editor-active) .codec-toolbar-sticky { top: var(--codec-mobile-header-height, 76px) !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* * WordPress usa 46px de admin bar por debajo de 783px. La dejamos realmente * fija para que no desaparezca al hacer scroll y reservamos su hueco. */ html:has(body.admin-bar) { scroll-padding-top: 46px !important; } body.admin-bar:not(.elementor-editor-active) #wpadminbar { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; z-index: 1000000 !important; transform: none !important; } /* La cabecera Codec queda inmediatamente debajo del admin bar. */ body.admin-bar:not(.elementor-editor-active) .sidebar-fija { top: 46px !important; height: auto !important; } /* ----------------------------------------------------------------------- */ /* TOOLBAR MÓVIL: búsqueda + Filtros + Agrupar + Ordenar + Vista */ /* ----------------------------------------------------------------------- */ body:not(.elementor-editor-active) .codec-toolbar-sticky { overflow: visible !important; } body:not(.elementor-editor-active) .codec-toolbar { display: block !important; width: 100% !important; min-height: 52px !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: var(--codec-color-surface) !important; overflow: visible !important; } /* Los filtros reales se convierten en un panel que cuelga de la toolbar. */ body:not(.elementor-editor-active) .codec-toolbar-left { position: absolute !important; z-index: 10050 !important; display: none !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: auto !important; min-width: 0 !important; overflow: visible !important; border: 1px solid var(--codec-color-line-warm) !important; border-radius: 15px !important; box-shadow: 0 12px 34px rgba(29, 31, 39, 0.14) !important; } body:not(.elementor-editor-active) .codec-toolbar.codec-mobile-filters-open > .codec-toolbar-left { display: flex !important; } /* Cada filtro pasa a ser una fila cómoda para tocar con el dedo. */ body:not(.elementor-editor-active) .codec-toolbar-left > .codec-filter-dropdown { border-radius: var(--codec-radius-md) !important; } body:not(.elementor-editor-active) .codec-toolbar-left > .codec-filter-dropdown:hover, body:not(.elementor-editor-active) .codec-toolbar-left > .codec-filter-dropdown.is-active, body:not(.elementor-editor-active) .codec-toolbar-left > .codec-filter-dropdown.is-open { background: var(--codec-control-accent-soft) !important; } body:not(.elementor-editor-active) .codec-toolbar-left .codec-filter-current { justify-content: space-between !important; } /* Los submenús de filtros quedan contenidos dentro del panel principal. */ body:not(.elementor-editor-active) .codec-toolbar-left .codec-filter-menu { box-shadow: none !important; background: var(--codec-color-surface) !important; } body:not(.elementor-editor-active) .codec-toolbar-left .codec-filter-clear-all { width: 100% !important; min-height: var(--codec-control-height-lg) !important; margin: var(--codec-space-1) 0 0 !important; border-radius: var(--codec-radius-md) !important; text-align: center !important; } /* Barra visible: controles distribuidos como navegación de app. */ body:not(.elementor-editor-active) .codec-toolbar-right { min-height: 52px !important; margin: 0 !important; overflow: visible !important; } /* Todos los controles directos reciben el mismo espacio. */ body:not(.elementor-editor-active) .codec-toolbar-right > * { position: relative !important; } body:not(.elementor-editor-active) .codec-mobile-filters-toggle, body:not(.elementor-editor-active) .codec-group-current, body:not(.elementor-editor-active) .codec-sort-current, body:not(.elementor-editor-active) .codec-view-current, body:not(.elementor-editor-active) .codec-context-search-toggle { display: flex !important; align-items: center !important; margin: 0 !important; border: 0 !important; background: transparent !important; color: #656a79 !important; box-shadow: none !important; font-family: var(--codec-font-ui) !important; font-weight: 750 !important; white-space: nowrap !important; } body:not(.elementor-editor-active) .codec-mobile-filters-toggle:hover, body:not(.elementor-editor-active) .codec-mobile-filters-toggle[aria-expanded="true"], body:not(.elementor-editor-active) .codec-group-dropdown.is-open .codec-group-current, body:not(.elementor-editor-active) .codec-sort-dropdown.is-open .codec-sort-current, body:not(.elementor-editor-active) .codec-view-dropdown.is-open .codec-view-current, body:not(.elementor-editor-active) .codec-context-search.is-open .codec-context-search-toggle { background: var(--codec-control-accent-soft) !important; color: var(--codec-color-accent-hover) !important; } /* La lupa contextual ya no necesita el tamaño de escritorio. */ body:not(.elementor-editor-active) .codec-context-search-toggle span { font-size: 18px !important; line-height: 1 !important; } /* Campo de búsqueda contextual desplegado: panel ancho debajo de toolbar. */ body:not(.elementor-editor-active) .codec-context-search-form { position: absolute !important; z-index: 10060 !important; top: calc(100% + 8px) !important; right: 8px !important; width: min(420px, calc(100vw - 20px)) !important; min-width: 0 !important; } /* Agrupar / Ordenar / Vista: panel flotante adaptado al viewport. */ body:not(.elementor-editor-active) .codec-group-menu, body:not(.elementor-editor-active) .codec-sort-menu, body:not(.elementor-editor-active) .codec-view-menu { right: 0 !important; left: auto !important; min-width: 210px !important; max-width: min(300px, calc(100vw - 20px)) !important; z-index: 10060 !important; } /* El primer panel puede abrir hacia la izquierda sin salirse del viewport. */ body:not(.elementor-editor-active) .codec-toolbar-right > :nth-last-child(n/**/+4) .codec-group-menu { right: auto !important; left: 0 !important; } /* La barra global de /buscar/ conserva su buscador propio; no duplicamos Filtros. */ } @media (min-width:768px) { .codec-mobile-filters-toggle { display: none !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* ----------------------------------------------------------------------- */ /* HEADER: misma estructura, bastante menos altura sticky. */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* TOOLBAR: Filtros · Buscar · Agrupar · Ordenar · Vista */ /* ----------------------------------------------------------------------- */ body:not(.elementor-editor-active) .codec-toolbar-sticky { margin-bottom: var(--codec-space-5) !important; } body:not(.elementor-editor-active) .codec-toolbar, body:not(.elementor-editor-active) .codec-toolbar-right { min-height: 40px !important; } body:not(.elementor-editor-active) .codec-toolbar-right { position: relative !important; } body:not(.elementor-editor-active) .codec-mobile-filters-toggle, body:not(.elementor-editor-active) .codec-group-current, body:not(.elementor-editor-active) .codec-sort-current, body:not(.elementor-editor-active) .codec-view-current, body:not(.elementor-editor-active) .codec-context-search-toggle { flex-direction: row !important; min-height: var(--codec-control-height-md) !important; height: var(--codec-control-height-md) !important; padding: 2px 3px !important; border-radius: var(--codec-radius-sm) !important; gap: 0 !important; font-size: 11px !important; line-height: 1 !important; } /* Sin icono en Filtros. */ body:not(.elementor-editor-active) .codec-context-search-toggle > span { display: none !important; } /* La lupa contextual se presenta como texto "Buscar" en la toolbar. */ body:not(.elementor-editor-active) .codec-context-search-toggle::after { content: "Buscar" !important; display: inline !important; } /* El buscador abierto usa todo el ancho útil de la barra. */ body:not(.elementor-editor-active) .codec-context-search { position: static !important; height: var(--codec-control-height-md) !important; } body:not(.elementor-editor-active) .codec-context-search-form, body:not(.elementor-editor-active) .codec-context-search.is-open .codec-context-search-form { position: absolute !important; z-index: 10080 !important; top: calc(100% + 7px) !important; right: 10px !important; left: 10px !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: 40px !important; margin: 0 !important; padding-left: var(--codec-space-4) !important; } body:not(.elementor-editor-active) .codec-context-search.is-open .codec-context-search-form { opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; } body:not(.elementor-editor-active) .codec-context-search-submit { height: 30px !important; min-width: 68px !important; padding: 0 var(--codec-space-5) !important; font-size: 12px !important; } body:not(.elementor-editor-active) .codec-context-search-input { font-size: 13px !important; } /* Panel principal de filtros justo debajo de la toolbar. */ body:not(.elementor-editor-active) .codec-toolbar-left { top: calc(100% + 7px) !important; right: 8px !important; left: 8px !important; max-height: min(70vh, 560px) !important; padding: 7px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Cada filtro es columna: su menú aparece DEBAJO de Año/Puntuación/etc. */ body:not(.elementor-editor-active) .codec-toolbar-left > .codec-filter-dropdown { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; min-height: var(--codec-control-height-lg) !important; height: auto !important; padding: 0 !important; overflow: visible !important; } body:not(.elementor-editor-active) .codec-toolbar-left .codec-filter-current { flex: 0 0 auto !important; width: 100% !important; min-height: var(--codec-control-height-lg) !important; padding: 0 var(--codec-space-4) !important; } body:not(.elementor-editor-active) .codec-toolbar-left .codec-filter-menu { position: static !important; order: 2 !important; align-self: stretch !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; max-height: 38vh !important; margin: 2px 0 var(--codec-space-2) !important; overflow-y: auto !important; overflow-x: hidden !important; transform: none !important; } /* Los otros dropdowns también cuelgan bajo la toolbar, sin salir de pantalla. */ body:not(.elementor-editor-active) .codec-group-menu, body:not(.elementor-editor-active) .codec-sort-menu, body:not(.elementor-editor-active) .codec-view-menu { top: calc(100% + 7px) !important; max-height: min(58vh, 430px) !important; overflow-y: auto !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* ----------------------------------------------------------------------- */ /* TÍTULO DE SECCIÓN */ /* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */ /* TOOLBAR: realmente sticky justo debajo de la cabecera CODEC. */ /* ----------------------------------------------------------------------- */ body:not(.elementor-editor-active) .codec-toolbar-sticky { position: sticky !important; top: var(--codec-mobile-header-height, 60px) !important; z-index: 99960 !important; width: 100% !important; margin: 0 0 26px !important; padding: 0 !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 1px 0 rgba(232, 222, 214, .75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } body.admin-bar:not(.elementor-editor-active) .codec-toolbar-sticky { top: calc(var(--codec-mobile-header-height, 60px) + 46px) !important; } /* Un poco de aire visual adicional entre toolbar y primer contenido. */ body:not(.elementor-editor-active) .codec-toolbar-sticky + * { margin-top: 0 !important; } /* ----------------------------------------------------------------------- */ /* CINCO CONTROLES = CINCO COLUMNAS EXACTAMENTE IGUALES. */ /* ----------------------------------------------------------------------- */ body:not(.elementor-editor-active) .codec-toolbar-right { display: flex !important; flex-wrap: nowrap !important; justify-content: stretch !important; align-items: stretch !important; width: 100% !important; padding: 0 var(--codec-space-1) !important; gap: 0 !important; } body:not(.elementor-editor-active) .codec-toolbar-right > * { flex: 0 0 20% !important; width: 20% !important; min-width: 0 !important; max-width: 20% !important; margin: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-mobile-filters-toggle, body:not(.elementor-editor-active) .codec-group-current, body:not(.elementor-editor-active) .codec-sort-current, body:not(.elementor-editor-active) .codec-view-current, body:not(.elementor-editor-active) .codec-context-search-toggle { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: center !important; text-align: center !important; } /* Evita que anchos heredados de desktop deformen Buscar/Vista. */ body:not(.elementor-editor-active) .codec-context-search, body:not(.elementor-editor-active) .codec-group-dropdown, body:not(.elementor-editor-active) .codec-sort-dropdown, body:not(.elementor-editor-active) .codec-view-dropdown { width: 20% !important; min-width: 0 !important; max-width: 20% !important; } /* Cuando se abre Buscar, solo el formulario se expande; su celda no. */ body:not(.elementor-editor-active) .codec-context-search.is-open { width: 20% !important; max-width: 20% !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* * La barra de controles se reubica por JS justo debajo del header y usa * position:fixed. Así no depende de los overflow/transform de Elementor, * que impedían que position:sticky funcionase en algunas páginas. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed { position: fixed !important; top: var(--codec-mobile-header-height, 60px) !important; right: 0 !important; left: 0 !important; z-index: 99970 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: rgba(255,255,255,.985) !important; border: 0 !important; border-bottom: 1px solid rgba(224,216,209,.9) !important; box-shadow: 0 4px 12px rgba(29,31,39,.045) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; overflow: visible !important; } body.admin-bar:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed { top: calc(var(--codec-mobile-header-height, 60px) + 46px) !important; } /* Hueco real en el flujo para que la barra fija no tape título/contenido. */ body:not(.elementor-editor-active) .codec-mobile-toolbar-placeholder { display: block !important; width: 100% !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--codec-color-surface) !important; } /* Toolbar estrecha y cinco zonas idénticas. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar-right { min-height: var(--codec-control-height-lg) !important; height: var(--codec-control-height-lg) !important; background: transparent !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar-right { flex-wrap: nowrap !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-mobile-filters-toggle, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-group-current, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-sort-current, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-current, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search-toggle { min-height: var(--codec-control-height-lg) !important; height: var(--codec-control-height-lg) !important; width: 100% !important; padding: 0 2px !important; border-radius: 0 !important; justify-content: center !important; font-size: 11px !important; } /* * El contenedor de Elementor del título heredaba el crema de desktop. * Lo marcamos por JS y lo neutralizamos por completo en móvil. */ /* Aire entre el bloque de título y la primera fila/listado. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed + .codec-mobile-toolbar-placeholder { margin: 0 !important; } } @media (min-width:768px) { .codec-mobile-toolbar-placeholder { display: none !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* ----------------------------------------------------------------------- */ /* TÍTULO MÓVIL LIMPIO, AJENO A LOS ANCHOS DEL FLEXBOX DE ELEMENTOR. */ /* ----------------------------------------------------------------------- */ body:not(.elementor-editor-active) .codec-mobile-original-title-hidden, body:not(.elementor-editor-active) .codec-mobile-search-origin { display: none !important; } /* El shortcode original ya no debe reservar ancho/alto en ese Flexbox. */ body:not(.elementor-editor-active) .codec-mobile-title-clean { border: 0 !important; text-align: center !important; } body:not(.elementor-editor-active) .codec-mobile-title-clean__text { max-width: none !important; color: #4f5365 !important; font: inherit !important; font-size: clamp(26px, 5.6vw, 34px) !important; font-weight: 700 !important; line-height: 1.12 !important; } /* El Flexbox original contiene título + shortcode del buscador. En móvil el buscador ya vive en su panel propio, así que no debe reservar espacio. */ body:not(.elementor-editor-active) .codec-mobile-original-title-flex { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------------------------- */ /* BUSCADOR DE LA LUPA DEL HEADER: PANEL INDEPENDIENTE A ANCHO COMPLETO. */ /* ----------------------------------------------------------------------- */ body:not(.elementor-editor-active) .codec-mobile-search-panel { position: fixed !important; right: 0 !important; left: 0 !important; box-sizing: border-box !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: var(--codec-space-4) var(--codec-space-6) var(--codec-space-6) !important; border: 0 !important; border-bottom: 1px solid rgba(224,216,209,.9) !important; overflow: visible !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel[hidden] { display: none !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search, body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-form { box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 0 !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-suggestions { right: 14px !important; left: 14px !important; width: auto !important; max-width: none !important; } /* ----------------------------------------------------------------------- */ /* TOOLBAR: 100vw REAL + GRID DE CINCO COLUMNAS IDÉNTICAS. */ /* ----------------------------------------------------------------------- */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar { box-sizing: border-box !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar { display: block !important; height: var(--codec-control-height-lg) !important; min-height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar-right { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; grid-template-rows: 42px !important; align-items: stretch !important; justify-items: stretch !important; box-sizing: border-box !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar-right > * { position: relative !important; box-sizing: border-box !important; display: block !important; float: none !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-mobile-filters-toggle { grid-column: 1 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search { grid-column: 2 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-group-dropdown { grid-column: 3 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-sort-dropdown { grid-column: 4 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-control { grid-column: 5 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-mobile-filters-toggle, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search-toggle, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-group-current, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-sort-current, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-current { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-lg) !important; min-height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 2px !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: #656a79 !important; font-size: 11px !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed button:focus, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed button:focus-visible { outline: 0 !important; box-shadow: none !important; } /* Buscar contextual se despliega fuera de su celda, pero la celda sigue 1/5. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search.is-open { width: 100% !important; max-width: 100% !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search-form { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* El título limpio se coloca justo antes del loop real para que forme parte del flujo del contenido y nunca pueda quedar detrás de las cards. */ body:not(.elementor-editor-active) .codec-mobile-title-clean { position: relative !important; inset: auto !important; z-index: 1 !important; clear: both !important; box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; } body:not(.elementor-editor-active) .codec-mobile-title-clean__text { display: block !important; width: 100% !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; } /* La quinta celda tenía un wrapper intermedio (.codec-view-dropdown) cuyo ancho seguía siendo intrínseco. Lo estiramos igual que las otras cuatro. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-control, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-control > .codec-view-dropdown { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-current { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* Evita que cualquier regla antigua de auto-margin empuje Vista a la derecha. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-control, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-view-dropdown { margin-left: 0 !important; margin-right: 0 !important; justify-self: stretch !important; align-self: stretch !important; } } /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* Menos aire entre el título de sección y los primeros resultados. */ body:not(.elementor-editor-active) .codec-mobile-title-clean { margin-bottom: var(--codec-space-5) !important; padding-top: var(--codec-space-10) !important; padding-bottom: var(--codec-space-8) !important; } /* Buscar de la toolbar: el formulario se alinea al viewport, no a la 2ª celda. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search-form, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search.is-open .codec-context-search-form { position: fixed !important; top: calc(var(--codec-mobile-header-height, 60px) + 42px + 8px) !important; right: 10px !important; left: 10px !important; z-index: 99982 !important; box-sizing: border-box !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; transform: none !important; } body.admin-bar:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search-form, body.admin-bar:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-context-search.is-open .codec-context-search-form { top: calc(var(--codec-mobile-header-height, 60px) + 42px + 46px + 8px) !important; } /* Backdrop del buscador global del header. */ body:not(.elementor-editor-active) .codec-mobile-search-backdrop { position: fixed !important; inset: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; cursor: default !important; } body:not(.elementor-editor-active) .codec-mobile-search-backdrop[hidden] { display: none !important; } /* El cuadro global y sus filtros quedan claramente por encima del fondo. */ body:not(.elementor-editor-active) .codec-mobile-search-panel { background: #fff8f2 !important; box-shadow: 0 16px 42px rgba(0,0,0,.28) !important; } body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-suggestions, body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-filterbox, body:not(.elementor-editor-active) .codec-mobile-search-panel .codec-global-search-content-panel { z-index: 99997 !important; } body.codec-mobile-global-search-is-open:not(.elementor-editor-active) { overflow: hidden !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* Compactamos de verdad el bloque de título y compensamos el aire que deja el wrapper del loop de Elementor antes de la primera fila de resultados. */ /* El buscador global de la lupa empieza justo debajo del header: cubre la toolbar y queda como una capa modal independiente. */ body:not(.elementor-editor-active) .codec-mobile-search-panel { top: var(--codec-mobile-header-height, 60px) !important; z-index: 100010 !important; padding-top: var(--codec-space-5) !important; } body.admin-bar:not(.elementor-editor-active) .codec-mobile-search-panel { top: calc(var(--codec-mobile-header-height, 60px) + 46px) !important; } /* El backdrop pasa también por encima del header, toolbar y navegación inferior; solo el cuadro de búsqueda queda por encima. */ body:not(.elementor-editor-active) .codec-mobile-search-backdrop { z-index: 100000 !important; background: rgba(9, 11, 16, .72) !important; } /* Buscar contextual de Games/Anime/etc. se mueve al body por JS para evitar que Elementor cambie su referencia de posicionamiento. */ body:not(.elementor-editor-active) .codec-mobile-context-search-float { position: fixed !important; top: calc(var(--codec-mobile-header-height, 60px) + 42px + 6px) !important; right: 10px !important; left: 10px !important; z-index: 99983 !important; display: flex !important; box-sizing: border-box !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: 40px !important; margin: 0 !important; padding-left: var(--codec-space-4) !important; border-color: var(--codec-color-line-warm) !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; box-shadow: 0 0 0 3px rgba(234,157,106,.09) !important; } body.admin-bar:not(.elementor-editor-active) .codec-mobile-context-search-float { top: calc(var(--codec-mobile-header-height, 60px) + 42px + 46px + 6px) !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { body:not(.elementor-editor-active) .codec-mobile-title-clean { min-height: 0 !important; margin: 0 0 var(--codec-space-3) !important; padding: var(--codec-space-8) var(--codec-space-7) var(--codec-space-3) !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } body:not(.elementor-editor-active) .codec-mobile-title-clean__text { margin: 0 !important; padding: 0 !important; background: transparent !important; } } /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ========================================================================== */ @media (max-width:1024px) { /* Solo ajuste visual del panel principal de Filtros: mismo fondo blanco que Agrupar / Ordenar / Vista, manteniendo intacta su estructura. */ body:not(.elementor-editor-active) .codec-toolbar-left { background: var(--codec-color-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Tipografía ligeramente más compacta para igualarla con los otros menús. */ body:not(.elementor-editor-active) .codec-toolbar-left .codec-filter-current { font-size: 13px !important; } } /* ========================================================================== */ /* ========================================================================== */ .codec-detail-cover-mobile { display: none; } @media (max-width:1024px) { /* En móvil eliminamos por completo la antigua columna superior de portada. */ .codec-detail-hero.has-cover > .codec-detail-hero-left { display: none !important; } .codec-detail-hero.has-cover { display: block !important; padding: 0 !important; overflow: visible !important; } /* El hero pasa a ser la única composición visual principal. */ .codec-detail-hero.has-cover .codec-detail-hero-right { position: relative !important; isolation: isolate; width: 100% !important; margin: 0 !important; padding: 262px var(--codec-space-8) var(--codec-space-11) !important; box-sizing: border-box; overflow: visible !important; } .codec-detail-hero.has-cover .codec-detail-hero-right.has-horizontal-art { margin: 0 !important; padding-top: 262px !important; } /* Fondo horizontal del hero. */ .codec-detail-hero.has-cover .codec-detail-hero-right.has-horizontal-art::before, .codec-detail-hero.has-cover .codec-detail-hero-right.has-horizontal-art::after { top: 0 !important; left: 0 !important; right: 0 !important; height: 315px !important; border-radius: 0 !important; } .codec-detail-hero.has-cover .codec-detail-hero-right.has-horizontal-art::before { opacity: .60 !important; background-position: center center !important; } .codec-detail-hero.has-cover .codec-detail-hero-right.has-horizontal-art::after { background: linear-gradient( 180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.12) 35%, rgba(255,255,255,.44) 66%, rgba(255,255,255,.88) 88%, var(--codec-color-surface) 100% ) !important; } /* Portada flotante real, centrada encima del fondo horizontal. */ .codec-detail-cover-mobile { display: block; position: absolute; z-index: 4; top: 28px; left: 50%; width: min(42vw, 176px); transform: translateX(-50%); } .codec-detail-cover-mobile .codec-detail-cover { width: 100% !important; margin: 0 !important; border-radius: 17px !important; border: 1px solid rgba(255,255,255,.68) !important; box-shadow: 0 14px 34px rgba(31,35,45,.24), 0 3px 10px rgba(31,35,45,.12) !important; } /* El título vuelve al flujo normal, debajo de la composición visual. */ .codec-detail-hero.has-cover .codec-detail-title, .codec-detail-hero.has-cover .codec-detail-hero-right.has-horizontal-art .codec-detail-title { position: relative !important; z-index: 5 !important; display: block !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .codec-detail-hero.has-cover .codec-detail-badges, .codec-detail-hero.has-cover .codec-detail-stats, .codec-detail-hero.has-cover .codec-detail-content-panel { position: relative; z-index: 5; } /* Solo dejamos el Editar integrado debajo de badges. */ .codec-detail-hero.has-cover .codec-detail-hero-right, .codec-detail-hero.has-cover .codec-detail-hero-right.has-horizontal-art { padding-top: 332px !important; } .codec-detail-hero.has-cover .codec-detail-title { text-align: center !important; } } html body .codec-static-end-message { margin-top: var(--codec-space-8) !important; margin-bottom: 22px !important; } @media (max-width:1024px) { body:not(.elementor-editor-active) .codec-mobile-search-page-title-hidden { display: none !important; } /* En /buscar/ sí queremos el botón Filtros: contiene búsqueda + filtros. */ body:not(.elementor-editor-active) .codec-global-results-controls .codec-mobile-filters-toggle { display: flex !important; } /* Cuatro controles reales y exactamente iguales. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-global-results-controls .codec-toolbar-right { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; gap: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-global-results-controls .codec-toolbar-right > * { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-global-results-controls .codec-mobile-filters-toggle { grid-column: 1 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-global-results-controls .codec-group-dropdown { grid-column: 2 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-global-results-controls .codec-sort-dropdown { grid-column: 3 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-global-results-controls .codec-view-control { grid-column: 4 !important; } /* El panel Filtros de /buscar/ contiene el campo de búsqueda y los filtros de Contenido / Backlog. Queda inmediatamente debajo de la toolbar. */ body:not(.elementor-editor-active) .codec-global-results-controls > .codec-global-results-search-slot { background: var(--codec-color-surface) !important; border: 1px solid var(--codec-color-line-warm) !important; border-radius: 15px !important; box-shadow: 0 12px 34px rgba(29,31,39,.14) !important; padding: var(--codec-space-4) !important; max-height: min(72vh, 560px) !important; overflow: visible !important; } body:not(.elementor-editor-active) .codec-global-results-controls .codec-global-search--results, body:not(.elementor-editor-active) .codec-global-results-controls .codec-global-search--results .codec-global-search-form, body:not(.elementor-editor-active) .codec-global-results-controls .codec-global-search--results .codec-global-search-suggestions { width: 100% !important; max-width: 100% !important; } /* Resumen claramente visible antes del primer grupo de resultados. */ body:not(.elementor-editor-active):has(.codec-page-context[data-codec-tracker="search"]) .codec-search-results-summary { display: flex !important; position: relative !important; z-index: 1 !important; width: 100% !important; justify-content: center !important; align-items: baseline !important; flex-wrap: wrap !important; gap:var(--codec-space-2) !important; margin: var(--codec-space-5) 0 var(--codec-space-3) !important; padding: var(--codec-space-3) var(--codec-space-7) !important; background: var(--codec-color-surface) !important; text-align: center !important; } /* /buscar/: cerrado por defecto; solo visible mientras Filtros/lupa esté abierto. */ body:not(.elementor-editor-active) .codec-global-results-controls > .codec-global-results-search-slot { display: none !important; } body:not(.elementor-editor-active) .codec-global-results-controls.codec-mobile-filters-open > .codec-global-results-search-slot { display: flex !important; } /* Fichas individuales: badges centradas bajo el título. */ body:not(.elementor-editor-active) .codec-detail-hero .codec-detail-badges { width: 100% !important; justify-content: center !important; text-align: center !important; } } .codec-single-mobile-search-source { display: none !important; } .codec-detail-edit-bottom { display: none; } @media (max-width:1024px) { /* El botón superior/intermedio desaparece en móvil. El único Editar queda al final de la ficha, después del panel de Notas. */ body:not(.elementor-editor-active) .codec-detail-edit-bottom { position: relative !important; z-index: 6 !important; display: flex !important; justify-content: center !important; width: 100% !important; margin: var(--codec-space-8) 0 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-detail-edit-bottom .codec-detail-edit { width: auto !important; min-width: 0 !important; min-height: 38px !important; padding: var(--codec-space-3) 15px !important; border-radius: 13px !important; font-size: 13px !important; line-height: 1.15 !important; background: var(--codec-color-surface) !important; box-shadow: none !important; } /* Los CPT genéricos (Anime, Series, Pelis, Libros, etc.) ya generan la misma carátula móvil flotante que Games. */ /* Home / Biblioteca: mismo lenguaje visual que los títulos de los CPT. */ body:not(.elementor-editor-active) .codec-home-library-title-wrap { box-sizing: border-box !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: var(--codec-color-surface) !important; } body:not(.elementor-editor-active) .codec-home-library-title-widget { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: var(--codec-color-surface) !important; } body:not(.elementor-editor-active) .codec-home-library-title { box-sizing: border-box !important; } /* Home: el fondo blanco se extiende a todo el viewport aunque Elementor mantenga el heading dentro de un contenedor con padding lateral. */ body:not(.elementor-editor-active) .codec-home-library-title-wrap, body:not(.elementor-editor-active) .codec-home-library-title-widget { background: var(--codec-color-surface) !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } body:not(.elementor-editor-active) .codec-home-library-title { position: relative !important; z-index: 1 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--codec-space-8) var(--codec-space-7) var(--codec-space-7) !important; background: var(--codec-color-surface) !important; text-align: center !important; box-shadow: 0 0 0 100vmax var(--codec-color-surface) !important; clip-path: inset(0 -100vmax) !important; } /* Home: usamos exactamente el bloque limpio que ya funciona en los CPT. */ body:not(.elementor-editor-active) .codec-home-library-original-wrap-hidden { display: none !important; } body:not(.elementor-editor-active) .codec-home-library-clean-title.codec-mobile-title-clean { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: var(--codec-space-9) var(--codec-space-7) var(--codec-space-8) !important; background: var(--codec-color-surface) !important; } body:not(.elementor-editor-active) .codec-home-library-clean-title .codec-mobile-title-clean__text { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #555d73 !important; text-align: center !important; } /* Header: mínimo alto útil, sin padding vertical sobrante. */ html { --codec-mobile-header-height: 52px; } body:not(.elementor-editor-active) .sidebar-fija, body.admin-bar:not(.elementor-editor-active) .sidebar-fija { box-sizing: border-box !important; min-height: 52px !important; height: 52px !important; padding: 2px var(--codec-space-4) !important; gap:var(--codec-space-2) !important; align-items: center !important; } body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image, body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image .elementor-widget-container, body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image a { display: flex !important; align-items: center !important; min-height: 0 !important; height: 48px !important; margin: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image img { display: block !important; width: 164px !important; max-height: 40px !important; margin: 0 !important; object-fit: contain !important; object-position: left center !important; } body:not(.elementor-editor-active) .codec-mobile-search-toggle, body:not(.elementor-editor-active) .codec-mobile-menu-toggle { top: 50% !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; border-radius: var(--codec-radius-md) !important; } body:not(.elementor-editor-active) .codec-mobile-menu-toggle { right: 10px !important; } /* Home / Dashboard: el host del título deja de aportar el marco beige de Elementor. El resultado es exactamente una banda blanca como en los CPT. */ body:not(.elementor-editor-active) .codec-home-library-clean-host { box-sizing: border-box !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: var(--codec-color-surface) !important; border: 0 !important; box-shadow: none !important; } body:not(.elementor-editor-active) .codec-home-library-clean-host > .codec-home-library-clean-title.codec-mobile-title-clean { width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--codec-space-9) var(--codec-space-7) var(--codec-space-8) !important; background: var(--codec-color-surface) !important; border: 0 !important; box-shadow: none !important; } /* En iPhone real, el minmax desktop dejaba solo 2 cards enormes. Para la vista Compact (la predeterminada en varios CPT) fijamos 3 columnas reales. En pantallas excepcionalmente estrechas (<360px) volvemos a 2. */ body.codec-view-compact:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.elementor-loop-container,.elementor-grid), body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-compact :is(.elementor-loop-container,.elementor-grid) { align-items: start !important; } body.codec-view-compact:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .e-loop-item, body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-compact .e-loop-item { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } body.codec-view-compact:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card, body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-compact .codec-game-card { width: 100% !important; max-width: none !important; aspect-ratio: 2/3 !important; height: auto !important; } } @media (max-width:359px) { body.codec-view-compact:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.elementor-loop-container,.elementor-grid), body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-compact :is(.elementor-loop-container,.elementor-grid) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media (max-width:1024px) { /* Diminutas: 4 columnas */ body.codec-view-tiny:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.elementor-loop-container,.elementor-grid), body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-tiny :is(.elementor-loop-container,.elementor-grid) { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap:var(--codec-space-3) !important; } /* Pequeñas: 3 columnas */ body.codec-view-compact:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.elementor-loop-container,.elementor-grid), body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-compact :is(.elementor-loop-container,.elementor-grid) { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:var(--codec-space-5) !important; } /* Grandes: 2 columnas */ body.codec-view-large:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.elementor-loop-container,.elementor-grid), body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-large :is(.elementor-loop-container,.elementor-grid) { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:var(--codec-space-7) !important; } /* Gigantes: 1 columna */ body.codec-view-giant:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.elementor-loop-container,.elementor-grid), body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop).codec-loop-view-giant :is(.elementor-loop-container,.elementor-grid) { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap:var(--codec-space-8) !important; } /* Todas las cards llenan su celda, sin anchos heredados de Elementor. */ body:not(.elementor-editor-active) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.e-loop-item,.elementor-grid-item,.codec-game-card) { min-width: 0 !important; max-width: 100% !important; } } @media (max-width:782px) { body.admin-bar .sidebar-fija { top: 46px !important; } } @media (min-width:783px) and (max-width:1024px) { body.admin-bar .sidebar-fija { top: 32px !important; } } /* Sin sesión/admin bar, el header vuelve al borde superior. */ @media (max-width:1024px) { body:not(.admin-bar) .sidebar-fija { top: 0 !important; } } @media (min-width:768px) and (max-width:1024px) { body:not(.elementor-editor-active) .sidebar-fija { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; } body.admin-bar:not(.elementor-editor-active) .sidebar-fija { top: 32px !important; } body:not(.admin-bar):not(.elementor-editor-active) .sidebar-fija { top: 0 !important; } /* Evita que un wrapper del template Elementor conserve el antiguo hueco superior */ body:not(.elementor-editor-active) .sidebar-fija > .e-con-inner, body:not(.elementor-editor-active) .sidebar-fija > .elementor-container { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } } /* ========================================================================== */ /* ========================================================================== */ /* El único botón Editar permitido en las fichas es el situado al final. */ .codec-detail-hero-left > .codec-detail-edit{ display: none !important; } /* -------------------------------------------------------------------------- */ /* DESKTOP: blindamos la composición original de dos columnas. */ /* La copia de portada creada para móvil/tablet nunca puede aparecer aquí. */ /* -------------------------------------------------------------------------- */ @media (min-width:1025px) { .codec-detail-cover-mobile { display: none !important; } .codec-detail-hero{ display: grid !important; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important; align-items: start !important; gap: 38px !important; width: 100% !important; padding: var(--codec-space-11) var(--codec-space-12) 34px !important; overflow: visible !important; } .codec-detail-hero.has-cover > .codec-detail-hero-left{ display: flex !important; position: relative !important; width: auto !important; margin: 0 !important; transform: none !important; } .codec-detail-hero.has-cover .codec-detail-hero-right{ display: flex !important; position: relative !important; flex-direction: column !important; width: auto !important; margin: 0 !important; transform: none !important; } .codec-detail-hero.has-cover .codec-detail-hero-right:not(.has-horizontal-art){ padding-top: 3px !important; } } /* -------------------------------------------------------------------------- */ /* IPAD/TABLET: sin hueco bajo el header. */ /* Usamos la altura real medida por mobile-header.js y pegamos a ella toolbar.*/ /* -------------------------------------------------------------------------- */ @media (min-width:768px) and (max-width:1024px) { body:not(.elementor-editor-active) .sidebar-fija { margin: 0 !important; margin-bottom: 0 !important; padding-top: var(--codec-space-1) !important; padding-bottom: var(--codec-space-1) !important; min-height: 52px !important; height: auto !important; bottom: auto !important; } body:not(.elementor-editor-active), body.admin-bar:not(.elementor-editor-active) { padding-top: var(--codec-mobile-header-height, 52px) !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed { top: var(--codec-mobile-header-height, 52px) !important; margin-top: 0 !important; } body.admin-bar:not(.elementor-editor-active) .codec-toolbar-sticky, body.admin-bar:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed { top: calc(var(--codec-mobile-header-height, 52px) + 32px) !important; } body:not(.elementor-editor-active) .codec-mobile-toolbar-placeholder { margin-top: 0 !important; } } @media (max-width:1024px) { html body #codec-games-loop > .codec-static-end-message, html body #codec-anime-loop > .codec-static-end-message, html body #codec-books-loop > .codec-static-end-message, html body #codec-series-loop > .codec-static-end-message, html body #codec-pelis-loop > .codec-static-end-message, html body #codec-puzzles-loop > .codec-static-end-message, html body #codec-jerseys-loop > .codec-static-end-message, html body #codec-search-loop > .codec-static-end-message { display: block !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; position: relative !important; inset: auto !important; clear: both !important; text-align: center !important; margin: 28px 0 calc(108px + env(safe-area-inset-bottom, 0px)) !important; padding: 0 !important; z-index: 3 !important; align-self: auto !important; justify-self: stretch !important; } } html body .codec-mobile-bottom-spacer { display: none !important; } html body .codec-mobile-before-end-spacer { display: none !important; } @media (max-width:1024px) { html body .codec-static-end-message { margin-top: 0 !important; margin-bottom: 0 !important; grid-column: 1 / -1 !important; width: 100% !important; } html body .codec-mobile-before-end-spacer:not([hidden]) { display: block !important; grid-column: 1 / -1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; pointer-events: none !important; } html body .codec-mobile-bottom-spacer:not([hidden]) { display: block !important; grid-column: 1 / -1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; pointer-events: none !important; } html body .codec-static-end-message { position: static !important; top: auto !important; transform: none !important; margin: 0 !important; } html body .codec-mobile-before-end-spacer:not([hidden]) { height: 20px !important; min-height: 20px !important; max-height: 20px !important; } html body .codec-mobile-bottom-spacer:not([hidden]) { height: 20px !important; min-height: 20px !important; max-height: 20px !important; } } /* ========================================================================== */ /* ========================================================================== */ .codec-quick-add-launch{width:44px;height:44px;border:0;border-radius:var(--codec-radius-card);background:var(--codec-color-accent-soft);color:var(--codec-color-text-strong-alt);font:400 34px/40px Arial,sans-serif;cursor:pointer;box-shadow:none;display:flex;align-items:center;justify-content:center;top:18px;}.codec-quick-add-launch:hover{background:#f6d7c0;color:var(--codec-color-accent-hover);}.codec-quick-add-backdrop{position:fixed;inset:0;background:rgba(24,27,36,.38);backdrop-filter:blur(3px);z-index:100100;}.codec-quick-add-modal{position:fixed;z-index:100101;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;background:var(--codec-color-surface-warm);border:1px solid #eadfd7;border-radius:24px;box-shadow:0 28px 80px rgba(25,28,38,.25);padding:24px;}.codec-quick-add-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--codec-space-9);margin-bottom:20px;}.codec-quick-add-head h2{margin:0;color:var(--codec-color-text-strong-alt);font-size:27px;line-height:1.1;}.codec-quick-add-head p{margin:5px 0 0;color:#9296a3;font-size:14px;}.codec-quick-add-close{border:0;background:#f4e8df;color:var(--codec-color-text-secondary-alt);width:38px;height:38px;border-radius:var(--codec-radius-card);font-size:28px;line-height:1;cursor:pointer;}.codec-qa-label,.codec-qa-field>label{display:block;color:#6c7180;font-weight:700;font-size:14px;margin:0 0 8px;}.codec-qa-types{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--codec-space-3);margin-bottom:20px;}.codec-qa-type{border:1px solid #e5ddd7;background:var(--codec-color-surface);color:var(--codec-color-text-secondary-alt);border-radius:var(--codec-radius-card);padding:10px 6px;font-weight:700;cursor:pointer;}.codec-qa-type.is-active{border-color:var(--codec-color-accent-hover);background:var(--codec-color-surface-accent-soft);color:var(--codec-color-accent-hover);}.codec-qa-field{margin-top:15px;position:relative;}.codec-qa-field label span{font-weight:400;color:#9a9daa;}.codec-qa-field input,.codec-qa-field select{width:100%;min-height:48px;border:1px solid #dddfe5;border-radius:13px;background:var(--codec-color-surface);padding:0 14px;color:#343846;font-size:16px;outline:none;}.codec-qa-field input:focus,.codec-qa-field select:focus{border-color:#e9a58c;box-shadow:0 0 0 3px rgba(231,91,48,.08);}.codec-qa-duplicates{position:absolute;z-index:3;left:0;right:0;top:100%;margin-top:5px;background:var(--codec-color-surface);border:1px solid #e3e0de;border-radius:13px;box-shadow:0 12px 30px rgba(35,39,49,.14);overflow:hidden;}.codec-qa-duplicate-heading{padding:9px 12px 6px;font-size:12px;font-weight:700;color:var(--codec-color-accent-hover);}.codec-qa-duplicates a{display:flex;justify-content:space-between;gap:var(--codec-space-5);padding:9px 12px;color:var(--codec-color-text-strong-alt);text-decoration:none;border-top:1px solid #f1eeec;}.codec-qa-duplicates a:hover{background:#fff6f0;}.codec-qa-duplicates a span{font-size:12px;color:#8a8f9e;white-space:nowrap;}.codec-qa-actions{display:flex;justify-content:flex-end;margin-top:22px;}.codec-qa-submit{border:0;border-radius:13px;background:var(--codec-color-accent-hover);color:var(--codec-color-surface);padding:12px 24px;font-weight:800;font-size:15px;cursor:pointer;}.codec-qa-submit:disabled{opacity:.42;cursor:default;}.codec-qa-feedback{min-height:20px;margin-top:10px;text-align:right;color:#4b8d55;font-weight:700;font-size:14px;}.codec-qa-open{overflow:hidden!important;} @media (min-width:1025px) {.codec-quick-add-launch{top:18px;right:18px;}} @media (max-width:1024px) {body:not(.elementor-editor-active) .codec-quick-add-launch{top:calc(46px + 16px);}.codec-qa-types{grid-template-columns:repeat(4,1fr);}} @media (max-width:782px) {body:not(.elementor-editor-active) .codec-quick-add-launch{top:16px;right:118px;}body.admin-bar:not(.elementor-editor-active) .codec-quick-add-launch{top:calc(46px + 16px);}.codec-qa-types{grid-template-columns:repeat(2,1fr);}} @media (max-width:1024px) {body:not(.elementor-editor-active) .codec-mobile-search-toggle{right:170px!important;}body:not(.elementor-editor-active) .codec-quick-add-launch{right:118px!important;}} /* Editar + Eliminar al final de todas las fichas, también desktop. */ .codec-detail-edit-bottom { gap:var(--codec-space-4) !important; align-items: center !important; flex-wrap: wrap !important; } @media (min-width:1025px) { body:not(.elementor-editor-active) .codec-detail-edit-bottom { display: flex !important; justify-content: center !important; width: 100% !important; margin-top: var(--codec-space-9) !important; } } .codec-detail-delete { appearance: none; font: inherit; cursor: pointer; } .codec-detail-delete:disabled { opacity: .55; cursor: default; } /* Sugerencias: cabecera con botón de ocultar. */ .codec-qa-duplicate-heading { display: flex; align-items: center; justify-content: space-between; gap:var(--codec-space-4); } .codec-qa-duplicates-hide { border: 0; background: transparent; color: #7d8290; width: 28px; height: 28px; padding: 0; border-radius: var(--codec-radius-sm); font-size: 21px; line-height: 1; cursor: pointer; } .codec-qa-duplicates-hide:hover, .codec-qa-duplicates-hide:focus-visible { background: #f7eee8; color: var(--codec-color-accent-hover); } /* Plataforma: buscador + select. */ .codec-qa-platform-search { margin-bottom: var(--codec-space-3); } /* El + deja de vivir flotando "a ojo". */ .codec-quick-add-launch.is-mobile-inline, .codec-quick-add-launch.is-desktop-inline { position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; flex: 0 0 auto !important; } /* Desktop: después del buscador global. */ @media (min-width:1025px) { .codec-quick-add-launch.is-desktop-inline { display: inline-flex !important; vertical-align: middle !important; margin-left: var(--codec-space-4) !important; width: 44px !important; height: 44px !important; } } /* Móvil + iPad: integrado en el header entre lupa y hamburguesa. */ /* CPT seleccionado: se pliega y queda un selector compacto. */ .codec-qa-type-summary { width: 100%; min-height: 44px; border: 1px solid #e5ddd7; border-radius: var(--codec-radius-card); background: var(--codec-color-surface-accent-soft); color: var(--codec-color-accent-hover); padding: var(--codec-space-3) var(--codec-space-5); display: flex; align-items: center; justify-content: space-between; font: inherit; font-weight: 800; cursor: pointer; margin-bottom: var(--codec-space-2); } .codec-qa-type-summary-arrow { color: #8b8f9b; font-size: 18px; line-height: 1; } .codec-qa-types[hidden], .codec-qa-type-summary[hidden], .codec-qa-label[hidden] { display: none !important; } /* Plataforma funciona como autocomplete; el select queda solo como valor interno. */ .codec-qa-platform-field { position: relative; } .codec-qa-platform-field #codec-qa-platform { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } .codec-qa-platform-suggestions { position: absolute; z-index: 8; left: 0; right: 0; top: 100%; margin-top: 5px; background: var(--codec-color-surface); border: 1px solid #e3e0de; border-radius: 13px; box-shadow: 0 12px 30px rgba(35,39,49,.14); overflow: hidden; max-height: 290px; overflow-y: auto; } .codec-qa-platform-option { display: block; width: 100%; border: 0; border-top: 1px solid #f1eeec; background: var(--codec-color-surface); color: var(--codec-color-text-strong-alt); padding: var(--codec-space-4) var(--codec-space-5); text-align: left; font: inherit; font-weight: 650; cursor: pointer; } .codec-qa-platform-option:first-child { border-top: 0; } .codec-qa-platform-option:hover, .codec-qa-platform-option:focus-visible { background: #fff6f0; color: var(--codec-color-accent-hover); } .codec-qa-platform-empty { padding: 11px var(--codec-space-5); color: #9296a3; font-size: 13px; } /* Eliminar: misma escala tipográfica que Editar, pero visualmente secundario. */ .codec-detail-delete { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap:var(--codec-space-3) !important; min-height: 38px !important; padding: 7px var(--codec-space-6) !important; border-radius: 9px !important; border: 1px solid #efdbd5 !important; background: var(--codec-color-surface) !important; color: #d85b43 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: 0 1px 4px rgba(35,40,50,.03) !important; } .codec-detail-delete:hover, .codec-detail-delete:focus-visible { background: #fff8f5 !important; border-color: #efb8a8 !important; color: #c94b31 !important; } /* Desktop: buscador + botón + forman un único bloque en la esquina superior derecha. */ /* Móvil: modal realmente a pantalla completa. */ @media (max-width:782px) { .codec-quick-add-modal { top: 0 !important; height: 100dvh !important; max-height: 100dvh !important; } .codec-quick-add-head { align-items: flex-start !important; } } /* iPad comparte el ajuste de alineación del cierre. */ @media (min-width:783px) and (max-width:1024px) { .codec-quick-add-head { position: relative !important; padding-right: 48px !important; } .codec-quick-add-close { position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } } /* * El + nace en wp_footer. Hasta que JS encuentre su destino definitivo, * no se muestra ni intercepta clics. Evita el salto/desmontaje inicial. */ .codec-quick-add-launch { visibility: hidden !important; pointer-events: none !important; opacity: 0 !important; } .codec-quick-add-launch.codec-qa-ready { visibility: visible !important; pointer-events: auto !important; opacity: 1 !important; } /* * Plegado robusto del selector de CPT. * Ya no depende únicamente del atributo HTML hidden. */ .codec-qa-type-picker.is-collapsed > .codec-qa-types, .codec-qa-type-picker.is-collapsed > .codec-qa-label { display: none !important; } .codec-qa-type-picker.is-collapsed > .codec-qa-type-summary { display: flex !important; } /* Desktop: no crear wrappers dinámicos alrededor del buscador. */ /* Móvil + iPad: posiciones estables y con separación real entre botones. */ @media (max-width:1024px) { body:not(.elementor-editor-active) .sidebar-fija .codec-quick-add-launch.is-mobile-inline { position: absolute !important; top: 50% !important; right: 58px !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: var(--codec-radius-md) !important; transform: translateY(-50%) !important; margin: 0 !important; font-size: 27px !important; line-height: 1 !important; z-index: 12 !important; } body:not(.elementor-editor-active) .sidebar-fija .elementor-widget-image { max-width: calc(100% - 158px) !important; } } /* * Modal móvil: ocupa toda la zona útil, PERO nunca queda por detrás * de la admin bar de WordPress. */ @media (max-width:782px) { body:not(.admin-bar) .codec-quick-add-modal { top: 0 !important; height: 100dvh !important; max-height: 100dvh !important; } body.admin-bar .codec-quick-add-modal { top: 46px !important; height: calc(100dvh - 46px) !important; max-height: calc(100dvh - 46px) !important; } .codec-quick-add-modal { bottom: auto !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100vw !important; max-width: none !important; border-radius: 0 !important; padding: calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)) !important; } .codec-quick-add-head { position: relative !important; min-height: 48px !important; padding-right: 58px !important; margin-bottom: var(--codec-space-7) !important; } .codec-quick-add-close { position: absolute !important; top: 0 !important; right: 0 !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--codec-radius-card) !important; background: #f4e8df !important; color: var(--codec-color-text-secondary-alt) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 28px !important; line-height: 1 !important; transform: none !important; box-shadow: none !important; } /* Neutralizamos estilos globales de botones/hover. */ .codec-quick-add-close:hover, .codec-quick-add-close:focus, .codec-quick-add-close:focus-visible, .codec-quick-add-close:active { background: #eadfd7 !important; color: var(--codec-color-text-secondary-alt) !important; border: 0 !important; outline: none !important; box-shadow: none !important; transform: none !important; } } /* iPad: mismo cierre estable, sin hover rojo heredado. */ @media (min-width:783px) and (max-width:1024px) { .codec-quick-add-close { top: 0 !important; right: 0 !important; margin: 0 !important; background: #f4e8df !important; color: var(--codec-color-text-secondary-alt) !important; transform: none !important; } .codec-quick-add-close:hover, .codec-quick-add-close:focus, .codec-quick-add-close:focus-visible, .codec-quick-add-close:active { background: #eadfd7 !important; color: var(--codec-color-text-secondary-alt) !important; border: 0 !important; outline: none !important; box-shadow: none !important; transform: none !important; } } .codec-quick-add-launch, .codec-quick-add-launch.codec-qa-ready { visibility: visible !important; pointer-events: auto !important; opacity: 1 !important; } @media (min-width:1025px) { /* * El propio buscador es el ancla del +. * Conserva su ancho original y el botón queda justo a su derecha. */ .codec-global-search.codec-search-plus-anchor { position: relative !important; overflow: visible !important; } .codec-global-search.codec-search-plus-anchor > .codec-quick-add-launch.is-desktop-inline { position: absolute !important; top: 50% !important; left: calc(100% + 10px) !important; right: auto !important; bottom: auto !important; transform: translateY(-50%) !important; width: var(--codec-touch-target) !important; height: var(--codec-touch-target) !important; min-width: var(--codec-touch-target) !important; min-height: var(--codec-touch-target) !important; margin: 0 !important; z-index: 20 !important; } } /* * Móvil/iPad: el botón ya no pasa por un estado invisible. * Al insertarse en el header tiene coordenadas deterministas. */ @media (max-width:1024px) { body:not(.elementor-editor-active) .sidebar-fija > .codec-quick-add-launch.is-mobile-inline { position: absolute !important; top: 50% !important; right: 58px !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; z-index: 30 !important; } body:not(.elementor-editor-active) .sidebar-fija .codec-mobile-menu-toggle { right: 10px !important; z-index: 30 !important; } body:not(.elementor-editor-active) .sidebar-fija .codec-mobile-search-toggle { right: 106px !important; z-index: 30 !important; } } @media (min-width:1025px) and (hover:hover) and (pointer:fine) { /* Solo vistas de cards. Lista conserva siempre su información. */ body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .codec-game-card .codec-card-badges { opacity: 0 !important; visibility: hidden !important; transform: translateY(-4px) !important; transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease !important; } body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .codec-game-card :is( .codec-game-card-title, .elementor-widget-heading.codec-game-card-title, .elementor-heading-title ) { opacity: 0 !important; visibility: hidden !important; transform: translateY(5px) !important; transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease !important; } /* Un degradado muy suave mejora la lectura solo durante el hover. */ body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .codec-game-card::after { opacity: 0 !important; transition: opacity 0.16s ease !important; } body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .codec-game-card:hover .codec-card-badges, body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .e-loop-item:has(.codec-game-card):hover .codec-game-card .codec-card-badges, body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .codec-game-card:hover :is( .codec-game-card-title, .elementor-widget-heading.codec-game-card-title, .elementor-heading-title ), body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .e-loop-item:has(.codec-game-card):hover .codec-game-card :is( .codec-game-card-title, .elementor-widget-heading.codec-game-card-title, .elementor-heading-title ) { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .codec-game-card:hover::after, body:not(.codec-view-list):not(.codec-view-tiny) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop, #codec-search-loop ) .e-loop-item:has(.codec-game-card):hover .codec-game-card::after { opacity: 1 !important; } } /* Libros: contraste seguro para la badge Leyendo. */ #codec-books-loop .codec-card-badge-status.codec-status-leyendo { background: rgba(255,255,255,.95) !important; color: #2563B8 !important; border-color: rgba(37,99,184,.55) !important; text-shadow: none !important; } @media (min-width:1025px) and (hover:hover) and (pointer:fine) { /* Menú Vista reorganizado: modo + escala 1–4. */ .codec-view-menu.codec-view-menu-enhanced { min-width: 300px !important; } .codec-view-mode-section, .codec-view-size-section { padding: var(--codec-space-1) 0 var(--codec-space-4); } .codec-view-size-section { padding-top: var(--codec-space-4); border-top: 1px solid #E8DED8; } .codec-view-mode-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:var(--codec-space-3); margin-top: 7px; } .codec-view-size-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 7px; } .codec-view-type-option, .codec-view-menu-enhanced .codec-view-size-row .codec-view-option { min-height: var(--codec-control-height-md) !important; padding: 7px var(--codec-space-4) !important; border: 1px solid #E7DED8 !important; border-radius: var(--codec-radius-md) !important; background: var(--codec-color-surface) !important; color: #657080 !important; font-weight: 800 !important; text-align: center !important; justify-content: center !important; } .codec-view-type-option:hover, .codec-view-type-option.is-active, .codec-view-menu-enhanced .codec-view-size-row .codec-view-option:hover, .codec-view-menu-enhanced .codec-view-size-row .codec-view-option.is-active { border-color: #FFD7C5 !important; background: #FFF0E8 !important; color: var(--codec-color-accent-orange) !important; } .codec-view-size-row .codec-view-option::before { display:none !important; } /* Toggle ON = elemento siempre visible. */ body:not(.codec-view-list):not(.codec-view-tiny):not(.codec-badges-hidden) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card .codec-card-badges, body:not(.codec-view-list):not(.codec-view-tiny):not(.codec-name-hidden) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card :is(.codec-game-card-title,.elementor-widget-heading.codec-game-card-title,.elementor-heading-title) { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Toggle OFF = oculto en reposo, visible en hover. */ body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card:hover .codec-card-badges, body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .e-loop-item:has(.codec-game-card):hover .codec-game-card .codec-card-badges { display:flex !important; opacity:1 !important; visibility:visible !important; transform:none !important; } body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card:hover .codec-card-badges .codec-card-badge, body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .e-loop-item:has(.codec-game-card):hover .codec-game-card .codec-card-badges .codec-card-badge { display:inline-flex !important; } body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card:hover :is(.codec-game-card-title,.elementor-widget-heading.codec-game-card-title,.elementor-heading-title), body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .e-loop-item:has(.codec-game-card):hover .codec-game-card :is(.codec-game-card-title,.elementor-widget-heading.codec-game-card-title,.elementor-heading-title) { display:block !important; opacity:1 !important; visibility:visible !important; transform:none !important; } /* Games: en hover (y con Badges ON también en reposo), mostrar Estado + Plataforma incluso fuera de Biblioteca. */ #codec-games-loop .codec-game-card:hover .codec-card-badge-status, #codec-games-loop .e-loop-item:has(.codec-game-card):hover .codec-card-badge-status, body:not(.codec-badges-hidden) #codec-games-loop .codec-card-badge-status { display:inline-flex !important; } /* Cards y Lista: misma tipografía, peso y escala visual. */ /* En Lista no existe un tamaño de card que configurar. */ .codec-view-menu-enhanced .codec-view-size-section[hidden] { display: none !important; } body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card .codec-card-badges { opacity: 0 !important; visibility: hidden !important; transform: translateY(-4px) !important; } body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card :is(.codec-game-card-title,.elementor-widget-heading.codec-game-card-title,.elementor-heading-title) { opacity: 0 !important; visibility: hidden !important; transform: translateY(5px) !important; } } /* Los encabezados de cualquier agrupación actúan como acordeón. */ :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.codec-generic-group-heading,.codec-backlog-group-heading) { cursor: pointer !important; user-select: none !important; -webkit-user-select: none !important; position: relative !important; } :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.codec-generic-group-heading,.codec-backlog-group-heading)::after { position: absolute !important; right: 4px !important; top: 50% !important; transform: translateY(-52%) rotate(0deg) !important; color: var(--codec-color-muted) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1 !important; transition: transform .16s ease, color .16s ease !important; } :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.codec-generic-group-heading,.codec-backlog-group-heading):hover::after { color: var(--codec-control-accent) !important; } :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.codec-generic-group-heading,.codec-backlog-group-heading).is-collapsed::after { transform: translateY(-52%) rotate(-90deg) !important; } /* La badge del propio CPT es estructural (agrupación/búsqueda), no visual. No debe aparecer nunca dentro de las cards, tampoco en hover. */ .codec-game-card .codec-card-badge-cpt, .e-loop-item .codec-card-badge-cpt, .elementor-grid-item .codec-card-badge-cpt { display: none !important; } @media (min-width:1025px) and (hover:hover) and (pointer:fine) { body:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card::after { display: block !important; } body:not(.codec-view-list):not(.codec-view-tiny):not(.codec-badges-hidden) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card::after, body:not(.codec-view-list):not(.codec-view-tiny):not(.codec-name-hidden) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card::after { opacity: 1 !important; } body.codec-badges-hidden.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card::after { opacity: 0 !important; } body.codec-badges-hidden.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .codec-game-card:hover::after, body.codec-badges-hidden.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) .e-loop-item:has(.codec-game-card):hover .codec-game-card::after { opacity: 1 !important; } } /* La flecha del acordeón vive junto al nombre, no al extremo de la fila. */ :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.codec-generic-group-heading,.codec-backlog-group-heading) { padding-right: 0 !important; } :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.codec-generic-group-heading,.codec-backlog-group-heading)::after { content: none !important; display: none !important; } .codec-group-collapse-indicator { display: inline-flex; align-items: center; justify-content: center; margin-left: 7px; color: var(--codec-color-muted); font-size: 15px; font-weight: 800; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .16s ease, color .16s ease; vertical-align: middle; } :is(.codec-generic-group-heading,.codec-backlog-group-heading):hover .codec-group-collapse-indicator { color: var(--codec-control-accent); } :is(.codec-generic-group-heading,.codec-backlog-group-heading).is-collapsed .codec-group-collapse-indicator { transform: rotate(-90deg); } @media (max-width:1024px) { body:not(.elementor-editor-active) .codec-view-menu.codec-view-menu-enhanced { min-width: min(360px, calc(100vw - 24px)) !important; width: min(360px, calc(100vw - 24px)) !important; padding: var(--codec-space-7) !important; } .codec-view-menu-enhanced .codec-view-mode-section, .codec-view-menu-enhanced .codec-view-size-section { padding: 0 0 var(--codec-space-6) !important; } .codec-view-menu-enhanced .codec-view-size-section { padding-top: var(--codec-space-6) !important; border-top: 1px solid #E8DED8 !important; } .codec-view-menu-enhanced .codec-view-mode-row { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:var(--codec-space-3) !important; margin-top: var(--codec-space-3) !important; } .codec-view-menu-enhanced .codec-view-size-row { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 7px !important; margin-top: var(--codec-space-3) !important; } .codec-view-menu-enhanced .codec-view-type-option, .codec-view-menu-enhanced .codec-view-mode-row .codec-view-option, .codec-view-menu-enhanced .codec-view-size-row .codec-view-option { min-height: var(--codec-control-height-lg) !important; padding: var(--codec-space-3) var(--codec-space-3) !important; border: 1px solid #E7DED8 !important; border-radius: var(--codec-radius-md) !important; background: var(--codec-color-surface) !important; color: #657080 !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 800 !important; text-align: center !important; justify-content: center !important; } .codec-view-menu-enhanced .codec-view-type-option.is-active, .codec-view-menu-enhanced .codec-view-mode-row .codec-view-option.is-active, .codec-view-menu-enhanced .codec-view-size-row .codec-view-option.is-active { border-color: #FFD7C5 !important; background: #FFF0E8 !important; color: var(--codec-color-accent-orange) !important; } .codec-view-menu-enhanced .codec-view-size-row .codec-view-option::before, .codec-view-menu-enhanced .codec-view-size-section[hidden] { display: none !important; } } /* En móvil el panel sólo hace scroll si realmente supera el alto útil disponible. Eliminamos el antiguo límite artificial de 58vh/430px. */ @media (max-width:1024px) { body:not(.elementor-editor-active) .codec-view-menu.codec-view-menu-enhanced { max-height: calc(100dvh - 135px) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; } } @media (min-width:1025px) and (hover:hover) and (pointer:fine) { /* Cards / Lista: exactamente la misma tipografía y sin negrita. */ .codec-view-menu-enhanced .codec-view-mode-row .codec-view-type-option, .codec-view-menu-enhanced .codec-view-mode-row .codec-view-option { font-family: inherit !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: 0 !important; } /* Vista Lista: el bloque de resultados queda centrado dentro del área útil. */ body.codec-view-list :is(#codec-games-loop,#codec-anime-loop,#codec-books-loop,#codec-series-loop,#codec-pelis-loop,#codec-puzzles-loop,#codec-jerseys-loop,#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop,#codec-search-loop) :is(.elementor-loop-container,.elementor-grid) { width: min(100%, 1180px) !important; margin-left: auto !important; margin-right: auto !important; } } /* Las filas de Elementos que no aplican en Lista se ocultan de verdad. */ .codec-card-element-row[hidden] { display: none !important; } @media (min-width:1025px) and (hover:hover) and (pointer:fine) { .codec-view-menu-enhanced .codec-view-mode-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; } .codec-view-menu-enhanced .codec-view-mode-row > .codec-view-type-option, .codec-view-menu-enhanced .codec-view-mode-row > .codec-view-option { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap:var(--codec-space-2) !important; text-align: center !important; padding-left: var(--codec-space-4) !important; padding-right: var(--codec-space-4) !important; } } .codec-library-content-switch-row{ width:100%; margin: 0; padding: var(--codec-space-8) 0 var(--codec-space-9); background:var(--codec-color-surface); } .codec-library-content-switch{ display:flex; width:max-content; max-width:100%; margin: 0 auto; padding: var(--codec-space-1); gap:var(--codec-space-1); border:1px solid #eadfd7; border-radius:14px; background:var(--codec-color-surface); box-shadow:0 4px 16px rgba(38,44,60,.04); } .codec-library-content-option{ display:flex; align-items:center; justify-content:center; min-width:112px; min-height:38px; padding: 7px var(--codec-space-8); border-radius: var(--codec-radius-md); color:#687083; font-size:14px; font-weight:600; line-height:1; text-decoration:none!important; transition:background-color .16s ease,color .16s ease; } .codec-library-content-option:hover{ color:#ff7d48; background:#fff7f1; } .codec-library-content-option.is-active{ color:#ff7d48; background:#fff0e6; } /* * En modo Sagas los filtros específicos de Game dejan de tener sentido. * Conservamos Vista para reutilizar tamaños/cards/lista. */ body.codec-library-sagas-mode .codec-toolbar-left, body.codec-library-sagas-mode .codec-group-dropdown{ display:none!important; } body.codec-library-sagas-mode .codec-toolbar{ justify-content:flex-end; } body.codec-library-sagas-mode .codec-toolbar-right{ margin-left: auto; } /* Las Sagas usan las mismas cards; no tienen plataforma/estado. */ body.codec-library-sagas-mode .codec-card-badges:empty{ display:none!important; } @media (max-width:767px) { .codec-library-content-option{ min-width:104px; min-height:40px; font-size:14px; } body.codec-library-sagas-mode .codec-toolbar-left, body.codec-library-sagas-mode .codec-group-dropdown{ display:none!important; } .codec-library-content-switch-row{ padding: var(--codec-space-6) 0 var(--codec-space-7); } .codec-library-content-switch{ margin: 0 auto; } } .codec-library-content-switch-row{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:1 !important; } @media (max-width:1024px) { .codec-library-content-switch-row{ padding: var(--codec-space-5) 0 var(--codec-space-7) !important; margin: 0 !important; } .codec-library-content-switch{ margin: 0 auto !important; } .codec-library-content-option{ min-width:108px !important; min-height:40px !important; padding: 7px var(--codec-space-7) !important; font-size:14px !important; } } /* Desktop: acercar el selector a la barra de filtros */ /* Móvil: reducir el hueco entre Juegos | Sagas y el título */ @media (max-width:1024px) { .codec-library-content-switch-row + .elementor-element, .codec-library-content-switch-row + .elementor-widget{ margin-top: -12px !important; } } /* Desktop: prácticamente pegado a la zona inferior de la barra de filtros */ @media (min-width:1025px) { .codec-library-content-switch-row{ padding-top: 0 !important; margin-top: -24px !important; } } /* Móvil: quitar el exceso de aire sobre el selector. Se mantiene el título por encima, pero mucho más próximo. */ @media (max-width:1024px) { .codec-library-content-switch-row{ margin-top: -8px !important; padding-top: 0 !important; padding-bottom: var(--codec-space-9) !important; } } .codec-global-search-suggestion{ justify-content:flex-start; } .codec-global-search-suggestion-thumb{ flex:0 0 34px; width:34px; height:46px; border-radius:5px; overflow:hidden; background:#f4f1ee; box-shadow:0 1px 4px rgba(47,54,69,.10); } .codec-global-search-suggestion-thumb img{ display:block; width:100%; height:100%; object-fit:cover; } .codec-global-search-suggestion-thumb.is-empty{ box-shadow:none; } .codec-global-search-suggestion-title{ flex:1 1 auto; } .codec-global-search-suggestion-type{ margin-left: auto; } .codec-context-suggestion-thumb{ flex:0 0 32px; } .codec-context-suggestion-title{ flex:1 1 auto; } .codec-context-suggestion{ display:grid !important; grid-template-columns:32px minmax(0, 1fr) auto !important; align-items:center !important; gap:var(--codec-space-4) !important; min-height:60px !important; padding: 7px var(--codec-space-4) !important; } .codec-context-suggestion-thumb{ display:block !important; width:32px !important; height:44px !important; min-width:32px !important; border-radius:5px !important; overflow:hidden !important; background:#f4f1ee !important; box-shadow:0 1px 4px rgba(47,54,69,.10) !important; } .codec-context-suggestion-thumb img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; } .codec-context-suggestion-thumb.is-empty{ box-shadow:none !important; background:transparent !important; } .codec-context-suggestion-title{ grid-column:2 !important; min-width:0 !important; align-self:center !important; } .codec-context-suggestion-platform, .codec-context-suggestion-icon{ grid-column:3 !important; margin-left: 0 !important; align-self:center !important; justify-self:end !important; } .codec-saga-related-panel{ margin-top: 0; } .codec-saga-related-tabs{ justify-content:space-between; gap:var(--codec-space-5); } .codec-saga-related-filter{ display:flex; align-items:center; gap:var(--codec-space-1); margin-left: auto; padding: var(--codec-space-1); } .codec-saga-related-filter button{ min-height:34px; padding: var(--codec-space-2) 11px; border:0; border-radius:var(--codec-radius-sm); background:transparent; color:#697180; font:inherit; font-size:12px; font-weight:700; cursor:pointer; } .codec-saga-related-filter button:hover{ color:#FF6425; background:#FFF7F2; } .codec-saga-related-filter button.is-active{ color:#FF6425; background:var(--codec-color-surface-accent-soft); } .codec-saga-related-body{ padding: 22px var(--codec-space-10) 25px; } .codec-saga-related-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--codec-space-7); } .codec-saga-related-card[hidden]{ display:none!important; } .codec-saga-related-card a{ display:block; color:inherit; text-decoration:none!important; } .codec-saga-related-card-image{ position:relative; overflow:hidden; width:100%; aspect-ratio:2/3; border:1px solid #E2DEDB; border-radius:11px; background:#F3F4F6; box-shadow:0 4px 12px rgba(35,40,50,.13); } .codec-saga-related-card-image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .18s ease; } .codec-saga-related-card:hover .codec-saga-related-card-image img{ transform:scale(1.025); } .codec-saga-related-card-overlay{ position:absolute; right:0; bottom:0; left:0; padding: 34px 9px 9px; background: linear-gradient( 180deg, transparent 0%, rgba(22,26,35,.80) 100% ); color:var(--codec-color-surface); } .codec-saga-related-card-overlay span{ display:inline-flex; margin-bottom: var(--codec-space-1); padding: 3px var(--codec-space-2); border-radius: var(--codec-radius-pill); background:rgba(255,255,255,.92); color:#FF6425; font-size:8px; font-weight:800; line-height:1; } .codec-saga-related-card-overlay strong{ display:block; overflow:hidden; font-size:11px; font-weight:800; line-height:1.18; text-overflow:ellipsis; } @media (max-width:1250px) { .codec-saga-related-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } } @media (max-width:1024px) { .codec-saga-related-tabs{ align-items:center; } .codec-saga-related-filter{ overflow-x:auto; max-width:60%; } .codec-saga-related-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; } } @media (max-width:767px) { .codec-saga-related-tabs{ display:block; padding-bottom: var(--codec-space-3); } .codec-saga-related-filter{ width:100%; max-width:none; margin: 0; padding: 0 0 7px; } .codec-saga-related-filter button{ white-space:nowrap; } .codec-saga-related-body{ padding: var(--codec-space-7) var(--codec-space-6) var(--codec-space-8); } .codec-saga-related-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--codec-space-4); } .codec-saga-related-card-image{ border-radius: var(--codec-radius-md); } .codec-saga-related-card-overlay{ padding: var(--codec-space-10) 7px 7px; } .codec-saga-related-card-overlay strong{ font-size:9px; } } /* * Las estadísticas de Saga son dinámicas. * El grid existente ya se adapta por número de celdas; evitamos que una * Saga con pocas celdas estire visualmente demasiado cada bloque. */ .codec-detail-stats.codec-detail-stats-count-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .codec-detail-stats.codec-detail-stats-count-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .codec-detail-stats.codec-detail-stats-count-5{ grid-template-columns:repeat(5,minmax(0,1fr)); } /* * Contenidos de Saga: * imagen limpia por defecto. Badge + nombre solo aparecen al hover/focus, * igual que el comportamiento de las cards de los listados en desktop. */ .codec-saga-related-card-overlay{ opacity:0; visibility:hidden; transform:translateY(5px); transition: opacity .16s ease, visibility .16s ease, transform .16s ease; pointer-events:none; } .codec-saga-related-card:hover .codec-saga-related-card-overlay, .codec-saga-related-card:focus-within .codec-saga-related-card-overlay{ opacity:1; visibility:visible; transform:translateY(0); } .codec-saga-related-card-image::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .16s ease; pointer-events:none; } .codec-saga-related-card:hover .codec-saga-related-card-image::after, .codec-saga-related-card:focus-within .codec-saga-related-card-image::after{ background:rgba(0,0,0,.12); } /* El overlay debe quedar por encima del oscurecimiento suave. */ .codec-saga-related-card-overlay{ z-index:2; } /* En touch no dejamos información permanente sobre la portada. */ @media (hover:none) { .codec-saga-related-card-overlay{ display:none; } } @media (max-width:1024px) { .codec-detail-stats.codec-detail-stats-count-3, .codec-detail-stats.codec-detail-stats-count-4, .codec-detail-stats.codec-detail-stats-count-5{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:767px) { .codec-detail-stats.codec-detail-stats-count-3, .codec-detail-stats.codec-detail-stats-count-4, .codec-detail-stats.codec-detail-stats-count-5{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* * No hay geometría, offsets, alturas ni márgenes específicos para Saga. * La ficha usa exactamente las mismas reglas que Anime, Series, Books, * Pelis, Jerseys y Puzzles: * * .codec-detail-hero-right.has-horizontal-art * .codec-detail-hero-right.has-horizontal-art::before * .codec-detail-hero-right.has-horizontal-art::after * * Este bloque solo documenta intencionadamente la ausencia de overrides. */ @media (min-width:1025px) { .codec-detail-stats.codec-detail-stats-count-1{ grid-template-columns:1fr; } .codec-detail-stats.codec-detail-stats-count-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .codec-detail-stats.codec-detail-stats-count-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .codec-detail-stats.codec-detail-stats-count-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .codec-detail-stats.codec-detail-stats-count-5{ grid-template-columns:repeat(5,minmax(0,1fr)); } .codec-detail-stats.codec-detail-stats-count-6{ grid-template-columns:repeat(3,minmax(0,1fr)); } .codec-detail-stats.codec-detail-stats-count-7{ grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:1024px) { .codec-detail-stats[class*="codec-detail-stats-count-"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* * Saga ya no tiene ningún HTML/CSS específico para cabecera, portada, * fondo horizontal, título, badges o grid de estadísticas. * * [codec_saga_detail] pasa por gato_codec_detail_full_shortcode() * y gato_codec_detail_hero_shortcode(), exactamente igual que: * Anime, Books, Series, Pelis, Jerseys y Puzzles. * * Lo único específico de Saga permanece después del hero: * - stats dinámicas (Puntuación, Cards, tipos, Horas) * - panel "Contenido de la Saga" * - orden panel de contenido antes de Notas */ /* * El problema NO era la estructura del hero: era únicamente el área * ocupada por el pseudo-fondo del panel derecho. * * En los singles antiguos el fondo puede sobresalir 28px del panel derecho. * En la plantilla Elementor de Saga esa extensión queda recortada. * * Para Saga pintamos exactamente el mismo fondo/degradado sobre el HERO * exterior, que no está recortado. La geometría reproduce la posición que * tendría el ::before del panel derecho: * * padding izq. 30 + columna portada 320 + gap 38 - extensión 28 = 360px */ @media (min-width:1025px) { .codec-detail-hero.codec-saga-hero-background-fix{ position:relative; isolation:isolate; } /* Desactivamos únicamente el fondo del panel derecho en Saga. */ .codec-saga-hero-background-fix .codec-detail-hero-right.has-horizontal-art::before, .codec-saga-hero-background-fix .codec-detail-hero-right.has-horizontal-art::after{ content:none !important; display:none !important; } .codec-detail-hero.codec-saga-hero-background-fix::before, .codec-detail-hero.codec-saga-hero-background-fix::after{ content:""; position:absolute; top:0; right:0; left:360px; height:525px; pointer-events:none; } .codec-detail-hero.codec-saga-hero-background-fix::before{ z-index:-2; background-image:var(--codec-game-horizontal-image); background-repeat:no-repeat; background-size:cover; background-position:center center; opacity:.90; filter: saturate(.96) contrast(.98) brightness(1.01); } .codec-detail-hero.codec-saga-hero-background-fix::after{ z-index:-1; background: linear-gradient( 90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 10%, rgba(255,255,255,.62) 22%, rgba(255,255,255,.28) 38%, rgba(255,255,255,.08) 52%, rgba(255,255,255,0) 66% ), linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 48%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.32) 73%, rgba(255,255,255,.72) 87%, rgba(255,255,255,1) 100% ); } /* El contenido sigue por encima del fondo. */ .codec-saga-hero-background-fix > .codec-detail-hero-left, .codec-saga-hero-background-fix > .codec-detail-hero-right{ position:relative; z-index:1; } } /* * En modo Sagas: * - desaparecen filtros propios del CPT; * - desaparece Agrupar; * - Ordenar conserva únicamente Nombre; * - Vista sigue intacta; * - Cards normales no se alteran fuera de este modo. */ body.codec-library-sagas-mode .codec-sort-option[data-sort-field]:not([data-sort-field="title"]){ display:none !important; } /* * Cualquier badge CPT/plataforma/estado que una plantilla concreta intente * dibujar sobre una Saga se oculta; la portada permanece limpia. */ body.codec-library-sagas-mode .codec-card-badges:empty, body.codec-library-sagas-mode .codec-card-badges:empty, body.codec-library-sagas-mode .codec-view-elements-row[data-element="badges"], body.codec-library-sagas-mode [data-codec-view-element="badges"], body.codec-library-sagas-mode .codec-view-elements-row:has(input[name="codec_show_badges"]), body.codec-library-sagas-mode .codec-view-elements-row:has(input[data-codec-element="badges"]){ display:none !important; } /* En Sagas ocultamos el ajuste Badges del menú Vista. */ /* En Sagas el nombre está visible por defecto. */ body.codec-library-sagas-mode .codec-game-card-title{ opacity:1; visibility:visible; } /* Lista de Sagas: una sola línea limpia. */ body.codec-library-sagas-mode.codec-view-list .codec-loop-grid, body.codec-library-sagas-mode.codec-view-list .elementor-loop-container{ display:block !important; } body.codec-library-sagas-mode.codec-view-list .codec-game-card, body.codec-library-sagas-mode.codec-view-list .codec-card, body.codec-library-sagas-mode.codec-view-list .e-loop-item{ width:100% !important; max-width:none !important; min-height:0 !important; border-bottom:1px solid rgba(95,101,117,.20); } body.codec-library-sagas-mode.codec-view-list .codec-game-card > a, body.codec-library-sagas-mode.codec-view-list .codec-card > a, body.codec-library-sagas-mode.codec-view-list .e-loop-item > a{ display:flex !important; align-items:center !important; min-height:52px !important; padding: var(--codec-space-4) var(--codec-space-6) !important; gap:var(--codec-space-5) !important; } body.codec-library-sagas-mode.codec-view-list .codec-card-image{ display:none !important; } body.codec-library-sagas-mode.codec-view-list .codec-game-card-title{ position:static !important; display:block !important; width:auto !important; margin: 0 !important; padding: 0 !important; color:inherit !important; background:none !important; font-size:14px !important; font-weight:700 !important; line-height:1.2 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.codec-library-sagas-mode.codec-view-list .codec-game-card::before, body.codec-library-sagas-mode.codec-view-list .codec-game-card::after, body.codec-library-sagas-mode.codec-view-list .codec-card::before, body.codec-library-sagas-mode.codec-view-list .codec-card::after{ display:none !important; } /* * La lista de Sagas reutiliza el Loop Item de las cards, pero visualmente * debe ser una fila: Nombre a la izquierda + Favorito a la derecha. * Sin portada, badges, borde, radio, sombra ni altura heredada. */ body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) :is(.elementor-loop-container,.elementor-grid){ grid-auto-rows: min-content !important; align-items: start !important; row-gap: 0 !important; } body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .e-loop-item:has(.codec-game-card), body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .elementor-grid-item{ width:100% !important; max-width:none !important; height:auto !important; min-height:0 !important; margin: 0 !important; padding: 0 !important; border:0 !important; border-bottom:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; overflow:visible !important; align-self:start !important; } /* Esta es específicamente la línea que seguía apareciendo en DevTools. */ body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .codec-game-card{ aspect-ratio:auto !important; width:100% !important; max-width:none !important; height:32px !important; min-height:32px !important; margin: 0 !important; padding: 0 var(--codec-space-1) !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:var(--codec-space-4) !important; border:0 !important; border-bottom:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; overflow:visible !important; transform:none !important; } /* No dejamos que ningún contenedor Elementor interno vuelva a dar altura. */ body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .codec-game-card > .elementor-element, body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .codec-game-card > .e-con{ min-height:0 !important; margin: 0 !important; } /* Portada y badges normales no forman parte de la fila de Sagas. */ body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) :is(.codec-card-image-layer,.codec-card-image,.codec-card-badges){ display:none !important; } /* Nombre: una única línea, ocupando todo el espacio disponible. */ body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .codec-game-card :is(.codec-game-card-title,.elementor-widget-heading.codec-game-card-title,.elementor-heading-title), body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .codec-game-card .codec-game-card-title *{ position:static !important; inset:auto !important; transform:none !important; flex:1 1 auto !important; min-width:0 !important; width:auto !important; margin: 0 !important; padding: 0 !important; color:#2F3747 !important; background:transparent !important; font-size:14px !important; font-weight:650 !important; line-height:1.2 !important; text-align:left !important; text-shadow:none !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* * Favorito en Lista de Sagas. * El marker sigue siendo detector; dibujamos una estrella compacta al final * de la MISMA línea, no debajo del nombre. */ body.codec-library-sagas-mode.codec-view-list:not(.codec-favorite-hidden) :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .codec-game-card:has(.codec-card-god-marker)::before{ content:"★" !important; position:static !important; inset:auto !important; flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; min-width:20px !important; margin: 0 !important; padding: 0 !important; border:1px solid #E4A51C !important; border-radius:6px !important; background:#FFF7D8 !important; color:#C98B00 !important; font-size:12px !important; line-height:1 !important; box-shadow:none !important; transform:none !important; clip-path:none !important; } /* No hay overlay/fondo inferior en estas filas. */ body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .codec-game-card::after{ content:none !important; display:none !important; } /* * Recuperamos únicamente el separador fino entre filas de Sagas. * Sin radio, sin caja y sin aumentar la altura de la fila. */ body.codec-library-sagas-mode.codec-view-list :is( #codec-games-loop, #codec-anime-loop, #codec-books-loop, #codec-series-loop, #codec-pelis-loop, #codec-puzzles-loop, #codec-jerseys-loop ) .e-loop-item:has(.codec-game-card){ border-bottom:1px solid rgba(95,101,117,.20) !important; } .codec-static-end-message{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; } .codec-static-end-message .codec-end-title{ display:block; } .codec-static-end-message .codec-end-count{ display:block; font-size:.78em; line-height:1.25; opacity:.72; } html.codec-sidebar-pref-collapsed{ --codec-sidebar-width:var(--codec-sidebar-collapsed-width); } .codec-native-sidebar{ display:none; } /* * V1 híbrida: * - Desktop: sidebar nativo. * - <=1024px: sigue funcionando el header/sidebar Elementor existente. */ @media (min-width:1025px) { body.codec-native-sidebar-enabled:not(.elementor-editor-active){ padding-left:var(--codec-sidebar-width) !important; transition:padding-left var(--codec-sidebar-transition); } /* El Sidebar Vertical de Elementor deja de intervenir solo en desktop. */ body.codec-native-sidebar-enabled:not(.elementor-editor-active) .sidebar-fija{ display:none !important; } .codec-native-sidebar{ position:fixed; z-index:10020; top:0; left:0; bottom:0; display:flex; flex-direction:column; width:var(--codec-sidebar-width); min-width:var(--codec-sidebar-width); height:100vh; background:var(--codec-sidebar-bg); border-right:1px solid rgba(83,91,107,.08); box-shadow:8px 0 28px rgba(44,49,60,.025); color:var(--codec-sidebar-text); transition: width var(--codec-sidebar-transition), min-width var(--codec-sidebar-transition); } body.admin-bar .codec-native-sidebar{ top:32px; height:calc(100vh - 32px); } .codec-sidebar-brand{ position:relative; flex:0 0 auto; display:flex; align-items:center; min-height:92px; padding: var(--codec-space-8) var(--codec-space-8) var(--codec-space-5); } .codec-sidebar-logo{ display:flex; align-items:center; gap:9px; min-width:0; color:#566078; text-decoration:none !important; } .codec-sidebar-logo:hover{ color:#566078; } .codec-sidebar-logo-mark{ flex:0 0 42px; width:42px; height:42px; object-fit:cover; border-radius:50%; } .codec-sidebar-logo-fallback{ flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; font-size:34px; } .codec-sidebar-logo-word{ overflow:hidden; max-width:110px; opacity:1; font-size:27px; line-height:1; font-weight:700; letter-spacing:.01em; transition: opacity var(--codec-sidebar-transition), max-width var(--codec-sidebar-transition); } /* * Botón de plegado flotando sobre el borde, como control de la propia app. */ .codec-sidebar-collapse{ position:absolute; right:-14px; top:64px; z-index:4; width:28px; height:28px; padding: 0; display:grid; place-items:center; border:1px solid rgba(83,91,107,.14); border-radius:50%; background:var(--codec-color-surface); color:#697184; box-shadow:0 5px 16px rgba(44,49,60,.10); cursor:pointer; transition: background .15s ease, color .15s ease, transform .15s ease; } .codec-sidebar-collapse:hover{ color:var(--codec-sidebar-accent); background:var(--codec-color-surface-warm); transform:scale(1.05); } .codec-sidebar-collapse .dashicons{ width:18px; height:18px; font-size:18px; line-height:18px; } /* * Solo la zona navegable hace scroll. * Logo y usuario/admin permanecen accesibles siempre. */ .codec-sidebar-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding: var(--codec-space-1) var(--codec-space-5) var(--codec-space-5); scrollbar-width:thin; scrollbar-color:rgba(83,91,107,.18) transparent; } .codec-sidebar-scroll::-webkit-scrollbar{ width:5px; } .codec-sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(83,91,107,.18); border-radius: var(--codec-radius-pill); } .codec-sidebar-nav{ display:flex; flex-direction:column; } .codec-sidebar-section{ display:flex; flex-direction:column; gap:3px; } .codec-sidebar-section-title{ max-height:28px; margin: 7px var(--codec-space-4) 5px; overflow:hidden; color:#9aa0aa; font-size:10px; line-height:1.2; font-weight:800; letter-spacing:.11em; text-transform:uppercase; opacity:1; transition: opacity var(--codec-sidebar-transition), max-height var(--codec-sidebar-transition), margin var(--codec-sidebar-transition); } .codec-sidebar-link{ position:relative; display:flex; align-items:center; gap:13px; width:100%; min-height:45px; padding: 0 13px; border-radius:11px; color:var(--codec-sidebar-text) !important; text-decoration:none !important; transition: background .16s ease, color .16s ease; } .codec-sidebar-link:hover, .codec-sidebar-link:focus-visible{ color:var(--codec-sidebar-accent) !important; background:rgba(249,228,212,.68); outline:none; } .codec-sidebar-link.is-active{ color:var(--codec-sidebar-accent) !important; background:var(--codec-sidebar-active); } .codec-sidebar-icon{ flex:0 0 23px; width:23px; height:23px; font-size:20px; line-height:23px; text-align:center; color:currentColor; } .codec-sidebar-label{ display:block; min-width:0; overflow:hidden; max-width:130px; white-space:nowrap; text-overflow:ellipsis; font-size:15px; line-height:1.2; font-weight:500; opacity:1; transition: opacity var(--codec-sidebar-transition), max-width var(--codec-sidebar-transition); } .codec-sidebar-footer{ flex:0 0 auto; padding: var(--codec-space-5); border-top:1px solid var(--codec-sidebar-line); background:var(--codec-sidebar-bg); } .codec-sidebar-user{ position:relative; display:flex; align-items:center; gap:11px; min-height:54px; padding: 7px 9px; border-radius:var(--codec-radius-card); color:var(--codec-sidebar-text) !important; text-decoration:none !important; transition:background .16s ease; } .codec-sidebar-user:hover{ background:rgba(249,228,212,.66); } .codec-sidebar-avatar, .codec-sidebar-avatar-fallback{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; } .codec-sidebar-avatar{ object-fit:cover; } .codec-sidebar-avatar-fallback{ display:grid; place-items:center; background:var(--codec-color-surface); color:#7f8796; font-size:20px; } .codec-sidebar-user-meta{ display:flex; flex-direction:column; min-width:0; overflow:hidden; max-width:120px; opacity:1; transition: opacity var(--codec-sidebar-transition), max-width var(--codec-sidebar-transition); } .codec-sidebar-user-name{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13px; line-height:1.25; font-weight:700; } /* * Estado compacto. */ html.codec-sidebar-pref-collapsed .codec-native-sidebar, body.codec-native-sidebar-collapsed .codec-native-sidebar{ width:var(--codec-sidebar-collapsed-width); min-width:var(--codec-sidebar-collapsed-width); } html.codec-sidebar-pref-collapsed .codec-sidebar-brand, body.codec-native-sidebar-collapsed .codec-sidebar-brand{ justify-content:center; padding-left: var(--codec-space-5); padding-right: var(--codec-space-5); } html.codec-sidebar-pref-collapsed .codec-sidebar-logo, body.codec-native-sidebar-collapsed .codec-sidebar-logo{ gap:0; } html.codec-sidebar-pref-collapsed .codec-sidebar-logo-word, body.codec-native-sidebar-collapsed .codec-sidebar-logo-word, html.codec-sidebar-pref-collapsed .codec-sidebar-label, body.codec-native-sidebar-collapsed .codec-sidebar-label, html.codec-sidebar-pref-collapsed .codec-sidebar-user-meta, body.codec-native-sidebar-collapsed .codec-sidebar-user-meta{ max-width:0; opacity:0; } html.codec-sidebar-pref-collapsed .codec-sidebar-section-title, body.codec-native-sidebar-collapsed .codec-sidebar-section-title{ max-height:0; margin-top: 0; margin-bottom: 0; opacity:0; } html.codec-sidebar-pref-collapsed .codec-sidebar-scroll, body.codec-native-sidebar-collapsed .codec-sidebar-scroll{ padding-left: var(--codec-space-4); padding-right: var(--codec-space-4); } html.codec-sidebar-pref-collapsed .codec-sidebar-link, body.codec-native-sidebar-collapsed .codec-sidebar-link{ justify-content:center; gap:0; padding-left: 0; padding-right: 0; } html.codec-sidebar-pref-collapsed .codec-sidebar-user, body.codec-native-sidebar-collapsed .codec-sidebar-user{ justify-content:center; gap:0; padding-left: 0; padding-right: 0; } /* * Tooltips oscuros solo al estar plegado. */ html.codec-sidebar-pref-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::after, body.codec-native-sidebar-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::after{ content:attr(data-tooltip); position:absolute; z-index:10050; top:50%; transform:translateY(-50%) translateX(-4px); color:var(--codec-color-surface); font-size:12px; line-height:1; font-weight:600; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .13s ease, transform .13s ease, visibility .13s ease; } html.codec-sidebar-pref-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]:hover::after, body.codec-native-sidebar-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]:hover::after{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); } /* * El logo necesita position:relative para su tooltip. */ .codec-sidebar-logo{ position:relative; } } /* En editor no tocamos nada: Elementor conserva su canvas de trabajo. */ .elementor-editor-active .codec-native-sidebar{ display:none !important; } @media (min-width:1025px) { /* Los bloques son estructurales: el fondo pertenece solo al item activo. */ .codec-native-sidebar .codec-sidebar-section, .codec-native-sidebar .codec-sidebar-nav{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* Botón plegar integrado en la paleta de Codec. */ .codec-native-sidebar .codec-sidebar-collapse{ border-color:rgba(83,91,107,.16) !important; box-shadow:0 4px 14px rgba(44,49,60,.08) !important; } .codec-native-sidebar .codec-sidebar-collapse:hover{ background:var(--codec-color-accent-soft) !important; border-color:rgba(243,108,61,.20) !important; color:var(--codec-color-accent-strong) !important; } /* Ya no existe un botón independiente de WP Admin. */ /* El usuario es la única puerta de entrada a administración. */ .codec-native-sidebar .codec-sidebar-user{ margin: 0; } /* * Cada entrada parte SIEMPRE transparente. * Así evitamos que estilos globales/Elementor pinten todas las filas * como si fueran activas. */ .codec-native-sidebar .codec-sidebar-link{ background:transparent !important; box-shadow:none !important; } .codec-native-sidebar .codec-sidebar-link:hover, .codec-native-sidebar .codec-sidebar-link:focus-visible{ background:rgba(249,228,212,.58) !important; color:var(--codec-sidebar-accent) !important; } /* * Solo la entrada resuelta por PHP como actual recibe el estado activo. */ /* * El botón de plegado no debe heredar el azul de focus/hover del tema * ni del navegador. */ .codec-native-sidebar .codec-sidebar-collapse, .codec-native-sidebar .codec-sidebar-collapse:hover, .codec-native-sidebar .codec-sidebar-collapse:focus, .codec-native-sidebar .codec-sidebar-collapse:focus-visible, .codec-native-sidebar .codec-sidebar-collapse:active{ outline:none !important; border-color:rgba(83,91,107,.16) !important; box-shadow:0 4px 14px rgba(44,49,60,.08) !important; } .codec-native-sidebar .codec-sidebar-collapse{ background:var(--codec-color-surface-warm) !important; color:#667086 !important; } .codec-native-sidebar .codec-sidebar-collapse:hover, .codec-native-sidebar .codec-sidebar-collapse:focus, .codec-native-sidebar .codec-sidebar-collapse:focus-visible, .codec-native-sidebar .codec-sidebar-collapse:active{ background:var(--codec-color-accent-soft) !important; color:var(--codec-color-accent-strong) !important; } /* El pie muestra solo avatar + nombre en abierto. */ /* * Iconos SVG propios: coherencia visual y sin depender de Dashicons * para las colecciones/sagas. */ .codec-native-sidebar .codec-sidebar-svg-icon{ display:grid; place-items:center; } .codec-native-sidebar .codec-sidebar-svg-icon svg{ display:block; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } /* * Tooltip compacto: pequeño "globo" negro con flechita apuntando * al icono, inspirado en el comportamiento de ServerAvatar. */ html.codec-sidebar-pref-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::after, body.codec-native-sidebar-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::after{ left:calc(100% + 14px); padding: var(--codec-space-3) 11px; border-radius:var(--codec-radius-sm); background:#151515; box-shadow:0 8px 24px rgba(0,0,0,.18); } html.codec-sidebar-pref-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::before, body.codec-native-sidebar-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::before{ content:""; position:absolute; z-index:10051; left:calc(100% + 8px); top:50%; width:8px; height:8px; background:#151515; transform:translateY(-50%) rotate(45deg); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .13s ease, visibility .13s ease; } html.codec-sidebar-pref-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]:hover::before, body.codec-native-sidebar-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]:hover::before{ opacity:1; visibility:visible; } /* * Activo compacto más elegante: * mantiene la pastilla crema + una barra naranja fina a la izquierda. */ html.codec-sidebar-pref-collapsed .codec-sidebar-link.is-active, body.codec-native-sidebar-collapsed .codec-sidebar-link.is-active, html.codec-sidebar-pref-collapsed .codec-sidebar-link[aria-current="page"], body.codec-native-sidebar-collapsed .codec-sidebar-link[aria-current="page"]{ position:relative; } html.codec-sidebar-pref-collapsed .codec-sidebar-link.is-active::before, body.codec-native-sidebar-collapsed .codec-sidebar-link.is-active::before, html.codec-sidebar-pref-collapsed .codec-sidebar-link[aria-current="page"]::before, body.codec-native-sidebar-collapsed .codec-sidebar-link[aria-current="page"]::before{ content:""; position:absolute; left:-10px; top:10px; bottom:10px; width:3px; border-radius:0 999px 999px 0; background:var(--codec-sidebar-accent); } } /* * El tooltip vive en body y usa position:fixed, así nunca queda * recortado por el scroll interno del sidebar. */ .codec-sidebar-floating-tooltip{ position:fixed; z-index:2147483000; transform:translateY(-50%) translateX(-4px); padding: var(--codec-space-3) 11px; border-radius:var(--codec-radius-sm); background:#151515; color:var(--codec-color-surface); font-size:12px; line-height:1; font-weight:600; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; box-shadow:0 8px 24px rgba(0,0,0,.18); transition: opacity .13s ease, transform .13s ease, visibility .13s ease; } .codec-sidebar-floating-tooltip::before{ content:""; position:absolute; left:-4px; top:50%; width:8px; height:8px; background:#151515; transform:translateY(-50%) rotate(45deg); } .codec-sidebar-floating-tooltip.is-visible{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); } /* * Desactivamos los pseudo-tooltips antiguos para evitar duplicados. */ @media (min-width:1025px) { html.codec-sidebar-pref-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::after, body.codec-native-sidebar-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::after, html.codec-sidebar-pref-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::before, body.codec-native-sidebar-collapsed :is(.codec-sidebar-link,.codec-sidebar-user,.codec-sidebar-logo)[data-tooltip]::before{ content:none !important; display:none !important; } /* * Anime y puzzle ganan un pelín de presencia visual sin cambiar * el lenguaje de trazo del resto de iconos. */ .codec-native-sidebar .codec-sidebar-svg-icon svg{ width:22px; height:22px; } /* * El avatar ahora es un botón, no un enlace directo. */ .codec-native-sidebar .codec-sidebar-user{ width:100%; border:0; background:transparent; font:inherit; text-align:left; cursor:pointer; appearance:none; } .codec-native-sidebar .codec-sidebar-user:focus, .codec-native-sidebar .codec-sidebar-user:focus-visible{ outline:none; } .codec-native-sidebar .codec-sidebar-user[aria-expanded="true"]{ background:rgba(249,228,212,.66); } .codec-sidebar-user-chevron{ flex:0 0 16px; width:16px; height:16px; margin-left: auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.55; transition: transform .16s ease, opacity .16s ease; } .codec-sidebar-user[aria-expanded="true"] .codec-sidebar-user-chevron{ transform:rotate(180deg); opacity:.85; } html.codec-sidebar-pref-collapsed .codec-sidebar-user-chevron, body.codec-native-sidebar-collapsed .codec-sidebar-user-chevron{ display:none; } } /* * Popover: vive visualmente fuera del sidebar gracias a fixed. */ .codec-sidebar-user-menu{ position:fixed; z-index:2147482990; padding: var(--codec-space-3); border:1px solid rgba(83,91,107,.12); border-radius:14px; background:#fffdfb; color:#535b6b; box-shadow: 0 18px 48px rgba(44,49,60,.16), 0 2px 8px rgba(44,49,60,.06); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(5px) scale(.985); transform-origin:left bottom; transition: opacity .14s ease, transform .14s ease, visibility .14s ease; } .codec-sidebar-user-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); } .codec-sidebar-user-menu-head{ display:flex; align-items:center; gap:var(--codec-space-4); padding: var(--codec-space-3) 9px; } .codec-sidebar-user-menu-avatar{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; object-fit:cover; } .codec-sidebar-user-menu-identity{ display:flex; flex-direction:column; min-width:0; } .codec-sidebar-user-menu-identity strong{ overflow:hidden; color:var(--codec-color-text); font-size:13px; line-height:1.2; font-weight:750; white-space:nowrap; text-overflow:ellipsis; } .codec-sidebar-user-menu-identity span{ margin-top: 3px; color:#9aa0aa; font-size:10px; line-height:1.2; } .codec-sidebar-user-menu-separator{ height:1px; margin: var(--codec-space-1) 5px; background:rgba(83,91,107,.10); } .codec-sidebar-user-menu-item{ display:flex; align-items:center; gap:var(--codec-space-4); min-height:40px; padding: 0 var(--codec-space-4); border-radius:9px; color:#535b6b !important; text-decoration:none !important; font-size:13px; line-height:1.2; font-weight:600; transition: background .14s ease, color .14s ease; } .codec-sidebar-user-menu-item:hover, .codec-sidebar-user-menu-item:focus-visible{ outline:none; background:#fbe9dc; color:var(--codec-color-accent-strong) !important; } .codec-sidebar-user-menu-item svg{ flex:0 0 18px; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .codec-sidebar-user-menu-logout{ color:#777f90 !important; } .codec-sidebar-user-menu-logout:hover, .codec-sidebar-user-menu-logout:focus-visible{ background:#fff0ed; color:#d85f4b !important; } .codec-dashboard-home{ margin: 0 auto; padding: 26px var(--codec-space-11) 70px; color:var(--codec-dashboard-text); } .codec-dashboard-inline-link{ color:var(--codec-dashboard-accent) !important; text-decoration:none !important; } .codec-dashboard-section{ margin-top: 34px; } .codec-dashboard-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--codec-space-9); margin-bottom: 15px; } .codec-dashboard-section-head h2{ margin: 0; color:#4c5468; font-size:22px; line-height:1.15; font-weight:780; letter-spacing:-.02em; } .codec-dashboard-inline-link{ font-size:12px; font-weight:700; } /* AHORA MISMO */ .codec-dashboard-now-card{ display:grid; overflow:hidden; border:1px solid var(--codec-dashboard-line); border-radius: var(--codec-radius-lg); background:var(--codec-color-surface); color:inherit !important; text-decoration:none !important; box-shadow:var(--codec-dashboard-shadow); transition:transform .16s ease,box-shadow .16s ease; } .codec-dashboard-now-card:hover{ transform:translateY(-2px); box-shadow:0 15px 34px rgba(42,48,62,.12); } .codec-dashboard-now-cover{ background:#f3f3f3; } .codec-dashboard-thumb-img{ display:block; width:100%; height:100%; object-fit:cover; } .codec-dashboard-thumb-placeholder{ display:block; width:100%; height:100%; min-height:100px; background: linear-gradient(135deg,#f1f1f1,#fafafa); } /* BIBLIOTECA */ .codec-dashboard-library-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--codec-space-4); } .codec-dashboard-library-card{ gap:11px; color:inherit !important; text-decoration:none !important; } .codec-dashboard-library-card:hover{ border-color:rgba(243,108,61,.18); background:var(--codec-color-surface-warm); } .codec-dashboard-library-icon{ display:grid; flex:0 0 40px; width:40px; height:40px; place-items:center; border-radius:11px; background:var(--codec-dashboard-accent-soft); color:var(--codec-dashboard-accent); } .codec-dashboard-library-icon svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .codec-dashboard-library-copy{ display:flex; flex-direction:column; min-width:0; } .codec-dashboard-library-copy strong{ color:#4f576a; font-size:13px; line-height:1.2; font-weight:750; } .codec-dashboard-library-copy small{ margin-top: var(--codec-space-1); color:var(--codec-dashboard-muted); font-size:10px; line-height:1.2; } .codec-dashboard-library-arrow{ margin-left: auto; color:#b2b6bf; font-size:18px; transition:transform .15s ease,color .15s ease; } .codec-dashboard-library-card:hover .codec-dashboard-library-arrow{ transform:translateX(2px); color:var(--codec-dashboard-accent); } /* SAGAS */ .codec-dashboard-saga-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--codec-space-5); } .codec-dashboard-saga-card{ min-width:0; color:inherit !important; text-decoration:none !important; } .codec-dashboard-saga-cover{ border-radius:13px; background:#f2f2f2; box-shadow:0 7px 18px rgba(42,48,62,.09); transition:transform .16s ease,box-shadow .16s ease; } .codec-dashboard-saga-card:hover .codec-dashboard-saga-cover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(42,48,62,.13); } .codec-dashboard-saga-card strong{ display:block; overflow:hidden; margin-top: var(--codec-space-3); color:#51596c; font-size:11px; line-height:1.3; font-weight:700; white-space:nowrap; text-overflow:ellipsis; } /* ACTIVIDAD */ .codec-dashboard-activity-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid var(--codec-dashboard-line); border-radius:15px; background:var(--codec-color-surface); } .codec-dashboard-activity-item{ display:flex; align-items:center; min-width:0; gap:var(--codec-space-4); min-height:72px; padding: var(--codec-space-4) var(--codec-space-5); border-right:1px solid var(--codec-dashboard-line); border-bottom:1px solid var(--codec-dashboard-line); color:inherit !important; text-decoration:none !important; } .codec-dashboard-activity-item:nth-child(4n){ border-right:0; } .codec-dashboard-activity-item:nth-last-child(-n/**/+4){ border-bottom:0; } .codec-dashboard-activity-item:hover{ background:var(--codec-color-surface-warm); } .codec-dashboard-activity-cover{ flex:0 0 42px; width:42px; height:52px; border-radius:7px; background:#f2f2f2; } .codec-dashboard-activity-copy{ display:flex; flex-direction:column; min-width:0; } .codec-dashboard-activity-copy strong{ overflow:hidden; color:#50586b; font-size:11px; line-height:1.25; font-weight:700; white-space:nowrap; text-overflow:ellipsis; } .codec-dashboard-activity-copy small{ overflow:hidden; margin-top: 5px; color:var(--codec-dashboard-muted); font-size:9px; line-height:1.25; white-space:nowrap; text-overflow:ellipsis; } .codec-dashboard-empty{ padding: var(--codec-space-9); border:1px dashed rgba(83,91,107,.18); border-radius:14px; color:var(--codec-dashboard-muted); background:var(--codec-color-surface); font-size:12px; text-align:center; } @media (max-width:1250px) { .codec-dashboard-saga-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (max-width:1024px) { .codec-dashboard-home{ padding: var(--codec-space-10) 22px 120px; } .codec-dashboard-library-grid, .codec-dashboard-activity-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .codec-dashboard-activity-item:nth-child(4n){ border-right:1px solid var(--codec-dashboard-line); } .codec-dashboard-activity-item:nth-child(2n){ border-right:0; } .codec-dashboard-activity-item:nth-last-child(-n/**/+4){ border-bottom:1px solid var(--codec-dashboard-line); } .codec-dashboard-activity-item:nth-last-child(-n/**/+2){ border-bottom:0; } } @media (max-width:767px) { .codec-dashboard-home{ padding: 22px var(--codec-space-7) 120px; } .codec-dashboard-now-grid{ padding: 2px 1px 7px; scroll-snap-type:x proximity; } .codec-dashboard-now-card{ flex:0 0 82%; scroll-snap-align:start; } .codec-dashboard-library-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--codec-space-3); } .codec-dashboard-library-icon{ flex-basis:35px; width:35px; height:35px; } .codec-dashboard-library-arrow{ display:none; } .codec-dashboard-saga-grid{ display:flex; gap:var(--codec-space-4); overflow-x:auto; padding-bottom: var(--codec-space-3); } .codec-dashboard-saga-card{ flex:0 0 31%; } .codec-dashboard-activity-grid{ grid-template-columns:1fr; } .codec-dashboard-activity-item, .codec-dashboard-activity-item:nth-child(2n), .codec-dashboard-activity-item:nth-child(4n), .codec-dashboard-activity-item:nth-last-child(-n/**/+4){ border-right:0; border-bottom:1px solid var(--codec-dashboard-line); } .codec-dashboard-activity-item:last-child{ border-bottom:0; } } /* Sin hero/cabecera superior: el dashboard empieza directamente en contenido. */ .codec-dashboard-home{ padding-top: 22px; } .codec-dashboard-home > .codec-dashboard-section:first-child{ margin-top: 0; } /* Los kickers naranjas ya no se muestran en ninguna sección. */ /* Sagas: la imagen siempre llena una card vertical completa. */ .codec-dashboard-saga-cover{ position:relative; aspect-ratio:2 / 3; overflow:hidden; } .codec-dashboard-saga-cover .codec-dashboard-thumb-img, .codec-dashboard-saga-cover > img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center center !important; } /* Evita hueco gris/incompleto si algún thumbnail trae estilos heredados. */ .codec-dashboard-saga-cover .codec-dashboard-thumb-placeholder{ position:absolute; inset:0; min-height:0; } /* En curso: portada vertical completa, sin zonas grises por proporciones raras. */ .codec-dashboard-now-card{ grid-template-columns:112px minmax(0,1fr); min-height:168px; } .codec-dashboard-now-cover{ position:relative; min-height:168px; overflow:hidden; aspect-ratio:2 / 3; } .codec-dashboard-now-cover .codec-dashboard-thumb-img, .codec-dashboard-now-cover > img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center center !important; } /* Sagas recientes: card vertical, sombra y nombre encima de la imagen. */ .codec-dashboard-saga-cover, .codec-dashboard-recent-cover{ position:relative; overflow:hidden; aspect-ratio:2 / 3; border-radius:13px; background:#f2f2f2; box-shadow:0 9px 22px rgba(42,48,62,.16); transition:transform .16s ease, box-shadow .16s ease; } .codec-dashboard-saga-cover .codec-dashboard-thumb-img, .codec-dashboard-saga-cover > img, .codec-dashboard-recent-cover .codec-dashboard-thumb-img, .codec-dashboard-recent-cover > img{ position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center center !important; } .codec-dashboard-saga-card:hover .codec-dashboard-saga-cover, .codec-dashboard-recent-card:hover .codec-dashboard-recent-cover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(42,48,62,.22); } .codec-dashboard-card-title{ font-size:var(--codec-type-card-size); line-height:var(--codec-type-card-leading); font-weight:var(--codec-type-card-weight); text-shadow:0 1px 4px rgba(0,0,0,.58); text-overflow:ellipsis; } /* Oculta el título antiguo que iba debajo de la saga. */ .codec-dashboard-saga-card > strong{ display:none !important; } /* 8 bloques: 2 columnas x 4 filas; 3 cards por bloque. */ .codec-dashboard-recent-groups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--codec-space-8); } .codec-dashboard-recent-group{ min-width:0; padding: var(--codec-space-7); border:1px solid var(--codec-dashboard-line); border-radius: var(--codec-radius-lg); background:var(--codec-color-surface); } .codec-dashboard-recent-group-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--codec-space-6); margin-bottom: var(--codec-space-5); } .codec-dashboard-recent-group-head h3{ margin: 0; color:#4f576a; font-size:15px; line-height:1.2; font-weight:760; } .codec-dashboard-recent-group-head a{ flex:0 0 auto; color:var(--codec-dashboard-accent) !important; font-size:10px; font-weight:700; text-decoration:none !important; } .codec-dashboard-recent-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--codec-space-4); } .codec-dashboard-recent-card{ min-width:0; color:inherit !important; text-decoration:none !important; } .codec-dashboard-activity + .codec-dashboard-recent-collections{ margin-top: 36px; } @media (max-width:1100px) { .codec-dashboard-recent-groups{ grid-template-columns:1fr; } } @media (max-width:767px) { .codec-dashboard-now-card{ flex-basis:88%; grid-template-columns:104px minmax(0,1fr); min-height:156px; } .codec-dashboard-now-cover{ min-height:156px; } .codec-dashboard-card-title{ font-size:11px; } .codec-dashboard-recent-group{ padding: var(--codec-space-5); } .codec-dashboard-recent-cards{ gap:var(--codec-space-3); } } /* Sustituye el azul nativo del teclado por el lenguaje visual de Codec. */ .codec-dashboard a:focus, .codec-dashboard a:focus-visible, .codec-dashboard button:focus, .codec-dashboard button:focus-visible, .codec-dashboard-now-card:focus, .codec-dashboard-now-card:focus-visible, .codec-dashboard-saga-card:focus, .codec-dashboard-saga-card:focus-visible, .codec-dashboard-recent-card:focus, .codec-dashboard-recent-card:focus-visible{ outline:2px solid var(--codec-dashboard-accent) !important; outline-offset:2px; box-shadow:none !important; } /* Las cards grandes quedan especialmente limpias al navegar con Tab. */ @media (min-width:1025px) { /* * Las fichas Single comparten bastante CSS histórico con el antiguo * sidebar de Elementor. Blindamos el sidebar nativo para que SOLO el * item resuelto como activo sea naranja. */ .codec-native-sidebar .codec-sidebar-link:not(.is-active):not([aria-current="page"]){ color:var(--codec-sidebar-text) !important; background:transparent !important; } .codec-native-sidebar .codec-sidebar-link:not(.is-active):not([aria-current="page"]) .codec-sidebar-icon, .codec-native-sidebar .codec-sidebar-link:not(.is-active):not([aria-current="page"]) .codec-sidebar-label{ color:inherit !important; } .codec-native-sidebar .codec-sidebar-link:not(.is-active):not([aria-current="page"]) svg{ color:inherit !important; stroke:currentColor !important; } .codec-native-sidebar .codec-sidebar-link.is-active, .codec-native-sidebar .codec-sidebar-link[aria-current="page"]{ color:var(--codec-sidebar-accent) !important; background:var(--codec-sidebar-active) !important; } } /* CODEC 6.0 — Nuevas Ideas reutiliza el componente * .codec-dashboard-recent-* de Últimos Terminados. */ /* * El dashboard deja de tener un ancho máximo fijo. * Respeta un margen lateral cómodo y aprovecha todo el espacio disponible * dentro del área de contenido, también en monitores grandes. */ .codec-dashboard{ width:100% !important; max-width:none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Por si el wrapper interior era el que estaba limitando el ancho. */ /* En escritorio grande mantenemos aire lateral sin desperdiciar pantalla. */ @media (min-width:1200px) { .codec-dashboard{ padding-left:clamp(28px, 3vw, 64px) !important; padding-right:clamp(28px, 3vw, 64px) !important; box-sizing:border-box; } } /* En portátil conserva un margen más compacto. */ @media (min-width:769px) and (max-width:1199px) { .codec-dashboard{ padding-left: var(--codec-space-10) !important; padding-right: var(--codec-space-10) !important; box-sizing:border-box; } } .codec-dashboard-home{ width:100% !important; max-width:none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing:border-box !important; } /* * Elementor también puede limitar el ancho desde las capas que envuelven * el shortcode. Solo abrimos esas capas cuando contienen el dashboard, * para no afectar al resto de la web. */ .elementor-widget-shortcode:has(.codec-dashboard-home), .elementor-widget-shortcode:has(.codec-dashboard-home) > .elementor-widget-container, .elementor-widget-shortcode:has(.codec-dashboard-home) .elementor-shortcode{ width:100% !important; max-width:none !important; min-width:0 !important; } /* Desktop grande: usa todo el lienzo con un margen proporcional discreto. */ @media (min-width:1200px) { .codec-dashboard-home{ padding-left:clamp(28px,2.25vw,56px) !important; padding-right:clamp(28px,2.25vw,56px) !important; } } /* Portátil. */ @media (min-width:769px) and (max-width:1199px) { .codec-dashboard-home{ padding-left: var(--codec-space-10) !important; padding-right: var(--codec-space-10) !important; } } /* * El contenedor padre de la página puede seguir teniendo una caja centrada * aunque el widget/shortcode marque 100%. Para que el dashboard NO dependa * de ningún max-width ancestral, lo hacemos "breakout" hasta ocupar todo el * viewport útil a la derecha del sidebar nativo. */ @media (min-width:1025px) { body.codec-native-sidebar-enabled:not(.elementor-editor-active) .codec-dashboard-home{ position:relative !important; left:50% !important; transform:translateX(-50%) !important; width:calc(100vw - var(--codec-sidebar-width)) !important; max-width:calc(100vw - var(--codec-sidebar-width)) !important; margin-left: 0 !important; margin-right: 0 !important; padding-left:clamp(28px,2.5vw,64px) !important; padding-right:clamp(28px,2.5vw,64px) !important; box-sizing:border-box !important; } /* * Cuando el sidebar está plegado, --codec-sidebar-width cambia a 76px, * así que el dashboard se ensancha automáticamente sin JS adicional. */ html.codec-sidebar-pref-collapsed body.codec-native-sidebar-enabled:not(.elementor-editor-active) .codec-dashboard-home, body.codec-native-sidebar-collapsed .codec-dashboard-home{ width:calc(100vw - var(--codec-sidebar-collapsed-width)) !important; max-width:calc(100vw - var(--codec-sidebar-collapsed-width)) !important; } } /* * En tablet/móvil no hacemos breakout: conserva el layout responsive normal. */ @media (max-width:1024px) { .codec-dashboard-home{ position:static !important; left:auto !important; transform:none !important; width:100% !important; max-width:none !important; } } .codec-sidebar-user-menu-refresh, .codec-sidebar-user-menu-toolbar{ width:100%; border:0; background:transparent; text-align:left; font-family:inherit; cursor:pointer; } .codec-sidebar-user-menu-toolbar{ position:relative; } .codec-sidebar-user-menu-toolbar-label{ flex:1 1 auto; min-width:0; } .codec-sidebar-user-menu-switch{ position:relative; flex:0 0 30px; width:30px; height:18px; margin-left: auto; border:1px solid rgba(83,91,107,.18); border-radius: var(--codec-radius-pill); background:#e9ebef; transition: background .15s ease, border-color .15s ease; } .codec-sidebar-user-menu-switch > span{ position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--codec-color-surface); box-shadow:0 1px 3px rgba(44,49,60,.18); transition:transform .15s ease; } .codec-sidebar-user-menu-switch.is-on{ border-color:rgba(243,108,61,.28); background:#f7b394; } .codec-sidebar-user-menu-switch.is-on > span{ transform:translateX(12px); } .codec-sidebar-user-menu-toolbar.is-loading{ opacity:.58; cursor:wait; } .codec-sidebar-user-menu-toolbar:disabled{ pointer-events:none; } /* Algo más de aire para las cuatro acciones del popover. */ .codec-sidebar-user-menu{ width:244px; } /* * El menú de usuario se mueve por JS directamente a . * Debe quedar por encima tanto del sidebar como de #wpadminbar. */ body > .codec-sidebar-user-menu{ position:fixed !important; z-index:2147483646 !important; } /* * Al activar la Toolbar de WordPress el botón del usuario debe seguir * siendo perfectamente interactivo. */ body.admin-bar .codec-native-sidebar .codec-sidebar-user{ position:relative !important; z-index:2 !important; pointer-events:auto !important; } @media (max-width:1024px) { /* El antiguo menú Elementor deja de desplegarse. */ body:not(.elementor-editor-active) .sidebar-fija .menu-sidebar-ui{ display:none !important; } /* Drawer lateral real reutilizando el sidebar nativo. */ body.codec-native-sidebar-enabled:not(.elementor-editor-active) .codec-native-sidebar{ position:fixed !important; z-index:100120 !important; top:0 !important; right:auto !important; bottom:0 !important; left:0 !important; display:flex !important; flex-direction:column !important; width:min(88vw,380px) !important; min-width:0 !important; max-width:380px !important; height:100dvh !important; margin: 0 !important; padding: 0 !important; color:var(--codec-sidebar-text) !important; background:var(--codec-sidebar-bg) !important; border-right:1px solid rgba(83,91,107,.10) !important; border-radius:0 22px 22px 0 !important; box-shadow:18px 0 48px rgba(36,40,50,.18) !important; overflow:hidden !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translate3d(-103%,0,0) !important; transition: transform .24s cubic-bezier(.2,.75,.25,1), opacity .18s ease, visibility .24s ease !important; } body.admin-bar.codec-native-sidebar-enabled:not(.elementor-editor-active) .codec-native-sidebar{ top:46px !important; height:calc(100dvh - 46px) !important; } body.codec-native-sidebar-enabled.codec-mobile-menu-is-open:not(.elementor-editor-active) .codec-native-sidebar, body.codec-native-sidebar-enabled:not(.elementor-editor-active) .codec-native-sidebar.codec-mobile-drawer-open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translate3d(0,0,0) !important; } /* Fondo pulsable. */ .codec-mobile-menu-backdrop{ position:fixed !important; inset:0 !important; z-index:100100 !important; display:block !important; width:100% !important; height:100% !important; margin: 0 !important; padding: 0 !important; border:0 !important; background:rgba(24,27,34,.40) !important; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); cursor:default !important; } body.admin-bar .codec-mobile-menu-backdrop{ top:46px !important; } .codec-mobile-menu-backdrop[hidden]{ display:none !important; } body.codec-mobile-menu-is-open{ overflow:hidden !important; overscroll-behavior:none !important; } /* ---------- Cabecera drawer ---------- */ .codec-native-sidebar .codec-sidebar-brand{ position:relative !important; flex:0 0 auto !important; display:flex !important; align-items:center !important; min-height:92px !important; padding: var(--codec-space-9) 22px var(--codec-space-6) !important; } .codec-native-sidebar .codec-sidebar-logo{ position:relative !important; display:flex !important; align-items:center !important; gap:11px !important; color:#566078 !important; text-decoration:none !important; } .codec-native-sidebar .codec-sidebar-logo-mark{ flex:0 0 46px !important; width:46px !important; height:46px !important; object-fit:cover !important; border-radius:50% !important; } .codec-native-sidebar .codec-sidebar-logo-word{ display:block !important; max-width:none !important; opacity:1 !important; overflow:visible !important; color:#566078 !important; font-size:29px !important; line-height:1 !important; font-weight:750 !important; letter-spacing:.01em !important; } .codec-native-sidebar .codec-sidebar-collapse{ display:none !important; } .codec-mobile-drawer-close{ position:absolute !important; place-items:center !important; margin: 0 !important; padding: 0 !important; } .codec-mobile-drawer-close > span, .codec-mobile-drawer-close > span::before{ content:"" !important; position:absolute !important; width:20px !important; height:2px !important; border-radius: var(--codec-radius-pill) !important; background:currentColor !important; transform:rotate(45deg) !important; } .codec-mobile-drawer-close > span::before{ transform:rotate(90deg) !important; } /* ---------- zona scroll ---------- */ .codec-native-sidebar .codec-sidebar-scroll{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; padding: 2px var(--codec-space-7) var(--codec-space-8) !important; scrollbar-width:thin; scrollbar-color:rgba(83,91,107,.18) transparent; } .codec-native-sidebar .codec-sidebar-nav, .codec-native-sidebar .codec-sidebar-section{ display:flex !important; flex-direction:column !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .codec-native-sidebar .codec-sidebar-section{ gap:var(--codec-space-1) !important; } .codec-native-sidebar .codec-sidebar-section-title{ display:block !important; max-height:none !important; margin: 9px var(--codec-space-4) 7px !important; color:#9aa0aa !important; font-size:10px !important; line-height:1.2 !important; font-weight:800 !important; letter-spacing:.13em !important; text-transform:uppercase !important; opacity:1 !important; } .codec-native-sidebar .codec-sidebar-link{ position:relative !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:var(--codec-space-6) !important; width:100% !important; min-height:52px !important; padding: 0 var(--codec-space-6) !important; border-radius:13px !important; background:transparent !important; color:var(--codec-sidebar-text) !important; text-decoration:none !important; } .codec-native-sidebar .codec-sidebar-link.is-active{ color:var(--codec-sidebar-accent) !important; background:var(--codec-sidebar-active) !important; } .codec-native-sidebar .codec-sidebar-icon{ flex:0 0 25px !important; width:25px !important; height:25px !important; color:currentColor !important; } .codec-native-sidebar .codec-sidebar-svg-icon svg{ display:block !important; width:25px !important; height:25px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } .codec-native-sidebar .codec-sidebar-label{ display:block !important; max-width:none !important; min-width:0 !important; opacity:1 !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; font-size:17px !important; line-height:1.2 !important; font-weight:550 !important; } /* ---------- pie / usuario ---------- */ .codec-native-sidebar .codec-sidebar-footer{ flex:0 0 auto !important; padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important; border-top:1px solid var(--codec-sidebar-line) !important; background:var(--codec-sidebar-bg) !important; } .codec-native-sidebar .codec-sidebar-user{ position:relative !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:var(--codec-space-5) !important; width:100% !important; min-height:60px !important; padding: var(--codec-space-3) var(--codec-space-4) !important; border:0 !important; border-radius:14px !important; background:transparent !important; color:var(--codec-sidebar-text) !important; text-align:left !important; } .codec-native-sidebar .codec-sidebar-user:active{ background:rgba(249,228,212,.72) !important; } .codec-native-sidebar .codec-sidebar-avatar, .codec-native-sidebar .codec-sidebar-avatar-fallback{ flex:0 0 42px !important; width:42px !important; height:42px !important; border-radius:50% !important; } .codec-native-sidebar .codec-sidebar-avatar{ object-fit:cover !important; } .codec-native-sidebar .codec-sidebar-user-meta{ display:flex !important; flex:1 1 auto !important; flex-direction:column !important; max-width:none !important; min-width:0 !important; opacity:1 !important; } .codec-native-sidebar .codec-sidebar-user-name{ font-size:15px !important; line-height:1.2 !important; font-weight:700 !important; } .codec-native-sidebar .codec-sidebar-user-chevron{ display:block !important; flex:0 0 20px !important; width:20px !important; height:20px !important; fill:none !important; stroke:#9299a6 !important; stroke-width:2 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } /* * El menú de usuario es el mismo de desktop: * Administrar Codec / Refrescar / Toolbar / Cerrar sesión. */ body.codec-mobile-menu-is-open > .codec-sidebar-user-menu{ z-index:100180 !important; width:min(320px,calc(100vw - 32px)) !important; max-width:calc(100vw - 32px) !important; } /* Ignorar en móvil la preferencia compacta guardada en desktop. */ html.codec-sidebar-pref-collapsed .codec-native-sidebar .codec-sidebar-logo-word, html.codec-sidebar-pref-collapsed .codec-native-sidebar .codec-sidebar-label, html.codec-sidebar-pref-collapsed .codec-native-sidebar .codec-sidebar-user-meta{ max-width:none !important; opacity:1 !important; } html.codec-sidebar-pref-collapsed .codec-native-sidebar .codec-sidebar-section-title{ max-height:none !important; margin: 9px var(--codec-space-4) 7px !important; opacity:1 !important; } html.codec-sidebar-pref-collapsed .codec-native-sidebar .codec-sidebar-link{ justify-content:flex-start !important; gap:var(--codec-space-6) !important; padding: 0 var(--codec-space-6) !important; } html.codec-sidebar-pref-collapsed .codec-native-sidebar .codec-sidebar-user{ justify-content:flex-start !important; gap:var(--codec-space-5) !important; padding: var(--codec-space-3) var(--codec-space-4) !important; } /* Hamburguesa de la cabecera: activa en naranja al abrir drawer. */ body:not(.elementor-editor-active) .sidebar-fija.codec-mobile-menu-open .codec-mobile-menu-toggle{ color:var(--codec-sidebar-accent) !important; background:var(--codec-color-accent-soft) !important; } } @media (max-width:767px) { body.codec-native-sidebar-enabled:not(.elementor-editor-active) .codec-native-sidebar{ width:min(91vw,390px) !important; } } /* * El botón de cerrar del drawer se inyecta en el DOM también en desktop * para que esté listo al cambiar de breakpoint. Fuera de móvil no debe * renderizar nada. */ .codec-mobile-drawer-close{ display:none !important; } @media (max-width:1024px) { .codec-mobile-drawer-close{ display:flex !important; align-items:center !important; justify-content:center !important; top:24px !important; right:18px !important; width:40px !important; height:40px !important; border:0 !important; outline:0 !important; border-radius:var(--codec-radius-card) !important; background:var(--codec-color-accent-soft) !important; color:#e9683e !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important; font-size:34px !important; font-weight:300 !important; line-height:1 !important; box-shadow:none !important; appearance:none !important; -webkit-appearance:none !important; } .codec-mobile-drawer-close > span{ position:static !important; display:block !important; width:auto !important; height:auto !important; margin: -3px 0 0 !important; padding: 0 !important; background:none !important; border:0 !important; border-radius:0 !important; transform:none !important; line-height:1 !important; } .codec-mobile-drawer-close > span::before, .codec-mobile-drawer-close > span::after{ content:none !important; display:none !important; } .codec-mobile-drawer-close:hover, .codec-mobile-drawer-close:focus, .codec-mobile-drawer-close:focus-visible{ background:#f6d7c0 !important; color:var(--codec-color-accent-hover) !important; outline:0 !important; box-shadow:none !important; } /* * El drawer ya tiene su propia X. Mientras está abierto ocultamos * completamente la hamburguesa del header de fondo para evitar la * doble X que se veía detrás del overlay. */ body.codec-mobile-menu-is-open:not(.elementor-editor-active) .sidebar-fija .codec-mobile-menu-toggle{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } /* * Y anulamos explícitamente la antigua animación hamburguesa -> X, * por si el header cambia de estado durante la transición. */ .sidebar-fija.codec-mobile-menu-open .codec-mobile-menu-toggle-lines{ background:currentColor !important; } .sidebar-fija.codec-mobile-menu-open .codec-mobile-menu-toggle-lines::before{ top:-7px !important; transform:none !important; } .sidebar-fija.codec-mobile-menu-open .codec-mobile-menu-toggle-lines::after{ top:7px !important; transform:none !important; } } @media (max-width:767px) { /* * La página de Elementor conserva su título "Biblioteca". * En el dashboard móvil lo ocultamos y eliminamos el espacio que * reservaba para que el shortcode empiece directamente en "En curso". */ body:has(.codec-dashboard-home) .entry-title, body:has(.codec-dashboard-home) .page-header, body:has(.codec-dashboard-home) .elementor-page-title, body:has(.codec-dashboard-home) h1.elementor-heading-title{ display:none !important; margin: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-home-library-title-wrap, body:not(.elementor-editor-active) .codec-home-library-title-widget{ display:none !important; width:0 !important; height:0 !important; min-height:0 !important; max-height:0 !important; margin: 0 !important; padding: 0 !important; overflow:hidden !important; } /* * Si el widget está dentro de un contenedor dedicado, quitamos también * cualquier separación heredada inmediata alrededor del título. */ body:not(.elementor-editor-active) .codec-home-library-title-wrap > .elementor-widget-container{ display:none !important; margin: 0 !important; padding: 0 !important; } /* El dashboard empieza ya con "En curso". */ .codec-dashboard-home{ padding-top: var(--codec-space-6) !important; } .codec-dashboard-home > .codec-dashboard-section:first-child, .codec-dashboard-now{ margin-top: 0 !important; padding-top: 0 !important; } } .codec-dashboard-library-card.has-random-cover{ border-color:rgba(64,70,84,.12) !important; box-shadow:0 8px 22px rgba(42,48,62,.08); } /* * La portada es solo ambiente. Dos capas: * - sombreado blanco para mantener el lenguaje claro de Codec; * - degradado ligeramente más denso en la zona del texto. */ .codec-dashboard-library-card .codec-dashboard-library-copy{ position:relative; z-index:2; } .codec-dashboard-library-card .codec-dashboard-library-copy strong{ font-size:15px; } .codec-dashboard-library-stats{ margin-top: var(--codec-space-2); } .codec-dashboard-library-sagas-count{ color:#ef7750 !important; } .codec-dashboard-library-arrow{ position:relative; z-index:2; } /* Tablet/móvil: también gana presencia, sin volverse enorme. */ @media (max-width:1024px) { .codec-dashboard-library-card{ padding: var(--codec-space-6) !important; } .codec-dashboard-library-card.has-random-cover::before{ background: linear-gradient( 90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.79) 60%, rgba(255,255,255,.60) 100% ); } } @media (max-width:767px) { .codec-dashboard-library-card{ padding: var(--codec-space-5) !important; } .codec-dashboard-library-card .codec-dashboard-library-copy strong{ font-size:14px; } .codec-dashboard-library-stats{ margin-top: 5px; } } /* * La portada pasa a ser realmente un background decorativo oscuro, * más parecido al lenguaje visual de las cards de Codec. */ .codec-dashboard-library-card.has-random-cover{ background-color:#313744 !important; } /* Overlay oscuro uniforme + degradado inferior/izquierdo para lectura. */ .codec-dashboard-library-card.has-random-cover::before, .codec-dashboard-library-card.has-random-cover::after{ pointer-events:none !important; } /* Texto claro, como una card con título sobre imagen. */ .codec-dashboard-library-card.has-random-cover .codec-dashboard-library-copy strong{ color:var(--codec-color-surface) !important; text-shadow:0 1px 3px rgba(0,0,0,.36) !important; } .codec-dashboard-library-card.has-random-cover .codec-dashboard-library-stats small{ color:rgba(255,255,255,.78) !important; text-shadow:0 1px 2px rgba(0,0,0,.25) !important; } .codec-dashboard-library-card.has-random-cover .codec-dashboard-library-sagas-count{ color:#ffb08f !important; } /* * Icono: pequeño bloque translúcido, sin el aspecto de "botón blanco" * que tenía la prueba anterior. */ .codec-dashboard-library-card.has-random-cover .codec-dashboard-library-icon{ background:rgba(255,255,255,.14) !important; color:#ff9a73 !important; border:1px solid rgba(255,255,255,.18) !important; box-shadow:none !important; backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important; } /* Flecha también integrada en el fondo oscuro. */ .codec-dashboard-library-card.has-random-cover .codec-dashboard-library-arrow{ color:rgba(255,255,255,.62) !important; text-shadow:0 1px 2px rgba(0,0,0,.25) !important; } /* Hover: mismo lenguaje que las cards, elevación discreta. */ .codec-dashboard-library-card.has-random-cover:hover{ transform:translateY(-3px) !important; border-color:transparent !important; background-color:#313744 !important; box-shadow: 0 13px 28px rgba(31,36,48,.18), 0 3px 8px rgba(31,36,48,.10) !important; } .codec-dashboard-library-card.has-random-cover:hover .codec-dashboard-library-arrow{ color:#ff9a73 !important; transform:translateX(3px) !important; } /* * Si un CPT no tiene ninguna portada disponible, mantenemos una card * limpia pero con el mismo radio/sombra para que no rompa la cuadrícula. */ .codec-dashboard-library-card:not(.has-random-cover){ border:1px solid rgba(83,91,107,.10) !important; } /* Tablet */ /* Móvil: sigue teniendo presencia sin crecer demasiado. */ @media (max-width:767px) { .codec-dashboard-library-card.has-random-cover::before{ background: linear-gradient( 90deg, rgba(25,29,38,.84) 0%, rgba(25,29,38,.68) 62%, rgba(25,29,38,.52) 100% ) !important; } } .codec-dashboard-library-card{ position:relative !important; isolation:isolate !important; min-height:190px !important; padding: 0 !important; display:flex !important; align-items:flex-end !important; overflow:hidden !important; border:0 !important; border-radius:var(--codec-radius-xl) !important; background:#343a47 !important; box-shadow: 0 7px 18px rgba(34,39,50,.12), 0 2px 5px rgba(34,39,50,.08) !important; transition: transform .18s ease, box-shadow .18s ease !important; } .codec-dashboard-library-card.has-random-cover{ background-image:var(--codec-dashboard-library-bg) !important; background-repeat:no-repeat !important; background-size:cover !important; background-position:center center !important; } /* * La imagen se ve bastante limpia. El oscurecido se concentra abajo, * como en las cards antiguas, para que el título siga siendo protagonista. */ .codec-dashboard-library-card.has-random-cover::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:-2 !important; background: linear-gradient( 180deg, rgba(18,22,30,.10) 0%, rgba(18,22,30,.08) 42%, rgba(18,22,30,.38) 72%, rgba(18,22,30,.76) 100% ) !important; } .codec-dashboard-library-card.has-random-cover::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; background: linear-gradient( 90deg, rgba(0,0,0,.08) 0%, transparent 58% ) !important; } /* Ya no queremos el icono flotante: volvemos al bloque visual limpio. */ .codec-dashboard-library-card .codec-dashboard-library-icon{ display:none !important; } /* Todo el contenido se coloca abajo a la izquierda. */ .codec-dashboard-library-card .codec-dashboard-library-copy{ position:relative !important; z-index:3 !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; width:100% !important; min-width:0 !important; padding: var(--codec-space-8) var(--codec-space-9) !important; } .codec-dashboard-library-card .codec-dashboard-library-copy strong{ margin: 0 0 var(--codec-space-3) !important; color:var(--codec-color-surface) !important; font-size:26px !important; line-height:1.02 !important; font-weight:750 !important; text-shadow: 0 2px 5px rgba(0,0,0,.48), 0 1px 1px rgba(0,0,0,.38) !important; } /* * Contadores en pequeñas pills oscuras, como en el dashboard antiguo. * Si hay Sagas aparecen al lado. */ .codec-dashboard-library-stats{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:var(--codec-space-2) !important; margin: 0 !important; } .codec-dashboard-library-stats small{ display:inline-flex !important; align-items:center !important; min-height:25px !important; margin: 0 !important; padding: var(--codec-space-1) var(--codec-space-4) !important; border-radius: var(--codec-radius-pill) !important; border:1px solid rgba(255,255,255,.10) !important; background:rgba(34,38,47,.76) !important; color:var(--codec-color-surface) !important; font-size:12px !important; line-height:1 !important; font-weight:700 !important; text-shadow:none !important; backdrop-filter:blur(4px) !important; -webkit-backdrop-filter:blur(4px) !important; } .codec-dashboard-library-stats .codec-dashboard-library-sagas-count{ color:var(--codec-color-surface) !important; background:rgba(239,111,72,.84) !important; border-color:rgba(255,255,255,.14) !important; } /* La flecha sobra en este formato. Toda la imagen ya es clicable. */ .codec-dashboard-library-card .codec-dashboard-library-arrow{ display:none !important; } /* Hover tipo card. */ .codec-dashboard-library-card:hover{ transform:translateY(-3px) !important; box-shadow: 0 15px 32px rgba(34,39,50,.18), 0 4px 10px rgba(34,39,50,.10) !important; } /* Si excepcionalmente no existe imagen horizontal. */ .codec-dashboard-library-card:not(.has-random-cover){ background: linear-gradient( 135deg, #555d70, #353b49 ) !important; } /* Tablet. */ @media (max-width:1024px) { .codec-dashboard-library-card{ min-height:160px !important; border-radius:17px !important; } .codec-dashboard-library-card .codec-dashboard-library-copy{ padding: 15px var(--codec-space-7) !important; } .codec-dashboard-library-card .codec-dashboard-library-copy strong{ font-size:22px !important; } } /* Móvil: dos columnas siguen siendo manejables. */ @media (max-width:767px) { .codec-dashboard-library-card{ min-height:142px !important; border-radius: var(--codec-radius-lg) !important; } .codec-dashboard-library-card .codec-dashboard-library-copy{ padding: 13px var(--codec-space-6) !important; } .codec-dashboard-library-card .codec-dashboard-library-copy strong{ margin-bottom: var(--codec-space-2) !important; font-size:19px !important; } .codec-dashboard-library-stats{ gap:var(--codec-space-1) !important; } .codec-dashboard-library-stats small{ min-height:22px !important; padding: var(--codec-space-1) var(--codec-space-3) !important; font-size:10px !important; } } /* * Fuera de móvil no debe existir visualmente NINGÚN resto del botón * inyectado para cerrar el drawer, incluso aunque otra regla externa * intente estilizar botones vacíos. */ @media (min-width:1025px) { .codec-mobile-drawer-close{ display:none !important; position:absolute !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; margin: 0 !important; padding: 0 !important; border:0 !important; outline:0 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; overflow:hidden !important; } } .codec-dashboard-library-stats small, .codec-dashboard-library-stats .codec-dashboard-library-sagas-count{ background:rgba(239,111,72,.88) !important; color:var(--codec-color-surface) !important; border-color:rgba(255,255,255,.16) !important; } .codec-dashboard-library-sagas-link{ display:inline-flex !important; align-items:center !important; color:inherit !important; cursor:pointer !important; text-decoration:none !important; } .codec-dashboard-library-sagas-count:hover{ filter:brightness(1.08) !important; } .codec-dashboard-library-sagas-link:focus-visible{ outline:2px solid rgba(255,255,255,.92) !important; outline-offset:2px !important; border-radius: var(--codec-radius-pill) !important; } .codec-dashboard-library-stats small{ transition:filter .16s ease, transform .16s ease, background-color .16s ease !important; } .codec-dashboard-library-stats > small:not(.codec-dashboard-library-sagas-count):hover, .codec-dashboard-library-sagas-count:hover{ filter:brightness(1.16) !important; transform:translateY(-1px) !important; } .codec-dashboard-card-title{ display:-webkit-box !important; -webkit-box-orient:vertical !important; white-space:normal !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; line-height:1.18 !important; max-height:2.36em !important; } .codec-dashboard-card-title{ position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:2 !important; display:block !important; /* Recupera la altura correcta del overlay. */ max-height:none !important; padding: 34px var(--codec-space-5) var(--codec-space-5) !important; overflow:visible !important; white-space:normal !important; color:var(--codec-color-surface) !important; background:linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.72) 100% ) !important; } /* Elipsis real después de TRES líneas, sin tocar el overlay. */ .codec-dashboard-card-title-text{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:3 !important; line-clamp:3 !important; max-width:100% !important; max-height:3.6em !important; overflow:hidden !important; white-space:normal !important; text-overflow:ellipsis !important; color:var(--codec-color-surface) !important; font-size:var(--codec-type-card-size) !important; line-height:var(--codec-type-card-leading) !important; font-weight:var(--codec-type-card-weight) !important; text-shadow:0 1px 4px rgba(0,0,0,.58) !important; } .codec-dashboard-card-title{ -webkit-line-clamp:unset !important; line-clamp:unset !important; } /* Mobile/tablet: conserva el tamaño compacto que ya tenía el dashboard. */ @media (max-width:767px) { .codec-dashboard-card-title{ padding: var(--codec-space-11) 9px 9px !important; } .codec-dashboard-card-title-text{ font-size:var(--codec-type-card-size-mobile) !important; line-height:var(--codec-type-card-leading) !important; max-height:3.6em !important; } } @media (min-width:1025px) { .codec-mobile-drawer-close, .codec-mobile-menu-backdrop, .codec-mobile-search-backdrop, #codec-mobile-search-panel, .codec-mobile-search-panel{ display:none !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; max-width:0 !important; max-height:0 !important; margin: 0 !important; padding: 0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; overflow:hidden !important; } .codec-mobile-drawer-close:focus, .codec-mobile-drawer-close:focus-visible, .codec-mobile-menu-backdrop:focus, .codec-mobile-menu-backdrop:focus-visible, .codec-mobile-search-backdrop:focus, .codec-mobile-search-backdrop:focus-visible, #codec-mobile-search-panel:focus, #codec-mobile-search-panel:focus-visible{ outline:0 !important; box-shadow:none !important; } } /* * Cuando no existe sesión: * - no reservamos espacio para el sidebar; * - ocultamos tanto el sidebar nativo como el antiguo header/sidebar * Elementor, por si la plantilla global lo contiene; * - eliminamos cualquier artefacto móvil residual. */ body.codec-logged-out{ padding-left: 0 !important; } body.codec-logged-out .codec-native-sidebar, body.codec-logged-out .sidebar-fija, body.codec-logged-out .codec-mobile-menu-backdrop, body.codec-logged-out .codec-mobile-search-backdrop, body.codec-logged-out .codec-mobile-drawer-close, body.codec-logged-out .codec-sidebar-floating-tooltip, body.codec-logged-out .codec-sidebar-user-menu{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* Por seguridad, ninguna preferencia antigua del sidebar puede desplazar login. */ html.codec-sidebar-pref-collapsed body.codec-logged-out{ padding-left: 0 !important; } /* * El formulario/login recupera todo el lienzo disponible aunque una regla * anterior del dashboard o una plantilla Elementor conserve anchuras. */ body.codec-logged-out .site-main, body.codec-logged-out main, body.codec-logged-out .elementor-location-single, body.codec-logged-out .elementor-location-archive{ margin-left: 0 !important; max-width:none; } .codec-dashboard{width:min(100%,1480px);margin:0 auto;padding:34px 28px 70px;box-sizing:border-box;color:#535b6b;} .codec-collection-dashboard-section{margin-top:34px;} .codec-collection-dashboard-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--codec-space-7);margin-bottom:13px;} .codec-collection-dashboard-section-head h2{margin:0;color:#4b5366;font-size:16px;font-weight:800;} .codec-collection-dashboard-section-head>a,.codec-collection-dashboard-section-head>span{color:#e56e48;font-size:11px;font-weight:700;text-decoration:none;} .codec-collection-dashboard-active-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--codec-space-6);} .codec-collection-dashboard-active-cover{aspect-ratio:2/3;background:#eee;transition:.17s ease;} .codec-collection-dashboard-active-card:hover .codec-collection-dashboard-active-cover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(42,48,62,.2);} .codec-collection-dashboard-active-card strong{display:block;margin-top:8px;overflow:hidden;color:#596174;font-size:11px;line-height:1.25;font-weight:750;white-space:nowrap;text-overflow:ellipsis;} .codec-collection-dashboard-recent-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;} .codec-collection-dashboard-recent-card{color:inherit!important;text-decoration:none!important;} .codec-collection-dashboard-recent-card>div{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:15px;background:#eee;box-shadow:0 8px 22px rgba(42,48,62,.13);transition:.17s ease;} .codec-collection-dashboard-recent-card img{width:100%!important;height:100%!important;object-fit:cover!important;} .codec-collection-dashboard-recent-card span{position:absolute;left:0;right:0;bottom:0;padding:42px 11px 11px;color:var(--codec-color-surface);font-size:11px;line-height:1.2;font-weight:800;background:linear-gradient(transparent,rgba(0,0,0,.72));text-shadow:0 1px 3px rgba(0,0,0,.55);} .codec-collection-dashboard-recent-card:hover>div{transform:translateY(-3px);box-shadow:0 13px 28px rgba(42,48,62,.2);} .codec-collection-explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--codec-space-5);} .codec-collection-explore-block{padding:16px;border:1px solid rgba(83,91,107,.10);border-radius: var(--codec-radius-lg);background:var(--codec-color-surface);} .codec-collection-explore-block h3{margin:0 0 12px;color:#4b5366;font-size:13px;font-weight:800;} .codec-games-explore-tags{display:flex;flex-wrap:wrap;gap:var(--codec-space-2);} .codec-games-explore-tags a{display:inline-flex;align-items:center;gap:var(--codec-space-2);padding:6px 9px;border-radius: var(--codec-radius-pill);background:#fff3eb;color:#666e80!important;font-size:10px;font-weight:700;text-decoration:none!important;} .codec-games-explore-tags a:hover{background:var(--codec-color-accent-soft);color:#e9663c!important;} .codec-games-explore-tags small{color:#e87851;font-size:9px;} .codec-collection-explore-empty{margin:0;color:#9ba1ac;font-size:10px;line-height:1.45;} /* Games desplegable en sidebar */ .codec-sidebar-collection-group{display:block;} .codec-sidebar-collection-row{display:flex;align-items:center;gap:var(--codec-space-1);} .codec-sidebar-collection-main{flex:1 1 auto;min-width:0;} .codec-sidebar-collection-toggle{flex:0 0 28px;width:28px;height:32px;border:0;border-radius:9px;background:transparent;color:#8d94a1;cursor:pointer;} .codec-sidebar-collection-toggle span{display:block;font-size:18px;line-height:1;transition:transform .16s ease;} .codec-sidebar-collection-group.is-open .codec-sidebar-collection-toggle span{transform:rotate(90deg);} .codec-sidebar-subnav{display:none;margin:2px 0 8px 42px;border-left:1px solid rgba(83,91,107,.12);} .codec-sidebar-subnav a{padding:6px 7px;border-radius:var(--codec-radius-sm);color:#838a99!important;font-weight:650;text-decoration:none!important;} .codec-sidebar-subnav a:hover,.codec-sidebar-subnav a.is-active{background:rgba(249,228,212,.65);color:var(--codec-color-accent)!important;} html.codec-sidebar-pref-collapsed .codec-sidebar-collection-toggle, body.codec-native-sidebar-collapsed .codec-sidebar-collection-toggle, html.codec-sidebar-pref-collapsed .codec-sidebar-subnav, body.codec-native-sidebar-collapsed .codec-sidebar-subnav{display:none!important;} @media (max-width:1024px) { .codec-dashboard{padding:24px 18px 55px;} .codec-collection-dashboard-active-grid,.codec-collection-dashboard-recent-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:767px) { .codec-dashboard{padding:18px 14px 45px;} .codec-collection-dashboard-active-grid,.codec-collection-dashboard-recent-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;} .codec-collection-dashboard-active-card strong{font-size:9.5px;} } .codec-games-header-separator{ display:block !important; width:100% !important; height:1px !important; margin: 0 !important; padding: 0 !important; background:var(--codec-color-line-warm) !important; border:0 !important; box-shadow:none !important; } body:has(.codec-page-context[data-codec-tracker="game"]) .codec-toolbar-sticky{ margin-top: 0 !important; } .codec-order-dropdown{ position:relative !important; } .codec-order-menu .codec-group-option{ width:100% !important; min-height:32px !important; padding: 0 var(--codec-space-4) !important; border:0 !important; border-radius:var(--codec-radius-sm) !important; background:transparent !important; color:var(--codec-color-text-secondary) !important; text-align:left !important; font:inherit !important; font-size:12px !important; font-weight:700 !important; cursor:pointer !important; } .codec-order-menu .codec-group-option:hover, .codec-order-menu .codec-group-option.is-active{ background:var(--codec-control-accent-soft) !important; color:var(--codec-control-accent) !important; } .codec-toolbar > .codec-toolbar-right > .codec-group-dropdown{ display:none !important; } .codec-order-menu .codec-order-group-title{ margin-top: 0 !important; } /* El encabezado "Ordenar" queda visualmente como bloque principal; Criterio y Dirección son sus dos subapartados. */ .codec-order-menu{ width:460px !important; min-width:460px !important; max-width:min(460px, calc(100vw - 24px)) !important; padding: var(--codec-space-6) !important; border-radius:var(--codec-radius-xl) !important; } .codec-order-block{ display:block !important; } .codec-order-block + .codec-order-block{ margin-top: var(--codec-space-7) !important; padding-top: var(--codec-space-7) !important; border-top:1px solid #E9DED5 !important; } .codec-order-block-title{ margin: 0 var(--codec-space-2) var(--codec-space-4) !important; color:#8E96A4 !important; font-size:11px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.13em !important; text-transform:uppercase !important; } .codec-order-group-options{ display:flex !important; flex-direction:column !important; gap:var(--codec-space-1) !important; } .codec-order-menu .codec-group-option, .codec-order-menu .codec-sort-option, .codec-order-menu .codec-sort-direction{ display:block !important; width:100% !important; min-height: var(--codec-control-height-md) !important; padding: var(--codec-space-3) var(--codec-space-5) !important; border:0 !important; border-radius: var(--codec-radius-md) !important; background:transparent !important; color:var(--codec-color-text-secondary) !important; text-align:left !important; font:inherit !important; font-size:12px !important; font-weight:700 !important; line-height:1.2 !important; cursor:pointer !important; box-sizing:border-box !important; } .codec-order-menu .codec-group-option:hover, .codec-order-menu .codec-sort-option:hover, .codec-order-menu .codec-sort-direction:hover{ background:#FFF6F0 !important; color:#F07B43 !important; } .codec-order-menu .codec-group-option.is-active, .codec-order-menu .codec-sort-option.is-active, .codec-order-menu .codec-sort-direction.is-active{ background:#FFF0E6 !important; color:#F07B43 !important; } @media (max-width:767px) { .codec-order-menu{ width:min(460px, calc(100vw - 18px)) !important; min-width:0 !important; } } .codec-toolbar[data-tracker="game"] .codec-order-block-title{ color:#8F97A5 !important; font-weight:800 !important; text-transform:uppercase !important; } .codec-toolbar[data-tracker="game"] .codec-order-menu{ padding: var(--codec-space-7) !important; } /* BLOQUE 1 · AGRUPAR */ .codec-toolbar[data-tracker="game"] .codec-order-block-group{ padding-bottom: 0 !important; } .codec-toolbar[data-tracker="game"] .codec-order-group-options{ grid-template-columns:1fr 1fr !important; } /* BLOQUE 2 · ORDENAR */ /* Menos jerarquías redundantes */ .codec-toolbar[data-tracker="game"] .codec-order-block-title{ margin: 0 var(--codec-space-1) var(--codec-space-4) !important; font-size:10px !important; letter-spacing:.14em !important; } /* Opciones más compactas */ .codec-toolbar[data-tracker="game"] .codec-order-menu .codec-sort-option, .codec-toolbar[data-tracker="game"] .codec-order-menu .codec-sort-direction{ min-height:40px !important; padding: 9px 11px !important; } /* El activo no ocupa visualmente demasiado */ .codec-toolbar[data-tracker="game"] .codec-order-menu .codec-group-option.is-active, .codec-toolbar[data-tracker="game"] .codec-order-menu .codec-sort-option.is-active, .codec-toolbar[data-tracker="game"] .codec-order-menu .codec-sort-direction.is-active{ background:#FFF1E7 !important; } /* Responsive */ @media (max-width:767px) { .codec-toolbar[data-tracker="game"] .codec-order-group-options{ grid-template-columns:1fr 1fr !important; } } /* Títulos principales centrados */ /* Los dos submenús de Ordenar parten exactamente de la misma altura */ /* Igualamos altura y márgenes de todas las opciones de ambas columnas */ .codec-toolbar[data-tracker="game"] .codec-order-block-sort{ margin-top: var(--codec-space-7) !important; padding-top: var(--codec-space-7) !important; border-top:1px solid #E7DDD4 !important; } .codec-toolbar[data-tracker="game"] .codec-order-sort-options{ display:flex !important; flex-direction:column !important; } .codec-toolbar[data-tracker="game"] .codec-order-sort-options .codec-sort-toggle{ width:100% !important; min-height: var(--codec-touch-target) !important; padding: var(--codec-space-4) var(--codec-space-6) !important; border:0 !important; border-radius:var(--codec-radius-card) !important; background:transparent !important; color:var(--codec-color-text-secondary) !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:var(--codec-space-7) !important; font:inherit !important; font-size:12px !important; font-weight:700 !important; text-align:left !important; cursor:pointer !important; box-sizing:border-box !important; } .codec-toolbar[data-tracker="game"] .codec-order-sort-options .codec-sort-toggle:hover{ background:#FFF6F0 !important; color:#F07B43 !important; } .codec-toolbar[data-tracker="game"] .codec-order-sort-options .codec-sort-toggle.is-active{ background:#FFF1E7 !important; color:#F07B43 !important; } .codec-toolbar[data-tracker="game"] .codec-sort-arrow{ flex:0 0 auto !important; color:#FF7B45 !important; font-size:19px !important; line-height:1 !important; font-weight:800 !important; } /* La antigua interfaz en dos columnas deja de participar en Games. */ /* Agrupar en lista vertical */ .codec-toolbar[data-tracker="game"] .codec-order-group-options{ display:flex !important; flex-direction:column !important; gap:var(--codec-space-1) !important; } .codec-toolbar[data-tracker="game"] .codec-order-group-options .codec-group-option{ width:100% !important; min-height: var(--codec-control-height-lg) !important; padding: var(--codec-space-4) var(--codec-space-6) !important; } /* Ordenar mantiene el mismo lenguaje visual compacto */ .codec-toolbar[data-tracker="game"] .codec-order-sort-options{ gap:var(--codec-space-1) !important; } .codec-toolbar[data-tracker="game"] .codec-order-block + .codec-order-block{ margin-top: var(--codec-space-6) !important; padding-top: var(--codec-space-6) !important; } @media (max-width:767px) { .codec-toolbar[data-tracker="game"] .codec-order-menu{ width:min(290px, calc(100vw - 16px)) !important; min-width:0 !important; } } /* AGRUPAR / ORDENAR alineados a la izquierda */ .codec-toolbar[data-tracker="game"] .codec-order-block-title{ text-align:left !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; } /* Mantener el panel compacto */ .codec-toolbar[data-tracker="game"] .codec-order-menu{ width:290px !important; min-width:290px !important; max-width:min(290px, calc(100vw - 18px)) !important; } @media (max-width:1024px) { body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-toolbar-right{ display:grid !important; grid-template-columns:1fr auto auto auto !important; align-items:stretch !important; width:100% !important; padding: 0 var(--codec-space-3) !important; gap:2px !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-toolbar-right > *{ width:auto !important; max-width:none !important; min-width:0 !important; flex:none !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-mobile-filters-toggle{ grid-column:1 !important; justify-self:start !important; width:auto !important; min-width:72px !important; padding: 0 var(--codec-space-4) !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-context-search{ grid-column:2 !important; width:auto !important; max-width:none !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-sort-dropdown{ grid-column:3 !important; width:auto !important; max-width:none !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-view-dropdown{ grid-column:4 !important; width:auto !important; max-width:none !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-context-search-toggle, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-sort-current, body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar[data-tracker="game"] .codec-view-current{ width:auto !important; min-width:68px !important; padding: 0 var(--codec-space-3) !important; } /* Si hay cualquier filtro real activo, "Filtros" queda marcado. */ body:not(.elementor-editor-active) .codec-toolbar[data-tracker="game"]:has(.codec-filter-dropdown.is-active) .codec-mobile-filters-toggle{ background:transparent !important; color:#F07B43 !important; border-radius:0 !important; } } .codec-toolbar[data-tracker="game"] .codec-order-block-sort-sagas{ margin-top: 0 !important; padding-top: 0 !important; border-top:0 !important; } .codec-toolbar[data-tracker="game"] .codec-order-block-sort-sagas .codec-order-block-title{ margin-bottom: var(--codec-space-4) !important; } .codec-toolbar[data-tracker="game"] .codec-order-block-sort-sagas .codec-sort-toggle{ min-height: var(--codec-touch-target) !important; } .codec-toolbar[data-tracker="game"] .codec-order-block-sort-sagas .codec-sort-toggle.is-active{ background:#FFF1E7 !important; color:#F07B43 !important; } .codec-toolbar[data-tracker="game"] .codec-order-block-sort-sagas .codec-sort-arrow{ display:inline-flex !important; color:#FF7B45 !important; } .codec-saga-pagination-sentinel{ width:100%; height:1px; margin: 0; padding: 0; pointer-events:none; } body:has(.codec-toolbar.codec-games-sagas-mode) #codec-games-loop .e-load-more-anchor, body:has(.codec-toolbar.codec-games-sagas-mode) #codec-games-loop .e-load-more-message, body:has(.codec-toolbar.codec-games-sagas-mode) #codec-games-loop .e-loop__load-more, body:has(.codec-toolbar.codec-games-sagas-mode) #codec-games-loop .elementor-button-wrapper.e-load-more-button-wrapper, body:has(.codec-toolbar.codec-games-sagas-mode) #codec-games-loop [data-e-load-more], body:has(.codec-toolbar.codec-games-sagas-mode) .e-load-more-message{ display:none !important; } .codec-saga-pagination-loader{ display:flex; align-items:center; justify-content:center; gap:var(--codec-space-4); width:100%; min-height:54px; margin: var(--codec-space-3) 0 var(--codec-space-5); font-size:14px; font-weight:600; color:#7f8797; } .codec-saga-pagination-loader[hidden]{ display:none !important; } .codec-saga-pagination-spinner{ width:22px; height:22px; box-sizing:border-box; border:3px solid rgba(127,135,151,.22); border-top-color:currentColor; border-radius:50%; animation:codec-saga-spin .7s linear infinite; } @keyframes codec-saga-spin{ to{ transform:rotate(360deg); } } .codec-sidebar-collection-group.is-open .codec-sidebar-subnav{ flex-direction:column; } .codec-sidebar-subnav{ margin-left: var(--codec-space-11) !important; padding-left: var(--codec-space-3) !important; } .codec-sidebar-subnav a{ font-size:11px !important; } @media (max-width:1024px) { .codec-native-sidebar .codec-sidebar-collection-toggle{ display:none !important; } .codec-native-sidebar .codec-sidebar-subnav{ margin-left: var(--codec-space-11) !important; padding-left: var(--codec-space-3) !important; } } /* * El desplazamiento histórico global de -405px hace que el mega-panel * de Plataforma invada el sidebar en Games > Biblioteca. * Backlog ya usa el comportamiento correcto: el panel nace justo * debajo del botón. Biblioteca adopta el mismo anclaje. */ @media (min-width:1101px) { body:has( .codec-page-context.marcador-games[ data-codec-view="biblioteca" ] ) .codec-filter-dropdown[data-param="codec_platform"] .codec-platform-menu { left: 0 !important; right: auto !important; transform: none !important; } } .codec-sidebar-collection-group.is-open .codec-sidebar-subnav { display:flex !important; } .codec-sidebar-collection-group .codec-sidebar-collection-toggle, .codec-library-content-switch-row{ display:none !important; } /* El selector Cards/Sagas antiguo queda oculto; Sagas vive en el sidebar. */ /* * Dashboard inyectado sobre la página Elementor histórica. * El payload permanece oculto hasta que JS lo mueve. */ /* * Elimina todas las cabeceras antiguas de Elementor cuando la página * está gestionada por la cabecera nativa. * * JS añade `.codec-legacy-site-header` al contenedor completo. */ .codec-native-site-header-active .codec-legacy-site-header { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: hidden !important; } @media (min-width:1025px) { /* * ÚNICA FUENTE DE VERDAD DE CABECERAS DESKTOP. * * Cualquier cambio futuro de altura, tipografía, fondo o borde * se hace AQUÍ y afecta a: * - Dashboard general * - Dashboard de todos los CPT * - Biblioteca / Armario * - Ideas * - Sagas * - Games y todos los demás CPT por igual. */ .codec-site-header { box-sizing: border-box !important; position: relative !important; z-index: 10010 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; height: 80px !important; min-height: 80px !important; max-height: 80px !important; gap:var(--codec-space-10) !important; margin: 0 !important; padding: 0 var(--codec-space-10) 0 var(--codec-space-11) !important; background: #fff8f2 !important; border: 0 !important; border-bottom: 1px solid rgba(83,91,107,.12) !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .codec-site-header-title { box-sizing: border-box !important; display: block !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: var(--codec-color-text) !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 28px !important; font-style: normal !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; text-transform: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .codec-site-header-actions { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .codec-site-header-actions .codec-global-search { width: min( 360px, 34vw ) !important; margin: 0 !important; } /* * Dashboard general: mismo HTML y mismas dimensiones. * Solo deja vacío el slot de título. */ .codec-site-header.is-general-dashboard .codec-site-header-title { flex: 1 1 auto !important; } /* * La cabecera NO es sticky. */ .codec-site-header { top: auto !important; } .codec-native-site-header-active .codec-dashboard, .codec-native-site-header-active .codec-dashboard-home { background: var(--codec-color-surface) !important; } } /* * El sistema responsive existente sigue controlando móvil/tablet. * No introducimos una segunda cabecera móvil en esta fase. */ @media (max-width:1024px) { .codec-site-header { display: none !important; } } @media (min-width:1025px) { .codec-native-site-header-active .codec-dashboard { padding-top: 34px !important; } /* * El primer bloque del Dashboard son directamente las tres cards. * No existe ya "Tu colección". */ .codec-dashboard-entry-section { margin-top: 0 !important; } .codec-dashboard > .codec-dashboard-entry-section:first-child { padding-top: 0 !important; } } .codec-dashboard-summary-grid { display: grid !important; grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ) !important; gap:var(--codec-space-6) !important; width: 100% !important; } .codec-dashboard-summary-card { position: relative !important; display: flex !important; min-width: 0 !important; min-height: 165px !important; padding: var(--codec-space-8) var(--codec-space-9) !important; overflow: hidden !important; border: 0 !important; border-radius: 17px !important; background-color: #e9e9e9 !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; color: var(--codec-color-surface) !important; text-decoration: none !important; isolation: isolate !important; transition: transform .16s ease, box-shadow .16s ease !important; } .codec-dashboard-summary-card::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; background: linear-gradient( to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 100% ) !important; } .codec-dashboard-summary-card span { display: block !important; margin: 0 !important; padding: 0 !important; color: var(--codec-color-surface) !important; font-size: 25px !important; font-weight: 800 !important; line-height: 1.08 !important; text-shadow: 0 2px 5px rgba(0,0,0,.48) !important; } .codec-dashboard-summary-card:hover { transform: translateY(-2px) !important; } /* * El resumen ya NO tiene "Tu colección", badges ni textos secundarios. */ .codec-dashboard-entry-section .codec-collection-dashboard-section-head, .codec-dashboard-entry-section @media (max-width:1024px) { .codec-dashboard-summary-grid { grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ) !important; } .codec-dashboard-summary-card { min-height: 145px !important; } .codec-dashboard-summary-card span { font-size: 21px !important; } } @media (max-width:767px) { .codec-dashboard-summary-grid { grid-template-columns: 1fr !important; } .codec-dashboard-summary-card { min-height: 130px !important; } } /* * Cards resumen: texto completamente centrado. */ .codec-dashboard-summary-card { align-items: center !important; justify-content: center !important; text-align: center !important; box-shadow: 0 8px 22px rgba(42,48,62,.18), 0 2px 6px rgba(42,48,62,.10) !important; } .codec-dashboard-summary-card span { width: 100% !important; text-align: center !important; } .codec-dashboard-summary-card:hover { box-shadow: 0 14px 30px rgba(42,48,62,.22), 0 4px 10px rgba(42,48,62,.12) !important; } /* * En curso: misma lógica visual que Últimos terminados. * El título vive dentro de la portada, abajo, sobre degradado. */ .codec-collection-dashboard-active-card { display: block !important; min-width: 0 !important; color: inherit !important; text-decoration: none !important; } .codec-collection-dashboard-active-cover { position: relative !important; overflow: hidden !important; border-radius: 15px !important; box-shadow: 0 7px 18px rgba(42,48,62,.13) !important; } .codec-collection-dashboard-active-cover::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.05) 54%, rgba(0,0,0,0) 72% ) !important; } .codec-collection-dashboard-active-cover img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .codec-collection-dashboard-active-title { position: absolute !important; z-index: 2 !important; left: 12px !important; right: 12px !important; bottom: 12px !important; display: block !important; margin: 0 !important; padding: 0 !important; color: var(--codec-color-surface) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.12 !important; text-shadow: 0 2px 5px rgba(0,0,0,.60) !important; } /* * Evita que estilos antiguos de En curso dejen texto debajo. */ .codec-collection-dashboard-active-card > strong { display: none !important; } .codec-collection-dashboard-active-card:hover .codec-collection-dashboard-active-cover { box-shadow: 0 12px 25px rgba(42,48,62,.18) !important; } /* * Dashboard general — En curso: * misma presentación vertical/overlay que los Dashboards de colección. */ .codec-dashboard-now-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap:var(--codec-space-6) !important; } .codec-dashboard-now-card.codec-dashboard-now-card-overlay { display: block !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; text-decoration: none !important; box-shadow: none !important; } .codec-dashboard-now-card-overlay .codec-dashboard-now-cover { position: relative !important; width: 100% !important; min-height: 0 !important; aspect-ratio: 2 / 3 !important; overflow: hidden !important; border-radius: 15px !important; background: #f2f2f2 !important; box-shadow: 0 7px 18px rgba(42,48,62,.13) !important; } .codec-dashboard-now-card-overlay .codec-dashboard-now-cover::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient( to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.05) 54%, rgba(0,0,0,0) 72% ) !important; } .codec-dashboard-now-card-overlay .codec-dashboard-now-cover img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .codec-dashboard-now-cpt-badge { position: absolute !important; z-index: 3 !important; top: 10px !important; right: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 25px !important; padding: 5px 9px !important; border-radius: var(--codec-radius-pill) !important; background: rgba(255,244,236,.94) !important; color: var(--codec-color-accent-strong) !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; box-shadow: 0 3px 10px rgba(0,0,0,.13) !important; } .codec-dashboard-now-card-overlay .codec-collection-dashboard-active-title { z-index: 3 !important; } .codec-dashboard-now-card-overlay:hover .codec-dashboard-now-cover { transform: translateY(-2px) !important; box-shadow: 0 12px 25px rgba(42,48,62,.18) !important; } /* * Series — cuatro bloques de últimos terminados como en el Dashboard general. */ .codec-series-recent-section .codec-dashboard-recent-groups { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap:var(--codec-space-8) !important; } .codec-series-recent-section .codec-dashboard-recent-group { min-width: 0 !important; padding: var(--codec-space-7) !important; border: 1px solid rgba(83,91,107,.12) !important; border-radius: var(--codec-radius-lg) !important; background: var(--codec-color-surface) !important; box-shadow: 0 6px 18px rgba(42,48,62,.05) !important; } .codec-series-recent-section .codec-dashboard-recent-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:var(--codec-space-4) !important; } .codec-series-recent-section .codec-dashboard-recent-card .codec-collection-dashboard-active-cover { aspect-ratio: 2 / 3 !important; } @media (max-width:1250px) { .codec-dashboard-now-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width:1100px) { .codec-series-recent-section .codec-dashboard-recent-groups { grid-template-columns: 1fr !important; } } @media (max-width:767px) { .codec-dashboard-now-grid { display: flex !important; overflow-x: auto !important; gap:var(--codec-space-5) !important; } .codec-dashboard-now-card.codec-dashboard-now-card-overlay { flex: 0 0 58% !important; } .codec-series-recent-section .codec-dashboard-recent-group { padding: var(--codec-space-5) !important; } .codec-series-recent-section .codec-dashboard-recent-cards { gap:var(--codec-space-3) !important; } } .codec-collection-dashboard-reviews .codec-dashboard-activity-grid { width: 100% !important; } .codec-collection-dashboard-reviews .codec-dashboard-activity-item { min-width: 0 !important; } @media (max-width:1024px) { .codec-collection-dashboard-reviews .codec-dashboard-activity-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } @media (max-width:767px) { .codec-collection-dashboard-reviews .codec-dashboard-activity-grid { grid-template-columns: 1fr !important; } } @media (min-width:901px) { .codec-dashboard-summary-grid.codec-dashboard-summary-grid-series { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width:767px) { /* * EN CURSO * Quitamos el carrusel horizontal del Dashboard general. * Igual que en los Dashboards de CPT: 3 portadas por fila. */ .codec-dashboard-home .codec-dashboard-now-grid { display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:9px !important; overflow:visible !important; padding: 0 !important; scroll-snap-type:none !important; } .codec-dashboard-home .codec-dashboard-now-card.codec-dashboard-now-card-overlay { display:block !important; width:auto !important; min-width:0 !important; flex:none !important; flex-basis:auto !important; scroll-snap-align:none !important; } .codec-dashboard-home .codec-dashboard-now-card-overlay .codec-dashboard-now-cover { width:100% !important; min-height:0 !important; aspect-ratio:2 / 3 !important; border-radius:15px !important; } /* * Título con proporciones similares a las cards móviles de los CPT. */ .codec-dashboard-home .codec-dashboard-now-card-overlay .codec-collection-dashboard-active-title { left:10px !important; right:10px !important; bottom:10px !important; font-size:14px !important; line-height:1.08 !important; } /* * Badge CPT compacta para que no robe demasiado espacio * en una card de 1/3 de ancho. */ .codec-dashboard-home .codec-dashboard-now-cpt-badge { top:8px !important; right:8px !important; min-height:22px !important; padding: var(--codec-space-1) 7px !important; font-size:9px !important; } /* * SAGAS * También abandonan el scroll horizontal: * 3 portadas por fila, exactamente el mismo patrón visual. */ .codec-dashboard-home .codec-dashboard-saga-grid { display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:9px !important; overflow:visible !important; padding: 0 !important; } .codec-dashboard-home .codec-dashboard-saga-card { width:auto !important; min-width:0 !important; flex:none !important; flex-basis:auto !important; } .codec-dashboard-home .codec-dashboard-saga-cover { width:100% !important; aspect-ratio:2 / 3 !important; border-radius:15px !important; } .codec-dashboard-home .codec-dashboard-card-title { padding: var(--codec-space-11) 9px 9px !important; } .codec-dashboard-home .codec-dashboard-card-title-text { font-size:11px !important; line-height:1.15 !important; } } /* * Algunas imágenes destacadas no rellenaban todo el hueco vertical * de la miniportada y dejaban una zona gris/blanca. * * La portada de Reviews se comporta ahora como el resto de portadas * de Codec: ocupa siempre todo el marco y recorta con object-fit:cover. */ .codec-dashboard-activity-cover { position: relative !important; overflow: hidden !important; } .codec-dashboard-activity-cover .codec-dashboard-thumb-img, .codec-dashboard-activity-cover > img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; } .codec-dashboard-activity-cover .codec-dashboard-thumb-placeholder { position: absolute !important; inset: 0 !important; min-height: 0 !important; } .codec-collection-dashboard[data-codec-dashboard-tracker="book"] .codec-collection-dashboard-explore .codec-collection-explore-grid { grid-template-columns: 1fr !important; } .codec-collection-dashboard[data-codec-dashboard-tracker="book"] .codec-books-dashboard-authors { width: 100%; } .codec-native-sidebar .codec-sidebar-subnav a.is-active, .codec-sidebar-subnav a.is-active { background: transparent !important; color: var(--codec-color-accent) !important; border-color: transparent !important; box-shadow: none !important; } @media (hover:hover) { .codec-native-sidebar .codec-sidebar-subnav a.is-active:hover, .codec-sidebar-subnav a.is-active:hover, .codec-native-sidebar .codec-sidebar-subnav a:hover, .codec-sidebar-subnav a:hover { background: rgba(249, 228, 212, .65) !important; color: var(--codec-color-accent) !important; } } .post-type-saga .column-codec_saga_scope { width: 150px; } .post-type-saga .column-codec_saga_items { width: 95px; text-align: center; } .post-type-saga #codec-saga-scope .inside { padding-bottom: var(--codec-space-5); } .post-type-saga .column-codec_saga_preview { width: 230px; } .codec-saga-admin-preview { display: flex; align-items: center; gap: 5px; min-height: 56px; } .codec-saga-admin-preview-item { display: block; width: 38px; height: 52px; border-radius: 6px; overflow: hidden; background: #f0f0f1; box-shadow: 0 1px 3px rgba(0,0,0,.16); flex: 0 0 auto; } .codec-saga-admin-preview-item img { display: block; width: 100%; height: 100%; object-fit: cover; } .codec-saga-admin-preview-empty { color: #8c8f94; } /* * El texto nace de la MISMA fuente que `.codec-site-header-title` * en desktop. El nodo no participa nunca en desktop. */ .codec-mobile-context-title { display: none !important; } @media (max-width:767px) { body:not(.elementor-editor-active) .codec-mobile-context-title { box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: var(--codec-space-10) var(--codec-space-11) var(--codec-space-8) !important; position: relative !important; inset: auto !important; z-index: 1 !important; background: var(--codec-color-surface) !important; border: 0 !important; box-shadow: none !important; white-space: normal !important; overflow: visible !important; /* * Blindaje explícito: aunque un ancestro/listado use sticky, * este título pertenece siempre al flujo normal. */ top: auto !important; } body:not(.elementor-editor-active) .codec-mobile-context-title[hidden] { display: none !important; } /* * Listados: aparece inmediatamente tras la barra de filtros. * Separación contenida para que las cards empiecen cerca del título. */ /* * Dashboards: algo más de aire bajo el header móvil, como comienzo * real de página, antes de las cards resumen. */ body:not(.elementor-editor-active) .codec-mobile-context-title.is-dashboard-title { padding-top: var(--codec-space-11) !important; padding-bottom: var(--codec-space-9) !important; } /* * Los dashboards tenían reglas históricas para "arrancar directamente". * Ahora vuelven a tener título; reducimos solamente el padding superior * interno para no sumar un segundo espacio vacío. */ body:not(.elementor-editor-active) .codec-mobile-context-title.is-dashboard-title + .codec-dashboard, body:not(.elementor-editor-active) .codec-mobile-context-title.is-dashboard-title + .codec-dashboard-home { padding-top: 0 !important; } /* Biblioteca / Ideas / Sagas: 10px más de aire bajo la toolbar sticky. */ /* * Sagas: el margin-bottom anterior podía quedar neutralizado por la * geometría histórica del loop. Reservamos el espacio dentro del propio * bloque del título, que sí participa inequívocamente en el flujo. */ body.codec-library-sagas-mode:not(.elementor-editor-active) .codec-mobile-context-title.is-after-toolbar { margin-bottom: 0 !important; padding-bottom: 56px !important; } /* * Biblioteca / Ideas / Sagas: * mantenemos el título bien separado de la toolbar sticky. */ body:not(.elementor-editor-active) .codec-mobile-context-title.is-after-toolbar { padding-top: 60px !important; padding-bottom: var(--codec-space-10) !important; margin: 0 !important; text-align: center !important; } /* * Sagas: ahora el título se inserta inmediatamente antes del widget * del Loop Grid. Sin hacks de 56px ni márgenes compensatorios. */ body.codec-library-sagas-mode:not(.elementor-editor-active) .codec-mobile-context-title.is-saga-title { padding-top: 34px !important; padding-bottom: var(--codec-space-10) !important; } /* * Blindaje: aunque una plantilla cacheada conserve markup histórico, * las antiguas pestañas de estados jamás vuelven a mostrarse. */ body:not(.elementor-editor-active) .codec-status-tabs, body:not(.elementor-editor-active) .codec-status-tab { display: none !important; } body:not(.elementor-editor-active) { padding-bottom: 0 !important; } /* * Biblioteca / Ideas / Sagas: * el título vive inmediatamente antes del Loop Grid real. * Reservamos su propio espacio en flujo normal y evitamos cualquier * solapamiento con cards o wrappers de Elementor. */ body:not(.elementor-editor-active) .codec-mobile-context-title.is-listing-title { display: block !important; position: relative !important; inset: auto !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 48px var(--codec-space-10) 34px !important; clear: both !important; float: none !important; text-align: center !important; transform: none !important; z-index: 1 !important; } /* * El grid empieza DESPUÉS del bloque de título, nunca pegado o por encima. */ body:not(.elementor-editor-active) .codec-mobile-context-title.is-listing-title + .elementor-element { margin-top: 0 !important; padding-top: 0 !important; clear: both !important; } /* * Ya no necesitamos una geometría distinta para Sagas. */ body.codec-library-sagas-mode:not(.elementor-editor-active) .codec-mobile-context-title.is-saga-title { padding: 48px var(--codec-space-10) 34px !important; margin: 0 !important; } } /* * La ficha de una Saga usa el mismo H1 robusto del sistema de detalle, * pero centrado. No afecta a las fichas de Games/Anime/etc. */ body.single-saga .codec-detail-title { display: block !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center !important; } @media (max-width:767px) { /* * Dashboard / Biblioteca / Ideas / Sagas: * adoptan la misma personalidad tipográfica del H1 de una ficha: * más peso, tracking más cerrado y mayor presencia. */ body:not(.elementor-editor-active) .codec-mobile-context-title { color: var(--codec-color-heading) !important; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: var(--codec-type-display-size-mobile) !important; font-style: normal !important; font-weight: var(--codec-type-display-weight) !important; line-height: var(--codec-type-display-leading) !important; letter-spacing: var(--codec-type-display-tracking) !important; text-transform: none !important; text-align: center !important; } } /* Taxonomy dashboards: shared layout; only column counts vary by dashboard type. */ @media (min-width:1025px) { .codec-tax-dashboard{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--codec-space-11); align-items:start; } .codec-tax-dashboard > .codec-dashboard-entry-section:first-child{grid-column:1/-1;} .codec-tax-dashboard > .codec-tax-dashboard-group{min-width:0;margin-top:34px!important;} .codec-tax-dashboard .codec-collection-dashboard-recent-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .codec-tax-dashboard[data-codec-tax-dashboard="consolas"] .codec-dashboard-summary-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } .codec-tax-dashboard[data-codec-tax-dashboard="generos"] .codec-dashboard-summary-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } } .codec-tax-dashboard-visual .codec-dashboard-summary-card > span{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:var(--codec-space-4) !important; width:100% !important; line-height:1 !important; text-align:center !important; white-space:pre-line !important; } .codec-tax-dashboard-visual .codec-summary-label{ display:block !important; margin: 0 !important; padding: 0 !important; font-size:15px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.04em !important; text-transform:uppercase !important; } .codec-tax-dashboard-visual .codec-summary-count{ display:block !important; margin: 0 !important; padding: 0 !important; font-size:38px !important; line-height:1 !important; font-weight:850 !important; letter-spacing:-.025em !important; } @media (max-width:767px) { .codec-tax-dashboard-visual .codec-dashboard-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:var(--codec-space-5) !important; } .codec-tax-dashboard-visual .codec-dashboard-summary-card{ min-height:112px !important; padding: var(--codec-space-5) !important; } .codec-tax-dashboard-visual .codec-dashboard-summary-card span{ font-size:17px !important; line-height:1.08 !important; } .codec-tax-dashboard-visual .codec-dashboard-summary-card > span{ gap:var(--codec-space-4) !important; line-height:1 !important; } .codec-tax-dashboard-visual .codec-summary-label{ font-size:12px !important; } .codec-tax-dashboard-visual .codec-summary-count{ margin: 0 !important; font-size:32px !important; } .codec-mobile-context-title.is-dashboard-title + .codec-tax-dashboard{ margin-top: 0 !important; } } .codec-quick-add-launch{position:fixed!important;right:24px!important;bottom:24px!important;z-index:99990!important;} .codec-quick-add-backdrop[hidden],.codec-quick-add-modal[hidden]{display:none!important;} @media (min-width:1025px) { html.codec-sidebar-pref-collapsed .codec-native-sidebar .codec-sidebar-collection-group.is-open .codec-sidebar-subnav, body.codec-native-sidebar-collapsed .codec-native-sidebar .codec-sidebar-collection-group.is-open .codec-sidebar-subnav{ display:none !important; } } /* CODEC 6.0 — estado canónico del submenú de la colección activa. */ @media (min-width:1025px) { html:not(.codec-sidebar-pref-collapsed) body:not(.codec-native-sidebar-collapsed) .codec-native-sidebar:not(.is-collapsed) .codec-sidebar-collection-group.is-open .codec-sidebar-subnav{ display:flex !important; flex-direction:column; } } /* ========================================================================== */ /* CODEC 6.0 — canonical collection toolbar on mobile */ /* Four real controls: Filtros · Buscar · Orden · Vista. */ /* Agrupar belongs inside Orden and is not a top-level cell anymore. */ /* ========================================================================== */ @media (max-width:1024px) { body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-toolbar-right { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 42px !important; align-items: stretch !important; justify-items: stretch !important; box-sizing: border-box !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: visible !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-toolbar-right > * { position: relative !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 !important; } /* The old standalone Group control is intentionally absent from the bar. */ body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-toolbar-right > .codec-group-dropdown { display: none !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-mobile-filters-toggle { grid-column: 1 !important; display: flex !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-context-search { grid-column: 2 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-sort-dropdown { grid-column: 3 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-view-control { grid-column: 4 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) :is(.codec-mobile-filters-toggle, .codec-context-search, .codec-sort-dropdown, .codec-view-control), body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) .codec-view-control > .codec-view-dropdown { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 !important; } body:not(.elementor-editor-active) .codec-toolbar-sticky.codec-mobile-toolbar-fixed .codec-toolbar:not(.codec-global-results-controls) :is(.codec-mobile-filters-toggle, .codec-context-search-toggle, .codec-sort-current, .codec-view-current) { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: var(--codec-control-height-lg) !important; min-height: var(--codec-control-height-lg) !important; margin: 0 !important; padding: 0 2px !important; } } /* ========================================================================== */ /* CODEC 6.0 — buscador contextual móvil: foco iOS + sugerencias flotantes */ /* ========================================================================== */ @media (max-width:1024px) { /* Safari iOS hace auto-zoom al enfocar inputs con fuente menor de 16px. */ body:not(.elementor-editor-active) .codec-mobile-context-search-float .codec-context-search-input { font-size: 16px !important; } /* El formulario se mueve al ; las sugerencias viven dentro de él y deben posicionarse respecto al propio formulario flotante, no al toolbar. */ body:not(.elementor-editor-active) .codec-mobile-context-search-float .codec-context-suggestions { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: 0 !important; z-index: 100001 !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: min(45vh, 360px) !important; } } /* ===================================================== CODEC 6.0.2 — NUEVAS COLECCIONES EN MOTORES COMPARTIDOS ===================================================== */ /* Comics: contraste legible para el estado Leyendo. */ #codec-comics-loop .codec-card-badge-status.codec-status-leyendo { color: #2563B8 !important; text-shadow: none !important; } /* * Badges / Favorito: * mismas clases globales de Vista, aplicadas a los tres Loop Grid nuevos. * No hay controles ni renderer nuevos; solo se amplía el selector común. */ body.codec-badges-hidden :is(#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop) .codec-card-badges .codec-card-badge { display: none !important; } body.codec-badges-visible :is(#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop) .codec-card-badges { visibility: visible !important; opacity: 1 !important; } :is(#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop) .codec-card-god-marker { display: none !important; } body.codec-favorite-hidden :is(#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop) .codec-game-card:has(.codec-card-god-marker)::before { display: none !important; } body:not(.codec-favorite-hidden) :is(#codec-cartoons-loop,#codec-documentaries-loop,#codec-comics-loop) .codec-game-card:has(.codec-card-god-marker)::before { display: flex !important; } \n\n/* =====================================================\n CODEC 6.0.4 — PARIDAD DIBUJOS / DOCUMENTALES / COMICS\n===================================================== */\n\n/*\n * Dibujos y Documentales usan el estado \"Viendo\".\n * Misma corrección de contraste aplicada a \"Leyendo\" en Comics.\n */\n:is(#codec-cartoons-loop,#codec-documentaries-loop)\n.codec-card-badge-status.codec-status-viendo {\n color: #2563B8 !important;\n text-shadow: none !important;\n}\n /* ===================================================== CODEC 6.0.5 — VISTA DESACOPLADA DEL ID DEL LOOP GRID ===================================================== */ /* * Las bibliotecas Elementor clonadas reutilizan exactamente los mismos * controles de Vista. El estado se aplica al Loop Grid activo sin depender * de que cada colección tenga que añadirse manualmente a una lista de IDs. */ /* Badges OFF: ocultos en reposo. */ body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .codec-card-badges .codec-card-badge, body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .codec-card-badges .codec-card-badge { display: none !important; } /* Badges ON. */ body.codec-badges-visible:not(.codec-view-list) .elementor-widget-loop-grid .codec-card-badges, body.codec-badges-visible:not(.codec-view-list) .elementor-loop-container .codec-card-badges { visibility: visible !important; opacity: 1 !important; } /* Nombre OFF: oculto en reposo. */ body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .codec-game-card-title, body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .elementor-widget-heading.codec-game-card-title, body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .codec-game-card-title, body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .elementor-widget-heading.codec-game-card-title { opacity: 0 !important; visibility: hidden !important; } /* Nombre ON. */ body:not(.codec-name-hidden):not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .codec-game-card-title, body:not(.codec-name-hidden):not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .codec-game-card-title { opacity: 1 !important; visibility: visible !important; } /* Favorito: el marcador sigue siendo solo detector. */ .elementor-widget-loop-grid .codec-card-god-marker, .elementor-loop-container .codec-card-god-marker { display: none !important; } body.codec-favorite-hidden .elementor-widget-loop-grid .codec-game-card:has(.codec-card-god-marker)::before, body.codec-favorite-hidden .elementor-loop-container .codec-game-card:has(.codec-card-god-marker)::before { display: none !important; } body:not(.codec-favorite-hidden) .elementor-widget-loop-grid .codec-game-card:has(.codec-card-god-marker)::before, body:not(.codec-favorite-hidden) .elementor-loop-container .codec-game-card:has(.codec-card-god-marker)::before { display: flex !important; } /* * Desktop: OFF significa oculto en reposo + visible al hover, * exactamente como en las bibliotecas históricas. */ @media (min-width:1025px) and (hover:hover) and (pointer:fine) { body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .codec-game-card:hover .codec-game-card-title, body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .codec-game-card:hover .codec-game-card-title, body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .e-loop-item:hover .codec-game-card-title, body.codec-name-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .e-loop-item:hover .codec-game-card-title { opacity: 1 !important; visibility: visible !important; } body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .codec-game-card:hover .codec-card-badges .codec-card-badge, body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .codec-game-card:hover .codec-card-badges .codec-card-badge, body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-widget-loop-grid .e-loop-item:hover .codec-card-badges .codec-card-badge, body.codec-badges-hidden:not(.codec-view-list):not(.codec-view-tiny) .elementor-loop-container .e-loop-item:hover .codec-card-badges .codec-card-badge { display: inline-flex !important; } } /* ===================================================== CODEC 6.0.6 — FAVORITO EN LOOP GRID COMPARTIDO ===================================================== */ /* * Misma bandana dorada histórica de Codec. * Se amplía el selector al Loop Grid real de Elementor para que una * biblioteca clonada no dependa de un ID concreto de wrapper. */ body:not(.codec-view-list):not(.codec-favorite-hidden) .elementor-widget-loop-grid .codec-game-card:has(.codec-card-god-marker)::before, body:not(.codec-view-list):not(.codec-favorite-hidden) .elementor-loop-container .codec-game-card:has(.codec-card-god-marker)::before { content: "★" !important; position: absolute !important; right: 0 !important; bottom: 0 !important; top: auto !important; left: auto !important; z-index: 10 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; width: 46px !important; height: 46px !important; padding: 0 7px var(--codec-space-2) 0 !important; border-radius: 0 0 18px 0 !important; background: #F3C63F !important; clip-path: polygon( 100% 0, 100% 100%, 0 100% ) !important; color: #6C4700 !important; font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; } /* Misma variante reducida para Cards diminutas. */ body.codec-view-tiny:not(.codec-favorite-hidden) .elementor-widget-loop-grid .codec-game-card:has(.codec-card-god-marker)::before, body.codec-view-tiny:not(.codec-favorite-hidden) .elementor-loop-container .codec-game-card:has(.codec-card-god-marker)::before { width: 28px !important; height: 28px !important; padding: 0 var(--codec-space-1) var(--codec-space-1) 0 !important; border-radius: 0 !important; font-size: 9px !important; } /* Off sigue teniendo prioridad absoluta. */ body.codec-favorite-hidden .elementor-widget-loop-grid .codec-game-card:has(.codec-card-god-marker)::before, body.codec-favorite-hidden .elementor-loop-container .codec-game-card:has(.codec-card-god-marker)::before { display: none !important; }