/* Esquema animado "hoy / con esto": dos carriles con los pasos de un proceso. Los pasos se encienden uno a
   uno cuando el esquema se ve en pantalla (web/comun/esquema.js). Los pasos hechos a mano llevan la clase
   "mano"; el carril de hoy va más despacio a propósito. Uso en web/propuestas/README.md. */
.esquema { display: grid; gap: 1rem; }
.carril { border-radius: 10px; padding: 1rem 1.1rem; display: grid; gap: 0.75rem; }
.carril.hoy { background: #f5f7f9; }
.carril.con { background: #e6eef6; }
.carril-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.carril-cabeza .nombre { font-weight: 700; font-size: 0.9375rem; }
.carril-cabeza .tiempo { font-size: 0.875rem; color: #5f6b76; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.5s; }
.carril.listo .tiempo { opacity: 1; }
.flujo { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0; }
.flujo li {
  flex: 1 1 0; min-width: 0; position: relative; display: grid; align-content: start; gap: 0.25rem;
  background: #ffffff; border: 1px solid #e3e7eb; border-radius: 8px; padding: 0.6rem 0.65rem;
  font-size: 0.875rem; line-height: 1.35;
  opacity: 0.35; transform: translateY(3px); transition: opacity 0.45s, transform 0.45s, border-color 0.45s, box-shadow 0.45s;
}
.flujo li + li { margin-left: 1.6rem; }
.flujo li + li::before {
  content: "→"; position: absolute; left: -1.3rem; top: 50%; transform: translateY(-50%);
  color: #9aa5b1; font-size: 0.9rem;
}
.flujo li.si { opacity: 1; transform: none; }
.flujo li.ahora { border-color: #1d4f7c; box-shadow: 0 0 0 3px rgba(29, 79, 124, 0.12); }
.flujo .quien { font-size: 0.75rem; font-weight: 600; color: #1d4f7c; }
.flujo li.mano .quien { color: #8a4b08; }
.flujo li.mano { background: #fdf8f1; }
.esquema .leyenda { color: #5f6b76; font-size: 0.8125rem; }

@media (max-width: 36rem) {
  .flujo { flex-direction: column; }
  .flujo li + li { margin-left: 0; margin-top: 1.3rem; }
  .flujo li + li::before { content: "↓"; left: 50%; top: -1.15rem; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .flujo li, .carril-cabeza .tiempo { transition: none; }
}