/* =======================================
   NUMERACIÓN DE RUTA (MODERNO)
   ======================================= */

/* Contenedor del número — columna 1 de la grilla de la fila, no overlay,
   para que nunca tape el checkbox */
.orden-badge {
  grid-column: 1;
  justify-self: center;
  display: flex;
  align-items: center;
}

/* Input circular moderno */
.orden-input {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(145deg, #111, #000);
  color: white;
  font-weight: 700;
  font-size: 10px;
  text-align: center;
  outline: none;
  transition: all 0.2s ease;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.25),
    inset 0 -1px 3px rgba(255,255,255,0.1);

  appearance: textfield;
  -moz-appearance: textfield;
}

/* Quitar flechitas */
.orden-input::-webkit-outer-spin-button,
.orden-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hover */
.orden-input:hover {
  transform: scale(1.07);
}

/* Focus */
.orden-input:focus {
  background: linear-gradient(145deg, #ff9800, #ff7a00);
  box-shadow: 
    0 0 0 3px rgba(255,152,0,0.25),
    0 4px 12px rgba(0,0,0,0.3);
}