/* El simulador del camión estacionado. Hereda la paleta de site.css (tema de lectura). */

#simulador fieldset { border: 1px solid var(--borde); border-radius: 6px; padding: 16px 18px 18px; margin: 22px 0; }
#simulador legend { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--verde-vivo); padding: 0 6px; }
#simulador label { display: block; font-size: 14.5px; color: var(--suave); }
#simulador input[type="number"], #simulador select {
  font-family: var(--mono); font-size: 14px; color: var(--texto); background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 4px; padding: 7px 9px; width: 100%; margin-top: 5px;
}
#simulador input:focus, #simulador select:focus { outline: 0; border-color: var(--azul); }
#simulador label.casilla { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; line-height: 1.45; font-family: var(--serif); font-size: 15.5px; color: var(--texto); }
#simulador label.casilla input { margin-top: 4px; accent-color: var(--azul); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 18px; }
.acciones { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }

/* resultados */
.resultado { border: 1px solid var(--azul); border-radius: 6px; padding: 18px 20px; margin: 26px 0; }
.veredicto { font-size: 16.5px; line-height: 1.6; margin: 0 0 16px; }
.tabla-gps { overflow-x: auto; }
#tabla { border-collapse: collapse; width: 100%; min-width: 600px; font-family: var(--mono); font-size: 13px; }
#tabla th { font-weight: 400; color: var(--suave); text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--borde); font-size: 12px; letter-spacing: .04em; }
#tabla th:first-child, #tabla td:first-child { text-align: left; font-family: var(--serif); font-size: 15px; color: var(--texto); }
#tabla td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
#tabla td:first-child { white-space: normal; }
#tabla td.real { color: var(--suave); }
#tabla td.bien { color: var(--verde-vivo); }
#tabla td.mal { color: var(--rojo); }
#tabla td.ojo { color: var(--ambar); }
#tabla tr:last-child td { border-bottom: 0; }

/* gráficas */
.grafica { margin: 26px 0 8px; }
.grafica h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--suave); font-weight: 400; margin: 0 0 4px; }
.grafica p.ayuda { font-size: 14px; color: var(--tenue); margin: 0 0 8px; }
.grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafica text { fill: var(--suave); font-family: var(--mono); font-size: 11px; }
.grafica .rejilla { stroke: var(--borde); stroke-width: 1; }
.grafica .eje { stroke: var(--tenue); stroke-width: 1; }
.linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linea.real { stroke: var(--texto); stroke-dasharray: 5 4; }
.linea.puntos { stroke: var(--rojo); }
.linea.recorte { stroke: var(--ambar); }
.linea.ancla { stroke: var(--verde-vivo); }
.grafica text.real { fill: var(--texto); }
.grafica text.puntos { fill: var(--rojo); }
.grafica text.recorte { fill: var(--ambar); }
.grafica text.ancla { fill: var(--verde-vivo); }
.punto-gps { fill: var(--suave); opacity: .45; }
.punto-gps.malo { fill: var(--tenue); opacity: .35; }
.camino-real { fill: none; stroke: var(--texto); stroke-width: 2; stroke-linejoin: round; }
.radio-ancla { fill: none; stroke: var(--verde-vivo); stroke-width: 1.5; stroke-dasharray: 4 3; }
.marca-recorte { fill: var(--ambar); }
.marca-real { fill: var(--texto); }
.marca-ancla { fill: var(--verde-vivo); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 12px; color: var(--suave); margin-top: 8px; }
.leyenda span::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 7px; vertical-align: middle; background: currentColor; }
.leyenda .real { color: var(--texto); }
.leyenda .puntos { color: var(--rojo); }
.leyenda .recorte { color: var(--ambar); }
.leyenda .ancla { color: var(--verde-vivo); }
.leyenda .gps { color: var(--suave); }

#simulador [hidden] { display: none !important; }

/* en el teléfono, cada fila: el nombre arriba y los cuatro valores debajo */
@media (max-width: 620px) {
  #tabla { min-width: 0; }
  #tabla thead tr, #tabla tbody tr { display: grid; grid-template-columns: repeat(4, 1fr); }
  #tabla th, #tabla td { white-space: normal; padding: 5px 4px; text-align: center; }
  #tabla th:first-child { display: none; }
  #tabla th { font-size: 10.5px; line-height: 1.3; }
  #tabla td:first-child { grid-column: 1 / -1; text-align: left; padding: 10px 4px 2px; border-bottom: 0; font-size: 14.5px; }
  #tabla td { font-size: 12px; }
}