/* =========================================================================
   Restó360 · Sumaq — vestuario de los gráficos
   Diseñado por Operaria

   El texto de un gráfico nunca lleva el color de la serie: va en tinta, y
   la identidad la pone el punto de color al lado. Un teal claro como texto
   sobre navy no se lee, y un número que hay que adivinar por su color no es
   un número, es un acertijo.
   ========================================================================= */

.gr{width:100%;min-width:0}
.gr-svg{display:block;width:100%;height:auto;overflow:visible}

/* Ticks de eje, etiquetas de fila: tinta apagada, mono, tabulares. */
.gr-tick{
  font-family:var(--mono);font-size:10.5px;fill:var(--tenue-2);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.gr-eje{font-family:var(--mono);font-size:9.5px;fill:rgba(237,234,227,.34);letter-spacing:.14em;text-transform:uppercase}

/* La etiqueta directa: la que va sobre el peak, el extremo o la brecha. Es
   la única que sube de tono, porque es la que el gráfico quiere que leas. */
.gr-directa{
  font-family:var(--mono);font-weight:500;font-size:11.5px;fill:var(--crema);
  font-variant-numeric:tabular-nums;
}
/* Dentro de una barra llena: tinta oscura sobre el relleno claro. */
.gr-dentro{font-family:var(--sans);font-weight:600;font-size:12px;fill:#08211F}

/* ---------- cabecera de gráfico ---------- */

.gr-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:4px}
.gr-titulo{font-family:var(--display);font-weight:400;font-size:1.22rem;line-height:1.15}
.gr-bajada{font-size:12px;line-height:1.45;color:var(--tenue-2);margin-bottom:12px;max-width:56ch}

/* ---------- leyenda ---------- */

.gr-leyenda{display:flex;flex-wrap:wrap;gap:7px 16px;margin:10px 0 0}
.gr-leyenda b{
  display:inline-flex;align-items:center;gap:7px;font-weight:400;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
}
.gr-leyenda i{width:11px;height:3px;border-radius:2px;flex:none}
.gr-leyenda i.punteada{background:none;border-top:2px dashed var(--gr-contexto,#727883);height:0}
.gr-leyenda i.redonda{width:9px;height:9px;border-radius:999px}

/* ---------- el globo ---------- */

.gr-globo{
  position:absolute;z-index:80;pointer-events:none;
  min-width:130px;max-width:250px;
  padding:9px 11px;border-radius:10px;
  background:rgba(8,16,32,.97);border:1px solid var(--linea-fuerte);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-size:12px;line-height:1.5;color:var(--crema);
}
.gr-globo[hidden]{display:none}
.gr-globo b{display:block;font-weight:600;font-size:12.5px;margin-bottom:4px}
.gr-globo span{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.gr-globo span.ctx{color:var(--tenue-2)}
.gr-globo i{width:8px;height:8px;border-radius:999px;flex:none;display:inline-block}

/* ---------- la tabla de respaldo ---------- */

.gr-tabla{margin-top:12px}
.gr-tabla summary{
  display:inline-block;cursor:pointer;list-style:none;
  padding:5px 12px;border-radius:999px;border:1px solid var(--linea);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue-2);
}
.gr-tabla summary::-webkit-details-marker{display:none}
.gr-tabla summary:hover{color:var(--crema);border-color:var(--linea-fuerte)}
.gr-tabla[open] summary{color:var(--teal-cl);border-color:rgba(52,152,145,.5)}
.gr-tabla table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.gr-tabla th,.gr-tabla td{padding:6px 9px;text-align:left;border-bottom:1px solid rgba(237,234,227,.07)}
.gr-tabla thead th{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue-2);font-weight:400;border-bottom-color:var(--linea);
}
.gr-tabla tbody th{font-weight:500}
.gr-tabla .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:rgba(237,234,227,.86)}

/* ---------- la tarjeta que envuelve un gráfico ---------- */

.gr-caja{
  background:var(--navy-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:15px 16px 16px;
  min-width:0;
}
.gr-caja--ancha{grid-column:1/-1}

/* ---------- la cifra grande ---------- */

.hito{
  background:var(--navy-2);border:1px solid var(--linea);border-radius:var(--r);
  padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;
}
.hito--brasa{border-color:rgba(237,94,34,.45);background:rgba(237,94,34,.07)}
.hito__k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue-2)}
/* La cifra que encabeza la pantalla. Va en mono como todas las cifras de
   este sistema: la serif de titular convierte el uno en una I. */
.hito__v{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(2.1rem,5cqi,3.1rem);line-height:1;letter-spacing:-.02em;
}
.hito--brasa .hito__v{color:var(--brasa)}
.hito__d{font-size:13px;line-height:1.5;color:rgba(237,234,227,.78);max-width:46ch}

/* ---------- variación ---------- */

.var{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.var--bien{color:var(--teal-cl)}
.var--mal{color:var(--brasa)}
.var--igual{color:var(--tenue-2)}
.var svg{flex:none}