/* ============================================================
     RedEntrenadores — Observatorio: la gramatica de graficos

     Nueve indicadores y nueve formas distintas, a proposito: es la
     regla de diseno explicita del handoff. La pagina no puede leerse
     como nueve listas de barras iguales, asi que **no se unifican en un
     solo componente**. Cada uno tiene su escala, su formula de posicion
     y su color, tabulados en el README del handoff.

       1.1  barras divergentes    densidad por provincia, sobre la media
       1.3  puntos sobre eje      densidad por ciudad
       2.1  pesas (dumbbell)      titulacion: entrenador contra gimnasio
       2.4  barras enfrentadas    canales, en tornado
       3.1  tabla                 depuracion del precio de sesion
       3.3  dispersion            cuota contra renta
       4.1  columnas              busquedas por entrenador
       4.3  barra repartida       motivos para no practicar
       ---  celdas de color       explorador, con la escala del mapa

     LAS POSICIONES LAS CALCULA UN SCRIPT, NO SE ESCRIBEN A MANO
     Igual que hasta ahora: `scripts/observatorio/graficos-panel.py` lee
     los CSV publicos y emite el HTML con los porcentajes puestos. Una
     barra cuya anchura no corresponde a su numero es peor que no tener
     barra, y escritas a mano se desvian en la primera edicion que
     cambie una cifra.

     LA CIUDAD BUSCADA SE RESALTA EN CINCO DE ELLOS
     1.1, 1.3, 3.3, 4.1 y el explorador. El valor es uno solo para toda
     la pagina y lo pone el JS con la clase `ob-g-buscada` sobre la fila
     o el punto; aqui solo esta como se ve.
     ============================================================ 
*/

/* ---------- comun a todas las figuras ---------- */
.ob-fig{background:var(--ob-superficie);border:1px solid var(--ob-borde);
  border-radius:12px;padding:24px}
.ob-fig-cab{display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;gap:16px;padding-bottom:14px;
  border-bottom:1px solid var(--ob-tinta)}
.ob-fig-tit{font-family:'Barlow',sans-serif;font-weight:700;font-size:22px;
  line-height:1.15}
.ob-fig-sub{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ob-apagado)}
.ob-fig-pie{margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--ob-apagado)}
.ob-fig-leyenda{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ob-fig-clave{display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--ob-apagado)}
.ob-fig-cuadro{width:12px;height:12px;flex:0 0 auto}
/* Las dos series son siempre las mismas: entrenadores en verde, gimnasios en
   gris. Un cuadro de leyenda que no use el color de su serie es peor que no
   tener leyenda. */
.ob-cuadro-a{background:var(--ob-verde)}
.ob-cuadro-b{background:var(--ob-serie-gris)}
/* La fila que coincide con la ciudad buscada, y la de la media. */
.ob-g-buscada{background:var(--ob-verde-suave);font-weight:700}
.ob-g-buscada .ob-g-val{color:var(--ob-verde-oscuro)}
.ob-g-media{background:var(--ob-superficie-2);font-weight:700}
.ob-g-media .ob-g-val{color:var(--ob-tinta)}

/* ---------- 1.1 barras divergentes ----------
   La media NO es una fila: es el eje vertical del 50%. Cada barra sale de ese
   eje hacia donde le toque, asi que la distancia a la media se lee sin
   comparar dos numeros.

   dev = (valor / 17,4 - 1) x 100 ; k = min(|dev|, 60) / 60 x 50
   dev < 0  ->  left: 50-k, width: k        dev >= 0  ->  left: 50, width: k */
.ob-g-div-fila{display:grid;
  grid-template-columns:minmax(0,190px) 74px minmax(0,1fr) minmax(0,180px);
  gap:16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--ob-borde)}
