/* ============================================================ PANEL SKIN — apariencia de panel/workspace (estilo Blender, Unity, panel administrativo) para los comparadores. Se activa añadiendo class="panel-ui" al y cargando este archivo DESPUÉS del CSS propio de cada comparador. Mantiene la paleta original del sitio (negros + acento naranja); solo aporta el chrome de panel: barras de título compactas, bordes 1px, densidad y barra de estado. ============================================================ */ body.panel-ui { --pn-bg: #1e1e1e; /* fondo de panel (igual que comparison-left original) */ --pn-bg2: #262626; /* barras de título */ --pn-bg3: rgba(255, 255, 255, 0.07); /* controles */ --pn-inset: #141414; /* áreas hundidas */ --pn-border: rgba(255, 255, 255, 0.09); --pn-border-soft: rgba(255, 255, 255, 0.06); --pn-radius: 6px; --pn-text: var(--text-primary, #e8e8e8); --pn-dim: var(--text-secondary, #9a9a9a); --pn-accent: var(--primary-color, #ff6b35); } body.panel-ui.light-theme { --pn-bg: #f4f4f4; --pn-bg2: #ebebeb; --pn-bg3: rgba(0, 0, 0, 0.06); --pn-inset: #ffffff; --pn-border: rgba(0, 0, 0, 0.12); --pn-border-soft: rgba(0, 0, 0, 0.07); } /* ============================================================ OFFSET DEL SIDEBAR FIJO El CSS original empuja cada sección por separado con padding-left:272px. En modo panel lo centralizamos en .page-wrap para que TODO el workspace (toolbar, paneles, barra de estado, resultados) quede a la derecha del dock. ============================================================ */ body.panel-ui .content-with-filters, body.panel-ui .filters-row, body.panel-ui .selection-slots, body.panel-ui .compare-action, body.panel-ui .visual-comparison { padding-left: 0; } @media (min-width: 901px) { body.panel-ui .page-wrap { /* El contenido NO se aparta para dejar sitio al panel: el panel se despliega dentro del margen que .page-wrap ya deja libre a su izquierda (max-width centrado). Mientras quepa ahí, el contenido se queda exactamente donde está al plegar y desplegar. hueco libre = (ancho de ventana − ancho de .page-wrap) / 2 empuje = panel + 20px de separación − hueco libre Si el hueco da de sobra el empuje sale negativo y gana el 1.1rem del padding normal: cero movimiento. Solo empuja cuando el panel de verdad se comería el contenido — pantallas estrechas o el panel arrastrado muy ancho — y entonces solo lo justo. */ padding-left: max( 1.1rem, calc( var(--cmp-side-w, 200px) + 20px - max(0px, (100vw - var(--cmp-wrap-max, 1700px)) / 2) ) ); transition: padding-left 0.35s cubic-bezier(0.77, 0, 0.18, 1); } body.panel-ui.sidebar-collapsed .page-wrap { padding-left: 1.1rem; } } /* ---------- Chrome genérico de panel (clases nuevas) ---------- */ body.panel-ui .ws-panel { background: var(--pn-bg); border: 1px solid var(--pn-border); border-radius: var(--pn-radius); } body.panel-ui .ws-panel-head { display: flex; align-items: center; gap: 0.5rem; background: var(--pn-bg2); border-bottom: 1px solid var(--pn-border); border-radius: calc(var(--pn-radius) - 1px) calc(var(--pn-radius) - 1px) 0 0; padding: 0.5rem 0.85rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--pn-dim); } body.panel-ui .ws-panel-head i { color: var(--pn-accent); font-size: 0.8rem; } body.panel-ui .ws-panel-meta { margin-left: auto; text-transform: none; letter-spacing: 0.4px; font-size: 0.7rem; font-weight: 600; color: var(--pn-dim); background: var(--pn-inset); border: 1px solid var(--pn-border); border-radius: 3px; padding: 2px 8px; } body.panel-ui .ws-panel-body { padding: 0.9rem; } /* ---------- Toolbar superior (hero) ---------- */ body.panel-ui .hero { background: var(--pn-bg); border: 1px solid var(--pn-border); border-left: 3px solid var(--pn-accent); border-radius: var(--pn-radius); padding: 0.5rem 0.9rem; margin: 0.2rem auto 0.85rem; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; box-shadow: none; } body.panel-ui .ws-toolbar-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } body.panel-ui .ws-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--pn-bg3); border: 1px solid var(--pn-border); border-radius: 4px; padding: 3px 10px; font-size: 0.72rem; font-weight: 600; color: var(--pn-dim); white-space: nowrap; } body.panel-ui .ws-chip i { color: var(--pn-accent); font-size: 0.7rem; } /* ---------- Dock lateral de filtros (solo cabecera) ---------- */ body.panel-ui .side-filter h4 { background: var(--pn-bg2); border-bottom: 1px solid var(--pn-border); border-left: none; padding: 0.6rem 0.9rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--pn-dim); } body.panel-ui .side-filter h4 i { color: var(--pn-accent); font-size: 0.8rem; } /* ---------- Viewport central (lista de modelos) ---------- */ body.panel-ui .processors-list-wrapper { background: var(--pn-bg); border: 1px solid var(--pn-border); border-radius: var(--pn-radius); padding: 0.75rem; scrollbar-width: thin; scrollbar-color: rgba(255, 107, 53, 0.4) transparent; } body.panel-ui .processors-list-wrapper::-webkit-scrollbar { display: block; width: 6px; } body.panel-ui .processors-list-wrapper::-webkit-scrollbar-track { background: transparent; } body.panel-ui .processors-list-wrapper::-webkit-scrollbar-thumb { background: rgba(255, 107, 53, 0.4); border-radius: 4px; } body.panel-ui .card-count-banner { background: var(--pn-bg2); border-bottom: 1px solid var(--pn-border); color: var(--pn-dim); text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin: -0.75rem -0.75rem 0.75rem; top: -0.75rem; padding: 0.5rem 0.85rem; } /* ---------- Dock de comparación (slots A–F) ---------- */ body.panel-ui .ws-compare-dock { margin: 1rem 0 1.25rem; } body.panel-ui .ws-compare-dock .selection-slots { margin: 0 0 0.85rem; } body.panel-ui .ws-compare-dock .compare-action { margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--pn-border); justify-content: flex-end; } /* ---------- Resultados: análisis visual ---------- */ body.panel-ui .visual-comparison { background: var(--pn-bg); border: 1px solid var(--pn-border); border-radius: var(--pn-radius); padding-top: 0; padding-right: 1rem; padding-bottom: 1rem; } body.panel-ui .visual-comparison > .results-title { text-align: left; background: var(--pn-bg2); border-bottom: 1px solid var(--pn-border); border-radius: calc(var(--pn-radius) - 1px) calc(var(--pn-radius) - 1px) 0 0; margin: 0 -1rem 0.4rem 0; padding: 0.55rem 0.95rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--pn-dim); } body.panel-ui .visual-comparison > .results-title i { font-size: 0.8rem; color: var(--pn-accent); } body.panel-ui .visual-comparison .results-subtitle { text-align: left; font-size: 0.76rem; margin: 0 0 1rem 1rem; color: var(--pn-dim); } body.panel-ui .visual-comparison .winner-banner, body.panel-ui .visual-comparison .comparison-split, body.panel-ui .visual-comparison .scoring-info-row, body.panel-ui .visual-comparison .specs-table-section, body.panel-ui .visual-comparison .compat-cpu-section { margin-left: 1rem; } body.panel-ui .comparison-left, body.panel-ui .comparison-right { border-radius: var(--pn-radius); box-shadow: none; } body.panel-ui .comparison-left h4, body.panel-ui .comparison-right h4 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--pn-dim); } body.panel-ui .comparison-left h4 i, body.panel-ui .comparison-right h4 i { color: var(--pn-accent); font-size: 0.8rem; } /* ---------- Resultados: tablas de especificaciones ---------- */ body.panel-ui .specs-table-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--pn-dim); } body.panel-ui .specs-table-title i { color: var(--pn-accent); } body.panel-ui .specs-subtable-wrap { background: var(--pn-inset); border: 1px solid var(--pn-border); border-radius: var(--pn-radius); overflow: hidden; margin-bottom: 1rem; } body.panel-ui .specs-subtable-title { background: var(--pn-bg2); border-bottom: 1px solid var(--pn-border); margin: 0; padding: 0.5rem 0.85rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--pn-dim); } body.panel-ui .specs-subtable-title i { color: var(--pn-accent); font-size: 0.78rem; } /* ---------- Resultados: secciones auxiliares ---------- */ body.panel-ui .compat-cpu-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; color: var(--pn-dim); } body.panel-ui .compat-cpu-title i { color: var(--pn-accent); } /* ---------- Carrusel inferior ---------- */ body.panel-ui .carousel-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 1.4px; color: var(--pn-dim); } body.panel-ui .carousel-title i { color: var(--pn-accent); } /* ---------- Barra de estado (estilo Blender) ---------- */ body.panel-ui .ws-statusbar { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; background: var(--pn-bg); border: 1px solid var(--pn-border); border-radius: var(--pn-radius); padding: 0.4rem 0.9rem; margin-top: 1.25rem; font-size: 0.72rem; font-weight: 600; color: var(--pn-dim); } body.panel-ui .ws-statusbar i { color: var(--pn-accent); margin-right: 0.35rem; font-size: 0.72rem; } body.panel-ui .ws-statusbar .ws-status-right { margin-left: auto; opacity: 0.65; letter-spacing: 0.5px; } @media (max-width: 700px) { body.panel-ui .hero { flex-direction: column; align-items: flex-start; gap: 0.4rem; } body.panel-ui .ws-statusbar .ws-status-right { display: none; } }