/* =========================================================================== SUELDOS DE FUNCIONARIOS — estilos de los dot plots HTML plano para CMS: sin ni reset global (el box-sizing va inline en el HTML). Todas las clases/ids llevan el prefijo `sueldos-` para no colisionar con el CMS. Estilo tomado del proyecto "gran transferencia del alquiler". Paleta en tokens :root (--sueldos-*), espejo del objeto COLOR del JS. =========================================================================== */ :root { --sueldos-azul: #005695; /* tope / mediana / referencia */ --sueldos-amarillo: #ECDC19; /* minimo / entrada */ --sueldos-gris: #c4c4c4; /* bandas */ --sueldos-rejilla: #c5c5c5; /* rejilla de eje (estilo de la casa) */ --sueldos-eje: #939393; /* texto de eje (estilo de la casa) */ --sueldos-tinta: #1a1a1a; /* texto principal */ } /* --- TÍTULOS / SUBTÍTULOS / FUENTE --------------------------------------- */ .sueldos-titulo { font-family: 'Encode Sans', sans-serif; font-size: 22px; font-weight: 700; color: #000; line-height: 1.3; margin: 34px 0 6px; text-align: left; padding: 0; } .sueldos-subtitulo { font-family: 'Encode Sans', sans-serif; font-size: 14px; color: #555; line-height: 20px; margin: 0 0 10px; max-width: 820px; text-align: left; padding: 0; } .sueldos-fuente { font-family: 'Encode Sans', sans-serif; font-size: 12px; color: var(--sueldos-eje); /* gris medio de la casa (#939393) */ margin: 8px 0 0; text-align: left; padding: 0; } /* --- LEYENDA (bajo el subtítulo) ----------------------------------------- */ .sueldos-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; font-family: 'Encode Sans', sans-serif; font-size: 12px; color: #444; } .sueldos-leyenda-item { display: flex; align-items: center; gap: 6px; } .sueldos-sw-circle { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .sueldos-sw-band { width: 22px; height: 6px; border-radius: 3px; background: var(--sueldos-gris); opacity: 0.6; display: inline-block; flex-shrink: 0; } .sueldos-sw-line { width: 20px; height: 0; border-top: 2px dashed var(--sueldos-azul); display: inline-block; flex-shrink: 0; } /* --- CONTENEDOR DE GRÁFICO ---------------------------------------------- */ .sueldos-chart { width: 100%; position: relative; } .sueldos-chart svg { display: block; width: 100%; height: auto; overflow: visible; } /* Ejes (los ticks van arriba) — 14px como la plantilla de la casa (.ed-eje) */ .sueldos-chart .sueldos-eje text { font-family: 'Encode Sans', sans-serif; font-size: 14px; fill: var(--sueldos-eje); } .sueldos-chart .sueldos-eje .domain { display: none; } .sueldos-chart .sueldos-eje .tick line { stroke: var(--sueldos-rejilla); stroke-width: 0.5; stroke-dasharray: 3; } /* Etiquetas del eje Y (profesiones / comunidades) — 14px como la plantilla */ .sueldos-chart .sueldos-ylabel { font-family: 'Encode Sans', sans-serif; font-size: 14px; fill: #222; } .sueldos-chart .sueldos-grupolabel { font-family: 'Encode Sans', sans-serif; font-size: 14px; font-weight: 700; fill: var(--sueldos-azul); } .sueldos-chart .sueldos-ccaalabel { font-family: 'Encode Sans', sans-serif; font-size: 14px; fill: #555; } /* Línea de referencia (mediana salarial de España, gráfico 1) */ .sueldos-chart .sueldos-ref-line { stroke: var(--sueldos-azul); stroke-width: 1.5; stroke-dasharray: 5 4; } .sueldos-chart .sueldos-ref-text { font-family: 'Encode Sans', sans-serif; font-size: 12px; font-weight: 600; fill: var(--sueldos-azul); } /* Puntos del beeswarm (fino borde blanco para separar solapes) */ .sueldos-chart .sueldos-bee { stroke: #fff; stroke-width: 0.4; cursor: pointer; transition: opacity 0.12s ease; } /* Capa de resalte (patrón de la casa): círculo transparente con borde sobre el punto activo, sin tocar el propio punto. Estilo espejo de .ed-highlight-layer de la plantilla. */ .sueldos-chart .sueldos-hl-layer circle { fill: none; stroke: var(--sueldos-tinta); stroke-width: 2px; } /* Puntos y bandas de rango — círculos de un solo color, sin borde */ .sueldos-chart .sueldos-banda { fill: var(--sueldos-gris); opacity: 0.5; } .sueldos-chart .sueldos-dot { fill: var(--sueldos-azul); stroke: none; } .sueldos-chart .sueldos-dot-max { fill: var(--sueldos-azul); stroke: none; } .sueldos-chart .sueldos-dot-min { fill: var(--sueldos-amarillo); stroke: none; } .sueldos-chart .sueldos-hit { fill: transparent; cursor: pointer; } /* Atenuado al pasar el ratón por una fila */ .sueldos-chart .sueldos-fila, .sueldos-chart .sueldos-filaccaa { transition: opacity 0.12s ease; } /* --- TOOLTIP (caja blanca recta con sombra) ----------------------------- */ .sueldos-tooltip { position: fixed; pointer-events: none; display: none; background: #fff; border-radius: 0; padding: 8px 11px; font-family: 'Encode Sans', sans-serif; font-size: 12px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.14); max-width: min(260px, calc(100vw - 24px)); /* en movil nunca mas ancho que la pantalla */ z-index: 9999; line-height: 1.55; overflow-wrap: break-word; /* nombres largos (destinos de policia) parten de linea, no se salen */ } .sueldos-tooltip-titulo { font-weight: 700; font-size: 13px; margin: 0 0 4px; color: var(--sueldos-tinta); overflow-wrap: break-word; } .sueldos-tt-tabla { border-collapse: collapse; width: 100%; } /* AMBAS columnas pueden partir de linea (etiquetas largas de nivel y valores largos como comunidades caben dentro de la caja). Los importes en € llevan espacio duro (nbsp) en el JS, asi que el numero nunca se separa del simbolo. vertical-align top alinea el valor con la 1a linea. */ .sueldos-tt-tabla td { padding: 1px 0; color: #444; vertical-align: top; overflow-wrap: break-word; } .sueldos-tt-tabla td:first-child { padding-right: 12px; } .sueldos-tt-tabla td:last-child { text-align: right; color: var(--sueldos-tinta); font-weight: 600; } .sueldos-tt-sep td { border-top: 1px solid #eee; padding-top: 5px; } /* Rejilla de 2 columnas para los mini dot plots (multiples) */ .sueldos-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; } @media (max-width: 700px) { .sueldos-grid2 { grid-template-columns: 1fr; } } /* Leyenda interactiva (clic para aislar un nivel) */ .sueldos-leyenda--interactiva .sueldos-leyenda-item { cursor: pointer; user-select: none; } .sueldos-leyenda-item--off { opacity: 0.3; } /* Nota metodológica en gris suave bajo un gráfico */ .sueldos-nota { font-family: 'Encode Sans', sans-serif; font-size: 12px; color: #999; line-height: 1.45; margin: 6px 0 0; max-width: 820px; text-align: left; } /* Título pequeño en negrita de cada mini dot plot */ .sueldos-mini-titulo { font-family: 'Encode Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--sueldos-tinta); margin: 16px 0 6px; text-align: left; } /* --- MÓVIL: título y subtítulo IGUAL que en escritorio (22 / 14); solo bajan los ejes/leyenda --- */ @media (max-width: 640px) { .sueldos-chart .sueldos-eje text, .sueldos-chart .sueldos-ylabel, .sueldos-chart .sueldos-ccaalabel, .sueldos-chart .sueldos-grupolabel { font-size: 12px; } .sueldos-leyenda { font-size: 12px; } }