/* La herramienta de latencias. Usa la base de gps.css (controles, tabla,
   gráficas) y agrega lo suyo. */

#tabla.tabla-latencia { min-width: 420px; }
.aviso-carga { font-family: var(--mono); font-size: 13px; color: var(--suave); margin: 14px 0 0; }

/* el archivo propio */
.zona-latencia { display: block; position: relative; border: 1px dashed var(--azul); border-radius: 8px; padding: 20px; margin: 16px 0 0; text-align: center; cursor: pointer; }
.zona-latencia.encima { background: var(--fondo-3); }
.zona-latencia input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona-latencia .zona-titulo { display: block; font-family: var(--mono); font-size: 14.5px; color: var(--texto); }
.zona-latencia .zona-ayuda { display: block; font-size: 13.5px; color: var(--tenue); margin-top: 6px; }

/* colores de cada fase: verde y ámbar, que en el tema de lectura no se confunden */
.barra-h.g0 { fill: var(--verde-vivo); opacity: .85; }
.barra-h.g1 { fill: var(--azul); opacity: .85; }
.barra-h.g2 { fill: var(--suave); opacity: .85; }
.barra-h.g3 { fill: var(--texto); opacity: .7; }
.barra-h:hover { opacity: 1; }
.leyenda .g0 { color: var(--verde-vivo); }
.leyenda .g1 { color: var(--azul); }
.leyenda .g2 { color: var(--suave); }
.leyenda .g3 { color: var(--texto); }
.leyenda .p50 { color: var(--verde-vivo); }
.leyenda .p95 { color: var(--azul); }
.leyenda .contadas { color: var(--texto); }
.leyenda .descartadas { color: var(--ambar); }
.leyenda .timeout { color: var(--rojo); }

.marca-media { stroke: var(--rojo); stroke-width: 2; }
.marca-mediana { stroke: var(--texto); stroke-width: 1.2; stroke-dasharray: 4 3; }
.grafica text.media { fill: var(--rojo); }
.grafica text.mediana { fill: var(--texto); }
.grafica text.unidad { fill: var(--tenue); }

/* la corrida, minuto a minuto */
.linea.p50 { stroke: var(--verde-vivo); }
.linea.p95 { stroke: var(--azul); }
.blanco { fill: transparent; }
.blanco:hover { fill: var(--azul); opacity: .25; }

/* objetivo y timeout */
.linea.contadas { stroke: var(--texto); }
.linea.descartadas { stroke: var(--ambar); stroke-dasharray: 6 4; }
.linea-objetivo { stroke: var(--suave); stroke-width: 1.2; stroke-dasharray: 3 3; }
.linea-timeout { stroke: var(--rojo); stroke-width: 1.5; }
.grafica text.objetivo { fill: var(--suave); }
.grafica text.timeout { fill: var(--rojo); }
.grafica .rejilla.marcada { stroke: var(--tenue); stroke-dasharray: 2 3; }
.llave { stroke: var(--rojo); stroke-width: 2; }
.grafica text.sin-terminar { fill: var(--rojo); }

.casillas { display: flex; flex-wrap: wrap; gap: 0 22px; }
#t-conf, #t-timeout { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 13px; margin-top: 8px; }
#t-conf th, #t-timeout th { font-weight: 400; color: var(--suave); text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--borde); font-size: 12px; }
#t-conf td, #t-timeout td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--borde); }
#t-conf th:first-child, #t-conf td:first-child, #t-timeout th:first-child, #t-timeout td:first-child { text-align: left; }
#t-timeout td:first-child { font-family: var(--serif); font-size: 15px; color: var(--texto); }
#t-conf td.mal, #t-timeout td.mal { color: var(--rojo); }
#t-conf td.ojo, #t-timeout td.ojo { color: var(--ambar); }
#t-timeout td.bien { color: var(--verde-vivo); }
#t-conf tr:last-child td, #t-timeout tr:last-child td { border-bottom: 0; }
.texto-res { font-size: 16px; line-height: 1.6; margin: 0 0 12px; }

/* en el teléfono: el nombre arriba y los valores debajo, cada uno con su etiqueta */
@media (max-width: 620px) {
  #tabla.tabla-latencia { min-width: 0; }
  #tabla.tabla-latencia thead { display: none; }
  #tabla.tabla-latencia tbody { display: block; }
  #tabla.tabla-latencia tbody tr { grid-template-columns: repeat(2, 1fr); }
  #tabla.tabla-latencia.cols-3 tbody tr { grid-template-columns: repeat(3, 1fr); }
  #t-conf thead, #t-timeout thead { display: none; }
  #t-conf tbody, #t-timeout tbody { display: block; }
  #t-conf tr, #t-timeout tr { display: grid; border-bottom: 1px solid var(--borde); padding: 6px 0; }
  #t-conf tr { grid-template-columns: 3em 1fr 1.6fr 1fr; }
  #t-timeout tr { grid-template-columns: 1fr 1fr; }
  #t-timeout td:first-child { grid-column: 1 / -1; padding: 6px 4px 2px; }
  #t-conf td, #t-timeout td { border-bottom: 0; padding: 4px; text-align: left; font-size: 12px; }
  #t-conf td[data-col]::before, #t-timeout td[data-col]::before, #tabla.tabla-latencia td[data-col]::before {
    content: attr(data-col); display: block; font-size: 9.5px; color: var(--tenue); font-weight: 400; margin-bottom: 2px;
  }
}