/*
 * Lo propio de `deteccion.php`. El resto lo pone `estilo.css`, que comparten
 * las cinco paginas.
 *
 * ⚠️ Todo lo que el guion conmuta con classList tiene que existir AQUI o en
 * `estilo.css`: una clase que no existe no da error, simplemente no hace nada,
 * y la escena se queda contando otra cosa. `portada.js` lo comprueba.
 */

/* --- las bandas que marcan cada carga sobre la curva --- */
.banda { fill: rgba(88, 166, 255, .10); stroke: none; }
.banda.buena { fill: rgba(63, 185, 80, .13); }
.banda.mala { fill: rgba(248, 81, 73, .13); }

/* --- los cortes: donde el algoritmo decide que una carga acabo --- */
.corte { stroke: var(--bien); stroke-width: 2; }
.corte.dudoso { stroke: var(--aviso); stroke-dasharray: 4 3; }
.corte.perdido { stroke: var(--mal); stroke-dasharray: 4 3; }
.corte-t {
  fill: var(--bien); font: 600 11px/1 var(--mono); text-anchor: middle;
}
.corte-t.dudoso { fill: var(--aviso); }
.corte-t.perdido { fill: var(--mal); }

/* --- los tramos de resistencia: la huella del segundo algoritmo --- */
.calor { fill: rgba(210, 153, 34, .22); stroke: var(--aviso); stroke-width: 1; }
.calor-t { fill: var(--aviso); font: 600 11px/1 var(--mono); text-anchor: middle; }

/* --- el umbral de centrifugado --- */
.nivel { stroke: var(--aviso); stroke-width: 1.5; stroke-dasharray: 6 4; }
.nivel-t {
  fill: var(--aviso); font: 11px/1 var(--mono); text-anchor: end;
}

/* --- la etiqueta de cada carga sobre su banda --- */
.carga-t {
  fill: var(--texto); font: 600 12px/1 system-ui, sans-serif; text-anchor: middle;
}
.carga-t.perdida { fill: var(--mal); }
.eje-t { text-anchor: middle; }

/* --- la lupa: una lectura, un punto --- */
.pt { stroke: none; }
.pt.on { fill: var(--acento); }          /* la maquina consume */
.pt.espera { fill: var(--aviso); }       /* 3-9 W: encendida sin hacer nada */
.pt.off { fill: var(--mal); }            /* 0 W: apagada de verdad */
.pt.spin { fill: var(--bien); }          /* la rampa de centrifugado */
.pt-t { fill: var(--tenue); font: 10px/1 var(--mono); text-anchor: middle; }
.pt-w { fill: var(--texto); font: 10px/1 var(--mono); text-anchor: middle; }
.pt-w.off { fill: var(--mal); font-weight: 600; }
.pt-w.espera { fill: var(--aviso); font-weight: 600; }

/* El hueco donde NO hubo lecturas. Se dibuja como ausencia, no como cero: es
   justo la distincion que costo el algoritmo. */
.hueco { fill: rgba(248, 81, 73, .10); stroke: var(--mal); stroke-width: 1;
         stroke-dasharray: 4 3; }
.hueco-t { fill: var(--mal); font: 600 11px/1 var(--mono); text-anchor: middle; }

/* --- los dos relojes: cuanto espera el sistema segun lo que vio --- */
.reloj-fondo { fill: rgba(127, 150, 190, .16); }
.reloj-barra { fill: var(--bien); }
.reloj-barra.lenta { fill: var(--aviso); }
.reloj-et { fill: var(--texto); font: 12px/1 system-ui, sans-serif; }
.reloj-n { font: 600 12px/1 var(--mono); fill: var(--bien); text-anchor: middle; }
.reloj-n.lenta { fill: var(--aviso); }
.reloj-pie { fill: var(--tenue); font: 11.5px/1 system-ui, sans-serif; }
.reloj-pie.marca { fill: var(--aviso); font-weight: 600; }

/* --- el panel de la regla --- */
.regla-t { fill: var(--texto); font: 13px/1 system-ui, sans-serif; }
.regla-t.bien { fill: var(--bien); }
.regla-t.mal { fill: var(--mal); }
.regla-n { fill: var(--tenue); font: 11.5px/1 var(--mono); }

/* La medida que sostiene el umbral: dos numeros y el hueco entre ellos. */
.medida { fill: var(--tenue); font: 11px/1 var(--mono); text-anchor: middle; }
.medida.bien { fill: var(--bien); font-weight: 600; }
.medida.mal { fill: var(--mal); font-weight: 600; }