/* * charts_lista_espera_madrid.css — Lista de espera en Madrid (elDiario.es Datos) * ------------------------------------------------------------------- * Un único CSS para producción, en tres bloques: * 1) TOKENS (copia de "plantilla graficos"/shared/styles/tokens.css) * 2) BASE (copia de shared/styles/base.css + shared/components/leyenda.css): .ed-chart * 3) PROYECTO: todo bajo .chart-lista-espera-madrid * Cada contenedor lleva class="ed-chart chart-lista-espera-madrid" (lo añade el JS en el init). * ------------------------------------------------------------------- */ /* ============================ 1) TOKENS ============================ */ :root { --ed-rojo: #D0021B; --ed-negro: #1a1a1a; --ed-amarillo: #ECDC19; --ed-azul: #4A90E2; --ed-azul-principal: #005695; --ed-gris-900: #333333; --ed-gris-700: #4a4a4a; --ed-gris-500: #939393; --ed-gris-300: #c5c5c5; --ed-gris-200: #dedede; --ed-gris-100: #eaeaea; --ed-texto: #1a1a1a; --ed-texto-suave: #4a4a4a; --ed-radio: 4px; --ed-fuente: 'Encode Sans', 'Helvetica Neue', Arial, sans-serif; --ed-fuente-titulo: 'Sanomat-Bold', Georgia, 'Times New Roman', serif; } /* ============================= 2) BASE ============================= */ /* Reset mínimo, SOLO dentro del gráfico */ .ed-chart, .ed-chart *, .ed-chart *::before, .ed-chart *::after { box-sizing: border-box; } .ed-chart { font-family: var(--ed-fuente); color: var(--ed-texto); line-height: 1.4; margin: 24px 0; /* Anti-CMS: el artículo suele forzar text-align:center y elementos flotados. */ text-align: left; clear: left; } /* Cabecera: título, subtítulo y fuente */ .ed-titulo { font-family: var(--ed-fuente); font-weight: 700; color: var(--ed-negro); font-size: 22px; line-height: 1.2; margin: 0 0 4px; } .ed-titulo.ed-display, .ed-display .ed-titulo { font-family: var(--ed-fuente-titulo); } .ed-subtitulo { font-family: var(--ed-fuente); color: var(--ed-texto-suave); font-size: 14px; margin: 0 0 16px; } .ed-fuente { font-family: var(--ed-fuente); color: var(--ed-gris-500); font-size: 12px; margin-top: 8px; } /* SVG responsive */ .ed-chart .ed-svg { display: block; width: 100%; height: auto; overflow: visible; } /* Ejes D3, estilo elDiario: dominio oculto, texto gris medio, rejilla punteada en ejes de valor */ .ed-chart .ed-svg text { font-family: var(--ed-fuente); } .ed-chart .ed-eje text { font-size: 14px; fill: var(--ed-gris-500); } .ed-chart .ed-eje path { stroke-width: 0; } .ed-chart .ed-eje line { stroke: var(--ed-gris-500); stroke-width: 1; } .ed-chart .ed-eje-grid line { stroke: var(--ed-gris-300); stroke-width: 0.5; stroke-dasharray: 3; } /* Halo de texto: contorno blanco pintado DEBAJO del relleno */ .ed-chart .ed-halo { stroke: #fff; stroke-width: 3px; stroke-opacity: 0.9; paint-order: stroke; } /* Capa de resalte (borde negro sobre el elemento activo) */ .ed-chart .ed-highlight-layer rect, .ed-chart .ed-highlight-layer circle, .ed-chart .ed-highlight-layer path { fill: none; stroke: var(--ed-negro); stroke-width: 2px; } /* Leyenda categórica (shared/components/leyenda.css) */ .ed-leyenda { font-family: var(--ed-fuente); color: var(--ed-texto); margin: 8px 0; } .ed-leyenda-items { display: flex; flex-wrap: wrap; gap: 6px 16px; } .ed-leyenda-item { display: flex; align-items: center; gap: 6px; font-size: 13px; } .ed-leyenda-muestra { width: 12px; height: 12px; border-radius: 10px; display: inline-block; flex: none; } .ed-leyenda-texto { color: var(--ed-texto); } /* El tooltip (.ed-tooltip) se crea en con estilos INLINE: no lleva CSS aquí a propósito. */ /* =========================== 3) PROYECTO =========================== */ /* Líneas, áreas y guía de hover (los tres gráficos) */ .chart-lista-espera-madrid .ed-linea { stroke-linejoin: round; stroke-linecap: round; } .chart-lista-espera-madrid .ed-area { stroke: none; fill-opacity: 0.2; } .chart-lista-espera-madrid .ed-guia { stroke: var(--ed-gris-500); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; } .chart-lista-espera-madrid .ed-aviso { font-size: 13px; color: var(--ed-gris-500); margin: 12px 0; } /* Las cifras del eje Y van dentro del área: que no capturen el ratón */ .chart-lista-espera-madrid .ed-eje-interior text { pointer-events: none; } /* Evolución del especialista: rejilla de paneles */ .chart-lista-espera-madrid .ed-panel-grid { display: flex; } .chart-lista-espera-madrid .ed-panel { min-width: 0; } .chart-lista-espera-madrid .ed-panel-titulo { font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ed-gris-900); margin: 0; } .chart-lista-espera-madrid .ed-panel-variacion { font-size: 13px; line-height: 1.25; color: var(--ed-texto-suave); margin: 2px 0 6px; min-height: 16px; } /* Especialista vs quirúrgica: región sombreada y etiquetas al final de cada línea */ .chart-lista-espera-madrid .ed-region-texto { font-size: 12px; font-weight: 500; fill: var(--ed-gris-500); } .chart-lista-espera-madrid .ed-etiqueta-serie { font-size: 14px; fill: var(--ed-negro); pointer-events: none; } .chart-lista-espera-madrid .ed-etiqueta-nombre { font-weight: 700; } /* Comparativa por CCAA */ .chart-lista-espera-madrid .ed-eje-ccaa text { fill: var(--ed-texto); } .chart-lista-espera-madrid .ed-cifra { font-size: 13px; fill: var(--ed-texto-suave); pointer-events: none; } .chart-lista-espera-madrid .ed-destacada { font-weight: 700; fill: var(--ed-negro); } .chart-lista-espera-madrid .ed-banda-fila { cursor: pointer; }