, así que la regla de Elementor no lo alcanza y el margen se respeta sin trucos. */ .deb-figwrap { margin: var(--space-10, 32px) 0; } .deb-figwrap > .deb-fig { margin: 0; } /* Dentro del artículo, la columna de lectura deja el gráfico apretado y el tipo del SVG por debajo de 8px reales. Las figuras salen del texto hasta el borde del artículo: el texto conserva su medida y el dato respira. El desplazamiento es exactamente el padding lateral de .deb-art (`padding-inline: var(--page-margin)`), así que se mueve con él en vez de quedarse clavado a un valor que solo es cierto en pantallas grandes. */ @media (min-width: 900px) { .deb-art__body .deb-figwrap { margin-inline: calc(var(--page-margin) * -1); } } /* Rejilla: un paso por encima de la superficie, hairline sólida, recesiva. */ .deb-fig__grid { stroke: var(--border); stroke-width: 1; } /* Texto del gráfico: SIEMPRE tokens de texto, nunca el color de la serie. */ .deb-fig__axis { font-family: var(--font-mono); font-size: 12px; fill: var(--text-subtle); letter-spacing: .04em; font-variant-numeric: tabular-nums; } .deb-fig__val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; fill: var(--text-strong); font-variant-numeric: tabular-nums; } .deb-fig__annot { font-family: var(--font-mono); font-size: 12px; fill: var(--text-muted); letter-spacing: .03em; } .deb-fig__leader { fill: none; stroke: var(--text-subtle); stroke-width: 1; opacity: .55; } /* Marcas */ .deb-fig__bar--a { fill: var(--fig-a); } .deb-fig__bar--b { fill: var(--fig-b); } .deb-fig__line { fill: none; stroke: var(--fig-a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .deb-fig__area { fill: var(--fig-a); opacity: .10; } .deb-fig__dot { fill: var(--fig-a); stroke: var(--surface); stroke-width: 2; } .deb-fig__mark { stroke: var(--text-subtle); stroke-width: 1; opacity: .5; } .deb-fig__hit { fill: transparent; } /* ---------- vista de tabla ---------- */ .deb-fig__table { border-top: 1px solid var(--border); margin-top: calc(var(--space-3, 8px) * -1); } .deb-fig__table > summary { cursor: pointer; list-style: none; padding: 10px 0 2px; font-family: var(--font-mono); font-size: var(--text-xs, .75rem); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .deb-fig__table > summary::-webkit-details-marker { display: none; } .deb-fig__table > summary::before { content: "▸ "; color: var(--text-subtle); } .deb-fig__table[open] > summary::before { content: "▾ "; } .deb-fig__table > summary:hover { color: var(--text); } .deb-fig__tscroll { overflow-x: auto; } .deb-fig table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: var(--text-xs, .75rem); color: var(--text-muted); margin-top: 10px; } .deb-fig th, .deb-fig td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border-faint); white-space: nowrap; } .deb-fig thead th { color: var(--text-subtle); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--border); } .deb-fig td.n, .deb-fig th.n { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; } .deb-fig tbody tr:last-child td { border-bottom: none; } .deb-fig tfoot td { color: var(--text); border-top: 1px solid var(--border); border-bottom: none; padding-top: 10px; } .deb-fig tr.grp td { color: var(--text-subtle); letter-spacing: .12em; text-transform: uppercase; padding-top: 16px; border-bottom: none; } .deb-fig__muted { color: var(--text-subtle); } /* Tabla como figura principal (clipping y rankings): sin

. */ .deb-fig--table { gap: var(--space-3, 8px); } .deb-fig--table table { margin-top: 0; } /* Barras horizontales dentro de tabla */ .deb-fig td.bar, .deb-fig th.bar { width: 34%; min-width: 130px; padding-left: 14px; } .deb-fig__hbar { display: block; height: 9px; border-radius: 0 4px 4px 0; /* extremo de dato redondeado, base cuadrada */ background: var(--fig-a); } .deb-fig__hbar--mut { background: var(--text-subtle); } .deb-fig__nodata { color: var(--text-subtle); font-size: .95em; } .deb-fig__fmt { border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; font-size: .95em; color: var(--text-muted); } .deb-fig__fmt.is-audio { border-color: var(--text-muted); color: var(--text); } .deb-fig__src { display: block; font-size: .85em; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); margin-top: 3px; } .deb-fig__source { font-family: var(--font-mono); font-size: var(--text-xs, .75rem); color: var(--text-subtle); line-height: 1.6; margin: var(--space-6, 18px) 0 0; max-width: 68ch; } /* ---------- tooltip ---------- */ .deb-tip { position: fixed; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .1s linear; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 11px; font-family: var(--font-mono); font-size: var(--text-xs, .75rem); line-height: 1.5; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: var(--shadow-md, 0 10px 30px -14px rgba(0, 0, 0, .6)); } .deb-tip.is-on { opacity: 1; } .deb-tip__h { color: var(--text-subtle); font-size: .9em; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; } .deb-tip__r { display: flex; align-items: center; gap: 8px; } .deb-tip__r b { margin-left: auto; font-weight: 600; color: var(--text-strong); } .deb-tip__sw { width: 9px; height: 9px; border-radius: 2px; flex: none; } /* ---------- el caso: sección de impacto ---------- */ .deb-case__impact { margin-top: var(--space-16); } /* .deb-case__p limita a 56ch, que es la medida correcta para leer y demasiado estrecha para un gráfico. Soltamos el contenedor y devolvemos la medida a los párrafos: el texto se lee igual y la figura ocupa la sección entera. */ .deb-case__impact .deb-case__p { max-width: none; } .deb-case__impact .deb-case__p > p { max-width: 56ch; } @media (max-width: 860px) { .deb-fig { padding: var(--space-5, 16px) var(--space-4, 12px) var(--space-3, 8px); } .deb-fig td.bar, .deb-fig th.bar { display: none; } } @media (prefers-reduced-motion: reduce) { .deb-tip { transition: none; } }