.ob-g-div-fila:last-child{border-bottom:0}
.ob-g-nombre{font-size:14.5px;line-height:1.35}
.ob-g-val{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.ob-g-div-pista{position:relative;height:18px}
/* El eje desborda 9 px arriba y abajo para que se vea continuo entre filas:
   con la altura justa queda una linea de puntos, no un eje. */
.ob-g-div-eje{position:absolute;left:50%;top:-9px;bottom:-9px;width:1px;
  background:var(--ob-tinta)}
.ob-g-div-barra{position:absolute;top:4px;height:10px;background:var(--ob-serie-gris)}
.ob-g-div-barra.ob-arriba{background:var(--ob-verde)}
.ob-g-buscada .ob-g-div-barra{background:var(--ob-verde-oscuro)}
.ob-g-div-dev{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.ob-g-div-n{font-size:11px;color:var(--ob-apagado);text-align:right}

/* ---------- 1.3 puntos sobre eje comun ----------
   x = valor / 45 x 100. La media (17,4) cae en el 38,6% y va en discontinua:
   aqui la referencia no parte el grafico en dos, lo cruza. */
.ob-g-pt-fila{display:grid;
  grid-template-columns:minmax(0,210px) 74px minmax(0,1fr) minmax(0,150px);
  gap:16px;align-items:center;padding:8px 0}
.ob-g-pt-pista{position:relative;height:20px}
.ob-g-pt-hair{position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ob-borde)}
.ob-g-pt-media{position:absolute;top:-8px;bottom:-8px;width:1px;
  background:repeating-linear-gradient(var(--ob-tinta) 0 3px,transparent 3px 6px)}
.ob-g-pt{position:absolute;top:3px;width:14px;height:14px;border-radius:999px;
  margin-left:-7px;background:var(--ob-verde)}
.ob-g-buscada .ob-g-pt{background:var(--ob-verde-oscuro)}

/* ---------- 2.1 pesas ----------
   Dos puntos unidos por un segmento: lo que se lee es la DISTANCIA entre
   entrenadores y gimnasios, no cada valor por su lado.
   x = valor / 90 x 100 */
.ob-g-pesa-fila{display:grid;
  grid-template-columns:minmax(0,300px) 58px 58px minmax(0,1fr);
  gap:16px;align-items:center;padding:11px 0}
.ob-g-pesa-a{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
.ob-g-pesa-b{font-size:13.5px;text-align:right;color:var(--ob-apagado);
  font-variant-numeric:tabular-nums}
.ob-g-pesa-pista{position:relative;height:22px}
.ob-g-pesa-hair{position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ob-hairline)}
.ob-g-pesa-union{position:absolute;top:9px;height:4px;background:var(--ob-borde)}
.ob-g-pesa-pt{position:absolute;top:4.5px;width:13px;height:13px;border-radius:999px;
  margin-left:-6px}
.ob-g-pesa-pt-a{background:var(--ob-verde)}
.ob-g-pesa-pt-b{background:var(--ob-serie-gris)}

/* ---------- 2.4 barras enfrentadas (tornado) ----------
   El nombre del canal va en el centro y las dos series crecen hacia fuera.
   width = valor / 75 x 100 (%) */
.ob-g-torn-fila{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,130px) minmax(0,1fr);
  gap:12px;align-items:center;padding:8px 0}
/* Cada lado es una rejilla de dos celdas -la cifra fija y la pista- y no un
   flex. Con flex, el `width:96,5%` de la barra se media contra el lado ENTERO,
   cifra incluida, asi que la fila mas larga se salia de su columna: 213 px de
   contenido en una pista de 197. Ahora el porcentaje se mide contra la celda
   que queda, que es justo la que representa la escala. */
.ob-g-torn-izq{display:grid;grid-template-columns:44px minmax(0,1fr);
  align-items:center;gap:10px}
.ob-g-torn-dcha{display:grid;grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;gap:10px}
.ob-g-torn-izq .ob-g-torn-barra{justify-self:end}
.ob-g-torn-dcha .ob-g-torn-barra{justify-self:start}
.ob-g-torn-izq .ob-g-torn-v{text-align:right}
.ob-g-torn-nombre{font-size:14px;text-align:center}
.ob-g-torn-v{font-size:13px;color:var(--ob-apagado);font-variant-numeric:tabular-nums}
/* `flex:0 0 auto` para que la anchura sea la del dato y no la que sobre. */
.ob-g-torn-barra{height:14px;flex:0 0 auto}
.ob-g-torn-izq .ob-g-torn-barra{background:var(--ob-verde)}
.ob-g-torn-dcha .ob-g-torn-barra{background:var(--ob-serie-gris)}

