/* Estilos del catálogo de visualizaciones (índice y páginas de detalle). Complementa a site.css; mismas variables de :root. */ /* Los charts renderizan su texto en Inter (autoalojada por la app en /web/common/), pero el sitio usa Google Sans: hay que declararla aquí para que el motor mida el texto con la métrica real (crítico en word clouds). @font-face solo descarga los pesos que el SVG llegue a usar. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; src: url("/web/common/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 400; src: url("/web/common/Inter-Italic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; src: url("/web/common/Inter-Medium.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; src: url("/web/common/Inter-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; src: url("/web/common/Inter-Bold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 700; src: url("/web/common/Inter-BoldItalic.woff2") format("woff2"); } /* El índice y las fichas no se acotan a la medida de lectura de .page: su contenido es una retícula de tarjetas y un lienzo a todo el carril. La exclusión vive en site.css (.page:not(.page--catalogue) > *); esta clase es su marca. */ /* ---- Índice: grid de tarjetas agrupado por categoría ---- */ .catalogue-section h2 { font-size: 22px; letter-spacing: -0.01em; margin: 44px 0 16px; font-weight: 400; } /* El grid (.catalogue-grid) y la tarjeta (.chart-card) viven en site.css: la home usa las mismas cards en su vitrina, así que la definición es compartida y hay una sola fuente de verdad para su aspecto. */ /* ---- Detalle: breadcrumb, viewer en vivo, CTA, howto y paginación ---- */ /* El titular y la entradilla del índice sí respetan la medida de lectura, aunque las retículas de tarjetas de debajo ocupen el carril entero. */ .page--catalogue > h1, .page--catalogue > .lead { max-width: 720px; } /* La ficha ocupa el carril entero, pero solo el lienzo lo aprovecha: el resto (breadcrumb, titular, descripción, CTA, howto, paginación) se estrecha a una columna de 920px centrada, de lectura cómoda. Así, cuando la ventana da para ello, la visualización se ensancha hasta el ancho de la cabecera; cuando no, carril y columna miden lo mismo y todo cae en la misma vertical. El ancho va en cada hijo —con el mismo valor y centrado— para que compartan borde izquierdo; el :not() da especificidad sobre `.page h1` y `.page--catalogue > h1`, que fijan márgenes y la medida de 720px. */ .page--chart > :not(.viz-embed) { max-width: 920px; margin-inline: auto; } .catalogue-breadcrumb { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; } .catalogue-breadcrumb a { color: var(--ink-soft); text-decoration: none; } .catalogue-breadcrumb a:hover { color: var(--ink); } /* El lienzo se re-renderiza al ancho disponible (el motor observa el contenedor con un ResizeObserver) y, si aun así no cabe, se escala (ver .chart > svg): nunca desborda. overflow-x: clip es solo una red de seguridad para que algo imprevisto no ensanche la página; a diferencia de auto, no crea un contenedor de scroll ni barras. */ .viz-embed { margin: 36px 0 12px; overflow-x: clip; } /* Alto del lienzo: crece con el viewport a la par que el ancho, para que la visualización gane tamaño y no solo márgenes (un grafo circular, un mapa o un treemap se ajustan al lado menor). Tope de 740px: a los 1140px del carril conserva la proporción de ~0,65 del antiguo lienzo de 920×600. En móvil, un lienzo alto sobre ~330 de ancho saldría apaisado al revés; de ahí el mínimo de 360px. Además nunca pasa del alto de la ventana (menos un margen), para que se pueda ver entera. El mismo valor va en min-height (reserva el hueco: la página no salta al aparecer el render) y en la altura real de .chart. */ :root { --viz-height: min(clamp(360px, 68vw, 740px), max(360px, 100vh - 120px)); } /* Móvil apaisado: el ancho es grande (68vw daría un lienzo más alto que la pantalla) pero el alto disponible es mínimo. Se acota por altura, no por ancho. El caso no toca al escritorio: solo se activa con la ventana baja. */ @media (max-height: 520px) and (orientation: landscape) { :root { --viz-height: 320px; } } /* Los del SVG sin fuente explícita heredan la del documento (aquí Google Sans): se declara Inter en el contenedor —igual que hace el body de la app en General.css— para que las visualizaciones se midan y pinten en Inter. tabular-nums replica la alineación de cifras de la app en ejes y leyendas. contain:inline-size es lo que hace responsive la ficha: el SVG que pinta el motor lleva un atributo width en píxeles, y sin contención ese ancho fijo propaga hacia arriba (canvas → figure → artículo) y dimensiona el panel. Al estrechar la ventana se producía un bloqueo circular —el contenedor no podía encoger porque el SVG lo mantenía abierto, y el motor no repintaba porque el contenedor no encogía—, de modo que la página entera desbordaba en horizontal. Con contención en el eje inline el ancho del lienzo lo decide su contenedor, nunca su contenido: el ResizeObserver del motor recibe el ancho nuevo y repinta a la medida. */ .viz-canvas { contain: inline-size; min-height: var(--viz-height); font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; user-select: none; } .viz-canvas .chart { background: #fff; height: var(--viz-height); width: 100%; } /* Cuando un eje es categórico, el motor reserva un mínimo por categoría para que las etiquetas no se pisen (Frame.js, labels_size × 1,8) y, si el lienzo no llega, pinta el SVG más grande que su contenedor (View.js): en la app eso da scroll en el panel. En la ficha, a anchos de móvil (p. ej. las 24 horas del heat map), se escala para que quepa entero, centrado y sin barras de scroll: el SVG lleva viewBox y el preserveAspectRatio por defecto (meet). En el caso normal no cambia nada, porque el SVG ya mide lo que el contenedor. El motor mide .chart y no el SVG, así que el escalado no altera su maquetación, y el hover, el clic y el zoom siguen cuadrando (convierte el ratón con getScreenCTM). */ .viz-canvas .chart > svg { width: 100%; height: 100%; } /* Thumbnail estático: solo lo ven los navegadores sin JS (va en