/* todoloquepagas — /poder-adquisitivo/: las nueve preguntas de sueldos, precios, ahorro, vivienda y hogares.
   Se carga con <x-layouts.base :estilos="['datos', 'destino', 'areas', 'poder']">, después de tokens.css, componentes.css y sitio.css.
   Regla: todos los colores salen de tokens.css. Aquí no se escribe ningún color literal. */

/* El titular de cada pregunta: la cifra que manda, con su subrayado. */
.poder__titular { font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); margin: 0; }

/* «Antes de descontar los precios / Descontados los precios» (pregunta 1), sin JavaScript: el botón elegido enseña su
   gráfica. Sin :has(), se ven las dos, una debajo de otra. */
.poder-selector { display: grid; gap: var(--espacio-4); }
.poder-selector__opciones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); margin: 0; }
.poder-selector__panel { display: grid; gap: var(--espacio-4); }
.poder-selector:has(input[value="nominal"]:checked) > [data-vista="real"],
.poder-selector:has(input[value="real"]:checked) > [data-vista="nominal"] { display: none; }

/* El texto de licencias del pie de la página (licencias.md del paquete). */
.poder__licencias { font: var(--tipo-nota); color: var(--tinta-suave); }

/* La gráfica de líneas de las provincias (<x-poder.lineas>), que no cargan datos.css: sus reglas de la figura y de las
   líneas, las mismas que en datos.css (allí manda esa; aquí, en /poder-adquisitivo/, se repiten sin cambiar nada). */
.figura { display: grid; gap: var(--espacio-4); margin: 0; container-type: inline-size; }
.figura > * { min-width: 0; }
.figura__titulo { font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); max-width: var(--ancho-lectura); }
.figura__aviso { font: var(--tipo-nota); color: var(--tinta); max-width: var(--ancho-lectura); padding-left: var(--espacio-3); border-left: 3px solid var(--subrayador); margin: 0; }
.grafica--movil { max-width: 520px; }
.grafica--movil text { font-size: 14px; }
.grafica--escritorio { display: none; }
.grafica--escritorio text { font-size: 12.5px; }
@media screen { :is(.grafica--movil, .grafica--escritorio) text { paint-order: stroke; stroke: var(--papel); stroke-width: 3px; stroke-linejoin: round; } }
@container (min-width: 860px) {
  .grafica--movil { display: none; }
  .grafica--escritorio { display: block; }
}
@media print {
  .grafica--movil { display: none; }
  .grafica--escritorio { display: block; }
}
.grafica .linea-tinta { fill: none; stroke: var(--tinta); stroke-width: 2; }
.grafica .linea-neutra { fill: none; stroke: var(--dato-neutro); stroke-width: 2; }
.grafica .linea-trama { stroke-dasharray: 7 4; }
.grafica .punto-tinta { fill: var(--tinta); }
.grafica .punto-neutra { fill: var(--dato-neutro); }

/* Tres líneas o más (<x-datos.grafica-lineas leyenda>): cada línea en tinta con su trazo, y la leyenda encima con su nombre,
   su último valor y el mismo trazo. */
.grafica .linea-puntos, .grafica-leyenda .linea-puntos { stroke-dasharray: 0.5 5; stroke-linecap: round; stroke-width: 3; }
.grafica .linea-raya-punto, .grafica-leyenda .linea-raya-punto { stroke-dasharray: 10 4 0.5 4; stroke-linecap: round; }
.grafica-leyenda { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-6); margin: 0; padding: 0; list-style: none; font: var(--tipo-nota); }
.grafica-leyenda li { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.grafica-leyenda__trazo { flex: none; width: 32px; height: 8px; overflow: visible; }
.grafica-leyenda .linea-tinta { fill: none; stroke: var(--tinta); stroke-width: 2; }
.grafica-leyenda .linea-neutra { fill: none; stroke: var(--dato-neutro); stroke-width: 2; }
.grafica-leyenda .linea-trama { stroke-dasharray: 7 4; }