/* ---------- 3.1 tabla de depuracion ---------- */
.ob-g-tabla{width:100%;border-collapse:collapse}
.ob-g-tabla th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ob-apagado);padding:10px 12px 10px 0;
  border-top:1px solid var(--ob-tinta);border-bottom:1px solid var(--ob-tinta)}
.ob-g-tabla th.ob-col-ent{color:var(--ob-verde)}
.ob-g-tabla td{font-size:14px;padding:12px 12px 12px 0;
  border-bottom:1px solid var(--ob-borde)}
.ob-g-tabla tr:last-child td{border-bottom:0}
.ob-g-tabla .ob-num,.ob-g-tabla th.ob-num{text-align:right;padding-right:0;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.ob-g-tabla tr.ob-fila-clave td{font-weight:700}

/* ---------- 3.3 dispersion ----------
   x = (euros - 36) / 28 x 100 ; y = 100 - (pct - 2,7) / 1,8 x 100 */
.ob-g-disp{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0}
.ob-g-disp-ejey{display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-end;padding-right:8px;height:320px;font-size:11px;
  color:var(--ob-apagado)}
.ob-g-disp-area{position:relative;height:320px;border-left:1px solid var(--ob-tinta);
  border-bottom:1px solid var(--ob-tinta)}
.ob-g-disp-guia{position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ob-hairline)}
.ob-g-disp-pt{position:absolute;width:14px;height:14px;border-radius:999px;
  margin-left:-7px;margin-top:-7px;background:var(--ob-verde)}
.ob-g-disp-pt.ob-es-media{background:var(--ob-tinta)}
.ob-g-disp-pt.ob-g-buscada{background:var(--ob-verde-oscuro)}
/* La etiqueta va a la derecha del punto y se vuelca a la izquierda pasado el
   58% de la anchura, que es donde empezaba a salirse del area. */
.ob-g-disp-et{position:absolute;white-space:nowrap;font-size:14px;line-height:1.25;
  transform:translateY(-50%);padding-left:12px}
.ob-g-disp-et.ob-volcada{padding-left:0;padding-right:12px;text-align:right;
  transform:translate(-100%,-50%)}
.ob-g-disp-et span{display:block;font-size:11.5px;color:var(--ob-apagado)}
.ob-g-disp-ejex{grid-column:2;display:flex;justify-content:space-between;
  padding-top:8px;font-size:11px;color:var(--ob-apagado)}

/* ---------- 4.1 columnas ----------
   height = valor / 460 x 100 (%). La ciudad buscada tine el fondo de su
   columna entera, no solo la barra: asi se ve sin buscarla. */
.ob-g-col-pista{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
  height:250px;border-bottom:1px solid var(--ob-tinta)}
.ob-g-col{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.ob-g-col-v{text-align:center;font-size:17px;font-variant-numeric:tabular-nums}
.ob-g-col-barra{background:var(--ob-verde);flex:0 0 auto}
.ob-g-col.ob-g-buscada{background:var(--ob-verde-suave)}
.ob-g-col.ob-g-buscada .ob-g-col-barra{background:var(--ob-verde-oscuro)}
.ob-g-col-pies{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
  padding-top:10px}
.ob-g-col-nombre{font-size:13.5px;line-height:1.3}
.ob-g-col-det{font-size:11px;line-height:1.4;color:var(--ob-apagado)}

/* ---------- 4.3 barra repartida ----------
   Un segmento por motivo sobre una sola barra de 46px. El porcentaje va dentro
   solo si el segmento pasa del 9% de ancho; por debajo no cabe y estorba. */
.ob-g-rep{display:flex;height:46px;width:100%;overflow:hidden}
.ob-g-rep-seg{display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;overflow:hidden;white-space:nowrap}
.ob-g-rep-leyenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 28px;margin-top:16px}
.ob-g-rep-clave{display:grid;grid-template-columns:13px minmax(0,1fr) auto;
  gap:10px;align-items:center;font-size:14px}
