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

#tabla.tabla-geo { min-width: 660px; }
#tabla.tabla-geo th:last-child, #tabla.tabla-geo td:last-child { font-weight: 600; }
.historial { font-size: 15.5px; line-height: 1.6; margin: 16px 0 0; color: var(--suave); }

/* la semana: una franja por manera */
.grafica .fila-nombre { fill: var(--texto); font-family: var(--serif); font-size: 13px; }
.grafica .dia { fill: var(--suave); }
.franja { fill: var(--fondo-2); }
.raya { stroke-width: 2; stroke-linecap: round; }
.raya.acierto { stroke: var(--verde-vivo); }
.raya.inferida { stroke: var(--verde-vivo); opacity: .45; }
.raya.falsa { stroke: var(--rojo); }
.raya.real { stroke: var(--texto); }
.perdida { fill: none; stroke: var(--ambar); stroke-width: 1.5; }

/* el patio */
.pol-patio { fill: var(--fondo-2); stroke: var(--texto); stroke-width: 1.5; }
.pol-margen { fill: none; stroke: var(--verde-vivo); stroke-width: 1.2; stroke-dasharray: 4 3; }
.pol-grande { fill: none; stroke: var(--ambar); stroke-width: 1.2; stroke-dasharray: 2 4; }
.pos-buena { fill: var(--suave); opacity: .6; }
.pos-marcada { fill: none; stroke: var(--tenue); stroke-width: 1; }
.pos-colada { fill: var(--rojo); }
.lugar { fill: var(--texto); }

.leyenda .acierto { color: var(--verde-vivo); }
.leyenda .inferida { color: var(--verde-vivo); opacity: .55; }
.leyenda .falsa { color: var(--rojo); }
.leyenda .perdida { color: var(--ambar); }
.leyenda .patio { color: var(--texto); }
.leyenda .margen { color: var(--verde-vivo); }
.leyenda .grande { color: var(--ambar); }
.leyenda .buena { color: var(--suave); }
.leyenda .marcada { color: var(--tenue); }
.leyenda .colada { color: var(--rojo); }
/* en la leyenda, lo que en la gráfica es punto o círculo también es punto o círculo */
.leyenda .perdida::before, .leyenda .marcada::before { width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; background: none; }
.leyenda .buena::before, .leyenda .colada::before { width: 7px; height: 7px; border-radius: 50%; }

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