/* El simulador de guardar y reenviar. Usa la base de gps.css (controles, tabla,
   gráficas) y agrega lo suyo. */

#tabla.tabla-reenvio { min-width: 520px; }
.nota-red { font-size: 15.5px; line-height: 1.6; margin: 16px 0 0; color: var(--suave); }

/* las tres horas de cada dato */
.p-llego { fill: var(--suave); opacity: .75; }
.p-disponible { fill: var(--verde-vivo); opacity: .8; }
.linea-umbral { stroke: var(--ambar); stroke-width: 1.2; stroke-dasharray: 4 3; }
.banda-caida { fill: var(--rojo); opacity: .08; }
.grafica text.caida { fill: var(--rojo); }

/* la cola */
.area-cola { fill: var(--verde); opacity: .25; }
.linea-cola { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linejoin: round; }
.grafica text.pico { fill: var(--texto); }

/* las alertas */
.grafica .fila-nombre { fill: var(--texto); font-family: var(--serif); font-size: 13px; }
.franja { fill: var(--fondo-2); }
.raya { stroke-width: 2; stroke-linecap: round; }
.raya.atiempo { stroke: var(--verde-vivo); }
.raya.destiempo { stroke: var(--ambar); }
.raya.dicha { stroke: var(--suave); }
.raya.falsa { stroke: var(--rojo); }
.raya.real { stroke: var(--texto); }

.leyenda .llego { color: var(--suave); }
.leyenda .disponible { color: var(--verde-vivo); }
.leyenda .umbral { color: var(--ambar); }
.leyenda .atiempo { color: var(--verde-vivo); }
.leyenda .destiempo { color: var(--ambar); }
.leyenda .dicha { color: var(--suave); }
.leyenda .falsa { color: var(--rojo); }
.leyenda .llego::before, .leyenda .disponible::before { width: 7px; height: 7px; border-radius: 50%; }

/* en el teléfono: el nombre arriba y los tres valores debajo, cada uno con su etiqueta */
@media (max-width: 620px) {
  #tabla.tabla-reenvio { min-width: 0; }
  #tabla.tabla-reenvio thead { display: none; }
  #tabla.tabla-reenvio tbody { display: block; }
  #tabla.tabla-reenvio thead tr, #tabla.tabla-reenvio tbody tr { grid-template-columns: repeat(3, 1fr); }
  #tabla.tabla-reenvio td { font-size: 12px; }
  #tabla.tabla-reenvio td[data-col]::before {
    content: attr(data-col); display: block; font-size: 9.5px; color: var(--tenue); font-weight: 400; margin-bottom: 2px;
  }
}