/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   graficas.css — El aspecto de las gráficas de assets/js/graficas.js
   (dona, línea, barras y área). Sin ninguna librería.

   CLARO Y OSCURO SALEN SOLOS: todo cuelga de las variables del tema
   (assets/css/shell.css) y la paleta se redefine bajo [data-theme="dark"],
   donde los mismos colores necesitan más luz para leerse.

   EL VERDE ES ACENTO, NO FONDO. En una gráfica el color es el dato, así
   que el verde de marca se usa para la serie principal y nada más; el
   resto de la superficie sigue siendo el fondo del panel.

   LA INFORMACIÓN NO DEPENDE DEL COLOR: cada gráfica sale con su leyenda
   escrita y su tabla, y eso vive en graficas.js. Aquí solo se cuida que
   las dos se lean bien.
   ============================================================ */

/* ─── LA PALETA DE LAS SERIES ───
   Ocho colores que se distinguen entre sí, empezando por el verde del
   panel. En oscuro se aclaran: los mismos tonos sobre #111 pierden
   contraste y dejan de leerse. */
:root {
  --wg1: #75B82A;   /* verde WTF: la serie principal */
  --wg2: #378ADD;   /* azul */
  --wg3: #BA7517;   /* ámbar */
  --wg4: #7C6CD6;   /* morado */
  --wg5: #0E9384;   /* verde azulado */
  --wg6: #D2568C;   /* rosa */
  --wg7: #C2410C;   /* naranja quemado */
  --wg8: #64748B;   /* gris azulado: «lo demás» */
}
[data-theme="dark"] {
  --wg1: #8FD13F;
  --wg2: #85B7EB;
  --wg3: #EF9F27;
  --wg4: #A996F0;
  --wg5: #34D3C0;
  --wg6: #F087B2;
  --wg7: #FB8A5B;
  --wg8: #94A3B8;
}

.wg-c1 { --wg: var(--wg1); }
.wg-c2 { --wg: var(--wg2); }
.wg-c3 { --wg: var(--wg3); }
.wg-c4 { --wg: var(--wg4); }
.wg-c5 { --wg: var(--wg5); }
.wg-c6 { --wg: var(--wg6); }
.wg-c7 { --wg: var(--wg7); }
.wg-c8 { --wg: var(--wg8); }

/* ─── LA CAJA ─── */
.wg {
  margin: 0 0 .9rem; padding: 14px;
  background: var(--c1); border: 1px solid var(--br); border-radius: var(--r2);
}
.wg-cab { margin-bottom: 10px; }
.wg-tit { font-size: 13px; font-weight: 800; color: var(--t); line-height: 1.4; }
.wg-ayuda { font-size: 11.5px; color: var(--ts); line-height: 1.55; margin-top: 3px; }

/* El dibujo se estira al ancho que le den. Si no cabe, SE MUEVE ESTA CAJA,
   nunca la página: es lo que hace que un celular de 375 px no tenga scroll
   lateral. */
