/* ============================================================ smgr · css/pages/viz.css — ANDAMIAJE COMPARTIDO de visualizaciones Las visualizaciones se integran en el chrome "Foco" (header/menu/footer) pero conservan su tarjeta capturable (#captureArea) con su propio diseño para el screenshot. Este archivo aporta lo COMÚN a todas: · barra de herramientas (título + botón Capturar) en estilo Foco, · el escalador móvil (.viz-scaler) que usa js/viz-chrome.js, · estados del botón de captura. El CSS específico de cada viz va en css/pages/viz_{nombre}.css. Se carga junto al específico vía $page_css = array('viz','viz_{nombre}'). ============================================================ */ /* ---------- Barra de herramientas (fuera del #captureArea) ---------- */ .viz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); } .viz-head h1 { font-family: var(--score); font-size: 26px; font-weight: 700; letter-spacing: .01em; color: var(--ink); } .viz-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; } .viz-capture { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 9px 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff; border: 0; } .viz-capture:hover { background: #0b1424; } .viz-capture:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .viz-capture.processing { opacity: .75; cursor: default; } .capture-label-short { display: none; } /* ============================================================ AISLAMIENTO del #captureArea frente al CSS del chrome. rincon.css/tokens.css viven en el y el motor de captura los CLONA en el iframe del screenshot, así que sus reglas GLOBALES se colaban en la tarjeta (que la página clásica standalone no tenía): `img{display:block; max-width:100%}` descolocaba banderas/escudos/avatares; `body{line-height: 1.5}` + `h3{}` alteraban el texto. Las neutralizamos SOLO bajo #captureArea (gana por especificidad de id, también dentro del clon), reproduciendo el entorno limpio del sitio clásico. Vale para TODAS las visualizaciones. ============================================================ */ /* Reset propio de la tarjeta (la página clásica lo tenía como `*{}`; aquí lo aporta rincon.css en pantalla pero se EXCLUYE del clon de captura, así que lo replicamos scopeado para que el screenshot también lo tenga). */ #captureArea, #captureArea * { margin: 0; padding: 0; box-sizing: border-box; } /* Reproducimos EXACTAMENTE el entorno de la página clásica (que se captura perfecta): esta NO fijaba line-height (→ `normal`) ni tenía regla global de img (→ `display:inline`, baseline). rincon.css impone `img{display:block; max-width:100%}` y `body{line-height:1.5}`; los revertimos bajo #captureArea a los valores por defecto del navegador. NO usar vertical-align:middle ni inline-block: alteran la altura de la línea y estiraban las filas SOLO en el screenshot. */ #captureArea { line-height: normal; color: #1a202c; } #captureArea img { display: inline; max-width: none; vertical-align: baseline; } #captureArea a { color: inherit; text-decoration: none; } #captureArea h1, #captureArea h2, #captureArea h3, #captureArea h4, #captureArea h5, #captureArea h6 { letter-spacing: normal; } /* ---------- Escalador móvil (transform:scale de js/viz-chrome.js) ---------- */ .viz-main { margin-top: var(--sp-4); } .viz-scaler { margin: 0 auto; } /* El #captureArea conserva su ancho natural; el scaler lo encoge en móvil. */ #captureArea { margin: 0 auto; } @media (max-width: 640px) { .viz-head h1 { font-size: 21px; } .viz-capture { padding: 8px 14px; font-size: 13px; } .capture-label-full { display: none; } .capture-label-short { display: inline; } }