.ob-g-rep-cuadro{width:13px;height:13px}
.ob-g-rep-v{font-size:13.5px;color:var(--ob-apagado);
  font-variant-numeric:tabular-nums}

/* ---------- explorador: la fila ----------
   Tres columnas: el nombre, el valor y la celda de color. La rejilla vive
   aqui y no en el `data-fig` porque el JS del panel repinta estas mismas
   filas al cambiar de fichero, y entonces no hay `data-fig` que valga.

   El valor va con `tabular-nums` para que las cifras de filas distintas caigan
   en la misma columna de digitos; sin eso, una lista ordenada por valor no se
   lee como una lista ordenada. */
.ob-g-exp-fila{display:grid;grid-template-columns:minmax(0,1fr) 68px minmax(0,120px);
  gap:14px;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--ob-borde)}
.ob-g-exp-fila .ob-g-nombre{font-size:14px}
.ob-g-exp-fila .ob-g-val{font-size:13.5px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ob-texto-2)}
.ob-g-exp-fila.ob-g-buscada{background:var(--ob-verde-suave)}
.ob-g-exp-fila.ob-g-buscada .ob-g-nombre{font-weight:700}

/* ---------- explorador: celdas de color ----------
   La rampa es la misma que la del mapa, pero aqui las bandas son QUINTILES de
   la columna que se este mirando, no los cortes absolutos del mapa. El
   explorador ensena cualquier columna de los nueve ficheros -kilometros,
   euros, porcentajes- y pintar kilometros con los cortes de la densidad seria
   un color que no dice nada. */
.ob-g-celda{width:100%;height:20px;border:1px solid rgba(0,0,0,.06)}
.ob-c0{background:var(--ob-rampa-0)}
.ob-c1{background:var(--ob-rampa-1)}
.ob-c2{background:var(--ob-rampa-2)}
.ob-c3{background:var(--ob-rampa-3)}
.ob-c4{background:var(--ob-rampa-4)}
.ob-cx{background:var(--ob-sin-dato)}

/* ---------- la tarjeta del mapa ----------
   El mapa NO se redisena: es el componente que ya existe en el sitio, con sus
   8.123 municipios pintados sin contornos ni libreria, y lo sigue pintando el
   mismo JS. Lo que cambia es el marco: las tres pestanas de vista pasan a una
   barra segmentada con la activa en tinta, se quitan las cuatro de medida
   -el panel fija la unidad en gimnasios por 100.000- y la leyenda de seis
   tramos va debajo.

   Sin las pestanas de medida el JS se queda en su medida por defecto, que es
   justo esa. No hace falta tocarlo. */
/* ---------- la tarjeta del mapa ----------
   El mapa no se redisena: lo pinta el mismo embed que ya sirve la pagina. Lo
   que hay aqui es su marco.

   La tarjeta no lleva padding y lo ponen sus tres franjas, para que la linea
   que separa la barra del lienzo cruce la tarjeta entera. Con padding en la
   tarjeta, esa linea nace y muere a 16px de los bordes y parece un error. */
.ob-grafico{margin:0;background:var(--ob-superficie);border:1px solid var(--ob-borde);
  border-radius:12px;overflow:hidden}
.ob-mapa-lienzo{padding:4px 16px 16px}
.ob-mapa-pie{padding:14px 16px;border-top:1px solid var(--ob-borde)}
.ob-mapa-pie .ob-nota{margin-top:10px}

.ob-mapa-barra{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--ob-borde)}
.ob-vistas{display:inline-flex;gap:2px;background:var(--ob-superficie-2);
  border:1px solid var(--ob-borde);border-radius:8px;padding:3px}
.ob-vista{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ob-texto-2);
  background:transparent;border:0;border-radius:6px;padding:7px 14px;cursor:pointer}