.wg-lienzo { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.wg-svg { display: block; width: 100%; height: auto; }
.wg-linea, .wg-barras, .wg-area { min-width: 460px; }
.wg-dona { max-width: 230px; margin: 0 auto; min-width: 0; }

/* ─── LAS PIEZAS DEL DIBUJO ─── */
.wg-arco { fill: none; stroke: var(--wg); stroke-width: 26; }
.wg-dona-tot { text-anchor: middle; font-size: 21px; font-weight: 800; fill: var(--t); font-family: var(--font); }
.wg-dona-sub { text-anchor: middle; font-size: 9.5px; fill: var(--ts); font-family: var(--font); }

.wg-guia { stroke: var(--sep); stroke-width: 1; stroke-dasharray: 3 3; }
.wg-cero { stroke: var(--brs); stroke-width: 1.5; }
.wg-eje  { font-size: 10px; fill: var(--ts); font-family: var(--font); }
.wg-eje-x { text-anchor: middle; }
.wg-eje-y { text-anchor: end; }

.wg-trazo { fill: none; stroke: var(--wg); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.wg-punteado { stroke-dasharray: 5 4; stroke-width: 2; }
.wg-relleno { fill: var(--wg); opacity: .14; stroke: none; }
.wg-punto { fill: var(--wg); stroke: var(--c1); stroke-width: 1; }
.wg-barra { fill: var(--wg); }
.wg-destacado { fill: var(--green-bg); }

/* ─── LA LEYENDA, CON SUS CIFRAS ───
   No es decoración: es la mitad de la accesibilidad de la gráfica. Cada
   renglón trae su nombre y su monto escritos, para quien no distinga dos
   colores y para quien lea la pantalla con la oreja. */
.wg-leyenda { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.wg-leyenda-it {
  display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px;
  align-items: center; font-size: 12px; color: var(--t);
  padding: 4px 0; border-bottom: 1px dashed var(--br);
}
.wg-leyenda-it:last-child { border-bottom: 0; }
.wg-marca { width: 11px; height: 11px; border-radius: 3px; background: var(--wg); display: inline-block; }
.wg-marca-linea { height: 4px; border-radius: 2px; }
.wg-leyenda-txt { min-width: 0; overflow-wrap: anywhere; }
.wg-leyenda-val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.wg-leyenda-pct { font-size: 11px; color: var(--ts); white-space: nowrap; }

/* ─── LOS CEROS DE LA LEYENDA (dona con `ceros: true`) ───
   Un canal sin movimiento igual aparece: en gris, con su cero escrito y sin
   porción en el dibujo. Verlo vacío es información; no verlo sería un olvido. */
.wg-cero-it { color: var(--ts); }
.wg-cero-it .wg-leyenda-val { font-weight: 600; }
.wg-marca-cero { background: var(--brs); }
.wg-cero-fila td { color: var(--ts); }

/* ─── BARRAS HORIZONTALES (wg-bh) ───
   Un ranking de pocas filas con nombres largos. No es un SVG: el nombre y el
   monto son texto de verdad, así que se leen con la oreja y se envuelven solos
   en un celular. La cifra va SIEMPRE escrita al lado: el largo de la barra no
   es la única forma de saber cuánto es. */
.wg-bh { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wg-bh-it {
  display: grid; grid-template-columns: minmax(96px, 148px) 1fr auto; gap: 10px;
  align-items: center; font-size: 12px; color: var(--t);
}
.wg-bh-nom { display: flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.wg-bh-pista { height: 15px; border-radius: 5px; background: var(--c2); border: 1px solid var(--br); overflow: hidden; min-width: 0; }
.wg-bh-barra { display: block; height: 100%; background: var(--wg); border-radius: 4px; }
.wg-bh-val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; text-align: right; }
.wg-bh-val small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ts); }

@media (prefers-reduced-motion: no-preference) {
  .wg-bh-barra { animation: wg-crece .35s ease-out both; transform-origin: left center; }
}
/* Como en el SVG: se mueve, no se le baja la tinta. Una barra medio
   transparente es una barra de otro color, y aquí el color es el dato. */
@keyframes wg-crece {
  from { transform: scaleX(.6); }
  to   { transform: none; }
}

/* ─── LA TABLA DE AL LADO ─── */
.wg-tabla-wrap { overflow-x: auto; margin-top: 10px; }
.wg-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.wg-tabla th, .wg-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--br); text-align: left; }
.wg-tabla th {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ts); white-space: nowrap;
}
.wg-tabla td { color: var(--t); }
.wg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-total td { border-top: 2px solid var(--br); border-bottom: 0; }

/* ─── SIN DATOS ───
   Una gráfica vacía no se queda en blanco: dice qué le falta. */
.wg-sin {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 30px 16px; text-align: center; color: var(--ts);
  border: 1px dashed var(--br); border-radius: var(--r2); background: var(--c2);
}
.wg-sin i { font-size: 28px; color: var(--tm); }
.wg-sin p { margin: 0; font-size: 12.5px; line-height: 1.6; max-width: 46ch; }

/* ─── LA APARICIÓN ───
   Un pequeño asentarse, y SOLO si quien mira no ha pedido lo contrario. Con
   `prefers-reduced-motion` puesta, la gráfica sale ya puesta.

   LA ANIMACIÓN NO TOCA LA OPACIDAD, Y ES A PROPÓSITO: un desvanecido deja la
   gráfica medio transparente mientras dura, y una gráfica medio transparente
   es una gráfica con los colores cambiados. Se vio en las capturas de las
   pruebas —los mismos colores salían pastel en claro y apagados en oscuro—,
   y el color aquí no es adorno: es el dato. Moverla un poco no le cambia
   ninguna cifra; bajarle la tinta, sí. */
@media (prefers-reduced-motion: no-preference) {
  .wg-svg { animation: wg-aparece .3s ease-out both; }
}

@keyframes wg-aparece {
  from { transform: translateY(5px); }
  to   { transform: none; }
}

/* ─── CELULAR ─── */
@media (max-width: 760px) {
  .wg { padding: 12px; }
  .wg-leyenda-it { grid-template-columns: 12px 1fr auto; }
  .wg-leyenda-pct { grid-column: 2 / -1; }
  /* La barra se pasa a su propio renglón: así el nombre y el monto caben
     enteros en 375 px y la página no se mueve de lado. */
  .wg-bh-it { grid-template-columns: 1fr auto; gap: 3px 10px; }
  .wg-bh-pista { grid-column: 1 / -1; }
}