.ob-vista:hover{color:var(--ob-tinta)}
.ob-vista[aria-selected="true"]{background:var(--ob-tinta);color:#ffffff}
.ob-mapa-unidad{font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ob-apagado)}
.ob-mapa{margin-top:14px;min-height:220px}
.ob-mapa svg{width:100%;height:auto;display:block;overflow:visible}
.ob-mapa-punto{stroke:#ffffff;stroke-width:0.25;vector-effect:non-scaling-stroke}
.ob-mapa-celda{stroke:#ffffff;stroke-width:0.4;vector-effect:non-scaling-stroke}
.ob-mapa-caja{fill:none;stroke:var(--ob-borde);stroke-width:1;
  vector-effect:non-scaling-stroke}
.ob-mapa-etiqueta{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:9px;
  fill:var(--ob-apagado)}
.ob-leyenda{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px;margin-top:14px}
.ob-leyenda-tramo{display:flex;flex-direction:column;gap:5px;min-width:88px}
.ob-leyenda-color{height:9px}
.ob-leyenda-txt{font-size:11px;line-height:1.35;color:var(--ob-texto-2);white-space:nowrap}
.ob-leyenda-abs{color:var(--ob-apagado);font-size:10px}
.ob-leyenda-tit{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ob-apagado);margin-right:16px;align-self:flex-end;padding-bottom:20px;
  max-width:150px;line-height:1.45}
/* Las barras del ranking del mapa, que el mismo JS pinta cuando se pulsa esa
   pestana. Gris de serie; el verde lo lleva la media, si la hay. */
.ob-barras{margin-top:16px}
.ob-barra{display:grid;grid-template-columns:150px minmax(0,1fr) 92px;
  align-items:center;gap:14px;padding:4px 0}
.ob-barra-nombre{font-size:13.5px;color:var(--ob-texto-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-align:right}
.ob-barra-pista{display:block;background:var(--ob-hairline);height:18px;overflow:hidden}
/* Los dos son <span>. La pista se blockifica por ser item de rejilla, pero el
   relleno es un span dentro de un span: sigue siendo inline, y un inline
   ignora width y height. */
.ob-barra-relleno{display:block;background:var(--ob-verde);height:100%;min-width:2px;
  transition:width .35s ease}
.ob-barra-valor{font-size:13.5px;font-weight:600;color:var(--ob-tinta);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-cargando{padding:28px 0;color:var(--ob-apagado);font-size:14px}

/* ---------- buscador de ciudad ----------
   Un solo valor para toda la pagina: escribir una ciudad en 1.1 la resalta en
   1.3, 3.3, 4.1 y el explorador. La nota de al lado dice si el indicador tiene
   ese dato o no, que es la mitad de la utilidad. */
.ob-buscaciudad{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ob-buscaciudad input{font-family:inherit;font-size:14px;font-weight:600;
  color:var(--ob-tinta);background:var(--ob-verde-suave);
  border:1px solid var(--ob-verde);border-radius:999px;padding:10px 16px;
  min-width:200px;outline:none}
.ob-buscaciudad input::placeholder{color:var(--ob-apagado);font-weight:500}
.ob-buscaciudad-nota{font-size:12px;color:var(--ob-apagado)}

/* ---------- 3.2 · el recorrido de la cuota ----------
   Una caja sin bigotes: la franja gris es de 0 al maximo observado, la verde
   el 50% central y la linea la mediana. Las tres posiciones las calcula
   `graficos-panel.py`; aqui solo esta como se ve. */
.ob-g-caja{position:relative;height:12px;background:var(--ob-borde)}
.ob-g-caja-iqr{position:absolute;top:0;height:12px;background:var(--ob-verde)}
.ob-g-caja-mediana{position:absolute;top:-5px;width:2px;height:22px;
  background:var(--ob-tinta)}
/* Los rotulos van absolutos, cada uno en la posicion de su valor. El
   `translateX(-50%)` los centra sobre su marca, y los dos extremos se pegan al
   borde para no salirse. */
.ob-g-caja-eje{position:relative;height:18px;margin-top:8px;font-size:12px;
  color:var(--ob-apagado);font-variant-numeric:tabular-nums}
.ob-g-caja-eje span{position:absolute;top:0;transform:translateX(-50%);
  white-space:nowrap}
.ob-g-caja-eje span:first-child{transform:none}
.ob-g-caja-eje span:last-child{transform:translateX(-100%)}

/* ---------- 5.1 · las cifras del sector ----------
   Tres tarjetas y no una tabla: la gracia es enfrentarlas, y la tercera -la
   nuestra- es la unica en verde porque es la que este informe aporta. Las
   otras dos se citan, no se miden aqui. */
.ob-g-sector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ob-g-sector-caja{background:var(--ob-superficie-2);border:1px solid var(--ob-borde);
  border-radius:12px;padding:20px;display:flex;flex-direction:column}
.ob-g-sector-fte{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ob-apagado)}
.ob-g-sector-v{font-family:'Barlow',sans-serif;font-size:32px;font-weight:600;
  line-height:1.05;margin-top:10px}
.ob-g-sector-det{margin-top:10px;font-size:13px;line-height:1.5;
  color:var(--ob-texto-2)}
.ob-g-sector-div{margin-top:auto;padding-top:16px;font-size:13px;font-weight:600;
  color:var(--ob-tinta);border-top:1px solid var(--ob-borde)}
.ob-g-sector-nuestra{background:var(--ob-superficie);border-color:var(--ob-verde)}
.ob-g-sector-nuestra .ob-g-sector-fte,
.ob-g-sector-nuestra .ob-g-sector-v{color:var(--ob-verde)}

/* ============================================================
   LAS FIGURAS POR DEBAJO DE 1000 px
   ============================================================
   Decision de Esteve del 18/09/2026: las figuras se deslizan a lo ancho, no se
   reapilan. El motivo es que la POSICION es el dato en las nueve -de que lado
   del eje sale la barra, donde cae el punto, cuanto separa a los dos corpus- y
   reapilarlas lo tira. Deslizar cuesta un gesto; reapilar cuesta una mentira.

   Como funciona: el hueco donde el generador mete la figura -el `[data-fig]`-
   es el que desliza, y cada fila lleva el ancho minimo por debajo del cual sus
   columnas dejarian de caber. Los minimos son la suma de las pistas fijas de
   cada rejilla mas lo que necesita la flexible para seguir diciendo algo.

   El explorador es la excepcion: sus tres columnas caben en un movil, asi que
   no desliza. Deslizar una tabla que cabe es castigar al lector.

   `overflow-y:hidden` NO se pone: con `overflow-x:auto`, poner el vertical en
   `hidden` recorta las etiquetas del grafico de dispersion, que salen por
   arriba de su punto.
   ============================================================ */
@media (max-width:1000px){
  [data-fig]{overflow-x:auto}

  .ob-g-div-cab,.ob-g-div-fila{min-width:560px}
  .ob-g-pt-cab,.ob-g-pt-fila{min-width:560px}
  .ob-g-pesa-fila{min-width:580px;
    grid-template-columns:minmax(0,240px) 58px 58px minmax(0,1fr)}
  .ob-g-torn-fila{min-width:480px}
  .ob-g-tabla{min-width:560px}
  .ob-g-disp{min-width:520px}
  .ob-g-col-pista,.ob-g-col-pies{min-width:520px}

  /* Estas dos no deslizan: se reparten. */
  .ob-g-sector{grid-template-columns:minmax(0,1fr)}
  .ob-g-rep-leyenda{grid-template-columns:minmax(0,1fr)}

  /* El explorador cabe. */
  #ob-px-tabla{overflow-x:visible}

  /* El aviso de que se puede deslizar. Lo pone el JS, y solo en las figuras que
     de verdad se salen: escrito en el CSS saldria tambien en las que caben. */
  .ob-desliza-aviso{margin-top:10px;font-size:11.5px;color:var(--ob-apagado)}
}

@media (max-width:640px){
  .ob-g-sector-caja{padding:16px}
}